naive-ui 2.32.2 → 2.33.2

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

@@ -19,17 +19,17 @@ export default cB('rate', {
  transform: scale(1);
  font-size: var(--n-item-size);
  color: var(--n-item-color);
- `, [c('&:not(:first-child)', {
-  marginLeft: '6px'
-}), cM('active', {
-  color: 'var(--n-item-color-active)'
-})]), cNotM('readonly', `
+ `, [c('&:not(:first-child)', `
+ margin-left: 6px;
+ `), cM('active', `
+ color: var(--n-item-color-active);
+ `)]), cNotM('readonly', `
  cursor: pointer;
- `, [cE('item', [c('&:hover', {
-  transform: 'scale(1.05)'
-}), c('&:active', {
-  transform: 'scale(0.96)'
-})])]), cE('half', `
+ `, [cE('item', [c('&:hover', `
+ transform: scale(1.05);
+ `), c('&:active', `
+ transform: scale(0.96);
+ `)])]), cE('half', `
  display: flex;
  transition: inherit;
  position: absolute;
@@ -39,6 +39,6 @@ export default cB('rate', {
  width: 50%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0);
- `, [cM('active', {
-  color: 'var(--n-item-color-active)'
-})])]);
+ `, [cM('active', `
+ color: var(--n-item-color-active);
+ `)])]);

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

@@ -21,6 +21,10 @@ export declare const sliderProps: {
         readonly default: undefined;
     };
     readonly formatTooltip: PropType<(value: number) => string | number>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly min: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -152,6 +156,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly formatTooltip: PropType<(value: number) => string | number>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly min: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -357,6 +365,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly formatTooltip: PropType<(value: number) => string | number>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly min: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -482,6 +494,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly min: number;
     readonly to: string | boolean | HTMLElement;
     readonly defaultValue: number | number[];
+    readonly keyboard: boolean;
     readonly showTooltip: boolean | undefined;
 }>;
 export default _default;

package/es/slider/src/Slider.js

@@ -15,7 +15,10 @@ export const sliderProps = Object.assign(Object.assign({}, useTheme.props), { to
     }, marks: Object, disabled: {
         type: Boolean,
         default: undefined
-    }, formatTooltip: Function, min: {
+    }, formatTooltip: Function, keyboard: {
+        type: Boolean,
+        default: true
+    }, min: {
         type: Number,
         default: 0
     }, max: {
@@ -256,7 +259,7 @@ export default defineComponent({
             return Number(newValue.toFixed(precisionRef.value));
         }
         function getClosestMark(currentValue, markValues = markValuesRef.value, buffer) {
-            if (!markValues || !markValues.length)
+            if (!(markValues === null || markValues === void 0 ? void 0 : markValues.length))
                 return null;
             let closestMark = null;
             let index = -1;
@@ -296,7 +299,7 @@ export default defineComponent({
         }
         // dom event handle
         function handleRailKeyDown(e) {
-            if (mergedDisabledRef.value)
+            if (mergedDisabledRef.value || !props.keyboard)
                 return;
             const { vertical, reverse } = props;
             switch (e.key) {

package/es/theme-editor/src/MaximizeIcon.d.ts

@@ -0,0 +1 @@
+export declare const MaximizeIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

package/es/theme-editor/src/MaximizeIcon.js

@@ -0,0 +1,8 @@
+import { h, defineComponent } from 'vue';
+export const MaximizeIcon = defineComponent({
+    render() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
+            h("g", { fill: "none" },
+                h("path", { d: "M8.5 2a.5.5 0 0 0 0 1h3.793L3 12.293V8.5a.5.5 0 0 0-1 0v4.9a.6.6 0 0 0 .6.6h4.9a.5.5 0 0 0 0-1H3.707L13 3.707V7.5a.5.5 0 0 0 1 0V2.6a.6.6 0 0 0-.6-.6H8.5z", fill: "currentColor" }))));
+    }
+});

package/es/theme-editor/src/MinimizeIcon.d.ts

@@ -0,0 +1 @@
+export declare const MinimizeIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

package/es/theme-editor/src/MinimizeIcon.js

@@ -0,0 +1,8 @@
+import { h, defineComponent } from 'vue';
+export const MinimizeIcon = defineComponent({
+    render() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
+            h("path", { d: "M4 18v2h6.586L2 28.582L3.414 30L12 21.414V28h2V18H4z", fill: "currentColor" }),
+            h("path", { d: "M30 3.416L28.592 2L20 10.586V4h-2v10h10v-2h-6.586L30 3.416z", fill: "currentColor" })));
+    }
+});

package/es/theme-editor/src/ThemeEditor.d.ts

@@ -130,5 +130,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleExportClick: () => void;
     handleImportClick: () => void;
     handleInputFileChange: () => void;
+    toggleMaximized: () => void;
+    isMaximized: import("vue").Ref<{
+        valueOf: () => boolean;
+    }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/es/theme-editor/src/ThemeEditor.js

@@ -7,6 +7,7 @@ import { NPopover } from '../../popover';
 import { NCollapse, NCollapseItem } from '../../collapse';
 import { NInput } from '../../input';
 import { NSpace } from '../../space';
+import { NGrid, NGi } from '../../grid';
 import { useLocale } from '../../_mixins';
 import { NElement } from '../../element';
 import { NDivider } from '../../divider';
@@ -14,6 +15,9 @@ import { NButton } from '../../button';
 import { NColorPicker } from '../../color-picker';
 import { NEmpty } from '../../empty';
 import { lockHtmlScrollRightCompensationRef } from '../../_utils';
+import { NIcon } from '../../icon';
+import { MaximizeIcon } from './MaximizeIcon';
+import { MinimizeIcon } from './MinimizeIcon';
 const ColorWandIcon = (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { width: '1em', height: '1em', color: 'currentColor' } },
     h("path", { d: "M13.5 1C13.7761 1 14 1.22386 14 1.5V2H14.5C14.7761 2 15 2.22386 15 2.5C15 2.77614 14.7761 3 14.5 3H14V3.5C14 3.77614 13.7761 4 13.5 4C13.2239 4 13 3.77614 13 3.5V3H12.5C12.2239 3 12 2.77614 12 2.5C12 2.22386 12.2239 2 12.5 2H13V1.5C13 1.22386 13.2239 1 13.5 1Z", fill: "currentColor" }),
     h("path", { d: "M3.5 3C3.77615 3 4 3.22386 4 3.5V4H4.5C4.77615 4 5 4.22386 5 4.5C5 4.77614 4.77615 5 4.5 5H4V5.5C4 5.77614 3.77615 6 3.5 6C3.22386 6 3 5.77614 3 5.5V5H2.5C2.22386 5 2 4.77614 2 4.5C2 4.22386 2.22386 4 2.5 4H3V3.5C3 3.22386 3.22386 3 3.5 3Z", fill: "currentColor" }),
@@ -31,6 +35,7 @@ export default defineComponent({
     name: 'ThemeEditor',
     inheritAttrs: false,
     setup() {
+        const isMaximized = ref(false);
         const fileInputRef = ref(null);
         const NConfigProvider = inject(configProviderInjectionKey, null);
         const theme = computed(() => {
@@ -91,6 +96,9 @@ export default defineComponent({
                 return;
             fileInput.click();
         }
+        function toggleMaximized() {
+            isMaximized.value = !isMaximized.value;
+        }
         function handleInputFileChange() {
             const { value: fileInput } = fileInputRef;
             if (!fileInput)
@@ -143,7 +151,9 @@ export default defineComponent({
             handleClearAllClick,
             handleExportClick,
             handleImportClick,
-            handleInputFileChange
+            handleInputFileChange,
+            toggleMaximized,
+            isMaximized
         };
     },
     render() {
@@ -152,7 +162,7 @@ export default defineComponent({
                 var _a, _b;
                 return [
                     h(NPopover, { scrollable: true, arrowPointToCenter: true, trigger: "manual", show: this.showPanel, displayDirective: "show", placement: "top-end", style: {
-                            width: '288px',
+                            width: this.isMaximized ? 'calc(100vw - 80px)' : '288px',
                             height: 'calc(100vh - 200px)',
                             padding: 0
                         } }, {
@@ -192,12 +202,20 @@ export default defineComponent({
                                     visibility: 'hidden'
                                 }, onChange: this.handleInputFileChange }),
                             h(NSpace, { vertical: true }, {
-                                default: () => (h(Fragment, null,
-                                    h("div", { style: {
+                                default: () => [
+                                    h(NSpace, { align: "center", justify: "space-between", style: {
                                             marginBottom: '8px',
                                             fontSize: '18px',
                                             fontWeight: 500
-                                        } }, this.locale.title),
+                                        } }, {
+                                        default: () => (h(Fragment, null,
+                                            h("span", null, this.locale.title),
+                                            h(NButton, { onClick: this.toggleMaximized, secondary: true, circle: true, size: "tiny" }, {
+                                                icon: () => (h(NIcon, { component: this.isMaximized
+                                                        ? MinimizeIcon
+                                                        : MaximizeIcon }))
+                                            })))
+                                    }),
                                     this.locale.filterCompName,
                                     h(NInput, { onChange: () => {
                                             this.compNamePattern = this.tempCompNamePattern;
@@ -227,7 +245,8 @@ export default defineComponent({
                                             h(NButton, { block: true, size: "small", onClick: this.handleExportClick }, {
                                                 default: () => this.locale.export
                                             })))
-                                    })))
+                                    })
+                                ]
                             }),
                             h(NDivider, null),
                             h(NCollapse, null, {
@@ -261,16 +280,20 @@ export default defineComponent({
                                         }
                                         filteredItemsCount += 1;
                                         return (h(NCollapseItem, { title: themeKey, name: themeKey }, {
-                                            default: () => {
-                                                return (h(NSpace, { vertical: true }, {
-                                                    default: () => varKeys.map((varKey) => {
+                                            default: () => (h(NGrid, { xGap: 32, yGap: 16, responsive: "screen", cols: this.isMaximized
+                                                    ? '1 xs:1 s:2 m:3 l:4'
+                                                    : 1 }, {
+                                                default: () => varKeys.map((varKey) => (h(NGi, null, {
+                                                    default: () => {
                                                         var _a, _b, _c, _d;
-                                                        return [
+                                                        return (h(Fragment, null,
                                                             h("div", { key: `${varKey}Label`, style: {
                                                                     wordBreak: 'break-word'
                                                                 } }, varKey),
-                                                            showColorPicker(varKey) ? (h(NColorPicker, { key: varKey, modes: ['rgb', 'hex'], value: ((_b = (_a = this.tempOverrides) === null || _a === void 0 ? void 0 : _a[themeKey]) === null || _b === void 0 ? void 0 : _b[varKey]) ||
-                                                                    componentTheme[varKey], onComplete: this.applyTempOverrides, onUpdateValue: (value) => {
+                                                            showColorPicker(varKey) ? (h(NColorPicker, { key: varKey, modes: ['rgb', 'hex'], value: ((_b = (_a = this
+                                                                    .tempOverrides) === null || _a === void 0 ? void 0 : _a[themeKey]) === null || _b === void 0 ? void 0 : _b[varKey]) ||
+                                                                    componentTheme[varKey], onComplete: this
+                                                                    .applyTempOverrides, onUpdateValue: (value) => {
                                                                     this.setTempOverrides(themeKey, varKey, value);
                                                                 } }, {
                                                                 action: () => {
@@ -285,13 +308,14 @@ export default defineComponent({
                                                                             .restore
                                                                     }));
                                                                 }
-                                                            })) : (h(NInput, { key: varKey, onChange: this.applyTempOverrides, onUpdateValue: (value) => {
+                                                            })) : (h(NInput, { key: varKey, onChange: this
+                                                                    .applyTempOverrides, onUpdateValue: (value) => {
                                                                     this.setTempOverrides(themeKey, varKey, value);
-                                                                }, value: ((_d = (_c = this.tempOverrides) === null || _c === void 0 ? void 0 : _c[themeKey]) === null || _d === void 0 ? void 0 : _d[varKey]) || '', placeholder: componentTheme[varKey] }))
-                                                        ];
-                                                    })
-                                                }));
-                                            }
+                                                                }, value: ((_d = (_c = this
+                                                                    .tempOverrides) === null || _c === void 0 ? void 0 : _c[themeKey]) === null || _d === void 0 ? void 0 : _d[varKey]) || '', placeholder: componentTheme[varKey] }))));
+                                                    }
+                                                })))
+                                            }))
                                         }));
                                     });
                                     if (!filteredItemsCount)

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

@@ -45,8 +45,8 @@ export default cB('tree', `
  `)]), cNotM('disabled', [cM('clickable', [cB('tree-node-content', `
  cursor: pointer;
  `)])])]), cM('block-node', [cB('tree-node-content', `
- flex-grow: 1;
- flex-shrink: 0;
+ flex: 1;
+ min-width: 0;
  `)]), cNotM('block-line', [cB('tree-node', [cNotM('disabled', [cB('tree-node-content', [c('&:hover', {
   backgroundColor: 'var(--n-node-color-hover)'
 })]), cM('selectable', [cB('tree-node-content', [c('&:active', {
@@ -131,7 +131,8 @@ export default cB('tree', `
  `), cE('text', `
  border-bottom: 1px solid #0000;
  transition: border-color .3s var(--n-bezier);
- flex-grow:1;
+ flex-grow: 1;
+ max-width: 100%;
  `), cE('suffix', `
  display: inline-flex;
  `)]), cE('empty', 'margin: auto;')]);

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

@@ -95,7 +95,7 @@ export interface UploadInst {
 export declare type OnBeforeUpload = (data: {
     file: SettledFileInfo;
     fileList: SettledFileInfo[];
-}) => Promise<unknown>;
+}) => Promise<boolean | void> | boolean | void;
 export declare type ListType = 'text' | 'image' | 'image-card';
 export declare type OnPreview = (file: SettledFileInfo) => void;
 export declare type CreateThumbnailUrl = (file: File) => Promise<string>;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.32.2";
+declare const _default: "2.33.2";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.32.2';
+export default '2.33.2';

package/lib/_internal/select-menu/src/SelectOption.js

@@ -6,11 +6,10 @@ const _utils_1 = require("../../../_utils");
 const icons_1 = require("../../icons");
 const icon_1 = require("../../icon");
 const interface_1 = require("./interface");
-const checkMarkIcon = (0, vue_1.h)(icons_1.CheckmarkIcon);
 function renderCheckMark(show, clsPrefix) {
     return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {
         default: () => show ? ((0, vue_1.h)(icon_1.NBaseIcon, { clsPrefix: clsPrefix, class: `${clsPrefix}-base-select-option__check` }, {
-            default: () => checkMarkIcon
+            default: () => (0, vue_1.h)(icons_1.CheckmarkIcon)
         })) : null
     }));
 }

package/lib/_utils/cssr/index.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createKey = exports.find = exports.namespace = exports.prefix = exports.asModal = exports.insidePopover = exports.insideModal = exports.cCB = exports.cNotM = exports.cM = exports.cE = exports.cB = exports.c = void 0;
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 const css_render_1 = require("css-render");
-const plugin_bem_1 = __importDefault(require("@css-render/plugin-bem"));
+const plugin_bem_1 = require("@css-render/plugin-bem");
 const namespace = 'n';
 exports.namespace = namespace;
 const prefix = `.${namespace}-`;
@@ -14,7 +11,7 @@ exports.prefix = prefix;
 const elementPrefix = '__';
 const modifierPrefix = '--';
 const cssr = (0, css_render_1.CssRender)();
-const plugin = (0, plugin_bem_1.default)({
+const plugin = (0, plugin_bem_1.plugin)({
     blockPrefix: prefix,
     elementPrefix,
     modifierPrefix

package/lib/calendar/src/Calendar.js

@@ -24,12 +24,13 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Calendar',
     props: exports.calendarProps,
     setup(props) {
+        var _a;
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Calendar', '-calendar', index_cssr_1.default, styles_1.calendarLight, props, mergedClsPrefixRef);
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('DatePicker');
         const now = Date.now();
         // ts => timestamp
-        const monthTsRef = (0, vue_1.ref)((0, date_fns_1.startOfMonth)(now).valueOf());
+        const monthTsRef = (0, vue_1.ref)((0, date_fns_1.startOfMonth)((_a = props.defaultValue) !== null && _a !== void 0 ? _a : now).valueOf());
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue || null);
         const mergedValueRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'value'), uncontrolledValueRef);
         function doUpdateValue(value, time) {

package/lib/card/src/Card.d.ts

@@ -32,7 +32,7 @@ export declare const cardBaseProps: {
     readonly role: StringConstructor;
     readonly onClose: PropType<MaybeArray<() => void>>;
 };
-export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "hoverable" | "headerExtraStyle" | "embedded" | "segmented")[];
+export declare const cardBasePropKeys: ("size" | "title" | "role" | "bordered" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "hoverable" | "embedded" | "headerExtraStyle" | "segmented")[];
 export declare const cardProps: {
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
@@ -66,6 +66,8 @@ export declare const cardProps: {
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -101,6 +103,8 @@ export declare const cardProps: {
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -136,6 +140,8 @@ export declare const cardProps: {
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -199,6 +205,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -234,6 +242,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -269,6 +279,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -413,6 +425,8 @@ declare const _default: import("vue").DefineComponent<{
             colorPopover: string;
             colorTarget: string;
             colorEmbedded: string;
+            colorEmbeddedModal: string;
+            colorEmbeddedPopover: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -453,6 +467,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color': string;
         '--n-color-modal': string;
         '--n-color-popover': string;
+        '--n-color-embedded': string;
+        '--n-color-embedded-modal': string;
+        '--n-color-embedded-popover': string;
         '--n-color-target': string;
         '--n-text-color': string;
         '--n-line-height': string;
@@ -510,6 +527,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -545,6 +564,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -580,6 +601,8 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
         colorTarget: string;
         colorEmbedded: string;
+        colorEmbeddedModal: string;
+        colorEmbeddedPopover: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;

package/lib/card/src/Card.js

@@ -55,14 +55,17 @@ exports.default = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Card', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { size } = props;
-            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, lineHeight, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorPopover, colorEmbedded, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, lineHeight, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorPopover, colorEmbedded, colorEmbeddedModal, colorEmbeddedPopover, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = (0, seemly_1.getPadding)(padding);
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-border-radius': borderRadius,
-                '--n-color': props.embedded ? colorEmbedded : color,
+                '--n-color': color,
                 '--n-color-modal': colorModal,
                 '--n-color-popover': colorPopover,
+                '--n-color-embedded': colorEmbedded,
+                '--n-color-embedded-modal': colorEmbeddedModal,
+                '--n-color-embedded-popover': colorEmbeddedPopover,
                 '--n-color-target': colorTarget,
                 '--n-text-color': textColor,
                 '--n-line-height': lineHeight,
@@ -103,11 +106,12 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, $slots } = this;
+        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, embedded, $slots } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-card`,
                 this.themeClass,
+                embedded && `${mergedClsPrefix}-card--embedded`,
                 {
                     [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'
@@ -124,7 +128,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, _utils_1.resolveWrappedSlot)($slots.cover, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, children))),
             (0, _utils_1.resolveWrappedSlot)($slots.header, (children) => {
                 return children || this.title || this.closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || [this.title]),
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || this.title),
                     (0, _utils_1.resolveWrappedSlot)($slots['header-extra'], (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, children))),
                     this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick, absolute: true })) : null)) : null;
             }),

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

@@ -29,6 +29,9 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-close-icon-color-pressed
 // --n-border-color
 // --n-box-shadow
+// --n-color-embedded
+// --n-color-embedded-modal
+// --n-color-embedded-popover
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
@@ -48,7 +51,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  background-color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier),
  border-color .3s var(--n-bezier);
- `, [(0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--n-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
+ `, [(0, cssr_1.asModal)({
+  background: 'var(--n-color-modal)'
+}), (0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--n-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
   paddingTop: 'var(--n-padding-bottom)'
 })])]), (0, cssr_1.cM)('content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', `
  margin: 0 var(--n-padding-left);
@@ -122,10 +127,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
   transition: 'border-color 0.3s var(--n-bezier)'
 }, [(0, cssr_1.c)('&:not(:first-child)', {
   borderTop: '1px solid var(--n-border-color)'
-})])])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('card', {
-  background: 'var(--n-color-modal)'
-})), (0, cssr_1.insidePopover)((0, cssr_1.cB)('card', {
-  background: 'var(--n-color-popover)'
-})), (0, cssr_1.cB)('card', [(0, cssr_1.asModal)({
-  background: 'var(--n-color-modal)'
-})])]);
+})])])]), (0, cssr_1.cM)('embedded', `
+ background-color: var(--n-color-embedded);
+ `)]), (0, cssr_1.insideModal)((0, cssr_1.cB)('card', `
+ background: var(--n-color-modal);
+ `, [(0, cssr_1.cM)('embedded', `
+ background-color: var(--n-color-embedded-modal);
+ `)])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('card', `
+ background: var(--n-color-popover);
+ `, [(0, cssr_1.cM)('embedded', `
+ background-color: var(--n-color-embedded-popover);
+ `)]))]);

package/lib/card/styles/dark.js

@@ -7,8 +7,10 @@ const cardDark = {
     common: common_1.commonDark,
     self(vars) {
         const commonSelf = (0, light_1.self)(vars);
-        const { cardColor } = vars;
+        const { cardColor, modalColor, popoverColor } = vars;
         commonSelf.colorEmbedded = cardColor;
+        commonSelf.colorEmbeddedModal = modalColor;
+        commonSelf.colorEmbeddedPopover = popoverColor;
         return commonSelf;
     }
 };

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

@@ -7,6 +7,8 @@ export declare const self: (vars: ThemeCommonVars) => {
     colorPopover: string;
     colorTarget: string;
     colorEmbedded: string;
+    colorEmbeddedModal: string;
+    colorEmbeddedPopover: string;
     textColor: string;
     titleTextColor: string;
     borderColor: string;

package/lib/card/styles/light.js

@@ -8,7 +8,7 @@ const common_1 = require("../../_styles/common");
 const _common_1 = __importDefault(require("./_common"));
 const self = (vars) => {
     const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, fontWeightStrong, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor, actionColor } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor, titleFontWeight: fontWeightStrong, closeColorHover,
+    return Object.assign(Object.assign({}, _common_1.default), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, colorEmbeddedModal: actionColor, colorEmbeddedPopover: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor, titleFontWeight: fontWeightStrong, closeColorHover,
         closeColorPressed, closeBorderRadius: borderRadius, closeIconColor,
         closeIconColorHover,
         closeIconColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius });

package/lib/countdown/src/Countdown.js

@@ -23,7 +23,6 @@ exports.default = (0, vue_1.defineComponent)({
     props: exports.countdownProps,
     setup(props) {
         let timerId = null;
-        let rafId = null;
         let elapsed = 0;
         let finished = false;
         // in ms
@@ -92,10 +91,6 @@ exports.default = (0, vue_1.defineComponent)({
                 window.clearTimeout(timerId);
                 timerId = null;
             }
-            if (rafId !== null) {
-                window.cancelAnimationFrame(rafId);
-                rafId = null;
-            }
         };
         (0, vue_1.onMounted)(() => {
             (0, vue_1.watchEffect)(() => {