naive-ui 2.22.0 → 2.24.0

package/es/color-picker/src/ColorPicker.d.ts

@@ -1,10 +1,10 @@
-import { PropType, VNode, InjectionKey, ComputedRef, Ref } from 'vue';
+import { PropType, VNode, InjectionKey, ComputedRef, Ref, Slots } from 'vue';
 import { RGBA, HSLA } from 'seemly';
 import type { ColorPickerTheme } from '../styles';
 import { MergedTheme } from '../../_mixins';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { ColorPickerMode } from './utils';
-import { OnUpdateValue } from './interface';
+import { OnUpdateValue, RenderLabel } from './interface';
 export declare const colorPickerPanelProps: {
     readonly value: StringConstructor;
     readonly show: {
@@ -18,7 +18,7 @@ export declare const colorPickerPanelProps: {
     readonly defaultValue: PropType<string | null>;
     readonly modes: {
         readonly type: PropType<ColorPickerMode[]>;
-        readonly default: readonly ["rgb", "hex", "hsl"];
+        readonly default: () => string[];
     };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -36,6 +36,7 @@ export declare const colorPickerPanelProps: {
     };
     readonly internalActions: PropType<readonly ("undo" | "redo")[]>;
     readonly size: PropType<"small" | "medium" | "large">;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly onComplete: PropType<OnUpdateValue>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
@@ -883,7 +884,11 @@ export declare const colorPickerPanelProps: {
     }>>>;
 };
 export declare type ColorPickerProps = ExtractPublicPropTypes<typeof colorPickerPanelProps>;
-export declare const colorPickerThemeInjectionKey: InjectionKey<ComputedRef<MergedTheme<ColorPickerTheme>>>;
+export declare const colorPickerInjectionKey: InjectionKey<{
+    themeRef: ComputedRef<MergedTheme<ColorPickerTheme>>;
+    colorPickerSlots: Slots;
+    renderLabelRef: Ref<RenderLabel | undefined>;
+}>;
 declare const _default: import("vue").DefineComponent<{
     readonly value: StringConstructor;
     readonly show: {
@@ -897,7 +902,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly defaultValue: PropType<string | null>;
     readonly modes: {
         readonly type: PropType<ColorPickerMode[]>;
-        readonly default: readonly ["rgb", "hex", "hsl"];
+        readonly default: () => string[];
     };
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -915,6 +920,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly internalActions: PropType<readonly ("undo" | "redo")[]>;
     readonly size: PropType<"small" | "medium" | "large">;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly onComplete: PropType<OnUpdateValue>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
@@ -1774,16 +1780,16 @@ declare const _default: import("vue").DefineComponent<{
     handleClickOutside(e: MouseEvent): void;
     renderPanel: () => VNode;
     cssVars: ComputedRef<{
-        '--bezier': string;
-        '--text-color': string;
-        '--color': string;
-        '--panel-font-size': string;
-        '--font-size': string;
-        '--box-shadow': string;
-        '--border': string;
-        '--border-radius': string;
-        '--height': string;
-        '--divider-color': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-color': string;
+        '--n-panel-font-size': string;
+        '--n-font-size': string;
+        '--n-box-shadow': string;
+        '--n-border': string;
+        '--n-border-radius': string;
+        '--n-height': string;
+        '--n-divider-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly value?: unknown;
@@ -1798,6 +1804,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly actions?: unknown;
     readonly internalActions?: unknown;
     readonly size?: unknown;
+    readonly renderLabel?: unknown;
     readonly onComplete?: unknown;
     readonly 'onUpdate:show'?: unknown;
     readonly onUpdateShow?: unknown;
@@ -2657,6 +2664,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
     }>> | undefined;
+    renderLabel?: RenderLabel | undefined;
     "onUpdate:show"?: MaybeArray<(value: boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(value: boolean) => void> | undefined;
     defaultValue?: string | null | undefined;

package/es/color-picker/src/ColorPicker.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, toRef, watchEffect, withDirectives, Transition, provide, watch, nextTick } from 'vue';
+import { h, defineComponent, ref, computed, toRef, watchEffect, withDirectives, Transition, provide, watch, nextTick, renderSlot } from 'vue';
 import { hsv2rgb, rgb2hsv, rgba, hsva, hsla, hsl2hsv, hsv2hsl, rgb2hsl, hsl2rgb, toRgbaString, toHsvaString, toHslaString, toHexaString, toHsvString, toRgbString, toHexString, toHslString } from 'seemly';
 import { useIsMounted, useMergedState } from 'vooks';
 import { VBinder, VFollower, VTarget } from 'vueuc';
@@ -6,16 +6,16 @@ import { clickoutside } from 'vdirs';
 import { colorPickerLight } from '../styles';
 import { useFormItem, useConfig, useTheme, useLocale } from '../../_mixins';
 import { call, createKey, useAdjustedTo } from '../../_utils';
+import { NButton } from '../../button';
 import HueSlider from './HueSlider';
 import AlphaSlider from './AlphaSlider';
 import Pallete from './Pallete';
 import ColorInput from './ColorInput';
 import ColorPickerTrigger from './ColorPickerTrigger';
 import { deriveDefaultValue, getModeFromValue } from './utils';
-import style from './styles/index.cssr';
-import { NButton } from '../../button';
 import ColorPickerSwatches from './ColorPickerSwatches';
 import ColorPreview from './ColorPreview';
+import style from './styles/index.cssr';
 export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.props), { value: String, show: {
         type: Boolean,
         default: undefined
@@ -25,15 +25,15 @@ export const colorPickerPanelProps = Object.assign(Object.assign({}, useTheme.pr
     }, defaultValue: String, modes: {
         type: Array,
         // no hsva by default since browser doesn't support it
-        default: ['rgb', 'hex', 'hsl']
+        default: () => ['rgb', 'hex', 'hsl']
     }, to: useAdjustedTo.propTo, showAlpha: {
         type: Boolean,
         default: true
     }, showPreview: Boolean, swatches: Array, actions: {
         type: Array,
         default: null
-    }, internalActions: Array, size: String, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
-export const colorPickerThemeInjectionKey = Symbol('colorPickerThemeInjection');
+    }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+export const colorPickerInjectionKey = Symbol('colorPickerThemeInjection');
 export default defineComponent({
     name: 'ColorPicker',
     props: colorPickerPanelProps,
@@ -45,7 +45,11 @@ export default defineComponent({
         const { localeRef } = useLocale('global');
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
         const themeRef = useTheme('ColorPicker', 'ColorPicker', style, colorPickerLight, props, mergedClsPrefixRef);
-        provide(colorPickerThemeInjectionKey, themeRef);
+        provide(colorPickerInjectionKey, {
+            themeRef,
+            renderLabelRef: toRef(props, 'renderLabel'),
+            colorPickerSlots: slots
+        });
         const uncontrolledShowRef = ref(props.defaultShow);
         const mergedShowRef = useMergedState(toRef(props, 'show'), uncontrolledShowRef);
         function doUpdateShow(value) {
@@ -64,7 +68,8 @@ export default defineComponent({
         const undoStackRef = ref([mergedValueRef.value]);
         const valueIndexRef = ref(0);
         const valueModeRef = computed(() => getModeFromValue(mergedValueRef.value));
-        const displayedModeRef = ref(getModeFromValue(mergedValueRef.value) || 'rgb');
+        const { modes } = props;
+        const displayedModeRef = ref(getModeFromValue(mergedValueRef.value) || modes[0] || 'rgb');
         function handleUpdateDisplayedMode() {
             const { modes } = props;
             const { value: displayedMode } = displayedModeRef;
@@ -329,16 +334,16 @@ export default defineComponent({
             const { value: mergedSize } = mergedSizeRef;
             const { common: { cubicBezierEaseInOut }, self: { textColor, color, panelFontSize, boxShadow, border, borderRadius, dividerColor, [createKey('height', mergedSize)]: height, [createKey('fontSize', mergedSize)]: fontSize } } = themeRef.value;
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--text-color': textColor,
-                '--color': color,
-                '--panel-font-size': panelFontSize,
-                '--font-size': fontSize,
-                '--box-shadow': boxShadow,
-                '--border': border,
-                '--border-radius': borderRadius,
-                '--height': height,
-                '--divider-color': dividerColor
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-color': color,
+                '--n-panel-font-size': panelFontSize,
+                '--n-font-size': fontSize,
+                '--n-box-shadow': boxShadow,
+                '--n-border': border,
+                '--n-border-radius': borderRadius,
+                '--n-height': height,
+                '--n-divider-color': dividerColor
             };
         });
         function renderPanel() {
@@ -389,12 +394,16 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { $slots, mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-color-picker`, ref: "selfRef", style: this.cssVars },
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(ColorPickerTrigger, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }))
+                        default: () => (h(ColorPickerTrigger, { clsPrefix: mergedClsPrefix, value: this.mergedValue, hsla: this.hsla, onClick: this.handleTriggerClick }, {
+                            label: $slots.label
+                                ? () => renderSlot($slots, 'label')
+                                : undefined
+                        }))
                     }),
                     h(VFollower, { placement: "bottom-start", show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {

package/es/color-picker/src/ColorPickerTrigger.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     onClick: PropType<() => void>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clsPrefix?: unknown;
     value?: unknown;
     hsla?: unknown;

package/es/color-picker/src/ColorPickerTrigger.js

@@ -1,5 +1,6 @@
 import { toHslaString } from 'seemly';
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, inject } from 'vue';
+import { colorPickerInjectionKey } from './ColorPicker';
 export default defineComponent({
     name: 'ColorPickerTrigger',
     props: {
@@ -17,21 +18,26 @@ export default defineComponent({
         },
         onClick: Function
     },
-    render() {
-        const { hsla, value, clsPrefix } = this;
-        return (h("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: this.onClick },
-            h("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
-                h("div", { class: `${clsPrefix}-color-picker-checkboard` }),
-                h("div", { style: {
-                        position: 'absolute',
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        bottom: 0,
-                        backgroundColor: hsla ? toHslaString(hsla) : ''
-                    } }),
-                value && hsla ? (h("div", { class: `${clsPrefix}-color-picker-trigger__value`, style: {
-                        color: hsla[2] > 50 || hsla[3] < 0.5 ? 'black' : 'white'
-                    } }, value)) : null)));
+    setup(props) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const { colorPickerSlots, renderLabelRef } = inject(colorPickerInjectionKey, null);
+        return () => {
+            const { hsla, value, clsPrefix, onClick } = props;
+            const renderLabel = colorPickerSlots.label || renderLabelRef.value;
+            return (h("div", { class: `${clsPrefix}-color-picker-trigger`, onClick: onClick },
+                h("div", { class: `${clsPrefix}-color-picker-trigger__fill` },
+                    h("div", { class: `${clsPrefix}-color-picker-checkboard` }),
+                    h("div", { style: {
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            bottom: 0,
+                            backgroundColor: hsla ? toHslaString(hsla) : ''
+                        } }),
+                    value && hsla ? (h("div", { class: `${clsPrefix}-color-picker-trigger__value`, style: {
+                            color: hsla[2] > 50 || hsla[3] < 0.5 ? 'black' : 'white'
+                        } }, renderLabel ? renderLabel(value) : value)) : null)));
+        };
     }
 });

package/es/color-picker/src/interface.d.ts

@@ -1,2 +1,4 @@
+import { VNodeChild } from 'vue';
 export declare type OnUpdateValue = (value: string & null) => void;
 export declare type OnUpdateValueImpl = (value: string | null) => void;
+export declare type RenderLabel = (value: string | null) => VNodeChild;

package/es/color-picker/src/styles/index.cssr.js

@@ -1,34 +1,34 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --color
-// --text-color
-// --border-radius
-// --panel-font-size
-// --font-size
-// --bezier
-// --height
-// --box-shadow
-// --divider-color
+// --n-color
+// --n-text-color
+// --n-border-radius
+// --n-panel-font-size
+// --n-font-size
+// --n-bezier
+// --n-height
+// --n-box-shadow
+// --n-divider-color
 
 export default c([cB('color-picker', `
  display: inline-block;
  box-sizing: border-box;
- height: var(--height);
- font-size: var(--font-size);
+ height: var(--n-height);
+ font-size: var(--n-font-size);
  width: 100%;
  position: relative;
  `), cB('color-picker-panel', `
  margin: 4px 0;
  width: 240px;
- font-size: var(--panel-font-size);
- color: var(--text-color);
- background-color: var(--color);
+ font-size: var(--n-panel-font-size);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
  transition:
- box-shadow .3s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier);
- border-radius: var(--border-radius);
- box-shadow: var(--box-shadow);
+ box-shadow .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
+ box-shadow: var(--n-box-shadow);
  `, [fadeInScaleUpTransition(), cB('input', `
  text-align: center;
  `)]), cB('color-picker-checkboard', `
@@ -81,6 +81,7 @@ export default c([cB('color-picker', `
  height: 180px;
  position: relative;
  margin-bottom: 8px;
+ cursor: crosshair;
  `, [cE('layer', `
  position: absolute;
  left: 0;
@@ -127,21 +128,21 @@ export default c([cB('color-picker', `
  `), cB('color-picker-action', `
  display: flex;
  margin-top: -4px;
- border-top: 1px solid var(--divider-color);
+ border-top: 1px solid var(--n-divider-color);
  padding: 8px 12px;
  justify-content: flex-end;
  `, [cB('button', 'margin-left: 8px;')]), cB('color-picker-trigger', `
- border: var(--border);
+ border: var(--n-border);
  height: 100%;
  box-sizing: border-box;
- border-radius: var(--border-radius);
- transition: border-color .3s var(--bezier);
+ border-radius: var(--n-border-radius);
+ transition: border-color .3s var(--n-bezier);
  cursor: pointer;
  `, [cE('value', `
  white-space: nowrap;
  position: relative;
  `), cE('fill', `
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  position: absolute;
  display: flex;
  align-items: center;
@@ -151,11 +152,11 @@ export default c([cB('color-picker', `
  top: 4px;
  bottom: 4px;
  `), cB('color-picker-checkboard', `
- border-radius: var(--border-radius);
+ border-radius: var(--n-border-radius);
  `, [c('&::after', `
- --block-size: calc((var(--height) - 8px) / 3);
- background-size: calc(var(--block-size) * 2) calc(var(--block-size) * 2);
- background-position: 0 0, 0 var(--block-size), var(--block-size) calc(-1 * var(--block-size)), calc(-1 * var(--block-size)) 0px; 
+ --n-block-size: calc((var(--n-height) - 8px) / 3);
+ background-size: calc(var(--n-block-size) * 2) calc(var(--n-block-size) * 2);
+ background-position: 0 0, 0 var(--n-block-size), var(--n-block-size) calc(-1 * var(--n-block-size)), calc(-1 * var(--n-block-size)) 0px; 
  `)])]), cB('color-picker-swatches', `
  display: grid;
  grid-gap: 8px;

package/es/components.d.ts

@@ -17,6 +17,8 @@ export * from './code';
 export * from './collapse';
 export * from './collapse-transition';
 export * from './config-provider';
+export * from './countdown';
+export * from './number-animation';
 export * from './data-table';
 export * from './date-picker';
 export * from './descriptions';

package/es/components.js

@@ -17,6 +17,8 @@ export * from './code';
 export * from './collapse';
 export * from './collapse-transition';
 export * from './config-provider';
+export * from './countdown';
+export * from './number-animation';
 export * from './data-table';
 export * from './date-picker';
 export * from './descriptions';

package/es/config-provider/src/ConfigProvider.d.ts

@@ -110,6 +110,15 @@ export declare const configProviderProps: {
             export: string;
             restore: string;
         };
+        Image: {
+            tipPrevious: string;
+            tipNext: string;
+            tipCounterclockwise: string;
+            tipClockwise: string;
+            tipZoomOut: string;
+            tipZoomIn: string;
+            tipClose: string;
+        };
     } | null>;
     readonly dateLocale: PropType<NDateLocale | null>;
     readonly namespace: StringConstructor;
@@ -236,6 +245,15 @@ declare const _default: import("vue").DefineComponent<{
             export: string;
             restore: string;
         };
+        Image: {
+            tipPrevious: string;
+            tipNext: string;
+            tipCounterclockwise: string;
+            tipClockwise: string;
+            tipZoomOut: string;
+            tipZoomIn: string;
+            tipClose: string;
+        };
     } | null>;
     readonly dateLocale: PropType<NDateLocale | null>;
     readonly namespace: StringConstructor;
@@ -386,6 +404,15 @@ declare const _default: import("vue").DefineComponent<{
             export: string;
             restore: string;
         };
+        Image: {
+            tipPrevious: string;
+            tipNext: string;
+            tipCounterclockwise: string;
+            tipClockwise: string;
+            tipZoomOut: string;
+            tipZoomIn: string;
+            tipClose: string;
+        };
     } | null | undefined;
     dateLocale?: NDateLocale | null | undefined;
     hljs?: Hljs | undefined;

package/es/countdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NCountdown } from './src/Countdown';
+export type { CountdownProps } from './src/Countdown';

package/es/countdown/index.js

@@ -0,0 +1 @@
+export { default as NCountdown } from './src/Countdown';

package/es/countdown/src/Countdown.d.ts

@@ -0,0 +1,72 @@
+import { PropType, VNodeChild } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+declare const countdownProps: {
+    label: StringConstructor;
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    precision: {
+        type: PropType<0 | 2 | 1 | 3>;
+        default: number;
+    };
+    render: PropType<(props: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    }) => VNodeChild>;
+    onFinish: PropType<() => void>;
+};
+export declare type CountdownProps = ExtractPublicPropTypes<typeof countdownProps>;
+declare const _default: import("vue").DefineComponent<{
+    label: StringConstructor;
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    precision: {
+        type: PropType<0 | 2 | 1 | 3>;
+        default: number;
+    };
+    render: PropType<(props: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    }) => VNodeChild>;
+    onFinish: PropType<() => void>;
+}, () => VNodeChild, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    label?: unknown;
+    duration?: unknown;
+    active?: unknown;
+    precision?: unknown;
+    render?: unknown;
+    onFinish?: unknown;
+} & {
+    active: boolean;
+    duration: number;
+    precision: 0 | 2 | 1 | 3;
+} & {
+    label?: string | undefined;
+    render?: ((props: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+        milliseconds: number;
+    }) => VNodeChild) | undefined;
+    onFinish?: (() => void) | undefined;
+}>, {
+    active: boolean;
+    duration: number;
+    precision: 0 | 2 | 1 | 3;
+}>;
+export default _default;

package/es/countdown/src/Countdown.js

@@ -0,0 +1,126 @@
+import { defineComponent, onMounted, onBeforeUnmount, watchEffect, reactive } from 'vue';
+const countdownProps = {
+    label: String,
+    duration: {
+        type: Number,
+        default: 0
+    },
+    active: {
+        type: Boolean,
+        default: true
+    },
+    precision: {
+        type: Number,
+        default: 0
+    },
+    render: Function,
+    onFinish: Function
+};
+export default defineComponent({
+    name: 'Countdown',
+    props: countdownProps,
+    setup(props) {
+        let timerId = null;
+        let rafId = null;
+        let elapsed = 0;
+        let finished = false;
+        const timeInfo = reactive({
+            hours: 0,
+            minutes: 0,
+            seconds: 0,
+            milliseconds: 0
+        });
+        deriveDisplayValue(props.duration);
+        let pnow = -1;
+        function getDistance(time) {
+            return props.duration - elapsed + pnow - time;
+        }
+        function deriveDisplayValue(distance) {
+            const hours = Math.floor(distance / 3600000);
+            const minutes = Math.floor((distance % 3600000) / 60000);
+            const seconds = Math.floor((distance % 60000) / 1000);
+            const milliseconds = Math.floor(distance % 1000);
+            timeInfo.hours = hours;
+            timeInfo.minutes = minutes;
+            timeInfo.seconds = seconds;
+            timeInfo.milliseconds = milliseconds;
+        }
+        function getDisplayValue(info) {
+            const { hours, minutes, seconds, milliseconds } = info;
+            const { precision } = props;
+            switch (precision) {
+                case 0:
+                    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+                default:
+                    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(Math.floor(milliseconds / (precision === 1 ? 100 : precision === 2 ? 10 : 1))).padStart(precision, '0')}`;
+            }
+        }
+        const frame = () => {
+            var _a;
+            const { precision } = props;
+            const distance = getDistance(performance.now());
+            if (distance <= 0) {
+                deriveDisplayValue(0);
+                stopTimer();
+                if (!finished) {
+                    (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props);
+                    finished = true;
+                }
+                return;
+            }
+            let leftTime;
+            switch (precision) {
+                case 3:
+                case 2:
+                    leftTime = distance % 34; // about 30 fps
+                    break;
+                case 1:
+                    leftTime = distance % 100;
+                    break;
+                default:
+                    leftTime = distance % 1000;
+            }
+            deriveDisplayValue(distance);
+            timerId = window.setTimeout(() => {
+                frame();
+            }, leftTime);
+        };
+        const stopTimer = () => {
+            if (timerId !== null) {
+                window.clearTimeout(timerId);
+                timerId = null;
+            }
+            if (rafId !== null) {
+                window.cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        };
+        onMounted(() => {
+            watchEffect(() => {
+                if (props.active) {
+                    pnow = performance.now();
+                    frame();
+                }
+                else {
+                    const now = performance.now();
+                    if (pnow !== -1) {
+                        elapsed += now - pnow;
+                    }
+                    stopTimer();
+                }
+            });
+        });
+        onBeforeUnmount(() => {
+            stopTimer();
+        });
+        return () => {
+            const { render } = props;
+            if (render) {
+                return render(timeInfo);
+            }
+            else {
+                return getDisplayValue(timeInfo);
+            }
+        };
+    }
+});

package/es/countdown/src/utils.js

@@ -0,0 +1 @@
+"use strict";