naive-ui 2.19.7 → 2.19.11

package/lib/collapse/src/CollapseItem.js

@@ -4,7 +4,6 @@ const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
 const icons_1 = require("../../_internal/icons");
-const composable_1 = require("../../_utils/composable");
 const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const Collapse_1 = require("./Collapse");
@@ -28,7 +27,6 @@ exports.default = (0, vue_1.defineComponent)({
             (0, _utils_1.throwError)('collapse-item', '`n-collapse-item` must be placed inside `n-collapse`.');
         }
         const { expandedNamesRef, props: collapseProps, mergedClsPrefixRef, slots: collapseSlots } = NCollapse;
-        (0, composable_1.useInjectionCollection)(Collapse_1.collapseInjectionKey, 'collectedItemNames', mergedNameRef);
         const collapsedRef = (0, vue_1.computed)(() => {
             const { value: expandedNames } = expandedNamesRef;
             if (Array.isArray(expandedNames)) {

package/lib/color-picker/src/ColorPicker.d.ts

@@ -28,6 +28,7 @@ export declare const colorPickerPanelProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly swatches: PropType<string[]>;
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -878,6 +879,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly swatches: PropType<string[]>;
     readonly actions: {
         readonly type: PropType<"confirm"[]>;
         readonly default: null;
@@ -1735,6 +1737,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly modes?: unknown;
     readonly to?: unknown;
     readonly showAlpha?: unknown;
+    readonly swatches?: unknown;
     readonly actions?: unknown;
     readonly internalActions?: unknown;
     readonly size?: unknown;
@@ -2575,6 +2578,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     onComplete?: OnUpdateValue | undefined;
+    swatches?: string[] | undefined;
     internalActions?: readonly ("undo" | "redo")[] | undefined;
 }>, {
     show: boolean | undefined;

package/lib/color-picker/src/ColorPicker.js

@@ -17,6 +17,7 @@ const ColorPickerTrigger_1 = require("./ColorPickerTrigger");
 const utils_1 = require("./utils");
 const index_cssr_1 = require("./styles/index.cssr");
 const button_1 = require("../../button");
+const ColorPickerSwatches_1 = require("./ColorPickerSwatches");
 exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: String, show: {
         type: Boolean,
         default: undefined
@@ -30,7 +31,7 @@ exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useThe
     }, to: _utils_1.useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
-    }, actions: {
+    }, swatches: Array, actions: {
         type: Array,
         default: null
     }, internalActions: Array, size: String, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
@@ -343,6 +344,7 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         function renderPanel() {
+            var _a;
             const { value: rgba } = rgbaRef;
             const { value: displayedHue } = displayedHueRef;
             const { internalActions, modes, actions } = props;
@@ -355,7 +357,8 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)(Pallete_1.default, { clsPrefix: mergedClsPrefix, rgba: rgba, displayedHue: displayedHue, displayedSv: displayedSvRef.value, onUpdateSV: handleUpdateSv, onComplete: handleComplete }),
                     (0, vue_1.h)(HueSlider_1.default, { clsPrefix: mergedClsPrefix, hue: displayedHue, onUpdateHue: handleUpdateHue, onComplete: handleComplete }),
                     props.showAlpha ? ((0, vue_1.h)(AlphaSlider_1.default, { clsPrefix: mergedClsPrefix, rgba: rgba, alpha: displayedAlphaRef.value, onUpdateAlpha: handleUpdateAlpha, onComplete: handleComplete })) : null,
-                    (0, vue_1.h)(ColorInput_1.default, { clsPrefix: mergedClsPrefix, showAlpha: props.showAlpha, mode: displayedModeRef.value, modes: modes, onUpdateMode: handleUpdateDisplayedMode, value: mergedValueRef.value, valueArr: mergedValueArrRef.value, onUpdateValue: handleInputUpdateValue })),
+                    (0, vue_1.h)(ColorInput_1.default, { clsPrefix: mergedClsPrefix, showAlpha: props.showAlpha, mode: displayedModeRef.value, modes: modes, onUpdateMode: handleUpdateDisplayedMode, value: mergedValueRef.value, valueArr: mergedValueArrRef.value, onUpdateValue: handleInputUpdateValue }),
+                    ((_a = props.swatches) === null || _a === void 0 ? void 0 : _a.length) && ((0, vue_1.h)(ColorPickerSwatches_1.default, { clsPrefix: mergedClsPrefix, mode: displayedModeRef.value, swatches: props.swatches, onUpdateColor: (color) => doUpdateValue(color, 'input') }))),
                 (actions === null || actions === void 0 ? void 0 : actions.length) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-color-picker-action` }, actions.includes('confirm') && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: handleConfirm, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.confirm })))) : null,
                 slots.action ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-color-picker-action` }, { default: slots.action })) : internalActions ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-color-picker-action` },
                     internalActions.includes('undo') && ((0, vue_1.h)(button_1.NButton, { size: "small", onClick: undo, disabled: !undoableRef.value, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, { default: () => localeRef.value.undo })),

package/lib/color-picker/src/ColorPickerSwatches.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+import { ColorPickerMode } from './utils';
+interface ParsedColor {
+    value: string;
+    mode: ColorPickerMode | null;
+    legalValue: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    mode: {
+        type: PropType<ColorPickerMode>;
+        required: true;
+    };
+    swatches: {
+        type: PropType<string[]>;
+        required: true;
+    };
+    onUpdateColor: {
+        type: PropType<(value: string) => void>;
+        required: true;
+    };
+}, {
+    parsedSwatchesRef: import("vue").ComputedRef<ParsedColor[]>;
+    handleSwatchSelect: (parsed: ParsedColor) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    clsPrefix?: unknown;
+    mode?: unknown;
+    swatches?: unknown;
+    onUpdateColor?: unknown;
+} & {
+    mode: ColorPickerMode;
+    clsPrefix: string;
+    swatches: string[];
+    onUpdateColor: (value: string) => void;
+} & {}>, {}>;
+export default _default;

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

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const seemly_1 = require("seemly");
+const utils_1 = require("./utils");
+const _utils_1 = require("../../_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] = (0, seemly_1.hsva)(color);
+        return (0, seemly_1.toRgbaString)([...(0, seemly_1.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 (0, seemly_1.toHexaString)((0, seemly_1.rgba)(swatchValue));
+        },
+        hsl(swatchValue) {
+            const [r, g, b, a] = (0, seemly_1.rgba)(swatchValue);
+            return (0, seemly_1.toHslaString)([...(0, seemly_1.rgb2hsl)(r, g, b), a]);
+        },
+        hsv(swatchValue) {
+            const [r, g, b, a] = (0, seemly_1.rgba)(swatchValue);
+            return (0, seemly_1.toHsvaString)([...(0, seemly_1.rgb2hsv)(r, g, b), a]);
+        }
+    },
+    hex: {
+        rgb(swatchValue) {
+            return (0, seemly_1.toRgbaString)((0, seemly_1.rgba)(swatchValue));
+        },
+        hsl(swatchValue) {
+            const [r, g, b, a] = (0, seemly_1.rgba)(swatchValue);
+            return (0, seemly_1.toHslaString)([...(0, seemly_1.rgb2hsl)(r, g, b), a]);
+        },
+        hsv(swatchValue) {
+            const [r, g, b, a] = (0, seemly_1.rgba)(swatchValue);
+            return (0, seemly_1.toHsvaString)([...(0, seemly_1.rgb2hsv)(r, g, b), a]);
+        }
+    },
+    hsl: {
+        hex(swatchValue) {
+            const [h, s, l, a] = (0, seemly_1.hsla)(swatchValue);
+            return (0, seemly_1.toHexaString)([...(0, seemly_1.hsl2rgb)(h, s, l), a]);
+        },
+        rgb(swatchValue) {
+            const [h, s, l, a] = (0, seemly_1.hsla)(swatchValue);
+            return (0, seemly_1.toRgbaString)([...(0, seemly_1.hsl2rgb)(h, s, l), a]);
+        },
+        hsv(swatchValue) {
+            const [h, s, l, a] = (0, seemly_1.hsla)(swatchValue);
+            return (0, seemly_1.toHsvaString)([...(0, seemly_1.hsl2hsv)(h, s, l), a]);
+        }
+    },
+    hsv: {
+        hex(swatchValue) {
+            const [h, s, v, a] = (0, seemly_1.hsva)(swatchValue);
+            return (0, seemly_1.toHexaString)([...(0, seemly_1.hsv2rgb)(h, s, v), a]);
+        },
+        rgb(swatchValue) {
+            const [h, s, v, a] = (0, seemly_1.hsva)(swatchValue);
+            return (0, seemly_1.toRgbaString)([...(0, seemly_1.hsv2rgb)(h, s, v), a]);
+        },
+        hsl(swatchValue) {
+            const [h, s, v, a] = (0, seemly_1.hsva)(swatchValue);
+            return (0, seemly_1.toHslaString)([...(0, seemly_1.hsv2hsl)(h, s, v), a]);
+        }
+    }
+};
+exports.default = (0, vue_1.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 = (0, vue_1.computed)(() => props.swatches.map((value) => {
+            const mode = (0, utils_1.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
+                    (0, _utils_1.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 ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-swatches` }, this.parsedSwatchesRef.map((swatch) => ((0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-swatch`, onClick: () => this.handleSwatchSelect(swatch) },
+            (0, vue_1.h)("div", { class: `${clsPrefix}-color-picker-swatch__fill`, style: { background: swatch.legalValue } }))))));
+    }
+});

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

@@ -140,4 +140,24 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.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; 
+ `)])]), (0, cssr_1.cB)('color-picker-swatches', `
+ display: grid;
+ grid-gap: 8px;
+ flex-wrap: wrap;
+ position: relative;
+ grid-template-columns: repeat(auto-fill, 18px);
+ margin-top: 10px;
+ `, [(0, cssr_1.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;
+ `, [(0, cssr_1.cE)('fill', `
+ width: 100%;
+ height: 100%;
+ border-radius: 3px;
+ box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
+ cursor: pointer;
  `)])])]);

package/lib/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/lib/config-provider/src/ConfigProvider.js

@@ -27,6 +27,7 @@ exports.configProviderProps = {
     themeOverrides: Object,
     componentOptions: Object,
     icons: Object,
+    breakpoints: Object,
     // deprecated
     as: {
         type: String,
@@ -98,9 +99,10 @@ exports.default = (0, vue_1.defineComponent)({
             return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value;
         });
         const mergedClsPrefixRef = (0, vue_1.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 = (0, vue_1.computed)(() => {
             const { rtl } = props;
@@ -113,7 +115,11 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return rtlEnabledState;
         });
+        const mergedBreakpointsRef = (0, vue_1.computed)(() => {
+            return props.breakpoints || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value);
+        });
         (0, vue_1.provide)(exports.configProviderInjectionKey, {
+            mergedBreakpointsRef,
             mergedRtlRef,
             mergedIconsRef,
             mergedComponentPropsRef,

package/lib/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/lib/config-provider/src/config.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultBreakpoints = void 0;
+exports.defaultBreakpoints = {
+    xs: 0,
+    s: 640,
+    m: 1024,
+    l: 1280,
+    xl: 1536,
+    xxl: 1920 // normal desktop display
+};

package/lib/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/lib/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/lib/data-table/src/TableParts/Body.js

@@ -270,7 +270,7 @@ exports.default = (0, vue_1.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);
@@ -323,8 +323,8 @@ exports.default = (0, vue_1.defineComponent)({
                         const { ellipsis } = column;
                         return ((0, vue_1.h)("td", { key: colKey, style: {
                                 textAlign: column.align || undefined,
-                                left: (0, seemly_1.pxfy)(fixedColumnLeftMap[colKey]),
-                                right: (0, seemly_1.pxfy)(fixedColumnRightMap[colKey])
+                                left: (0, seemly_1.pxfy)((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
+                                right: (0, seemly_1.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,
@@ -356,7 +356,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 ]
                                 : null,
                             column.type === 'selection' ? (!isSummary ? ((0, vue_1.h)(BodyCheckbox_1.default, { 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)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme }))));
+                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData, rowIndex)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme }))));
                     });
                     const props = rowProps ? rowProps(rowData, rowIndex) : undefined;
                     const mergedRowClassName = typeof rowClassName === 'string'

package/lib/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/lib/data-table/src/TableParts/Header.js

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

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

@@ -35,32 +35,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;
@@ -79,10 +82,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/lib/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;