naive-ui 2.25.2 → 2.25.5

package/lib/input-number/src/InputNumber.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
+const evtd_1 = require("evtd");
 const icons_1 = require("../../_internal/icons");
 const input_1 = require("../../input");
 const _internal_1 = require("../../_internal");
@@ -15,6 +16,8 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
 const input_number_cssr_1 = __importDefault(require("./styles/input-number.cssr"));
+const HOLDING_CHANGE_THRESHOLD = 800;
+const HOLDING_CHANGE_INTERVAL = 100;
 const inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { loading: {
         type: Boolean,
         default: undefined
@@ -41,20 +44,18 @@ const inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
         default: true
     }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], 
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('input-number', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'InputNumber',
     props: inputNumberProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('input-number', '`on-change` is deprecated, please use `on-update:value` instead');
+                }
+            });
+        }
         const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('InputNumber', '-input-number', input_number_cssr_1.default, styles_1.inputNumberLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('InputNumber');
@@ -240,8 +241,10 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function doAdd() {
             const { value: addable } = addableRef;
-            if (!addable)
+            if (!addable) {
+                clearAddHoldTimeout();
                 return;
+            }
             const { value: mergedValue } = mergedValueRef;
             if (mergedValue === null) {
                 if (!props.validator) {
@@ -255,8 +258,10 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function doMinus() {
             const { value: minusable } = minusableRef;
-            if (!minusable)
+            if (!minusable) {
+                clearMinusHoldTimeout();
                 return;
+            }
             const { value: mergedValue } = mergedValueRef;
             if (mergedValue === null) {
                 if (!props.validator) {
@@ -299,8 +304,60 @@ exports.default = (0, vue_1.defineComponent)({
             }
             (_c = inputInstRef.value) === null || _c === void 0 ? void 0 : _c.activate();
         }
-        const handleAddClick = doAdd;
-        const handleMinusClick = doMinus;
+        let minusHoldStateIntervalId = null;
+        let addHoldStateIntervalId = null;
+        let firstMinusMousedownId = null;
+        function clearMinusHoldTimeout() {
+            if (firstMinusMousedownId) {
+                window.clearTimeout(firstMinusMousedownId);
+                firstMinusMousedownId = null;
+            }
+            if (minusHoldStateIntervalId) {
+                window.clearInterval(minusHoldStateIntervalId);
+                minusHoldStateIntervalId = null;
+            }
+        }
+        function clearAddHoldTimeout() {
+            if (firstAddMousedownId) {
+                window.clearTimeout(firstAddMousedownId);
+                firstAddMousedownId = null;
+            }
+            if (addHoldStateIntervalId) {
+                window.clearInterval(addHoldStateIntervalId);
+                addHoldStateIntervalId = null;
+            }
+        }
+        function handleMinusMousedown() {
+            firstMinusMousedownId = window.setTimeout(() => {
+                minusHoldStateIntervalId = window.setInterval(() => {
+                    doMinus();
+                }, HOLDING_CHANGE_INTERVAL);
+            }, HOLDING_CHANGE_THRESHOLD);
+            (0, evtd_1.on)('mouseup', document, () => {
+                window.setTimeout(clearMinusHoldTimeout, 0);
+            });
+        }
+        let firstAddMousedownId = null;
+        function handleAddMousedown() {
+            firstAddMousedownId = window.setTimeout(() => {
+                addHoldStateIntervalId = window.setInterval(() => {
+                    doAdd();
+                }, HOLDING_CHANGE_INTERVAL);
+            }, HOLDING_CHANGE_THRESHOLD);
+            (0, evtd_1.on)('mouseup', document, () => {
+                window.setTimeout(clearAddHoldTimeout, 0);
+            });
+        }
+        const handleAddClick = () => {
+            if (addHoldStateIntervalId)
+                return;
+            doAdd();
+        };
+        const handleMinusClick = () => {
+            if (minusHoldStateIntervalId)
+                return;
+            doMinus();
+        };
         function handleKeyDown(e) {
             var _a, _b;
             if (e.code === 'Enter' || e.code === 'NumpadEnter') {
@@ -354,6 +411,8 @@ exports.default = (0, vue_1.defineComponent)({
             handleMouseDown,
             handleAddClick,
             handleMinusClick,
+            handleAddMousedown,
+            handleMinusMousedown,
             handleKeyDown,
             handleUpdateDisplayedValue, 
             // theme
@@ -380,12 +439,12 @@ exports.default = (0, vue_1.defineComponent)({
                     return this.showButton
                         ? [
                             this.$slots.suffix && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input-number-suffix` }, { default: this.$slots.suffix })),
-                            (0, vue_1.h)(button_1.NButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, ref: "minusButtonInstRef" }, {
-                                default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                            (0, vue_1.h)(button_1.NxButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, onMousedown: this.handleMinusMousedown, ref: "minusButtonInstRef" }, {
+                                default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, "aria-disabled": true }, {
                                     default: () => (0, vue_1.h)(icons_1.RemoveIcon, null)
                                 }))
                             }),
-                            (0, vue_1.h)(button_1.NButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, ref: "addButtonInstRef" }, {
+                            (0, vue_1.h)(button_1.NxButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, onMousedown: this.handleAddMousedown, ref: "addButtonInstRef" }, {
                                 default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                     default: () => (0, vue_1.h)(icons_1.AddIcon, null)
                                 }))

package/lib/layout/src/Layout.d.ts

@@ -167,6 +167,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -319,7 +320,9 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         '--n-bezier': string;
         '--n-color': string;
         '--n-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     embedded: BooleanConstructor;
     position: {
@@ -560,6 +563,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -712,7 +716,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-bezier': string;
         '--n-color': string;
         '--n-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     embedded: BooleanConstructor;
     position: {

package/lib/layout/src/Layout.js

@@ -39,7 +39,7 @@ function createLayoutComponent(isContent) {
         setup(props) {
             const scrollableElRef = (0, vue_1.ref)(null);
             const scrollbarInstRef = (0, vue_1.ref)(null);
-            const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+            const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
             const themeRef = (0, _mixins_1.useTheme)('Layout', '-layout', layout_cssr_1.default, styles_1.layoutLight, props, mergedClsPrefixRef);
             function scrollTo(options, y) {
                 if (props.nativeScrollbar) {
@@ -70,21 +70,28 @@ function createLayoutComponent(isContent) {
             const exposedMethods = {
                 scrollTo
             };
+            const cssVarsRef = (0, vue_1.computed)(() => {
+                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+                return {
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-color': props.embedded ? self.colorEmbedded : self.color,
+                    '--n-text-color': self.textColor
+                };
+            });
+            const themeClassHandle = inlineThemeDisabled
+                ? (0, _mixins_1.useThemeClass)('layout', undefined, cssVarsRef, props)
+                : undefined;
             return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, scrollableElRef,
                 scrollbarInstRef,
-                hasSiderStyle, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
-                    const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                    return {
-                        '--n-bezier': cubicBezierEaseInOut,
-                        '--n-color': props.embedded ? self.colorEmbedded : self.color,
-                        '--n-text-color': self.textColor
-                    };
-                }) }, exposedMethods);
+                hasSiderStyle, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
         },
         render() {
+            var _a;
             const { mergedClsPrefix, hasSider } = this;
+            (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
             const hasSiderStyle = hasSider ? this.hasSiderStyle : undefined;
             const layoutClass = [
+                this.themeClass,
                 isContent && `${mergedClsPrefix}-layout-content`,
                 `${mergedClsPrefix}-layout`,
                 `${mergedClsPrefix}-layout--${this.position}-positioned`

package/lib/layout/src/LayoutContent.d.ts

@@ -119,6 +119,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -271,7 +272,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-bezier': string;
         '--n-color': string;
         '--n-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     embedded: BooleanConstructor;
     position: {

package/lib/layout/src/LayoutFooter.d.ts

@@ -197,7 +197,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    cssVars: import("vue").ComputedRef<any>;
+    cssVars: import("vue").ComputedRef<any> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     inverted: BooleanConstructor;
     position: {

package/lib/layout/src/LayoutFooter.js

@@ -13,33 +13,42 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'LayoutFooter',
     props: layoutFooterProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Layout', '-layout-footer', layout_footer_cssr_1.default, styles_1.layoutLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const vars = {
+                '--n-bezier': cubicBezierEaseInOut
+            };
+            if (props.inverted) {
+                vars['--n-color'] = self.footerColorInverted;
+                vars['--n-text-color'] = self.textColorInverted;
+                vars['--n-border-color'] = self.footerBorderColorInverted;
+            }
+            else {
+                vars['--n-color'] = self.footerColor;
+                vars['--n-text-color'] = self.textColor;
+                vars['--n-border-color'] = self.footerBorderColor;
+            }
+            return vars;
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('layout-footer', (0, vue_1.computed)(() => (props.inverted ? 'a' : 'b')), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const vars = {
-                    '--n-bezier': cubicBezierEaseInOut
-                };
-                if (props.inverted) {
-                    vars['--n-color'] = self.footerColorInverted;
-                    vars['--n-text-color'] = self.textColorInverted;
-                    vars['--n-border-color'] = self.footerBorderColorInverted;
-                }
-                else {
-                    vars['--n-color'] = self.footerColor;
-                    vars['--n-text-color'] = self.textColor;
-                    vars['--n-border-color'] = self.footerBorderColor;
-                }
-                return vars;
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
         const { mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-layout-footer`,
+                this.themeClass,
                 this.position &&
                     `${mergedClsPrefix}-layout-footer--${this.position}-positioned`,
                 this.bordered && `${mergedClsPrefix}-layout-footer--bordered`

package/lib/layout/src/LayoutHeader.d.ts

@@ -113,7 +113,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    cssVars: import("vue").ComputedRef<any>;
+    cssVars: import("vue").ComputedRef<any> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     position: {
         readonly type: import("vue").PropType<"static" | "absolute">;

package/lib/layout/src/LayoutHeader.js

@@ -20,33 +20,42 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'LayoutHeader',
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), headerProps),
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Layout', '-layout-header', layout_header_cssr_1.default, styles_1.layoutLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const vars = {
+                '--n-bezier': cubicBezierEaseInOut
+            };
+            if (props.inverted) {
+                vars['--n-color'] = self.headerColorInverted;
+                vars['--n-text-color'] = self.textColorInverted;
+                vars['--n-border-color'] = self.headerBorderColorInverted;
+            }
+            else {
+                vars['--n-color'] = self.headerColor;
+                vars['--n-text-color'] = self.textColor;
+                vars['--n-border-color'] = self.headerBorderColor;
+            }
+            return vars;
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('layout-header', (0, vue_1.computed)(() => (props.inverted ? 'a' : 'b')), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const vars = {
-                    '--n-bezier': cubicBezierEaseInOut
-                };
-                if (props.inverted) {
-                    vars['--n-color'] = self.headerColorInverted;
-                    vars['--n-text-color'] = self.textColorInverted;
-                    vars['--n-border-color'] = self.headerBorderColorInverted;
-                }
-                else {
-                    vars['--n-color'] = self.headerColor;
-                    vars['--n-text-color'] = self.textColor;
-                    vars['--n-border-color'] = self.headerBorderColor;
-                }
-                return vars;
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
         const { mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-layout-header`,
+                this.themeClass,
                 this.position &&
                     `${mergedClsPrefix}-layout-header--${this.position}-positioned`,
                 this.bordered && `${mergedClsPrefix}-layout-header--bordered`

package/lib/layout/src/LayoutSider.d.ts

@@ -206,6 +206,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -360,7 +361,10 @@ declare const _default: import("vue").DefineComponent<{
     siderPlacement: import("vue").ComputedRef<"left" | "right">;
     handleTransitionend: (e: TransitionEvent) => void;
     handleTriggerClick: () => void;
+    inlineThemeDisabled: boolean | undefined;
     cssVars: import("vue").ComputedRef<any>;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     position: {
         readonly type: PropType<"static" | "absolute">;

package/lib/layout/src/LayoutSider.js

@@ -139,7 +139,7 @@ exports.default = (0, vue_1.defineComponent)({
             collapsedRef: mergedCollapsedRef,
             collapseModeRef: (0, vue_1.toRef)(props, 'collapseMode')
         });
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Layout', '-layout-sider', layout_sider_cssr_1.default, styles_1.layoutLight, props, mergedClsPrefixRef);
         function handleTransitionend(e) {
             var _a, _b;
@@ -155,39 +155,47 @@ exports.default = (0, vue_1.defineComponent)({
         const exposedMethods = {
             scrollTo
         };
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const { siderToggleButtonColor, siderToggleButtonBorder, siderToggleBarColor, siderToggleBarColorHover } = self;
+            const vars = {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-toggle-button-color': siderToggleButtonColor,
+                '--n-toggle-button-border': siderToggleButtonBorder,
+                '--n-toggle-bar-color': siderToggleBarColor,
+                '--n-toggle-bar-color-hover': siderToggleBarColorHover
+            };
+            if (props.inverted) {
+                vars['--n-color'] = self.siderColorInverted;
+                vars['--n-text-color'] = self.textColorInverted;
+                vars['--n-border-color'] = self.siderBorderColorInverted;
+                vars['--n-toggle-button-icon-color'] =
+                    self.siderToggleButtonIconColorInverted;
+                vars.__invertScrollbar = self.__invertScrollbar;
+            }
+            else {
+                vars['--n-color'] = self.siderColor;
+                vars['--n-text-color'] = self.textColor;
+                vars['--n-border-color'] = self.siderBorderColor;
+                vars['--n-toggle-button-icon-color'] = self.siderToggleButtonIconColor;
+            }
+            return vars;
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('layout-sider', (0, vue_1.computed)(() => (props.inverted ? 'a' : 'b')), cssVarsRef, props)
+            : undefined;
         return Object.assign({ scrollableElRef,
             scrollbarInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, styleMaxWidth: styleMaxWidthRef, mergedCollapsed: mergedCollapsedRef, scrollContainerStyle: scrollContainerStyleRef, siderPlacement: siderPlacementRef, handleTransitionend,
-            handleTriggerClick, cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { siderToggleButtonColor, siderToggleButtonBorder, siderToggleBarColor, siderToggleBarColorHover } = self;
-                const vars = {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-toggle-button-color': siderToggleButtonColor,
-                    '--n-toggle-button-border': siderToggleButtonBorder,
-                    '--n-toggle-bar-color': siderToggleBarColor,
-                    '--n-toggle-bar-color-hover': siderToggleBarColorHover
-                };
-                if (props.inverted) {
-                    vars['--n-color'] = self.siderColorInverted;
-                    vars['--n-text-color'] = self.textColorInverted;
-                    vars['--n-border-color'] = self.siderBorderColorInverted;
-                    vars['--n-toggle-button-icon-color'] =
-                        self.siderToggleButtonIconColorInverted;
-                    vars.__invertScrollbar = self.__invertScrollbar;
-                }
-                else {
-                    vars['--n-color'] = self.siderColor;
-                    vars['--n-text-color'] = self.textColor;
-                    vars['--n-border-color'] = self.siderBorderColor;
-                    vars['--n-toggle-button-icon-color'] = self.siderToggleButtonIconColor;
-                }
-                return vars;
-            }) }, exposedMethods);
+            handleTriggerClick,
+            inlineThemeDisabled, cssVars: cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
+        var _a;
         const { mergedClsPrefix, mergedCollapsed, showTrigger } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("aside", { class: [
                 `${mergedClsPrefix}-layout-sider`,
+                this.themeClass,
                 `${mergedClsPrefix}-layout-sider--${this.position}-positioned`,
                 `${mergedClsPrefix}-layout-sider--${this.siderPlacement}-placement`,
                 this.bordered && `${mergedClsPrefix}-layout-sider--bordered`,
@@ -195,7 +203,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (!mergedCollapsed || this.showCollapsedContent) &&
                     `${mergedClsPrefix}-layout-sider--show-content`
             ], onTransitionend: this.handleTransitionend, style: [
-                this.cssVars,
+                this.inlineThemeDisabled ? undefined : this.cssVars,
                 {
                     maxWidth: this.styleMaxWidth,
                     width: (0, _utils_1.formatLength)(this.width)

package/lib/legacy-grid/src/styles/index.cssr.js

@@ -10,7 +10,7 @@ const positionStyles = Array.apply(null, {
   length: 24
 }).map((_, index) => {
   const prefixIndex = index + 1;
-  const percent = (1 / 24 * prefixIndex * 100).toFixed(2) + '%';
+  const percent = `calc(100% / 24 * ${prefixIndex})`;
   return [(0, cssr_1.cM)(`${prefixIndex}-span`, {
     width: percent
   }), (0, cssr_1.cM)(`${prefixIndex}-offset`, {

package/lib/locales/common/esAR.js

@@ -12,7 +12,7 @@ const esAR = {
         negativeText: 'Cancelar'
     },
     Cascader: {
-        placeholder: 'Seleccionar por pavor',
+        placeholder: 'Seleccionar por favor',
         loading: 'Cargando',
         loadingRequiredMessage: (label) => `Por favor, cargue los descendientes de ${label} antes de marcarlo.`
     },
@@ -62,7 +62,7 @@ const esAR = {
         description: 'Sin datos'
     },
     Select: {
-        placeholder: 'Seleccionar por pavor'
+        placeholder: 'Seleccionar por favor'
     },
     TimePicker: {
         placeholder: 'Seleccionar hora',

package/lib/locales/common/frFR.js

@@ -89,7 +89,7 @@ const frFR = {
         create: 'Créer'
     },
     ThemeEditor: {
-        title: 'Editeur de thème',
+        title: 'Éditeur de thème',
         clearAllVars: 'Effacer toutes les variables',
         clearSearch: 'Effacer la recherche',
         filterCompName: 'Filtrer par nom de composant',
@@ -98,15 +98,14 @@ const frFR = {
         export: 'Exporter',
         restore: 'Réinitialiser'
     },
-    // TODO: translation
     Image: {
-        tipPrevious: 'Previous picture (←)',
-        tipNext: 'Next picture (→)',
-        tipCounterclockwise: 'Counterclockwise',
-        tipClockwise: 'Clockwise',
-        tipZoomOut: 'Zoom out',
-        tipZoomIn: 'Zoom in',
-        tipClose: 'Close (Esc)'
+        tipPrevious: 'Image précédente (←)',
+        tipNext: 'Image suivante (→)',
+        tipCounterclockwise: 'Sens antihoraire',
+        tipClockwise: 'Sens horaire',
+        tipZoomOut: 'Dézoomer',
+        tipZoomIn: 'Zoomer',
+        tipClose: 'Fermer (Échap.)'
     }
 };
 exports.default = frFR;

package/lib/locales/common/skSK.d.ts

@@ -0,0 +1,3 @@
+import type { NLocale } from './enUS';
+declare const skSK: NLocale;
+export default skSK;