naive-ui 2.24.4 → 2.25.0

package/lib/space/src/Space.js

@@ -20,7 +20,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: spaceProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Space', 'Space', undefined, styles_1.spaceLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Space', '-space', undefined, styles_1.spaceLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             margin: (0, vue_1.computed)(() => {

package/lib/spin/src/Spin.js

@@ -44,7 +44,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Spin', 'Spin', index_cssr_1.default, styles_1.spinLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Spin', '-spin', index_cssr_1.default, styles_1.spinLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compitableShow: (0, vooks_1.useCompitable)(props, ['spinning', 'show']),

package/lib/statistic/src/Statistic.js

@@ -13,7 +13,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: statisticProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Statistic', 'Statistic', index_cssr_1.default, styles_1.statisticLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Statistic', '-statistic', index_cssr_1.default, styles_1.statisticLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: (0, vue_1.computed)(() => {

package/lib/steps/src/Steps.js

@@ -34,7 +34,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: stepsProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Steps', 'Steps', index_cssr_1.default, styles_1.stepsLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Steps', '-steps', index_cssr_1.default, styles_1.stepsLight, props, mergedClsPrefixRef);
         (0, vue_1.provide)(exports.stepsInjectionKey, {
             props,
             mergedThemeRef: themeRef,

package/lib/switch/src/Switch.js

@@ -47,7 +47,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Switch', 'Switch', index_cssr_1.default, styles_1.switchLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Switch', '-switch', index_cssr_1.default, styles_1.switchLight, props, mergedClsPrefixRef);
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);

package/lib/table/src/Table.js

@@ -26,7 +26,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: tableProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Table', 'Table', index_cssr_1.default, styles_1.tableLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Table', '-table', index_cssr_1.default, styles_1.tableLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: (0, vue_1.computed)(() => {

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

@@ -11,12 +11,13 @@ declare const tabsProps: {
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"space-around" | "space-between" | "space-evenly">;
+    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
+    readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
@@ -228,12 +229,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"space-around" | "space-between" | "space-evenly">;
+    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
+    readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
@@ -485,7 +487,7 @@ declare const _default: import("vue").DefineComponent<{
     addTabFixed: import("vue").Ref<boolean>;
     tabWrapperStyle: import("vue").ComputedRef<{
         display: string;
-        justifyContent: "space-around" | "space-between" | "space-evenly";
+        justifyContent: "start" | "end" | "space-around" | "space-between" | "space-evenly" | "center";
     } | undefined>;
     handleNavResize: import("lodash").DebouncedFunc<() => void>;
     mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
@@ -523,12 +525,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bar";
     };
     readonly closable: BooleanConstructor;
-    readonly justifyContent: PropType<"space-around" | "space-between" | "space-evenly">;
+    readonly justifyContent: PropType<"start" | "end" | "space-around" | "space-between" | "space-evenly" | "center">;
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
         readonly default: "medium";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
+    readonly barWidth: NumberConstructor;
     readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;

package/lib/tabs/src/Tabs.js

@@ -19,7 +19,7 @@ const tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { v
     }, closable: Boolean, justifyContent: String, size: {
         type: String,
         default: 'medium'
-    }, tabStyle: [String, Object], paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
+    }, tabStyle: [String, Object], barWidth: Number, paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
         type: Number,
         default: 0
     }, onBeforeLeave: Function, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
@@ -44,7 +44,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Tabs', 'Tabs', index_cssr_1.default, styles_1.tabsLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Tabs', '-tabs', index_cssr_1.default, styles_1.tabsLight, props, mergedClsPrefixRef);
         const tabsElRef = (0, vue_1.ref)(null);
         const barElRef = (0, vue_1.ref)(null);
         const scrollWrapperElRef = (0, vue_1.ref)(null);
@@ -87,15 +87,23 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             if (tabEl) {
                 const disabledClassName = `${mergedClsPrefixRef.value}-tabs-bar--disabled`;
+                const { barWidth } = props;
                 if (tabEl.dataset.disabled === 'true') {
                     barEl.classList.add(disabledClassName);
                 }
                 else {
                     barEl.classList.remove(disabledClassName);
                 }
-                barEl.style.left = `${tabEl.offsetLeft}px`;
+                if (barWidth && tabEl.offsetWidth >= barWidth) {
+                    const offsetDiffLeft = Math.floor((tabEl.offsetWidth - barWidth) / 2) + tabEl.offsetLeft;
+                    barEl.style.left = `${offsetDiffLeft}px`;
+                    barEl.style.maxWidth = `${barWidth}px`;
+                }
+                else {
+                    barEl.style.left = `${tabEl.offsetLeft}px`;
+                    barEl.style.maxWidth = `${tabEl.offsetWidth}px`;
+                }
                 barEl.style.width = '8192px';
-                barEl.style.maxWidth = `${tabEl.offsetWidth + 1}px`;
             }
         }
         function updateCurrentBarStyle() {

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

@@ -26,7 +26,7 @@ declare const tagProps: {
     };
     color: PropType<import("./common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -251,7 +251,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: PropType<import("./common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -507,7 +507,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     color: PropType<import("./common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -707,7 +707,7 @@ declare const _default: import("vue").DefineComponent<{
         closeMarginRtl: string;
     }, any>>>;
 }>>, {
-    type: "default" | "error" | "info" | "success" | "warning" | "primary";
+    type: "default" | "success" | "error" | "warning" | "info" | "primary";
     round: boolean;
     size: "small" | "medium" | "large";
     disabled: boolean | undefined;

package/lib/tag/src/Tag.js

@@ -36,7 +36,7 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         const contentRef = (0, vue_1.ref)(null);
         const { mergedBorderedRef, mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Tag', 'Tag', index_cssr_1.default, styles_1.tagLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Tag', '-tag', index_cssr_1.default, styles_1.tagLight, props, mergedClsPrefixRef);
         (0, vue_1.provide)(exports.tagInjectionKey, {
             roundRef: (0, vue_1.toRef)(props, 'round')
         });

package/lib/tag/src/common-props.d.ts

@@ -7,7 +7,7 @@ export interface TagColor {
 declare const _default: {
     readonly color: PropType<TagColor>;
     readonly type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     readonly round: BooleanConstructor;

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

@@ -49,7 +49,7 @@ exports.default = (0, cssr_1.cB)('tag', `
  color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier),
  opacity .3s var(--n-bezier);
- line-height: 1.2;
+ line-height: 1;
  height: var(--n-height);
  font-size: var(--n-font-size);
 `, [(0, cssr_1.cE)('border', `
@@ -83,19 +83,7 @@ exports.default = (0, cssr_1.cB)('tag', `
  box-shadow: none;
  color: var(--n-text-color-checkable);
  background-color: var(--n-color-checkable);
- `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--n-color-hover-checkable)'
-}, [(0, cssr_1.cNotM)('checked', {
-  color: 'var(--n-text-color-hover-checkable)'
-})]), (0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--n-color-pressed-checkable)'
-}, [(0, cssr_1.cNotM)('checked', {
-  color: 'var(--n-text-color-pressed-checkable)'
-})])]), (0, cssr_1.cM)('checked', {
-  color: 'var(--n-text-color-checked)',
-  backgroundColor: 'var(--n-color-checked)'
-}, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--n-color-checked-hover)'
-}), (0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--n-color-checked-pressed)'
-})])])])]);
+ `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', 'background-color: var(--n-color-hover-checkable);', [(0, cssr_1.cNotM)('checked', 'color: var(--n-text-color-hover-checkable);')]), (0, cssr_1.c)('&:active', 'background-color: var(--n-color-pressed-checkable);', [(0, cssr_1.cNotM)('checked', 'color: var(--n-text-color-pressed-checkable);')])]), (0, cssr_1.cM)('checked', `
+ color: var(--n-text-color-checked);
+ background-color: 'var(--n-color-checked);
+ `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', 'background-color: var(--n-color-checked-hover);'), (0, cssr_1.c)('&:active', 'background-color: var(--n-color-checked-pressed);')])])])]);

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

@@ -22,7 +22,7 @@ const ColorWandIcon = ((0, vue_1.h)("svg", { viewBox: "0 0 16 16", fill: "none",
     (0, vue_1.h)("path", { d: "M8.72956 4.56346C9.4771 3.81592 10.6891 3.81592 11.4367 4.56347C12.1842 5.31102 12.1842 6.52303 11.4367 7.27058L4.26679 14.4404C3.51924 15.1879 2.30723 15.1879 1.55968 14.4404C0.812134 13.6928 0.812138 12.4808 1.55969 11.7333L8.72956 4.56346ZM8.25002 6.4572L2.26679 12.4404C1.90977 12.7974 1.90977 13.3763 2.26679 13.7333C2.62381 14.0903 3.20266 14.0903 3.55968 13.7333L9.54292 7.75009L8.25002 6.4572ZM10.25 7.04299L10.7295 6.56347C11.0866 6.20645 11.0866 5.6276 10.7296 5.27057C10.3725 4.91355 9.79368 4.91355 9.43666 5.27057L8.95713 5.7501L10.25 7.04299Z", fill: "currentColor" })));
 // button colorOpacitySecondary var is not color
 const showColorPicker = (key) => {
-    if (key.includes('opacity'))
+    if (key.includes('pacity'))
         return false;
     if (key.includes('color') || key.includes('Color'))
         return true;

package/lib/themes/dark.js

@@ -34,49 +34,51 @@ const styles_29 = require("../empty/styles");
 const styles_30 = require("../form/styles");
 const styles_31 = require("../gradient-text/styles");
 const styles_32 = require("../icon/styles");
-const styles_33 = require("../image/styles");
-const styles_34 = require("../input/styles");
-const styles_35 = require("../input-number/styles");
-const styles_36 = require("../layout/styles");
-const styles_37 = require("../list/styles");
-const styles_38 = require("../loading-bar/styles");
-const styles_39 = require("../log/styles");
-const styles_40 = require("../menu/styles");
-const styles_41 = require("../mention/styles");
-const styles_42 = require("../message/styles");
-const styles_43 = require("../modal/styles");
-const styles_44 = require("../notification/styles");
-const styles_45 = require("../page-header/styles");
-const styles_46 = require("../pagination/styles");
-const styles_47 = require("../popconfirm/styles");
-const styles_48 = require("../popover/styles");
-const styles_49 = require("../popselect/styles");
-const styles_50 = require("../progress/styles");
-const styles_51 = require("../radio/styles");
-const styles_52 = require("../rate/styles");
-const styles_53 = require("../result/styles");
-const styles_54 = require("../_internal/scrollbar/styles");
-const styles_55 = require("../select/styles");
-const styles_56 = require("../skeleton/styles");
-const styles_57 = require("../slider/styles");
-const styles_58 = require("../space/styles");
-const styles_59 = require("../spin/styles");
-const styles_60 = require("../statistic/styles");
-const styles_61 = require("../steps/styles");
-const styles_62 = require("../switch/styles");
-const styles_63 = require("../table/styles");
-const styles_64 = require("../tabs/styles");
-const styles_65 = require("../tag/styles");
-const styles_66 = require("../thing/styles");
-const styles_67 = require("../time-picker/styles");
-const styles_68 = require("../timeline/styles");
-const styles_69 = require("../tooltip/styles");
-const styles_70 = require("../transfer/styles");
-const styles_71 = require("../tree-select/styles");
-const styles_72 = require("../typography/styles");
-const styles_73 = require("../tree/styles");
-const styles_74 = require("../upload/styles");
+const styles_33 = require("../icon-wrapper/styles");
+const styles_34 = require("../image/styles");
+const styles_35 = require("../input/styles");
+const styles_36 = require("../input-number/styles");
+const styles_37 = require("../layout/styles");
+const styles_38 = require("../list/styles");
+const styles_39 = require("../loading-bar/styles");
+const styles_40 = require("../log/styles");
+const styles_41 = require("../menu/styles");
+const styles_42 = require("../mention/styles");
+const styles_43 = require("../message/styles");
+const styles_44 = require("../modal/styles");
+const styles_45 = require("../notification/styles");
+const styles_46 = require("../page-header/styles");
+const styles_47 = require("../pagination/styles");
+const styles_48 = require("../popconfirm/styles");
+const styles_49 = require("../popover/styles");
+const styles_50 = require("../popselect/styles");
+const styles_51 = require("../progress/styles");
+const styles_52 = require("../radio/styles");
+const styles_53 = require("../rate/styles");
+const styles_54 = require("../result/styles");
+const styles_55 = require("../_internal/scrollbar/styles");
+const styles_56 = require("../select/styles");
+const styles_57 = require("../skeleton/styles");
+const styles_58 = require("../slider/styles");
+const styles_59 = require("../space/styles");
+const styles_60 = require("../spin/styles");
+const styles_61 = require("../statistic/styles");
+const styles_62 = require("../steps/styles");
+const styles_63 = require("../switch/styles");
+const styles_64 = require("../table/styles");
+const styles_65 = require("../tabs/styles");
+const styles_66 = require("../tag/styles");
+const styles_67 = require("../thing/styles");
+const styles_68 = require("../time-picker/styles");
+const styles_69 = require("../timeline/styles");
+const styles_70 = require("../tooltip/styles");
+const styles_71 = require("../transfer/styles");
+const styles_72 = require("../tree-select/styles");
+const styles_73 = require("../typography/styles");
+const styles_74 = require("../tree/styles");
+const styles_75 = require("../upload/styles");
 exports.darkTheme = {
+    name: 'dark',
     common: common_1.commonDark,
     Alert: styles_1.alertDark,
     Anchor: styles_2.anchorDark,
@@ -110,46 +112,47 @@ exports.darkTheme = {
     Form: styles_30.formDark,
     GradientText: styles_31.gradientTextDark,
     Icon: styles_32.iconDark,
-    Image: styles_33.imageDark,
-    Input: styles_34.inputDark,
-    InputNumber: styles_35.inputNumberDark,
-    Layout: styles_36.layoutDark,
-    List: styles_37.listDark,
-    LoadingBar: styles_38.loadingBarDark,
-    Log: styles_39.logDark,
-    Menu: styles_40.menuDark,
-    Mention: styles_41.mentionDark,
-    Message: styles_42.messageDark,
-    Modal: styles_43.modalDark,
-    Notification: styles_44.notificationDark,
-    PageHeader: styles_45.pageHeaderDark,
-    Pagination: styles_46.paginationDark,
-    Popconfirm: styles_47.popconfirmDark,
-    Popover: styles_48.popoverDark,
-    Popselect: styles_49.popselectDark,
-    Progress: styles_50.progressDark,
-    Radio: styles_51.radioDark,
-    Rate: styles_52.rateDark,
-    Result: styles_53.resultDark,
-    Scrollbar: styles_54.scrollbarDark,
-    Select: styles_55.selectDark,
-    Skeleton: styles_56.skeletonDark,
-    Slider: styles_57.sliderDark,
-    Space: styles_58.spaceDark,
-    Spin: styles_59.spinDark,
-    Statistic: styles_60.statisticDark,
-    Steps: styles_61.stepsDark,
-    Switch: styles_62.switchDark,
-    Table: styles_63.tableDark,
-    Tabs: styles_64.tabsDark,
-    Tag: styles_65.tagDark,
-    Thing: styles_66.thingDark,
-    TimePicker: styles_67.timePickerDark,
-    Timeline: styles_68.timelineDark,
-    Tooltip: styles_69.tooltipDark,
-    Transfer: styles_70.transferDark,
-    Tree: styles_73.treeDark,
-    TreeSelect: styles_71.treeSelectDark,
-    Typography: styles_72.typographyDark,
-    Upload: styles_74.uploadDark
+    IconWrapper: styles_33.iconWrapperDark,
+    Image: styles_34.imageDark,
+    Input: styles_35.inputDark,
+    InputNumber: styles_36.inputNumberDark,
+    Layout: styles_37.layoutDark,
+    List: styles_38.listDark,
+    LoadingBar: styles_39.loadingBarDark,
+    Log: styles_40.logDark,
+    Menu: styles_41.menuDark,
+    Mention: styles_42.mentionDark,
+    Message: styles_43.messageDark,
+    Modal: styles_44.modalDark,
+    Notification: styles_45.notificationDark,
+    PageHeader: styles_46.pageHeaderDark,
+    Pagination: styles_47.paginationDark,
+    Popconfirm: styles_48.popconfirmDark,
+    Popover: styles_49.popoverDark,
+    Popselect: styles_50.popselectDark,
+    Progress: styles_51.progressDark,
+    Radio: styles_52.radioDark,
+    Rate: styles_53.rateDark,
+    Result: styles_54.resultDark,
+    Scrollbar: styles_55.scrollbarDark,
+    Select: styles_56.selectDark,
+    Skeleton: styles_57.skeletonDark,
+    Slider: styles_58.sliderDark,
+    Space: styles_59.spaceDark,
+    Spin: styles_60.spinDark,
+    Statistic: styles_61.statisticDark,
+    Steps: styles_62.stepsDark,
+    Switch: styles_63.switchDark,
+    Table: styles_64.tableDark,
+    Tabs: styles_65.tabsDark,
+    Tag: styles_66.tagDark,
+    Thing: styles_67.thingDark,
+    TimePicker: styles_68.timePickerDark,
+    Timeline: styles_69.timelineDark,
+    Tooltip: styles_70.tooltipDark,
+    Transfer: styles_71.transferDark,
+    Tree: styles_74.treeDark,
+    TreeSelect: styles_72.treeSelectDark,
+    Typography: styles_73.typographyDark,
+    Upload: styles_75.uploadDark
 };