naive-ui 2.32.0 → 2.32.2

package/es/_internal/scrollbar/src/Scrollbar.js

@@ -2,6 +2,7 @@ import { h, ref, defineComponent, computed, onMounted, onBeforeUnmount, mergePro
 import { on, off } from 'evtd';
 import { VResizeObserver } from 'vueuc';
 import { useIsIos } from 'vooks';
+import { getPreciseEventTarget } from 'seemly';
 import { useConfig, useTheme, useThemeClass, useRtl } from '../../../_mixins';
 import { useReactivated, Wrapper } from '../../../_utils';
 import { scrollbarLight } from '../styles';
@@ -361,7 +362,7 @@ const Scrollbar = defineComponent({
         }
         function isMouseUpAway(e) {
             var _a;
-            return !((_a = wrapperRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.target));
+            return !((_a = wrapperRef.value) === null || _a === void 0 ? void 0 : _a.contains(getPreciseEventTarget(e)));
         }
         function handleXScrollMouseDown(e) {
             e.preventDefault();

package/es/_internal/select-menu/styles/light.js

@@ -5,7 +5,7 @@ import commonVariables from './_common';
 import { createTheme } from '../../../_mixins';
 export const self = (vars) => {
     const { borderRadius, popoverColor, textColor3, dividerColor, textColor2, primaryColorPressed, textColorDisabled, primaryColor, opacityDisabled, hoverColor, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeHuge, heightSmall, heightMedium, heightLarge, heightHuge } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { optionFontSizeSmall: fontSizeSmall, optionFontSizeMedium: fontSizeMedium, optionFontSizeLarge: fontSizeLarge, optionFontSizeHuge: fontSizeHuge, optionHeightSmall: heightSmall, optionHeightMedium: heightMedium, optionHeightLarge: heightLarge, optionHeightHuge: heightHuge, borderRadius: borderRadius, color: popoverColor, groupHeaderTextColor: textColor3, actionDividerColor: dividerColor, optionTextColor: textColor2, optionTextColorPressed: primaryColorPressed, optionTextColorDisabled: textColorDisabled, optionTextColorActive: primaryColor, optionOpacityDisabled: opacityDisabled, optionCheckColor: primaryColor, optionColorPending: hoverColor, optionColorActive: 'rgba(0, 0, 0, 0)', optionColorActivePending: hoverColor, actionTextColor: textColor2, loadingColor: primaryColor });
+    return Object.assign(Object.assign({}, commonVariables), { optionFontSizeSmall: fontSizeSmall, optionFontSizeMedium: fontSizeMedium, optionFontSizeLarge: fontSizeLarge, optionFontSizeHuge: fontSizeHuge, optionHeightSmall: heightSmall, optionHeightMedium: heightMedium, optionHeightLarge: heightLarge, optionHeightHuge: heightHuge, borderRadius, color: popoverColor, groupHeaderTextColor: textColor3, actionDividerColor: dividerColor, optionTextColor: textColor2, optionTextColorPressed: primaryColorPressed, optionTextColorDisabled: textColorDisabled, optionTextColorActive: primaryColor, optionOpacityDisabled: opacityDisabled, optionCheckColor: primaryColor, optionColorPending: hoverColor, optionColorActive: 'rgba(0, 0, 0, 0)', optionColorActivePending: hoverColor, actionTextColor: textColor2, loadingColor: primaryColor });
 };
 const internalSelectMenuLight = createTheme({
     name: 'InternalSelectMenu',

package/es/_internal/selection/src/Selection.js

@@ -437,7 +437,7 @@ export default defineComponent({
             const createTag = (option) => (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: option.value }, renderTag ? (renderTag({
                 option,
                 handleClose: () => this.handleDeleteOption(option)
-            })) : (h(NTag, { size: size, closable: !option.disabled, disabled: disabled, onClose: () => this.handleDeleteOption(option), internalCloseFocusable: false, internalStopClickPropagation: true }, {
+            })) : (h(NTag, { size: size, closable: !option.disabled, disabled: disabled, onClose: () => this.handleDeleteOption(option), internalCloseFocusable: false }, {
                 default: () => renderLabel
                     ? renderLabel(option, true)
                     : render(option[labelField], option, true)

package/es/_utils/cssr/index.js

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import CSSRender from 'css-render';
-import BEMPlugin from '@css-render/plugin-bem';
+import { CssRender } from 'css-render';
+import BemPlugin from '@css-render/plugin-bem';
 const namespace = 'n';
 const prefix = `.${namespace}-`;
 const elementPrefix = '__';
 const modifierPrefix = '--';
-const cssr = CSSRender();
-const plugin = BEMPlugin({
+const cssr = CssRender();
+const plugin = BemPlugin({
     blockPrefix: prefix,
     elementPrefix,
     modifierPrefix

package/es/alert/src/Alert.d.ts

@@ -10,6 +10,10 @@ export declare const alertProps: {
         type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     closable: BooleanConstructor;
     onClose: FunctionConstructor;
     onAfterLeave: FunctionConstructor;
@@ -222,6 +226,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     closable: BooleanConstructor;
     onClose: FunctionConstructor;
     onAfterLeave: FunctionConstructor;
@@ -425,6 +433,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedBordered: import("vue").ComputedRef<boolean>;
     visible: import("vue").Ref<boolean>;
     handleCloseClick: () => void;
     handleAfterLeave: () => void;
@@ -644,6 +653,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     closable: BooleanConstructor;
     onClose: FunctionConstructor;
     onAfterLeave: FunctionConstructor;
@@ -846,6 +859,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     type: "default" | "error" | "info" | "success" | "warning";
+    bordered: boolean;
     showIcon: boolean;
     closable: boolean;
 }>;

package/es/alert/src/Alert.js

@@ -13,6 +13,9 @@ export const alertProps = Object.assign(Object.assign({}, useTheme.props), { tit
     }, type: {
         type: String,
         default: 'default'
+    }, bordered: {
+        type: Boolean,
+        default: true
     }, closable: Boolean, onClose: Function, onAfterLeave: Function, 
     /** @deprecated */
     onAfterHide: Function });
@@ -28,7 +31,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
+        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Alert', '-alert', style, alertLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Alert', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
@@ -93,6 +96,7 @@ export default defineComponent({
         return {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
+            mergedBordered: mergedBorderedRef,
             visible: visibleRef,
             handleCloseClick,
             handleAfterLeave,
@@ -121,6 +125,7 @@ export default defineComponent({
                 };
                 return this.visible ? (h("div", Object.assign({}, mergeProps(this.$attrs, attrs)),
                     this.closable && (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })),
+                    this.bordered && (h("div", { class: `${mergedClsPrefix}-alert__border` })),
                     this.showIcon && (h("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, resolveSlot($slots.icon, () => [
                         h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                             default: () => {
@@ -139,7 +144,11 @@ export default defineComponent({
                             }
                         })
                     ]))),
-                    h("div", { class: `${mergedClsPrefix}-alert-body` },
+                    h("div", { class: [
+                            `${mergedClsPrefix}-alert-body`,
+                            this.mergedBordered &&
+                                `${mergedClsPrefix}-alert-body--bordered`
+                        ] },
                         resolveWrappedSlot($slots.header, (children) => {
                             const mergedChildren = children || this.title;
                             return mergedChildren ? (h("div", { class: `${mergedClsPrefix}-alert-body__title` }, mergedChildren)) : null;

package/es/alert/src/styles/index.cssr.js

@@ -32,12 +32,21 @@ export default cB('alert', `
  background-color: var(--n-color);
  text-align: start;
  word-break: break-word;
-`, [cM('closable', [cB('alert-body', [cE('title', `
+`, [cE('border', `
+ border-radius: inherit;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ transition: border-color .3s var(--n-bezier);
+ border: var(--n-border);
+ pointer-events: none;
+ `), cM('closable', [cB('alert-body', [cE('title', `
  padding-right: 24px;
  `)])]), cE('icon', {
   color: 'var(--n-icon-color)'
 }), cB('alert-body', {
-  border: 'var(--n-border)',
   padding: 'var(--n-padding)'
 }, [cE('title', {
   color: 'var(--n-title-text-color)'

package/es/alert/styles/dark.js

@@ -7,7 +7,11 @@ const alertDark = {
     self(vars) {
         const { lineHeight, borderRadius, fontWeightStrong, dividerColor, inputColor, textColor1, textColor2, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, infoColorSuppl, successColorSuppl, warningColorSuppl, errorColorSuppl, fontSize } = vars;
         return Object.assign(Object.assign({}, commonVars), { fontSize,
-            lineHeight, titleFontWeight: fontWeightStrong, borderRadius, border: `1px solid ${dividerColor}`, color: inputColor, titleTextColor: textColor1, iconColor: textColor2, contentTextColor: textColor2, closeBorderRadius: borderRadius, closeColorHover: closeColorHover, closeColorPressed: closeColorPressed, closeIconColor: closeIconColor, closeIconColorHover: closeIconColorHover, closeIconColorPressed: closeIconColorPressed, borderInfo: `1px solid ${changeColor(infoColorSuppl, { alpha: 0.35 })}`, colorInfo: changeColor(infoColorSuppl, { alpha: 0.25 }), titleTextColorInfo: textColor1, iconColorInfo: infoColorSuppl, contentTextColorInfo: textColor2, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, borderSuccess: `1px solid ${changeColor(successColorSuppl, {
+            lineHeight, titleFontWeight: fontWeightStrong, borderRadius, border: `1px solid ${dividerColor}`, color: inputColor, titleTextColor: textColor1, iconColor: textColor2, contentTextColor: textColor2, closeBorderRadius: borderRadius, closeColorHover,
+            closeColorPressed,
+            closeIconColor,
+            closeIconColorHover,
+            closeIconColorPressed, borderInfo: `1px solid ${changeColor(infoColorSuppl, { alpha: 0.35 })}`, colorInfo: changeColor(infoColorSuppl, { alpha: 0.25 }), titleTextColorInfo: textColor1, iconColorInfo: infoColorSuppl, contentTextColorInfo: textColor2, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, borderSuccess: `1px solid ${changeColor(successColorSuppl, {
                 alpha: 0.35
             })}`, colorSuccess: changeColor(successColorSuppl, { alpha: 0.25 }), titleTextColorSuccess: textColor1, iconColorSuccess: successColorSuppl, contentTextColorSuccess: textColor2, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, borderWarning: `1px solid ${changeColor(warningColorSuppl, {
                 alpha: 0.35

package/es/anchor/styles/light.js

@@ -3,7 +3,8 @@ import { commonLight } from '../../_styles/common';
 import commonVars from './_common';
 export const self = (vars) => {
     const { borderRadius, railColor, primaryColor, primaryColorHover, primaryColorPressed, textColor2 } = vars;
-    return Object.assign(Object.assign({}, commonVars), { borderRadius, railColor: railColor, railColorActive: primaryColor, linkColor: changeColor(primaryColor, { alpha: 0.15 }), linkTextColor: textColor2, linkTextColorHover: primaryColorHover, linkTextColorPressed: primaryColorPressed, linkTextColorActive: primaryColor });
+    return Object.assign(Object.assign({}, commonVars), { borderRadius,
+        railColor, railColorActive: primaryColor, linkColor: changeColor(primaryColor, { alpha: 0.15 }), linkTextColor: textColor2, linkTextColorHover: primaryColorHover, linkTextColorPressed: primaryColorPressed, linkTextColorActive: primaryColor });
 };
 const anchorLight = {
     name: 'Anchor',

package/es/auto-complete/src/AutoComplete.d.ts

@@ -1,4 +1,4 @@
-import { PropType, InputHTMLAttributes } from 'vue';
+import { PropType, InputHTMLAttributes, HTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { RenderOption, RenderLabel } from '../../_internal/select-menu/src/interface';
@@ -12,6 +12,7 @@ export declare const autoCompleteProps: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly bordered: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -114,6 +115,7 @@ export declare const autoCompleteProps: {
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -231,6 +233,7 @@ export declare const autoCompleteProps: {
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -348,6 +351,7 @@ export declare const autoCompleteProps: {
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -415,6 +419,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly bordered: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -517,6 +522,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -634,6 +640,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -751,6 +758,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1015,6 +1023,7 @@ declare const _default: import("vue").DefineComponent<{
                 }, any>;
             }>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -1118,6 +1127,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly bordered: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -1220,6 +1230,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1337,6 +1348,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1454,6 +1466,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;

package/es/auto-complete/src/AutoComplete.js

@@ -3,6 +3,7 @@ import { createTreeMate } from 'treemate';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { useIsMounted, useMergedState } from 'vooks';
+import { getPreciseEventTarget } from 'seemly';
 import { createTmOptions } from '../../select/src/utils';
 import { useFormItem, useTheme, useConfig, useThemeClass } from '../../_mixins';
 import { call, useAdjustedTo, getFirstSlotVNode, warnOnce } from '../../_utils';
@@ -11,7 +12,7 @@ import { NInput } from '../../input';
 import { autoCompleteLight } from '../styles';
 import { mapAutoCompleteOptionsToSelectOptions } from './utils';
 import style from './styles/index.cssr';
-export const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, bordered: {
+export const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, menuProps: Object, bordered: {
         type: Boolean,
         default: undefined
     }, clearable: {
@@ -171,7 +172,7 @@ export default defineComponent({
         }
         function handleClickOutsideMenu(e) {
             var _a;
-            if (!((_a = triggerElRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (!((_a = triggerElRef.value) === null || _a === void 0 ? void 0 : _a.contains(getPreciseEventTarget(e)))) {
                 canBeActivatedRef.value = false;
             }
         }
@@ -264,20 +265,25 @@ export default defineComponent({
                             default: () => {
                                 var _a;
                                 (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-                                return this.active
-                                    ? withDirectives(h(NInternalSelectMenu, { clsPrefix: mergedClsPrefix, ref: "menuInstRef", theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                            .InternalSelectMenu, "auto-pending": true, class: [
-                                            `${mergedClsPrefix}-auto-complete-menu`,
-                                            this.themeClass
-                                        ], style: this.cssVars, treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle }), [
-                                        [
-                                            clickoutside,
-                                            this.handleClickOutsideMenu,
-                                            undefined,
-                                            { capture: true }
-                                        ]
-                                    ])
-                                    : null;
+                                if (!this.active)
+                                    return null;
+                                const { menuProps } = this;
+                                return withDirectives(h(NInternalSelectMenu, Object.assign({}, menuProps, { clsPrefix: mergedClsPrefix, ref: "menuInstRef", theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
+                                        .InternalSelectMenu, "auto-pending": true, class: [
+                                        `${mergedClsPrefix}-auto-complete-menu`,
+                                        this.themeClass,
+                                        menuProps === null || menuProps === void 0 ? void 0 : menuProps.class
+                                    ], style: [
+                                        menuProps === null || menuProps === void 0 ? void 0 : menuProps.style,
+                                        this.cssVars
+                                    ], treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle })), [
+                                    [
+                                        clickoutside,
+                                        this.handleClickOutsideMenu,
+                                        undefined,
+                                        { capture: true }
+                                    ]
+                                ]);
                             }
                         }))
                     })

package/es/auto-complete/styles/light.d.ts

@@ -59,6 +59,7 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
         }, any>;
     }>;
     Input: import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;

package/es/breadcrumb/styles/light.js

@@ -2,7 +2,7 @@ import commonVariables from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
     const { fontSize, textColor3, textColor2, borderRadius, buttonColor2Hover, buttonColor2Pressed } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { fontSize: fontSize, itemLineHeight: '1.25', itemTextColor: textColor3, itemTextColorHover: textColor2, itemTextColorPressed: textColor2, itemTextColorActive: textColor2, itemBorderRadius: borderRadius, itemColorHover: buttonColor2Hover, itemColorPressed: buttonColor2Pressed, separatorColor: textColor3 });
+    return Object.assign(Object.assign({}, commonVariables), { fontSize, itemLineHeight: '1.25', itemTextColor: textColor3, itemTextColorHover: textColor2, itemTextColorPressed: textColor2, itemTextColorActive: textColor2, itemBorderRadius: borderRadius, itemColorHover: buttonColor2Hover, itemColorPressed: buttonColor2Pressed, separatorColor: textColor3 });
 };
 const breadcrumbLight = {
     name: 'Breadcrumb',

package/es/button/styles/light.js

@@ -5,7 +5,11 @@ export const self = (vars) => {
     return Object.assign(Object.assign({}, commonVariables), { heightTiny,
         heightSmall,
         heightMedium,
-        heightLarge, borderRadiusTiny: borderRadius, borderRadiusSmall: borderRadius, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny: fontSizeTiny, fontSizeSmall: fontSizeSmall, fontSizeMedium: fontSizeMedium, fontSizeLarge: fontSizeLarge, opacityDisabled: opacityDisabled, 
+        heightLarge, borderRadiusTiny: borderRadius, borderRadiusSmall: borderRadius, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny,
+        fontSizeSmall,
+        fontSizeMedium,
+        fontSizeLarge,
+        opacityDisabled, 
         // secondary
         colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.22', colorOpacitySecondaryPressed: '0.28', colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, 
         // tertiary

package/es/card/styles/light.js

@@ -2,7 +2,7 @@ import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 export const self = (vars) => {
     const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, fontWeightStrong, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor, actionColor } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor: actionColor, titleFontWeight: fontWeightStrong, closeColorHover,
+    return Object.assign(Object.assign({}, commonVariables), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor, titleFontWeight: fontWeightStrong, closeColorHover,
         closeColorPressed, closeBorderRadius: borderRadius, closeIconColor,
         closeIconColorHover,
         closeIconColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius });

package/es/carousel/src/Carousel.js

@@ -2,6 +2,7 @@ import { h, defineComponent, ref, cloneVNode, computed, onBeforeUnmount, watch,
 import { VResizeObserver } from 'vueuc';
 import { useMergedState } from 'vooks';
 import { on, off } from 'evtd';
+import { getPreciseEventTarget } from 'seemly';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { flatten, keep, resolveSlotWithProps } from '../../_utils';
 import { carouselLight } from '../styles';
@@ -421,8 +422,9 @@ export default defineComponent({
             var _a;
             if (globalDragging)
                 return;
-            if (!((_a = slidesElRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
+            if (!((_a = slidesElRef.value) === null || _a === void 0 ? void 0 : _a.contains(getPreciseEventTarget(event)))) {
                 return;
+            }
             globalDragging = true;
             dragging = true;
             isEffectiveDrag = false;
@@ -624,7 +626,7 @@ export default defineComponent({
                 return;
             resetAutoplay();
             if (sequenceLayoutRef.value) {
-                if (duplicatedableRef.value) {
+                if (duplicatedableRef.value && displayTotalViewRef.value > 2) {
                     const { value: length } = totalViewRef;
                     if (realIndex === length - 2 && lastRealIndex === 1) {
                         realIndex = 0;
@@ -674,9 +676,9 @@ export default defineComponent({
         }));
         const caroulseExposedMethod = {
             getCurrentIndex: () => mergedDisplayIndexRef.value,
-            to: to,
-            prev: prev,
-            next: next
+            to,
+            prev,
+            next
         };
         const themeRef = useTheme('Carousel', '-carousel', style, carouselLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {

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

@@ -32,6 +32,10 @@ export declare const cascaderProps: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly expandTrigger: {
         readonly type: PropType<ExpandTrigger>;
         readonly default: "click";
@@ -684,6 +688,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly expandTrigger: {
         readonly type: PropType<ExpandTrigger>;
         readonly default: "click";
@@ -1768,6 +1776,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly expandTrigger: {
         readonly type: PropType<ExpandTrigger>;
         readonly default: "click";
@@ -2413,6 +2425,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly allowCheckingNotLoaded: boolean;
     readonly cascade: boolean;
     readonly checkStrategy: CheckStrategy;
+    readonly disabledField: string;
     readonly leafOnly: boolean;
     readonly showPath: boolean;
 }>;

package/es/cascader/src/Cascader.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, provide, ref, watch, toRef, isReactive, watchEffect, nextTick } from 'vue';
 import { createTreeMate, SubtreeNotLoadedError } from 'treemate';
 import { VBinder, VTarget, VFollower } from 'vueuc';
-import { depx, changeColor, happensIn } from 'seemly';
+import { depx, changeColor, happensIn, getPreciseEventTarget } from 'seemly';
 import { useIsMounted, useMergedState } from 'vooks';
 import { NInternalSelection } from '../../_internal';
 import { useLocale, useTheme, useConfig, useFormItem, useThemeClass } from '../../_mixins';
@@ -24,6 +24,9 @@ export const cascaderProps = Object.assign(Object.assign({}, useTheme.props), {
     }, placeholder: String, multiple: Boolean, size: String, filterable: Boolean, disabled: {
         type: Boolean,
         default: undefined
+    }, disabledField: {
+        type: String,
+        default: 'disabled'
     }, expandTrigger: {
         type: String,
         default: 'click'
@@ -106,8 +109,11 @@ export default defineComponent({
             loadingKeySetRef.value.delete(key);
         };
         const treeMateRef = computed(() => {
-            const { valueField, childrenField } = props;
+            const { valueField, childrenField, disabledField } = props;
             return createTreeMate(props.options, {
+                getDisabled(node) {
+                    return node[disabledField];
+                },
                 getKey(node) {
                     return node[valueField];
                 },
@@ -402,7 +408,7 @@ export default defineComponent({
             if (showSelectMenuRef.value)
                 return;
             if (mergedShowRef.value) {
-                if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(e.target))) {
+                if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(getPreciseEventTarget(e)))) {
                     closeMenu();
                 }
             }
@@ -781,7 +787,9 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(NInternalSelection, { onResize: this.handleTriggerResize, ref: "triggerInstRef", status: this.mergedStatus, 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 }))
+                        default: () => (h(NInternalSelection, { onResize: this.handleTriggerResize, ref: "triggerInstRef", status: this.mergedStatus, 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 }, {
+                            arrow: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                        }))
                     }),
                     h(VFollower, { key: "cascaderMenu", ref: "cascaderMenuFollowerRef", show: this.mergedShow && !this.showSelectMenu, containerClass: this.namespace, placement: this.placement, width: !this.options.length ? 'target' : undefined, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
                         default: () => {

package/es/checkbox/src/CheckboxGroup.js

@@ -145,9 +145,9 @@ export default defineComponent({
             checkedCountRef: checkedCount,
             maxRef: toRef(props, 'max'),
             minRef: toRef(props, 'min'),
-            valueSetRef: valueSetRef,
+            valueSetRef,
             disabledRef: mergedDisabledRef,
-            mergedSizeRef: mergedSizeRef,
+            mergedSizeRef,
             toggleCheckbox
         });
         return {

package/es/checkbox/styles/light.js

@@ -5,7 +5,7 @@ export const self = (vars) => {
     const { baseColor, inputColorDisabled, cardColor, modalColor, popoverColor, textColorDisabled, borderColor, primaryColor, textColor2, fontSizeSmall, fontSizeMedium, fontSizeLarge, borderRadiusSmall, lineHeight } = vars;
     return Object.assign(Object.assign({}, commonVariables), { labelLineHeight: lineHeight, fontSizeSmall,
         fontSizeMedium,
-        fontSizeLarge, borderRadius: borderRadiusSmall, color: baseColor, colorChecked: primaryColor, colorDisabled: inputColorDisabled, colorDisabledChecked: inputColorDisabled, colorTableHeader: cardColor, colorTableHeaderModal: modalColor, colorTableHeaderPopover: popoverColor, checkMarkColor: baseColor, checkMarkColorDisabled: textColorDisabled, checkMarkColorDisabledChecked: textColorDisabled, border: `1px solid ${borderColor}`, borderDisabled: `1px solid ${borderColor}`, borderDisabledChecked: `1px solid ${borderColor}`, borderChecked: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColor}`, boxShadowFocus: `0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, textColor: textColor2, textColorDisabled: textColorDisabled });
+        fontSizeLarge, borderRadius: borderRadiusSmall, color: baseColor, colorChecked: primaryColor, colorDisabled: inputColorDisabled, colorDisabledChecked: inputColorDisabled, colorTableHeader: cardColor, colorTableHeaderModal: modalColor, colorTableHeaderPopover: popoverColor, checkMarkColor: baseColor, checkMarkColorDisabled: textColorDisabled, checkMarkColorDisabledChecked: textColorDisabled, border: `1px solid ${borderColor}`, borderDisabled: `1px solid ${borderColor}`, borderDisabledChecked: `1px solid ${borderColor}`, borderChecked: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColor}`, boxShadowFocus: `0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, textColor: textColor2, textColorDisabled });
 };
 const checkboxLight = {
     name: 'Checkbox',