import { Vue , Component , Prop , Watch } from 'vue-property-decorator' ; import GlobalClick from '@/directives/global-click' ; import $ from 'jquery' ; export const DEFAULT_LENGTH_MENU = [ 5 , 10 , 20 , 50 , 100 ] ; @ Component ( { directives : { GlobalClick } } ) export default class DataTable extends Vue { @ Prop ( ) private config ! : DataTables . Settings ; /**
     * Mapping from table row index to the id of the data item in that row.
     * If rowIds are set, the table will emit item ids on selection.
     * If rowIds are not set, the table will emit row indices on selection.
     */ @ Prop ( ) private rowIds ! : Array < number | string > ; private table : DataTables . Api | null = null ; @ Watch ( 'config' ) private onConfigChange ( ) { if ( this . table ) { /**
             * DataTables does not work with leftover DataTables element.
             * If we do not destory() with "true", DataTables would have difficulty to re-initialize DataTable() and
             * will trigger errors when table columns change:
             *    TypeError: Cannot read property 'style' of undefined
             */ this . table . destroy ( true ) ; } if ( ! this . config . data ) { return ; } this . table = $ ( this . $refs . table ) . clone ( ) . appendTo ( this . $el ) . DataTable ( this . config ) ; this . table . rows ( '.selected' ) . select ( ) ; this . table . on ( 'select' , ( evt , dt , type , indices ) => { if ( type === 'row' ) { this . $emit ( 'selectRow' , this . rowIds ? indices . map ( index => this . rowIds [ index ] ) : indices ) ; } } ) ; this . table . on ( 'deselect' , ( evt , dt , type , indices ) => { if ( type === 'row' ) { this . $emit ( 'deselectRow' , this . rowIds ? indices . map ( index => this . rowIds [ index ] ) : indices ) ; } } ) ; } /**
     * Mitigates the problem of search input box not blurred when clicking outside the node.
     */ private globalClick ( evt ) { const target = evt . target as Element ; if ( this . $el . contains ( target ) ) { return ; } $ ( this . $el ) . find ( '.form-control[type=search]' ) . blur ( ) ; } }