naive-ui 2.20.3 → 2.21.3

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

@@ -1,7 +1,5 @@
-declare const _default: import("vue").DefineComponent<{
-    leftPadded: BooleanConstructor;
-    addable: BooleanConstructor;
-} & {
+import type { ExtractPublicPropTypes } from '../../_utils';
+declare const typeProps: {
     readonly label: {
         readonly type: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
@@ -9,22 +7,44 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
         readonly validator: () => boolean;
     };
+    readonly name: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly required: true;
+    };
     readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | (() => import("vue").VNodeChild)>;
+    readonly disabled: BooleanConstructor;
+    readonly closable: {
+        readonly type: import("vue").PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly internalLeftPadded: BooleanConstructor;
+    readonly internalAddable: BooleanConstructor;
+};
+export declare type TabProps = ExtractPublicPropTypes<typeof typeProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly label: {
+        readonly type: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | (() => import("vue").VNodeChild)>;
+        readonly default: undefined;
+        readonly validator: () => boolean;
+    };
     readonly name: {
         readonly type: import("vue").PropType<string | number>;
         readonly required: true;
     };
+    readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | (() => import("vue").VNodeChild)>;
     readonly disabled: BooleanConstructor;
-    readonly displayDirective: {
-        readonly type: import("vue").PropType<"show" | "if" | "show:lazy">;
-        readonly default: "if";
-    };
     readonly closable: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly internalLeftPadded: BooleanConstructor;
+    readonly internalAddable: BooleanConstructor;
 }, {
     mergedClosable: import("vue").ComputedRef<boolean>;
     style: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
@@ -34,20 +54,18 @@ declare const _default: import("vue").DefineComponent<{
     handleClose(e: MouseEvent): void;
     handleClick(): void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    leftPadded?: unknown;
-    addable?: unknown;
     readonly label?: unknown;
-    readonly tab?: unknown;
     readonly name?: unknown;
+    readonly tab?: unknown;
     readonly disabled?: unknown;
-    readonly displayDirective?: unknown;
     readonly closable?: unknown;
+    readonly internalLeftPadded?: unknown;
+    readonly internalAddable?: unknown;
 } & {
     name: string | number;
     disabled: boolean;
-    displayDirective: "show" | "if" | "show:lazy";
-    addable: boolean;
-    leftPadded: boolean;
+    internalLeftPadded: boolean;
+    internalAddable: boolean;
 } & {
     label?: string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
@@ -62,8 +80,7 @@ declare const _default: import("vue").DefineComponent<{
     }> | (() => import("vue").VNodeChild);
     disabled: boolean;
     closable: boolean | undefined;
-    displayDirective: "show" | "if" | "show:lazy";
-    addable: boolean;
-    leftPadded: boolean;
+    internalLeftPadded: boolean;
+    internalAddable: boolean;
 }>;
 export default _default;

package/lib/tabs/src/Tab.js

@@ -6,19 +6,18 @@ const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const interface_1 = require("./interface");
 const TabPane_1 = require("./TabPane");
+const typeProps = Object.assign({ internalLeftPadded: Boolean, internalAddable: Boolean }, (0, _utils_1.omit)(TabPane_1.tabPaneProps, ['displayDirective']));
 exports.default = (0, vue_1.defineComponent)({
+    __TAB__: true,
     name: 'Tab',
-    props: Object.assign({
-        leftPadded: Boolean,
-        addable: Boolean
-    }, TabPane_1.tabPaneProps),
+    props: typeProps,
     setup(props) {
         const { mergedClsPrefixRef, valueRef, typeRef, closableRef, tabStyleRef, tabChangeIdRef, onBeforeLeaveRef, handleAdd, handleTabClick, handleClose
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.tabsInjectionKey);
         return {
             mergedClosable: (0, vue_1.computed)(() => {
-                if (props.addable)
+                if (props.internalAddable)
                     return false;
                 const { closable } = props;
                 if (closable === undefined)
@@ -38,7 +37,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleClick() {
                 if (props.disabled)
                     return;
-                if (props.addable) {
+                if (props.internalAddable) {
                     handleAdd();
                     return;
                 }
@@ -61,18 +60,18 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { addable, clsPrefix, name, disabled, label, tab, value, mergedClosable, style, $slots: { default: defaultSlot } } = this;
+        const { internalAddable, clsPrefix, name, disabled, label, tab, value, mergedClosable, style, $slots: { default: defaultSlot } } = this;
         const mergedTab = label !== null && label !== void 0 ? label : tab;
         return ((0, vue_1.h)("div", { class: `${clsPrefix}-tabs-tab-wrapper` },
-            this.leftPadded ? ((0, vue_1.h)("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
+            this.internalLeftPadded ? ((0, vue_1.h)("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
             (0, vue_1.h)("div", { key: name, "data-name": name, "data-disabled": disabled ? true : undefined, class: [
                     `${clsPrefix}-tabs-tab`,
                     value === name && `${clsPrefix}-tabs-tab--active`,
                     disabled && `${clsPrefix}-tabs-tab--disabled`,
                     mergedClosable && `${clsPrefix}-tabs-tab--closable`,
-                    addable && `${clsPrefix}-tabs-tab--addable`
-                ], onClick: this.handleClick, style: addable ? undefined : style },
-                (0, vue_1.h)("span", { class: `${clsPrefix}-tabs-tab__label` }, addable ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, {
+                    internalAddable && `${clsPrefix}-tabs-tab--addable`
+                ], onClick: this.handleClick, style: internalAddable ? undefined : style },
+                (0, vue_1.h)("span", { class: `${clsPrefix}-tabs-tab__label` }, internalAddable ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, {
                     default: () => (0, vue_1.h)(icons_1.AddIcon, null)
                 })) : defaultSlot ? (defaultSlot()) : typeof mergedTab === 'object' ? (mergedTab // VNode
                 ) : ((0, _utils_1.render)(mergedTab !== null && mergedTab !== void 0 ? mergedTab : name))),

package/lib/tabs/src/Tabs.js

@@ -290,11 +290,17 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
-        const children = defaultSlot
+        const tabPaneChildren = defaultSlot
             ? (0, _utils_1.flatten)(defaultSlot()).filter((v) => {
                 return v.type.__TAB_PANE__ === true;
             })
             : [];
+        const tabChildren = defaultSlot
+            ? (0, _utils_1.flatten)(defaultSlot()).filter((v) => {
+                return v.type.__TAB__ === true;
+            })
+            : [];
+        const showPane = !tabChildren.length;
         const prefix = prefixSlot ? prefixSlot() : null;
         const suffix = suffixSlot ? suffixSlot() : null;
         const isCard = type === 'card';
@@ -315,27 +321,48 @@ exports.default = (0, vue_1.defineComponent)({
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 prefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, prefix)) : null,
-                isSegment ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail` }, children.map((tabPaneVNode, index) => {
-                    return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 }), tabPaneVNode.children
-                        ? {
-                            default: tabPaneVNode.children.tab
+                isSegment ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail` }, showPane
+                    ? tabPaneChildren.map((tabPaneVNode, index) => {
+                        return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 }), tabPaneVNode.children
+                            ? {
+                                default: tabPaneVNode.children.tab
+                            }
+                            : undefined));
+                    })
+                    : tabChildren.map((tabVNode, index) => {
+                        if (index === 0) {
+                            return tabVNode;
+                        }
+                        else {
+                            return createLeftPaddedTabVNode(tabVNode);
                         }
-                        : undefined));
-                }))) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
+                    }))) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
                     default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" },
                         (0, vue_1.h)(vueuc_1.VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
                             default: () => {
                                 const rawWrappedTabs = ((0, vue_1.h)("div", { style: this.tabWrapperStyle, class: `${mergedClsPrefix}-tabs-wrapper` },
                                     mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } })),
-                                    children.map((tabPaneVNode, index) => {
-                                        return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
-                                            ? {
-                                                default: tabPaneVNode.children.tab
+                                    showPane
+                                        ? tabPaneChildren.map((tabPaneVNode, index) => {
+                                            return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
+                                                ? {
+                                                    default: tabPaneVNode.children.tab
+                                                }
+                                                : undefined));
+                                        })
+                                        : tabChildren.map((tabVNode, index) => {
+                                            if (index !== 0 &&
+                                                !mergedJustifyContent) {
+                                                return createLeftPaddedTabVNode(tabVNode);
                                             }
-                                            : undefined));
-                                    }),
+                                            else {
+                                                return tabVNode;
+                                            }
+                                        }),
                                     !addTabFixed && addable && isCard
-                                        ? createAddTag(addable, children.length !== 0)
+                                        ? createAddTag(addable, (showPane
+                                            ? tabPaneChildren.length
+                                            : tabChildren.length) !== 0)
                                         : null,
                                     mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } }))));
                                 let wrappedTabs = rawWrappedTabs;
@@ -355,7 +382,8 @@ exports.default = (0, vue_1.defineComponent)({
                     ? createAddTag(addable, true)
                     : null,
                 suffix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, suffix)) : null),
-            filterMapTabPanes(children, this.mergedValue, this.renderedNames)));
+            showPane &&
+                filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames)));
     }
 });
 function filterMapTabPanes(tabPaneVNodes, value, renderedNames) {
@@ -379,6 +407,18 @@ function filterMapTabPanes(tabPaneVNodes, value, renderedNames) {
     });
     return children;
 }
-function createAddTag(addable, leftPadded) {
-    return ((0, vue_1.h)(Tab_1.default, { ref: "addTabInstRef", key: "__addable", name: "__addable", addable: true, leftPadded: leftPadded, disabled: typeof addable === 'object' && addable.disabled }));
+function createAddTag(addable, internalLeftPadded) {
+    return ((0, vue_1.h)(Tab_1.default, { ref: "addTabInstRef", key: "__addable", name: "__addable", internalAddable: true, internalLeftPadded: internalLeftPadded, disabled: typeof addable === 'object' && addable.disabled }));
+}
+function createLeftPaddedTabVNode(tabVNode) {
+    const modifiedVNode = (0, vue_1.cloneVNode)(tabVNode);
+    if (modifiedVNode.props) {
+        modifiedVNode.props.internalLeftPadded = true;
+    }
+    else {
+        modifiedVNode.props = {
+            internalLeftPadded: true
+        };
+    }
+    return modifiedVNode;
 }

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, InjectionKey, Ref } from 'vue';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 export interface TagPublicMethods {
     setTextContent: (textContent: string) => void;
@@ -226,6 +226,10 @@ declare const tagProps: {
         closeMarginRtl: string;
     }, any>>>;
 };
+interface TagInjection {
+    roundRef: Ref<boolean>;
+}
+export declare const tagInjectionKey: InjectionKey<TagInjection>;
 export declare type TagProps = ExtractPublicPropTypes<typeof tagProps>;
 declare const _default: import("vue").DefineComponent<{
     bordered: {
@@ -447,13 +451,14 @@ declare const _default: import("vue").DefineComponent<{
         closeMarginRtl: string;
     }, any>>>;
 }, {
-    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
+    rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    contentRef: import("vue").Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     handleClick: (e: MouseEvent) => void;
     handleCloseClick: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
+        '--avatar-size-override': string;
         '--bezier': string;
         '--border-radius': string;
         '--border': string;

package/lib/tag/src/Tag.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagInjectionKey = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
@@ -28,6 +29,7 @@ const tagProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useThem
         },
         default: undefined
     } });
+exports.tagInjectionKey = Symbol('tag');
 exports.default = (0, vue_1.defineComponent)({
     name: 'Tag',
     props: tagProps,
@@ -35,6 +37,9 @@ exports.default = (0, vue_1.defineComponent)({
         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);
+        (0, vue_1.provide)(exports.tagInjectionKey, {
+            roundRef: (0, vue_1.toRef)(props, 'round')
+        });
         function handleClick(e) {
             if (!props.disabled) {
                 if (props.checkable) {
@@ -72,6 +77,7 @@ exports.default = (0, vue_1.defineComponent)({
                 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, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(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)('closeColor', type)]: closeColor, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
                 return {
+                    '--avatar-size-override': `calc(${height} - 8px)`,
                     '--bezier': cubicBezierEaseInOut,
                     '--border-radius': borderRadius,
                     '--border': border,
@@ -101,7 +107,7 @@ exports.default = (0, vue_1.defineComponent)({
             }) });
     },
     render() {
-        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {} } = this;
+        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {}, $slots } = this;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-tag`,
                 {
@@ -112,6 +118,9 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${mergedClsPrefix}-tag--round`]: this.round
                 }
             ], style: this.cssVars, onClick: this.handleClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
+            $slots.avatar && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tag__avatar` }, {
+                default: $slots.avatar
+            })),
             (0, vue_1.h)("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, this.$slots),
             !this.checkable && this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-tag__close`, disabled: this.disabled, onClick: this.handleCloseClick })) : null,
             !this.checkable && this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tag__border`, style: { borderColor } })) : null));

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

@@ -49,7 +49,7 @@ exports.default = (0, cssr_1.cB)('tag', `
  color .3s var(--bezier),
  box-shadow .3s var(--bezier),
  opacity .3s var(--bezier);
- line-height: 1.5;
+ line-height: 1;
  height: var(--height);
  font-size: var(--font-size);
 `, [(0, cssr_1.cE)('border', `
@@ -62,6 +62,9 @@ exports.default = (0, cssr_1.cB)('tag', `
  border-radius: inherit;
  border: var(--border);
  transition: border-color .3s var(--bezier);
+ `), (0, cssr_1.cE)('avatar', `
+ display: flex;
+ margin-right: 6px;
  `), (0, cssr_1.cE)('close', `
  font-size: var(--close-size);
  margin: var(--close-margin);
@@ -70,10 +73,12 @@ exports.default = (0, cssr_1.cB)('tag', `
  `), (0, cssr_1.cM)('round', `
  padding: 0 calc(var(--height) / 2);
  border-radius: calc(var(--height) / 2);
- `), (0, cssr_1.cM)('disabled', {
-  cursor: 'not-allowed !important',
-  opacity: 'var(--opacity-disabled)'
-}), (0, cssr_1.cM)('checkable', `
+ `, [(0, cssr_1.cE)('avatar', `
+ margin-left: calc((var(--height) - 8px) / -2);
+ `)]), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed !important;
+ opacity: var(--opacity-disabled);
+ `), (0, cssr_1.cM)('checkable', `
  cursor: pointer;
  box-shadow: none;
  color: var(--text-color-checkable);

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

@@ -10,4 +10,10 @@ exports.default = (0, cssr_1.cB)('tag', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.cE)('close', `
  margin: var(--close-margin-rtl);
- `)])]);
+ `), (0, cssr_1.cE)('avatar', `
+ margin-left: 6px;
+ margin-right: 0;
+ `), (0, cssr_1.cM)('round', [(0, cssr_1.cE)('avatar', {
+  marginLeft: '6px',
+  marginRight: '-5px'
+})])])]);

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

@@ -79,9 +79,13 @@ declare const _default: import("vue").DefineComponent<{}, {
         tableHeaderColor: string;
         hoverColor: string;
         tableColorHover: string;
+        tableColorStriped: string;
         pressedColor: string;
         opacityDisabled: string;
         inputColorDisabled: string;
+        buttonColor2: string;
+        buttonColor2Hover: string;
+        buttonColor2Pressed: string;
         boxShadow1: string;
         boxShadow2: string;
         boxShadow3: string;

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

@@ -20,6 +20,14 @@ const ColorWandIcon = ((0, vue_1.h)("svg", { viewBox: "0 0 16 16", fill: "none",
     (0, vue_1.h)("path", { d: "M3.5 3C3.77615 3 4 3.22386 4 3.5V4H4.5C4.77615 4 5 4.22386 5 4.5C5 4.77614 4.77615 5 4.5 5H4V5.5C4 5.77614 3.77615 6 3.5 6C3.22386 6 3 5.77614 3 5.5V5H2.5C2.22386 5 2 4.77614 2 4.5C2 4.22386 2.22386 4 2.5 4H3V3.5C3 3.22386 3.22386 3 3.5 3Z", fill: "currentColor" }),
     (0, vue_1.h)("path", { d: "M12.5 12C12.7761 12 13 11.7761 13 11.5C13 11.2239 12.7761 11 12.5 11H12V10.5C12 10.2239 11.7761 10 11.5 10C11.2239 10 11 10.2239 11 10.5V11H10.5C10.2239 11 10 11.2239 10 11.5C10 11.7761 10.2239 12 10.5 12H11V12.5C11 12.7761 11.2239 13 11.5 13C11.7761 13 12 12.7761 12 12.5V12H12.5Z", fill: "currentColor" }),
     (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'))
+        return false;
+    if (key.includes('color') || key.includes('Color'))
+        return true;
+    return false;
+};
 exports.default = (0, vue_1.defineComponent)({
     name: 'ThemeEditor',
     inheritAttrs: false,
@@ -257,8 +265,7 @@ exports.default = (0, vue_1.defineComponent)({
                                                         var _a, _b, _c, _d;
                                                         return [
                                                             (0, vue_1.h)("div", { key: `${varKey}Label` }, varKey),
-                                                            varKey.includes('color') ||
-                                                                varKey.includes('Color') ? ((0, vue_1.h)(color_picker_1.NColorPicker, { key: varKey, modes: [
+                                                            showColorPicker(varKey) ? ((0, vue_1.h)(color_picker_1.NColorPicker, { key: varKey, modes: [
                                                                     'rgb',
                                                                     'hex'
                                                                 ], value: ((_b = (_a = this

package/lib/time-picker/src/Panel.d.ts

@@ -146,9 +146,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -212,20 +216,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -372,9 +386,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;