naive-ui 2.25.0 → 2.25.3

package/es/calendar/src/Calendar.js

@@ -6,7 +6,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from '../../_internal/icons';
 import { NBaseIcon } from '../../_internal';
 import { call } from '../../_utils';
 import { NButton, NButtonGroup } from '../../button';
-import { useConfig, useLocale, useTheme } from '../../_mixins';
+import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { calendarLight } from '../styles';
 import style from './styles/index.cssr';
 const calendarProps = Object.assign(Object.assign({}, useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
@@ -17,7 +17,7 @@ export default defineComponent({
     name: 'Calendar',
     props: calendarProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Calendar', '-calendar', style, calendarLight, props, mergedClsPrefixRef);
         const { localeRef, dateLocaleRef } = useLocale('DatePicker');
         const now = Date.now();
@@ -69,6 +69,35 @@ export default defineComponent({
             }
             monthTsRef.value = newMonthTs;
         }
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-color': borderColor,
+                '--n-border-color-modal': borderColorModal,
+                '--n-border-color-popover': borderColorPopover,
+                '--n-border-radius': borderRadius,
+                '--n-text-color': textColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-text-color': titleTextColor,
+                '--n-day-text-color': dayTextColor,
+                '--n-font-size': fontSize,
+                '--n-line-height': lineHeight,
+                '--n-date-color-current': dateColorCurrent,
+                '--n-date-text-color-current': dateTextColorCurrent,
+                '--n-cell-color': cellColor,
+                '--n-cell-color-modal': cellColorModal,
+                '--n-cell-color-popover': cellColorPopover,
+                '--n-cell-color-hover': cellColorHover,
+                '--n-cell-color-hover-modal': cellColorHoverModal,
+                '--n-cell-color-hover-popover': cellColorHoverPopover,
+                '--n-bar-color': barColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('calendar', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             locale: localeRef,
@@ -84,43 +113,21 @@ export default defineComponent({
             handlePrevClick,
             handleNextClick,
             mergedTheme: themeRef,
-            cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-color': borderColor,
-                    '--n-border-color-modal': borderColorModal,
-                    '--n-border-color-popover': borderColorPopover,
-                    '--n-border-radius': borderRadius,
-                    '--n-text-color': textColor,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-day-text-color': dayTextColor,
-                    '--n-font-size': fontSize,
-                    '--n-line-height': lineHeight,
-                    '--n-date-color-current': dateColorCurrent,
-                    '--n-date-text-color-current': dateTextColorCurrent,
-                    '--n-cell-color': cellColor,
-                    '--n-cell-color-modal': cellColorModal,
-                    '--n-cell-color-popover': cellColorPopover,
-                    '--n-cell-color-hover': cellColorHover,
-                    '--n-cell-color-hover-modal': cellColorHoverModal,
-                    '--n-cell-color-hover-popover': cellColorHoverPopover,
-                    '--n-bar-color': barColor
-                };
-            })
+            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() {
-        const { isDateDisabled, mergedClsPrefix, monthTs, cssVars, mergedValue, mergedTheme, $slots, locale: { monthBeforeYear, today }, dateLocale: { locale }, handleTodayClick, handlePrevClick, handleNextClick } = this;
+        const { isDateDisabled, mergedClsPrefix, monthTs, cssVars, mergedValue, mergedTheme, $slots, locale: { monthBeforeYear, today }, dateLocale: { locale }, handleTodayClick, handlePrevClick, handleNextClick, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const normalizedValue = mergedValue && startOfDay(mergedValue).valueOf();
         const localeMonth = format(monthTs, 'MMMM', { locale });
         const year = getYear(monthTs);
         const title = monthBeforeYear
             ? `${localeMonth} ${year}`
             : `${year} ${localeMonth}`;
-        return (h("div", { class: `${mergedClsPrefix}-calendar`, style: cssVars },
+        return (h("div", { class: [`${mergedClsPrefix}-calendar`, this.themeClass], style: cssVars },
             h("div", { class: `${mergedClsPrefix}-calendar-header` },
                 h("div", { class: `${mergedClsPrefix}-calendar-header__title` }, title),
                 h("div", { class: `${mergedClsPrefix}-calendar-header__extra` },

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

@@ -440,7 +440,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-font-size': string;
         '--n-title-font-size': string;
         '--n-close-size': 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<{
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;

package/es/card/src/Card.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed } from 'vue';
 import { getPadding } from 'seemly';
-import { useConfig, useTheme } from '../../_mixins';
-import { call, createKey, keysOf } from '../../_utils';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { call, createKey, keysOf, resolveWrappedSlot } from '../../_utils';
 import { NBaseClose } from '../../_internal';
 import { cardLight } from '../styles';
 import style from './styles/index.cssr';
@@ -44,50 +44,60 @@ export default defineComponent({
             if (onClose)
                 call(onClose);
         };
-        const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
+        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Card', '-card', style, cardLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = useRtl('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = useRtl('Card', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { size } = props;
+            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = getPadding(padding);
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-color': props.embedded ? colorEmbedded : color,
+                '--n-color-modal': colorModal,
+                '--n-color-popover': colorPopover,
+                '--n-color-target': colorTarget,
+                '--n-text-color': textColor,
+                '--n-line-height': lineHeight,
+                '--n-action-color': actionColor,
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-border-color': borderColor,
+                '--n-box-shadow': boxShadow,
+                // size
+                '--n-padding-top': paddingTop,
+                '--n-padding-bottom': paddingBottom,
+                '--n-padding-left': paddingLeft,
+                '--n-font-size': fontSize,
+                '--n-title-font-size': titleFontSize,
+                '--n-close-size': closeSize
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('card', computed(() => {
+                return props.size[0];
+            }), cssVarsRef, props)
+            : undefined;
         return {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedTheme: themeRef,
             handleCloseClick,
-            cssVars: computed(() => {
-                const { size } = props;
-                const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = getPadding(padding);
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-color': props.embedded ? colorEmbedded : color,
-                    '--n-color-modal': colorModal,
-                    '--n-color-popover': colorPopover,
-                    '--n-color-target': colorTarget,
-                    '--n-text-color': textColor,
-                    '--n-line-height': lineHeight,
-                    '--n-action-color': actionColor,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-border-color': borderColor,
-                    '--n-box-shadow': boxShadow,
-                    // size
-                    '--n-padding-top': paddingTop,
-                    '--n-padding-bottom': paddingBottom,
-                    '--n-padding-left': paddingLeft,
-                    '--n-font-size': fontSize,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-close-size': closeSize
-                };
-            })
+            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() {
-        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, $slots } = this;
+        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-card`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'
@@ -101,13 +111,17 @@ export default defineComponent({
                     [`${mergedClsPrefix}-card--hoverable`]: hoverable
                 }
             ], style: this.cssVars, role: this.role },
-            $slots.cover ? (h("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, $slots.cover())) : null,
-            $slots.header || this.title || this.closable ? (h("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
-                h("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, $slots.header ? $slots.header() : this.title),
-                $slots['header-extra'] ? (h("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, $slots['header-extra']())) : null,
-                this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null,
-            h("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, $slots),
-            $slots.footer ? (h("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, $slots.footer())) : null,
-            $slots.action ? (h("div", { class: `${mergedClsPrefix}-card__action`, role: "none" }, $slots.action())) : null));
+            resolveWrappedSlot($slots.cover, (children) => children && (h("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, children))),
+            resolveWrappedSlot($slots.header, (children) => {
+                return children || this.title || this.closable ? (h("div", { class: `${mergedClsPrefix}-card-header`, style: this.headerStyle },
+                    h("div", { class: `${mergedClsPrefix}-card-header__main`, role: "heading" }, children || [this.title]),
+                    resolveWrappedSlot($slots['header-extra'], (children) => children && (h("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, children))),
+                    this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null;
+            }),
+            resolveWrappedSlot($slots.default, (children) => children && (h("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, children))),
+            resolveWrappedSlot($slots.footer, (children) => children && [
+                h("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, children)
+            ]),
+            resolveWrappedSlot($slots.action, (children) => children && (h("div", { class: `${mergedClsPrefix}-card__action`, role: "none" }, children)))));
     }
 });

package/es/card/styles/index.d.ts

@@ -1,4 +1,4 @@
 export { default as cardDark } from './dark';
 export { default as cardLight } from './light';
-export { default as cardRtl } from './rtl';
+export { cardRtl } from './rtl';
 export type { CardTheme, CardThemeVars } from './light';

package/es/card/styles/index.js

@@ -1,3 +1,3 @@
 export { default as cardDark } from './dark';
 export { default as cardLight } from './light';
-export { default as cardRtl } from './rtl';
+export { cardRtl } from './rtl';

package/es/card/styles/rtl.d.ts

@@ -1,5 +1,2 @@
-declare const _default: {
-    name: string;
-    style: import("css-render").CNode;
-};
-export default _default;
+import { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const cardRtl: RtlItem;

package/es/card/styles/rtl.js

@@ -1,5 +1,5 @@
 import rtlStyle from '../src/styles/rtl.cssr';
-export default {
+export const cardRtl = {
     name: 'Card',
     style: rtlStyle
 };

package/es/carousel/src/Carousel.d.ts

@@ -195,7 +195,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-dot-line-width': string;
         '--n-dot-line-width-active': string;
         '--n-arrow-color': string;
-    }>;
+    }> | undefined;
+    themeClass: Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     getCurrentIndex: () => number;
     to: (index: number) => void;
     prev: () => void;

package/es/carousel/src/Carousel.js

@@ -1,8 +1,8 @@
 import { h, defineComponent, ref, provide, cloneVNode, computed, onBeforeUnmount, watch, withDirectives, vShow, Transition, toRef, nextTick, onMounted, watchEffect, onUpdated } from 'vue';
 import { VResizeObserver } from 'vueuc';
 import { on, off } from 'evtd';
-import { useConfig, useTheme } from '../../_mixins';
-import { flatten, keep } from '../../_utils';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { flatten, keep, resolveSlotWithProps } from '../../_utils';
 import { carouselLight } from '../styles';
 import { calculateSize, getNextIndex, getPrevIndex, getDisplayIndex, getRealIndex, isTouchEvent, clampValue, resolveSpeed } from './utils';
 import NCarouselDots from './CarouselDots';
@@ -59,7 +59,7 @@ export default defineComponent({
     name: 'Carousel',
     props: carouselProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         // Dom
         const selfElRef = ref(null);
         const slidesElsRef = ref([]);
@@ -672,25 +672,30 @@ export default defineComponent({
             next: next
         };
         const themeRef = useTheme('Carousel', '-carousel', style, carouselLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { dotSize, dotColor, dotColorActive, dotColorFocus, dotLineWidth, dotLineWidthActive, arrowColor } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-dot-color': dotColor,
+                '--n-dot-color-focus': dotColorFocus,
+                '--n-dot-color-active': dotColorActive,
+                '--n-dot-size': dotSize,
+                '--n-dot-line-width': dotLineWidth,
+                '--n-dot-line-width-active': dotLineWidthActive,
+                '--n-arrow-color': arrowColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('carousel', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign(Object.assign({ mergedClsPrefix: mergedClsPrefixRef, selfElRef, slideVNodes: slideVNodesRef, duplicatedable: duplicatedableRef, userWantsControl: userWantsControlRef, autoSlideSize: autoSlideSizeRef, displayIndex: displayIndexRef, realIndex: realIndexRef, slideStyles: slideStylesRef, translateStyle: translateStyleRef, handleTouchstart,
             handleTransitionEnd,
             handleMousewheel,
             handleResize,
-            handleSlideResize, isActive: isDisplayActive }, caroulseSlotProps), caroulseExposedMethod), { cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { dotSize, dotColor, dotColorActive, dotColorFocus, dotLineWidth, dotLineWidthActive, arrowColor } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-dot-color': dotColor,
-                    '--n-dot-color-focus': dotColorFocus,
-                    '--n-dot-color-active': dotColorActive,
-                    '--n-dot-size': dotSize,
-                    '--n-dot-line-width': dotLineWidth,
-                    '--n-dot-line-width-active': dotLineWidthActive,
-                    '--n-arrow-color': arrowColor
-                };
-            }) });
+            handleSlideResize, isActive: isDisplayActive }, caroulseSlotProps), caroulseExposedMethod), { 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() {
+        var _a;
         const { mergedClsPrefix, showArrow, userWantsControl, draggable, touchable, slideStyles, dotType, dotPlacement, transitionProps = {}, arrowSlotProps, dotSlotProps, $slots: { default: defaultSlot, dots: dotsSlot, arrow: arrowSlot } } = this;
         const children = (defaultSlot && flatten(defaultSlot())) || [];
         let slides = filterCarouselItem(children);
@@ -712,7 +717,9 @@ export default defineComponent({
                 default: () => slide
             })));
         }
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { ref: "selfElRef", class: [
+                this.themeClass,
                 `${mergedClsPrefix}-carousel`,
                 this.direction === 'vertical' &&
                     `${mergedClsPrefix}-carousel--vertical`,
@@ -730,11 +737,13 @@ export default defineComponent({
                     : slides))
             }),
             this.showDots &&
-                (dotsSlot
-                    ? dotsSlot(dotSlotProps)
-                    : dotSlotProps.total > 1 && (h(NCarouselDots, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))),
+                resolveSlotWithProps(dotsSlot, dotSlotProps, () => [
+                    dotSlotProps.total > 1 && (h(NCarouselDots, { key: dotType + dotPlacement, total: dotSlotProps.total, currentIndex: dotSlotProps.currentIndex, dotType: dotType, trigger: this.trigger, keyboard: this.keyboard }))
+                ]),
             showArrow &&
-                (arrowSlot ? arrowSlot(arrowSlotProps) : h(NCarouselArrow, null))));
+                resolveSlotWithProps(arrowSlot, arrowSlotProps, () => [
+                    h(NCarouselArrow, null)
+                ])));
     }
 });
 function filterCarouselItem(vnodes, carouselItems = []) {