naive-ui 2.23.2 → 2.24.0

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

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    isVertical: () => boolean;
+    isPrevDisabled: () => boolean;
+    isNextDisabled: () => boolean;
+    prev: () => void;
+    next: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+export default _default;

package/es/carousel/src/CarouselArrow.js

@@ -0,0 +1,43 @@
+import { h, defineComponent, inject, Fragment } 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" },
+    h("g", { fill: "none" },
+        h("path", { d: "M10.26 3.2a.75.75 0 0 1 .04 1.06L6.773 8l3.527 3.74a.75.75 0 1 1-1.1 1.02l-4-4.25a.75.75 0 0 1 0-1.02l4-4.25a.75.75 0 0 1 1.06-.04z", fill: "currentColor" }))));
+const forwardIcon = (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
+    h("g", { fill: "none" },
+        h("path", { d: "M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04z", fill: "currentColor" }))));
+export default defineComponent({
+    name: 'CarouselArrow',
+    setup(props) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        const { isVertical, isPrevDisabled, isNextDisabled, prev, next
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+         } = inject(carouselMethodsInjectionKey, null);
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            isVertical,
+            isPrevDisabled,
+            isNextDisabled,
+            prev,
+            next
+        };
+    },
+    render() {
+        const { mergedClsPrefix } = this;
+        const isVertical = this.isVertical();
+        return (h(Fragment, null,
+            h("div", { class: [
+                    `${mergedClsPrefix}-carousel__arrow`,
+                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'bottom' : 'right'}`,
+                    this.isNextDisabled() &&
+                        `${mergedClsPrefix}-carousel__arrow--disabled`
+                ], role: "button", onClick: this.next }, forwardIcon),
+            h("div", { class: [
+                    `${mergedClsPrefix}-carousel__arrow`,
+                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'top' : 'left'}`,
+                    this.isPrevDisabled() &&
+                        `${mergedClsPrefix}-carousel__arrow--disabled`
+                ], role: "button", onClick: this.prev }, backwardIcon)));
+    }
+});

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

@@ -0,0 +1,66 @@
+import type { PropType } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+declare const carouselDotsProps: {
+    total: {
+        type: NumberConstructor;
+        default: number;
+    };
+    currentIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    dotType: {
+        type: PropType<"never" | "dot" | "line">;
+        default: string;
+    };
+    trigger: {
+        type: PropType<"click" | "hover">;
+        default: string;
+    };
+    keyboard: BooleanConstructor;
+};
+export declare type CarouselDotsProps = ExtractPublicPropTypes<typeof carouselDotsProps>;
+declare const _default: import("vue").DefineComponent<{
+    total: {
+        type: NumberConstructor;
+        default: number;
+    };
+    currentIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    dotType: {
+        type: PropType<"never" | "dot" | "line">;
+        default: string;
+    };
+    trigger: {
+        type: PropType<"click" | "hover">;
+        default: string;
+    };
+    keyboard: BooleanConstructor;
+}, {
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    dotEls: import("vue").Ref<HTMLElement[]>;
+    handleKeydown: (e: KeyboardEvent, current: number) => void;
+    handleMouseenter: (current: number) => void;
+    handleClick: (current: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    total?: unknown;
+    currentIndex?: unknown;
+    dotType?: unknown;
+    trigger?: unknown;
+    keyboard?: unknown;
+} & {
+    trigger: "click" | "hover";
+    keyboard: boolean;
+    total: number;
+    currentIndex: number;
+    dotType: "never" | "dot" | "line";
+} & {}>, {
+    trigger: "click" | "hover";
+    keyboard: boolean;
+    total: number;
+    currentIndex: number;
+    dotType: "never" | "dot" | "line";
+}>;
+export default _default;

package/es/carousel/src/CarouselDots.js

@@ -0,0 +1,118 @@
+import { h, defineComponent, inject, ref, onBeforeUpdate } from 'vue';
+import { indexMap } from 'seemly';
+import { useConfig } from '../../_mixins';
+import { carouselMethodsInjectionKey } from './interface';
+const carouselDotsProps = {
+    total: {
+        type: Number,
+        default: 0
+    },
+    currentIndex: {
+        type: Number,
+        default: 0
+    },
+    dotType: {
+        type: String,
+        default: 'dot'
+    },
+    trigger: {
+        type: String,
+        default: 'click'
+    },
+    keyboard: Boolean
+};
+export default defineComponent({
+    name: 'CarouselDots',
+    props: carouselDotsProps,
+    setup(props) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        const dotElsRef = ref([]);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const NCarousel = inject(carouselMethodsInjectionKey, null);
+        function handleKeydown(e, current) {
+            switch (e.code) {
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    NCarousel.to(current);
+                    return;
+            }
+            if (props.keyboard) {
+                handleKeyboard(e);
+            }
+        }
+        function handleMouseenter(current) {
+            if (props.trigger === 'hover') {
+                NCarousel.to(current);
+            }
+        }
+        function handleClick(current) {
+            if (props.trigger === 'click') {
+                NCarousel.to(current);
+            }
+        }
+        function handleKeyboard(e) {
+            var _a;
+            const { code: keycode } = e;
+            const vertical = NCarousel.isVertical();
+            const isVerticalNext = keycode === 'PageUp' || keycode === 'ArrowUp';
+            const isVerticalPrev = keycode === 'PageDown' || keycode === 'ArrowDown';
+            const isHorizontalNext = keycode === 'PageUp' || keycode === 'ArrowRight';
+            const isHorizontalPrev = keycode === 'PageDown' || keycode === 'ArrowLeft';
+            if (vertical &&
+                ((isVerticalNext && NCarousel.isNextDisabled()) ||
+                    (isVerticalPrev && NCarousel.isPrevDisabled()))) {
+                return;
+            }
+            if (!vertical &&
+                ((isHorizontalNext && NCarousel.isNextDisabled()) ||
+                    (isHorizontalPrev && NCarousel.isPrevDisabled()))) {
+                return;
+            }
+            if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
+                return;
+            }
+            const nodeName = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.nodeName.toLowerCase();
+            if (nodeName === 'input' || nodeName === 'textarea') {
+                return;
+            }
+            if (vertical ? isVerticalNext : isHorizontalNext) {
+                e.preventDefault();
+                NCarousel.next();
+                focusDot(NCarousel.getCurrentIndex());
+            }
+            else if (vertical ? isVerticalPrev : isHorizontalPrev) {
+                e.preventDefault();
+                NCarousel.prev();
+                focusDot(NCarousel.getCurrentIndex());
+            }
+        }
+        function focusDot(index = props.currentIndex) {
+            const { value: dotEls } = dotElsRef;
+            if (index >= 0 && index < dotEls.length) {
+                dotEls[index].focus();
+            }
+        }
+        onBeforeUpdate(() => (dotElsRef.value.length = 0));
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            dotEls: dotElsRef,
+            handleKeydown,
+            handleMouseenter,
+            handleClick
+        };
+    },
+    render() {
+        const { mergedClsPrefix, dotEls } = this;
+        return (h("div", { class: [
+                `${mergedClsPrefix}-carousel__dots`,
+                `${mergedClsPrefix}-carousel__dots--${this.dotType}`
+            ], role: "tablist" }, indexMap(this.total, (i) => {
+            const selected = i === this.currentIndex;
+            return (h("div", { "aria-selected": selected, ref: (el) => dotEls.push(el), role: "button", tabindex: "0", class: [
+                    `${mergedClsPrefix}-carousel__dot`,
+                    selected && `${mergedClsPrefix}-carousel__dot--active`
+                ], key: i, onClick: () => this.handleClick(i), onMouseenter: () => this.handleMouseenter(i), onKeydown: (e) => this.handleKeydown(e, i) }));
+        })));
+    }
+});

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

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    selfElRef: import("vue").Ref<HTMLElement | undefined>;
+    isPrev: import("vue").ComputedRef<boolean>;
+    isNext: import("vue").ComputedRef<boolean>;
+    isActive: import("vue").ComputedRef<boolean>;
+    index: import("vue").ComputedRef<number | undefined>;
+    style: import("vue").ComputedRef<any>;
+    handleClick: (e: MouseEvent) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+export default _default;

package/es/carousel/src/CarouselItem.js

@@ -0,0 +1,72 @@
+import { h, defineComponent, renderSlot, inject, computed, ref, onMounted, onBeforeUnmount } from 'vue';
+import { useConfig } from '../../_mixins';
+import { throwError } from '../../_utils';
+import { carouselMethodsInjectionKey } from './interface';
+export default defineComponent({
+    name: 'CarouselItem',
+    setup(props) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        const NCarousel = inject(carouselMethodsInjectionKey, null);
+        if (!NCarousel) {
+            throwError('carousel-item', '`n-carousel-item` must be placed inside `n-carousel`.');
+        }
+        const selfElRef = ref();
+        const isPrevRef = computed(() => {
+            const { value: selfEl } = selfElRef;
+            return Boolean(selfEl && NCarousel.isPrev(selfEl));
+        });
+        const isNextRef = computed(() => {
+            const { value: selfEl } = selfElRef;
+            return Boolean(selfEl && NCarousel.isNext(selfEl));
+        });
+        const isActiveRef = computed(() => {
+            const { value: selfEl } = selfElRef;
+            return Boolean(selfEl && NCarousel.isActive(selfEl));
+        });
+        const styleRef = computed(() => {
+            const { value: selfEl } = selfElRef;
+            return selfEl && NCarousel.getSlideStyle(selfEl);
+        });
+        const indexRef = computed(() => {
+            const { value: selfEl } = selfElRef;
+            return selfEl && NCarousel.getSlideIndex(selfEl);
+        });
+        function handleClick(e) {
+            const { value: index } = indexRef;
+            if (index !== undefined) {
+                NCarousel === null || NCarousel === void 0 ? void 0 : NCarousel.onCarouselItemClick(index);
+            }
+        }
+        onMounted(() => NCarousel.addSlide(selfElRef.value));
+        onBeforeUnmount(() => {
+            NCarousel.removeSlide(selfElRef.value);
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            selfElRef,
+            isPrev: isPrevRef,
+            isNext: isNextRef,
+            isActive: isActiveRef,
+            index: indexRef,
+            style: styleRef,
+            handleClick
+        };
+    },
+    render() {
+        const { $slots: slots, mergedClsPrefix, isPrev, isNext, isActive, index, style } = this;
+        const className = [
+            `${mergedClsPrefix}-carousel__slide`,
+            {
+                [`${mergedClsPrefix}-carousel__slide--current`]: isActive,
+                [`${mergedClsPrefix}-carousel__slide--prev`]: isPrev,
+                [`${mergedClsPrefix}-carousel__slide--next`]: isNext
+            }
+        ];
+        return (h("div", { ref: 'selfElRef', class: className, role: 'option', tabindex: "-1", "data-index": index, "aria-hidden": !isActive, style: style, onClick: this.handleClick }, renderSlot(slots, 'default', {
+            isPrev,
+            isNext,
+            isActive,
+            index
+        })));
+    }
+});

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

@@ -0,0 +1,28 @@
+import type { InjectionKey } from 'vue';
+export declare const tuple: <T extends string[]>(...args: T) => T;
+export declare type ElementOf<T> = T extends Array<infer E> ? E : T extends ReadonlyArray<infer F> ? F : never;
+export interface CarouselMethodsInjection {
+    to: (index: number) => void;
+    prev: () => void;
+    next: () => void;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+    isPrev: (slide: number | HTMLElement) => boolean;
+    isNext: (slide: number | HTMLElement) => boolean;
+    isActive: (slide: number | HTMLElement) => boolean;
+    isPrevDisabled: () => boolean;
+    isNextDisabled: () => boolean;
+    getCurrentIndex: () => number;
+    getSlideIndex: (slide: number | HTMLElement) => number;
+    getSlideStyle: (slide: HTMLElement) => any;
+    addSlide: (slide?: HTMLElement) => void;
+    removeSlide: (slide?: HTMLElement) => void;
+    onCarouselItemClick: (index: number) => void;
+}
+export declare const carouselMethodsInjectionKey: InjectionKey<CarouselMethodsInjection>;
+export interface CarouselInst {
+    getCurrentIndex: () => number;
+    to: (index: number) => void;
+    prev: () => void;
+    next: () => void;
+}

package/es/carousel/src/interface.js

@@ -0,0 +1,2 @@
+export const tuple = (...args) => args;
+export const carouselMethodsInjectionKey = Symbol('carouselMethods');

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

@@ -1,17 +1,31 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --dot-color
-// --dot-color-active
-// --dot-size
-// --arrow-color
+// --n-bezier
+// --n-dot-color
+// --n-dot-color-focus
+// --n-dot-color-active
+// --n-dot-size
+// --n-dot-line-width
+// --n-dot-line-width-active
+// --n-arrow-color
 
 export default cB('carousel', `
- overflow: hidden;
  position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
 `, [cE('slides', `
- transition: transform .3s var(--n-bezier);
  display: flex;
- `, [c('> div', `
+ width: 100%;
+ height: 100%;
+ transition-timing-function: var(--n-bezier);
+ transition-property: transform;
+ touch-action: pan-y;
+ `, [cE('slide', `
+ flex-shrink: 0;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ outline: none;
  overflow: hidden;
  `, [c('> img', `
  display: block;
@@ -19,7 +33,7 @@ export default cB('carousel', `
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
- `), cE('dot', `
+ `, [cM('dot', [cE('dot', `
  height: var(--n-dot-size);
  width: var(--n-dot-size);
  background-color: var(--n-dot-color);
@@ -30,26 +44,41 @@ export default cB('carousel', `
  background-color .3s var(--n-bezier);
  outline: none;
  `, [c('&:focus', `
+ background-color: var(--n-dot-color-focus);
+ `), cM('active', `
  background-color: var(--n-dot-color-active);
+ `)])]), cM('line', [cE('dot', `
+ border-radius: 9999px;
+ width: var(--n-dot-line-width);
+ height: 4px;
+ background-color: var(--n-dot-color);
+ cursor: pointer;
+ transition:
+ width .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ outline: none;
+ `, [c('&:focus', `
+ background-color: var(--n-dot-color-focus);
  `), cM('active', `
+ width: var(--n-dot-line-width-active);
  background-color: var(--n-dot-color-active);
- `), c('&:last-child', `
- margin-right: 0;
- `)]), cE('arrow', `
+ `)])])]), cE('arrow', `
  position: absolute;
  transition: transform .3s var(--n-bezier);
  transform: scale(1);
  cursor: pointer;
- height: 48px;
- width: 48px;
+ height: 36px;
+ width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--n-arrow-color);
+ user-select: none;
  `, [cM('right', `
  transform: translateY(-50%);
  top: 50%;
- right: 0;
+ right: -2px;
  `, [c('&:hover', {
   transform: 'translateY(-50%) scale(1.1)'
 }), c('&:active', {
@@ -57,14 +86,14 @@ export default cB('carousel', `
 })]), cM('left', `
  transform: translateY(-50%);
  top: 50%;
- left: 0;
+ 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: 0;
+ top: -2px;
  left: 50%;
  `, [c('&:hover', {
   transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
@@ -72,43 +101,117 @@ export default cB('carousel', `
   transform: 'translateX(-50%) scale(1) rotate(90deg)'
 })]), cM('bottom', `
  transform: translateX(-50%) rotate(90deg);
- bottom: 0;
- left: 50%;
+ bottom: -2px;
+ left: 50%
  `, [c('&:hover', {
   transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
 }), c('&:active', {
   transform: 'translateX(-50%) scale(1) rotate(90deg)'
-})]), c('svg', {
+})]), cM('disabled', `
+ opacity: 0.6;
+ cursor: auto;
+ pointer-events: none;
+ `), c('svg', {
   height: '100%',
   width: '100%'
-})]), cM('left', [cE('slides', `
+})]), cM('vertical', [cE('slides', `
  flex-direction: column;
- `), cE('dots', `
+ touch-action: pan-x;
+ `), cM('fade', [cE('slide', `
+ top: 50%;
+ left: unset;
  transform: translateY(-50%);
+ `)]), cM('card', [cE('slide', `
  top: 50%;
- left: 16px;
- flex-direction: column;
- `), cE('dot', `
- margin-bottom: 12px;
- `)]), cM('right', [cE('slides', `
+ left: unset;
+ transform: translateY(-50%) translateZ(-400px);
+ `, [cM('current', `
+ transform: translateY(-50%) translateZ(0);
+ `), cM('prev', `
+ transform: translateY(-100%) translateZ(-200px);
+ `), cM('next', `
+ transform: translateY(0%) translateZ(-200px);
+ `)])])]), cM('usercontrol', [cE('slide', `
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `)]), cM('left', [cE('dots', `
+ transform: translateY(-50%);
+ top: 50%;
+ left: 12px;
  flex-direction: column;
- `), cE('dots', `
+ `, [cM('line', [cE('dot', `
+ width: 4px;
+ height: var(--n-dot-line-width);
+ margin: 4px 0;
+ transition:
+ height .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ outline: none;
+ `, [cM('active', `
+ height: var(--n-dot-line-width-active);
+ `)])])]), cE('dot', `
+ margin: 4px 0;
+ `)]), cM('right', [cE('dots', `
  transform: translateY(-50%);
  top: 50%;
- right: 16px;
+ right: 12px;
  flex-direction: column;
- `), cE('dot', `
- margin-bottom: 12px;
+ `, [cM('line', [cE('dot', `
+ width: 4px;
+ height: var(--n-dot-line-width);
+ margin: 4px 0;
+ transition:
+ height .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ outline: none;
+ `, [cM('active', `
+ height: var(--n-dot-line-width-active);
+ `)])])]), cE('dot', `
+ margin: 4px 0;
  `)]), cM('top', [cE('dots', `
  transform: translateX(-50%);
- top: 16px;
+ top: 12px;
  left: 50%;
- `), cE('dot', `
- margin-right: 12px;
+ `, [cM('line', [cE('dot', `
+ margin: 0 4px;
+ `)])]), cE('dot', `
+ margin: 0 4px;
  `)]), cM('bottom', [cE('dots', `
  transform: translateX(-50%);
- bottom: 16px;
+ bottom: 12px;
+ left: 50%;
+ `, [cM('line', [cE('dot', `
+ margin: 0 4px;
+ `)])]), cE('dot', `
+ margin: 0 4px;
+ `)]), cM('fade', [cE('slide', `
+ position: absolute;
+ left: 50%;
+ opacity: 0;
+ transform: translateX(-50%);
+ transition-property: opacity;
+ `, [cM('current', `
+ opacity: 1;
+ `)])]), cM('card', [cE('slides', `
+ perspective: 1200px;
+ `), cE('slide', `
+ position: absolute;
  left: 50%;
- `), cE('dot', `
- margin-right: 12px;
- `)])]);
+ opacity: 0;
+ transform: translateX(-50%) translateZ(-400px);
+ transition-property: opacity, transform;
+ `, [cM('current', `
+ opacity: 1;
+ transform: translateX(-50%) translateZ(0);
+ z-index: 1;
+ `), cM('prev', `
+ opacity: 0.4;
+ transform: translateX(-100%) translateZ(-200px);
+ `), cM('next', `
+ opacity: 0.4;
+ transform: translateX(0%) translateZ(-200px);
+ `)])])]);

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

@@ -0,0 +1,12 @@
+export interface Size {
+    width: number;
+    height: number;
+}
+export declare function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent;
+export declare function calculateSize(element: HTMLElement, innerOnly?: boolean): Size;
+export declare function clampValue(value: number, min: number, max: number): number;
+export declare function resolveSpeed(value?: string | number): number;
+export declare function getDisplayIndex(current: number, length: number, duplicatedable?: boolean): number;
+export declare function getRealIndex(current: number, duplicatedable?: boolean): number;
+export declare function getPrevIndex(current: number, length: number, duplicatedable?: boolean): number | null;
+export declare function getNextIndex(current: number, length: number, duplicatedable?: boolean): number | null;

package/es/carousel/src/utils.js

@@ -0,0 +1,58 @@
+export function isTouchEvent(e) {
+    return window.TouchEvent && e instanceof window.TouchEvent;
+}
+export function calculateSize(element, innerOnly) {
+    let width = element.clientWidth;
+    let height = element.clientHeight;
+    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'));
+        return { width, height };
+    }
+    return { width, height };
+}
+export function clampValue(value, min, max) {
+    return value < min ? min : value > max ? max : value;
+}
+export function resolveSpeed(value) {
+    if (value === undefined)
+        return 0;
+    if (typeof value === 'number')
+        return value;
+    const timeRE = /^((\d+)?\.?\d+?)(ms|s)?$/;
+    const match = value.match(timeRE);
+    if (match) {
+        const [, number, , unit = 'ms'] = match;
+        return Number(number) * (unit === 'ms' ? 1 : 1000);
+    }
+    return 0;
+}
+export function getDisplayIndex(current, length, duplicatedable) {
+    return !duplicatedable
+        ? current
+        : current === 0
+            ? length - 3
+            : current === length - 1
+                ? 0
+                : current - 1;
+}
+export function getRealIndex(current, duplicatedable) {
+    return !duplicatedable ? current : current + 1;
+}
+export function getPrevIndex(current, length, duplicatedable) {
+    if (current < 0)
+        return null;
+    return current === 0 ? (duplicatedable ? length - 1 : null) : current - 1;
+}
+export function getNextIndex(current, length, duplicatedable) {
+    if (current > length - 1)
+        return null;
+    return current === length - 1 ? (duplicatedable ? 0 : null) : current + 1;
+}