naive-ui 2.38.2 → 2.40.0

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

@@ -15,7 +15,7 @@ export declare const carouselProps: {
         default: string;
     };
     dotPlacement: {
-        type: PropType<"left" | "right" | "top" | "bottom">;
+        type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
     slidesPerView: {
@@ -41,7 +41,7 @@ export declare const carouselProps: {
         default: boolean;
     };
     effect: {
-        type: PropType<"card" | "slide" | "fade" | "custom">;
+        type: PropType<"slide" | "fade" | "card" | "custom">;
         default: string;
     };
     showDots: {
@@ -53,13 +53,13 @@ export declare const carouselProps: {
         default: string;
     };
     transitionStyle: {
-        type: PropType<Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>>;
+        type: PropType<TransitionStyle>;
         default: () => TransitionStyle;
     };
     transitionProps: PropType<TransitionProps>;
     draggable: BooleanConstructor;
-    prevSlideStyle: PropType<string | CSSProperties>;
-    nextSlideStyle: PropType<string | CSSProperties>;
+    prevSlideStyle: PropType<CSSProperties | string>;
+    nextSlideStyle: PropType<CSSProperties | string>;
     touchable: {
         type: BooleanConstructor;
         default: boolean;
@@ -109,7 +109,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     dotPlacement: {
-        type: PropType<"left" | "right" | "top" | "bottom">;
+        type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
     slidesPerView: {
@@ -135,7 +135,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     effect: {
-        type: PropType<"card" | "slide" | "fade" | "custom">;
+        type: PropType<"slide" | "fade" | "card" | "custom">;
         default: string;
     };
     showDots: {
@@ -147,13 +147,13 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     transitionStyle: {
-        type: PropType<Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>>;
-        default: () => Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>;
+        type: PropType<TransitionStyle>;
+        default: () => TransitionStyle;
     };
     transitionProps: PropType<TransitionProps>;
     draggable: BooleanConstructor;
-    prevSlideStyle: PropType<string | CSSProperties>;
-    nextSlideStyle: PropType<string | CSSProperties>;
+    prevSlideStyle: PropType<CSSProperties | string>;
+    nextSlideStyle: PropType<CSSProperties | string>;
     touchable: {
         type: BooleanConstructor;
         default: boolean;
@@ -210,9 +210,7 @@ declare const _default: import("vue").DefineComponent<{
     selfElRef: Ref<HTMLDivElement | null>;
     slidesElRef: Ref<HTMLDivElement | null>;
     slideVNodes: {
-        value: VNode<import("vue").RendererNode, import("vue").RendererElement, {
-            [key: string]: any;
-        }>[];
+        value: VNode[];
     };
     duplicatedable: import("vue").ComputedRef<boolean>;
     userWantsControl: import("vue").ComputedRef<boolean>;
@@ -245,7 +243,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     dotPlacement: {
-        type: PropType<"left" | "right" | "top" | "bottom">;
+        type: PropType<"top" | "bottom" | "left" | "right">;
         default: string;
     };
     slidesPerView: {
@@ -271,7 +269,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     effect: {
-        type: PropType<"card" | "slide" | "fade" | "custom">;
+        type: PropType<"slide" | "fade" | "card" | "custom">;
         default: string;
     };
     showDots: {
@@ -283,13 +281,13 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     transitionStyle: {
-        type: PropType<Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>>;
-        default: () => Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>;
+        type: PropType<TransitionStyle>;
+        default: () => TransitionStyle;
     };
     transitionProps: PropType<TransitionProps>;
     draggable: BooleanConstructor;
-    prevSlideStyle: PropType<string | CSSProperties>;
-    nextSlideStyle: PropType<string | CSSProperties>;
+    prevSlideStyle: PropType<CSSProperties | string>;
+    nextSlideStyle: PropType<CSSProperties | string>;
     touchable: {
         type: BooleanConstructor;
         default: boolean;

package/es/carousel/src/Carousel.mjs

@@ -1,13 +1,12 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { h, defineComponent, ref, cloneVNode, computed, onBeforeUnmount, watch, withDirectives, vShow, Transition, toRef, nextTick, onMounted, watchEffect, normalizeStyle, onUpdated } from 'vue';
+import { Transition, cloneVNode, computed, defineComponent, h, nextTick, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, ref, toRef, vShow, watch, watchEffect, withDirectives } from 'vue';
 import { VResizeObserver } from 'vueuc';
 import { useMergedState } from 'vooks';
-import { on, off } from 'evtd';
+import { off, on } from 'evtd';
 import { getPreciseEventTarget } from 'seemly';
 import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { flatten, keep, resolveSlotWithProps } from "../../_utils/index.mjs";
 import { carouselLight } from "../styles/index.mjs";
-import { calculateSize, clampValue, resolveSpeed, isTouchEvent, getNextIndex, getPrevIndex, getDisplayIndex, getRealIndex, getDisplayTotalView, addDuplicateSlides } from "./utils/index.mjs";
+import { addDuplicateSlides, calculateSize, clampValue, getDisplayIndex, getDisplayTotalView, getNextIndex, getPrevIndex, getRealIndex, isTouchEvent, resolveSpeed } from "./utils/index.mjs";
 import { provideCarouselContext } from "./CarouselContext.mjs";
 import NCarouselDots from "./CarouselDots.mjs";
 import NCarouselArrow from "./CarouselArrow.mjs";
@@ -314,6 +313,7 @@ export default defineComponent({
       return getRealNextIndex() === null;
     }
     // To
+    let expectedTransitionDirection = 0;
     function to(index) {
       const realIndex = clampValue(getRealIndex(index, duplicatedableRef.value), 0, totalViewRef.value);
       if (index !== mergedDisplayIndexRef.value || realIndex !== realIndexRef.value) {
@@ -322,20 +322,26 @@ export default defineComponent({
     }
     function prev() {
       const prevIndex = getRealPrevIndex();
-      if (prevIndex !== null) toRealIndex(prevIndex);
+      if (prevIndex !== null) {
+        expectedTransitionDirection = -1;
+        toRealIndex(prevIndex);
+      }
     }
     function next() {
       const nextIndex = getRealNextIndex();
-      if (nextIndex !== null) toRealIndex(nextIndex);
+      if (nextIndex !== null) {
+        expectedTransitionDirection = 1;
+        toRealIndex(nextIndex);
+      }
     }
+    // Translate to
+    let inTransition = false;
     function prevIfSlideTransitionEnd() {
       if (!inTransition || !duplicatedableRef.value) prev();
     }
     function nextIfSlideTransitionEnd() {
       if (!inTransition || !duplicatedableRef.value) next();
     }
-    // Translate to
-    let inTransition = false;
     // record the translate of each slide, so that it can be restored at touch
     let previousTranslate = 0;
     const translateStyleRef = ref({});
@@ -452,6 +458,13 @@ export default defineComponent({
         return normalizeStyle(styles);
       }
     }
+    // Drag
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let dragOffset = 0;
+    let dragStartTime = 0;
+    let dragging = false;
+    let isEffectiveDrag = false;
     function onCarouselItemClick(index, event) {
       let allowClick = !inTransition && !dragging && !isEffectiveDrag;
       if (props.effect === 'card' && allowClick && !isRealActive(index)) {
@@ -478,13 +491,6 @@ export default defineComponent({
         autoplayTimer = window.setInterval(next, props.interval);
       }
     }
-    // Drag
-    let dragStartX = 0;
-    let dragStartY = 0;
-    let dragOffset = 0;
-    let dragStartTime = 0;
-    let dragging = false;
-    let isEffectiveDrag = false;
     function handleTouchstart(event) {
       var _a;
       if (globalDragging) return;
@@ -559,9 +565,9 @@ export default defineComponent({
         const perViewSize = perViewSizeRef.value[axis];
         // more than 50% width or faster than 0.4px per ms
         if (dragOffset > perViewSize / 2 || dragOffset / timeElapsed > 0.4) {
-          currentIndex = getRealPrevIndex(realIndex);
+          prev();
         } else if (dragOffset < -perViewSize / 2 || dragOffset / timeElapsed < -0.4) {
-          currentIndex = getRealNextIndex(realIndex);
+          next();
         }
       }
       if (currentIndex !== null && currentIndex !== realIndex) {
@@ -674,9 +680,7 @@ export default defineComponent({
         value: slideVNodes
       } = slideVNodesRef;
       const indexMap = new Map();
-      const getDisplayIndex = el =>
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      indexMap.has(el) ? indexMap.get(el) : -1;
+      const getDisplayIndex = el => indexMap.has(el) ? indexMap.get(el) : -1;
       let isChanged = false;
       for (let i = 0; i < slidesEls.length; i++) {
         const index = slideVNodes.findIndex(v => v.el === slidesEls[i]);
@@ -689,24 +693,28 @@ export default defineComponent({
         slidesEls.sort((a, b) => getDisplayIndex(a) - getDisplayIndex(b));
       }
     });
-    watch(realIndexRef, (realIndex, lastRealIndex) => {
-      if (realIndex === lastRealIndex) return;
+    watch(realIndexRef, (nextRealIndex, lastRealIndex) => {
+      if (nextRealIndex === lastRealIndex) {
+        expectedTransitionDirection = 0;
+        return;
+      }
       resetAutoplay();
       if (sequenceLayoutRef.value) {
         if (duplicatedableRef.value) {
           const {
             value: length
           } = totalViewRef;
-          if (displayTotalViewRef.value > 2 && realIndex === length - 2 && lastRealIndex === 1) {
-            realIndex = 0;
-          } else if (realIndex === 1 && lastRealIndex === length - 2) {
-            realIndex = length - 1;
+          if (expectedTransitionDirection === -1 && lastRealIndex === 1 && nextRealIndex === length - 2) {
+            nextRealIndex = 0;
+          } else if (expectedTransitionDirection === 1 && lastRealIndex === length - 2 && nextRealIndex === 1) {
+            nextRealIndex = length - 1;
           }
         }
-        translateTo(realIndex, speedRef.value);
+        translateTo(nextRealIndex, speedRef.value);
       } else {
         fixTranslate();
       }
+      expectedTransitionDirection = 0;
     }, {
       immediate: true
     });
@@ -714,7 +722,9 @@ export default defineComponent({
       toRealIndex(realIndexRef.value);
     }));
     watch(slideTranlatesRef, () => {
-      sequenceLayoutRef.value && fixTranslate();
+      if (sequenceLayoutRef.value) {
+        fixTranslate();
+      }
     }, {
       deep: true
     });

package/es/carousel/src/CarouselArrow.mjs

@@ -1,4 +1,4 @@
-import { h, defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
 import { useConfig } from "../../_mixins/index.mjs";
 import { useCarouselContext } from "./CarouselContext.mjs";
 const backwardIcon = h("svg", {

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

@@ -17,5 +17,5 @@ export interface CarouselContextValue {
     removeSlide: (slide?: HTMLElement) => void;
     onCarouselItemClick: (index: number, event: MouseEvent) => void;
 }
-export declare const provideCarouselContext: (contextValue: CarouselContextValue) => void;
-export declare const useCarouselContext: (location?: string, component?: string) => CarouselContextValue;
+export declare function provideCarouselContext(contextValue: CarouselContextValue): void;
+export declare function useCarouselContext(location?: string, component?: string): CarouselContextValue;

package/es/carousel/src/CarouselContext.mjs

@@ -1,13 +1,13 @@
 import { inject, provide } from 'vue';
 import { createInjectionKey, throwError } from "../../_utils/index.mjs";
 const carouselMethodsInjectionKey = createInjectionKey('n-carousel-methods');
-export const provideCarouselContext = contextValue => {
+export function provideCarouselContext(contextValue) {
   provide(carouselMethodsInjectionKey, contextValue);
-};
-export const useCarouselContext = (location = 'unknown', component = 'component') => {
+}
+export function useCarouselContext(location = 'unknown', component = 'component') {
   const CarouselContext = inject(carouselMethodsInjectionKey);
   if (!CarouselContext) {
     throwError(location, `\`${component}\` must be placed inside \`n-carousel\`.`);
   }
   return CarouselContext;
-};
+}

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

@@ -10,7 +10,7 @@ declare const carouselDotsProps: {
         default: number;
     };
     dotType: {
-        type: PropType<"never" | "dot" | "line">;
+        type: PropType<"dot" | "line" | "never">;
         default: string;
     };
     trigger: {
@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     dotType: {
-        type: PropType<"never" | "dot" | "line">;
+        type: PropType<"dot" | "line" | "never">;
         default: string;
     };
     trigger: {
@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     dotType: {
-        type: PropType<"never" | "dot" | "line">;
+        type: PropType<"dot" | "line" | "never">;
         default: string;
     };
     trigger: {

package/es/carousel/src/CarouselDots.mjs

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, onBeforeUpdate } from 'vue';
+import { defineComponent, h, onBeforeUpdate, ref } from 'vue';
 import { indexMap } from 'seemly';
 import { useConfig } from "../../_mixins/index.mjs";
 import { useCarouselContext } from "./CarouselContext.mjs";

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

@@ -1,5 +1,5 @@
 import type { VNode } from 'vue';
-export declare const isCarouselItem: (child: VNode) => boolean;
+export declare function isCarouselItem(child: VNode): boolean;
 declare const _default: import("vue").DefineComponent<{}, {
     mergedClsPrefix: import("vue").Ref<string>;
     selfElRef: import("vue").Ref<HTMLElement | undefined>;

package/es/carousel/src/CarouselItem.mjs

@@ -1,12 +1,12 @@
-import { h, defineComponent, computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue';
 import { camelCase } from 'lodash-es';
 import { useConfig } from "../../_mixins/index.mjs";
 import { useCarouselContext } from "./CarouselContext.mjs";
 const CarouselItemName = 'CarouselItem';
-export const isCarouselItem = child => {
+export function isCarouselItem(child) {
   var _a;
   return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === CarouselItemName;
-};
+}
 export default defineComponent({
   name: CarouselItemName,
   setup(props) {

package/es/carousel/src/utils/index.mjs

@@ -7,8 +7,8 @@ export function calculateSize(element, innerOnly) {
   } = element;
   if (innerOnly) {
     const style = getComputedStyle(element);
-    width = width - parseFloat(style.getPropertyValue('padding-left')) - parseFloat(style.getPropertyValue('padding-right'));
-    height = height - parseFloat(style.getPropertyValue('padding-top')) - parseFloat(style.getPropertyValue('padding-bottom'));
+    width = width - Number.parseFloat(style.getPropertyValue('padding-left')) - Number.parseFloat(style.getPropertyValue('padding-right'));
+    height = height - Number.parseFloat(style.getPropertyValue('padding-top')) - Number.parseFloat(style.getPropertyValue('padding-bottom'));
   }
   return {
     width,

package/es/carousel/styles/light.d.ts

@@ -1,6 +1,5 @@
-import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
-export declare const self: (vars: ThemeCommonVars) => {
+export declare function self(): {
     dotSize: string;
     dotColor: string;
     dotColorActive: string;

package/es/carousel/styles/light.mjs

@@ -1,5 +1,5 @@
 import { commonLight } from "../../_styles/common/index.mjs";
-export const self = vars => {
+export function self() {
   return {
     dotSize: '8px',
     dotColor: 'rgba(255, 255, 255, .3)',
@@ -9,7 +9,7 @@ export const self = vars => {
     dotLineWidthActive: '24px',
     arrowColor: '#eee'
   };
-};
+}
 const carouselLight = {
   name: 'Carousel',
   common: commonLight,