naive-ui 2.24.6 → 2.25.2

package/es/card/src/Card.js

@@ -1,6 +1,6 @@
 import { h, defineComponent, computed } from 'vue';
 import { getPadding } from 'seemly';
-import { useConfig, useTheme } from '../../_mixins';
+import { emptyThemeClassHandle, useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call, createKey, keysOf } from '../../_utils';
 import { NBaseClose } from '../../_internal';
 import { cardLight } from '../styles';
@@ -10,6 +10,7 @@ export const cardBaseProps = {
     title: String,
     contentStyle: [Object, String],
     headerStyle: [Object, String],
+    headerExtraStyle: [Object, String],
     footerStyle: [Object, String],
     embedded: Boolean,
     segmented: {
@@ -44,49 +45,52 @@ export default defineComponent({
                 call(onClose);
         };
         const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
-        const themeRef = useTheme('Card', 'Card', style, cardLight, props, mergedClsPrefixRef);
+        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const themeRef = useTheme('Card', '-card', style, cardLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
-        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
-                };
-            })
-        };
+        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 = disableInlineTheme
+            ? useThemeClass('card', computed(() => {
+                return props.size[0];
+            }), cssVarsRef, props)
+            : emptyThemeClassHandle;
+        return Object.assign({ rtlEnabled: rtlEnabledRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, handleCloseClick, cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
     },
     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'
@@ -103,7 +107,7 @@ export default defineComponent({
             $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` }, $slots['header-extra']())) : null,
+                $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,

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.js

@@ -671,7 +671,7 @@ export default defineComponent({
             prev: prev,
             next: next
         };
-        const themeRef = useTheme('Carousel', 'Carousel', style, carouselLight, props);
+        const themeRef = useTheme('Carousel', '-carousel', style, carouselLight, props, mergedClsPrefixRef);
         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,
@@ -714,6 +714,9 @@ export default defineComponent({
         }
         return (h("div", { ref: "selfElRef", class: [
                 `${mergedClsPrefix}-carousel`,
+                this.direction === 'vertical' &&
+                    `${mergedClsPrefix}-carousel--vertical`,
+                this.showArrow && `${mergedClsPrefix}-carousel--show-arrow`,
                 `${mergedClsPrefix}-carousel--${dotPlacement}`,
                 `${mergedClsPrefix}-carousel--${this.direction}`,
                 `${mergedClsPrefix}-carousel--${this.effect}`,

package/es/carousel/src/CarouselArrow.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, inject, Fragment } from 'vue';
+import { h, defineComponent, inject } from 'vue';
 import { useConfig } from '../../_mixins';
 import { carouselMethodsInjectionKey } from './interface';
 const backwardIcon = (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
@@ -25,19 +25,16 @@ export default defineComponent({
     },
     render() {
         const { mergedClsPrefix } = this;
-        const isVertical = this.isVertical();
-        return (h(Fragment, null,
+        return (h("div", { class: `${mergedClsPrefix}-carousel__arrow-group` },
             h("div", { class: [
                     `${mergedClsPrefix}-carousel__arrow`,
-                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'bottom' : 'right'}`,
-                    this.isNextDisabled() &&
+                    this.isPrevDisabled() &&
                         `${mergedClsPrefix}-carousel__arrow--disabled`
-                ], role: "button", onClick: this.next }, forwardIcon),
+                ], role: "button", onClick: this.prev }, backwardIcon),
             h("div", { class: [
                     `${mergedClsPrefix}-carousel__arrow`,
-                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'top' : 'left'}`,
-                    this.isPrevDisabled() &&
+                    this.isNextDisabled() &&
                         `${mergedClsPrefix}-carousel__arrow--disabled`
-                ], role: "button", onClick: this.prev }, backwardIcon)));
+                ], role: "button", onClick: this.next }, forwardIcon)));
     }
 });

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

@@ -64,57 +64,24 @@ export default cB('carousel', `
  width: var(--n-dot-line-width-active);
  background-color: var(--n-dot-color-active);
  `)])])]), cE('arrow', `
- position: absolute;
- transition: transform .3s var(--n-bezier);
- transform: scale(1);
+ transition: background-color .3s var(--n-bezier);
  cursor: pointer;
- height: 36px;
- width: 36px;
+ height: 28px;
+ width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
+ background-color: rgba(255, 255, 255, .2);
  color: var(--n-arrow-color);
+ border-radius: 8px;
  user-select: none;
- `, [cM('right', `
- transform: translateY(-50%);
- top: 50%;
- right: -2px;
- `, [c('&:hover', {
-  transform: 'translateY(-50%) scale(1.1)'
-}), c('&:active', {
-  transform: 'translateY(-50%) scale(1)'
-})]), cM('left', `
- transform: translateY(-50%);
- top: 50%;
- left: -2px;
- `, [c('&:hover', {
-  transform: 'translateY(-50%) scale(1.1)'
-}), c('&:active', {
-  transform: 'translateY(-50%) scale(1)'
-})]), cM('top', `
- transform: translateX(-50%) rotate(90deg);
- top: -2px;
- left: 50%;
- `, [c('&:hover', {
-  transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
-}), c('&:active', {
-  transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), cM('bottom', `
- transform: translateX(-50%) rotate(90deg);
- bottom: -2px;
- left: 50%
- `, [c('&:hover', {
-  transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
-}), c('&:active', {
-  transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), cM('disabled', `
- opacity: 0.6;
- cursor: auto;
- pointer-events: none;
- `), c('svg', {
-  height: '100%',
-  width: '100%'
-})]), cM('vertical', [cE('slides', `
+ font-size: 18px;
+ `, [c('svg', `
+ height: 1em;
+ width: 1em;
+ `), c('&:hover', `
+ background-color: rgba(255, 255, 255, .3);
+ `)]), cM('vertical', [cE('slides', `
  flex-direction: column;
  touch-action: pan-x;
  `), cM('fade', [cE('slide', `
@@ -154,7 +121,35 @@ export default cB('carousel', `
  height: var(--n-dot-line-width-active);
  `)])])]), cE('dot', `
  margin: 4px 0;
+ `)]), cE('arrow-group', `
+ position: absolute;
+ display: flex;
+ flex-wrap: nowrap;
+ `), cM('vertical', [cE('arrow', `
+ transform: rotate(90deg);
+ `)]), cM('show-arrow', [cM('bottom', [cE('dots', `
+ transform: translateX(0);
+ bottom: 18px;
+ left: 18px;
+ `)]), cM('top', [cE('dots', `
+ transform: translateX(0);
+ top: 18px;
+ left: 18px;
+ `)]), cM('left', [cE('dots', `
+ transform: translateX(0);
+ top: 18px;
+ left: 18px;
  `)]), cM('right', [cE('dots', `
+ transform: translateX(0);
+ top: 18px;
+ right: 18px;
+ `)])]), cM('left', [cE('arrow-group', `
+ bottom: 12px;
+ left: 12px;
+ flex-direction: column;
+ `, [c('> *:first-child', `
+ margin-bottom: 12px;
+ `)])]), cM('right', [cE('dots', `
  transform: translateY(-50%);
  top: 50%;
  right: 12px;
@@ -172,7 +167,13 @@ export default cB('carousel', `
  height: var(--n-dot-line-width-active);
  `)])])]), cE('dot', `
  margin: 4px 0;
- `)]), cM('top', [cE('dots', `
+ `), cE('arrow-group', `
+ bottom: 12px;
+ right: 12px;
+ flex-direction: column;
+ `, [c('> *:first-child', `
+ margin-bottom: 12px;
+ `)])]), cM('top', [cE('dots', `
  transform: translateX(-50%);
  top: 12px;
  left: 50%;
@@ -180,7 +181,12 @@ export default cB('carousel', `
  margin: 0 4px;
  `)])]), cE('dot', `
  margin: 0 4px;
- `)]), cM('bottom', [cE('dots', `
+ `), cE('arrow-group', `
+ top: 12px;
+ right: 12px;
+ `, [c('> *:first-child', `
+ margin-right: 12px;
+ `)])]), cM('bottom', [cE('dots', `
  transform: translateX(-50%);
  bottom: 12px;
  left: 50%;
@@ -188,7 +194,12 @@ export default cB('carousel', `
  margin: 0 4px;
  `)])]), cE('dot', `
  margin: 0 4px;
- `)]), cM('fade', [cE('slide', `
+ `), cE('arrow-group', `
+ bottom: 12px;
+ right: 12px;
+ `, [c('> *:first-child', `
+ margin-right: 12px;
+ `)])]), cM('fade', [cE('slide', `
  position: absolute;
  left: 50%;
  opacity: 0;

package/es/carousel/styles/light.js

@@ -2,12 +2,12 @@ import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
     return {
         dotSize: '8px',
-        dotColor: 'rgba(255, 255, 255, .25)',
+        dotColor: 'rgba(255, 255, 255, .3)',
         dotColorActive: 'rgba(255, 255, 255, 1)',
         dotColorFocus: 'rgba(255, 255, 255, .5)',
         dotLineWidth: '16px',
         dotLineWidthActive: '24px',
-        arrowColor: 'rgba(255, 255, 255, .5)'
+        arrowColor: '#eee'
     };
 };
 const carouselLight = {