naive-ui 2.25.4 → 2.25.7

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

@@ -267,6 +267,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;

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

@@ -279,6 +279,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;

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

@@ -260,6 +260,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -359,6 +360,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

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

@@ -160,6 +160,7 @@ declare const cascaderLight: import("../../_mixins").Theme<"Cascader", {
         colorHover: string;
     }, any>;
     Checkbox: import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;

package/lib/checkbox/src/Checkbox.d.ts

@@ -35,6 +35,7 @@ declare const checkboxProps: {
     privateInsideTable: BooleanConstructor;
     onChange: PropType<MaybeArray<OnUpdateChecked>>;
     theme: PropType<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -63,6 +64,7 @@ declare const checkboxProps: {
         labelPadding: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -91,6 +93,7 @@ declare const checkboxProps: {
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -154,6 +157,7 @@ declare const _default: import("vue").DefineComponent<{
     privateInsideTable: BooleanConstructor;
     onChange: PropType<MaybeArray<OnUpdateChecked>>;
     theme: PropType<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -182,6 +186,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -210,6 +215,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -238,6 +244,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
 }, import("../../_mixins/use-form-item").UseFormItem<"small" | "medium" | "large"> & CheckboxInst & {
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     selfRef: import("vue").Ref<HTMLDivElement | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
@@ -347,6 +354,7 @@ declare const _default: import("vue").DefineComponent<{
             name: "common";
         };
         self: {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -384,6 +392,7 @@ declare const _default: import("vue").DefineComponent<{
     handleKeyUp: (e: KeyboardEvent) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     cssVars: import("vue").ComputedRef<{
+        '--n-label-line-height': string;
         '--n-size': string;
         '--n-bezier': string;
         '--n-border-radius': string;
@@ -444,6 +453,7 @@ declare const _default: import("vue").DefineComponent<{
     privateInsideTable: BooleanConstructor;
     onChange: PropType<MaybeArray<OnUpdateChecked>>;
     theme: PropType<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -472,6 +482,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -500,6 +511,7 @@ declare const _default: import("vue").DefineComponent<{
         labelPadding: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;

package/lib/checkbox/src/Checkbox.js

@@ -15,6 +15,7 @@ const CheckMark_1 = __importDefault(require("./CheckMark"));
 const LineMark_1 = __importDefault(require("./LineMark"));
 const CheckboxGroup_1 = require("./CheckboxGroup");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const checkboxProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: String, checked: {
         type: [Boolean, String, Number],
         default: undefined
@@ -50,7 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const selfRef = (0, vue_1.ref)(null);
-        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const formItem = (0, _mixins_1.useFormItem)(props, {
             mergedSize(NFormItem) {
                 const { size } = props;
@@ -167,10 +168,12 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const rtlEnabledRef = (0, use_rtl_1.default)('Checkbox', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { value: mergedSize } = mergedSizeRef;
-            const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('size', mergedSize)]: size } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, labelLineHeight, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('size', mergedSize)]: size } } = themeRef.value;
             return {
+                '--n-label-line-height': labelLineHeight,
                 '--n-size': size,
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-border-radius': borderRadius,
@@ -200,6 +203,7 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _mixins_1.useThemeClass)('checkbox', (0, vue_1.computed)(() => mergedSizeRef.value[0]), cssVarsRef, props)
             : undefined;
         return Object.assign(formItem, exposedMethods, {
+            rtlEnabled: rtlEnabledRef,
             selfRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedDisabled: mergedDisabledRef,
@@ -221,6 +225,7 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-checkbox`,
                 this.themeClass,
+                this.rtlEnabled && `${mergedClsPrefix}-checkbox--rtl`,
                 renderedChecked && `${mergedClsPrefix}-checkbox--checked`,
                 mergedDisabled && `${mergedClsPrefix}-checkbox--disabled`,
                 indeterminate && `${mergedClsPrefix}-checkbox--indeterminate`,
@@ -232,11 +237,13 @@ exports.default = (0, vue_1.defineComponent)({
                     once: true
                 });
             } },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box` },
-                (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
-                    default: () => this.indeterminate ? ((0, vue_1.h)("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark_1.default)) : ((0, vue_1.h)("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark_1.default))
-                }),
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box__border` })),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box-wrapper` },
+                "\u00A0",
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box` },
+                    (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
+                        default: () => this.indeterminate ? ((0, vue_1.h)("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark_1.default)) : ((0, vue_1.h)("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark_1.default))
+                    }),
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box__border` }))),
             label !== null || $slots.default ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-checkbox__label`, id: labelId }, $slots.default ? $slots.default() : label)) : null));
     }
 });

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

@@ -13,6 +13,7 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr")); // vars:
+// --n-label-line-height
 // --n-bezier
 // --n-size
 // --n-border
@@ -38,14 +39,14 @@ const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
- line-height: 1;
+ line-height: var(--n-label-line-height);
  font-size: var(--n-font-size);
  outline: none;
  cursor: pointer;
  display: inline-flex;
- align-items: center;
- white-space: nowrap;
- vertical-align: middle;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+ word-break: break-word;
  --n-merged-color-table: var(--n-color-table);
  `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
   border: 'var(--n-border-checked)'
@@ -91,16 +92,23 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
   fill: 'var(--n-check-mark-color-disabled)'
 })])]), (0, cssr_1.cE)('label', {
   color: 'var(--n-text-color-disabled)'
-})]), (0, cssr_1.cB)('checkbox-box', `
+})]), (0, cssr_1.cB)('checkbox-box-wrapper', `
+ position: relative;
+ width: var(--n-size);
+ flex-shrink: 0;
+ flex-grow: 0;
+ `), (0, cssr_1.cB)('checkbox-box', `
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
  height: var(--n-size);
  width: var(--n-size);
  display: inline-block;
  box-sizing: border-box;
  border-radius: var(--n-border-radius);
  background-color: var(--n-color);
- position: relative;
- transition:
- background-color 0.3s var(--n-bezier);
+ transition: background-color 0.3s var(--n-bezier);
  `, [(0, cssr_1.cE)('border', `
  transition:
  border-color .3s var(--n-bezier),

package/lib/checkbox/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/checkbox/src/styles/rtl.cssr.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.cB)('checkbox', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]);

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

@@ -1,3 +1,4 @@
 export { default as checkboxDark } from './dark';
 export { default as checkboxLight } from './light';
+export { checkboxRtl } from './rtl';
 export type { CheckboxThemeVars, CheckboxTheme } from './light';

package/lib/checkbox/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.checkboxLight = exports.checkboxDark = void 0;
+exports.checkboxRtl = exports.checkboxLight = exports.checkboxDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "checkboxDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "checkboxLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "checkboxRtl", { enumerable: true, get: function () { return rtl_1.checkboxRtl; } });

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

@@ -1,6 +1,7 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    labelLineHeight: string;
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;

package/lib/checkbox/styles/light.js

@@ -8,8 +8,8 @@ const seemly_1 = require("seemly");
 const common_1 = require("../../_styles/common");
 const _common_1 = __importDefault(require("./_common"));
 const self = (vars) => {
-    const { baseColor, inputColorDisabled, cardColor, modalColor, popoverColor, textColorDisabled, borderColor, primaryColor, textColor2, fontSizeSmall, fontSizeMedium, fontSizeLarge, borderRadiusSmall } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { fontSizeSmall,
+    const { baseColor, inputColorDisabled, cardColor, modalColor, popoverColor, textColorDisabled, borderColor, primaryColor, textColor2, fontSizeSmall, fontSizeMedium, fontSizeLarge, borderRadiusSmall, lineHeight } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge, borderRadius: borderRadiusSmall, color: baseColor, colorChecked: primaryColor, colorDisabled: inputColorDisabled, colorDisabledChecked: inputColorDisabled, colorTableHeader: cardColor, colorTableHeaderModal: modalColor, colorTableHeaderPopover: popoverColor, checkMarkColor: baseColor, checkMarkColorDisabled: textColorDisabled, checkMarkColorDisabledChecked: textColorDisabled, border: `1px solid ${borderColor}`, borderDisabled: `1px solid ${borderColor}`, borderDisabledChecked: `1px solid ${borderColor}`, borderChecked: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColor}`, boxShadowFocus: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, textColor: textColor2, textColorDisabled: textColorDisabled });
 };

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

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

package/lib/checkbox/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.checkboxRtl = {
+    name: 'Checkbox',
+    style: rtl_cssr_1.default
+};

package/lib/code/src/Code.js

@@ -97,7 +97,9 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? (0, _mixins_1.useThemeClass)('code', undefined, cssVarsRef, props)
+            ? (0, _mixins_1.useThemeClass)('code', (0, vue_1.computed)(() => {
+                return `${props.internalFontSize || 'a'}`;
+            }), cssVarsRef, props)
             : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,

package/lib/collapse/src/Collapse.d.ts

@@ -119,6 +119,7 @@ declare const _default: import("vue").DefineComponent<{
         arrowColor: string;
     }, any>>>;
 }, {
+    rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;

package/lib/collapse/src/Collapse.js

@@ -10,6 +10,7 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { defaultExpandedNames: {
         type: [Array, String],
         default: null
@@ -39,7 +40,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Collapse',
     props: collapseProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const uncontrolledExpandedNamesRef = (0, vue_1.ref)(props.defaultExpandedNames);
         const controlledExpandedNamesRef = (0, vue_1.computed)(() => props.expandedNames);
         const mergedExpandedNamesRef = (0, vooks_1.useMergedState)(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
@@ -104,6 +105,7 @@ exports.default = (0, vue_1.defineComponent)({
             slots,
             toggleItem
         });
+        const rtlEnabledRef = (0, use_rtl_1.default)('Collapse', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
             return {
@@ -121,6 +123,7 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _mixins_1.useThemeClass)('collapse', undefined, cssVarsRef, props)
             : undefined;
         return {
+            rtlEnabled: rtlEnabledRef,
             mergedTheme: themeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
@@ -131,6 +134,10 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         var _a;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return ((0, vue_1.h)("div", { class: [`${this.mergedClsPrefix}-collapse`, this.themeClass], style: this.cssVars }, this.$slots));
+        return ((0, vue_1.h)("div", { class: [
+                `${this.mergedClsPrefix}-collapse`,
+                this.rtlEnabled && `${this.mergedClsPrefix}-collapse--rtl`,
+                this.themeClass
+            ], style: this.cssVars }, this.$slots));
     }
 });

package/lib/collapse/src/CollapseItem.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly name: PropType<string | number>;
     readonly displayDirective: PropType<"show" | "if">;
 }, {
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     collapseSlots: Readonly<{
         [name: string]: import("vue").Slot | undefined;
     }>;

package/lib/collapse/src/CollapseItem.js

@@ -11,6 +11,8 @@ const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const Collapse_1 = require("./Collapse");
 const CollapseItemContent_1 = __importDefault(require("./CollapseItemContent"));
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
+const _mixins_1 = require("../../_mixins");
 const collapseItemProps = {
     title: String,
     name: [String, Number],
@@ -20,6 +22,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'CollapseItem',
     props: collapseItemProps,
     setup(props) {
+        const { mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const randomName = (0, seemly_1.createId)();
         const mergedNameRef = (0, vooks_1.useMemo)(() => {
             var _a;
@@ -42,7 +45,9 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return true;
         });
+        const rtlEnabledRef = (0, use_rtl_1.default)('Collapse', mergedRtlRef, mergedClsPrefixRef);
         return {
+            rtlEnabled: rtlEnabledRef,
             collapseSlots,
             randomName,
             mergedClsPrefix: mergedClsPrefixRef,
@@ -83,8 +88,8 @@ exports.default = (0, vue_1.defineComponent)({
                 ] },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-main`, onClick: this.handleClick },
                     arrowPlacement === 'right' && headerNode,
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item-arrow` }, arrowSlot ? (arrowSlot({ collapsed })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                        default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => (0, vue_1.h)(icons_1.ChevronRightIcon, null))
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1 }, arrowSlot ? (arrowSlot({ collapsed })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                        default: (_a = collapseSlots.expandIcon) !== null && _a !== void 0 ? _a : (() => this.rtlEnabled ? ((0, vue_1.h)(icons_1.ChevronLeftIcon, null)) : ((0, vue_1.h)(icons_1.ChevronRightIcon, null)))
                     }))),
                     arrowPlacement === 'left' && headerNode),
                 headerExtraSlot && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, { default: headerExtraSlot }))),

package/lib/collapse/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/collapse/src/styles/rtl.cssr.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.cB)('collapse', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `, [(0, cssr_1.cB)('collapse-item', [(0, cssr_1.cB)('collapse-item', {
+  marginRight: '32px',
+  marginLeft: 0
+}), (0, cssr_1.cM)('left-arrow-placement', [(0, cssr_1.cE)('header', [(0, cssr_1.cB)('collapse-item-arrow', {
+  marginRight: 0,
+  marginLeft: '4px'
+})])]), (0, cssr_1.cM)('right-arrow-placement', [(0, cssr_1.cE)('header', [(0, cssr_1.cB)('collapse-item-arrow', {
+  marginLeft: 0,
+  marginRight: '4px'
+})])]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('header', [(0, cssr_1.cM)('active', [(0, cssr_1.cB)('collapse-item-arrow', {
+  transform: 'rotate(-90deg)'
+})])])])])])]);

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

@@ -1,3 +1,4 @@
 export { default as collapseDark } from './dark';
 export { default as collapseLight } from './light';
+export { collapseRtl } from './rtl';
 export type { CollapseThemeVars, CollapseTheme } from './light';

package/lib/collapse/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.collapseLight = exports.collapseDark = void 0;
+exports.collapseRtl = exports.collapseLight = exports.collapseDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "collapseDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "collapseLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "collapseRtl", { enumerable: true, get: function () { return rtl_1.collapseRtl; } });

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

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

package/lib/collapse/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.collapseRtl = {
+    name: 'Collapse',
+    style: rtl_cssr_1.default
+};

package/lib/collapse-transition/src/CollapseTransition.d.ts

@@ -47,7 +47,9 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly show: {
         readonly type: BooleanConstructor;

package/lib/collapse-transition/src/CollapseTransition.js

@@ -13,7 +13,7 @@ const collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
         type: Boolean,
         default: true
     }, appear: Boolean, 
-    // The collapsed is implemented will mistake, collapsed=true would make it show
+    // The collapsed is implemented with mistake, collapsed=true would make it show
     // However there's no possibility to change so I just let it deprecated and use
     // `show` prop instead.
     /** @deprecated */
@@ -33,7 +33,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const mergedThemeRef = (0, _mixins_1.useTheme)('CollapseTransition', '-collapse-transition', index_cssr_1.default, styles_1.collapseTransitionLight, props, mergedClsPrefixRef);
         const mergedShowRef = (0, vue_1.computed)(() => {
             if (props.collapsed !== undefined) {
@@ -42,26 +42,39 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return props.show;
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { bezier } } = mergedThemeRef.value;
+            return {
+                '--n-bezier': bezier
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('collapse-transition', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedShow: mergedShowRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { bezier } } = mergedThemeRef.value;
-                return {
-                    '--n-bezier': bezier
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
         return ((0, vue_1.h)(_internal_1.NFadeInExpandTransition, { appear: this.appear }, {
-            default: () => this.mergedShow
-                ? (0, vue_1.h)('div', // Don't use jsx since it would cause useless spread in each rendering
+            default: () => {
+                var _a;
+                if (!this.mergedShow)
+                    return;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return (0, vue_1.h)('div', // Don't use jsx since it would cause useless spread in each rendering
                 (0, vue_1.mergeProps)({
-                    class: `${this.mergedClsPrefix}-collapse-transition`,
+                    class: [
+                        `${this.mergedClsPrefix}-collapse-transition`,
+                        this.themeClass
+                    ],
                     style: this.cssVars
-                }, this.$attrs), this.$slots)
-                : null
+                }, this.$attrs), this.$slots);
+            }
         }));
     }
 });

package/lib/config-provider/src/ConfigProvider.js

@@ -110,6 +110,7 @@ exports.default = (0, vue_1.defineComponent)({
             return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedClsPrefixRef.value;
         });
         const mergedRtlRef = (0, vue_1.computed)(() => {
+            var _a;
             const { rtl } = props;
             if (rtl === undefined) {
                 return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef.value;
@@ -117,6 +118,11 @@ exports.default = (0, vue_1.defineComponent)({
             const rtlEnabledState = {};
             for (const rtlInfo of rtl) {
                 rtlEnabledState[rtlInfo.name] = (0, vue_1.markRaw)(rtlInfo);
+                (_a = rtlInfo.peers) === null || _a === void 0 ? void 0 : _a.forEach((peerRtlInfo) => {
+                    if (!(peerRtlInfo.name in rtlEnabledState)) {
+                        rtlEnabledState[peerRtlInfo.name] = (0, vue_1.markRaw)(peerRtlInfo);
+                    }
+                });
             }
             return rtlEnabledState;
         });

package/lib/config-provider/src/internal-interface.d.ts

@@ -211,6 +211,7 @@ export interface GlobalIconConfig {
 export interface RtlItem {
     name: keyof GlobalThemeWithoutCommon;
     style: CNode;
+    peers?: RtlItem[];
 }
 export declare type RtlProp = RtlItem[];
 export declare type RtlEnabledState = Partial<Record<keyof GlobalThemeWithoutCommon, RtlItem>>;