naive-ui 2.21.5 → 2.23.2

package/es/cascader/src/Cascader.js

@@ -57,7 +57,7 @@ const cascaderProps = Object.assign(Object.assign({}, useTheme.props), { to: use
     }, childrenField: {
         type: String,
         default: 'children'
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onBlur: Function, onFocus: Function, 
+    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onBlur: Function, onFocus: Function, 
     // deprecated
     onChange: [Function, Array] });
 // TODO refactor cascader menu keyboard scroll (use virtual list)
@@ -161,6 +161,16 @@ export default defineComponent({
                 }
             });
         }
+        function doUpdateShow(value) {
+            const { onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
+            if (onUpdateShow) {
+                call(onUpdateShow, value);
+            }
+            if (_onUpdateShow) {
+                call(_onUpdateShow, value);
+            }
+            uncontrolledShowRef.value = value;
+        }
         function doUpdateValue(value, option, optionPath) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -334,7 +344,7 @@ export default defineComponent({
         function openMenu() {
             if (!mergedDisabledRef.value) {
                 patternRef.value = '';
-                uncontrolledShowRef.value = true;
+                doUpdateShow(true);
                 if (props.filterable) {
                     focusSelectionInput();
                 }
@@ -344,7 +354,7 @@ export default defineComponent({
             if (returnFocus) {
                 focusSelection();
             }
-            uncontrolledShowRef.value = false;
+            doUpdateShow(false);
             patternRef.value = '';
         }
         function handleCascaderMenuClickOutside(e) {
@@ -695,29 +705,29 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { optionArrowColor, optionTextColor, optionTextColorActive, optionTextColorDisabled, optionCheckMarkColor, menuColor, menuBoxShadow, menuDividerColor, menuBorderRadius, menuHeight, optionColorHover, optionHeight, optionFontSize, loadingColor, columnWidth }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--menu-border-radius': menuBorderRadius,
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--menu-height': menuHeight,
-                    '--column-width': columnWidth,
-                    '--menu-color': menuColor,
-                    '--menu-divider-color': menuDividerColor,
-                    '--option-height': optionHeight,
-                    '--option-font-size': optionFontSize,
-                    '--option-text-color': optionTextColor,
-                    '--option-text-color-disabled': optionTextColorDisabled,
-                    '--option-text-color-active': optionTextColorActive,
-                    '--option-color-hover': optionColorHover,
-                    '--option-check-mark-color': optionCheckMarkColor,
-                    '--option-arrow-color': optionArrowColor,
-                    '--menu-mask-color': changeColor(menuColor, { alpha: 0.75 }),
-                    '--loading-color': loadingColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-menu-border-radius': menuBorderRadius,
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-menu-height': menuHeight,
+                    '--n-column-width': columnWidth,
+                    '--n-menu-color': menuColor,
+                    '--n-menu-divider-color': menuDividerColor,
+                    '--n-option-height': optionHeight,
+                    '--n-option-font-size': optionFontSize,
+                    '--n-option-text-color': optionTextColor,
+                    '--n-option-text-color-disabled': optionTextColorDisabled,
+                    '--n-option-text-color-active': optionTextColorActive,
+                    '--n-option-color-hover': optionColorHover,
+                    '--n-option-check-mark-color': optionCheckMarkColor,
+                    '--n-option-arrow-color': optionArrowColor,
+                    '--n-menu-mask-color': changeColor(menuColor, { alpha: 0.75 }),
+                    '--n-loading-color': loadingColor
                 };
             })
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, $slots } = this;
         return (h("div", { class: `${mergedClsPrefix}-cascader` },
             h(VBinder, null, {
                 default: () => [
@@ -725,9 +735,7 @@ export default defineComponent({
                         default: () => (h(NInternalSelection, { ref: "triggerInstRef", clsPrefix: mergedClsPrefix, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, focused: this.focused, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onClick: this.handleTriggerClick, onClear: this.handleClear, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }))
                     }),
                     h(VFollower, { key: "cascaderMenu", ref: "cascaderMenuFollowerRef", show: this.mergedShow && !this.showSelectMenu, containerClass: this.namespace, placement: "bottom-start", width: !this.options.length ? 'target' : undefined, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
-                        default: () => (h(CascaderMenu, { ref: "cascaderMenuInstRef", value: this.mergedValue, show: this.mergedShow && !this.showSelectMenu, menuModel: this.menuModel, style: this.cssVars, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyUp, onMousedown: this.handleMenuMousedown, onTabout: this.handleMenuTabout }, this.$slots.action && {
-                            action: this.$slots.action
-                        }))
+                        default: () => (h(CascaderMenu, { ref: "cascaderMenuInstRef", value: this.mergedValue, show: this.mergedShow && !this.showSelectMenu, menuModel: this.menuModel, style: this.cssVars, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyUp, onMousedown: this.handleMenuMousedown, onTabout: this.handleMenuTabout }, $slots))
                     }),
                     h(VFollower, { key: "selectMenu", ref: "selectMenuFollowerRef", show: this.mergedShow && this.showSelectMenu, containerClass: this.namespace, width: "target", placement: "bottom-start", to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
                         default: () => (h(CascaderSelectMenu, { ref: "selectMenuInstRef", value: this.mergedValue, show: this.mergedShow && this.showSelectMenu, pattern: this.pattern, multiple: this.multiple, tmNodes: this.treeMate.treeNodes, filter: this.filter, labelField: this.labelField, separator: this.separator, style: this.cssVars }))

package/es/cascader/src/CascaderMenu.d.ts

@@ -43,6 +43,351 @@ declare const _default: import("vue").DefineComponent<{
     maskInstRef: import("vue").Ref<{
         showOnce: (message: string, duration?: number | undefined) => void;
     } | null>;
+    mergedTheme: import("vue").Ref<{
+        common: {
+            baseColor: string;
+            primaryColor: string;
+            primaryColorHover: string;
+            primaryColorPressed: string;
+            primaryColorSuppl: string;
+            infoColor: string;
+            infoColorHover: string;
+            infoColorPressed: string;
+            infoColorSuppl: string;
+            successColor: string;
+            successColorHover: string;
+            successColorPressed: string;
+            successColorSuppl: string;
+            warningColor: string;
+            warningColorHover: string;
+            warningColorPressed: string;
+            warningColorSuppl: string;
+            errorColor: string;
+            errorColorHover: string;
+            errorColorPressed: string;
+            errorColorSuppl: string;
+            textColorBase: string;
+            textColor1: string;
+            textColor2: string;
+            textColor3: string;
+            textColorDisabled: string;
+            placeholderColor: string;
+            placeholderColorDisabled: string;
+            iconColor: string;
+            iconColorHover: string;
+            iconColorPressed: string;
+            iconColorDisabled: string;
+            opacity1: string;
+            opacity2: string;
+            opacity3: string;
+            opacity4: string;
+            opacity5: string;
+            dividerColor: string;
+            borderColor: string;
+            closeColor: string;
+            closeColorHover: string;
+            closeColorPressed: string;
+            closeColorDisabled: string;
+            clearColor: string;
+            clearColorHover: string;
+            clearColorPressed: string;
+            scrollbarColor: string;
+            scrollbarColorHover: string;
+            scrollbarWidth: string;
+            scrollbarHeight: string;
+            scrollbarBorderRadius: string;
+            progressRailColor: string;
+            railColor: string;
+            popoverColor: string;
+            tableColor: string;
+            cardColor: string;
+            modalColor: string;
+            bodyColor: string;
+            tagColor: string;
+            avatarColor: string;
+            invertedColor: string;
+            inputColor: string;
+            codeColor: string;
+            tabColor: string;
+            actionColor: string;
+            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;
+            fontFamily: string;
+            fontFamilyMono: string;
+            fontWeight: string;
+            fontWeightStrong: string;
+            cubicBezierEaseInOut: string;
+            cubicBezierEaseOut: string;
+            cubicBezierEaseIn: string;
+            borderRadius: string;
+            borderRadiusSmall: string;
+            fontSize: string;
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            lineHeight: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
+            heightHuge: string;
+            transformDebounceScale: string;
+            name: "common";
+        };
+        self: {
+            menuBorderRadius: string;
+            menuColor: string;
+            menuBoxShadow: string;
+            menuDividerColor: string;
+            menuHeight: string;
+            optionArrowColor: string;
+            optionHeight: string;
+            optionFontSize: string;
+            optionColorHover: string;
+            optionTextColor: string;
+            optionTextColorActive: string;
+            optionTextColorDisabled: string;
+            optionCheckMarkColor: string;
+            loadingColor: string;
+            columnWidth: string;
+        };
+        peers: {
+            InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+                optionFontSizeSmall: string;
+                optionFontSizeMedium: string;
+                optionFontSizeLarge: string;
+                optionFontSizeHuge: string;
+                optionHeightSmall: string;
+                optionHeightMedium: string;
+                optionHeightLarge: string;
+                optionHeightHuge: string;
+                borderRadius: string;
+                color: string;
+                groupHeaderTextColor: string;
+                actionDividerColor: string;
+                optionTextColor: string;
+                optionTextColorPressed: string;
+                optionTextColorDisabled: string;
+                optionTextColorActive: string;
+                optionOpacityDisabled: string;
+                optionCheckColor: string;
+                optionColorPending: string;
+                optionColorActive: string;
+                actionTextColor: string;
+                loadingColor: string;
+                height: string;
+                paddingSmall: string;
+                paddingMedium: string;
+                paddingLarge: string;
+                paddingHuge: string;
+                optionPaddingSmall: string;
+                optionPaddingMedium: string;
+                optionPaddingLarge: string;
+                optionPaddingHuge: string;
+                loadingSize: string;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    color: string;
+                    colorHover: string;
+                }, any>;
+                Empty: import("../../_mixins").Theme<"Empty", {
+                    fontSizeSmall: string;
+                    fontSizeMedium: string;
+                    fontSizeLarge: string;
+                    fontSizeHuge: string;
+                    textColor: string;
+                    iconColor: string;
+                    extraTextColor: string;
+                    iconSizeSmall: string;
+                    iconSizeMedium: string;
+                    iconSizeLarge: string;
+                    iconSizeHuge: string;
+                }, any>;
+            }>;
+            InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+                fontSizeTiny: string;
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                heightTiny: string;
+                heightSmall: string;
+                heightMedium: string;
+                heightLarge: string;
+                borderRadius: string;
+                textColor: string;
+                textColorDisabled: string;
+                placeholderColor: string;
+                placeholderColorDisabled: string;
+                color: string;
+                colorDisabled: string;
+                colorActive: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                borderFocus: string;
+                boxShadowHover: null;
+                boxShadowActive: string;
+                boxShadowFocus: string;
+                caretColor: string;
+                arrowColor: string;
+                arrowColorDisabled: string;
+                loadingColor: string;
+                borderWarning: string;
+                borderHoverWarning: string;
+                borderActiveWarning: string;
+                borderFocusWarning: string;
+                boxShadowHoverWarning: null;
+                boxShadowActiveWarning: string;
+                boxShadowFocusWarning: string;
+                colorActiveWarning: string;
+                caretColorWarning: string;
+                borderError: string;
+                borderHoverError: string;
+                borderActiveError: string;
+                borderFocusError: string;
+                boxShadowHoverError: null;
+                boxShadowActiveError: string;
+                boxShadowFocusError: string;
+                colorActiveError: string;
+                caretColorError: string;
+                clearColor: string;
+                clearColorHover: string;
+                clearColorPressed: string;
+                paddingSingle: string;
+                clearSize: string;
+                arrowSize: string;
+            }, {
+                Popover: import("../../_mixins").Theme<"Popover", {
+                    fontSize: string;
+                    borderRadius: string;
+                    color: string;
+                    dividerColor: string;
+                    textColor: string;
+                    boxShadow: string;
+                    space: string;
+                    spaceArrow: string;
+                    arrowOffset: string;
+                    arrowOffsetVertical: string;
+                    arrowHeight: string;
+                    padding: string;
+                }, any>;
+            }>;
+            Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                color: string;
+                colorHover: string;
+            }, any>;
+            Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                borderRadius: string;
+                color: string;
+                colorChecked: string;
+                colorDisabled: string;
+                colorDisabledChecked: string;
+                colorTableHeader: string;
+                colorTableHeaderModal: string;
+                colorTableHeaderPopover: string;
+                checkMarkColor: string;
+                checkMarkColorDisabled: string;
+                checkMarkColorDisabledChecked: string;
+                border: string;
+                borderDisabled: string;
+                borderDisabledChecked: string;
+                borderChecked: string;
+                borderFocus: string;
+                boxShadowFocus: string;
+                textColor: string;
+                textColorDisabled: string;
+                sizeSmall: string;
+                sizeMedium: string;
+                sizeLarge: string;
+                labelPadding: string;
+            }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
+        };
+        peerOverrides: {
+            InternalSelectMenu?: {
+                peers?: {
+                    Scrollbar?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Scrollbar", {
+                        color: string;
+                        colorHover: string;
+                    }, any>> | undefined;
+                    Empty?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
+                        fontSizeSmall: string;
+                        fontSizeMedium: string;
+                        fontSizeLarge: string;
+                        fontSizeHuge: string;
+                        textColor: string;
+                        iconColor: string;
+                        extraTextColor: string;
+                        iconSizeSmall: string;
+                        iconSizeMedium: string;
+                        iconSizeLarge: string;
+                        iconSizeHuge: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
+            InternalSelection?: {
+                peers?: {
+                    Popover?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
+                        fontSize: string;
+                        borderRadius: string;
+                        color: string;
+                        dividerColor: string;
+                        textColor: string;
+                        boxShadow: string;
+                        space: string;
+                        spaceArrow: string;
+                        arrowOffset: string;
+                        arrowOffsetVertical: string;
+                        arrowHeight: string;
+                        padding: string;
+                    }, any>> | undefined;
+                } | undefined;
+            } | undefined;
+            Scrollbar?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            Checkbox?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
+        };
+    }>;
     handleFocusin: (e: FocusEvent) => void;
     handleFocusout: (e: FocusEvent) => void;
     handleClickOutside: (e: MouseEvent) => void;

package/es/cascader/src/CascaderMenu.js

@@ -41,7 +41,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { localeRef, isMountedRef, mergedClsPrefixRef, syncCascaderMenuPosition, handleCascaderMenuClickOutside
+        const { localeRef, isMountedRef, mergedClsPrefixRef, syncCascaderMenuPosition, handleCascaderMenuClickOutside, mergedThemeRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(cascaderInjectionKey);
         const submenuInstRefs = [];
@@ -92,19 +92,18 @@ export default defineComponent({
         };
         return Object.assign({ isMounted: isMountedRef, mergedClsPrefix: mergedClsPrefixRef, selfElRef,
             submenuInstRefs,
-            maskInstRef,
-            handleFocusin,
+            maskInstRef, mergedTheme: mergedThemeRef, handleFocusin,
             handleFocusout,
             handleClickOutside }, exposedRef);
     },
     render() {
-        const { submenuInstRefs, mergedClsPrefix, $slots } = this;
+        const { submenuInstRefs, mergedClsPrefix, $slots, mergedTheme } = this;
         return (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
             default: () => {
                 if (!this.show)
                     return null;
                 return withDirectives(h("div", { tabindex: "0", ref: "selfElRef", class: `${mergedClsPrefix}-cascader-menu`, onMousedown: this.onMousedown, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.onKeyup, style: {
-                        '--col-count': this.menuModel.length
+                        '--n-col-count': this.menuModel.length
                     } },
                     this.menuModel[0].length ? (h("div", { class: `${mergedClsPrefix}-cascader-submenu-wrapper` },
                         this.menuModel.map((submenuOptions, index) => (h(NCascaderSubmenu, { ref: ((instance) => {
@@ -112,7 +111,9 @@ export default defineComponent({
                                     submenuInstRefs[index] = instance;
                                 }
                             }), key: index, tmNodes: submenuOptions, depth: index + 1 }))),
-                        h(NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : (h("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, renderSlot($slots, 'empty', undefined, () => [h(NEmpty, null)]))),
+                        h(NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : (h("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, renderSlot($slots, 'empty', undefined, () => [
+                        h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+                    ]))),
                     $slots.action && (h("div", { class: `${mergedClsPrefix}-cascader-menu-action`, "data-action": true }, {
                         default: $slots.action
                     })),

package/es/cascader/src/CascaderOption.d.ts

@@ -293,6 +293,19 @@ declare const _default: import("vue").DefineComponent<{
                 sizeLarge: string;
                 labelPadding: string;
             }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
         };
         peerOverrides: {
             InternalSelectMenu?: {
@@ -344,6 +357,11 @@ declare const _default: import("vue").DefineComponent<{
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
         };
     }>;
     handleClick: (e: MouseEvent) => void;

package/es/cascader/src/CascaderSelectMenu.d.ts

@@ -305,6 +305,19 @@ declare const _default: import("vue").DefineComponent<{
                 sizeLarge: string;
                 labelPadding: string;
             }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
         };
         peerOverrides: {
             InternalSelectMenu?: {
@@ -356,6 +369,11 @@ declare const _default: import("vue").DefineComponent<{
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
         };
     }>;
     mergedClsPrefix: import("vue").Ref<string>;

package/es/cascader/src/CascaderSubmenu.d.ts

@@ -286,6 +286,19 @@ declare const _default: import("vue").DefineComponent<{
                 sizeLarge: string;
                 labelPadding: string;
             }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
         };
         peerOverrides: {
             InternalSelectMenu?: {
@@ -337,6 +350,11 @@ declare const _default: import("vue").DefineComponent<{
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
         };
     }>;
     scrollbarInstRef: import("vue").Ref<{