naive-ui 2.31.0 → 2.32.0

package/lib/carousel/src/CarouselArrow.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
-const interface_1 = require("./interface");
+const CarouselContext_1 = require("./CarouselContext");
 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" }))));
@@ -13,9 +13,7 @@ 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);
+        const { isVertical, isPrevDisabled, isNextDisabled, prev, next } = (0, CarouselContext_1.useCarouselContext)();
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             isVertical,

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

@@ -0,0 +1,21 @@
+import type { ComputedRef } from 'vue';
+export interface CarouselContextValue {
+    currentIndexRef: ComputedRef<number>;
+    to: (index: number) => void;
+    prev: () => void;
+    next: () => void;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+    isPrev: (slideOrIndex: HTMLElement | number) => boolean;
+    isNext: (slideOrIndex: HTMLElement | number) => boolean;
+    isActive: (slideOrIndex: HTMLElement | number) => boolean;
+    isPrevDisabled: () => boolean;
+    isNextDisabled: () => boolean;
+    getSlideIndex: (slideOrIndex?: HTMLElement | number) => number;
+    getSlideStyle: (slideOrIndex: HTMLElement | number) => string | Record<string, string | number> | undefined;
+    addSlide: (slide?: HTMLElement) => void;
+    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;

package/lib/carousel/src/CarouselContext.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCarouselContext = exports.provideCarouselContext = void 0;
+const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
+const carouselMethodsInjectionKey = (0, _utils_1.createInjectionKey)('n-carousel-methods');
+const provideCarouselContext = (contextValue) => (0, vue_1.provide)(carouselMethodsInjectionKey, contextValue);
+exports.provideCarouselContext = provideCarouselContext;
+const useCarouselContext = (location = 'unknown', component = 'component') => {
+    const CarouselContext = (0, vue_1.inject)(carouselMethodsInjectionKey);
+    if (!CarouselContext) {
+        (0, _utils_1.throwError)(location, `\`${component}\` must be placed inside \`n-carousel\`.`);
+    }
+    return CarouselContext;
+};
+exports.useCarouselContext = useCarouselContext;

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

@@ -63,9 +63,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     keyboard: BooleanConstructor;
 }>>, {
+    total: number;
     trigger: "click" | "hover";
     keyboard: boolean;
-    total: number;
     currentIndex: number;
     dotType: "never" | "dot" | "line";
 }>;

package/lib/carousel/src/CarouselDots.js

@@ -3,7 +3,7 @@ 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 CarouselContext_1 = require("./CarouselContext");
 const carouselDotsProps = {
     total: {
         type: Number,
@@ -29,12 +29,12 @@ exports.default = (0, vue_1.defineComponent)({
     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);
+        const NCarousel = (0, CarouselContext_1.useCarouselContext)();
         function handleKeydown(e, current) {
             switch (e.key) {
                 case 'Enter':
                 case ' ':
+                    e.preventDefault();
                     NCarousel.to(current);
                     return;
             }
@@ -54,22 +54,6 @@ exports.default = (0, vue_1.defineComponent)({
         }
         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;
             }
@@ -77,22 +61,30 @@ exports.default = (0, vue_1.defineComponent)({
             if (nodeName === 'input' || nodeName === 'textarea') {
                 return;
             }
-            if (vertical ? isVerticalNext : isHorizontalNext) {
-                e.preventDefault();
+            const { code: keycode } = e;
+            const isVerticalNext = keycode === 'PageUp' || keycode === 'ArrowUp';
+            const isVerticalPrev = keycode === 'PageDown' || keycode === 'ArrowDown';
+            const isHorizontalNext = keycode === 'PageUp' || keycode === 'ArrowRight';
+            const isHorizontalPrev = keycode === 'PageDown' || keycode === 'ArrowLeft';
+            const vertical = NCarousel.isVertical();
+            const wantToNext = vertical ? isVerticalNext : isHorizontalNext;
+            const wantToPrev = vertical ? isVerticalPrev : isHorizontalPrev;
+            if (!wantToNext && !wantToPrev) {
+                return;
+            }
+            e.preventDefault();
+            if (wantToNext && !NCarousel.isNextDisabled()) {
                 NCarousel.next();
-                focusDot(NCarousel.getCurrentIndex());
+                focusDot(NCarousel.currentIndexRef.value);
             }
-            else if (vertical ? isVerticalPrev : isHorizontalPrev) {
-                e.preventDefault();
+            else if (wantToPrev && !NCarousel.isPrevDisabled()) {
                 NCarousel.prev();
-                focusDot(NCarousel.getCurrentIndex());
+                focusDot(NCarousel.currentIndexRef.value);
             }
         }
-        function focusDot(index = props.currentIndex) {
-            const { value: dotEls } = dotElsRef;
-            if (index >= 0 && index < dotEls.length) {
-                dotEls[index].focus();
-            }
+        function focusDot(index) {
+            var _a;
+            (_a = dotElsRef.value[index]) === null || _a === void 0 ? void 0 : _a.focus();
         }
         (0, vue_1.onBeforeUpdate)(() => (dotElsRef.value.length = 0));
         return {

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

@@ -1,13 +1,13 @@
+import type { VNode } from 'vue';
+export declare const isCarouselItem: (child: VNode) => boolean;
 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>;
-    prevSlideStyle: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
-    nextSlideStyle: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
+    index: import("vue").ComputedRef<number>;
+    style: import("vue").ComputedRef<string | Record<string, string | number> | undefined>;
     handleClick: (event: MouseEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/carousel/src/CarouselItem.js

@@ -1,37 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCarouselItem = void 0;
 const vue_1 = require("vue");
+const lodash_1 = require("lodash");
 const _mixins_1 = require("../../_mixins");
-const _utils_1 = require("../../_utils");
-const interface_1 = require("./interface");
+const CarouselContext_1 = require("./CarouselContext");
+const CarouselItemName = 'CarouselItem';
+const isCarouselItem = (child) => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === CarouselItemName; };
+exports.isCarouselItem = isCarouselItem;
 exports.default = (0, vue_1.defineComponent)({
-    name: 'CarouselItem',
+    name: CarouselItemName,
     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 NCarousel = (0, CarouselContext_1.useCarouselContext)((0, lodash_1.camelCase)(CarouselItemName), `n-${(0, lodash_1.camelCase)(CarouselItemName)}`);
         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);
+            return selfEl ? NCarousel.getSlideIndex(selfEl) : -1;
+        });
+        const isPrevRef = (0, vue_1.computed)(() => NCarousel.isPrev(indexRef.value));
+        const isNextRef = (0, vue_1.computed)(() => NCarousel.isNext(indexRef.value));
+        const isActiveRef = (0, vue_1.computed)(() => NCarousel.isActive(indexRef.value));
+        const styleRef = (0, vue_1.computed)(() => NCarousel.getSlideStyle(indexRef.value));
+        (0, vue_1.onMounted)(() => NCarousel.addSlide(selfElRef.value));
+        (0, vue_1.onBeforeUnmount)(() => {
+            NCarousel.removeSlide(selfElRef.value);
         });
         function handleClick(event) {
             const { value: index } = indexRef;
@@ -39,10 +32,6 @@ exports.default = (0, vue_1.defineComponent)({
                 NCarousel === null || NCarousel === void 0 ? void 0 : NCarousel.onCarouselItemClick(index, event);
             }
         }
-        (0, vue_1.onMounted)(() => NCarousel.addSlide(selfElRef.value));
-        (0, vue_1.onBeforeUnmount)(() => {
-            NCarousel.removeSlide(selfElRef.value);
-        });
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             selfElRef,
@@ -51,8 +40,6 @@ exports.default = (0, vue_1.defineComponent)({
             isActive: isActiveRef,
             index: indexRef,
             style: styleRef,
-            prevSlideStyle: NCarousel.prevSlideStyleRef,
-            nextSlideStyle: NCarousel.nextSlideStyleRef,
             handleClick
         };
     },
@@ -67,11 +54,7 @@ exports.default = (0, vue_1.defineComponent)({
                 [`${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,
-                isPrev ? this.prevSlideStyle : '',
-                isNext ? this.nextSlideStyle : ''
-            ], 
+        return ((0, vue_1.h)("div", { ref: "selfElRef", class: className, role: "option", tabindex: "-1", "data-index": index, "aria-hidden": !isActive, style: style, 
             // We use ts-ignore for vue-tsc, since it seems to patch native event
             // for vue components
             // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error

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

@@ -1,38 +1,19 @@
-import { CSSProperties, Ref } 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, event: MouseEvent) => void;
-    prevSlideStyleRef: Ref<CSSProperties | string | undefined>;
-    nextSlideStyleRef: Ref<CSSProperties | string | undefined>;
-}
-export declare const carouselMethodsInjectionKey: import("vue").InjectionKey<CarouselMethodsInjection>;
+import { CarouselContextValue } from './CarouselContext';
 export interface CarouselInst {
     getCurrentIndex: () => number;
     to: (index: number) => void;
     prev: () => void;
     next: () => void;
 }
-export declare const enum DragFlags {
-    NORMAL = 1,
-    START = 2,
-    PROGRESS = 4,
-    SUCCESS = 8,
-    FAIL = 16,
-    END = 32
+export interface ArrowScopedSlotProps extends Pick<CarouselContextValue, 'to' | 'prev' | 'next' | 'isPrevDisabled' | 'isNextDisabled'> {
+    total: number;
+    currentIndex: number;
+}
+export interface DotScopedSlotProps extends Pick<CarouselContextValue, 'to'> {
+    total: number;
+    currentIndex: number;
+}
+export interface Size {
+    width: number;
+    height: number;
 }

package/lib/carousel/src/interface.js

@@ -1,7 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.carouselMethodsInjectionKey = exports.tuple = void 0;
-const _utils_1 = require("../../_utils");
-const tuple = (...args) => args;
-exports.tuple = tuple;
-exports.carouselMethodsInjectionKey = (0, _utils_1.createInjectionKey)('n-carousel-methods');

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

@@ -19,6 +19,7 @@ exports.default = (0, cssr_1.cB)('carousel', `
  position: relative;
  width: 100%;
  height: 100%;
+ touch-action: pan-y;
  overflow: hidden;
 `, [(0, cssr_1.cE)('slides', `
  display: flex;
@@ -26,7 +27,6 @@ exports.default = (0, cssr_1.cB)('carousel', `
  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;
@@ -89,9 +89,10 @@ exports.default = (0, cssr_1.cB)('carousel', `
  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;
+ `)]), (0, cssr_1.cM)('vertical', `
  touch-action: pan-x;
+ `, [(0, cssr_1.cE)('slides', `
+ flex-direction: column;
  `), (0, cssr_1.cM)('fade', [(0, cssr_1.cE)('slide', `
  top: 50%;
  left: unset;
@@ -110,6 +111,8 @@ exports.default = (0, cssr_1.cB)('carousel', `
  position: absolute;
  top: 50%;
  left: 50%;
+ width: 100%;
+ height: 100%;
  transform: translate(-50%, -50%);
  `)])])]), (0, cssr_1.cM)('left', [(0, cssr_1.cE)('dots', `
  transform: translateY(-50%);
@@ -211,8 +214,10 @@ exports.default = (0, cssr_1.cB)('carousel', `
  position: absolute;
  opacity: 0;
  transition-property: opacity;
+ pointer-events: none;
  `, [(0, cssr_1.cM)('current', `
  opacity: 1;
+ pointer-events: auto;
  `)])]), (0, cssr_1.cM)('card', [(0, cssr_1.cE)('slides', `
  perspective: 1000px;
  `), (0, cssr_1.cE)('slide', `

package/lib/carousel/src/{utils.d.ts → utils/duplicatedLogic.d.ts}

@@ -1,12 +1,7 @@
-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;
+import type { VNode } from 'vue';
+export declare function addDuplicateSlides(slides: VNode[]): VNode[];
 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;
+export declare function getDisplayTotalView(total: number, duplicatedable?: boolean): number;

package/lib/carousel/src/utils/duplicatedLogic.js

@@ -0,0 +1,55 @@
+"use strict";
+// Because of the nature of the loop slide work,
+// we need to add duplicates to the left and right of the carousel
+// slot    [ 0 1 2 ]
+// display 2 0 1 2 0
+// real    0 1 2 3 4
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDisplayTotalView = exports.getNextIndex = exports.getPrevIndex = exports.getRealIndex = exports.getDisplayIndex = exports.addDuplicateSlides = void 0;
+const vue_1 = require("vue");
+function addDuplicateSlides(slides) {
+    const { length } = slides;
+    if (length > 1) {
+        slides.push(duplicateSlide(slides[0], 0, 'append'));
+        slides.unshift(duplicateSlide(slides[length - 1], length - 1, 'prepend'));
+        return slides;
+    }
+    return slides;
+}
+exports.addDuplicateSlides = addDuplicateSlides;
+function duplicateSlide(child, index, position) {
+    return (0, vue_1.cloneVNode)(child, {
+        // for patch
+        key: `carousel-item-duplicate-${index}-${position}`
+    });
+}
+function getDisplayIndex(current, length, duplicatedable) {
+    return !duplicatedable
+        ? current
+        : current === 0
+            ? length - 3
+            : current === length - 1
+                ? 0
+                : current - 1;
+}
+exports.getDisplayIndex = getDisplayIndex;
+function getRealIndex(current, duplicatedable) {
+    return !duplicatedable ? current : current + 1;
+}
+exports.getRealIndex = getRealIndex;
+function getPrevIndex(current, length, duplicatedable) {
+    if (current < 0)
+        return null;
+    return current === 0 ? (duplicatedable ? length - 1 : null) : current - 1;
+}
+exports.getPrevIndex = getPrevIndex;
+function getNextIndex(current, length, duplicatedable) {
+    if (current > length - 1)
+        return null;
+    return current === length - 1 ? (duplicatedable ? 0 : null) : current + 1;
+}
+exports.getNextIndex = getNextIndex;
+function getDisplayTotalView(total, duplicatedable) {
+    return duplicatedable && total > 3 ? total - 2 : total;
+}
+exports.getDisplayTotalView = getDisplayTotalView;

package/lib/carousel/src/utils/event.d.ts

@@ -0,0 +1 @@
+export declare function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent;

package/lib/carousel/src/utils/event.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTouchEvent = void 0;
+function isTouchEvent(e) {
+    return window.TouchEvent && e instanceof window.TouchEvent;
+}
+exports.isTouchEvent = isTouchEvent;

package/lib/carousel/src/utils/index.d.ts

@@ -0,0 +1,6 @@
+import { Size } from '../interface';
+export * from './duplicatedLogic';
+export * from './event';
+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;

package/lib/carousel/src/utils/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSpeed = exports.clampValue = exports.calculateSize = void 0;
+__exportStar(require("./duplicatedLogic"), exports);
+__exportStar(require("./event"), exports);
+function calculateSize(element, innerOnly) {
+    let { width, height } = element.getBoundingClientRect();
+    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 };
+}
+exports.calculateSize = calculateSize;
+function clampValue(value, min, max) {
+    return value < min ? min : value > max ? max : value;
+}
+exports.clampValue = clampValue;
+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;
+}
+exports.resolveSpeed = resolveSpeed;

package/lib/checkbox/src/CheckboxGroup.d.ts

@@ -24,13 +24,15 @@ export declare const checkboxGroupProps: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: Array<string | number>) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: Array<string | number>) => void>>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<(value: Array<string | number>) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: Array<string | number>, meta: {
+        actionType: 'check' | 'uncheck';
+        value: string | number;
+    }) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: Array<string | number>, meta: {
+        actionType: 'check' | 'uncheck';
+        value: string | number;
+    }) => void>>;
+    readonly onChange: PropType<MaybeArray<(value: Array<string | number>) => void> | undefined>;
 };
 export declare type CheckboxGroupProps = ExtractPublicPropTypes<typeof checkboxGroupProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -46,13 +48,15 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[]) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[]) => void>>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[], meta: {
+        actionType: "check" | "uncheck";
+        value: string | number;
+    }) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[], meta: {
+        actionType: "check" | "uncheck";
+        value: string | number;
+    }) => void>>;
+    readonly onChange: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
 }, {
     mergedClsPrefix: ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -68,16 +72,17 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[]) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[]) => void>>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[], meta: {
+        actionType: "check" | "uncheck";
+        value: string | number;
+    }) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[], meta: {
+        actionType: "check" | "uncheck";
+        value: string | number;
+    }) => void>>;
+    readonly onChange: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
 }>>, {
     readonly disabled: boolean | undefined;
-    readonly onChange: MaybeArray<(value: (string | number)[]) => void> | undefined;
     readonly defaultValue: (string | number)[] | null;
 }>;
 export default _default;