naive-ui 2.23.2 → 2.24.0

package/lib/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/lib/carousel/src/CarouselArrow.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const interface_1 = require("./interface");
+const backwardIcon = ((0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
+    (0, vue_1.h)("g", { fill: "none" },
+        (0, vue_1.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 = ((0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
+    (0, vue_1.h)("g", { fill: "none" },
+        (0, vue_1.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" }))));
+exports.default = (0, vue_1.defineComponent)({
+    name: 'CarouselArrow',
+    setup(props) {
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { isVertical, isPrevDisabled, isNextDisabled, prev, next
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+         } = (0, vue_1.inject)(interface_1.carouselMethodsInjectionKey, null);
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            isVertical,
+            isPrevDisabled,
+            isNextDisabled,
+            prev,
+            next
+        };
+    },
+    render() {
+        const { mergedClsPrefix } = this;
+        const isVertical = this.isVertical();
+        return ((0, vue_1.h)(vue_1.Fragment, null,
+            (0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-carousel__arrow`,
+                    `${mergedClsPrefix}-carousel__arrow--${isVertical ? 'bottom' : 'right'}`,
+                    this.isNextDisabled() &&
+                        `${mergedClsPrefix}-carousel__arrow--disabled`
+                ], role: "button", onClick: this.next }, forwardIcon),
+            (0, vue_1.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/lib/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/lib/carousel/src/CarouselDots.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const seemly_1 = require("seemly");
+const _mixins_1 = require("../../_mixins");
+const interface_1 = require("./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
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'CarouselDots',
+    props: carouselDotsProps,
+    setup(props) {
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const dotElsRef = (0, vue_1.ref)([]);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const NCarousel = (0, vue_1.inject)(interface_1.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();
+            }
+        }
+        (0, vue_1.onBeforeUpdate)(() => (dotElsRef.value.length = 0));
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            dotEls: dotElsRef,
+            handleKeydown,
+            handleMouseenter,
+            handleClick
+        };
+    },
+    render() {
+        const { mergedClsPrefix, dotEls } = this;
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-carousel__dots`,
+                `${mergedClsPrefix}-carousel__dots--${this.dotType}`
+            ], role: "tablist" }, (0, seemly_1.indexMap)(this.total, (i) => {
+            const selected = i === this.currentIndex;
+            return ((0, vue_1.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/lib/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/lib/carousel/src/CarouselItem.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const interface_1 = require("./interface");
+exports.default = (0, vue_1.defineComponent)({
+    name: 'CarouselItem',
+    setup(props) {
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const NCarousel = (0, vue_1.inject)(interface_1.carouselMethodsInjectionKey, null);
+        if (!NCarousel) {
+            (0, _utils_1.throwError)('carousel-item', '`n-carousel-item` must be placed inside `n-carousel`.');
+        }
+        const selfElRef = (0, vue_1.ref)();
+        const isPrevRef = (0, vue_1.computed)(() => {
+            const { value: selfEl } = selfElRef;
+            return Boolean(selfEl && NCarousel.isPrev(selfEl));
+        });
+        const isNextRef = (0, vue_1.computed)(() => {
+            const { value: selfEl } = selfElRef;
+            return Boolean(selfEl && NCarousel.isNext(selfEl));
+        });
+        const isActiveRef = (0, vue_1.computed)(() => {
+            const { value: selfEl } = selfElRef;
+            return Boolean(selfEl && NCarousel.isActive(selfEl));
+        });
+        const styleRef = (0, vue_1.computed)(() => {
+            const { value: selfEl } = selfElRef;
+            return selfEl && NCarousel.getSlideStyle(selfEl);
+        });
+        const indexRef = (0, vue_1.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);
+            }
+        }
+        (0, vue_1.onMounted)(() => NCarousel.addSlide(selfElRef.value));
+        (0, vue_1.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 ((0, vue_1.h)("div", { ref: 'selfElRef', class: className, role: 'option', tabindex: "-1", "data-index": index, "aria-hidden": !isActive, style: style, onClick: this.handleClick }, (0, vue_1.renderSlot)(slots, 'default', {
+            isPrev,
+            isNext,
+            isActive,
+            index
+        })));
+    }
+});

package/lib/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/lib/carousel/src/interface.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.carouselMethodsInjectionKey = exports.tuple = void 0;
+const tuple = (...args) => args;
+exports.tuple = tuple;
+exports.carouselMethodsInjectionKey = Symbol('carouselMethods');

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

@@ -5,20 +5,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_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
 
 
 exports.default = (0, cssr_1.cB)('carousel', `
- overflow: hidden;
  position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
 `, [(0, cssr_1.cE)('slides', `
- transition: transform .3s var(--n-bezier);
  display: flex;
- `, [(0, cssr_1.c)('> div', `
+ width: 100%;
+ height: 100%;
+ transition-timing-function: var(--n-bezier);
+ transition-property: transform;
+ touch-action: pan-y;
+ `, [(0, cssr_1.cE)('slide', `
+ flex-shrink: 0;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ outline: none;
  overflow: hidden;
  `, [(0, cssr_1.c)('> img', `
  display: block;
@@ -26,7 +40,7 @@ exports.default = (0, cssr_1.cB)('carousel', `
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
- `), (0, cssr_1.cE)('dot', `
+ `, [(0, cssr_1.cM)('dot', [(0, cssr_1.cE)('dot', `
  height: var(--n-dot-size);
  width: var(--n-dot-size);
  background-color: var(--n-dot-color);
@@ -37,26 +51,41 @@ exports.default = (0, cssr_1.cB)('carousel', `
  background-color .3s var(--n-bezier);
  outline: none;
  `, [(0, cssr_1.c)('&:focus', `
+ background-color: var(--n-dot-color-focus);
+ `), (0, cssr_1.cM)('active', `
  background-color: var(--n-dot-color-active);
+ `)])]), (0, cssr_1.cM)('line', [(0, cssr_1.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;
+ `, [(0, cssr_1.c)('&:focus', `
+ background-color: var(--n-dot-color-focus);
  `), (0, cssr_1.cM)('active', `
+ width: var(--n-dot-line-width-active);
  background-color: var(--n-dot-color-active);
- `), (0, cssr_1.c)('&:last-child', `
- margin-right: 0;
- `)]), (0, cssr_1.cE)('arrow', `
+ `)])])]), (0, cssr_1.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;
  `, [(0, cssr_1.cM)('right', `
  transform: translateY(-50%);
  top: 50%;
- right: 0;
+ right: -2px;
  `, [(0, cssr_1.c)('&:hover', {
   transform: 'translateY(-50%) scale(1.1)'
 }), (0, cssr_1.c)('&:active', {
@@ -64,14 +93,14 @@ exports.default = (0, cssr_1.cB)('carousel', `
 })]), (0, cssr_1.cM)('left', `
  transform: translateY(-50%);
  top: 50%;
- left: 0;
+ 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: 0;
+ top: -2px;
  left: 50%;
  `, [(0, cssr_1.c)('&:hover', {
   transform: 'translateX(-50%) scale(1.1) rotate(90deg)'
@@ -79,43 +108,117 @@ exports.default = (0, cssr_1.cB)('carousel', `
   transform: 'translateX(-50%) scale(1) rotate(90deg)'
 })]), (0, cssr_1.cM)('bottom', `
  transform: translateX(-50%) rotate(90deg);
- bottom: 0;
- left: 50%;
+ 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.c)('svg', {
+})]), (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)('left', [(0, cssr_1.cE)('slides', `
+})]), (0, cssr_1.cM)('vertical', [(0, cssr_1.cE)('slides', `
  flex-direction: column;
- `), (0, cssr_1.cE)('dots', `
+ touch-action: pan-x;
+ `), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
+ top: 50%;
+ left: unset;
  transform: translateY(-50%);
+ `)]), (0, cssr_1.cM)('card', [(0, cssr_1.cE)('slide', `
  top: 50%;
- left: 16px;
- flex-direction: column;
- `), (0, cssr_1.cE)('dot', `
- margin-bottom: 12px;
- `)]), (0, cssr_1.cM)('right', [(0, cssr_1.cE)('slides', `
+ left: unset;
+ transform: translateY(-50%) translateZ(-400px);
+ `, [(0, cssr_1.cM)('current', `
+ transform: translateY(-50%) translateZ(0);
+ `), (0, cssr_1.cM)('prev', `
+ transform: translateY(-100%) translateZ(-200px);
+ `), (0, cssr_1.cM)('next', `
+ transform: translateY(0%) translateZ(-200px);
+ `)])])]), (0, cssr_1.cM)('usercontrol', [(0, cssr_1.cE)('slide', `
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ `)]), (0, cssr_1.cM)('left', [(0, cssr_1.cE)('dots', `
+ transform: translateY(-50%);
+ top: 50%;
+ left: 12px;
  flex-direction: column;
- `), (0, cssr_1.cE)('dots', `
+ `, [(0, cssr_1.cM)('line', [(0, cssr_1.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;
+ `, [(0, cssr_1.cM)('active', `
+ height: var(--n-dot-line-width-active);
+ `)])])]), (0, cssr_1.cE)('dot', `
+ margin: 4px 0;
+ `)]), (0, cssr_1.cM)('right', [(0, cssr_1.cE)('dots', `
  transform: translateY(-50%);
  top: 50%;
- right: 16px;
+ right: 12px;
  flex-direction: column;
- `), (0, cssr_1.cE)('dot', `
- margin-bottom: 12px;
+ `, [(0, cssr_1.cM)('line', [(0, cssr_1.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;
+ `, [(0, cssr_1.cM)('active', `
+ 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', `
  transform: translateX(-50%);
- top: 16px;
+ top: 12px;
  left: 50%;
- `), (0, cssr_1.cE)('dot', `
- margin-right: 12px;
+ `, [(0, cssr_1.cM)('line', [(0, cssr_1.cE)('dot', `
+ margin: 0 4px;
+ `)])]), (0, cssr_1.cE)('dot', `
+ margin: 0 4px;
  `)]), (0, cssr_1.cM)('bottom', [(0, cssr_1.cE)('dots', `
  transform: translateX(-50%);
- bottom: 16px;
+ bottom: 12px;
+ left: 50%;
+ `, [(0, cssr_1.cM)('line', [(0, cssr_1.cE)('dot', `
+ margin: 0 4px;
+ `)])]), (0, cssr_1.cE)('dot', `
+ margin: 0 4px;
+ `)]), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
+ position: absolute;
+ left: 50%;
+ opacity: 0;
+ transform: translateX(-50%);
+ transition-property: opacity;
+ `, [(0, cssr_1.cM)('current', `
+ opacity: 1;
+ `)])]), (0, cssr_1.cM)('card', [(0, cssr_1.cE)('slides', `
+ perspective: 1200px;
+ `), (0, cssr_1.cE)('slide', `
+ position: absolute;
  left: 50%;
- `), (0, cssr_1.cE)('dot', `
- margin-right: 12px;
- `)])]);
+ opacity: 0;
+ transform: translateX(-50%) translateZ(-400px);
+ transition-property: opacity, transform;
+ `, [(0, cssr_1.cM)('current', `
+ opacity: 1;
+ transform: translateX(-50%) translateZ(0);
+ z-index: 1;
+ `), (0, cssr_1.cM)('prev', `
+ opacity: 0.4;
+ transform: translateX(-100%) translateZ(-200px);
+ `), (0, cssr_1.cM)('next', `
+ opacity: 0.4;
+ transform: translateX(0%) translateZ(-200px);
+ `)])])]);

package/lib/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;