naive-ui 2.25.4 → 2.25.7

package/es/popconfirm/src/PopconfirmPanel.js

@@ -2,8 +2,8 @@ import { h, defineComponent, computed, inject } from 'vue';
 import { NButton } from '../../button';
 import { NBaseIcon } from '../../_internal';
 import { WarningIcon } from '../../_internal/icons';
-import { useLocale } from '../../_mixins';
-import { keysOf } from '../../_utils';
+import { useConfig, useLocale, useThemeClass } from '../../_mixins';
+import { keysOf, resolveSlot } from '../../_utils';
 import { popconfirmInjectionKey } from './interface';
 export const panelProps = {
     positiveText: String,
@@ -27,17 +27,23 @@ export default defineComponent({
     props: panelProps,
     setup(props) {
         const { localeRef } = useLocale('Popconfirm');
+        const { inlineThemeDisabled } = useConfig();
+        const { mergedClsPrefixRef, mergedThemeRef, props: popconfirmProps
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { mergedClsPrefixRef, mergedThemeRef } = inject(popconfirmInjectionKey);
-        return Object.assign(Object.assign({}, useLocale('Popconfirm')), { mergedClsPrefix: mergedClsPrefixRef, cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { fontSize, iconSize, iconColor } } = mergedThemeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-font-size': fontSize,
-                    '--n-icon-size': iconSize,
-                    '--n-icon-color': iconColor
-                };
-            }), localizedPositiveText: computed(() => {
+         } = inject(popconfirmInjectionKey);
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, iconSize, iconColor } } = mergedThemeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-icon-size': iconSize,
+                '--n-icon-color': iconColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('popconfirm-panel', undefined, cssVarsRef, popconfirmProps)
+            : undefined;
+        return Object.assign(Object.assign({}, useLocale('Popconfirm')), { mergedClsPrefix: mergedClsPrefixRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, localizedPositiveText: computed(() => {
                 return props.positiveText || localeRef.value.positiveText;
             }), localizedNegativeText: computed(() => {
                 return props.negativeText || localeRef.value.negativeText;
@@ -46,23 +52,24 @@ export default defineComponent({
             },
             handleNegativeClick(e) {
                 props.onNegativeClick(e);
-            } });
+            }, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
-        var _a;
+        var _a, _b;
         const { mergedClsPrefix, $slots } = this;
-        const actionContentNode = $slots.action
-            ? $slots.action()
-            : this.negativeText === null && this.positiveText === null
-                ? null
-                : [
-                    this.negativeText !== null && (h(NButton, { size: "small", onClick: this.handleNegativeClick }, { default: () => this.localizedNegativeText })),
-                    this.positiveText !== null && (h(NButton, { size: "small", type: "primary", onClick: this.handlePositiveClick }, { default: () => this.localizedPositiveText }))
-                ];
-        return (h("div", { style: this.cssVars },
+        const actionContentNode = resolveSlot($slots.action, () => this.negativeText === null && this.positiveText === null
+            ? []
+            : [
+                this.negativeText !== null && (h(NButton, { size: "small", onClick: this.handleNegativeClick }, { default: () => this.localizedNegativeText })),
+                this.positiveText !== null && (h(NButton, { size: "small", type: "primary", onClick: this.handlePositiveClick }, { default: () => this.localizedPositiveText }))
+            ]);
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return (h("div", { class: this.themeClass, style: this.cssVars },
             h("div", { class: `${mergedClsPrefix}-popconfirm__body` },
-                this.showIcon ? (h("div", { class: `${mergedClsPrefix}-popconfirm__icon` }, $slots.icon ? ($slots.icon()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(WarningIcon, null) })))) : null, (_a = $slots.default) === null || _a === void 0 ? void 0 :
-                _a.call($slots)),
+                this.showIcon ? (h("div", { class: `${mergedClsPrefix}-popconfirm__icon` }, resolveSlot($slots.icon, () => [
+                    h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(WarningIcon, null) })
+                ]))) : null, (_b = $slots.default) === null || _b === void 0 ? void 0 :
+                _b.call($slots)),
             actionContentNode ? (h("div", { class: `${mergedClsPrefix}-popconfirm__action` }, actionContentNode)) : null));
     }
 });

package/es/popconfirm/src/interface.d.ts

@@ -1,8 +1,10 @@
 import { Ref } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { PopconfirmTheme } from '../styles';
+import type { PopconfirmSetupProps } from './Popconfirm';
 export interface PopconfirmInjection {
     mergedThemeRef: Ref<MergedTheme<PopconfirmTheme>>;
     mergedClsPrefixRef: Ref<string>;
+    props: PopconfirmSetupProps;
 }
 export declare const popconfirmInjectionKey: import("vue").InjectionKey<PopconfirmInjection>;

package/es/popover/src/PopoverBody.d.ts

@@ -12,6 +12,7 @@ export declare const popoverBodyProps: {
     delay: NumberConstructor;
     duration: NumberConstructor;
     raw: BooleanConstructor;
+    arrowPointToCenter: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
     displayDirective: PropType<"show" | "if">;
     x: NumberConstructor;
@@ -86,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     delay: NumberConstructor;
     duration: NumberConstructor;
     raw: BooleanConstructor;
+    arrowPointToCenter: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
     displayDirective: PropType<"show" | "if">;
     x: NumberConstructor;
@@ -164,6 +166,7 @@ declare const _default: import("vue").DefineComponent<{
     delay: NumberConstructor;
     duration: NumberConstructor;
     raw: BooleanConstructor;
+    arrowPointToCenter: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;
     displayDirective: PropType<"show" | "if">;
     x: NumberConstructor;
@@ -228,6 +231,7 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     overlap: boolean;
     showArrow: boolean;
+    arrowPointToCenter: boolean;
     keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;

package/es/popover/src/PopoverBody.js

@@ -8,7 +8,7 @@ import style from './styles/index.cssr';
 import { popoverBodyInjectionKey } from './interface';
 import { drawerBodyInjectionKey } from '../../drawer/src/interface';
 import { modalBodyInjectionKey } from '../../modal/src/interface';
-export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], keepAliveOnHover: Boolean, internalTrapFocus: Boolean, 
+export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowPointToCenter: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], keepAliveOnHover: Boolean, internalTrapFocus: Boolean, 
     // private
     animated: Boolean, onClickoutside: Function, 
     /** @deprecated */
@@ -165,7 +165,8 @@ export default defineComponent({
                             [`${mergedClsPrefix}-popover--show-arrow`]: props.showArrow,
                             [`${mergedClsPrefix}-popover--show-header`]: !isSlotEmpty(slots.header),
                             [`${mergedClsPrefix}-popover--raw`]: props.raw,
-                            [`${mergedClsPrefix}-popover--manual-trigger`]: props.trigger === 'manual'
+                            [`${mergedClsPrefix}-popover--manual-trigger`]: props.trigger === 'manual',
+                            [`${mergedClsPrefix}-popover--center-arrow`]: props.arrowPointToCenter
                         }
                     ],
                     ref: bodyRef,

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

@@ -1,10 +1,12 @@
+import { map } from 'lodash-es';
 import { c, cB, cM, cNotM, cE, cCB } from '../../../_utils/cssr';
 const oppositePlacement = {
   top: 'bottom',
   bottom: 'top',
   left: 'right',
   right: 'left'
-}; // vars:
+};
+const arrowSize = 'var(--n-arrow-height) * 1.414'; // vars:
 // --n-bezier
 // --n-bezier-ease-in
 // --n-bezier-ease-out
@@ -62,54 +64,72 @@ c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
  transition: background-color .3s var(--n-bezier);
  position: absolute;
  display: block;
- width: calc(var(--n-arrow-height) * 1.414);
- height: calc(var(--n-arrow-height) * 1.414);
+ width: calc(${arrowSize});
+ height: calc(${arrowSize});
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
  transform: rotate(45deg);
  background-color: var(--n-color);
  pointer-events: all;
  `)])]), placementStyle('top-start', `
- top: calc(-0.707 * var(--n-arrow-height));
- left: calc(var(--n-arrow-offset) - var(--v-offset-left));
+ top: calc(${arrowSize} / -2);
+ left: calc(${getArrowOffset('top-start')} - var(--v-offset-left));
  `), placementStyle('top', `
- top: calc(-0.707 * var(--n-arrow-height));
- transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
+ top: calc(${arrowSize} / -2);
+ transform: translateX(calc(${arrowSize} / -2)) rotate(45deg);
  left: 50%;
  `), placementStyle('top-end', `
- top: calc(-0.707 * var(--n-arrow-height));
- right: calc(var(--n-arrow-offset) + var(--v-offset-left));
+ top: calc(${arrowSize} / -2);
+ right: calc(${getArrowOffset('top-end')} + var(--v-offset-left));
  `), placementStyle('bottom-start', `
- bottom: calc(-0.707 * var(--n-arrow-height));
- left: calc(var(--n-arrow-offset) - var(--v-offset-left));
+ bottom: calc(${arrowSize} / -2);
+ left: calc(${getArrowOffset('bottom-start')} - var(--v-offset-left));
  `), placementStyle('bottom', `
- bottom: calc(-0.707 * var(--n-arrow-height));
- transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
+ bottom: calc(${arrowSize} / -2);
+ transform: translateX(calc(${arrowSize} / -2)) rotate(45deg);
  left: 50%;
  `), placementStyle('bottom-end', `
- bottom: calc(-0.707 * var(--n-arrow-height));
- right: calc(var(--n-arrow-offset) + var(--v-offset-left));
+ bottom: calc(${arrowSize} / -2);
+ right: calc(${getArrowOffset('bottom-end')} + var(--v-offset-left));
  `), placementStyle('left-start', `
- left: calc(-0.707 * var(--n-arrow-height));
- top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
+ left: calc(${arrowSize} / -2);
+ top: calc(${getArrowOffset('left-start')} - var(--v-offset-top));
  `), placementStyle('left', `
- left: calc(-0.707 * var(--n-arrow-height));
- transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
+ left: calc(${arrowSize} / -2);
+ transform: translateY(calc(${arrowSize} / -2)) rotate(45deg);
  top: 50%;
  `), placementStyle('left-end', `
- left: calc(-0.707 * var(--n-arrow-height));
- bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
- 
+ left: calc(${arrowSize} / -2);
+ bottom: calc(${getArrowOffset('left-end')} + var(--v-offset-top));
  `), placementStyle('right-start', `
- right: calc(-0.707 * var(--n-arrow-height));
- top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
+ right: calc(${arrowSize} / -2);
+ top: calc(${getArrowOffset('right-start')} - var(--v-offset-top));
  `), placementStyle('right', `
- right: calc(-0.707 * var(--n-arrow-height));
- transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
+ right: calc(${arrowSize} / -2);
+ transform: translateY(calc(${arrowSize} / -2)) rotate(45deg);
  top: 50%;
  `), placementStyle('right-end', `
- right: calc(-0.707 * var(--n-arrow-height));
- bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
- `)]);
+ right: calc(${arrowSize} / -2);
+ bottom: calc(${getArrowOffset('right-end')} + var(--v-offset-top));
+ `), ...map({
+  top: ['right-start', 'left-start'],
+  right: ['top-end', 'bottom-end'],
+  bottom: ['right-end', 'left-end'],
+  left: ['top-start', 'bottom-start']
+}, (placements, direction) => {
+  const isVertical = ['right', 'left'].includes(direction);
+  const sizeType = isVertical ? 'width' : 'height';
+  return placements.map(placement => {
+    const isReverse = placement.split('-')[1] === 'end';
+    const targetSize = `var(--v-target-${sizeType}, 0px)`;
+    const centerOffset = `calc((${targetSize} - ${arrowSize}) / 2)`;
+    const offset = getArrowOffset(placement);
+    return c(`[v-placement="${placement}"] >`, [cB('popover', [cM('center-arrow', [cB('popover-arrow', `${direction}: calc(max(${centerOffset}, ${offset}) ${isReverse ? '+' : '-'} var(--v-offset-${isVertical ? 'left' : 'top'}));`)])])]);
+  });
+})]);
+
+function getArrowOffset(placement) {
+  return ['top', 'bottom'].includes(placement.split('-')[0]) ? 'var(--n-arrow-offset)' : 'var(--n-arrow-offset-vertical)';
+}
 
 function placementStyle(placement, arrowStyleLiteral) {
   const position = placement.split('-')[0];

package/es/radio/src/Radio.d.ts

@@ -25,6 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     theme: import("vue").PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -61,6 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -97,6 +99,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -135,6 +138,7 @@ declare const _default: import("vue").DefineComponent<{
 }, import("./use-radio").UseRadio & {
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
+        '--n-label-line-height': string;
         '--n-box-shadow': string;
         '--n-box-shadow-active': string;
         '--n-box-shadow-disabled': string;
@@ -176,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     theme: import("vue").PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -212,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -248,6 +254,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;

package/es/radio/src/Radio.js

@@ -1,6 +1,6 @@
 import { h, defineComponent, computed } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { createKey } from '../../_utils';
+import { createKey, resolveWrappedSlot } from '../../_utils';
 import { radioLight } from '../styles';
 import useRadio from './use-radio';
 import style from './styles/radio.cssr';
@@ -12,9 +12,10 @@ export default defineComponent({
         const themeRef = useTheme('Radio', '-radio', style, radioLight, props, radio.mergedClsPrefix);
         const cssVarsRef = computed(() => {
             const { mergedSize: { value: size } } = radio;
-            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, labelLineHeight, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
+                '--n-label-line-height': labelLineHeight,
                 '--n-box-shadow': boxShadow,
                 '--n-box-shadow-active': boxShadowActive,
                 '--n-box-shadow-disabled': boxShadowDisabled,
@@ -54,10 +55,16 @@ export default defineComponent({
                 }
             ], style: this.cssVars },
             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 }),
-            h("div", { class: [
-                    `${mergedClsPrefix}-radio__dot`,
-                    this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
-                ] }),
-            $slots.default ? (h("div", { ref: "labelRef", class: `${mergedClsPrefix}-radio__label` }, $slots.default())) : null));
+            h("div", { class: `${mergedClsPrefix}-radio__dot-wrapper` },
+                "\u00A0",
+                h("div", { class: [
+                        `${mergedClsPrefix}-radio__dot`,
+                        this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
+                    ] })),
+            resolveWrappedSlot($slots.default, (children) => {
+                if (!children)
+                    return null;
+                return (h("div", { ref: "labelRef", class: `${mergedClsPrefix}-radio__label` }, children));
+            })));
     }
 });

package/es/radio/src/RadioGroup.d.ts

@@ -16,6 +16,7 @@ declare const radioGroupProps: {
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -52,6 +53,7 @@ declare const radioGroupProps: {
         labelPadding: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -88,6 +90,7 @@ declare const radioGroupProps: {
         labelPadding: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -140,6 +143,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -176,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -212,6 +217,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -286,6 +292,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -322,6 +329,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;
@@ -358,6 +366,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;

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

@@ -14,18 +14,22 @@ import { c, cE, cM, cNotM, cB } from '../../../_utils/cssr'; // vars:
 // --n-text-color
 // --n-text-color-disabled
 // --n-label-padding
+// --n-label-line-height
 
 export default cB('radio', `
- line-height: 1;
+ line-height: var(--n-label-line-height);
  outline: none;
  position: relative;
  user-select: none;
  display: inline-flex;
- vertical-align: middle;
- align-items: center;
+ align-items: flex-start;
+ flex-wrap: nowrap;
  font-size: var(--n-font-size);
-`, [cE('dot', `
- height: var(--n-radio-size);
+ word-break: break-word;
+`, [cE('dot-wrapper', `
+ position: relative;
+ flex-shrink: 0;
+ flex-grow: 0;
  width: var(--n-radio-size);
  `), cB('radio-input', `
  position: absolute;
@@ -39,13 +43,18 @@ export default cB('radio', `
  z-index: 1;
  cursor: pointer;
  `), cE('dot', `
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ height: var(--n-radio-size);
+ width: var(--n-radio-size);
  background: var(--n-color);
  box-shadow: var(--n-box-shadow);
+ border-radius: 50%;
  transition:
  background-color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier);
- position: relative;
- border-radius: 50%;
  `, [c('&::before', `
  content: "";
  opacity: 0;
@@ -70,7 +79,6 @@ export default cB('radio', `
  color: var(--n-text-color);
  padding: var(--n-label-padding);
  display: inline-block;
- white-space: nowrap;
  transition: color .3s var(--n-bezier);
  `), cNotM('disabled', `
  cursor: pointer;
@@ -86,7 +94,6 @@ export default cB('radio', `
 }, [c('&::before', {
   backgroundColor: 'var(--n-dot-color-disabled)'
 }), cM('checked', `
- transform: scale(1);
  opacity: 1;
  `)]), cE('label', {
   color: 'var(--n-text-color-disabled)'

package/es/radio/styles/dark.js

@@ -5,8 +5,8 @@ const radioDark = {
     name: 'Radio',
     common: commonDark,
     self(vars) {
-        const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge } = vars;
-        return Object.assign(Object.assign({}, commonVariables), { buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
+        const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
+        return Object.assign(Object.assign({}, commonVariables), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
             fontSizeMedium,
             fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled: textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled: opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
     }

package/es/radio/styles/light.d.ts

@@ -1,6 +1,7 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { Theme } from '../../_mixins/use-theme';
 declare const self: (vars: ThemeCommonVars) => {
+    labelLineHeight: string;
     buttonHeightSmall: string;
     buttonHeightMedium: string;
     buttonHeightLarge: string;

package/es/radio/styles/light.js

@@ -2,8 +2,8 @@ import { changeColor } from 'seemly';
 import commonVariables from './_common';
 import { commonLight } from '../../_styles/common';
 const self = (vars) => {
-    const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
+    const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled: textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled: opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
 };

package/es/scrollbar/src/ScrollBar.d.ts

@@ -47,6 +47,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/es/select/src/Select.d.ts

@@ -1292,7 +1292,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cssVars: import("vue").ComputedRef<{
         '--n-menu-box-shadow': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     focus: () => void;
     blur: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{