naive-ui 2.23.1 → 2.23.2

package/lib/collapse-transition/src/CollapseTransition.js

@@ -48,7 +48,7 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { bezier } } = mergedThemeRef.value;
                 return {
-                    '--bezier': bezier
+                    '--n-bezier': bezier
                 };
             })
         };

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

@@ -1774,16 +1774,16 @@ declare const _default: import("vue").DefineComponent<{
     handleClickOutside(e: MouseEvent): void;
     renderPanel: () => VNode;
     cssVars: ComputedRef<{
-        '--bezier': string;
-        '--text-color': string;
-        '--color': string;
-        '--panel-font-size': string;
-        '--font-size': string;
-        '--box-shadow': string;
-        '--border': string;
-        '--border-radius': string;
-        '--height': string;
-        '--divider-color': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-color': string;
+        '--n-panel-font-size': string;
+        '--n-font-size': string;
+        '--n-box-shadow': string;
+        '--n-border': string;
+        '--n-border-radius': string;
+        '--n-height': string;
+        '--n-divider-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly value?: unknown;

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

@@ -335,16 +335,16 @@ exports.default = (0, vue_1.defineComponent)({
             const { value: mergedSize } = mergedSizeRef;
             const { common: { cubicBezierEaseInOut }, self: { textColor, color, panelFontSize, boxShadow, border, borderRadius, dividerColor, [(0, _utils_1.createKey)('height', mergedSize)]: height, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize } } = themeRef.value;
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--text-color': textColor,
-                '--color': color,
-                '--panel-font-size': panelFontSize,
-                '--font-size': fontSize,
-                '--box-shadow': boxShadow,
-                '--border': border,
-                '--border-radius': borderRadius,
-                '--height': height,
-                '--divider-color': dividerColor
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-color': color,
+                '--n-panel-font-size': panelFontSize,
+                '--n-font-size': fontSize,
+                '--n-box-shadow': boxShadow,
+                '--n-border': border,
+                '--n-border-radius': borderRadius,
+                '--n-height': height,
+                '--n-divider-color': dividerColor
             };
         });
         function renderPanel() {

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

@@ -13,36 +13,36 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --color
-// --text-color
-// --border-radius
-// --panel-font-size
-// --font-size
-// --bezier
-// --height
-// --box-shadow
-// --divider-color
+// --n-color
+// --n-text-color
+// --n-border-radius
+// --n-panel-font-size
+// --n-font-size
+// --n-bezier
+// --n-height
+// --n-box-shadow
+// --n-divider-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  display: inline-block;
  box-sizing: border-box;
- height: var(--height);
- font-size: var(--font-size);
+ height: var(--n-height);
+ font-size: var(--n-font-size);
  width: 100%;
  position: relative;
  `), (0, cssr_1.cB)('color-picker-panel', `
  margin: 4px 0;
  width: 240px;
- font-size: var(--panel-font-size);
- color: var(--text-color);
- background-color: var(--color);
+ font-size: var(--n-panel-font-size);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
  transition:
- box-shadow .3s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier);
- border-radius: var(--border-radius);
- box-shadow: var(--box-shadow);
+ box-shadow .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
+ box-shadow: var(--n-box-shadow);
  `, [(0, fade_in_scale_up_cssr_1.default)(), (0, cssr_1.cB)('input', `
  text-align: center;
  `)]), (0, cssr_1.cB)('color-picker-checkboard', `
@@ -141,21 +141,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  `), (0, cssr_1.cB)('color-picker-action', `
  display: flex;
  margin-top: -4px;
- border-top: 1px solid var(--divider-color);
+ border-top: 1px solid var(--n-divider-color);
  padding: 8px 12px;
  justify-content: flex-end;
  `, [(0, cssr_1.cB)('button', 'margin-left: 8px;')]), (0, cssr_1.cB)('color-picker-trigger', `
- border: var(--border);
+ border: var(--n-border);
  height: 100%;
  box-sizing: border-box;
- border-radius: var(--border-radius);
- transition: border-color .3s var(--bezier);
+ border-radius: var(--n-border-radius);
+ transition: border-color .3s var(--n-bezier);
  cursor: pointer;
  `, [(0, cssr_1.cE)('value', `
  white-space: nowrap;
  position: relative;
  `), (0, cssr_1.cE)('fill', `
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  position: absolute;
  display: flex;
  align-items: center;
@@ -165,11 +165,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('color-picker', `
  top: 4px;
  bottom: 4px;
  `), (0, cssr_1.cB)('color-picker-checkboard', `
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  `, [(0, cssr_1.c)('&::after', `
- --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; 
+ --n-block-size: calc((var(--n-height) - 8px) / 3);
+ background-size: calc(var(--n-block-size) * 2) calc(var(--n-block-size) * 2);
+ background-position: 0 0, 0 var(--n-block-size), var(--n-block-size) calc(-1 * var(--n-block-size)), calc(-1 * var(--n-block-size)) 0px; 
  `)])]), (0, cssr_1.cB)('color-picker-swatches', `
  display: grid;
  grid-gap: 8px;

package/lib/components.d.ts

@@ -17,6 +17,8 @@ export * from './code';
 export * from './collapse';
 export * from './collapse-transition';
 export * from './config-provider';
+export * from './countdown';
+export * from './number-animation';
 export * from './data-table';
 export * from './date-picker';
 export * from './descriptions';

package/lib/components.js

@@ -29,6 +29,8 @@ __exportStar(require("./code"), exports);
 __exportStar(require("./collapse"), exports);
 __exportStar(require("./collapse-transition"), exports);
 __exportStar(require("./config-provider"), exports);
+__exportStar(require("./countdown"), exports);
+__exportStar(require("./number-animation"), exports);
 __exportStar(require("./data-table"), exports);
 __exportStar(require("./date-picker"), exports);
 __exportStar(require("./descriptions"), exports);

package/lib/countdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NCountdown } from './src/Countdown';
+export type { CountdownProps } from './src/Countdown';

package/lib/countdown/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NCountdown = void 0;
+var Countdown_1 = require("./src/Countdown");
+Object.defineProperty(exports, "NCountdown", { enumerable: true, get: function () { return __importDefault(Countdown_1).default; } });

package/lib/countdown/src/Countdown.d.ts

@@ -0,0 +1,72 @@
+import { PropType, VNodeChild } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+declare const countdownProps: {
+    label: StringConstructor;
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    precision: {
+        type: PropType<0 | 2 | 1 | 3>;
+        default: number;
+    };
+    render: PropType<(props: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    }) => VNodeChild>;
+    onFinish: PropType<() => void>;
+};
+export declare type CountdownProps = ExtractPublicPropTypes<typeof countdownProps>;
+declare const _default: import("vue").DefineComponent<{
+    label: StringConstructor;
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    precision: {
+        type: PropType<0 | 2 | 1 | 3>;
+        default: number;
+    };
+    render: PropType<(props: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    }) => VNodeChild>;
+    onFinish: PropType<() => void>;
+}, () => VNodeChild, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    label?: unknown;
+    duration?: unknown;
+    active?: unknown;
+    precision?: unknown;
+    render?: unknown;
+    onFinish?: unknown;
+} & {
+    active: boolean;
+    duration: number;
+    precision: 0 | 2 | 1 | 3;
+} & {
+    label?: string | undefined;
+    render?: ((props: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    }) => VNodeChild) | undefined;
+    onFinish?: (() => void) | undefined;
+}>, {
+    active: boolean;
+    duration: number;
+    precision: 0 | 2 | 1 | 3;
+}>;
+export default _default;

package/lib/countdown/src/Countdown.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const countdownProps = {
+    label: String,
+    duration: {
+        type: Number,
+        default: 0
+    },
+    active: {
+        type: Boolean,
+        default: true
+    },
+    precision: {
+        type: Number,
+        default: 0
+    },
+    render: Function,
+    onFinish: Function
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Countdown',
+    props: countdownProps,
+    setup(props) {
+        let timerId = null;
+        let rafId = null;
+        let elapsed = 0;
+        let finished = false;
+        const timeInfo = (0, vue_1.reactive)({
+            hours: 0,
+            minutes: 0,
+            seconds: 0,
+            milliseconds: 0
+        });
+        deriveDisplayValue(props.duration);
+        let pnow = -1;
+        function getDistance(time) {
+            return props.duration - elapsed + pnow - time;
+        }
+        function deriveDisplayValue(distance) {
+            const hours = Math.floor(distance / 3600000);
+            const minutes = Math.floor((distance % 3600000) / 60000);
+            const seconds = Math.floor((distance % 60000) / 1000);
+            const milliseconds = Math.floor(distance % 1000);
+            timeInfo.hours = hours;
+            timeInfo.minutes = minutes;
+            timeInfo.seconds = seconds;
+            timeInfo.milliseconds = milliseconds;
+        }
+        function getDisplayValue(info) {
+            const { hours, minutes, seconds, milliseconds } = info;
+            const { precision } = props;
+            switch (precision) {
+                case 0:
+                    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+                default:
+                    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(Math.floor(milliseconds / (precision === 1 ? 100 : precision === 2 ? 10 : 1))).padStart(precision, '0')}`;
+            }
+        }
+        const frame = () => {
+            var _a;
+            const { precision } = props;
+            const distance = getDistance(performance.now());
+            if (distance <= 0) {
+                deriveDisplayValue(0);
+                stopTimer();
+                if (!finished) {
+                    (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props);
+                    finished = true;
+                }
+                return;
+            }
+            let leftTime;
+            switch (precision) {
+                case 3:
+                case 2:
+                    leftTime = distance % 34; // about 30 fps
+                    break;
+                case 1:
+                    leftTime = distance % 100;
+                    break;
+                default:
+                    leftTime = distance % 1000;
+            }
+            deriveDisplayValue(distance);
+            timerId = window.setTimeout(() => {
+                frame();
+            }, leftTime);
+        };
+        const stopTimer = () => {
+            if (timerId !== null) {
+                window.clearTimeout(timerId);
+                timerId = null;
+            }
+            if (rafId !== null) {
+                window.cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        };
+        (0, vue_1.onMounted)(() => {
+            (0, vue_1.watchEffect)(() => {
+                if (props.active) {
+                    pnow = performance.now();
+                    frame();
+                }
+                else {
+                    const now = performance.now();
+                    if (pnow !== -1) {
+                        elapsed += now - pnow;
+                    }
+                    stopTimer();
+                }
+            });
+        });
+        (0, vue_1.onBeforeUnmount)(() => {
+            stopTimer();
+        });
+        return () => {
+            const { render } = props;
+            if (render) {
+                return render(timeInfo);
+            }
+            else {
+                return getDisplayValue(timeInfo);
+            }
+        };
+    }
+});

package/lib/countdown/src/utils.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -3817,45 +3817,45 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--th-padding': string;
-        '--td-padding': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--line-height': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--th-color': string;
-        '--th-color-hover': string;
-        '--th-color-modal': string;
-        '--th-color-hover-modal': string;
-        '--th-color-popover': string;
-        '--th-color-hover-popover': string;
-        '--td-color': string;
-        '--td-color-hover': string;
-        '--td-color-modal': string;
-        '--td-color-hover-modal': string;
-        '--td-color-popover': string;
-        '--td-color-hover-popover': string;
-        '--th-text-color': string;
-        '--td-text-color': string;
-        '--th-font-weight': string;
-        '--th-button-color-hover': string;
-        '--th-icon-color': string;
-        '--th-icon-color-active': string;
-        '--filter-size': string;
-        '--pagination-margin': string;
-        '--empty-padding': string;
-        '--box-shadow-before': string;
-        '--box-shadow-after': string;
-        '--sorter-size': string;
-        '--loading-size': string;
-        '--loading-color': string;
-        '--opacity-loading': string;
-        '--td-color-striped': string;
-        '--td-color-striped-modal': string;
-        '--td-color-striped-popover': string;
+        '--n-font-size': string;
+        '--n-th-padding': string;
+        '--n-td-padding': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-line-height': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-th-color': string;
+        '--n-th-color-hover': string;
+        '--n-th-color-modal': string;
+        '--n-th-color-hover-modal': string;
+        '--n-th-color-popover': string;
+        '--n-th-color-hover-popover': string;
+        '--n-td-color': string;
+        '--n-td-color-hover': string;
+        '--n-td-color-modal': string;
+        '--n-td-color-hover-modal': string;
+        '--n-n-td-color-popover': string;
+        '--n-td-color-hover-popover': string;
+        '--n-th-text-color': string;
+        '--n-td-text-color': string;
+        '--n-th-font-weight': string;
+        '--n-th-button-color-hover': string;
+        '--n-th-icon-color': string;
+        '--n-th-icon-color-active': string;
+        '--n-filter-size': string;
+        '--n-pagination-margin': string;
+        '--n-empty-padding': string;
+        '--n-box-shadow-before': string;
+        '--n-box-shadow-after': string;
+        '--n-sorter-size': string;
+        '--n-loading-size': string;
+        '--n-loading-color': string;
+        '--n-opacity-loading': string;
+        '--n-td-color-striped': string;
+        '--n-td-color-striped-modal': string;
+        '--n-td-color-striped-popover': string;
     }>;
     filter: (filters: import("./interface").FilterState | null) => void;
     filters: (filters: import("./interface").FilterState | null) => void;

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

@@ -206,9 +206,9 @@ exports.default = (0, vue_1.defineComponent)({
                 const { self: { actionDividerColor, actionPadding, actionButtonMargin } } = themeRef.value;
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return {
-                    '--action-padding': actionPadding,
-                    '--action-button-margin': actionButtonMargin,
-                    '--action-divider-color': actionDividerColor
+                    '--n-action-padding': actionPadding,
+                    '--n-action-button-margin': actionButtonMargin,
+                    '--n-action-divider-color': actionDividerColor
                 };
             }),
             mergedTableLayoutRef,
@@ -241,45 +241,45 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('thPadding', size)]: thPadding, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--th-padding': thPadding,
-                    '--td-padding': tdPadding,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--line-height': lineHeight,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--th-color': thColor,
-                    '--th-color-hover': thColorHover,
-                    '--th-color-modal': thColorModal,
-                    '--th-color-hover-modal': thColorHoverModal,
-                    '--th-color-popover': thColorPopover,
-                    '--th-color-hover-popover': thColorHoverPopover,
-                    '--td-color': tdColor,
-                    '--td-color-hover': tdColorHover,
-                    '--td-color-modal': tdColorModal,
-                    '--td-color-hover-modal': tdColorHoverModal,
-                    '--td-color-popover': tdColorPopover,
-                    '--td-color-hover-popover': tdColorHoverPopover,
-                    '--th-text-color': thTextColor,
-                    '--td-text-color': tdTextColor,
-                    '--th-font-weight': thFontWeight,
-                    '--th-button-color-hover': thButtonColorHover,
-                    '--th-icon-color': thIconColor,
-                    '--th-icon-color-active': thIconColorActive,
-                    '--filter-size': filterSize,
-                    '--pagination-margin': paginationMargin,
-                    '--empty-padding': emptyPadding,
-                    '--box-shadow-before': boxShadowBefore,
-                    '--box-shadow-after': boxShadowAfter,
-                    '--sorter-size': sorterSize,
-                    '--loading-size': loadingSize,
-                    '--loading-color': loadingColor,
-                    '--opacity-loading': opacityLoading,
-                    '--td-color-striped': tdColorStriped,
-                    '--td-color-striped-modal': tdColorStripedModal,
-                    '--td-color-striped-popover': tdColorStripedPopover
+                    '--n-font-size': fontSize,
+                    '--n-th-padding': thPadding,
+                    '--n-td-padding': tdPadding,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-line-height': lineHeight,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-th-color': thColor,
+                    '--n-th-color-hover': thColorHover,
+                    '--n-th-color-modal': thColorModal,
+                    '--n-th-color-hover-modal': thColorHoverModal,
+                    '--n-th-color-popover': thColorPopover,
+                    '--n-th-color-hover-popover': thColorHoverPopover,
+                    '--n-td-color': tdColor,
+                    '--n-td-color-hover': tdColorHover,
+                    '--n-td-color-modal': tdColorModal,
+                    '--n-td-color-hover-modal': tdColorHoverModal,
+                    '--n-n-td-color-popover': tdColorPopover,
+                    '--n-td-color-hover-popover': tdColorHoverPopover,
+                    '--n-th-text-color': thTextColor,
+                    '--n-td-text-color': tdTextColor,
+                    '--n-th-font-weight': thFontWeight,
+                    '--n-th-button-color-hover': thButtonColorHover,
+                    '--n-th-icon-color': thIconColor,
+                    '--n-th-icon-color-active': thIconColorActive,
+                    '--n-filter-size': filterSize,
+                    '--n-pagination-margin': paginationMargin,
+                    '--n-empty-padding': emptyPadding,
+                    '--n-box-shadow-before': boxShadowBefore,
+                    '--n-box-shadow-after': boxShadowAfter,
+                    '--n-sorter-size': sorterSize,
+                    '--n-loading-size': loadingSize,
+                    '--n-loading-color': loadingColor,
+                    '--n-opacity-loading': opacityLoading,
+                    '--n-td-color-striped': tdColorStriped,
+                    '--n-td-color-striped-modal': tdColorStripedModal,
+                    '--n-td-color-striped-popover': tdColorStripedPopover
                 };
             }) });
     },

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vueuc_1 = require("vueuc");
+const vooks_1 = require("vooks");
+const common_1 = require("../../../_mixins/common");
 const cssr_1 = require("../../../_utils/cssr");
 const _internal_1 = require("../../../_internal");
 const _utils_1 = require("../../../_utils");
@@ -17,7 +19,6 @@ const Cell_1 = __importDefault(require("./Cell"));
 const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
 const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
 const Header_1 = __importDefault(require("./Header"));
-const vooks_1 = require("vooks");
 function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
     function traverse(rs) {
@@ -195,12 +196,12 @@ exports.default = (0, vue_1.defineComponent)({
                 const createActiveLeftFixedStyle = (leftActiveFixedColKey) => {
                     if (leftActiveFixedColKey === null)
                         return null;
-                    return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--box-shadow-after)' });
+                    return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--n-box-shadow-after)' });
                 };
                 const createActiveRightFixedStyle = (rightActiveFixedColKey) => {
                     if (rightActiveFixedColKey === null)
                         return null;
-                    return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--box-shadow-before)' });
+                    return (0, cssr_1.c)(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--n-box-shadow-before)' });
                 };
                 return (0, cssr_1.c)([
                     createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
@@ -231,7 +232,8 @@ exports.default = (0, vue_1.defineComponent)({
             style.mount({
                 id: `n-${componentId}`,
                 force: true,
-                props: cProps
+                props: cProps,
+                anchorMetaName: common_1.cssrAnchorMetaName
             });
             fixedStyleMounted = true;
         });