naive-ui 2.33.2 → 2.33.4

package/lib/data-table/src/interface.js

@@ -1,5 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dataTableInjectionKey = void 0;
+exports.dataTableInjectionKey = exports.dataTableProps = void 0;
+const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
+exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { onUnstableColumnResize: Function, pagination: {
+        type: [Object, Boolean],
+        default: false
+    }, paginateSinglePage: {
+        type: Boolean,
+        default: true
+    }, minHeight: [Number, String], maxHeight: [Number, String], 
+    // Use any type as row data to make prop data acceptable
+    columns: {
+        type: Array,
+        default: () => []
+    }, rowClassName: [String, Function], rowProps: Function, rowKey: Function, summary: [Function], data: {
+        type: Array,
+        default: () => []
+    }, loading: Boolean, bordered: {
+        type: Boolean,
+        default: undefined
+    }, bottomBordered: {
+        type: Boolean,
+        default: undefined
+    }, striped: Boolean, scrollX: [Number, String], defaultCheckedRowKeys: {
+        type: Array,
+        default: () => []
+    }, checkedRowKeys: Array, singleLine: {
+        type: Boolean,
+        default: true
+    }, singleColumn: Boolean, size: {
+        type: String,
+        default: 'medium'
+    }, remote: Boolean, defaultExpandedRowKeys: {
+        type: Array,
+        default: []
+    }, defaultExpandAll: Boolean, expandedRowKeys: Array, stickyExpandedRows: Boolean, virtualScroll: Boolean, tableLayout: {
+        type: String,
+        default: 'auto'
+    }, allowCheckingNotLoaded: Boolean, cascade: {
+        type: Boolean,
+        default: true
+    }, childrenKey: {
+        type: String,
+        default: 'children'
+    }, indent: {
+        type: Number,
+        default: 16
+    }, flexHeight: Boolean, summaryPlacement: {
+        type: String,
+        default: 'bottom'
+    }, paginationBehaviorOnFilter: {
+        type: String,
+        default: 'current'
+    }, renderCell: Function, renderExpandIcon: Function, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    // deprecated
+    onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 exports.dataTableInjectionKey = (0, _utils_1.createInjectionKey)('n-data-table');

package/lib/data-table/src/styles/index.cssr.js

@@ -45,6 +45,8 @@ const fixedColumnStyle = createFixedColumnStyle(); // vars:
 // --n-pagination-margin
 // --n-empty-padding
 // --n-sorter-size
+// --n-resizable-container-size
+// --n-resizable-size
 // --n-loading-size
 // --n-loading-color
 // --n-opacity-loading
@@ -193,7 +195,31 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
   transform: 'rotate(-180deg)'
 })]), (0, cssr_1.cM)('asc, desc', {
   color: 'var(--n-th-icon-color-active)'
-})]), (0, cssr_1.cB)('data-table-filter', `
+})]), (0, cssr_1.cB)('data-table-resize-button', `
+ width: var(--n-resizable-container-size);
+ position: absolute;
+ top: 0;
+ right: calc(var(--n-resizable-container-size) / 2);
+ bottom: 0;
+ cursor: col-resize;
+ user-select: none;
+ `, [(0, cssr_1.c)('&::after', `
+ width: var(--n-resizable-size);
+ height: 50%;
+ position: absolute;
+ top: 50%;
+ left: calc(var(--n-resizable-container-size) / 2);
+ bottom: 0;
+ background-color: var(--n-merged-border-color);
+ transform: translateY(-50%);
+ transition: background-color .3s var(--n-bezier);
+ z-index: 1;
+ content: '';
+ `), (0, cssr_1.cM)('active', [(0, cssr_1.c)('&::after', ` 
+ background-color: var(--n-th-icon-color-active);
+ `)]), (0, cssr_1.c)('&:hover::after', `
+ background-color: var(--n-th-icon-color-active);
+ `)]), (0, cssr_1.cB)('data-table-filter', `
  position: absolute;
  z-index: auto;
  right: 0;

package/lib/data-table/src/use-check.d.ts

@@ -1,6 +1,5 @@
 import { ComputedRef } from 'vue';
-import type { DataTableSetupProps } from './DataTable';
-import type { RowKey, TableSelectionColumn, InternalRowData, TmNode } from './interface';
+import type { DataTableSetupProps, RowKey, RowData, TableSelectionColumn, InternalRowData, TmNode } from './interface';
 import { TreeMate } from 'treemate';
 export declare function useCheck(props: DataTableSetupProps, data: {
     selectionColumnRef: ComputedRef<TableSelectionColumn | null>;
@@ -13,9 +12,9 @@ export declare function useCheck(props: DataTableSetupProps, data: {
     someRowsCheckedRef: ComputedRef<boolean>;
     allRowsCheckedRef: ComputedRef<boolean>;
     headerCheckboxDisabledRef: ComputedRef<boolean>;
-    doUpdateCheckedRowKeys: (keys: RowKey[]) => void;
+    doUpdateCheckedRowKeys: (keys: RowKey[], row: RowData | undefined, action: 'check' | 'uncheck' | 'checkAll' | 'uncheckAll') => void;
     doCheckAll: (checkWholeTable?: boolean) => void;
     doUncheckAll: (checkWholeTable?: boolean) => void;
-    doCheck: (rowKey: RowKey | RowKey[], single?: boolean) => void;
-    doUncheck: (rowKey: RowKey | RowKey[]) => void;
+    doCheck: (rowKey: RowKey | RowKey[], single: boolean | undefined, rowInfo: RowData) => void;
+    doUncheck: (rowKey: RowKey | RowKey[], rowInfo: RowData) => void;
 };

package/lib/data-table/src/use-check.js

@@ -59,7 +59,7 @@ function useCheck(props, data) {
     const headerCheckboxDisabledRef = (0, vue_1.computed)(() => {
         return paginatedDataRef.value.length === 0;
     });
-    function doUpdateCheckedRowKeys(keys) {
+    function doUpdateCheckedRowKeys(keys, row, action) {
         const { 'onUpdate:checkedRowKeys': _onUpdateCheckedRowKeys, onUpdateCheckedRowKeys, onCheckedRowKeysChange } = props;
         const rows = [];
         const { value: { getNode } } = treeMateRef;
@@ -69,33 +69,36 @@ function useCheck(props, data) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             rows.push(row);
         });
-        if (_onUpdateCheckedRowKeys)
-            (0, _utils_1.call)(_onUpdateCheckedRowKeys, keys, rows);
-        if (onUpdateCheckedRowKeys)
-            (0, _utils_1.call)(onUpdateCheckedRowKeys, keys, rows);
-        if (onCheckedRowKeysChange)
-            (0, _utils_1.call)(onCheckedRowKeysChange, keys, rows);
+        if (_onUpdateCheckedRowKeys) {
+            (0, _utils_1.call)(_onUpdateCheckedRowKeys, keys, rows, { row, action });
+        }
+        if (onUpdateCheckedRowKeys) {
+            (0, _utils_1.call)(onUpdateCheckedRowKeys, keys, rows, { row, action });
+        }
+        if (onCheckedRowKeysChange) {
+            (0, _utils_1.call)(onCheckedRowKeysChange, keys, rows, { row, action });
+        }
         uncontrolledCheckedRowKeysRef.value = keys;
     }
-    function doCheck(rowKey, single = false) {
+    function doCheck(rowKey, single = false, rowInfo) {
         if (props.loading)
             return;
         if (single) {
-            doUpdateCheckedRowKeys(Array.isArray(rowKey) ? rowKey.slice(0, 1) : [rowKey]);
+            doUpdateCheckedRowKeys(Array.isArray(rowKey) ? rowKey.slice(0, 1) : [rowKey], rowInfo, 'check');
             return;
         }
         doUpdateCheckedRowKeys(treeMateRef.value.check(rowKey, mergedCheckedRowKeysRef.value, {
             cascade: props.cascade,
             allowNotLoaded: props.allowCheckingNotLoaded
-        }).checkedKeys);
+        }).checkedKeys, rowInfo, 'check');
     }
-    function doUncheck(rowKey) {
+    function doUncheck(rowKey, rowInfo) {
         if (props.loading)
             return;
         doUpdateCheckedRowKeys(treeMateRef.value.uncheck(rowKey, mergedCheckedRowKeysRef.value, {
             cascade: props.cascade,
             allowNotLoaded: props.allowCheckingNotLoaded
-        }).checkedKeys);
+        }).checkedKeys, rowInfo, 'uncheck');
     }
     function doCheckAll(checkWholeTable = false) {
         const { value: column } = selectionColumnRef;
@@ -113,7 +116,7 @@ function useCheck(props, data) {
         doUpdateCheckedRowKeys(treeMateRef.value.check(rowKeysToCheck, mergedCheckedRowKeysRef.value, {
             cascade: true,
             allowNotLoaded: props.allowCheckingNotLoaded
-        }).checkedKeys);
+        }).checkedKeys, undefined, 'checkAll');
     }
     function doUncheckAll(checkWholeTable = false) {
         const { value: column } = selectionColumnRef;
@@ -131,7 +134,7 @@ function useCheck(props, data) {
         doUpdateCheckedRowKeys(treeMateRef.value.uncheck(rowKeysToUncheck, mergedCheckedRowKeysRef.value, {
             cascade: true,
             allowNotLoaded: props.allowCheckingNotLoaded
-        }).checkedKeys);
+        }).checkedKeys, undefined, 'uncheckAll');
     }
     return {
         mergedCheckedRowKeySetRef,

package/lib/data-table/src/use-expand.d.ts

@@ -1,7 +1,6 @@
 import { Ref } from 'vue';
 import { TreeMate } from 'treemate';
-import type { DataTableSetupProps } from './DataTable';
-import type { Expandable, InternalRowData, RowKey } from './interface';
+import type { Expandable, InternalRowData, RowKey, DataTableSetupProps } from './interface';
 export declare function useExpand(props: DataTableSetupProps, treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>): {
     stickyExpandedRowsRef: Ref<boolean>;
     mergedExpandedRowKeysRef: import("vue").ComputedRef<import("treemate").Key[]>;

package/lib/data-table/src/use-group-header.d.ts

@@ -1,6 +1,5 @@
 import { CSSProperties, ComputedRef } from 'vue';
-import type { DataTableSetupProps } from './DataTable';
-import type { TableExpandColumn, TableSelectionColumn, TableColumn, TableBaseColumn } from './interface';
+import type { TableExpandColumn, TableSelectionColumn, TableColumn, TableBaseColumn, ColumnKey, DataTableSetupProps } from './interface';
 export interface RowItem {
     colSpan: number;
     rowSpan: number;
@@ -12,7 +11,7 @@ export interface ColItem {
     style: CSSProperties;
     column: TableSelectionColumn | TableExpandColumn | TableBaseColumn;
 }
-export declare function useGroupHeader(props: DataTableSetupProps): {
+export declare function useGroupHeader(props: DataTableSetupProps, getResizableWidth: (key: ColumnKey) => number | undefined): {
     rowsRef: ComputedRef<RowItem[][]>;
     colsRef: ComputedRef<ColItem[]>;
     hasEllipsisRef: ComputedRef<boolean>;

package/lib/data-table/src/use-group-header.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGroupHeader = void 0;
 const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
 const utils_1 = require("./utils");
-function getRowsAndCols(columns) {
+function getRowsAndCols(columns, getResizableWidth) {
     const rows = [];
     const cols = [];
     const dataRelatedCols = [];
@@ -21,9 +22,10 @@ function getRowsAndCols(columns) {
                 ensureMaxDepth(column.children, currentDepth + 1);
             }
             else {
+                const key = 'key' in column ? column.key : undefined;
                 cols.push({
                     key: (0, utils_1.getColKey)(column),
-                    style: (0, utils_1.createCustomWidthStyle)(column),
+                    style: (0, utils_1.createCustomWidthStyle)(column, key !== undefined ? (0, _utils_1.formatLength)(getResizableWidth(key)) : undefined),
                     column
                 });
                 totalRowSpan += 1;
@@ -94,8 +96,8 @@ function getRowsAndCols(columns) {
         dataRelatedCols
     };
 }
-function useGroupHeader(props) {
-    const rowsAndCols = (0, vue_1.computed)(() => getRowsAndCols(props.columns));
+function useGroupHeader(props, getResizableWidth) {
+    const rowsAndCols = (0, vue_1.computed)(() => getRowsAndCols(props.columns, getResizableWidth));
     return {
         rowsRef: (0, vue_1.computed)(() => rowsAndCols.value.rows),
         colsRef: (0, vue_1.computed)(() => rowsAndCols.value.cols),

package/lib/data-table/src/use-resizable.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnKey, TableColumn } from './interface';
+export declare function useResizable(): {
+    getResizableWidth: (key: ColumnKey) => number | undefined;
+    doUpdateResizableWidth: (column: TableColumn, width: number) => void;
+    clearResizableWidth: () => void;
+};

package/lib/data-table/src/use-resizable.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizable = void 0;
+const vue_1 = require("vue");
+const utils_1 = require("./utils");
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function useResizable() {
+    const resizableWidthsRef = (0, vue_1.ref)({});
+    function getResizableWidth(key) {
+        return resizableWidthsRef.value[key];
+    }
+    function doUpdateResizableWidth(column, width) {
+        if ((0, utils_1.isColumnResizable)(column) && 'key' in column) {
+            resizableWidthsRef.value[column.key] = width;
+        }
+    }
+    function clearResizableWidth() {
+        resizableWidthsRef.value = {};
+    }
+    return {
+        getResizableWidth,
+        doUpdateResizableWidth,
+        clearResizableWidth
+    };
+}
+exports.useResizable = useResizable;

package/lib/data-table/src/use-scroll.d.ts

@@ -1,6 +1,5 @@
 import { ComputedRef, Ref } from 'vue';
-import type { DataTableSetupProps } from './DataTable';
-import type { ColumnKey, MainTableRef, TableColumn } from './interface';
+import type { ColumnKey, MainTableRef, TableColumn, DataTableSetupProps } from './interface';
 export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, scrollPartRef }: {
     scrollPartRef: Ref<'head' | 'body'>;
     bodyWidthRef: Ref<null | number>;

package/lib/data-table/src/use-sorter.d.ts

@@ -1,6 +1,5 @@
 import { ComputedRef } from 'vue';
-import type { ColumnKey, InternalRowData, SortOrder, SortState, TmNode, TableBaseColumn, TableExpandColumn, TableSelectionColumn, CompareFn } from './interface';
-import type { DataTableSetupProps } from './DataTable';
+import type { ColumnKey, InternalRowData, SortOrder, SortState, TmNode, TableBaseColumn, TableExpandColumn, TableSelectionColumn, CompareFn, DataTableSetupProps } from './interface';
 export declare function useSorter(props: DataTableSetupProps, { dataRelatedColsRef, filteredDataRef }: {
     dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
     filteredDataRef: ComputedRef<TmNode[]>;

package/lib/data-table/src/use-sorter.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSorter = void 0;
 const vue_1 = require("vue");
-const utils_1 = require("./utils");
 const _utils_1 = require("../../_utils");
+const utils_1 = require("./utils");
 function getMultiplePriority(sorter) {
     if (typeof sorter === 'object' && typeof sorter.multiple === 'number') {
         return sorter.multiple;

package/lib/data-table/src/use-table-data.d.ts

@@ -1,7 +1,6 @@
 import { ComputedRef } from 'vue';
-import type { DataTableSetupProps } from './DataTable';
-import type { ColumnKey, FilterState, TableBaseColumn, TableSelectionColumn, InternalRowData, TmNode, TableExpandColumn, RowKey } from './interface';
 import type { PaginationProps } from '../../pagination/src/Pagination';
+import type { ColumnKey, FilterState, TableBaseColumn, TableSelectionColumn, InternalRowData, TmNode, TableExpandColumn, RowKey, DataTableSetupProps } from './interface';
 export declare function useTableData(props: DataTableSetupProps, { dataRelatedColsRef }: {
     dataRelatedColsRef: ComputedRef<Array<TableSelectionColumn | TableBaseColumn | TableExpandColumn>>;
 }): {
@@ -26,6 +25,7 @@ export declare function useTableData(props: DataTableSetupProps, { dataRelatedCo
     deriveNextSorter: (sortState: import("./interface").SortState | null) => void;
     doUpdatePageSize: (pageSize: number) => void;
     doUpdatePage: (page: number) => void;
+    onUnstableColumnResize: (resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void;
     filter: (filters: FilterState | null) => void;
     filters: (filters: FilterState | null) => void;
     clearFilter: () => void;

package/lib/data-table/src/use-table-data.js

@@ -4,8 +4,8 @@ exports.useTableData = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const treemate_1 = require("treemate");
-const utils_1 = require("./utils");
 const _utils_1 = require("../../_utils");
+const utils_1 = require("./utils");
 const use_sorter_1 = require("./use-sorter");
 // useTableData combines filter, sorter and pagination
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -275,6 +275,10 @@ function useTableData(props, { dataRelatedColsRef }) {
             (0, _utils_1.call)(onFiltersChange, filters, sourceColumn);
         uncontrolledFilterStateRef.value = filters;
     }
+    function onUnstableColumnResize(resizedWidth, limitedWidth, column, getColumnWidth) {
+        var _a;
+        (_a = props.onUnstableColumnResize) === null || _a === void 0 ? void 0 : _a.call(props, resizedWidth, limitedWidth, column, getColumnWidth);
+    }
     function page(page) {
         doUpdatePage(page);
     }
@@ -313,6 +317,7 @@ function useTableData(props, { dataRelatedColsRef }) {
         deriveNextSorter,
         doUpdatePageSize,
         doUpdatePage,
+        onUnstableColumnResize,
         // exported methods
         filter,
         filters,

package/lib/data-table/src/utils.d.ts

@@ -7,10 +7,12 @@ export declare function getStringColWidth(col: TableColumn): string | undefined;
 export declare function getColKey(col: TableColumn): string | number;
 export declare function createShallowClonedObject<T>(object: T): T;
 export declare function getFlagOfOrder(order: SortOrder): SortOrderFlag;
-export declare function createCustomWidthStyle(column: TableBaseColumn | TableSelectionColumn | TableExpandColumn): CSSProperties;
+export declare function clampValueFollowCSSRules(value: number, min?: number | string, max?: number | string): number;
+export declare function createCustomWidthStyle(column: TableBaseColumn | TableSelectionColumn | TableExpandColumn, resizedWidth?: string): CSSProperties;
 export declare function createRowClassName(row: InternalRowData, index: number, rowClassName?: string | CreateRowClassName): string;
 export declare function shouldUseArrayInSingleMode(column: TableBaseColumn): boolean;
 export declare function isColumnSortable(column: TableColumn): boolean;
+export declare function isColumnResizable(column: TableColumn): boolean;
 export declare function isColumnFilterable(column: TableColumn): boolean;
 export declare function createNextSorter(column: TableBaseColumn, currentSortState: SortState | null): SortState | null;
 export declare function isColumnSorting(column: TableColumn, mergedSortState: SortState[]): boolean;

package/lib/data-table/src/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isColumnSorting = exports.createNextSorter = exports.isColumnFilterable = exports.isColumnSortable = exports.shouldUseArrayInSingleMode = exports.createRowClassName = exports.createCustomWidthStyle = exports.getFlagOfOrder = exports.createShallowClonedObject = exports.getColKey = exports.getStringColWidth = exports.getNumberColWidth = exports.EXPAND_COL_WIDTH = exports.SELECTION_COL_WIDTH = void 0;
+exports.isColumnSorting = exports.createNextSorter = exports.isColumnFilterable = exports.isColumnResizable = exports.isColumnSortable = exports.shouldUseArrayInSingleMode = exports.createRowClassName = exports.createCustomWidthStyle = exports.clampValueFollowCSSRules = exports.getFlagOfOrder = exports.createShallowClonedObject = exports.getColKey = exports.getStringColWidth = exports.getNumberColWidth = exports.EXPAND_COL_WIDTH = exports.SELECTION_COL_WIDTH = void 0;
 const seemly_1 = require("seemly");
 const _utils_1 = require("../../_utils");
 exports.SELECTION_COL_WIDTH = 40;
@@ -59,11 +59,31 @@ function getFlagOfOrder(order) {
     return 0;
 }
 exports.getFlagOfOrder = getFlagOfOrder;
-function createCustomWidthStyle(column) {
+// priority: min-width > max-width > width
+function clampValueFollowCSSRules(value, min, max) {
+    if (max !== undefined) {
+        value = Math.min(value, typeof max === 'number' ? max : parseFloat(max));
+    }
+    if (min !== undefined) {
+        value = Math.max(value, typeof min === 'number' ? min : parseFloat(min));
+    }
+    return value;
+}
+exports.clampValueFollowCSSRules = clampValueFollowCSSRules;
+function createCustomWidthStyle(column, resizedWidth) {
+    if (resizedWidth !== undefined) {
+        return {
+            width: resizedWidth,
+            minWidth: resizedWidth,
+            maxWidth: resizedWidth
+        };
+    }
     const width = getStringColWidth(column);
+    const { minWidth, maxWidth } = column;
     return {
         width,
-        minWidth: (0, _utils_1.formatLength)(column.minWidth) || width
+        minWidth: (0, _utils_1.formatLength)(minWidth) || width,
+        maxWidth: (0, _utils_1.formatLength)(maxWidth)
     };
 }
 exports.createCustomWidthStyle = createCustomWidthStyle;
@@ -88,6 +108,12 @@ function isColumnSortable(column) {
     return !!column.sorter;
 }
 exports.isColumnSortable = isColumnSortable;
+function isColumnResizable(column) {
+    if ('children' in column && !!column.children.length)
+        return false;
+    return !!column.resizable;
+}
+exports.isColumnResizable = isColumnResizable;
 function isColumnFilterable(column) {
     if ('children' in column)
         return false;

package/lib/data-table/styles/_common.d.ts

@@ -6,6 +6,8 @@ declare const _default: {
     tdPaddingMedium: string;
     tdPaddingLarge: string;
     sorterSize: string;
+    resizableContainerSize: string;
+    resizableSize: string;
     filterSize: string;
     paginationMargin: string;
     emptyPadding: string;

package/lib/data-table/styles/_common.js

@@ -8,6 +8,8 @@ exports.default = {
     tdPaddingMedium: '12px',
     tdPaddingLarge: '12px',
     sorterSize: '15px',
+    resizableContainerSize: '8px',
+    resizableSize: '2px',
     filterSize: '15px',
     paginationMargin: '12px 0 0 0',
     emptyPadding: '48px 0',

package/lib/data-table/styles/dark.js

@@ -8,6 +8,7 @@ const styles_5 = require("../../pagination/styles");
 const styles_6 = require("../../_internal/scrollbar/styles");
 const styles_7 = require("../../popover/styles");
 const styles_8 = require("../../empty/styles");
+const styles_9 = require("../../dropdown/styles");
 const common_1 = require("../../_styles/common");
 const light_1 = require("./light");
 const dataTableDark = {
@@ -21,7 +22,8 @@ const dataTableDark = {
         Scrollbar: styles_6.scrollbarDark,
         Empty: styles_8.emptyDark,
         Popover: styles_7.popoverDark,
-        Ellipsis: styles_1.ellipsisDark
+        Ellipsis: styles_1.ellipsisDark,
+        Dropdown: styles_9.dropdownDark
     },
     self(vars) {
         const commonSelf = (0, light_1.self)(vars);

package/lib/data-table/styles/light.d.ts

@@ -42,6 +42,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     tdPaddingMedium: string;
     tdPaddingLarge: string;
     sorterSize: string;
+    resizableContainerSize: string;
+    resizableSize: string;
     filterSize: string;
     paginationMargin: string;
     emptyPadding: string;
@@ -92,6 +94,8 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
     tdPaddingMedium: string;
     tdPaddingLarge: string;
     sorterSize: string;
+    resizableContainerSize: string;
+    resizableSize: string;
     filterSize: string;
     paginationMargin: string;
     emptyPadding: string;
@@ -755,6 +759,76 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
             }, any>;
         }>;
     }>;
+    Dropdown: import("../../_mixins").Theme<"Dropdown", {
+        optionHeightSmall: string;
+        optionHeightMedium: string;
+        optionHeightLarge: string;
+        optionHeightHuge: string;
+        borderRadius: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        optionTextColor: string;
+        optionTextColorHover: string;
+        optionTextColorActive: string;
+        optionTextColorChildActive: string;
+        color: string;
+        dividerColor: string;
+        suffixColor: string;
+        prefixColor: string;
+        optionColorHover: string;
+        optionColorActive: string;
+        groupHeaderTextColor: string;
+        optionTextColorInverted: string;
+        optionTextColorHoverInverted: string;
+        optionTextColorActiveInverted: string;
+        optionTextColorChildActiveInverted: string;
+        colorInverted: string;
+        dividerColorInverted: string;
+        suffixColorInverted: string;
+        prefixColorInverted: string;
+        optionColorHoverInverted: string;
+        optionColorActiveInverted: string;
+        groupHeaderTextColorInverted: string;
+        optionOpacityDisabled: string;
+        padding: string;
+        optionIconSizeSmall: string;
+        optionIconSizeMedium: string;
+        optionIconSizeLarge: string;
+        optionIconSizeHuge: string;
+        optionSuffixWidthSmall: string;
+        optionSuffixWidthMedium: string;
+        optionSuffixWidthLarge: string;
+        optionSuffixWidthHuge: string;
+        optionIconSuffixWidthSmall: string;
+        optionIconSuffixWidthMedium: string;
+        optionIconSuffixWidthLarge: string;
+        optionIconSuffixWidthHuge: string;
+        optionPrefixWidthSmall: string;
+        optionPrefixWidthMedium: string;
+        optionPrefixWidthLarge: string;
+        optionPrefixWidthHuge: string;
+        optionIconPrefixWidthSmall: string;
+        optionIconPrefixWidthMedium: string;
+        optionIconPrefixWidthLarge: string;
+        optionIconPrefixWidthHuge: string;
+    }, {
+        Popover: import("../../_mixins").Theme<"Popover", {
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
+            space: string;
+            spaceArrow: string;
+            arrowOffset: string;
+            arrowOffsetVertical: string;
+            arrowHeight: string;
+            padding: string;
+        }, any>;
+    }>;
 }>;
 export default dataTableLight;
 export declare type DataTableTheme = typeof dataTableLight;

package/lib/data-table/styles/light.js

@@ -14,6 +14,7 @@ const styles_5 = require("../../pagination/styles");
 const styles_6 = require("../../_internal/scrollbar/styles");
 const styles_7 = require("../../popover/styles");
 const styles_8 = require("../../empty/styles");
+const styles_9 = require("../../dropdown/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
@@ -42,7 +43,8 @@ const dataTableLight = (0, _mixins_1.createTheme)({
         Scrollbar: styles_6.scrollbarLight,
         Empty: styles_8.emptyLight,
         Popover: styles_7.popoverLight,
-        Ellipsis: styles_1.ellipsisLight
+        Ellipsis: styles_1.ellipsisLight,
+        Dropdown: styles_9.dropdownLight
     },
     self: exports.self
 });

package/lib/date-picker/src/DatePicker.d.ts

@@ -5076,7 +5076,7 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
     focus: () => void;
     blur: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;

package/lib/date-picker/src/DatePicker.js

@@ -625,7 +625,9 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? (0, _mixins_1.useThemeClass)('date-picker', undefined, cssVarsRef, props)
+            ? (0, _mixins_1.useThemeClass)('date-picker', (0, vue_1.computed)(() => {
+                return props.type;
+            }), cssVarsRef, props)
             : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
@@ -668,9 +670,9 @@ exports.default = (0, vue_1.defineComponent)({
         };
         const renderPanel = () => {
             const { type } = this;
-            return type === 'datetime' ? ((0, vue_1.h)(datetime_1.default, Object.assign({}, commonPanelProps))) : type === 'daterange' ? ((0, vue_1.h)(daterange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }))) : type === 'datetimerange' ? ((0, vue_1.h)(datetimerange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }))) : type === 'month' || type === 'year' || type === 'quarter' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: type, key: type }))) : type === 'monthrange' ||
+            return type === 'datetime' ? ((0, vue_1.h)(datetime_1.default, Object.assign({}, commonPanelProps), $slots)) : type === 'daterange' ? ((0, vue_1.h)(daterange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'datetimerange' ? ((0, vue_1.h)(datetimerange_1.default, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'month' || type === 'year' || type === 'quarter' ? ((0, vue_1.h)(month_1.default, Object.assign({}, commonPanelProps, { type: type, key: type }))) : type === 'monthrange' ||
                 type === 'yearrange' ||
-                type === 'quarterrange' ? ((0, vue_1.h)(monthrange_1.default, Object.assign({}, commonPanelProps, { type: type }))) : ((0, vue_1.h)(date_1.default, Object.assign({}, commonPanelProps)));
+                type === 'quarterrange' ? ((0, vue_1.h)(monthrange_1.default, Object.assign({}, commonPanelProps, { type: type }))) : ((0, vue_1.h)(date_1.default, Object.assign({}, commonPanelProps), $slots));
         };
         if (this.panel) {
             return renderPanel();