naive-ui 2.19.7 → 2.19.11

package/es/color-picker/src/ColorPickerSwatches.js

@@ -0,0 +1,142 @@
+import { defineComponent, h, computed } from 'vue';
+import { hsl2hsv, hsl2rgb, hsla, hsv2hsl, hsv2rgb, hsva, rgb2hsl, rgb2hsv, rgba, toHexaString, toHslaString, toHsvaString, toRgbaString } from 'seemly';
+import { getModeFromValue } from './utils';
+import { warn } from '../../_utils';
+// Try to normalize the color values to ensure that they are valid CSS colors
+function normalizeColor(color, mode) {
+    if (mode === 'hsv') {
+        const [h, s, v, a] = hsva(color);
+        return toRgbaString([...hsv2rgb(h, s, v), a]);
+    }
+    // For the mode that is not in preset, we keep the original value.
+    // For color names, they are legal to CSS, so we don’t deal with them,
+    // and only standardize them when outputting.
+    return color;
+}
+function getHexFromName(color) {
+    const ctx = document
+        .createElement('canvas')
+        .getContext('2d');
+    ctx.fillStyle = color;
+    return ctx.fillStyle;
+}
+const covert = {
+    rgb: {
+        hex(swatchValue) {
+            return toHexaString(rgba(swatchValue));
+        },
+        hsl(swatchValue) {
+            const [r, g, b, a] = rgba(swatchValue);
+            return toHslaString([...rgb2hsl(r, g, b), a]);
+        },
+        hsv(swatchValue) {
+            const [r, g, b, a] = rgba(swatchValue);
+            return toHsvaString([...rgb2hsv(r, g, b), a]);
+        }
+    },
+    hex: {
+        rgb(swatchValue) {
+            return toRgbaString(rgba(swatchValue));
+        },
+        hsl(swatchValue) {
+            const [r, g, b, a] = rgba(swatchValue);
+            return toHslaString([...rgb2hsl(r, g, b), a]);
+        },
+        hsv(swatchValue) {
+            const [r, g, b, a] = rgba(swatchValue);
+            return toHsvaString([...rgb2hsv(r, g, b), a]);
+        }
+    },
+    hsl: {
+        hex(swatchValue) {
+            const [h, s, l, a] = hsla(swatchValue);
+            return toHexaString([...hsl2rgb(h, s, l), a]);
+        },
+        rgb(swatchValue) {
+            const [h, s, l, a] = hsla(swatchValue);
+            return toRgbaString([...hsl2rgb(h, s, l), a]);
+        },
+        hsv(swatchValue) {
+            const [h, s, l, a] = hsla(swatchValue);
+            return toHsvaString([...hsl2hsv(h, s, l), a]);
+        }
+    },
+    hsv: {
+        hex(swatchValue) {
+            const [h, s, v, a] = hsva(swatchValue);
+            return toHexaString([...hsv2rgb(h, s, v), a]);
+        },
+        rgb(swatchValue) {
+            const [h, s, v, a] = hsva(swatchValue);
+            return toRgbaString([...hsv2rgb(h, s, v), a]);
+        },
+        hsl(swatchValue) {
+            const [h, s, v, a] = hsva(swatchValue);
+            return toHslaString([...hsv2hsl(h, s, v), a]);
+        }
+    }
+};
+export default defineComponent({
+    name: 'ColorPickerSwatches',
+    props: {
+        clsPrefix: {
+            type: String,
+            required: true
+        },
+        mode: {
+            type: String,
+            required: true
+        },
+        swatches: {
+            type: Array,
+            required: true
+        },
+        onUpdateColor: {
+            type: Function,
+            required: true
+        }
+    },
+    setup(props) {
+        const parsedSwatchesRef = computed(() => props.swatches.map((value) => {
+            const mode = getModeFromValue(value);
+            return {
+                value,
+                mode,
+                legalValue: normalizeColor(value, mode)
+            };
+        }));
+        function normalizeOutput(parsed) {
+            const { mode: modeProp } = props;
+            let { value, mode: swatchColorMode } = parsed;
+            // color name is converted to hex
+            if (!swatchColorMode) {
+                swatchColorMode = 'hex';
+                if (/^[a-zA-Z]+$/.test(value)) {
+                    value = getHexFromName(value);
+                }
+                else {
+                    // for invalid color, we make it black
+                    warn('color-picker', `color ${value} in swatches is invalid.`);
+                    value = '#000000';
+                }
+            }
+            if (swatchColorMode === modeProp)
+                return value;
+            // swatch value to current mode value
+            const conversions = covert[swatchColorMode];
+            return conversions[modeProp](value);
+        }
+        function handleSwatchSelect(parsed) {
+            props.onUpdateColor(normalizeOutput(parsed));
+        }
+        return {
+            parsedSwatchesRef,
+            handleSwatchSelect
+        };
+    },
+    render() {
+        const { clsPrefix } = this;
+        return (h("div", { class: `${clsPrefix}-color-picker-swatches` }, this.parsedSwatchesRef.map((swatch) => (h("div", { class: `${clsPrefix}-color-picker-swatch`, onClick: () => this.handleSwatchSelect(swatch) },
+            h("div", { class: `${clsPrefix}-color-picker-swatch__fill`, style: { background: swatch.legalValue } }))))));
+    }
+});

package/es/color-picker/src/styles/index.cssr.js

@@ -132,4 +132,24 @@ export default c([cB('color-picker', `
  --block-size: calc((var(--height) - 8px) / 3);
  background-size: calc(var(--block-size) * 2) calc(var(--block-size) * 2);
  background-position: 0 0, 0 var(--block-size), var(--block-size) calc(-1 * var(--block-size)), calc(-1 * var(--block-size)) 0px; 
+ `)])]), cB('color-picker-swatches', `
+ display: grid;
+ grid-gap: 8px;
+ flex-wrap: wrap;
+ position: relative;
+ grid-template-columns: repeat(auto-fill, 18px);
+ margin-top: 10px;
+ `, [cB('color-picker-swatch', `
+ width: 18px;
+ height: 18px;
+ background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
+ background-size: 8px 8px;
+ background-position: 0px 0, 0px 4px, 4px -4px, -4px 0px;
+ background-repeat: repeat;
+ `, [cE('fill', `
+ width: 100%;
+ height: 100%;
+ border-radius: 3px;
+ box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
+ cursor: pointer;
  `)])])]);

package/es/config-provider/src/ConfigProvider.d.ts

@@ -2,7 +2,7 @@ import { PropType, InjectionKey, ComputedRef } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 import { Hljs } from '../../_mixins';
 import type { GlobalTheme, GlobalThemeOverrides, GlobalComponentConfig, GlobalIconConfig } from './interface';
-import type { ConfigProviderInjection, RtlProp } from './internal-interface';
+import type { ConfigProviderInjection, RtlProp, Breakpoints } from './internal-interface';
 import { NDateLocale } from '../../locales';
 export declare const configProviderInjectionKey: InjectionKey<ConfigProviderInjection>;
 export declare const configProviderProps: {
@@ -43,6 +43,7 @@ export declare const configProviderProps: {
             selectDate: string;
             datePlaceholder: string;
             datetimePlaceholder: string;
+            monthPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;
@@ -115,6 +116,7 @@ export declare const configProviderProps: {
     readonly themeOverrides: PropType<GlobalThemeOverrides | null>;
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
+    readonly breakpoints: PropType<Breakpoints>;
     readonly as: {
         readonly type: PropType<string | undefined>;
         readonly validator: () => boolean;
@@ -160,6 +162,7 @@ declare const _default: import("vue").DefineComponent<{
             selectDate: string;
             datePlaceholder: string;
             datetimePlaceholder: string;
+            monthPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;
@@ -232,6 +235,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly themeOverrides: PropType<GlobalThemeOverrides | null>;
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
+    readonly breakpoints: PropType<Breakpoints>;
     readonly as: {
         readonly type: PropType<string | undefined>;
         readonly validator: () => boolean;
@@ -257,6 +261,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly themeOverrides?: unknown;
     readonly componentOptions?: unknown;
     readonly icons?: unknown;
+    readonly breakpoints?: unknown;
     readonly as?: unknown;
 } & {
     abstract: boolean;
@@ -300,6 +305,7 @@ declare const _default: import("vue").DefineComponent<{
             selectDate: string;
             datePlaceholder: string;
             datetimePlaceholder: string;
+            monthPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;
@@ -364,6 +370,7 @@ declare const _default: import("vue").DefineComponent<{
     hljs?: Hljs | undefined;
     componentOptions?: GlobalComponentConfig | undefined;
     icons?: GlobalIconConfig | undefined;
+    breakpoints?: Breakpoints;
 }>, {
     abstract: boolean;
     tag: string;

package/es/config-provider/src/ConfigProvider.js

@@ -24,6 +24,7 @@ export const configProviderProps = {
     themeOverrides: Object,
     componentOptions: Object,
     icons: Object,
+    breakpoints: Object,
     // deprecated
     as: {
         type: String,
@@ -95,9 +96,10 @@ export default defineComponent({
             return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value;
         });
         const mergedClsPrefixRef = computed(() => {
-            var _a;
             const { clsPrefix } = props;
-            return (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedClsPrefixRef.value) !== null && _a !== void 0 ? _a : clsPrefix;
+            if (clsPrefix !== undefined)
+                return clsPrefix;
+            return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedClsPrefixRef.value;
         });
         const mergedRtlRef = computed(() => {
             const { rtl } = props;
@@ -110,7 +112,11 @@ export default defineComponent({
             }
             return rtlEnabledState;
         });
+        const mergedBreakpointsRef = computed(() => {
+            return props.breakpoints || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value);
+        });
         provide(configProviderInjectionKey, {
+            mergedBreakpointsRef,
             mergedRtlRef,
             mergedIconsRef,
             mergedComponentPropsRef,

package/es/config-provider/src/config.d.ts

@@ -0,0 +1,8 @@
+export declare const defaultBreakpoints: {
+    readonly xs: 0;
+    readonly s: 640;
+    readonly m: 1024;
+    readonly l: 1280;
+    readonly xl: 1536;
+    readonly xxl: 1920;
+};

package/es/config-provider/src/config.js

@@ -0,0 +1,8 @@
+export const defaultBreakpoints = {
+    xs: 0,
+    s: 640,
+    m: 1024,
+    l: 1280,
+    xl: 1536,
+    xxl: 1920 // normal desktop display
+};

package/es/config-provider/src/internal-interface.d.ts

@@ -210,7 +210,11 @@ export interface RtlItem {
 }
 export declare type RtlProp = RtlItem[];
 export declare type RtlEnabledState = Partial<Record<keyof GlobalThemeWithoutCommon, RtlItem>>;
+export declare type Breakpoints = {
+    [k: string]: number;
+} | undefined;
 export interface ConfigProviderInjection {
+    mergedBreakpointsRef: Ref<Breakpoints | undefined>;
     mergedClsPrefixRef: Ref<string | undefined>;
     mergedBorderedRef: Ref<boolean | undefined>;
     mergedNamespaceRef: Ref<string | undefined>;

package/es/data-table/src/TableParts/Body.d.ts

@@ -962,8 +962,14 @@ declare const _default: import("vue").DefineComponent<{
     cols: import("vue").Ref<ColItem[]>;
     paginatedData: import("vue").Ref<TmNode[]>;
     rawPaginatedData: import("vue").Ref<import("../interface").InternalRowData[]>;
-    fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, number | undefined>>;
-    fixedColumnRightMap: import("vue").Ref<Record<import("../interface").ColumnKey, number | undefined>>;
+    fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>>;
+    fixedColumnRightMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>>;
     currentPage: import("vue").Ref<number>;
     rowClassName: import("vue").Ref<string | import("../interface").CreateRowClassName<import("../interface").InternalRowData> | undefined>;
     renderExpand: import("vue").Ref<import("../interface").RenderExpand<import("../interface").InternalRowData> | undefined>;

package/es/data-table/src/TableParts/Body.js

@@ -268,7 +268,7 @@ export default defineComponent({
                     const expanded = mergedExpandedRowKeys.includes(rowKey);
                     const showExpandContent = renderExpand && expanded;
                     const colNodes = cols.map((col, colIndex) => {
-                        var _a, _b, _c;
+                        var _a, _b, _c, _d, _e;
                         if (rowIndex in cordToPass) {
                             const cordOfRowToPass = cordToPass[rowIndex];
                             const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
@@ -321,8 +321,8 @@ export default defineComponent({
                         const { ellipsis } = column;
                         return (h("td", { key: colKey, style: {
                                 textAlign: column.align || undefined,
-                                left: pxfy(fixedColumnLeftMap[colKey]),
-                                right: pxfy(fixedColumnRightMap[colKey])
+                                left: pxfy((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
+                                right: pxfy((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
                             }, colspan: mergedColSpan, rowspan: mergedRowSpan, "data-col-key": colKey, class: [
                                 `${mergedClsPrefix}-data-table-td`,
                                 column.className,
@@ -354,7 +354,7 @@ export default defineComponent({
                                 ]
                                 : null,
                             column.type === 'selection' ? (!isSummary ? (h(RenderSafeCheckbox, { key: currentPage, rowKey: rowKey, disabled: rowInfo.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo, checked, e.shiftKey) })) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
-                                ((_c = column.expandable) === null || _c === void 0 ? void 0 : _c.call(column, rowData, rowIndex)) ? (h(ExpandTrigger, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey) })) : null) : null) : (h(Cell, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme }))));
+                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData, rowIndex)) ? (h(ExpandTrigger, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey) })) : null) : null) : (h(Cell, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme }))));
                     });
                     const props = rowProps ? rowProps(rowData, rowIndex) : undefined;
                     const mergedRowClassName = typeof rowClassName === 'string'

package/es/data-table/src/TableParts/Header.d.ts

@@ -9,8 +9,14 @@ declare const _default: import("vue").DefineComponent<{
     mergedSortState: import("vue").Ref<import("../interface").SortState[]>;
     mergedClsPrefix: import("vue").Ref<string>;
     scrollX: import("vue").Ref<string | number | undefined>;
-    fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, number | undefined>>;
-    fixedColumnRightMap: import("vue").Ref<Record<import("../interface").ColumnKey, number | undefined>>;
+    fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>>;
+    fixedColumnRightMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>>;
     currentPage: import("vue").Ref<number>;
     allRowsChecked: import("vue").Ref<boolean>;
     someRowsChecked: import("vue").Ref<boolean>;

package/es/data-table/src/TableParts/Header.js

@@ -72,18 +72,21 @@ export default defineComponent({
         let hasEllipsis = false;
         const theadVNode = (h("thead", { class: `${mergedClsPrefix}-data-table-thead`, "data-n-id": componentId }, rows.map((row) => {
             return (h("tr", { class: `${mergedClsPrefix}-data-table-tr` }, row.map(({ column, colSpan, rowSpan, isLast }) => {
+                var _a, _b;
                 const key = getColKey(column);
                 const { ellipsis } = column;
                 if (!hasEllipsis && ellipsis)
                     hasEllipsis = true;
+                const leftFixed = key in fixedColumnLeftMap;
+                const rightFixed = key in fixedColumnRightMap;
                 return (h("th", { key: key, style: {
                         textAlign: column.align,
-                        left: pxfy(fixedColumnLeftMap[key]),
-                        right: pxfy(fixedColumnRightMap[key])
+                        left: pxfy((_a = fixedColumnLeftMap[key]) === null || _a === void 0 ? void 0 : _a.start),
+                        right: pxfy((_b = fixedColumnRightMap[key]) === null || _b === void 0 ? void 0 : _b.start)
                     }, colspan: colSpan, rowspan: rowSpan, "data-col-key": key, class: [
                         `${mergedClsPrefix}-data-table-th`,
-                        column.fixed &&
-                            `${mergedClsPrefix}-data-table-th--fixed-${column.fixed}`,
+                        (leftFixed || rightFixed) &&
+                            `${mergedClsPrefix}-data-table-th--fixed-${leftFixed ? 'left' : 'right'}`,
                         {
                             [`${mergedClsPrefix}-data-table-th--hover`]: isColumnSorting(column, mergedSortState),
                             [`${mergedClsPrefix}-data-table-th--filterable`]: isColumnFilterable(column),

package/es/data-table/src/interface.d.ts

@@ -116,8 +116,14 @@ export interface DataTableInjection {
     rightFixedColumnsRef: Ref<TableColumns>;
     leftActiveFixedColKeyRef: Ref<ColumnKey | null>;
     rightActiveFixedColKeyRef: Ref<ColumnKey | null>;
-    fixedColumnLeftMapRef: Ref<Record<ColumnKey, number | undefined>>;
-    fixedColumnRightMapRef: Ref<Record<ColumnKey, number | undefined>>;
+    fixedColumnLeftMapRef: Ref<Record<ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>>;
+    fixedColumnRightMapRef: Ref<Record<ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>>;
     mergedCurrentPageRef: Ref<number>;
     someRowsCheckedRef: Ref<boolean>;
     allRowsCheckedRef: Ref<boolean>;

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

@@ -32,32 +32,35 @@ function getRowsAndCols(columns) {
         }
     }
     ensureMaxDepth(columns, 0);
-    function ensureColLayout(columns, currentDepth, parentIsLast) {
-        let currentLeafIndex = -1;
+    let currentLeafIndex = 0;
+    function ensureColLayout(columns, currentDepth) {
         let hideUntilIndex = 0;
-        const lastIndex = columns.length - 1;
         columns.forEach((column, index) => {
             var _a;
             if ('children' in column) {
                 // do not allow colSpan > 1 for non-leaf th
-                const isLast = parentIsLast && index === lastIndex;
+                // we will execute the calculation logic
+                const cachedCurrentLeafIndex = currentLeafIndex;
                 const rowItem = {
                     column,
                     colSpan: 0,
                     rowSpan: 1,
-                    isLast
+                    isLast: false
                 };
-                ensureColLayout(column.children, currentDepth + 1, isLast);
+                ensureColLayout(column.children, currentDepth + 1);
                 column.children.forEach((childColumn) => {
                     var _a, _b;
                     rowItem.colSpan += (_b = (_a = rowItemMap.get(childColumn)) === null || _a === void 0 ? void 0 : _a.colSpan) !== null && _b !== void 0 ? _b : 0;
                 });
+                if (cachedCurrentLeafIndex + rowItem.colSpan === totalRowSpan) {
+                    rowItem.isLast = true;
+                }
                 rowItemMap.set(column, rowItem);
                 rows[currentDepth].push(rowItem);
             }
             else {
-                currentLeafIndex += 1;
                 if (currentLeafIndex < hideUntilIndex) {
+                    currentLeafIndex += 1;
                     return;
                 }
                 let colSpan = 1;
@@ -76,10 +79,11 @@ function getRowsAndCols(columns) {
                 };
                 rowItemMap.set(column, rowItem);
                 rows[currentDepth].push(rowItem);
+                currentLeafIndex += 1;
             }
         });
     }
-    ensureColLayout(columns, 0, true);
+    ensureColLayout(columns, 0);
     return {
         hasEllipsis,
         rows,

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

@@ -1,6 +1,6 @@
 import { ComputedRef, Ref } from 'vue';
 import { DataTableSetupProps } from './DataTable';
-import type { ColumnKey, MainTableRef } from './interface';
+import type { ColumnKey, MainTableRef, TableColumn } from './interface';
 export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, scrollPartRef }: {
     scrollPartRef: Ref<'head' | 'body'>;
     bodyWidthRef: Ref<null | number>;
@@ -8,10 +8,16 @@ export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef
     mergedCurrentPageRef: ComputedRef<number>;
 }): {
     styleScrollXRef: ComputedRef<string | undefined>;
-    fixedColumnLeftMapRef: ComputedRef<Record<ColumnKey, number | undefined>>;
-    fixedColumnRightMapRef: ComputedRef<Record<ColumnKey, number | undefined>>;
-    leftFixedColumnsRef: ComputedRef<import("./interface").TableColumn<any>[]>;
-    rightFixedColumnsRef: ComputedRef<import("./interface").TableColumn<any>[]>;
+    fixedColumnLeftMapRef: ComputedRef<Record<ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>>;
+    fixedColumnRightMapRef: ComputedRef<Record<ColumnKey, {
+        start: number;
+        end: number;
+    } | undefined>>;
+    leftFixedColumnsRef: ComputedRef<TableColumn<any>[]>;
+    rightFixedColumnsRef: ComputedRef<TableColumn<any>[]>;
     leftActiveFixedColKeyRef: Ref<ColumnKey | null>;
     rightActiveFixedColKeyRef: Ref<ColumnKey | null>;
     syncScrollState: () => void;

package/es/data-table/src/use-scroll.js

@@ -19,22 +19,45 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
     const fixedColumnLeftMapRef = computed(() => {
         const columns = {};
         let left = 0;
-        for (const column of leftFixedColumnsRef.value) {
-            columns[getColKey(column)] = left;
-            left += getColWidth(column) || 0;
+        function traverse(cols) {
+            cols.forEach((col) => {
+                const positionInfo = { start: left, end: 0 };
+                columns[getColKey(col)] = positionInfo;
+                if ('children' in col) {
+                    traverse(col.children);
+                    positionInfo.end = left;
+                }
+                else {
+                    left += getColWidth(col) || 0;
+                    positionInfo.end = left;
+                }
+            });
         }
+        traverse(leftFixedColumnsRef.value);
         return columns;
     });
     const fixedColumnRightMapRef = computed(() => {
         const columns = {};
         let right = 0;
-        for (const column of rightFixedColumnsRef.value.reverse()) {
-            columns[getColKey(column)] = right;
-            right += column.width || 0;
+        function traverse(cols) {
+            cols.forEach((col) => {
+                const positionInfo = { start: right, end: 0 };
+                columns[getColKey(col)] = positionInfo;
+                if ('children' in col) {
+                    traverse(col.children);
+                    positionInfo.end = right;
+                }
+                else {
+                    right += getColWidth(col) || 0;
+                    positionInfo.end = right;
+                }
+            });
         }
+        traverse(rightFixedColumnsRef.value.reverse());
         return columns;
     });
     function deriveActiveLeftFixedColumn() {
+        var _a, _b;
         // target is header element
         const { value: leftFixedColumns } = leftFixedColumnsRef;
         let leftWidth = 0;
@@ -42,9 +65,9 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
         let leftActiveFixedColKey = null;
         for (let i = 0; i < leftFixedColumns.length; ++i) {
             const key = getColKey(leftFixedColumns[i]);
-            if (scrollLeft > (fixedColumnLeftMap[key] || 0) - leftWidth) {
+            if (scrollLeft > (((_a = fixedColumnLeftMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) - leftWidth) {
                 leftActiveFixedColKey = key;
-                leftWidth += getColWidth(leftFixedColumns[i]) || 0;
+                leftWidth = ((_b = fixedColumnLeftMap[key]) === null || _b === void 0 ? void 0 : _b.end) || 0;
             }
             else {
                 break;
@@ -53,6 +76,7 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
         leftActiveFixedColKeyRef.value = leftActiveFixedColKey;
     }
     function deriveActiveRightFixedColumn() {
+        var _a, _b;
         // target is header element
         const { value: rightFixedColumns } = rightFixedColumnsRef;
         const scrollWidth = Number(props.scrollX);
@@ -64,9 +88,12 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
         const { value: fixedColumnRightMap } = fixedColumnRightMapRef;
         for (let i = 0; i < rightFixedColumns.length; ++i) {
             const key = getColKey(rightFixedColumns[i]);
-            if (Math.round(scrollLeft + (fixedColumnRightMap[key] || 0) + tableWidth - rightWidth) < scrollWidth) {
+            if (Math.round(scrollLeft +
+                (((_a = fixedColumnRightMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) +
+                tableWidth -
+                rightWidth) < scrollWidth) {
                 rightActiveFixedColKey = key;
-                rightWidth += getColWidth(rightFixedColumns[i]) || 0;
+                rightWidth = ((_b = fixedColumnRightMap[key]) === null || _b === void 0 ? void 0 : _b.end) || 0;
             }
             else {
                 break;

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

@@ -109,6 +109,9 @@ export default defineComponent({
                 else if (props.type === 'datetime') {
                     return localeRef.value.datetimePlaceholder;
                 }
+                else if (props.type === 'month') {
+                    return localeRef.value.monthPlaceholder;
+                }
                 return props.placeholder;
             }
             else {

package/es/date-picker/src/panel/date.d.ts

@@ -1044,6 +1044,7 @@ declare const _default: import("vue").DefineComponent<{
         selectDate: string;
         datePlaceholder: string;
         datetimePlaceholder: string;
+        monthPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/date-picker/src/panel/daterange.d.ts

@@ -1042,6 +1042,7 @@ declare const _default: import("vue").DefineComponent<{
         selectDate: string;
         datePlaceholder: string;
         datetimePlaceholder: string;
+        monthPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/date-picker/src/panel/datetime.d.ts

@@ -1050,6 +1050,7 @@ declare const _default: import("vue").DefineComponent<{
         selectDate: string;
         datePlaceholder: string;
         datetimePlaceholder: string;
+        monthPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/date-picker/src/panel/datetimerange.d.ts

@@ -1042,6 +1042,7 @@ declare const _default: import("vue").DefineComponent<{
         selectDate: string;
         datePlaceholder: string;
         datetimePlaceholder: string;
+        monthPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/date-picker/src/panel/month.d.ts

@@ -1065,6 +1065,7 @@ declare const _default: import("vue").DefineComponent<{
         selectDate: string;
         datePlaceholder: string;
         datetimePlaceholder: string;
+        monthPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/date-picker/src/panel/use-calendar.d.ts

@@ -1047,6 +1047,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
         selectDate: string;
         datePlaceholder: string;
         datetimePlaceholder: string;
+        monthPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/date-picker/src/panel/use-dual-calendar.d.ts

@@ -1045,6 +1045,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
         selectDate: string;
         datePlaceholder: string;
         datetimePlaceholder: string;
+        monthPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;