naive-ui 2.23.1 → 2.24.2

package/lib/code/src/Code.d.ts

@@ -14,6 +14,7 @@ declare const codeProps: {
     hljs: PropType<Hljs>;
     uri: BooleanConstructor;
     inline: BooleanConstructor;
+    wordWrap: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -73,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     hljs: PropType<Hljs>;
     uri: BooleanConstructor;
     inline: BooleanConstructor;
+    wordWrap: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -121,41 +123,38 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     codeRef: import("vue").Ref<HTMLElement | null>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--font-family': string;
-        '--font-weight-strong': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--mono-3': string;
-        '--hue-1': string;
-        '--hue-2': string;
-        '--hue-3': string;
-        '--hue-4': string;
-        '--hue-5': string;
-        '--hue-5-2': string;
-        '--hue-6': string;
-        '--hue-6-2': string;
+        '--n-font-size': string;
+        '--n-font-family': string;
+        '--n-font-weight-strong': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-mono-3': string;
+        '--n-hue-1': string;
+        '--n-hue-2': string;
+        '--n-hue-3': string;
+        '--n-hue-4': string;
+        '--n-hue-5': string;
+        '--n-hue-5-2': string;
+        '--n-hue-6': string;
+        '--n-hue-6-2': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    language?: unknown;
-    code?: unknown;
-    trim?: unknown;
-    hljs?: unknown;
-    uri?: unknown;
-    inline?: unknown;
-    internalFontSize?: unknown;
-    internalNoHighlight?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    inline: boolean;
-    trim: boolean;
-    code: string;
-    uri: boolean;
-    internalNoHighlight: boolean;
-} & {
-    theme?: import("../../_mixins").Theme<"Code", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    language: StringConstructor;
+    code: {
+        type: StringConstructor;
+        default: string;
+    };
+    trim: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hljs: PropType<Hljs>;
+    uri: BooleanConstructor;
+    inline: BooleanConstructor;
+    wordWrap: BooleanConstructor;
+    internalFontSize: NumberConstructor;
+    internalNoHighlight: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Code", {
         textColor: string;
         fontSize: string;
         fontWeightStrong: string;
@@ -168,8 +167,8 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
         textColor: string;
         fontSize: string;
         fontWeightStrong: string;
@@ -182,8 +181,8 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
         textColor: string;
         fontSize: string;
         fontWeightStrong: string;
@@ -196,13 +195,11 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
-    }, any>> | undefined;
-    hljs?: Hljs | undefined;
-    language?: string | undefined;
-    internalFontSize?: number | undefined;
-}>, {
-    inline: boolean;
+    }, any>>>;
+}>>, {
     trim: boolean;
+    inline: boolean;
+    wordWrap: boolean;
     code: string;
     uri: boolean;
     internalNoHighlight: boolean;

package/lib/code/src/Code.js

@@ -13,7 +13,7 @@ const codeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { l
     }, trim: {
         type: Boolean,
         default: true
-    }, hljs: Object, uri: Boolean, inline: Boolean, 
+    }, hljs: Object, uri: Boolean, inline: Boolean, wordWrap: Boolean, 
     // In n-log, we only need to mount code's style for highlight
     internalFontSize: Number, internalNoHighlight: Boolean });
 exports.default = (0, vue_1.defineComponent)({
@@ -57,9 +57,16 @@ exports.default = (0, vue_1.defineComponent)({
                 codeEl.textContent = code;
                 return;
             }
-            const warp = document.createElement('pre');
-            warp.textContent = code;
-            codeEl.appendChild(warp);
+            const maybePreEl = codeEl.children[0];
+            if (maybePreEl && maybePreEl.tagName === 'PRE') {
+                maybePreEl.textContent = code;
+            }
+            else {
+                const warp = document.createElement('pre');
+                warp.textContent = code;
+                codeEl.innerHTML = '';
+                codeEl.appendChild(warp);
+            }
         };
         (0, vue_1.onMounted)(setCode);
         (0, vue_1.watch)((0, vue_1.toRef)(props, 'language'), setCode);
@@ -76,26 +83,31 @@ exports.default = (0, vue_1.defineComponent)({
                 'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
                 const { internalFontSize } = props;
                 return {
-                    '--font-size': internalFontSize ? `${internalFontSize}px` : fontSize,
-                    '--font-family': fontFamilyMono,
-                    '--font-weight-strong': fontWeightStrong,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--mono-3': $1,
-                    '--hue-1': $2,
-                    '--hue-2': $3,
-                    '--hue-3': $4,
-                    '--hue-4': $5,
-                    '--hue-5': $6,
-                    '--hue-5-2': $7,
-                    '--hue-6': $8,
-                    '--hue-6-2': $9
+                    '--n-font-size': internalFontSize
+                        ? `${internalFontSize}px`
+                        : fontSize,
+                    '--n-font-family': fontFamilyMono,
+                    '--n-font-weight-strong': fontWeightStrong,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-mono-3': $1,
+                    '--n-hue-1': $2,
+                    '--n-hue-2': $3,
+                    '--n-hue-3': $4,
+                    '--n-hue-4': $5,
+                    '--n-hue-5': $6,
+                    '--n-hue-5-2': $7,
+                    '--n-hue-6': $8,
+                    '--n-hue-6-2': $9
                 };
             })
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
-        return ((0, vue_1.h)("code", { class: `${mergedClsPrefix}-code`, style: this.cssVars, ref: "codeRef" }, this.$slots));
+        const { mergedClsPrefix, wordWrap } = this;
+        return ((0, vue_1.h)("code", { class: [
+                `${mergedClsPrefix}-code`,
+                wordWrap && `${mergedClsPrefix}-code--word-wrap`
+            ], style: this.cssVars, ref: "codeRef" }, this.$slots));
     }
 });

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

@@ -5,33 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --font-size
-// --font-family
-// --font-weight-strong
-// --bezier
-// --text-color
-// --mono-3
-// --hue-1
-// --hue-2
-// --hue-3
-// --hue-4
-// --hue-5
-// --hue-5-2
-// --hue-6
-// --hue-6-2
+// --n-font-size
+// --n-font-family
+// --n-font-weight-strong
+// --n-bezier
+// --n-text-color
+// --n-mono-3
+// --n-hue-1
+// --n-hue-2
+// --n-hue-3
+// --n-hue-4
+// --n-hue-5
+// --n-hue-5-2
+// --n-hue-6
+// --n-hue-6-2
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('code', `
- font-size: var(--font-size);
- font-family: var(--font-family);
- `, [(0, cssr_1.c)('pre', `
+ font-size: var(--n-font-size);
+ font-family: var(--n-font-family);
+ `, [(0, cssr_1.cM)('word-wrap', [(0, cssr_1.c)('pre', `
+ white-space: pre-wrap;
+ word-break: break-all;
+ `)]), (0, cssr_1.c)('pre', `
  margin: 0;
  font-family: inherit;
  `), (0, cssr_1.c)('[class^=hljs]', `
- color: var(--text-color);
+ color: var(--n-text-color);
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `)]), ({
   props
 }) => {
@@ -39,29 +42,29 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('code', `
   const codeClass = `${props.bPrefix}code`;
   return [`${codeClass} .hljs-comment,
  ${codeClass} .hljs-quote {
- color: var(--mono-3);
+ color: var(--n-mono-3);
  font-style: italic;
  }`, `${codeClass} .hljs-doctag,
  ${codeClass} .hljs-keyword,
  ${codeClass} .hljs-formula {
- color: var(--hue-3);
+ color: var(--n-hue-3);
  }`, `${codeClass} .hljs-section,
  ${codeClass} .hljs-name,
  ${codeClass} .hljs-selector-tag,
  ${codeClass} .hljs-deletion,
  ${codeClass} .hljs-subst {
- color: var(--hue-5);
+ color: var(--n-hue-5);
  }`, `${codeClass} .hljs-literal {
- color: var(--hue-1);
+ color: var(--n-hue-1);
  }`, `${codeClass} .hljs-string,
  ${codeClass} .hljs-regexp,
  ${codeClass} .hljs-addition,
  ${codeClass} .hljs-attribute,
  ${codeClass} .hljs-meta-string {
- color: var(--hue-4);
+ color: var(--n-hue-4);
  }`, `${codeClass} .hljs-built_in,
  ${codeClass} .hljs-class .hljs-title {
- color: var(--hue-6-2);
+ color: var(--n-hue-6-2);
  }`, `${codeClass} .hljs-attr,
  ${codeClass} .hljs-variable,
  ${codeClass} .hljs-template-variable,
@@ -70,18 +73,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('code', `
  ${codeClass} .hljs-selector-attr,
  ${codeClass} .hljs-selector-pseudo,
  ${codeClass} .hljs-number {
- color: var(--hue-6);
+ color: var(--n-hue-6);
  }`, `${codeClass} .hljs-symbol,
  ${codeClass} .hljs-bullet,
  ${codeClass} .hljs-link,
  ${codeClass} .hljs-meta,
  ${codeClass} .hljs-selector-id,
  ${codeClass} .hljs-title {
- color: var(--hue-2);
+ color: var(--n-hue-2);
  }`, `${codeClass} .hljs-emphasis {
  font-style: italic;
  }`, `${codeClass} .hljs-strong {
- font-weight: var(--font-weight-strong);
+ font-weight: var(--n-font-weight-strong);
  }`, `${codeClass} .hljs-link {
  text-decoration: underline;
  }`];

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

@@ -1,4 +1,4 @@
-import { PropType, InjectionKey, Ref, ExtractPropTypes, Slots } from 'vue';
+import { PropType, Ref, ExtractPropTypes, Slots } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 import type { MaybeArray } from '../../_utils';
 import { OnItemHeaderClick, OnUpdateExpandedNames } from './interface';
@@ -64,7 +64,7 @@ export interface NCollapseInjection {
     slots: Slots;
     toggleItem: (collapse: boolean, name: string | number, event: MouseEvent) => void;
 }
-export declare const collapseInjectionKey: InjectionKey<NCollapseInjection>;
+export declare const collapseInjectionKey: import("vue").InjectionKey<NCollapseInjection>;
 declare const _default: import("vue").DefineComponent<{
     readonly defaultExpandedNames: {
         readonly type: PropType<string | number | (string | number)[] | null>;
@@ -239,35 +239,42 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--divider-color': string;
-        '--title-font-size': string;
-        '--title-text-color': string;
-        '--title-font-weight': string;
-        '--arrow-color': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-divider-color': string;
+        '--n-title-font-size': string;
+        '--n-title-text-color': string;
+        '--n-title-font-weight': string;
+        '--n-arrow-color': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly defaultExpandedNames?: unknown;
-    readonly expandedNames?: unknown;
-    readonly arrowPlacement?: unknown;
-    readonly accordion?: unknown;
-    readonly displayDirective?: unknown;
-    readonly onItemHeaderClick?: unknown;
-    readonly 'onUpdate:expandedNames'?: unknown;
-    readonly onUpdateExpandedNames?: unknown;
-    readonly onExpandedNamesChange?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    displayDirective: "show" | "if";
-    defaultExpandedNames: string | number | (string | number)[] | null;
-    arrowPlacement: "left" | "right";
-    accordion: boolean;
-} & {
-    theme?: import("../../_mixins").Theme<"Collapse", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    readonly defaultExpandedNames: {
+        readonly type: PropType<string | number | (string | number)[] | null>;
+        readonly default: null;
+    };
+    readonly expandedNames: PropType<string | number | (string | number)[] | null>;
+    readonly arrowPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "left";
+    };
+    readonly accordion: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly displayDirective: {
+        readonly type: PropType<"show" | "if">;
+        readonly default: "if";
+    };
+    readonly onItemHeaderClick: PropType<MaybeArray<OnItemHeaderClick>>;
+    readonly 'onUpdate:expandedNames': PropType<MaybeArray<OnUpdateExpandedNames>>;
+    readonly onUpdateExpandedNames: PropType<MaybeArray<OnUpdateExpandedNames>>;
+    readonly onExpandedNamesChange: {
+        readonly type: PropType<MaybeArray<OnUpdateExpandedNames> | undefined>;
+        readonly validator: () => boolean;
+        readonly default: undefined;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleFontWeight: string;
         dividerColor: string;
@@ -275,8 +282,8 @@ declare const _default: import("vue").DefineComponent<{
         fontSize: string;
         textColor: string;
         arrowColor: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleFontWeight: string;
         dividerColor: string;
@@ -284,8 +291,8 @@ declare const _default: import("vue").DefineComponent<{
         fontSize: string;
         textColor: string;
         arrowColor: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Collapse", {
         titleFontSize: string;
         titleFontWeight: string;
         dividerColor: string;
@@ -293,13 +300,8 @@ declare const _default: import("vue").DefineComponent<{
         fontSize: string;
         textColor: string;
         arrowColor: string;
-    }, any>> | undefined;
-    expandedNames?: string | number | (string | number)[] | null | undefined;
-    onItemHeaderClick?: MaybeArray<OnItemHeaderClick> | undefined;
-    "onUpdate:expandedNames"?: MaybeArray<OnUpdateExpandedNames> | undefined;
-    onUpdateExpandedNames?: MaybeArray<OnUpdateExpandedNames> | undefined;
-    onExpandedNamesChange?: MaybeArray<OnUpdateExpandedNames> | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     displayDirective: "show" | "if";
     defaultExpandedNames: string | number | (string | number)[] | null;
     arrowPlacement: "left" | "right";

package/lib/collapse/src/Collapse.js

@@ -34,7 +34,7 @@ const collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
         },
         default: undefined
     } });
-exports.collapseInjectionKey = Symbol('collapse');
+exports.collapseInjectionKey = (0, _utils_1.createInjectionKey)('n-collapse');
 exports.default = (0, vue_1.defineComponent)({
     name: 'Collapse',
     props: collapseProps,
@@ -110,14 +110,14 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--divider-color': dividerColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-text-color': titleTextColor,
-                    '--title-font-weight': titleFontWeight,
-                    '--arrow-color': arrowColor
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-divider-color': dividerColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-arrow-color': arrowColor
                 };
             })
         };

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

@@ -20,13 +20,9 @@ declare const _default: import("vue").DefineComponent<{
     mergedDisplayDirective: import("vue").ComputedRef<"show" | "if">;
     arrowPlacement: import("vue").ComputedRef<"left" | "right">;
     handleClick(e: MouseEvent): void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly title?: unknown;
-    readonly name?: unknown;
-    readonly displayDirective?: unknown;
-} & {} & {
-    name?: string | number | undefined;
-    title?: string | undefined;
-    displayDirective?: "show" | "if" | 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 title: StringConstructor;
+    readonly name: PropType<string | number>;
+    readonly displayDirective: PropType<"show" | "if">;
+}>>, {}>;
 export default _default;

package/lib/collapse/src/CollapseItem.js

@@ -67,9 +67,11 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { collapseSlots, $slots, arrowPlacement, collapsed, title, mergedDisplayDirective, mergedClsPrefix } = this;
-        const headerNode = (0, vue_1.renderSlot)($slots, 'header', undefined, () => [title]);
+        var _a;
+        const { collapseSlots, $slots, arrowPlacement, collapsed, mergedDisplayDirective, mergedClsPrefix } = this;
+        const headerNode = $slots.header ? $slots.header() : this.title;
         const headerExtraSlot = $slots['header-extra'] || collapseSlots['header-extra'];
+        const arrowSlot = $slots.arrow || collapseSlots.arrow;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-collapse-item`,
                 `${mergedClsPrefix}-collapse-item--${arrowPlacement}-arrow-placement`,
@@ -81,18 +83,9 @@ 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` }, (0, vue_1.renderSlot)($slots.arrow
-                        ? $slots
-                        : collapseSlots.arrow
-                            ? collapseSlots
-                            : $slots, 'arrow', { collapsed: collapsed }, () => {
-                        var _a;
-                        return [
-                            (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` }, 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))
+                    }))),
                     arrowPlacement === 'left' && headerNode),
                 headerExtraSlot && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-collapse-item__header-extra`, onClick: this.handleClick }, { default: headerExtraSlot }))),
             (0, vue_1.h)(CollapseItemContent_1.default, { clsPrefix: mergedClsPrefix, displayDirective: mergedDisplayDirective, show: !collapsed }, $slots)));

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

@@ -11,15 +11,17 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     onceTrue: Readonly<import("vue").Ref<boolean>>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    displayDirective?: unknown;
-    show?: unknown;
-    clsPrefix?: unknown;
-} & {
-    show: boolean;
-    clsPrefix: string;
-    displayDirective: "show" | "if";
-} & {}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    displayDirective: {
+        type: PropType<"show" | "if">;
+        required: true;
+    };
+    show: BooleanConstructor;
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
     show: boolean;
 }>;
 export default _default;

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

@@ -13,24 +13,24 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
-// --font-size
-// --bezier
-// --text-color
-// --divider-color
-// --title-font-size
-// --title-text-color
-// --title-font-weight
-// --arrow-color
+// --n-font-size
+// --n-bezier
+// --n-text-color
+// --n-divider-color
+// --n-title-font-size
+// --n-title-text-color
+// --n-title-font-weight
+// --n-arrow-color
 
 
 exports.default = (0, cssr_1.cB)('collapse', {
   width: '100%'
 }, [(0, cssr_1.cB)('collapse-item', `
- font-size: var(--font-size);
- color: var(--text-color);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  margin: 16px 0 0 0;
  `, [(0, cssr_1.cB)('collapse-item', 'margin-left: 32px;'), (0, cssr_1.c)('&:first-child', {
   marginTop: 0
@@ -47,36 +47,36 @@ exports.default = (0, cssr_1.cB)('collapse', {
 })]), (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)'
 })])])]), (0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--divider-color)'
+  borderTop: '1px solid var(--n-divider-color)'
 }), (0, cssr_1.cE)('header', `
- font-size: var(--title-font-size);
+ font-size: var(--n-title-font-size);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  position: relative;
  padding: 16px 0 0 0;
- color: var(--title-text-color);
+ color: var(--n-title-text-color);
  `, [(0, cssr_1.cE)('header-main', `
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
  flex: 1;
- color: var(--title-text-color);
+ color: var(--n-title-text-color);
  `), (0, cssr_1.cE)('header-extra', `
  cursor: pointer;
  display: flex;
  align-items: center;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `), (0, cssr_1.cB)('collapse-item-arrow', `
  display: flex;
  transition:
- transform .15s var(--bezier),
- color .3s var(--bezier);
+ transform .15s var(--n-bezier),
+ color .3s var(--n-bezier);
  font-size: 18px;
- color: var(--arrow-color);
+ color: var(--n-arrow-color);
  `)])])]);