6 |
7 | The example bellow shows a configuration using FontAwesome icons.
8 |
9 |
10 | ## Demo
11 |
12 |
13 |
20 |
21 | ## Code
22 |
23 | ### Typescript
24 |
25 | ```TS```
26 |
27 | ### HTML
28 |
29 | ```HTML```
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/components/vue-datatable/vue-datatable.html:
--------------------------------------------------------------------------------
1 |
14 |
19 |
15 |
18 | |
30 | |
32 |
8 |
22 |
23 | ## Code
24 |
25 | ### Typescript
26 |
27 | ```TS```
28 |
29 | ### HTML
30 |
31 | ```HTML```
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/dist/utils.d.ts:
--------------------------------------------------------------------------------
1 | export declare type TMaybePromise
9 |
21 |
10 |
15 |
16 |
11 |
12 |
13 |
14 |
17 |
20 |
6 |
7 | If you want to customize the behavior of multiple tables, you may want to check how to use custom handlers. You may also want to debounce your data processing to avoid requests spamming.
8 |
9 |
10 | ## Demo
11 |
12 |
13 |
20 |
21 | ## Code
22 |
23 | ### Typescript
24 |
25 | ```TS```
26 |
27 | ### HTML
28 |
29 | ```HTML```
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/dist/components/vue-datatable-pager/vue-datatable-pager-button/vue-datatable-pager-button.d.ts:
--------------------------------------------------------------------------------
1 | import { Vue } from 'vue-property-decorator';
2 | /**
3 | * A control button used by the pager.
4 | */
5 | export declare class VueDatatablePagerButton extends Vue {
6 | /**
7 | * Defines if the button is triggerable or not.
8 | *
9 | * @vue-prop
10 | */
11 | private readonly disabled;
12 | /**
13 | * Represents if the pager button is the currently selected one.
14 | *
15 | * @vue-prop
16 | */
17 | private readonly selected;
18 | /**
19 | * The page index of the button.
20 | *
21 | * @vue-prop
22 | */
23 | private readonly value;
24 | /**
25 | * The [[TableType]] instance provided through [[TableTypeConsumer.tableType]].
26 | *
27 | * @vue Inject `table-type`
28 | */
29 | private readonly tableType;
30 | /** HTML classes to set on list items tags. */
31 | get liClasses(): string[];
32 | /** CSS styles to apply on the list items tags */
33 | get liStyles(): {
34 | cursor: string;
35 | };
36 | /**
37 | * Emits an event if the button is not [[VueDatatablePagerButton.disabled]].
38 | *
39 | * @vue-event vuejs-datatable::set-page.
40 | * @returns Nothing.
41 | */
42 | sendClick(): void;
43 | }
44 |
--------------------------------------------------------------------------------
/dist/themes/components/vue-datatable-pager/vue-datatable-pager-button/vue-datatable-pager-button.d.ts:
--------------------------------------------------------------------------------
1 | import { Vue } from 'vue-property-decorator';
2 | /**
3 | * A control button used by the pager.
4 | */
5 | export declare class VueDatatablePagerButton extends Vue {
6 | /**
7 | * Defines if the button is triggerable or not.
8 | *
9 | * @vue-prop
10 | */
11 | private readonly disabled;
12 | /**
13 | * Represents if the pager button is the currently selected one.
14 | *
15 | * @vue-prop
16 | */
17 | private readonly selected;
18 | /**
19 | * The page index of the button.
20 | *
21 | * @vue-prop
22 | */
23 | private readonly value;
24 | /**
25 | * The [[TableType]] instance provided through [[TableTypeConsumer.tableType]].
26 | *
27 | * @vue Inject `table-type`
28 | */
29 | private readonly tableType;
30 | /** HTML classes to set on list items tags. */
31 | get liClasses(): string[];
32 | /** CSS styles to apply on the list items tags */
33 | get liStyles(): {
34 | cursor: string;
35 | };
36 | /**
37 | * Emits an event if the button is not [[VueDatatablePagerButton.disabled]].
38 | *
39 | * @vue-event vuejs-datatable::set-page.
40 | * @returns Nothing.
41 | */
42 | sendClick(): void;
43 | }
44 |
--------------------------------------------------------------------------------
/src/classes/settings.spec.ts:
--------------------------------------------------------------------------------
1 | import { Settings } from './settings';
2 |
3 | it( 'can retrieve properties', () => {
4 | const settings = new Settings();
5 |
6 | expect( settings.get( 'table.sorting.sortAsc' ) ).toBe( '↓' );
7 | } );
8 |
9 | it( 'can set properties', () => {
10 | const settings = new Settings();
11 | settings.set( 'table.class', 'test-table' );
12 |
13 | expect( settings.get( 'table.class' ) ).toBe( 'test-table' );
14 | } );
15 |
16 | describe( 'Settings merging', () => {
17 | it( 'Should override existing props', () => {
18 | const settings = new Settings();
19 | settings.merge( {
20 | pager: {
21 | classes: {
22 | selected: 'active',
23 | },
24 | },
25 | table: {
26 | class: 'table class',
27 | },
28 | } );
29 |
30 | expect( settings.get( 'table.class' ) ).toBe( 'table class' );
31 | expect( settings.get( 'table.sorting.sortAsc' ) ).toBe( '↓' );
32 | expect( settings.get( 'pager.classes.selected' ) ).toBe( 'active' );
33 | expect( settings.get( 'pager.classes.disabled' ) ).toBe( 'disabled' );
34 | expect( settings.get( 'pager.icons.previous' ) ).toBe( '<' );
35 | } );
36 | it( 'Should merge new props', () => {
37 | const settings = new Settings();
38 | settings.merge( {
39 | foo: {
40 | bar: 'baz',
41 | },
42 | } as any );
43 |
44 | expect( settings.get( 'foo.bar' ) ).toBe( 'baz' );
45 | expect( settings.get( 'table.sorting.sortAsc' ) ).toBe( '↓' );
46 | } );
47 | } );
48 |
--------------------------------------------------------------------------------
/src/components/vue-datatable-cell/vue-datatable-cell.ts:
--------------------------------------------------------------------------------
1 | import { Component, Prop, Vue } from 'vue-property-decorator';
2 |
3 | import { Column } from '../../classes/column';
4 | import { TClassVal } from '../../utils';
5 |
6 | import template from './vue-datatable-cell.html';
7 |
8 | /**
9 | * This component is responsible of the display of a single table cell.
10 | */
11 | @Component( {
12 | ...template,
13 | } )
14 | export class VueDatatableCell
14 |
19 |
15 |
18 |
5 |
20 |
21 |
22 |
23 |
24 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/dist/components/vue-datatable-header/vue-datatable-header.d.ts:
--------------------------------------------------------------------------------
1 | import { Vue } from 'vue-property-decorator';
2 | /**
3 | * A control button used by the pager.
4 | */
5 | export declare class VueDatatableHeader
6 |
19 |
7 |
13 |
14 |
8 |
9 |
10 | {{filter}}
11 |
12 |
15 |
18 | data function)"
20 | }
21 | }
22 | },
23 | "customize": {
24 | "title": "Tables customization",
25 | "Description": "Adapt the plugin's appearance the way you want",
26 | "children": {
27 | "custom-template": {
28 | "title": "Custom template",
29 | "description": "Change the way HTML is built"
30 | },
31 | "custom-theme": {
32 | "title": "Custom theme",
33 | "description": "See how to set custom themes on your data tables.",
34 | "children": {
35 | "prebuilt-theme": {
36 | "title": "Prebuilt theme"
37 | }
38 | }
39 | }
40 | }
41 | },
42 | "multiple-tables": {
43 | "title": "Multiple tables"
44 | },
45 | "no-pager": {
46 | "title": "No pager"
47 | },
48 | "limit-rows-processing": {
49 | "title": "Limit rows processing"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/vue-datatable-pager/vue-datatable-pager.html:
--------------------------------------------------------------------------------
1 |
66 |
--------------------------------------------------------------------------------
/tutorials/src/custom-theme/demo.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import { TColumnsDefinition, VuejsDatatableFactory } from 'vuejs-datatable';
3 |
4 | import { IPeople } from '../utils';
5 |
6 | VuejsDatatableFactory.useDefaultType( false )
7 | .registerTableType( 'datatable', tableType => tableType.mergeSettings( {
8 | table: {
9 | class: 'table table-hover table-striped',
10 | sorting: {
11 | sortAsc: '',
12 | sortDesc: '',
13 | sortNone: '',
14 | },
15 | },
16 | pager: {
17 | classes: {
18 | pager: 'pagination text-center',
19 | selected: 'active',
20 | },
21 | icons: {
22 | next: '',
23 | previous: '',
24 | },
25 | },
26 | } ) );
27 |
28 | // Defined on window
29 | declare var rows: IPeople[];
30 |
31 | const app = new Vue( {
32 | el: '#demo-app',
33 | data: {
34 | filter: '',
35 | columns: [
36 | { label: 'id', field: 'id' },
37 | { label: 'Username', field: 'user.username' },
38 | { label: 'First Name', field: 'user.first_name' },
39 | { label: 'Last Name', field: 'user.last_name' },
40 | { label: 'Email', field: 'user.email' },
41 | {
42 | label: 'Address',
43 | representedAs: row => `${ row.address }${ row.city }, ${ row.state }`, 44 | interpolate: true, 45 | sortable: false, 46 | filterable: false, 47 | }, 48 | ] as TColumnsDefinition
6 |
7 | To customize further the classes & HTML content of the table type, please see the tutorial about custom themes.
8 |
9 |
10 | ## Demo
11 |
12 |
13 |
25 |
26 |
34 |
35 |
36 | ## Code
37 |
38 | ### Typescript
39 |
40 | ```TS```
41 |
42 | ### HTML
43 |
44 | ```HTML```
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/__tests__/helpers/utils.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | // helper for async assertions.
4 | // Use like this:
5 | //
6 | // vm.a = 123
7 | // waitForUpdate(() => {
8 | // expect(vm.$el.textContent).toBe('123')
9 | // vm.a = 234
10 | // })
11 | // .then(() => {
12 | // // more assertions...
13 | // })
14 | // .then(done)
15 | export const waitForUpdate = ( initialCb?: Function ) => {
16 | let end;
17 | const queue = initialCb ? [ initialCb ] : [];
18 |
19 | function shift() {
20 | const job = queue.shift();
21 | if ( queue.length ) {
22 | let hasError = false;
23 | try {
24 | job.wait ? job( shift ) : job();
25 | } catch ( e ) {
26 | hasError = true;
27 | const done = queue[queue.length - 1];
28 | if ( done && done.fail ) {
29 | done.fail( e );
30 | }
31 | }
32 | if ( !hasError && !job.wait ) {
33 | if ( queue.length ) {
34 | Vue.nextTick( shift );
35 | }
36 | }
37 | } else if ( job && ( job.fail || job === end ) ) {
38 | job(); // done
39 | }
40 | }
41 |
42 | Vue.nextTick( () => {
43 | if ( !queue.length || ( !end && !queue[queue.length - 1].fail ) ) {
44 | throw new Error( 'waitForUpdate chain is missing .then(done)' );
45 | }
46 | shift();
47 | } );
48 |
49 | const chainer = {
50 | then: nextCb => {
51 | queue.push( nextCb );
52 | return chainer;
53 | },
54 | thenWaitFor: wait => {
55 | if ( typeof wait === 'number' ) {
56 | wait = timeout( wait );
57 | }
58 | wait.wait = true;
59 | queue.push( wait );
60 | return chainer;
61 | },
62 | end: endFn => {
63 | queue.push( endFn );
64 | end = endFn;
65 | },
66 | };
67 |
68 | return chainer;
69 | };
70 |
71 | export const timeout = n => next => setTimeout( next, n );
72 |
--------------------------------------------------------------------------------
/tutorials/src/no-pager/index.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | The [VueDatatablePager](../classes/vuedatatablepager.html) is the component in charge of controling pagination of a [VueDatatable](../classes/vuedatatable.html).
4 |
5 | If you do not link a [VueDatatablePager](../classes/vuedatatablepager.html) to your [VueDatatable](../classes/vuedatatable.html), then the table will show all rows without pagination, without taking into account the `per-page` prop.
6 |
7 |
14 |
21 |
15 |
20 |
16 |
17 |
18 |
19 |
22 |
24 |
8 |
9 | Check out the Pager types tutorial to see the different aspects available for the pager. You can also learn more on how to manage multiple tables with pagers on the same page.
10 |
11 |
12 | ## Demo
13 |
14 |
15 |
28 |
29 | ## Code
30 |
31 | ### Typescript
32 |
33 | ```TS```
34 |
35 | ### HTML
36 |
37 | ```HTML```
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/tutorials/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { Dictionary, isArray } from 'lodash';
2 | import { Path } from 'object-path';
3 |
4 | const padLeft0 = ( str: string | number, targetLength: number ) => '0'.repeat( targetLength - `${ str }`.length ) + str;
5 | export const makeQueryStringFromObj = ( obj: Dictionary
16 |
27 |
17 |
22 |
23 |
18 |
19 |
20 |
21 |
24 |
26 |
8 |
9 | If you want to customize the behavior of your table for a single use, you may want to check the use of the
11 |
12 | ## Demo
13 |
14 | data function. You may also want to debounce your data processing to avoid requests spamming.
10 |
15 |
28 |
29 | ## Code
30 |
31 | ### Typescript
32 |
33 | ```TS```
34 |
35 | ### HTML
36 |
37 | ```HTML```
38 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/tutorials/src/prebuilt-theme/index.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | This version of VueJS Datatable is shipped with a couple of presets for CSS framework you can use.
4 |
5 | For now, following themes are available:
6 |
7 | * bootstrap-3
8 | * bootstrap-4
9 |
10 | Once loaded, you can use the themed components named `${theme}-datatable` for the table, and `${theme}-datatable-pager` for the pager.
11 |
12 | You can load up a theme using either
13 |
14 | * the *ESM* version if importing it through a javascript file
15 |
16 | ```ts
17 | import 'vuejs-datatable/dist/themes/bootstrap-3.esm';
18 | ```
19 |
20 | * the *IIFE* version if loading the theme directly, like via a CDN.
21 |
22 | ```html
23 |
24 |
25 | ```
26 |
27 | ## Demo
28 |
29 |
16 |
27 |
17 |
21 | Past launches
18 |
22 |
26 | Upcoming launches
23 |
30 |
31 | Even if you see nothing particular with the table below, you can see using your browser's inspector that it has the class
33 |
34 | table, which is defined by the bootstrap-3 theme.
32 |
35 |
44 |
45 | ## Code
46 |
47 | ### Typescript
48 |
49 | ```TS```
50 |
51 | ### HTML
52 |
53 | ```HTML```
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/docs/assets/css/additional-styles.css:
--------------------------------------------------------------------------------
1 | #demo-app nav>.pagination{position:relative;display:inline-block;vertical-align:middle}#demo-app nav>.pagination>li{position:relative;color:#fff;background-color:#337ab7;border-color:#2e6da4;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}#demo-app nav>.pagination>li.active{background-color:#286090;border-color:#204d74}#demo-app nav>.pagination>li:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}#demo-app nav>.pagination>li:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}#demo-app nav>.pagination>li:not(:first-child):not(:last-child){border-radius:0}#demo-app nav>.pagination>li:first-child{margin-left:0}#demo-app nav>.pagination>li>span:focus,#demo-app nav>.pagination>li>span:hover{color:inherit;background:none}#demo-app nav>.pagination>li>span{border:none;background:none;color:inherit;padding:0;margin:0}#demo-app.tutorial-pager-types .pagers-table{display:grid;grid-template-columns:1fr 1fr;margin-top:15px}#demo-app.tutorial-pager-types .pagers-table ul{padding:0;margin:0 0 5px}#demo-app .pagination-no-margin .pagination{margin:0}dl.inlined-elements{display:table}dl.inlined-elements>div{display:table-row}dl.inlined-elements>div>dt,dl.inlined-elements>div>dd{display:table-cell}dl.inlined-elements>div>dt::after{content:" :\00A0"}.alert{padding:10px;margin:10px 0;border:1px solid transparent;border-radius:10px;box-shadow:0 0 4px rgba(0,0,0,0.25)}.alert.alert-warning{background-color:rgba(254,209,56,0.4);border-color:#fed035}.alert.alert-info{background-color:rgba(0,132,255,0.4);border-color:#0082fc}
2 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration
2 | // Generated on Thu Jul 27 2017 20:25:47 GMT-0500 (CDT)
3 |
4 | module.exports = function(config) {
5 | config.set({
6 |
7 | // base path that will be used to resolve all patterns (eg. files, exclude)
8 | basePath: '',
9 |
10 |
11 | // frameworks to use
12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13 | frameworks: ['jasmine'],
14 |
15 |
16 | // list of files / patterns to load in the browser
17 | files: [
18 | // 'src/**/*.js',
19 | 'tests/spec/index.js'
20 | ],
21 |
22 |
23 | // list of files to exclude
24 | exclude: [
25 | ],
26 |
27 |
28 | // preprocess matching files before serving them to the browser
29 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
30 | preprocessors: {
31 | },
32 |
33 |
34 | // test results reporter to use
35 | // possible values: 'dots', 'progress'
36 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter
37 | reporters: ['progress'],
38 |
39 |
40 | // web server port
41 | port: 9876,
42 |
43 |
44 | // enable / disable colors in the output (reporters and logs)
45 | colors: true,
46 |
47 |
48 | // level of logging
49 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
50 | logLevel: config.LOG_INFO,
51 |
52 |
53 | // enable / disable watching file and executing tests whenever any file changes
54 | autoWatch: true,
55 |
56 |
57 | // start these browsers
58 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
59 | browsers: ['Chrome'],
60 |
61 |
62 | // Continuous Integration mode
63 | // if true, Karma captures browsers, runs the tests and exits
64 | singleRun: false,
65 |
66 | // Concurrency level
67 | // how many browser should be started simultaneous
68 | concurrency: Infinity
69 | })
70 | }
71 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 |
2 | export type TMaybePromise
36 |
41 |
37 |
40 |
42 |
43 | -
8 |
- debouncing
- runs after a cooldown of n ms
- throttling
- runs at most every n ms
17 |
18 | See the ajax tutorial via data function or custom handlers for a more detailed example of AJAX data querying.
19 |
20 |
21 | ## Demo
22 |
23 |
24 |
41 |
42 | ## Code
43 |
44 | ### Typescript
45 |
46 | ```TS```
47 |
48 | ### HTML
49 |
50 | ```HTML```
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/ci/spawn-exec.ts:
--------------------------------------------------------------------------------
1 | import { ChildProcess, exec, spawn } from 'child_process';
2 | import { logDebug } from './log';
3 |
4 | export const spawnStream = async ( cmd: string, args: string[], attachOuts?: boolean ) => {
5 | const prefix = `${cmd} ${args.join( ' ' )}`;
6 | const cmdProcess = spawn( cmd, args );
7 | return streamChildProcess( cmdProcess, prefix, attachOuts );
8 | };
9 | export const execStream = async ( cmd: string, attachOuts?: boolean ) => {
10 | const cmdProcess = exec( cmd );
11 | return streamChildProcess( cmdProcess, cmd, attachOuts );
12 | };
13 |
14 | const loggableData = ( buffer: Buffer ) => buffer.toString().replace( /\r?\n$/, '' );
15 | const formatOutputText = ( prefix: string, data: string | Buffer ) => {
16 | const dataStr = typeof data === 'string' ? data : loggableData( data );
17 | const padLeft = prefix.replace( /.(?!$)/g, ' ' ).replace( /.$/g, '|' ) + ' ';
18 | return `${prefix} ${dataStr.replace( /\r?\n/g, '\n' + padLeft )}`;
19 | };
20 |
21 | const streamChildProcess = async ( child: ChildProcess, logPrefix: string, attachOuts = false ) => new Promise
25 |
38 |
26 |
31 |
32 |
33 |
27 |
28 |
29 |
30 |
34 |
37 |
39 |
40 |
6 |
7 | Check out the Pager styles tutorial to see the different aspects available for the pager.
8 | If you want to dynamically generate names from the host component, you can use the
10 |
11 | 8 | If you want to dynamically generate names from the host component, you can use the
$vnode.tag property (TODO: Find a link or reference explaining what is this property, exactly... If you got a reference, please post a PR ;) ).
9 |
12 |
13 | If the relation between the table and the pager is broken, the table will be displayed in no pager mode.
14 |
15 |
16 | ## Demo
17 |
18 |
19 |
44 |
45 | ## Code
46 |
47 | ### Typescript
48 |
49 | ```TS```
50 |
51 | ### HTML
52 |
53 | ```HTML```
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/__tests__/e2e/plugins/index.js:
--------------------------------------------------------------------------------
1 | const { writeFile: _writeFile, access } = require( 'fs' );
2 | const { dirname, resolve: resolvePath } = require( 'path' );
3 | const { exec } = require( 'child_process' );
4 | const mkdirp = require( 'mkdirp' );
5 | const { F_OK } = require( 'constants' );
6 |
7 | const { rollup } = require( 'rollup' );
8 | const typescript = require( 'rollup-plugin-typescript2' );
9 | const resolve = require( 'rollup-plugin-node-resolve' );
10 | const commonjs = require( 'rollup-plugin-commonjs' );
11 | const replace = require( 'rollup-plugin-replace' );
12 |
13 | const writeFile = ( path, data, opts ) => new Promise( ( res, rej ) => _writeFile( path, data, opts, err => err ? rej( err ) : res() ) );
14 | const mkdir = ( path, opts ) => new Promise( ( res, rej ) => mkdirp( path, opts, err => err ? rej( err ) : res() ) );
15 |
16 | module.exports = on => {
17 | // Trigger build if the module is not already built
18 | on( 'before:browser:launch', () => {
19 | return new Promise( ( res, rej ) => {
20 | access( resolvePath( '../../../dist/vuejs-datatable.js' ), F_OK, err => {
21 | if ( err ) {
22 | console.log( 'Missing built library, build it on-the-fly.' );
23 | exec( 'npm run build', err2 => {
24 | if ( err2 ) {
25 | console.error( 'Build failed !' );
26 | return rej( err2 );
27 | } else {
28 | console.info( 'Build succeeded !' );
29 | return res();
30 | }
31 | } );
32 | } else {
33 | return res();
34 | }
35 | } );
36 | });
37 | }),
38 | on( 'file:preprocessor', async file => {
39 | const confBundle = await rollup( {
40 | input: file.filePath,
41 | plugins: [
42 | typescript( {
43 | objectHashIgnoreUnknownHack: true,
44 | clean: true,//environment === 'production',
45 | tsconfigOverride: require('../tsconfig.json')
46 | } ),
47 | resolve( {
48 | extensions: [ '.ts', '.js', '.json' ],
49 | browser: true,
50 | } ),
51 | commonjs( {
52 | namedExports: {
53 | // left-hand side can be an absolute path, a path
54 | // relative to the current directory, or the name
55 | // of a module in node_modules
56 | 'object-path': [ 'get', 'set' ],
57 | },
58 | } ),
59 | replace( {
60 | 'process.env.NODE_ENV': JSON.stringify( 'production' ),
61 | } ),
62 | ]
63 | } );
64 | const outBundle = await confBundle.generate( { format: 'iife' } );
65 | const { output: [{ code }] } = outBundle;
66 | const outFileName = file.outputPath.replace( /\.ts(x?)$/, '-out-bundled.js$1' );
67 | const outDirName = dirname( outFileName );
68 | await mkdir( outDirName );
69 | await writeFile( outFileName, code );
70 | return outFileName;
71 | })
72 | }
73 |
--------------------------------------------------------------------------------
/src/components/vue-datatable-header/vue-datatable-header.ts:
--------------------------------------------------------------------------------
1 | import { Component, Inject, Model, Prop, Vue } from 'vue-property-decorator';
2 |
3 | import { Column, ESortDir, TableType } from '../../classes';
4 |
5 | import template from './vue-datatable-header.html';
6 |
7 | /**
8 | * A control button used by the pager.
9 | */
10 | @Component( {
11 | ...template,
12 | } )
13 | export class VueDatatableHeader
20 |
31 |
21 |
26 |
22 |
23 |
24 |
25 |
27 |
30 |
32 |
43 |
33 |
38 |
34 |
35 |
36 |
37 |
39 |
42 | 
`,
25 | sortable: false,
26 | },
27 | {
28 | field: 'links.reddit_campaign',
29 | interpolate: true,
30 | label: 'Reddit link',
31 | representedAs: row => `${ row.mission_name } Reddit thread`,
32 | sortable: false,
33 | },
34 | ] as TColumnsDefinition`,
61 | sortable: false,
62 | },
63 | {
64 | field: 'links.reddit_campaign',
65 | interpolate: true,
66 | label: 'Reddit link',
67 | representedAs: row => `${ row.mission_name } Reddit thread`,
68 | sortable: false,
69 | },
70 | ] as TColumnsDefinition