naive-ui 2.21.2 → 2.22.0

package/lib/modal/src/Modal.d.ts

@@ -123,9 +123,9 @@ declare const modalProps: {
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -397,9 +397,9 @@ declare const modalProps: {
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -671,9 +671,9 @@ declare const modalProps: {
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -1019,9 +1019,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -1293,9 +1293,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -1567,9 +1567,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -1862,9 +1862,9 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
-                    colorOpacitySecondary: number;
-                    colorOpacitySecondaryHover: number;
-                    colorOpacitySecondaryPressed: number;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
                     colorSecondary: string;
                     colorSecondaryHover: string;
                     colorSecondaryPressed: string;
@@ -2136,9 +2136,9 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
-                    colorOpacitySecondary: number;
-                    colorOpacitySecondaryHover: number;
-                    colorOpacitySecondaryPressed: number;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
                     colorSecondary: string;
                     colorSecondaryHover: string;
                     colorSecondaryPressed: string;
@@ -2410,9 +2410,9 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
-                    colorOpacitySecondary: number;
-                    colorOpacitySecondaryHover: number;
-                    colorOpacitySecondaryPressed: number;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
                     colorSecondary: string;
                     colorSecondaryHover: string;
                     colorSecondaryPressed: string;
@@ -2796,9 +2796,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -3070,9 +3070,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -3344,9 +3344,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;

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

@@ -56,9 +56,9 @@ declare const modalLight: import("../../_mixins").Theme<"Modal", {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;

package/lib/page-header/src/PageHeader.js

@@ -50,8 +50,8 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-page-header-wrapper`,
                 this.rtlEnabled && `${mergedClsPrefix}-page-header-wrapper--rtl`
             ] },
-            headerSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumn" }, headerSlot())) : null,
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header`, key: "header" },
+            headerSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumb" }, headerSlot())) : null,
+            (showBack || avatarSlot || showTitle || showSubtitle || showExtra) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header`, key: "header" },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__main`, key: "back" },
                     showBack ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__back`, onClick: onBack },
                         (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
@@ -60,7 +60,7 @@ exports.default = (0, vue_1.defineComponent)({
                     avatarSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__avatar` }, avatarSlot())) : null,
                     showTitle ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__title`, key: "title" }, title || titleSlot())) : null,
                     showSubtitle ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__subtitle`, key: "subtitle" }, subtitle || subtitleSlot())) : null),
-                showExtra ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__extra` }, extra || extraSlot())) : null),
+                showExtra ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__extra` }, extra || extraSlot())) : null)),
             defaultSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-content`, key: "content" }, defaultSlot())) : null,
             footerSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-footer`, key: "footer" }, footerSlot())) : null));
     }

package/lib/page-header/src/styles/index.cssr.js

@@ -50,9 +50,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('page-header-header', `
  transition: color .3s var(--bezier);
  color: var(--subtitle-text-color);
  `)]), (0, cssr_1.cB)('page-header-content', `
- margin-top: 20px;
  font-size: var(--font-size);
- `), (0, cssr_1.cB)('page-header-footer', `
- margin-top: 20px;
+ `, [(0, cssr_1.c)('&:not(:first-child)', 'margin-top: 20px;')]), (0, cssr_1.cB)('page-header-footer', `
  font-size: var(--font-size);
- `)]);
+ `, [(0, cssr_1.c)('&:not(:first-child)', 'margin-top: 20px;')])]);

package/lib/popconfirm/src/Popconfirm.d.ts

@@ -102,9 +102,9 @@ declare const popconfirmProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -326,9 +326,9 @@ declare const popconfirmProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -550,9 +550,9 @@ declare const popconfirmProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -858,9 +858,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1082,9 +1082,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1306,9 +1306,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1636,9 +1636,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -1945,9 +1945,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2169,9 +2169,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2393,9 +2393,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;

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

@@ -24,9 +24,9 @@ declare const popconfirmLight: import("../../_mixins").Theme<"Popconfirm", {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;

package/lib/popover/src/Popover.js

@@ -141,9 +141,12 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
-                if (props.minWidth !== undefined) {
+                if (props.maxWidth !== undefined) {
                     (0, _utils_1.warnOnce)('popover', '`max-width` is deprecated, please use `style` instead.');
                 }
+                if (props.minWidth !== undefined) {
+                    (0, _utils_1.warnOnce)('popover', '`min-width` is deprecated, please use `style` instead.');
+                }
                 if (props.arrow !== undefined) {
                     (0, _utils_1.warnOnce)('popover', '`arrow` is deprecated, please use `showArrow` instead.');
                 }

package/lib/popover/src/PopoverBody.js

@@ -58,10 +58,10 @@ exports.default = (0, vue_1.defineComponent)({
         const styleRef = (0, vue_1.computed)(() => {
             return [
                 {
-                    width: props.width === 'trigger' ? '' : (0, _utils_1.formatLength)(props.width),
-                    maxWidth: (0, _utils_1.formatLength)(props.maxWidth),
-                    minWidth: (0, _utils_1.formatLength)(props.minWidth)
+                    width: props.width === 'trigger' ? '' : (0, _utils_1.formatLength)(props.width)
                 },
+                props.maxWidth ? { maxWidth: (0, _utils_1.formatLength)(props.maxWidth) } : {},
+                props.minWidth ? { minWidth: (0, _utils_1.formatLength)(props.minWidth) } : {},
                 cssVarsRef.value
             ];
         });

package/lib/popselect/src/Popselect.d.ts

@@ -23,11 +23,7 @@ declare const popselectProps: {
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
     renderLabel: PropType<import("../../_internal/select-menu/src/interface").RenderLabel>;
-    onChange: {
-        readonly type: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
         type: PropType<import("vueuc").FollowerPlacement>;
@@ -322,11 +318,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
     renderLabel: PropType<import("../../_internal/select-menu/src/interface").RenderLabel>;
-    onChange: {
-        readonly type: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
         type: PropType<import("vueuc").FollowerPlacement>;
@@ -1108,7 +1100,6 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     disabled: boolean;
     duration: number;
-    onChange: import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     raw: boolean;
     placement: import("vueuc").FollowerPlacement;

package/lib/popselect/src/Popselect.js

@@ -57,7 +57,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedTheme, $attrs } = this;
+        const { mergedTheme, $attrs, $slots } = this;
         const popoverProps = {
             theme: mergedTheme.peers.Popover,
             themeOverrides: mergedTheme.peerOverrides.Popover,
@@ -69,7 +69,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return ((0, vue_1.h)(PopselectPanel_1.default, Object.assign({}, (0, vue_1.mergeProps)($attrs, {
                     class: className,
                     style
-                }), (0, _utils_1.keep)(this.$props, PopselectPanel_1.panelPropKeys), { ref: (0, _utils_1.createRefSetter)(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave })));
+                }), (0, _utils_1.keep)(this.$props, PopselectPanel_1.panelPropKeys), { ref: (0, _utils_1.createRefSetter)(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), $slots));
             }
         };
         return ((0, vue_1.h)(popover_1.NPopover, Object.assign({}, (0, _utils_1.omit)(this.$props, PopselectPanel_1.panelPropKeys), popoverProps), {

package/lib/popselect/src/PopselectPanel.d.ts

@@ -26,11 +26,7 @@ export declare const panelProps: {
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 };
 export declare const panelPropKeys: ("value" | "size" | "width" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "scrollable" | "renderLabel" | "options" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
 declare const _default: import("vue").DefineComponent<{
@@ -55,11 +51,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 }, {
     mergedTheme: import("vue").Ref<{
         common: {
@@ -266,6 +258,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>>;
     handleToggle: (tmNode: TreeNode<SelectBaseOption>) => void;
+    handleMenuMousedown: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly multiple?: unknown;
     readonly value?: unknown;
@@ -299,7 +292,6 @@ declare const _default: import("vue").DefineComponent<{
     value: Value | null;
     size: PopselectSize;
     multiple: boolean;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     scrollable: boolean;
     options: SelectMixedOption[];
     cancelable: boolean;

package/lib/popselect/src/PopselectPanel.js

@@ -4,6 +4,7 @@ exports.panelPropKeys = exports.panelProps = void 0;
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 const vue_1 = require("vue");
 const treemate_1 = require("treemate");
+const seemly_1 = require("seemly");
 const utils_1 = require("../../select/src/utils");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
@@ -32,20 +33,20 @@ exports.panelProps = {
     onMouseleave: Function,
     renderLabel: Function,
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('popselect', '`on-change` is deprecated, please use `on-update:value` instead.');
-            return true;
-        },
-        default: undefined
-    }
+    onChange: [Function, Array]
 };
 exports.panelPropKeys = (0, _utils_1.keysOf)(exports.panelProps);
 exports.default = (0, vue_1.defineComponent)({
     name: 'PopselectPanel',
     props: exports.panelProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warn)('popselect', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NPopselect = (0, vue_1.inject)(interface_1.popselectInjectionKey);
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
@@ -65,6 +66,10 @@ exports.default = (0, vue_1.defineComponent)({
         function handleToggle(tmNode) {
             toggle(tmNode.key);
         }
+        function handleMenuMousedown(e) {
+            if (!(0, seemly_1.happensIn)(e, 'action'))
+                e.preventDefault();
+        }
         function toggle(value) {
             const { value: { getNode } } = treeMateRef;
             if (props.multiple) {
@@ -121,10 +126,11 @@ exports.default = (0, vue_1.defineComponent)({
             mergedTheme: NPopselect.mergedThemeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             treeMate: treeMateRef,
-            handleToggle
+            handleToggle,
+            handleMenuMousedown
         };
     },
     render() {
-        return ((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, width: this.width, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter }));
+        return ((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, width: this.width, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, this.$slots));
     }
 });

package/lib/radio/src/Radio.js

@@ -41,15 +41,15 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { $slots, mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: [
+        return ((0, vue_1.h)("label", { class: [
                 `${mergedClsPrefix}-radio`,
                 {
                     [`${mergedClsPrefix}-radio--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-radio--checked`]: this.renderSafeChecked,
                     [`${mergedClsPrefix}-radio--focus`]: this.focus
                 }
-            ], style: this.cssVars, onKeyup: this.handleKeyUp, onClick: this.handleClick, onMousedown: this.handleMouseDown },
-            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio__radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
+            ], style: this.cssVars },
+            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-radio__dot`,
                     this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`

package/lib/radio/src/RadioButton.js

@@ -13,16 +13,15 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: [
+        return ((0, vue_1.h)("label", { class: [
                 `${mergedClsPrefix}-radio-button`,
                 {
                     [`${mergedClsPrefix}-radio-button--disabled`]: this.mergedDisabled,
-                    [`${mergedClsPrefix}-radio-button--checked`]: this
-                        .renderSafeChecked,
+                    [`${mergedClsPrefix}-radio-button--checked`]: this.renderSafeChecked,
                     [`${mergedClsPrefix}-radio-button--focus`]: this.focus
                 }
-            ], onKeyup: this.handleKeyUp, onClick: this.handleClick, onMousedown: this.handleMouseDown },
-            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-button__radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
+            ] },
+            (0, vue_1.h)("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-radio-button__state-border` }),
             (0, vue_1.h)("span", { ref: "labelRef" }, this.$slots)));
     }

package/lib/radio/src/styles/radio-group.cssr.js

@@ -54,12 +54,16 @@ exports.default = (0, cssr_1.cB)('radio-group', `
  color: var(--button-text-color);
  border-top: 1px solid var(--button-border-color);
  border-bottom: 1px solid var(--button-border-color);
- `, [(0, cssr_1.cE)('radio-input', `
+ `, [(0, cssr_1.cB)('radio-input', `
+ position: absolute;
  border: 0;
- width: 0;
- height: 0;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
  opacity: 0;
- margin: 0;
+ z-index: 1;
  `), (0, cssr_1.cE)('state-border', `
  pointer-events: none;
  position: absolute;

package/lib/radio/src/styles/radio.cssr.js

@@ -34,12 +34,16 @@ exports.default = (0, cssr_1.cB)('radio', `
 `, [(0, cssr_1.cE)('dot', `
  height: var(--radio-size);
  width: var(--radio-size);
- `), (0, cssr_1.cE)('radio-input', `
+ `), (0, cssr_1.cB)('radio-input', `
+ position: absolute;
  border: 0;
- width: 0;
- height: 0;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
  opacity: 0;
- margin: 0;
+ z-index: 1;
  `), (0, cssr_1.cE)('dot', `
  background: var(--color);
  box-shadow: var(--box-shadow);

package/lib/radio/src/use-radio.d.ts

@@ -47,9 +47,6 @@ export interface UseRadio {
     handleRadioInputChange: () => void;
     handleRadioInputBlur: () => void;
     handleRadioInputFocus: () => void;
-    handleKeyUp: (e: KeyboardEvent) => void;
-    handleMouseDown: () => void;
-    handleClick: () => void;
 }
 declare function setup(props: ExtractPropTypes<typeof radioProps>): UseRadio;
 declare namespace setup {