naive-ui 2.24.6 → 2.25.2

package/lib/card/src/Card.js

@@ -16,6 +16,7 @@ exports.cardBaseProps = {
     title: String,
     contentStyle: [Object, String],
     headerStyle: [Object, String],
+    headerExtraStyle: [Object, String],
     footerStyle: [Object, String],
     embedded: Boolean,
     segmented: {
@@ -50,49 +51,52 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, _utils_1.call)(onClose);
         };
         const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Card', 'Card', index_cssr_1.default, styles_1.cardLight, props, mergedClsPrefixRef);
+        const disableInlineTheme = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme;
+        const themeRef = (0, _mixins_1.useTheme)('Card', '-card', index_cssr_1.default, styles_1.cardLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.default)('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
-        return {
-            rtlEnabled: rtlEnabledRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedTheme: themeRef,
-            handleCloseClick,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
-                const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, 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 { 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-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 = (0, vue_1.computed)(() => {
+            const { size } = props;
+            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, 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 { 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-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
+            ? (0, _mixins_1.useThemeClass)('card', (0, vue_1.computed)(() => {
+                return props.size[0];
+            }), cssVarsRef, props)
+            : _mixins_1.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 ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-card`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
                     [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'
@@ -109,7 +113,7 @@ exports.default = (0, vue_1.defineComponent)({
             $slots.cover ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, $slots.cover())) : null,
             $slots.header || 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" }, $slots.header ? $slots.header() : this.title),
-                $slots['header-extra'] ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra` }, $slots['header-extra']())) : null,
+                $slots['header-extra'] ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-header__extra`, style: this.headerExtraStyle }, $slots['header-extra']())) : null,
                 this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null,
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, $slots),
             $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, $slots.footer())) : null,

package/lib/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/lib/card/styles/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "cardDark", { enumerable: true, get: function ()
 var light_1 = require("./light");
 Object.defineProperty(exports, "cardLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
 var rtl_1 = require("./rtl");
-Object.defineProperty(exports, "cardRtl", { enumerable: true, get: function () { return __importDefault(rtl_1).default; } });
+Object.defineProperty(exports, "cardRtl", { enumerable: true, get: function () { return rtl_1.cardRtl; } });

package/lib/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/lib/card/styles/rtl.js

@@ -3,8 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardRtl = void 0;
 const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
-exports.default = {
+exports.cardRtl = {
     name: 'Card',
     style: rtl_cssr_1.default
 };

package/lib/carousel/src/Carousel.js

@@ -676,7 +676,7 @@ exports.default = (0, vue_1.defineComponent)({
             prev: prev,
             next: next
         };
-        const themeRef = (0, _mixins_1.useTheme)('Carousel', 'Carousel', index_cssr_1.default, styles_1.carouselLight, props);
+        const themeRef = (0, _mixins_1.useTheme)('Carousel', '-carousel', index_cssr_1.default, styles_1.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,
@@ -719,6 +719,9 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return ((0, vue_1.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/lib/carousel/src/CarouselArrow.js

@@ -27,19 +27,16 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedClsPrefix } = this;
-        const isVertical = this.isVertical();
-        return ((0, vue_1.h)(vue_1.Fragment, null,
+        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-carousel__arrow-group` },
             (0, vue_1.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),
             (0, vue_1.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/lib/carousel/src/styles/index.cssr.js

@@ -71,57 +71,24 @@ exports.default = (0, cssr_1.cB)('carousel', `
  width: var(--n-dot-line-width-active);
  background-color: var(--n-dot-color-active);
  `)])])]), (0, cssr_1.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;
- `, [(0, cssr_1.cM)('right', `
- transform: translateY(-50%);
- top: 50%;
- right: -2px;
- `, [(0, cssr_1.c)('&:hover', {
-  transform: 'translateY(-50%) scale(1.1)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'translateY(-50%) scale(1)'
-})]), (0, cssr_1.cM)('left', `
- transform: translateY(-50%);
- top: 50%;
- left: -2px;
- `, [(0, cssr_1.c)('&:hover', {
-  transform: 'translateY(-50%) scale(1.1)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'translateY(-50%) scale(1)'
-})]), (0, cssr_1.cM)('top', `
- transform: translateX(-50%) rotate(90deg);
- top: -2px;
- left: 50%;
- `, [(0, cssr_1.c)('&:hover', {
-  transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), (0, cssr_1.cM)('bottom', `
- transform: translateX(-50%) rotate(90deg);
- bottom: -2px;
- left: 50%
- `, [(0, cssr_1.c)('&:hover', {
-  transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), (0, cssr_1.cM)('disabled', `
- opacity: 0.6;
- cursor: auto;
- pointer-events: none;
- `), (0, cssr_1.c)('svg', {
-  height: '100%',
-  width: '100%'
-})]), (0, cssr_1.cM)('vertical', [(0, cssr_1.cE)('slides', `
+ font-size: 18px;
+ `, [(0, cssr_1.c)('svg', `
+ height: 1em;
+ width: 1em;
+ `), (0, cssr_1.c)('&:hover', `
+ background-color: rgba(255, 255, 255, .3);
+ `)]), (0, cssr_1.cM)('vertical', [(0, cssr_1.cE)('slides', `
  flex-direction: column;
  touch-action: pan-x;
  `), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
@@ -161,7 +128,35 @@ exports.default = (0, cssr_1.cB)('carousel', `
  height: var(--n-dot-line-width-active);
  `)])])]), (0, cssr_1.cE)('dot', `
  margin: 4px 0;
+ `)]), (0, cssr_1.cE)('arrow-group', `
+ position: absolute;
+ display: flex;
+ flex-wrap: nowrap;
+ `), (0, cssr_1.cM)('vertical', [(0, cssr_1.cE)('arrow', `
+ transform: rotate(90deg);
+ `)]), (0, cssr_1.cM)('show-arrow', [(0, cssr_1.cM)('bottom', [(0, cssr_1.cE)('dots', `
+ transform: translateX(0);
+ bottom: 18px;
+ left: 18px;
+ `)]), (0, cssr_1.cM)('top', [(0, cssr_1.cE)('dots', `
+ transform: translateX(0);
+ top: 18px;
+ left: 18px;
+ `)]), (0, cssr_1.cM)('left', [(0, cssr_1.cE)('dots', `
+ transform: translateX(0);
+ top: 18px;
+ left: 18px;
  `)]), (0, cssr_1.cM)('right', [(0, cssr_1.cE)('dots', `
+ transform: translateX(0);
+ top: 18px;
+ right: 18px;
+ `)])]), (0, cssr_1.cM)('left', [(0, cssr_1.cE)('arrow-group', `
+ bottom: 12px;
+ left: 12px;
+ flex-direction: column;
+ `, [(0, cssr_1.c)('> *:first-child', `
+ margin-bottom: 12px;
+ `)])]), (0, cssr_1.cM)('right', [(0, cssr_1.cE)('dots', `
  transform: translateY(-50%);
  top: 50%;
  right: 12px;
@@ -179,7 +174,13 @@ exports.default = (0, cssr_1.cB)('carousel', `
  height: var(--n-dot-line-width-active);
  `)])])]), (0, cssr_1.cE)('dot', `
  margin: 4px 0;
- `)]), (0, cssr_1.cM)('top', [(0, cssr_1.cE)('dots', `
+ `), (0, cssr_1.cE)('arrow-group', `
+ bottom: 12px;
+ right: 12px;
+ flex-direction: column;
+ `, [(0, cssr_1.c)('> *:first-child', `
+ margin-bottom: 12px;
+ `)])]), (0, cssr_1.cM)('top', [(0, cssr_1.cE)('dots', `
  transform: translateX(-50%);
  top: 12px;
  left: 50%;
@@ -187,7 +188,12 @@ exports.default = (0, cssr_1.cB)('carousel', `
  margin: 0 4px;
  `)])]), (0, cssr_1.cE)('dot', `
  margin: 0 4px;
- `)]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cE)('dots', `
+ `), (0, cssr_1.cE)('arrow-group', `
+ top: 12px;
+ right: 12px;
+ `, [(0, cssr_1.c)('> *:first-child', `
+ margin-right: 12px;
+ `)])]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cE)('dots', `
  transform: translateX(-50%);
  bottom: 12px;
  left: 50%;
@@ -195,7 +201,12 @@ exports.default = (0, cssr_1.cB)('carousel', `
  margin: 0 4px;
  `)])]), (0, cssr_1.cE)('dot', `
  margin: 0 4px;
- `)]), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
+ `), (0, cssr_1.cE)('arrow-group', `
+ bottom: 12px;
+ right: 12px;
+ `, [(0, cssr_1.c)('> *:first-child', `
+ margin-right: 12px;
+ `)])]), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
  position: absolute;
  left: 50%;
  opacity: 0;

package/lib/carousel/styles/light.js

@@ -5,12 +5,12 @@ const common_1 = require("../../_styles/common");
 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'
     };
 };
 exports.self = self;