naive-ui 2.22.0 → 2.24.0

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

@@ -1,116 +1,118 @@
 import { asModal, c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --border-radius
-// --color
-// --color-modal
-// --color-popover
-// --text-color
-// --line-height
-// --padding-top
-// --padding-bottom
-// --padding-left
-// --font-size
-// --action-color
-// --title-font-weight
-// --title-font-size
-// --title-text-color
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --border-color
-// --close-size
-// --box-shadow
+// --n-bezier
+// --n-border-radius
+// --n-color
+// --n-color-modal
+// --n-color-popover
+// --n-text-color
+// --n-line-height
+// --n-padding-top
+// --n-padding-bottom
+// --n-padding-left
+// --n-font-size
+// --n-action-color
+// --n-title-font-weight
+// --n-title-font-size
+// --n-title-text-color
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-border-color
+// --n-close-size
+// --n-box-shadow
 
 export default c([cB('card', `
- font-size: var(--font-size);
- line-height: var(--line-height);
+ font-size: var(--n-font-size);
+ line-height: var(--n-line-height);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  position: relative;
- border-radius: var(--border-radius);
- background-color: var(--color);
- color: var(--text-color);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- border-color .3s var(--bezier);
- `, [cM('hoverable', [c('&:hover', 'box-shadow: var(--box-shadow);')]), cM('content-segmented', [c('>', [cE('content', {
-  paddingTop: 'var(--padding-bottom)'
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ `, [cM('hoverable', [c('&:hover', 'box-shadow: var(--n-box-shadow);')]), cM('content-segmented', [c('>', [cE('content', {
+  paddingTop: 'var(--n-padding-bottom)'
 })])]), cM('content-soft-segmented', [c('>', [cE('content', `
- margin: 0 var(--padding-left);
- padding: var(--padding-bottom) 0;
+ margin: 0 var(--n-padding-left);
+ padding: var(--n-padding-bottom) 0;
  `)])]), cM('footer-segmented', [c('>', [cE('footer', {
-  paddingTop: 'var(--padding-bottom)'
+  paddingTop: 'var(--n-padding-bottom)'
 })])]), cM('footer-soft-segmented', [c('>', [cE('footer', `
- padding: var(--padding-bottom) 0;
- margin: 0 var(--padding-left);
+ padding: var(--n-padding-bottom) 0;
+ margin: 0 var(--n-padding-left);
  `)])]), c('>', [cB('card-header', `
  box-sizing: border-box;
  display: flex;
  align-items: center;
- font-size: var(--title-font-size);
+ font-size: var(--n-title-font-size);
  padding:
- var(--padding-top)
- var(--padding-left)
- var(--padding-bottom)
- var(--padding-left);
+ var(--n-padding-top)
+ var(--n-padding-left)
+ var(--n-padding-bottom)
+ var(--n-padding-left);
  `, [cE('main', `
- 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);
  `), cE('extra', `
  display: flex;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  font-weight: 400;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `), cE('close', `
- font-size: var(--close-size);
- transition: color .3s var(--bezier);
+ font-size: var(--n-close-size);
+ transition: color .3s var(--n-bezier);
  `)]), cE('action', `
  box-sizing: border-box;
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  background-clip: padding-box;
- background-color: var(--action-color);
+ background-color: var(--n-action-color);
  `), cE('content', 'flex: 1;'), cE('content, footer', `
  box-sizing: border-box;
- padding: 0 var(--padding-left) var(--padding-bottom) var(--padding-left);
- font-size: var(--font-size);
+ padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
+ font-size: var(--n-font-size);
  `, [c('&:first-child', {
-  paddingTop: 'var(--padding-bottom)'
+  paddingTop: 'var(--n-padding-bottom)'
 })]), cE('action', `
- background-color: var(--action-color);
- padding: var(--padding-bottom) var(--padding-left);
+ background-color: var(--n-action-color);
+ padding: var(--n-padding-bottom) var(--n-padding-left);
+ border-bottom-left-radius: var(--n-border-radius);
+ border-bottom-right-radius: var(--n-border-radius);
  `)]), cB('card-cover', `
  overflow: hidden;
  width: 100%;
- border-radius: var(--border-radius) var(--border-radius) 0 0;
+ border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
  `, [c('img', `
  display: block;
  width: 100%;
  `)]), cM('bordered', `
- border: 1px solid var(--border-color);
- `, [c('&:target', 'border-color: var(--color-target);')]), cM('action-segmented', [c('>', [cE('action', [c('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+ border: 1px solid var(--n-border-color);
+ `, [c('&:target', 'border-color: var(--n-color-target);')]), cM('action-segmented', [c('>', [cE('action', [c('&:not(:first-child)', {
+  borderTop: '1px solid var(--n-border-color)'
 })])])]), cM('content-segmented, content-soft-segmented', [c('>', [cE('content', {
-  transition: 'border-color 0.3s var(--bezier)'
+  transition: 'border-color 0.3s var(--n-bezier)'
 }, [c('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+  borderTop: '1px solid var(--n-border-color)'
 })])])]), cM('footer-segmented, footer-soft-segmented', [c('>', [cE('footer', {
-  transition: 'border-color 0.3s var(--bezier)'
+  transition: 'border-color 0.3s var(--n-bezier)'
 }, [c('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+  borderTop: '1px solid var(--n-border-color)'
 })])])])]), insideModal(cB('card', {
-  background: 'var(--color-modal)'
+  background: 'var(--n-color-modal)'
 })), insidePopover(cB('card', {
-  background: 'var(--color-popover)'
+  background: 'var(--n-color-popover)'
 })), cB('card', [asModal({
-  background: 'var(--color-modal)'
+  background: 'var(--n-color-modal)'
 })])]);

package/es/carousel/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NCarousel } from './src/Carousel';
+export { default as NCarouselItem } from './src/CarouselItem';
 export type { CarouselProps } from './src/Carousel';

package/es/carousel/index.js

@@ -1 +1,2 @@
 export { default as NCarousel } from './src/Carousel';
+export { default as NCarouselItem } from './src/CarouselItem';

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

@@ -1,135 +1,351 @@
-import { PropType } from 'vue';
+import type { CSSProperties, PropType, Ref, TransitionProps, VNode } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
+import type { ElementOf } from './interface';
+declare const transitionProperties: ["transitionDuration", "transitionTimingFunction"];
+declare type TransitionStyle = Partial<Pick<CSSProperties, ElementOf<typeof transitionProperties>>>;
 declare const carouselProps: {
+    defaultIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    currentIndex: NumberConstructor;
     showArrow: BooleanConstructor;
-    autoplay: BooleanConstructor;
+    dotType: {
+        type: PropType<"dot" | "line">;
+        default: string;
+    };
     dotPlacement: {
         type: PropType<"left" | "right" | "bottom" | "top">;
         default: string;
     };
+    slidesPerView: {
+        type: PropType<number | "auto">;
+        default: number;
+    };
+    spaceBetween: {
+        type: NumberConstructor;
+        default: number;
+    };
+    centeredSlides: BooleanConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    autoplay: BooleanConstructor;
     interval: {
         type: NumberConstructor;
         default: number;
     };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    effect: {
+        type: PropType<"slide" | "fade" | "custom">;
+        default: string;
+    };
+    showDots: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     trigger: {
         type: PropType<"click" | "hover">;
         default: string;
     };
+    transitionStyle: {
+        type: PropType<Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>>;
+        default: () => TransitionStyle;
+    };
+    transitionProps: PropType<TransitionProps>;
+    draggable: BooleanConstructor;
+    touchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mousewheel: BooleanConstructor;
+    keyboard: BooleanConstructor;
+    'onUpdate:currentIndex': PropType<(currentIndex: number, lastIndex: number) => void>;
+    onUpdateCurrentIndex: PropType<(currentIndex: number, lastIndex: number) => void>;
     theme: PropType<import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any>>>;
 };
 export declare type CarouselProps = ExtractPublicPropTypes<typeof carouselProps>;
 declare const _default: import("vue").DefineComponent<{
+    defaultIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    currentIndex: NumberConstructor;
     showArrow: BooleanConstructor;
-    autoplay: BooleanConstructor;
+    dotType: {
+        type: PropType<"dot" | "line">;
+        default: string;
+    };
     dotPlacement: {
         type: PropType<"left" | "right" | "bottom" | "top">;
         default: string;
     };
+    slidesPerView: {
+        type: PropType<number | "auto">;
+        default: number;
+    };
+    spaceBetween: {
+        type: NumberConstructor;
+        default: number;
+    };
+    centeredSlides: BooleanConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    autoplay: BooleanConstructor;
     interval: {
         type: NumberConstructor;
         default: number;
     };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    effect: {
+        type: PropType<"slide" | "fade" | "custom">;
+        default: string;
+    };
+    showDots: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     trigger: {
         type: PropType<"click" | "hover">;
         default: string;
     };
+    transitionStyle: {
+        type: PropType<Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>>;
+        default: () => Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>;
+    };
+    transitionProps: PropType<TransitionProps>;
+    draggable: BooleanConstructor;
+    touchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    mousewheel: BooleanConstructor;
+    keyboard: BooleanConstructor;
+    'onUpdate:currentIndex': PropType<(currentIndex: number, lastIndex: number) => void>;
+    onUpdateCurrentIndex: PropType<(currentIndex: number, lastIndex: number) => void>;
     theme: PropType<import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any>>>;
 }, {
-    selfElRef: import("vue").Ref<HTMLDivElement | null>;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
-    current: import("vue").Ref<number>;
-    lengthRef: {
-        value: number;
-    };
-    touching: import("vue").Ref<boolean>;
-    dragOffset: import("vue").Ref<number>;
+    cssVars: import("vue").ComputedRef<{
+        '--n-bezier': string;
+        '--n-dot-color': string;
+        '--n-dot-color-focus': string;
+        '--n-dot-color-active': string;
+        '--n-dot-size': string;
+        '--n-dot-line-width': string;
+        '--n-dot-line-width-active': string;
+        '--n-arrow-color': string;
+    }>;
+    getCurrentIndex: () => number;
+    to: (index: number) => void;
     prev: () => void;
     next: () => void;
-    setCurrent: (value: number) => void;
-    handleKeydown: (e: KeyboardEvent, current: number) => void;
-    handleTouchstart: (e: TouchEvent) => void;
-    handleTransitionEnd: (e: TransitionEvent) => void;
-    handleMouseenter: (current: number) => void;
-    cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--dot-color': string;
-        '--dot-color-active': string;
-        '--dot-size': string;
-        '--arrow-color': string;
+    arrowSlotProps: import("vue").ComputedRef<{
+        to: (index: number) => void;
+        prev: () => void;
+        next: () => void;
+        isVertical: () => boolean;
+        isPrevDisabled: () => boolean;
+        isNextDisabled: () => boolean;
+        isPrev: (slideOrIndex: HTMLElement | number) => boolean;
+        isNext: (slideOrIndex: HTMLElement | number) => boolean;
+        isActive: (slideOrIndex: HTMLElement | number) => boolean;
+        isHorizontal: () => boolean;
+        getCurrentIndex: () => number;
+        getSlideIndex: (slideOrIndex: HTMLElement | number) => number;
+        getSlideStyle: (slide: HTMLElement | number) => any;
+        addSlide: (slide?: HTMLElement | undefined) => void;
+        removeSlide: (slide?: HTMLElement | undefined) => void;
+        onCarouselItemClick: (index: number) => void;
+        total: number;
+        currentIndex: number;
+    }>;
+    dotSlotProps: import("vue").ComputedRef<{
+        total: number;
+        currentIndex: number;
+        to: (index: number) => void;
     }>;
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    selfElRef: Ref<HTMLDivElement | null>;
+    slideVNodes: {
+        value: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>[];
+    };
+    duplicatedable: import("vue").ComputedRef<boolean>;
+    userWantsControl: import("vue").ComputedRef<boolean>;
+    autoSlideSize: import("vue").ComputedRef<boolean>;
+    displayIndex: Ref<number>;
+    realIndex: Ref<number>;
+    slideStyles: import("vue").ComputedRef<{
+        [x: string]: string;
+    }[] | CSSProperties[]>;
+    translateStyle: Ref<CSSProperties>;
+    handleTouchstart: (event: MouseEvent | TouchEvent) => void;
+    handleTransitionEnd: () => void;
+    handleMousewheel: (event: WheelEvent) => void;
+    handleClick: (event: MouseEvent) => void;
+    handleResize: () => void;
+    handleSlideResize: () => void;
+    isActive: (index: number) => boolean;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    defaultIndex?: unknown;
+    currentIndex?: unknown;
     showArrow?: unknown;
-    autoplay?: unknown;
+    dotType?: unknown;
     dotPlacement?: unknown;
+    slidesPerView?: unknown;
+    spaceBetween?: unknown;
+    centeredSlides?: unknown;
+    direction?: unknown;
+    autoplay?: unknown;
     interval?: unknown;
+    loop?: unknown;
+    effect?: unknown;
+    showDots?: unknown;
     trigger?: unknown;
+    transitionStyle?: unknown;
+    transitionProps?: unknown;
+    draggable?: unknown;
+    touchable?: unknown;
+    mousewheel?: unknown;
+    keyboard?: unknown;
+    'onUpdate:currentIndex'?: unknown;
+    onUpdateCurrentIndex?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
 } & {
+    direction: "horizontal" | "vertical";
+    draggable: boolean;
     autoplay: boolean;
+    loop: boolean;
     trigger: "click" | "hover";
     showArrow: boolean;
+    keyboard: boolean;
+    dotType: "dot" | "line";
+    defaultIndex: number;
     dotPlacement: "left" | "right" | "bottom" | "top";
+    slidesPerView: number | "auto";
+    spaceBetween: number;
+    centeredSlides: boolean;
     interval: number;
+    effect: "slide" | "fade" | "custom";
+    showDots: boolean;
+    transitionStyle: Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>;
+    touchable: boolean;
+    mousewheel: boolean;
 } & {
     theme?: import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Carousel", {
         dotSize: string;
         dotColor: string;
         dotColorActive: string;
+        dotColorFocus: string;
+        dotLineWidth: string;
+        dotLineWidthActive: string;
         arrowColor: string;
     }, any>> | undefined;
+    currentIndex?: number | undefined;
+    transitionProps?: TransitionProps | undefined;
+    "onUpdate:currentIndex"?: ((currentIndex: number, lastIndex: number) => void) | undefined;
+    onUpdateCurrentIndex?: ((currentIndex: number, lastIndex: number) => void) | undefined;
 }>, {
+    direction: "horizontal" | "vertical";
+    draggable: boolean;
     autoplay: boolean;
+    loop: boolean;
     trigger: "click" | "hover";
     showArrow: boolean;
+    keyboard: boolean;
+    dotType: "dot" | "line";
+    defaultIndex: number;
     dotPlacement: "left" | "right" | "bottom" | "top";
+    slidesPerView: number | "auto";
+    spaceBetween: number;
+    centeredSlides: boolean;
     interval: number;
+    effect: "slide" | "fade" | "custom";
+    showDots: boolean;
+    transitionStyle: Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>;
+    touchable: boolean;
+    mousewheel: boolean;
 }>;
 export default _default;