naive-ui 2.35.0 → 2.37.0

package/lib/tabs/src/Tabs.js

@@ -27,7 +27,7 @@ exports.tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, placement: {
         type: String,
         default: 'top'
-    }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], paneWrapperClass: String, paneWrapperStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
+    }, tabStyle: [String, Object], tabClass: String, addTabStyle: [String, Object], addTabClass: String, barWidth: Number, paneClass: String, paneStyle: [String, Object], paneWrapperClass: String, paneWrapperStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
         type: Number,
         default: 0
     }, animated: Boolean, onBeforeLeave: Function, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
@@ -58,6 +58,7 @@ exports.default = (0, vue_1.defineComponent)({
         const scrollWrapperElRef = (0, vue_1.ref)(null);
         const addTabInstRef = (0, vue_1.ref)(null);
         const xScrollInstRef = (0, vue_1.ref)(null);
+        const yScrollElRef = (0, vue_1.ref)(null);
         const startReachedRef = (0, vue_1.ref)(true);
         const endReachedRef = (0, vue_1.ref)(true);
         const compitableSizeRef = (0, vooks_1.useCompitable)(props, ['labelSize', 'size']);
@@ -94,6 +95,7 @@ exports.default = (0, vue_1.defineComponent)({
             const { value: barEl } = barElRef;
             if (!barEl)
                 return;
+            const barIsHide = barEl.style.opacity === '0';
             if (tabEl) {
                 const disabledClassName = `${mergedClsPrefixRef.value}-tabs-bar--disabled`;
                 const { barWidth, placement } = props;
@@ -115,7 +117,14 @@ exports.default = (0, vue_1.defineComponent)({
                         barEl.style.maxWidth = `${tabEl.offsetWidth}px`;
                     }
                     barEl.style.width = '8192px';
+                    if (barIsHide) {
+                        barEl.style.transition = 'none';
+                    }
                     void barEl.offsetWidth;
+                    if (barIsHide) {
+                        barEl.style.transition = '';
+                        barEl.style.opacity = '1';
+                    }
                 }
                 else {
                     clearBarStyle(['left', 'maxWidth', 'width']);
@@ -129,10 +138,25 @@ exports.default = (0, vue_1.defineComponent)({
                         barEl.style.maxHeight = `${tabEl.offsetHeight}px`;
                     }
                     barEl.style.height = '8192px';
+                    if (barIsHide) {
+                        barEl.style.transition = 'none';
+                    }
                     void barEl.offsetHeight;
+                    if (barIsHide) {
+                        barEl.style.transition = '';
+                        barEl.style.opacity = '1';
+                    }
                 }
             }
         }
+        function hideBarStyle() {
+            if (props.type === 'card')
+                return;
+            const { value: barEl } = barElRef;
+            if (!barEl)
+                return;
+            barEl.style.opacity = '0';
+        }
         function clearBarStyle(styleProps) {
             const { value: barEl } = barElRef;
             if (!barEl)
@@ -148,6 +172,9 @@ exports.default = (0, vue_1.defineComponent)({
             if (tabEl) {
                 updateBarStyle(tabEl);
             }
+            else {
+                hideBarStyle();
+            }
         }
         function updateCurrentScrollPosition(smooth) {
             var _a;
@@ -283,6 +310,40 @@ exports.default = (0, vue_1.defineComponent)({
             // since deriveScrollShadow will force layout
             barEl.classList.remove(disableTransitionClassName);
         }
+        const segmentCapsuleElRef = (0, vue_1.ref)(null);
+        function updateSegmentPosition({ disabledTransition }) {
+            const tabsEl = tabsElRef.value;
+            if (!tabsEl)
+                return;
+            disabledTransition && tabsEl.classList.add('transition-disabled');
+            const activeTabEl = getCurrentEl();
+            if (activeTabEl && segmentCapsuleElRef.value) {
+                const rect = activeTabEl.getBoundingClientRect();
+                // move segment capsule to match the position of the active tab
+                segmentCapsuleElRef.value.style.width = `${rect.width}px`;
+                segmentCapsuleElRef.value.style.height = `${rect.height}px`;
+                segmentCapsuleElRef.value.style.transform = `translateX(${rect.left -
+                    tabsEl.getBoundingClientRect().left -
+                    (0, seemly_1.depx)(getComputedStyle(tabsEl).paddingLeft)}px)`;
+            }
+            disabledTransition && tabsEl.classList.remove('transition-disabled');
+        }
+        (0, vue_1.watch)([mergedValueRef], () => {
+            if (props.type === 'segment') {
+                void (0, vue_1.nextTick)(() => {
+                    updateSegmentPosition({
+                        disabledTransition: false
+                    });
+                });
+            }
+        });
+        (0, vue_1.onMounted)(() => {
+            if (props.type === 'segment') {
+                updateSegmentPosition({
+                    disabledTransition: true
+                });
+            }
+        });
         let memorizedWidth = 0;
         function _handleNavResize(entry) {
             var _a, _b;
@@ -301,7 +362,10 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
             if (type !== 'segment') {
-                deriveScrollShadow((_b = xScrollInstRef.value) === null || _b === void 0 ? void 0 : _b.$el);
+                const { placement } = props;
+                deriveScrollShadow((placement === 'top' || placement === 'bottom'
+                    ? (_b = xScrollInstRef.value) === null || _b === void 0 ? void 0 : _b.$el
+                    : yScrollElRef.value) || null);
             }
         }
         const handleNavResize = (0, lodash_1.throttle)(_handleNavResize, 64);
@@ -332,7 +396,7 @@ exports.default = (0, vue_1.defineComponent)({
                     addTabFixedRef.value = false;
                 }
             }
-            deriveScrollShadow((_a = xScrollInstRef.value) === null || _a === void 0 ? void 0 : _a.$el);
+            deriveScrollShadow(((_a = xScrollInstRef.value) === null || _a === void 0 ? void 0 : _a.$el) || null);
         }
         const handleTabsResize = (0, lodash_1.throttle)(_handleTabsResize, 64);
         function handleAdd() {
@@ -372,6 +436,9 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.provide)(interface_1.tabsInjectionKey, {
             triggerRef: (0, vue_1.toRef)(props, 'trigger'),
             tabStyleRef: (0, vue_1.toRef)(props, 'tabStyle'),
+            tabClassRef: (0, vue_1.toRef)(props, 'tabClass'),
+            addTabStyleRef: (0, vue_1.toRef)(props, 'addTabStyle'),
+            addTabClassRef: (0, vue_1.toRef)(props, 'addTabClass'),
             paneClassRef: (0, vue_1.toRef)(props, 'paneClass'),
             paneStyleRef: (0, vue_1.toRef)(props, 'paneStyle'),
             mergedClsPrefixRef,
@@ -409,19 +476,6 @@ exports.default = (0, vue_1.defineComponent)({
                 el.classList.add(shadowEndClass);
             }
         });
-        const tabsRailElRef = (0, vue_1.ref)(null);
-        (0, vue_1.watch)(mergedValueRef, () => {
-            if (props.type === 'segment') {
-                const tabsRailEl = tabsRailElRef.value;
-                if (tabsRailEl) {
-                    void (0, vue_1.nextTick)(() => {
-                        tabsRailEl.classList.add('transition-disabled');
-                        void tabsRailEl.offsetWidth;
-                        tabsRailEl.classList.remove('transition-disabled');
-                    });
-                }
-            }
-        });
         const exposedMethods = {
             syncBarPosition: () => {
                 updateCurrentBarStyle();
@@ -478,7 +532,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return `${compitableSizeRef.value[0]}${props.type[0]}`;
             }), cssVarsRef, props)
             : undefined;
-        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedValue: mergedValueRef, renderedNames: new Set(), tabsRailElRef,
+        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedValue: mergedValueRef, renderedNames: new Set(), segmentCapsuleElRef,
             tabsPaneWrapperRef,
             tabsElRef,
             barElRef,
@@ -486,6 +540,7 @@ exports.default = (0, vue_1.defineComponent)({
             xScrollInstRef,
             scrollWrapperElRef, addTabFixed: addTabFixedRef, tabWrapperStyle: tabWrapperStyleRef, handleNavResize, mergedSize: compitableSizeRef, handleScroll,
             handleTabsResize, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, animationDirection: animationDirectionRef, renderNameListRef,
+            yScrollElRef,
             onAnimationBeforeLeave,
             onAnimationEnter,
             onAnimationAfterEnter, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
@@ -563,27 +618,31 @@ exports.default = (0, vue_1.defineComponent)({
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 (0, _utils_1.resolveWrappedSlot)(prefixSlot, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, children))),
-                isSegment ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail`, ref: "tabsRailElRef" }, showPane
-                    ? tabPaneChildren.map((tabPaneVNode, index) => {
-                        renderNameListRef.value.push(tabPaneVNode.props.name);
-                        return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalCreatedByPane: true, internalLeftPadded: index !== 0 }), tabPaneVNode.children
-                            ? {
-                                default: tabPaneVNode.children.tab
+                isSegment ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail`, ref: "tabsElRef" },
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-capsule`, ref: "segmentCapsuleElRef" },
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-wrapper` },
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-tab` }))),
+                    showPane
+                        ? tabPaneChildren.map((tabPaneVNode, index) => {
+                            renderNameListRef.value.push(tabPaneVNode.props.name);
+                            return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalCreatedByPane: true, internalLeftPadded: index !== 0 }), tabPaneVNode.children
+                                ? {
+                                    default: tabPaneVNode.children.tab
+                                }
+                                : undefined));
+                        })
+                        : tabChildren.map((tabVNode, index) => {
+                            renderNameListRef.value.push(tabVNode.props.name);
+                            if (index === 0) {
+                                return tabVNode;
                             }
-                            : undefined));
-                    })
-                    : tabChildren.map((tabVNode, index) => {
-                        renderNameListRef.value.push(tabVNode.props.name);
-                        if (index === 0) {
-                            return tabVNode;
-                        }
-                        else {
-                            return createLeftPaddedTabVNode(tabVNode);
-                        }
-                    }))) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
+                            else {
+                                return createLeftPaddedTabVNode(tabVNode);
+                            }
+                        }))) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
                     default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" }, ['top', 'bottom'].includes(resolvedPlacement) ? ((0, vue_1.h)(vueuc_1.VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
                         default: scrollContent
-                    })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-y-scroll`, onScroll: this.handleScroll }, scrollContent()))))
+                    })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-y-scroll`, onScroll: this.handleScroll, ref: "yScrollElRef" }, scrollContent()))))
                 })),
                 addTabFixed && addable && isCard
                     ? createAddTag(addable, true)

package/lib/tabs/src/interface.d.ts

@@ -12,6 +12,9 @@ export interface TabsInjection {
     typeRef: Ref<TabsType>;
     closableRef: Ref<boolean>;
     tabStyleRef: Ref<string | CSSProperties | undefined>;
+    tabClassRef: Ref<string | undefined>;
+    addTabClassRef: Ref<string | undefined>;
+    addTabStyleRef: Ref<string | CSSProperties | undefined>;
     paneClassRef: Ref<string | undefined>;
     paneStyleRef: Ref<string | CSSProperties | undefined>;
     tabChangeIdRef: {

package/lib/tabs/src/styles/index.cssr.js

@@ -43,7 +43,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  transition:
  background-color .3s var(--n-bezier),
  border-color .3s var(--n-bezier);
-`, [(0, cssr_1.cM)('segment-type', [(0, cssr_1.cB)('tabs-rail', [(0, cssr_1.c)('&.transition-disabled', 'color: red;', [(0, cssr_1.cB)('tabs-tab', `
+`, [(0, cssr_1.cM)('segment-type', [(0, cssr_1.cB)('tabs-rail', [(0, cssr_1.c)('&.transition-disabled', [(0, cssr_1.cB)('tabs-capsule', `
  transition: none;
  `)])])]), (0, cssr_1.cM)('top', [(0, cssr_1.cB)('tab-pane', `
  padding: var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left);
@@ -81,7 +81,14 @@ exports.default = (0, cssr_1.cB)('tabs', `
  transition: background-color .3s var(--n-bezier);
  display: flex;
  align-items: center;
- `, [(0, cssr_1.cB)('tabs-tab-wrapper', `
+ `, [(0, cssr_1.cB)('tabs-capsule', `
+ border-radius: var(--n-tab-border-radius);
+ position: absolute;
+ pointer-events: none;
+ background-color: var(--n-tab-color-segment);
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
+ transition: 0.3s;
+ `), (0, cssr_1.cB)('tabs-tab-wrapper', `
  flex-basis: 0;
  flex-grow: 1;
  display: flex;
@@ -97,8 +104,6 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `, [(0, cssr_1.cM)('active', `
  font-weight: var(--n-font-weight-strong);
  color: var(--n-tab-text-color-active);
- background-color: var(--n-tab-color-segment);
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
  `), (0, cssr_1.c)('&:hover', `
  color: var(--n-tab-text-color-hover);
  `)])])]), (0, cssr_1.cM)('flex', [(0, cssr_1.cB)('tabs-nav', {
@@ -129,7 +134,9 @@ exports.default = (0, cssr_1.cB)('tabs', `
  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .12);
  `)]), (0, cssr_1.cM)('shadow-end', [(0, cssr_1.c)('&::after', `
  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
- `)])])]), (0, cssr_1.cM)('left, right', [(0, cssr_1.cB)('tabs-nav-scroll-wrapper', [(0, cssr_1.c)('&::before', `
+ `)])])]), (0, cssr_1.cM)('left, right', [(0, cssr_1.cB)('tabs-nav-scroll-content', `
+ flex-direction: column;
+ `), (0, cssr_1.cB)('tabs-nav-scroll-wrapper', [(0, cssr_1.c)('&::before', `
  top: 0;
  left: 0;
  right: 0;
@@ -165,6 +172,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  display: flex;
  position: relative;
  min-width: 100%;
+ min-height: 100%;
  width: fit-content;
  box-sizing: border-box;
  `), (0, cssr_1.cB)('tabs-wrapper', `
@@ -201,6 +209,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `), (0, cssr_1.cE)('label', `
  display: flex;
  align-items: center;
+ z-index: 1;
  `)]), (0, cssr_1.cB)('tabs-bar', `
  position: absolute;
  bottom: 0;
@@ -210,6 +219,7 @@ exports.default = (0, cssr_1.cB)('tabs', `
  transition:
  left .2s var(--n-bezier),
  max-width .2s var(--n-bezier),
+ opacity .3s var(--n-bezier),
  background-color .3s var(--n-bezier);
  `, [(0, cssr_1.c)('&.transition-disabled', `
  transition: none;
@@ -298,7 +308,6 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `), (0, cssr_1.cB)('tabs-pad', `
  flex-grow: 1;
  transition: border-color .3s var(--n-bezier);
- border-bottom: 1px solid var(--n-tab-border-color);
  `), (0, cssr_1.cB)('tabs-tab-pad', `
  transition: border-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('tabs-tab', `
@@ -339,6 +348,8 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-bottom: 1px solid #0000;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
  border-bottom: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-pad', `
+ border-bottom: 1px solid var(--n-tab-border-color);
  `)])]), (0, cssr_1.cM)('left', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
  border-top-left-radius: var(--n-tab-border-radius);
  border-bottom-left-radius: var(--n-tab-border-radius);
@@ -346,6 +357,8 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-right: 1px solid #0000;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
  border-right: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-pad', `
+ border-right: 1px solid var(--n-tab-border-color);
  `)])]), (0, cssr_1.cM)('right', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
  border-top-right-radius: var(--n-tab-border-radius);
  border-bottom-right-radius: var(--n-tab-border-radius);
@@ -353,6 +366,8 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-left: 1px solid #0000;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
  border-left: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-pad', `
+ border-left: 1px solid var(--n-tab-border-color);
  `)])]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cM)('card-type', [(0, cssr_1.cB)('tabs-tab', `
  border-bottom-left-radius: var(--n-tab-border-radius);
  border-bottom-right-radius: var(--n-tab-border-radius);
@@ -360,4 +375,6 @@ exports.default = (0, cssr_1.cB)('tabs', `
  border-top: 1px solid #0000;
  `)]), (0, cssr_1.cB)('tabs-tab-pad', `
  border-top: 1px solid var(--n-tab-border-color);
+ `), (0, cssr_1.cB)('tabs-pad', `
+ border-top: 1px solid var(--n-tab-border-color);
  `)])])])]);

package/lib/tag/src/Tag.d.ts

@@ -131,7 +131,6 @@ export declare const tagProps: {
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tag", {
         closeBorderRadius: string;
@@ -220,7 +219,6 @@ export declare const tagProps: {
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tag", {
         closeBorderRadius: string;
@@ -309,7 +307,6 @@ export declare const tagProps: {
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>>;
 };
 interface TagInjection {
@@ -442,7 +439,6 @@ declare const _default: import("vue").DefineComponent<{
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tag", {
         closeBorderRadius: string;
@@ -531,7 +527,6 @@ declare const _default: import("vue").DefineComponent<{
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tag", {
         closeBorderRadius: string;
@@ -620,7 +615,6 @@ declare const _default: import("vue").DefineComponent<{
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>>;
 }, {
     rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -643,8 +637,10 @@ declare const _default: import("vue").DefineComponent<{
         '--n-close-icon-color-hover': string;
         '--n-close-icon-color-pressed': string;
         '--n-close-icon-color-disabled': string;
-        '--n-close-margin': string;
-        '--n-close-margin-rtl': string;
+        '--n-close-margin-top': string;
+        '--n-close-margin-right': string;
+        '--n-close-margin-bottom': string;
+        '--n-close-margin-left': string;
         '--n-close-size': string;
         '--n-color': string;
         '--n-color-checkable': string;
@@ -791,7 +787,6 @@ declare const _default: import("vue").DefineComponent<{
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tag", {
         closeBorderRadius: string;
@@ -880,7 +875,6 @@ declare const _default: import("vue").DefineComponent<{
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Tag", {
         closeBorderRadius: string;
@@ -969,12 +963,11 @@ declare const _default: import("vue").DefineComponent<{
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>>>;
 }>>, {
     type: "default" | "error" | "primary" | "info" | "success" | "warning";
-    round: boolean;
     size: "small" | "medium" | "large" | "tiny";
+    round: boolean;
     disabled: boolean | undefined;
     checked: boolean;
     strong: boolean;

package/lib/tag/src/Tag.js

@@ -12,6 +12,7 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const common_props_1 = __importDefault(require("./common-props"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const seemly_1 = require("seemly");
 exports.tagProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), common_props_1.default), { bordered: {
         type: Boolean,
         default: undefined
@@ -78,7 +79,8 @@ exports.default = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Tag', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { type, size, color: { color, textColor } = {} } = props;
-            const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, closeBorderRadius, fontWeightStrong, [(0, _utils_1.createKey)('colorBordered', type)]: colorBordered, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(0, _utils_1.createKey)('closeIconSize', size)]: closeIconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('color', type)]: typedColor, [(0, _utils_1.createKey)('textColor', type)]: typeTextColor, [(0, _utils_1.createKey)('border', type)]: border, [(0, _utils_1.createKey)('closeIconColor', type)]: closeIconColor, [(0, _utils_1.createKey)('closeIconColorHover', type)]: closeIconColorHover, [(0, _utils_1.createKey)('closeIconColorPressed', type)]: closeIconColorPressed, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, closeBorderRadius, fontWeightStrong, [(0, _utils_1.createKey)('colorBordered', type)]: colorBordered, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(0, _utils_1.createKey)('closeIconSize', size)]: closeIconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('color', type)]: typedColor, [(0, _utils_1.createKey)('textColor', type)]: typeTextColor, [(0, _utils_1.createKey)('border', type)]: border, [(0, _utils_1.createKey)('closeIconColor', type)]: closeIconColor, [(0, _utils_1.createKey)('closeIconColorHover', type)]: closeIconColorHover, [(0, _utils_1.createKey)('closeIconColorPressed', type)]: closeIconColorPressed, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
+            const closeMarginDiscrete = (0, seemly_1.getMargin)(closeMargin);
             return {
                 '--n-font-weight-strong': fontWeightStrong,
                 '--n-avatar-size-override': `calc(${height} - 8px)`,
@@ -93,8 +95,10 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-close-icon-color-hover': closeIconColorHover,
                 '--n-close-icon-color-pressed': closeIconColorPressed,
                 '--n-close-icon-color-disabled': closeIconColor,
-                '--n-close-margin': closeMargin,
-                '--n-close-margin-rtl': closeMarginRtl,
+                '--n-close-margin-top': closeMarginDiscrete.top,
+                '--n-close-margin-right': closeMarginDiscrete.right,
+                '--n-close-margin-bottom': closeMarginDiscrete.bottom,
+                '--n-close-margin-left': closeMarginDiscrete.left,
                 '--n-close-size': closeSize,
                 '--n-color': color || (mergedBorderedRef.value ? colorBordered : typedColor),
                 '--n-color-checkable': colorCheckable,

package/lib/tag/src/styles/index.cssr.js

@@ -31,6 +31,7 @@ const cssr_1 = require("../../../_utils/cssr");
 // --n-text-color-pressed-checkable
 // --n-font-weight-strong
 exports.default = (0, cssr_1.cB)('tag', `
+ --n-close-margin: var(--n-close-margin-top) var(--n-close-margin-right) var(--n-close-margin-bottom) var(--n-close-margin-left);
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;

package/lib/tag/src/styles/rtl.cssr.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.cB)('tag', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
- `, [(0, cssr_1.cE)('close', `
- margin: var(--n-close-margin-rtl);
- `), (0, cssr_1.cE)('icon', `
+ --n-close-margin: var(--n-close-margin-top) var(--n-close-margin-left) var(--n-close-margin-bottom) var(--n-close-margin-right);
+ `, [(0, cssr_1.cE)('icon', `
  margin: 0 0 0 4px;
  `), (0, cssr_1.cE)('avatar', `
  margin: 0 0 0 6px;

package/lib/tag/styles/_common.d.ts

@@ -9,6 +9,5 @@ declare const _default: {
     closeSizeLarge: string;
     padding: string;
     closeMargin: string;
-    closeMarginRtl: string;
 };
 export default _default;

package/lib/tag/styles/_common.js

@@ -10,6 +10,5 @@ exports.default = {
     closeSizeMedium: '18px',
     closeSizeLarge: '18px',
     padding: '0 7px',
-    closeMargin: '0 0 0 4px',
-    closeMarginRtl: '0 4px 0 0'
+    closeMargin: '0 0 0 4px'
 };

package/lib/tag/styles/light.d.ts

@@ -87,7 +87,6 @@ declare const self: (vars: ThemeCommonVars) => {
     closeSizeLarge: string;
     padding: string;
     closeMargin: string;
-    closeMarginRtl: string;
 };
 export type TagThemeVars = ReturnType<typeof self>;
 declare const tagLight: Theme<'Tag', TagThemeVars>;

package/lib/theme-editor/src/ThemeEditor.d.ts

@@ -117,8 +117,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     }>;
     theme: import("vue").ComputedRef<GlobalThemeOverrides>;
     showPanel: import("vue").Ref<boolean>;
-    tempOverrides: any;
-    overrides: any;
+    tempOverrides: import("vue").Ref<any>;
+    overrides: import("vue").Ref<any>;
     compNamePattern: import("vue").Ref<string>;
     tempCompNamePattern: import("vue").Ref<string>;
     varNamePattern: import("vue").Ref<string>;

package/lib/theme-editor/src/ThemeEditor.js

@@ -125,12 +125,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleExportClick() {
             const url = URL.createObjectURL(new Blob([JSON.stringify(overridesRef.value, undefined, 2)]));
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'naive-ui-theme-overrides.json';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
+            (0, _utils_1.download)(url, 'naive-ui-theme-overrides.json');
             URL.revokeObjectURL(url);
         }
         (0, vue_1.watch)(overridesRef, (value) => {