chore: 🤖 release 2.0.0-alpha.7 from 2.0.0-alpha.6

[skip ci]

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.0.0-alpha.7](https://github.com/GerkinDev/vuejs-datatable/compare/v2.0.0-alpha.6...v2.0.0-alpha.7) (2019-12-29)
+
 ## [2.0.0-alpha.6](https://github.com/GerkinDev/vuejs-datatable/compare/v2.0.0-alpha.5...v2.0.0-alpha.6) (2019-12-16)
 
 ## [2.0.0-alpha.5](https://github.com/GerkinDev/vuejs-datatable/compare/v2.0.0-alpha.4...v2.0.0-alpha.5) (2019-12-02)

README.md

@@ -19,6 +19,7 @@ E2E testing over Travis realized using
 [<img src="https://i1.wp.com/www.diogonunes.com/blog/wp-content/uploads/2016/07/browserstack-logo.png?resize=490%2C105" height="105.6" width="490.1" class="img-responsive"/>](https://www.browserstack.com/)
 
 [:point_right: Browse the documentation :books:](https://gerkindev.github.io/vuejs-datatable/)
+[:point_right: Check out the tutorials :books:](https://gerkindev.github.io/vuejs-datatable/tutorials/index.html)
 
 ---
 

dist/classes/column.d.ts

@@ -1,6 +1,6 @@
 import { Path } from 'object-path';
 import Vue, { Component } from 'vue';
-import { EColAlign } from '../utils';
+import { EColAlign, TClassVal } from '../utils';
 /**
  * Description of a single column of a datatable.
  *
@@ -61,12 +61,18 @@ export interface IColumnDefinition<TRow> {
     /**
      * The base CSS class to apply to the header component.
      */
-    headerClass?: string;
+    headerClass?: TClassVal;
+    /**
+     * The CSS class or a function returning CSS class(es) for cells of this column.
+     */
+    class?: TClassVal | ((row: TRow) => TClassVal);
 }
 /**
  * A class responsible for handling a full column with its header.
  */
 export declare class Column<TRow extends {}> {
+    /** The CSS class or a function returning CSS class(es) for cells of this column. */
+    readonly class: TClassVal | ((row: TRow) => TClassVal) | null;
     /** The alignment direction of the cells in this column. */
     readonly align: EColAlign;
     /** The component used to represent this cell. */

dist/classes/table-type.d.ts

@@ -11,7 +11,7 @@ export declare class TableType<TRow extends {}, TSource = TRow[], TFiltered = TR
     readonly handler: IHandler<TRow, TSource, TFiltered, TSorted, TPaged>;
     /** Settings object used to get various values for the datatable & other components */
     readonly settings: Settings;
-    readonly tableTypeConsumer: import("vue").VueConstructor<import("vue-property-decorator").Vue> & (new () => import("../components/mixins/table-type-consumer-factory").ITableTypeConsumer);
+    get tableTypeConsumer(): import("vue").VueConstructor<import("vue-property-decorator").Vue> & (new () => import("../components/mixins/table-type-consumer-factory").ITableTypeConsumer);
     /**
      * Creates a new datatable type, instanciating a new [[Settings]] object.
      *

dist/components/vue-datatable-cell/vue-datatable-cell.d.ts

@@ -1,4 +1,5 @@
 import { Vue } from 'vue-property-decorator';
+import { TClassVal } from '../../utils';
 /**
  * This component is responsible of the display of a single table cell.
  */
@@ -11,9 +12,10 @@ export declare class VueDatatableCell<TRow extends {}> extends Vue {
      * The representation of the row in the current column.
      * You can customize the cell content by changing [[IColumnDefinition.field]] or [[IColumnDefinition.representedAs]]
      */
-    readonly content: string;
+    get content(): string;
     /** The styles to apply to this cell */
-    readonly cellStyles: {
+    get cellStyles(): {
         [key: string]: string;
     };
+    get cellClass(): TClassVal | undefined;
 }

dist/components/vue-datatable-header/vue-datatable-header.d.ts

@@ -6,13 +6,13 @@ export declare class VueDatatableHeader<TRow extends {}> extends Vue {
     /**
      * The current sort direction for the current column.
      *
-     * @vue Model
+     * @vue-model
      */
     private readonly direction;
     /**
      * The [[Column]] instance this header is for.
      *
-     * @vue Prop
+     * @vue-prop
      */
     private readonly column;
     /**
@@ -22,17 +22,19 @@ export declare class VueDatatableHeader<TRow extends {}> extends Vue {
      */
     private readonly tableType;
     /** `true` if this column is sortable. */
-    private readonly canSort;
+    private get canSort();
     /** `true` if this column is sorted in *ascending* mode. */
-    private readonly isSortedAscending;
+    private get isSortedAscending();
     /** `true` if this column is sorted in *descending* mode. */
-    private readonly isSortedDescending;
+    private get isSortedDescending();
     /** Get the HTML content of the header's sort icon */
-    readonly sortButtonHtml: string;
+    get sortButtonHtml(): string;
     /**
      * Toggles the sort order, looping between states `null => 'asc' => 'desc'`.
      *
-     * @emits change
+     * @vue-event change Emitted when the sort direction or column is changed.
+     * @vue-event-param change newDirection <ESortDir | null> - The new direction.
+     * @vue-event-param change sortedColumn <Column> - The column the sort is done on.
      * @returns nothing.
      */
     toggleSort(): void;

dist/components/vue-datatable-pager/vue-datatable-pager-button/vue-datatable-pager-button.d.ts

@@ -6,19 +6,19 @@ export declare class VueDatatablePagerButton extends Vue {
     /**
      * Defines if the button is triggerable or not.
      *
-     * @vue Prop
+     * @vue-prop
      */
     private readonly disabled;
     /**
      * Represents if the pager button is the currently selected one.
      *
-     * @vue Prop
+     * @vue-prop
      */
     private readonly selected;
     /**
      * The page index of the button.
      *
-     * @vue Prop
+     * @vue-prop
      */
     private readonly value;
     /**
@@ -28,15 +28,15 @@ export declare class VueDatatablePagerButton extends Vue {
      */
     private readonly tableType;
     /** HTML classes to set on list items tags. */
-    readonly liClasses: string[];
+    get liClasses(): string[];
     /** CSS styles to apply on the list items tags */
-    readonly liStyles: {
+    get liStyles(): {
         cursor: string;
     };
     /**
      * Emits an event if the button is not [[VueDatatablePagerButton.disabled]].
      *
-     * @emits vuejs-datatable::set-page.
+     * @vue-event vuejs-datatable::set-page.
      * @returns Nothing.
      */
     sendClick(): void;

dist/components/vue-datatable-pager/vue-datatable-pager.d.ts

@@ -9,50 +9,50 @@ export declare class VueDatatablePager<TSub extends VueDatatablePager<TSub>> ext
     /**
      * The id of the associated [[VueDatatable]].
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly table: string;
     /**
      * The kind of the pager
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly type: EPagerType;
     /**
      * The number of pages visible on each side (only for [[EPageType.Abbreviated]])
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly sidesCount: number;
-    readonly sidesIndexes: number[];
+    get sidesIndexes(): number[];
     private ptableInstance;
-    readonly tableInstance: VueDatatable<any, any>;
+    get tableInstance(): VueDatatable<any, any>;
     /** Returns `true` if the pager has an associated [[VueDatatable]] with some rows. */
-    readonly show: boolean;
+    get show(): boolean;
     /** The total number of rows in the associated [[VueDatatable]]. */
-    private readonly totalRows;
+    private get totalRows();
     /** The total number of pages in the associated [[VueDatatable]]. */
     totalPages: number;
     /** The current page index in the associated [[VueDatatable]]. */
     page: number;
     /** HTML class on the wrapping `ul` around the pager buttons. */
-    readonly paginationClass: string;
+    get paginationClass(): string;
     /** HTML content of the previous page's button. */
-    readonly previousIcon: string;
+    get previousIcon(): string;
     /** HTML content of the next page's button. */
-    readonly nextIcon: string;
+    get nextIcon(): string;
     protected readonly tableType: TableType<any>;
-    readonly identifier: string;
+    get identifier(): string;
     /**
      * Try to link the pager with the table, or bind the `vuejs-datatable::ready` event to watch for new tables addition.
      */
     created(): void;
     /**
      * Link the pager with the table, assign to the table some properties, and trigger an event on the table.
      *
-     * @emits VueDatatable.vuejs-datatable::pager-bound
-     * @emits VueDatatable.vuejs-datatable::page-count-changed
-     * @emits VueDatatable.vuejs-datatable::page-changed
+     * @vue-event VueDatatable.vuejs-datatable::pager-bound
+     * @vue-event VueDatatable.vuejs-datatable::page-count-changed
+     * @vue-event VueDatatable.vuejs-datatable::page-changed
      * @param tableName - The name of the table to bind the pager with.
      * @returns `true` if the link is succesfull, or `false` if it could not find a table to associate with.
      */

dist/components/vue-datatable/vue-datatable.d.ts

@@ -23,50 +23,70 @@ export interface ITableContentParam<TRow extends {}> {
 }
 export declare type TDataFn<TRow extends {}> = ((search: IDataFnParams<TRow>) => ITableContentParam<TRow>);
 export declare type TColumnsDefinition<TRow extends {}> = Array<IColumnDefinition<TRow>>;
+interface IPageRange {
+    /** Index of the first element of the page. 1-indexed */
+    from: number;
+    /** Index of the last element of the page. 1-indexed */
+    to: number;
+    /** The total number of items */
+    of: number;
+}
 /**
  * The main component of the module, used to display a datatable.
+ *
+ * @vue-slot no-results Shown only if no rows are displayed
+ *
+ * @vue-slot default Used to render each row
+ * @vue-slot-param default row <TRow> - The current row to display.
+ * @vue-slot-param default index <number> - The current row index.
+ * @vue-slot-param default columns <Column[]> - The list of columns.
+ *
+ * @vue-slot footer Displayed at the bottom of the table.
+ * @vue-slot-param footer rows <TRow[]> - The current list of displayed rows.
+ * @vue-slot-param footer pagination <IPageRange> - The current pagination range of the table.
+ * @vue-slot-param footer columns <Column[]> - The list of columns.
  */
 export declare class VueDatatable<TRow extends {}, TSub extends VueDatatable<TRow, TSub>> extends Vue {
     /**
      * The name of the datatable. It should be unique per page.
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly name: string;
     /**
      * Set to `true` to defer the initialization of the table after a pager has been attached. It may resolve issues related to double execution of data function.
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly waitForPager: boolean;
     /**
      * List of columns definitions displayed by this datatable.
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly columns: TColumnsDefinition<TRow>;
     /**
      * The list of items to display, or a getter function.
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly data: TRow[] | TDataFn<TRow> | unknown;
     /**
      * Value to match in rows for display filtering.
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly filter: string | string[];
     /**
      * Maximum number of rows displayed per page.
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly perPage: number;
     /**
      * Class(es) or getter function to get row classes.
      *
-     * @vue Prop
+     * @vue-prop
      */
     readonly rowClasses: TClassVal | ((row: TRow) => TClassVal) | null;
     /** Column used for data sorting. */
@@ -78,23 +98,25 @@ export declare class VueDatatable<TRow extends {}, TSub extends VueDatatable<TRo
     /** Total number of rows contained by this data table. */
     totalRows: number;
     /** The total number of pages in the associated [[datatable]]. */
-    private readonly totalPages;
+    private get totalPages();
+    get currentPageRange(): IPageRange;
     /** Array of rows displayed by the table. */
     displayedRows: TRow[];
     /** Array of pagers that are linked to this table. */
     readonly pagers: Array<VueDatatablePager<any>>;
     /** Array of columns definitions casted as [[Column]] objects. */
-    readonly normalizedColumns: Column<TRow>[];
+    get normalizedColumns(): Column<TRow>[];
     /** Base CSS class to apply to the `&lt;table&gt;` element. */
-    readonly tableClass: string;
+    get tableClass(): string;
     protected readonly tableType: TableType<any>;
-    readonly handler: import("../../classes").IHandler<any, any[], any[], any[], any[]>;
-    readonly identifier: string;
+    get handler(): import("../../classes").IHandler<any, any[], any[], any[], any[]>;
+    get identifier(): string;
     /**
      * Register the table in the global registry of tables.
      * Additionnaly, it may wait for a pager before starting watch data properties.
      *
-     * @emits vuejs-datatable::ready Emitted with the table name
+     * @vue-event vuejs-datatable::ready Emitted when the table has been initialized.
+     * @vue-event-param vuejs-datatable::ready tableName <string> - The table name.
      */
     created(): void;
     /**
@@ -136,7 +158,8 @@ export declare class VueDatatable<TRow extends {}, TSub extends VueDatatable<TRo
     /**
      * Propagate the `page-changed` event when the page data is changed.
      *
-     * @emits vuejs-datatable::page-changed
+     * @vue-event vuejs-datatable::page-changed Emitted when the page has changed.
+     * @vue-event-param vuejs-datatable::page-changed newPage <number> - The index of the new page.
      */
     emitNewPage(): number;
     /**
@@ -159,13 +182,15 @@ export declare class VueDatatable<TRow extends {}, TSub extends VueDatatable<TRo
     /**
      * Recalculates the new page count, and emit `page-count-changed` with the new count.
      *
-     * @emits vuejs-datatable::page-count-changed
+     * @vue-event vuejs-datatable::page-count-changed Emitted when the page count has changed.
+     * @vue-event-param vuejs-datatable::page-count-changed newCount <number> - The new total number of pages.
      */
     refreshPageCount(): number | null;
     /**
-     * Recalculates the new page count, and emit `page-count-changed` with the new count.
+     * Re-emit the current page.
      *
-     * @emits vuejs-datatable::page-count-changed
+     * @vue-event vuejs-datatable::page-changed
      */
     refreshPage(): number;
 }
+export {};