naive-ui 2.36.0 → 2.37.0

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

@@ -146,20 +146,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  padding-left: var(--n-padding-left);
  padding-right: var(--n-padding-right);
  width: var(--n-width);
+ max-width: calc(100vw - 16px - 16px);
  border-radius: var(--n-border-radius);
  box-shadow: var(--n-box-shadow);
  box-sizing: border-box;
  opacity: 1;
- `, [(0, cssr_1.cE)('avatar', [(0, cssr_1.cB)('icon', {
-  color: 'var(--n-icon-color)'
-}), (0, cssr_1.cB)('base-icon', {
-  color: 'var(--n-icon-color)'
-})]), (0, cssr_1.cM)('show-avatar', [(0, cssr_1.cB)('notification-main', `
+ `, [(0, cssr_1.cE)('avatar', [(0, cssr_1.cB)('icon', `
+ color: var(--n-icon-color);
+ `), (0, cssr_1.cB)('base-icon', `
+ color: var(--n-icon-color);
+ `)]), (0, cssr_1.cM)('show-avatar', [(0, cssr_1.cB)('notification-main', `
  margin-left: 40px;
  width: calc(100% - 40px); 
- `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('notification-main', [(0, cssr_1.c)('> *:first-child', {
-  paddingRight: '20px'
-})]), (0, cssr_1.cE)('close', `
+ `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('notification-main', [(0, cssr_1.c)('> *:first-child', `
+ padding-right: 20px;
+ `)]), (0, cssr_1.cE)('close', `
  position: absolute;
  top: 0;
  right: 0;
@@ -218,9 +219,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  word-wrap: break-word;
  transition: color .3s var(--n-bezier-ease-out);
  color: var(--n-text-color);
- `, [(0, cssr_1.c)('&:first-child', {
-  margin: 0
-})])])])])]);
+ `, [(0, cssr_1.c)('&:first-child', 'margin: 0;')])])])])]);
 function placementTransformStyle(placement) {
   const direction = placement.split('-')[1];
   const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)';

package/lib/pagination/src/Pagination.d.ts

@@ -50,6 +50,10 @@ export declare const paginationProps: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly showQuickJumpDropdown: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -1098,6 +1102,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly showQuickJumpDropdown: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -2868,6 +2876,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly showQuickJumpDropdown: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -3881,5 +3893,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly showQuickJumper: boolean;
     readonly pageSlot: number;
     readonly displayOrder: ("pages" | "size-picker" | "quick-jumper")[];
+    readonly showQuickJumpDropdown: boolean;
 }, {}>;
 export default _default;

package/lib/pagination/src/Pagination.js

@@ -38,7 +38,7 @@ exports.paginationProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     }, selectProps: Object, prev: Function, next: Function, goto: Function, prefix: Function, suffix: Function, label: Function, displayOrder: {
         type: Array,
         default: ['pages', 'size-picker', 'quick-jumper']
-    }, to: _utils_1.useAdjustedTo.propTo, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
+    }, to: _utils_1.useAdjustedTo.propTo, showQuickJumpDropdown: { type: Boolean, default: true }, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
     /** @deprecated */
     onPageSizeChange: [Function, Array], 
     /** @deprecated */
@@ -65,16 +65,7 @@ exports.default = (0, vue_1.defineComponent)({
         const { localeRef } = (0, _mixins_1.useLocale)('Pagination');
         const selfRef = (0, vue_1.ref)(null);
         const uncontrolledPageRef = (0, vue_1.ref)(props.defaultPage);
-        const getDefaultPageSize = () => {
-            const { defaultPageSize } = props;
-            if (defaultPageSize !== undefined)
-                return defaultPageSize;
-            const pageSizeOption = props.pageSizes[0];
-            if (typeof pageSizeOption === 'number')
-                return pageSizeOption;
-            return pageSizeOption.value || 10;
-        };
-        const uncontrolledPageSizeRef = (0, vue_1.ref)(getDefaultPageSize());
+        const uncontrolledPageSizeRef = (0, vue_1.ref)((0, utils_1.getDefaultPageSize)(props));
         const mergedPageRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'page'), uncontrolledPageRef);
         const mergedPageSizeRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'pageSize'), uncontrolledPageSizeRef);
         const mergedPageCountRef = (0, vue_1.computed)(() => {
@@ -120,7 +111,7 @@ exports.default = (0, vue_1.defineComponent)({
         const handleMenuSelect = (value) => {
             doUpdatePage(value);
         };
-        const pageItemsInfo = (0, vue_1.computed)(() => (0, utils_1.createPageItemsInfo)(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot));
+        const pageItemsInfo = (0, vue_1.computed)(() => (0, utils_1.createPageItemsInfo)(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot, props.showQuickJumpDropdown));
         (0, vue_1.watchEffect)(() => {
             if (!pageItemsInfo.value.hasFastBackward) {
                 fastBackwardActiveRef.value = false;
@@ -513,6 +504,9 @@ exports.default = (0, vue_1.defineComponent)({
                                             ? 'fast-backward'
                                             : 'fast-forward'
                                         : pageItem.type;
+                                    if (pageItem.type !== 'page' && !pageItem.options) {
+                                        return itemNode;
+                                    }
                                     return ((0, vue_1.h)(popselect_1.NPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
                                             peers: {
                                                 InternalSelectMenu: {
@@ -542,7 +536,9 @@ exports.default = (0, vue_1.defineComponent)({
                                                 this.showFastBackwardMenu = false;
                                                 this.showFastForwardMenu = false;
                                             }
-                                        }, options: pageItem.type !== 'page' ? pageItem.options : [], onUpdateValue: this.handleMenuSelect, scrollable: true, showCheckmark: false }, { default: () => itemNode }));
+                                        }, options: pageItem.type !== 'page' && pageItem.options
+                                            ? pageItem.options
+                                            : [], onUpdateValue: this.handleMenuSelect, scrollable: true, showCheckmark: false }, { default: () => itemNode }));
                                 }
                             })),
                             (0, vue_1.h)("div", { class: [

package/lib/pagination/src/utils.d.ts

@@ -1,4 +1,6 @@
-declare function createPageItemsInfo(currentPage: number, pageCount: number, pageSlot: number): {
+import type { PaginationProps } from './Pagination';
+export declare const getDefaultPageSize: (paginationProps: PaginationProps | false) => number;
+declare function createPageItemsInfo(currentPage: number, pageCount: number, pageSlot: number, showQuickJumpDropdown: boolean): {
     hasFastBackward: boolean;
     hasFastForward: boolean;
     fastBackwardTo: number;
@@ -12,7 +14,7 @@ export type PageItem = {
     options: Array<{
         label: string;
         value: number;
-    }>;
+    }> | null;
 } | {
     type: 'page';
     label: number;

package/lib/pagination/src/utils.js

@@ -1,7 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPageItemsInfo = void 0;
-function createPageItemsInfo(currentPage, pageCount, pageSlot) {
+exports.createPageItemsInfo = exports.getDefaultPageSize = void 0;
+const getDefaultPageSize = (paginationProps) => {
+    var _a;
+    if (!paginationProps)
+        return 10;
+    const { defaultPageSize } = paginationProps;
+    if (defaultPageSize !== undefined)
+        return defaultPageSize;
+    const pageSizeOption = (_a = paginationProps.pageSizes) === null || _a === void 0 ? void 0 : _a[0];
+    if (typeof pageSizeOption === 'number')
+        return pageSizeOption;
+    return (pageSizeOption === null || pageSizeOption === void 0 ? void 0 : pageSizeOption.value) || 10;
+};
+exports.getDefaultPageSize = getDefaultPageSize;
+function createPageItemsInfo(currentPage, pageCount, pageSlot, showQuickJumpDropdown) {
     let hasFastBackward = false;
     let hasFastForward = false;
     let fastBackwardTo = 1;
@@ -77,7 +90,9 @@ function createPageItemsInfo(currentPage, pageCount, pageSlot) {
             type: 'fast-backward',
             active: false,
             label: undefined,
-            options: createRange(firstPage + 1, middleStart - 1)
+            options: showQuickJumpDropdown
+                ? createRange(firstPage + 1, middleStart - 1)
+                : null
         });
     }
     else if (lastPage >= firstPage + 1) {
@@ -105,7 +120,9 @@ function createPageItemsInfo(currentPage, pageCount, pageSlot) {
             type: 'fast-forward',
             active: false,
             label: undefined,
-            options: createRange(middleEnd + 1, lastPage - 1)
+            options: showQuickJumpDropdown
+                ? createRange(middleEnd + 1, lastPage - 1)
+                : null
         });
     }
     else if (middleEnd === lastPage - 2 &&

package/lib/pagination/styles/rtl.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.paginationRtl = void 0;
 const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
 const rtl_1 = require("../../input/styles/rtl");
+const styles_1 = require("../../select/styles");
 exports.paginationRtl = {
     name: 'Pagination',
     style: rtl_cssr_1.default,
-    peers: [rtl_1.inputRtl]
+    peers: [rtl_1.inputRtl, styles_1.selectRtl]
 };

package/lib/popselect/src/PopselectPanel.js

@@ -78,7 +78,7 @@ exports.default = (0, vue_1.defineComponent)({
             toggle(tmNode.key);
         }
         function handleMenuMousedown(e) {
-            if (!(0, seemly_1.happensIn)(e, 'action'))
+            if (!(0, seemly_1.happensIn)(e, 'action') && !(0, seemly_1.happensIn)(e, 'empty'))
                 e.preventDefault();
         }
         function toggle(value) {

package/lib/qr-code/src/QrCode.d.ts

@@ -142,8 +142,8 @@ declare const _default: import("vue").DefineComponent<{
         borderRadius: string;
     }, any>>>;
 }>>, {
-    readonly color: string;
     readonly size: number;
+    readonly color: string;
     readonly backgroundColor: string;
     readonly padding: string | number;
     readonly iconSize: number;

package/lib/radio/src/Radio.js

@@ -60,12 +60,10 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("label", { class: [
                 `${mergedClsPrefix}-radio`,
                 this.themeClass,
-                {
-                    [`${mergedClsPrefix}-radio--rtl`]: this.rtlEnabled,
-                    [`${mergedClsPrefix}-radio--disabled`]: this.mergedDisabled,
-                    [`${mergedClsPrefix}-radio--checked`]: this.renderSafeChecked,
-                    [`${mergedClsPrefix}-radio--focus`]: this.focus
-                }
+                this.rtlEnabled && `${mergedClsPrefix}-radio--rtl`,
+                this.mergedDisabled && `${mergedClsPrefix}-radio--disabled`,
+                this.renderSafeChecked && `${mergedClsPrefix}-radio--checked`,
+                this.focus && `${mergedClsPrefix}-radio--focus`
             ], 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-wrapper` },

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

@@ -40,7 +40,6 @@ export interface UseRadio {
     labelRef: Ref<HTMLElement | null>;
     mergedName: Ref<string | undefined>;
     mergedDisabled: Ref<boolean>;
-    uncontrolledChecked: Ref<boolean>;
     renderSafeChecked: Ref<boolean>;
     focus: Ref<boolean>;
     mergedSize: ComputedRef<'small' | 'medium' | 'large'>;

package/lib/radio/src/use-radio.js

@@ -112,6 +112,12 @@ function setup(props) {
     }
     function handleRadioInputChange() {
         toggle();
+        // Restore element check prop's value to current state, since if doesn't
+        // reflect current VNode. If not, bug will happens in component with element
+        // that has internal state such as <input />.
+        if (inputRef.value) {
+            inputRef.value.checked = renderSafeCheckedRef.value;
+        }
     }
     function handleRadioInputBlur() {
         focusRef.value = false;
@@ -127,7 +133,6 @@ function setup(props) {
         labelRef,
         mergedName: mergedNameRef,
         mergedDisabled: mergedDisabledRef,
-        uncontrolledChecked: uncontrolledCheckedRef,
         renderSafeChecked: renderSafeCheckedRef,
         focus: focusRef,
         mergedSize: mergedSizeRef,

package/lib/result/src/Result.d.ts

@@ -285,7 +285,7 @@ declare const _default: import("vue").DefineComponent<{
         iconColor500: undefined;
     }, any>>>;
 }>>, {
-    status: "500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418";
     size: "small" | "medium" | "large" | "huge";
+    status: "500" | "error" | "info" | "success" | "warning" | "404" | "403" | "418";
 }, {}>;
 export default _default;

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

@@ -6,6 +6,7 @@ import { type RenderTag } from '../../_internal/selection/src/interface';
 import type { FormValidationStatus } from '../../form/src/interface';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { SelectMixedOption, SelectOption, SelectGroupOption, SelectIgnoredOption, SelectFallbackOption, OnUpdateValue, Value, Size, ValueAtom, SelectBaseOption, SelectFilter } from './interface';
+import { type PopoverProps } from '../../popover';
 export declare const selectProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -68,6 +69,7 @@ export declare const selectProps: {
         readonly default: true;
     };
     readonly maxTagCount: PropType<number | "responsive">;
+    readonly ellipsisTagPopoverProps: PropType<PopoverProps>;
     readonly consistentMenuWidth: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -565,6 +567,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly maxTagCount: PropType<number | "responsive">;
+    readonly ellipsisTagPopoverProps: PropType<PopoverProps>;
     readonly consistentMenuWidth: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -1401,6 +1404,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly maxTagCount: PropType<number | "responsive">;
+    readonly ellipsisTagPopoverProps: PropType<PopoverProps>;
     readonly consistentMenuWidth: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -1843,6 +1847,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly loading: boolean;
     readonly to: string | boolean | HTMLElement;
     readonly bordered: boolean | undefined;
+    readonly filterable: boolean;
     readonly placement: FollowerPlacement;
     readonly showCheckmark: boolean;
     readonly labelField: string;
@@ -1851,7 +1856,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly resetMenuOnOptionsChange: boolean;
     readonly showArrow: boolean;
     readonly displayDirective: "show" | "if";
-    readonly filterable: boolean;
     readonly clearable: boolean;
     readonly ignoreComposition: boolean;
     readonly clearFilterAfterSelect: boolean;

package/lib/select/src/Select.js

@@ -49,7 +49,7 @@ exports.selectProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, showArrow: {
         type: Boolean,
         default: true
-    }, maxTagCount: [Number, String], consistentMenuWidth: {
+    }, maxTagCount: [Number, String], ellipsisTagPopoverProps: Object, consistentMenuWidth: {
         type: Boolean,
         default: true
     }, virtualScroll: {
@@ -669,7 +669,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
-                        default: () => ((0, vue_1.h)(_internal_1.NInternalSelection, { ref: "triggerRef", inlineThemeDisabled: this.inlineThemeDisabled, status: this.mergedStatus, inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, active: this.activeWithoutMenuOpen || this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, labelField: this.labelField, valueField: this.valueField, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeydown, onPatternBlur: this.onTriggerInputBlur, onPatternFocus: this.onTriggerInputFocus, onResize: this.handleTriggerOrMenuResize, ignoreComposition: this.ignoreComposition }, {
+                        default: () => ((0, vue_1.h)(_internal_1.NInternalSelection, { ref: "triggerRef", inlineThemeDisabled: this.inlineThemeDisabled, status: this.mergedStatus, inputProps: this.inputProps, clsPrefix: this.mergedClsPrefix, showArrow: this.showArrow, maxTagCount: this.maxTagCount, ellipsisTagPopoverProps: this.ellipsisTagPopoverProps, bordered: this.mergedBordered, active: this.activeWithoutMenuOpen || this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, renderTag: this.renderTag, renderLabel: this.renderLabel, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, labelField: this.labelField, valueField: this.valueField, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, loading: this.loading, focused: this.focused, onClick: this.handleTriggerClick, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onBlur: this.handleTriggerBlur, onFocus: this.handleTriggerFocus, onKeydown: this.handleKeydown, onPatternBlur: this.onTriggerInputBlur, onPatternFocus: this.onTriggerInputFocus, onResize: this.handleTriggerOrMenuResize, ignoreComposition: this.ignoreComposition }, {
                             arrow: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
                         }))
                     }),
@@ -689,6 +689,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     ], clsPrefix: this.mergedClsPrefix, focusable: true, labelField: this.labelField, valueField: this.valueField, autoPending: true, nodeProps: this.nodeProps, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
                                         .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: "medium", renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_c = this.menuProps) === null || _c === void 0 ? void 0 : _c.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, showCheckmark: this.showCheckmark, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
                                     empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
+                                    header: () => { var _a, _b; return [(_b = (_a = this.$slots).header) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
                                     action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
                                 }), this.displayDirective === 'show'
                                     ? [

package/lib/select/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as selectDark } from './dark';
 export { default as selectLight } from './light';
+export { selectRtl } from './rtl';
 export type { SelectTheme, SelectThemeVars } from './light';

package/lib/select/styles/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectLight = exports.selectDark = void 0;
+exports.selectRtl = exports.selectLight = exports.selectDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "selectDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "selectLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "selectRtl", { enumerable: true, get: function () { return rtl_1.selectRtl; } });

package/lib/select/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const selectRtl: RtlItem;

package/lib/select/styles/rtl.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectRtl = void 0;
+const styles_1 = require("../../_internal/select-menu/styles");
+const styles_2 = require("../../_internal/selection/styles");
+const styles_3 = require("../../_internal/scrollbar/styles");
+const styles_4 = require("../../tag/styles");
+const cssr_1 = require("../../_utils/cssr");
+exports.selectRtl = {
+    name: 'Select',
+    style: (0, cssr_1.c)([]),
+    peers: [styles_2.internalSelectionRtl, styles_1.internalSelectMenuRtl, styles_4.tagRtl, styles_3.scrollbarRtl]
+};

package/lib/slider/src/Slider.d.ts

@@ -316,7 +316,7 @@ declare const _default: import("vue").DefineComponent<{
     getHandleStyle: (value: number, index: number) => Record<string, any>;
     activeIndex: import("vue").Ref<number>;
     arrifiedValues: import("vue").ComputedRef<number[]>;
-    followerEnabledIndexSet: import("vue").Ref<Set<number>>;
+    followerEnabledIndexSet: import("vue").Ref<Set<number> & Omit<Set<number>, keyof Set<any>>>;
     handleRailMouseDown: (event: MouseEvent | TouchEvent) => void;
     handleHandleFocus: (index: number) => void;
     handleHandleBlur: (index: number) => void;

package/lib/space/src/Space.d.ts

@@ -10,6 +10,7 @@ export declare const spaceProps: {
     };
     readonly inline: BooleanConstructor;
     readonly vertical: BooleanConstructor;
+    readonly reverse: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
         readonly default: "medium";
@@ -53,6 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly inline: BooleanConstructor;
     readonly vertical: BooleanConstructor;
+    readonly reverse: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
         readonly default: "medium";
@@ -102,6 +104,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly inline: BooleanConstructor;
     readonly vertical: BooleanConstructor;
+    readonly reverse: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
         readonly default: "medium";
@@ -138,6 +141,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly inline: boolean;
     readonly size: number | [number, number] | "small" | "medium" | "large";
+    readonly reverse: boolean;
     readonly wrap: boolean;
     readonly vertical: boolean;
     readonly justify: Justify;

package/lib/space/src/Space.js

@@ -11,7 +11,7 @@ const utils_1 = require("./utils");
 exports.spaceProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { align: String, justify: {
         type: String,
         default: 'start'
-    }, inline: Boolean, vertical: Boolean, size: {
+    }, inline: Boolean, vertical: Boolean, reverse: Boolean, size: {
         type: [String, Number, Array],
         default: 'medium'
     }, wrapItem: {
@@ -61,8 +61,8 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { vertical, align, inline, justify, itemClass, itemStyle, margin, wrap, mergedClsPrefix, rtlEnabled, useGap, wrapItem, internalUseGap } = this;
-        const children = (0, _utils_1.flatten)((0, _utils_1.getSlot)(this));
+        const { vertical, reverse, align, inline, justify, itemClass, itemStyle, margin, wrap, mergedClsPrefix, rtlEnabled, useGap, wrapItem, internalUseGap } = this;
+        const children = (0, _utils_1.flatten)((0, _utils_1.getSlot)(this), false);
         if (!children.length)
             return null;
         const horizontalMargin = `${margin.horizontal}px`;
@@ -76,7 +76,16 @@ exports.default = (0, vue_1.defineComponent)({
                 rtlEnabled && `${mergedClsPrefix}-space--rtl`
             ], style: {
                 display: inline ? 'inline-flex' : 'flex',
-                flexDirection: vertical ? 'column' : 'row',
+                flexDirection: (() => {
+                    if (vertical && !reverse)
+                        return 'column';
+                    if (vertical && reverse)
+                        return 'column-reverse';
+                    if (!vertical && reverse)
+                        return 'row-reverse';
+                    /** (!vertical && !reverse) */ else
+                        return 'row';
+                })(),
                 justifyContent: ['start', 'end'].includes(justify)
                     ? 'flex-' + justify
                     : justify,
@@ -87,7 +96,7 @@ exports.default = (0, vue_1.defineComponent)({
                 gap: useGap ? `${margin.vertical}px ${margin.horizontal}px` : ''
             } }, !wrapItem && (useGap || internalUseGap)
             ? children
-            : children.map((child, index) => ((0, vue_1.h)("div", { role: "none", class: itemClass, style: [
+            : children.map((child, index) => child.type === vue_1.Comment ? (child) : ((0, vue_1.h)("div", { role: "none", class: itemClass, style: [
                     itemStyle,
                     {
                         maxWidth: '100%'
@@ -101,7 +110,8 @@ exports.default = (0, vue_1.defineComponent)({
                             : rtlEnabled
                                 ? {
                                     marginLeft: isJustifySpace
-                                        ? justify === 'space-between' && index === lastIndex
+                                        ? justify === 'space-between' &&
+                                            index === lastIndex
                                             ? ''
                                             : semiHorizontalMargin
                                         : index !== lastIndex
@@ -117,7 +127,8 @@ exports.default = (0, vue_1.defineComponent)({
                                 }
                                 : {
                                     marginRight: isJustifySpace
-                                        ? justify === 'space-between' && index === lastIndex
+                                        ? justify === 'space-between' &&
+                                            index === lastIndex
                                             ? ''
                                             : semiHorizontalMargin
                                         : index !== lastIndex

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

@@ -19,9 +19,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes spin-rotate', `
  to {
  transform: rotate(360deg);
  }
- `), (0, cssr_1.cB)('spin-container', {
-  position: 'relative'
-}, [(0, cssr_1.cB)('spin-body', `
+ `), (0, cssr_1.cB)('spin-container', `
+ position: relative;
+ `, [(0, cssr_1.cB)('spin-body', `
  position: absolute;
  top: 50%;
  left: 50%;

package/lib/split/src/Split.d.ts

@@ -27,12 +27,15 @@ export declare const splitProps: {
     readonly onDragEnd: PropType<(e: Event) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>>;
 };
 export type SplitProps = ExtractPublicPropTypes<typeof splitProps>;
@@ -63,15 +66,19 @@ declare const _default: import("vue").DefineComponent<{
     readonly onDragEnd: PropType<(e: Event) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>>;
 }, {
     cssVars: import("vue").ComputedRef<{
+        '--n-resize-trigger-color': string;
         '--n-resize-trigger-color-hover': string;
     }> | undefined;
     resizeTriggerElRef: import("vue").Ref<HTMLElement | null>;
@@ -117,12 +124,15 @@ declare const _default: import("vue").DefineComponent<{
     readonly onDragEnd: PropType<(e: Event) => void>;
     readonly theme: PropType<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Split", {
         resizableTriggerColorHover: string;
+        resizableTriggerColor: string;
     }, any>>>;
 }>>, {
     readonly direction: "horizontal" | "vertical";

package/lib/split/src/Split.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.splitProps = void 0;
 const vue_1 = require("vue");
+const evtd_1 = require("evtd");
 const _utils_1 = require("../../_utils");
 const use_config_1 = __importDefault(require("../../_mixins/use-config"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
-const evtd_1 = require("evtd");
 exports.splitProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { direction: {
         type: String,
         default: 'horizontal'
@@ -34,8 +34,9 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, use_config_1.default)(props);
         const themeRef = (0, _mixins_1.useTheme)('Split', '-split', index_cssr_1.default, styles_1.splitLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { self: { resizableTriggerColorHover } } = themeRef.value;
+            const { self: { resizableTriggerColor, resizableTriggerColorHover } } = themeRef.value;
             return {
+                '--n-resize-trigger-color': resizableTriggerColor,
                 '--n-resize-trigger-color-hover': resizableTriggerColorHover
             };
         });

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

@@ -2,6 +2,7 @@ import type { ThemeCommonVars } from '../../_styles/common';
 import { type Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
     resizableTriggerColorHover: string;
+    resizableTriggerColor: string;
 };
 export type SplitThemeVars = ReturnType<typeof self>;
 declare const themeLight: Theme<'Split', SplitThemeVars>;

package/lib/split/styles/light.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { primaryColorHover } = vars;
+    const { primaryColorHover, borderColor } = vars;
     return {
-        resizableTriggerColorHover: primaryColorHover
+        resizableTriggerColorHover: primaryColorHover,
+        resizableTriggerColor: borderColor
     };
 };
 exports.self = self;