naive-ui 2.33.2 → 2.33.4

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

@@ -1,2 +1,56 @@
+import { useTheme } from '../../_mixins';
 import { createInjectionKey } from '../../_utils';
+export const dataTableProps = Object.assign(Object.assign({}, 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] });
 export const dataTableInjectionKey = createInjectionKey('n-data-table');

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

@@ -36,6 +36,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
@@ -184,7 +186,31 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
   transform: 'rotate(-180deg)'
 })]), cM('asc, desc', {
   color: 'var(--n-th-icon-color-active)'
-})]), cB('data-table-filter', `
+})]), 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;
+ `, [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: '';
+ `), cM('active', [c('&::after', ` 
+ background-color: var(--n-th-icon-color-active);
+ `)]), c('&:hover::after', `
+ background-color: var(--n-th-icon-color-active);
+ `)]), cB('data-table-filter', `
  position: absolute;
  z-index: auto;
  right: 0;

package/es/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/es/data-table/src/use-check.js

@@ -56,7 +56,7 @@ export function useCheck(props, data) {
     const headerCheckboxDisabledRef = 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;
@@ -66,33 +66,36 @@ export function useCheck(props, data) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             rows.push(row);
         });
-        if (_onUpdateCheckedRowKeys)
-            call(_onUpdateCheckedRowKeys, keys, rows);
-        if (onUpdateCheckedRowKeys)
-            call(onUpdateCheckedRowKeys, keys, rows);
-        if (onCheckedRowKeysChange)
-            call(onCheckedRowKeysChange, keys, rows);
+        if (_onUpdateCheckedRowKeys) {
+            call(_onUpdateCheckedRowKeys, keys, rows, { row, action });
+        }
+        if (onUpdateCheckedRowKeys) {
+            call(onUpdateCheckedRowKeys, keys, rows, { row, action });
+        }
+        if (onCheckedRowKeysChange) {
+            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;
@@ -110,7 +113,7 @@ export 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;
@@ -128,7 +131,7 @@ export function useCheck(props, data) {
         doUpdateCheckedRowKeys(treeMateRef.value.uncheck(rowKeysToUncheck, mergedCheckedRowKeysRef.value, {
             cascade: true,
             allowNotLoaded: props.allowCheckingNotLoaded
-        }).checkedKeys);
+        }).checkedKeys, undefined, 'uncheckAll');
     }
     return {
         mergedCheckedRowKeySetRef,

package/es/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/es/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/es/data-table/src/use-group-header.js

@@ -1,6 +1,7 @@
 import { computed } from 'vue';
+import { formatLength } from '../../_utils';
 import { getColKey, createCustomWidthStyle } from './utils';
-function getRowsAndCols(columns) {
+function getRowsAndCols(columns, getResizableWidth) {
     const rows = [];
     const cols = [];
     const dataRelatedCols = [];
@@ -18,9 +19,10 @@ function getRowsAndCols(columns) {
                 ensureMaxDepth(column.children, currentDepth + 1);
             }
             else {
+                const key = 'key' in column ? column.key : undefined;
                 cols.push({
                     key: getColKey(column),
-                    style: createCustomWidthStyle(column),
+                    style: createCustomWidthStyle(column, key !== undefined ? formatLength(getResizableWidth(key)) : undefined),
                     column
                 });
                 totalRowSpan += 1;
@@ -91,8 +93,8 @@ function getRowsAndCols(columns) {
         dataRelatedCols
     };
 }
-export function useGroupHeader(props) {
-    const rowsAndCols = computed(() => getRowsAndCols(props.columns));
+export function useGroupHeader(props, getResizableWidth) {
+    const rowsAndCols = computed(() => getRowsAndCols(props.columns, getResizableWidth));
     return {
         rowsRef: computed(() => rowsAndCols.value.rows),
         colsRef: computed(() => rowsAndCols.value.cols),

package/es/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/es/data-table/src/use-resizable.js

@@ -0,0 +1,22 @@
+import { ref } from 'vue';
+import { isColumnResizable } from './utils';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function useResizable() {
+    const resizableWidthsRef = ref({});
+    function getResizableWidth(key) {
+        return resizableWidthsRef.value[key];
+    }
+    function doUpdateResizableWidth(column, width) {
+        if (isColumnResizable(column) && 'key' in column) {
+            resizableWidthsRef.value[column.key] = width;
+        }
+    }
+    function clearResizableWidth() {
+        resizableWidthsRef.value = {};
+    }
+    return {
+        getResizableWidth,
+        doUpdateResizableWidth,
+        clearResizableWidth
+    };
+}

package/es/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/es/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/es/data-table/src/use-sorter.js

@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue';
-import { getFlagOfOrder } from './utils';
 import { call } from '../../_utils';
+import { getFlagOfOrder } from './utils';
 function getMultiplePriority(sorter) {
     if (typeof sorter === 'object' && typeof sorter.multiple === 'number') {
         return sorter.multiple;

package/es/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/es/data-table/src/use-table-data.js

@@ -1,8 +1,8 @@
 import { computed, ref } from 'vue';
 import { useMemo, useMergedState } from 'vooks';
 import { createTreeMate } from 'treemate';
-import { createShallowClonedObject } from './utils';
 import { call, warn } from '../../_utils';
+import { createShallowClonedObject } from './utils';
 import { useSorter } from './use-sorter';
 // useTableData combines filter, sorter and pagination
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -272,6 +272,10 @@ export function useTableData(props, { dataRelatedColsRef }) {
             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);
     }
@@ -310,6 +314,7 @@ export function useTableData(props, { dataRelatedColsRef }) {
         deriveNextSorter,
         doUpdatePageSize,
         doUpdatePage,
+        onUnstableColumnResize,
         // exported methods
         filter,
         filters,

package/es/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/es/data-table/src/utils.js

@@ -51,11 +51,30 @@ export function getFlagOfOrder(order) {
         return -1;
     return 0;
 }
-export function createCustomWidthStyle(column) {
+// priority: min-width > max-width > width
+export 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;
+}
+export 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: formatLength(column.minWidth) || width
+        minWidth: formatLength(minWidth) || width,
+        maxWidth: formatLength(maxWidth)
     };
 }
 export function createRowClassName(row, index, rowClassName) {
@@ -76,6 +95,11 @@ export function isColumnSortable(column) {
         return false;
     return !!column.sorter;
 }
+export function isColumnResizable(column) {
+    if ('children' in column && !!column.children.length)
+        return false;
+    return !!column.resizable;
+}
 export function isColumnFilterable(column) {
     if ('children' in column)
         return false;

package/es/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/es/data-table/styles/_common.js

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

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

@@ -6,6 +6,7 @@ import { paginationDark } from '../../pagination/styles';
 import { scrollbarDark } from '../../_internal/scrollbar/styles';
 import { popoverDark } from '../../popover/styles';
 import { emptyDark } from '../../empty/styles';
+import { dropdownDark } from '../../dropdown/styles';
 import { commonDark } from '../../_styles/common';
 import { self } from './light';
 const dataTableDark = {
@@ -19,7 +20,8 @@ const dataTableDark = {
         Scrollbar: scrollbarDark,
         Empty: emptyDark,
         Popover: popoverDark,
-        Ellipsis: ellipsisDark
+        Ellipsis: ellipsisDark,
+        Dropdown: dropdownDark
     },
     self(vars) {
         const commonSelf = self(vars);

package/es/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/es/data-table/styles/light.js

@@ -8,6 +8,7 @@ import { paginationLight } from '../../pagination/styles';
 import { scrollbarLight } from '../../_internal/scrollbar/styles';
 import { popoverLight } from '../../popover/styles';
 import { emptyLight } from '../../empty/styles';
+import { dropdownLight } from '../../dropdown/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
@@ -35,7 +36,8 @@ const dataTableLight = createTheme({
         Scrollbar: scrollbarLight,
         Empty: emptyLight,
         Popover: popoverLight,
-        Ellipsis: ellipsisLight
+        Ellipsis: ellipsisLight,
+        Dropdown: dropdownLight
     },
     self
 });

package/es/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/es/date-picker/src/DatePicker.js

@@ -619,7 +619,9 @@ export default defineComponent({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('date-picker', undefined, cssVarsRef, props)
+            ? useThemeClass('date-picker', 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,
@@ -662,9 +664,9 @@ export default defineComponent({
         };
         const renderPanel = () => {
             const { type } = this;
-            return type === 'datetime' ? (h(DatetimePanel, Object.assign({}, commonPanelProps))) : type === 'daterange' ? (h(DaterangePanel, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }))) : type === 'datetimerange' ? (h(DatetimerangePanel, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }))) : type === 'month' || type === 'year' || type === 'quarter' ? (h(MonthPanel, Object.assign({}, commonPanelProps, { type: type, key: type }))) : type === 'monthrange' ||
+            return type === 'datetime' ? (h(DatetimePanel, Object.assign({}, commonPanelProps), $slots)) : type === 'daterange' ? (h(DaterangePanel, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'datetimerange' ? (h(DatetimerangePanel, Object.assign({}, commonPanelProps, { defaultCalendarStartTime: this.defaultCalendarStartTime, defaultCalendarEndTime: this.defaultCalendarEndTime, bindCalendarMonths: this.bindCalendarMonths }), $slots)) : type === 'month' || type === 'year' || type === 'quarter' ? (h(MonthPanel, Object.assign({}, commonPanelProps, { type: type, key: type }))) : type === 'monthrange' ||
                 type === 'yearrange' ||
-                type === 'quarterrange' ? (h(MonthRangePanel, Object.assign({}, commonPanelProps, { type: type }))) : (h(DatePanel, Object.assign({}, commonPanelProps)));
+                type === 'quarterrange' ? (h(MonthRangePanel, Object.assign({}, commonPanelProps, { type: type }))) : (h(DatePanel, Object.assign({}, commonPanelProps), $slots));
         };
         if (this.panel) {
             return renderPanel();