naive-ui 2.23.1 → 2.23.2

package/es/number-animation/src/NumberAnimation.js

@@ -0,0 +1,81 @@
+import { defineComponent, computed, onMounted, ref, watchEffect } from 'vue';
+import { round } from 'lodash-es';
+import { tween } from './utils';
+const numberAnimationProps = {
+    to: {
+        type: Number,
+        default: 0
+    },
+    precision: {
+        type: Number,
+        default: 0
+    },
+    showSeparator: Boolean,
+    from: { type: Number, default: 0 },
+    active: {
+        type: Boolean,
+        default: true
+    },
+    duration: {
+        type: Number,
+        default: 2000
+    }
+};
+export default defineComponent({
+    name: 'NumberAnimation',
+    props: numberAnimationProps,
+    setup(props) {
+        const { duration } = props;
+        const displayedValueRef = ref(props.from);
+        let animating = false;
+        const onUpdate = (currentValue) => {
+            displayedValueRef.value = currentValue;
+        };
+        const onFinish = () => {
+            displayedValueRef.value = props.to;
+            animating = false;
+        };
+        const animate = (from = props.from, to = props.to) => {
+            animating = true;
+            displayedValueRef.value = props.from;
+            if (from !== to) {
+                tween({
+                    from,
+                    to,
+                    duration: duration,
+                    onUpdate,
+                    onFinish
+                });
+            }
+        };
+        const formattedValueRef = computed(() => {
+            const formatted = round(displayedValueRef.value, props.precision).toFixed(props.precision);
+            const splitValue = formatted.split('.');
+            const integer = props.showSeparator
+                ? Number(splitValue[0]).toLocaleString('en-US')
+                : splitValue[0];
+            const decimal = splitValue[1];
+            return {
+                integer,
+                decimal
+            };
+        });
+        function play() {
+            if (animating)
+                return;
+            animate();
+        }
+        onMounted(() => {
+            watchEffect(() => {
+                if (props.active)
+                    animate();
+            });
+        });
+        const exposedMethods = { play };
+        return Object.assign({ formattedValue: formattedValueRef }, exposedMethods);
+    },
+    render() {
+        const { formattedValue: { integer, decimal } } = this;
+        return [integer, decimal ? '.' : null, decimal];
+    }
+});

package/es/number-animation/src/utils.d.ts

@@ -0,0 +1,8 @@
+export interface TweenProps {
+    from: number;
+    to: number;
+    duration: number;
+    onUpdate: (currentValue: number) => void;
+    onFinish: () => void;
+}
+export declare function tween(props: TweenProps): void;

package/es/number-animation/src/utils.js

@@ -0,0 +1,17 @@
+const easeOut = (t) => 1 - Math.pow(1 - t, 5);
+export function tween(props) {
+    const { from, to, duration, onUpdate, onFinish } = props;
+    const tick = () => {
+        const current = performance.now();
+        const elapsedTime = Math.min(current - startTime, duration);
+        const currentValue = from + (to - from) * easeOut(elapsedTime / duration);
+        if (elapsedTime === duration) {
+            onFinish();
+            return;
+        }
+        onUpdate(currentValue);
+        requestAnimationFrame(tick);
+    };
+    const startTime = performance.now();
+    tick();
+}

package/es/page-header/src/PageHeader.d.ts

@@ -82,16 +82,16 @@ declare const _default: import("vue").DefineComponent<{
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--title-text-color': string;
-        '--title-font-size': string;
-        '--title-font-weight': string;
-        '--font-size': string;
-        '--back-size': string;
-        '--subtitle-text-color': string;
-        '--back-color': string;
-        '--back-color-hover': string;
-        '--back-color-pressed': string;
-        '--bezier': string;
+        '--n-title-text-color': string;
+        '--n-title-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-font-size': string;
+        '--n-back-size': string;
+        '--n-subtitle-text-color': string;
+        '--n-back-color': string;
+        '--n-back-color-hover': string;
+        '--n-back-color-pressed': string;
+        '--n-bezier': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     title?: unknown;

package/es/page-header/src/PageHeader.js

@@ -20,16 +20,16 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { titleTextColor, subtitleTextColor, backColor, fontSize, titleFontSize, backSize, titleFontWeight, backColorHover, backColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--title-text-color': titleTextColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--font-size': fontSize,
-                    '--back-size': backSize,
-                    '--subtitle-text-color': subtitleTextColor,
-                    '--back-color': backColor,
-                    '--back-color-hover': backColorHover,
-                    '--back-color-pressed': backColorPressed,
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-title-text-color': titleTextColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-font-size': fontSize,
+                    '--n-back-size': backSize,
+                    '--n-subtitle-text-color': subtitleTextColor,
+                    '--n-back-color': backColor,
+                    '--n-back-color-hover': backColorHover,
+                    '--n-back-color-pressed': backColorPressed,
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             })
         };

package/es/page-header/src/styles/index.cssr.js

@@ -1,14 +1,14 @@
 import { c, cB, cE } from '../../../_utils/cssr'; // vars:
-// --title-font-size
-// --title-text-color
-// --font-size
-// --subtitle-text-color
-// --back-color
-// --back-color-hover
-// --back-color-pressed
-// --back-size
-// --title-font-weight
-// --bezier
+// --n-title-font-size
+// --n-title-text-color
+// --n-font-size
+// --n-subtitle-text-color
+// --n-back-color
+// --n-back-color-hover
+// --n-back-color-pressed
+// --n-back-size
+// --n-title-font-weight
+// --n-bezier
 
 export default c([cB('page-header-header', `
  margin-bottom: 20px;
@@ -17,7 +17,7 @@ export default c([cB('page-header-header', `
  align-items: center;
  justify-content: space-between;
  line-height: 1.5;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  `, [cE('main', `
  display: flex;
  flex-wrap: nowrap;
@@ -25,25 +25,25 @@ export default c([cB('page-header-header', `
  `), cE('back', `
  display: flex;
  margin-right: 16px;
- font-size: var(--back-size);
+ font-size: var(--n-back-size);
  cursor: pointer;
- color: var(--back-color);
- transition: color .3s var(--bezier);
- `, [c('&:hover', 'color: var(--back-color-hover);'), c('&:active', 'color: var(--back-color-pressed);')]), cE('avatar', `
+ color: var(--n-back-color);
+ transition: color .3s var(--n-bezier);
+ `, [c('&:hover', 'color: var(--n-back-color-hover);'), c('&:active', 'color: var(--n-back-color-pressed);')]), cE('avatar', `
  display: flex;
  margin-right: 12px
  `), cE('title', `
  margin-right: 16px;
- transition: color .3s var(--bezier);
- font-size: var(--title-font-size);
- font-weight: var(--title-font-weight);
- color: var(--title-text-color);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-title-font-size);
+ font-weight: var(--n-title-font-weight);
+ color: var(--n-title-text-color);
  `), cE('subtitle', `
  font-size: 14px;
- transition: color .3s var(--bezier);
- color: var(--subtitle-text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-subtitle-text-color);
  `)]), cB('page-header-content', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  `, [c('&:not(:first-child)', 'margin-top: 20px;')]), cB('page-header-footer', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  `, [c('&:not(:first-child)', 'margin-top: 20px;')])]);

package/es/pagination/src/Pagination.d.ts

@@ -1470,6 +1470,7 @@ declare const _default: import("vue").DefineComponent<{
     showFastBackward: import("vue").Ref<boolean>;
     showFastForward: import("vue").Ref<boolean>;
     pageItems: import("vue").ComputedRef<PageItem[]>;
+    mergedItemCount: import("vue").ComputedRef<number>;
     jumperValue: import("vue").Ref<string>;
     pageSizeOptions: import("vue").ComputedRef<PaginationSizeOption[]>;
     mergedPageSize: import("vue").ComputedRef<number>;
@@ -1951,47 +1952,47 @@ declare const _default: import("vue").DefineComponent<{
     handlePageItemMouseEnter: (pageItem: PageItem) => void;
     handlePageItemMouseLeave: (pageItem: PageItem) => void;
     cssVars: import("vue").ComputedRef<{
-        '--prefix-margin': string;
-        '--suffix-margin': string;
-        '--item-font-size': string;
-        '--select-width': string;
-        '--select-margin': string;
-        '--input-width': string;
-        '--input-margin': string;
-        '--item-size': string;
-        '--item-text-color': string;
-        '--item-text-color-disabled': string;
-        '--item-text-color-hover': string;
-        '--item-text-color-active': string;
-        '--item-text-color-pressed': string;
-        '--item-color': string;
-        '--item-color-hover': string;
-        '--item-color-disabled': string;
-        '--item-color-active': string;
-        '--item-color-active-hover': string;
-        '--item-color-pressed': string;
-        '--item-border': string;
-        '--item-border-hover': string;
-        '--item-border-disabled': string;
-        '--item-border-active': string;
-        '--item-border-pressed': string;
-        '--item-padding': string;
-        '--item-border-radius': string;
-        '--bezier': string;
-        '--jumper-font-size': string;
-        '--jumper-text-color': string;
-        '--jumper-text-color-disabled': string;
-        '--item-margin': string;
-        '--button-icon-size': string;
-        '--button-icon-color': string;
-        '--button-icon-color-hover': string;
-        '--button-icon-color-pressed': string;
-        '--button-color-hover': string;
-        '--button-color': string;
-        '--button-color-pressed': string;
-        '--button-border': string;
-        '--button-border-hover': string;
-        '--button-border-pressed': string;
+        '--n-prefix-margin': string;
+        '--n-suffix-margin': string;
+        '--n-item-font-size': string;
+        '--n-select-width': string;
+        '--n-select-margin': string;
+        '--n-input-width': string;
+        '--n-input-margin': string;
+        '--n-item-size': string;
+        '--n-item-text-color': string;
+        '--n-item-text-color-disabled': string;
+        '--n-item-text-color-hover': string;
+        '--n-item-text-color-active': string;
+        '--n-item-text-color-pressed': string;
+        '--n-item-color': string;
+        '--n-item-color-hover': string;
+        '--n-item-color-disabled': string;
+        '--n-item-color-active': string;
+        '--n-item-color-active-hover': string;
+        '--n-item-color-pressed': string;
+        '--n-item-border': string;
+        '--n-item-border-hover': string;
+        '--n-item-border-disabled': string;
+        '--n-item-border-active': string;
+        '--n-item-border-pressed': string;
+        '--n-item-padding': string;
+        '--n-item-border-radius': string;
+        '--n-bezier': string;
+        '--n-jumper-font-size': string;
+        '--n-jumper-text-color': string;
+        '--n-jumper-text-color-disabled': string;
+        '--n-item-margin': string;
+        '--n-button-icon-size': string;
+        '--n-button-icon-color': string;
+        '--n-button-icon-color-hover': string;
+        '--n-button-icon-color-pressed': string;
+        '--n-button-color-hover': string;
+        '--n-button-color': string;
+        '--n-button-color-pressed': string;
+        '--n-button-border': string;
+        '--n-button-border-hover': string;
+        '--n-button-border-pressed': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly page?: unknown;

package/es/pagination/src/Pagination.js

@@ -100,6 +100,12 @@ export default defineComponent({
             }
             return endIndex;
         });
+        const mergedItemCountRef = computed(() => {
+            const { itemCount } = props;
+            if (itemCount !== undefined)
+                return itemCount;
+            return (props.pageCount || 1) * mergedPageSizeRef.value;
+        });
         const disableTransitionOneTick = () => {
             void nextTick(() => {
                 var _a;
@@ -244,6 +250,7 @@ export default defineComponent({
             showFastBackward: showFastBackwardRef,
             showFastForward: showFastForwardRef,
             pageItems: computed(() => pageItems(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot)),
+            mergedItemCount: mergedItemCountRef,
             jumperValue: jumperValueRef,
             pageSizeOptions: pageSizeOptionsRef,
             mergedPageSize: mergedPageSizeRef,
@@ -264,47 +271,47 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { itemSize, itemPadding, itemMargin, inputWidth, selectWidth, inputMargin, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--prefix-margin': prefixMargin,
-                    '--suffix-margin': suffixMargin,
-                    '--item-font-size': itemFontSize,
-                    '--select-width': selectWidth,
-                    '--select-margin': selectMargin,
-                    '--input-width': inputWidth,
-                    '--input-margin': inputMargin,
-                    '--item-size': itemSize,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-disabled': itemTextColorDisabled,
-                    '--item-text-color-hover': itemTextColorHover,
-                    '--item-text-color-active': itemTextColorActive,
-                    '--item-text-color-pressed': itemTextColorPressed,
-                    '--item-color': itemColor,
-                    '--item-color-hover': itemColorHover,
-                    '--item-color-disabled': itemColorDisabled,
-                    '--item-color-active': itemColorActive,
-                    '--item-color-active-hover': itemColorActiveHover,
-                    '--item-color-pressed': itemColorPressed,
-                    '--item-border': itemBorder,
-                    '--item-border-hover': itemBorderHover,
-                    '--item-border-disabled': itemBorderDisabled,
-                    '--item-border-active': itemBorderActive,
-                    '--item-border-pressed': itemBorderPressed,
-                    '--item-padding': itemPadding,
-                    '--item-border-radius': itemBorderRadius,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--jumper-font-size': jumperFontSize,
-                    '--jumper-text-color': jumperTextColor,
-                    '--jumper-text-color-disabled': jumperTextColorDisabled,
-                    '--item-margin': itemMargin,
-                    '--button-icon-size': buttonIconSize,
-                    '--button-icon-color': buttonIconColor,
-                    '--button-icon-color-hover': buttonIconColorHover,
-                    '--button-icon-color-pressed': buttonIconColorPressed,
-                    '--button-color-hover': buttonColorHover,
-                    '--button-color': buttonColor,
-                    '--button-color-pressed': buttonColorPressed,
-                    '--button-border': buttonBorder,
-                    '--button-border-hover': buttonBorderHover,
-                    '--button-border-pressed': buttonBorderPressed
+                    '--n-prefix-margin': prefixMargin,
+                    '--n-suffix-margin': suffixMargin,
+                    '--n-item-font-size': itemFontSize,
+                    '--n-select-width': selectWidth,
+                    '--n-select-margin': selectMargin,
+                    '--n-input-width': inputWidth,
+                    '--n-input-margin': inputMargin,
+                    '--n-item-size': itemSize,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-disabled': itemTextColorDisabled,
+                    '--n-item-text-color-hover': itemTextColorHover,
+                    '--n-item-text-color-active': itemTextColorActive,
+                    '--n-item-text-color-pressed': itemTextColorPressed,
+                    '--n-item-color': itemColor,
+                    '--n-item-color-hover': itemColorHover,
+                    '--n-item-color-disabled': itemColorDisabled,
+                    '--n-item-color-active': itemColorActive,
+                    '--n-item-color-active-hover': itemColorActiveHover,
+                    '--n-item-color-pressed': itemColorPressed,
+                    '--n-item-border': itemBorder,
+                    '--n-item-border-hover': itemBorderHover,
+                    '--n-item-border-disabled': itemBorderDisabled,
+                    '--n-item-border-active': itemBorderActive,
+                    '--n-item-border-pressed': itemBorderPressed,
+                    '--n-item-padding': itemPadding,
+                    '--n-item-border-radius': itemBorderRadius,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-jumper-font-size': jumperFontSize,
+                    '--n-jumper-text-color': jumperTextColor,
+                    '--n-jumper-text-color-disabled': jumperTextColorDisabled,
+                    '--n-item-margin': itemMargin,
+                    '--n-button-icon-size': buttonIconSize,
+                    '--n-button-icon-color': buttonIconColor,
+                    '--n-button-icon-color-hover': buttonIconColorHover,
+                    '--n-button-icon-color-pressed': buttonIconColorPressed,
+                    '--n-button-color-hover': buttonColorHover,
+                    '--n-button-color': buttonColor,
+                    '--n-button-color-pressed': buttonColorPressed,
+                    '--n-button-border': buttonBorder,
+                    '--n-button-border-hover': buttonBorderHover,
+                    '--n-button-border-pressed': buttonBorderPressed
                 };
             })
         };
@@ -326,7 +333,7 @@ export default defineComponent({
                 pageCount: mergedPageCount,
                 startIndex: this.startIndex,
                 endIndex: this.endIndex,
-                itemCount: this.itemCount
+                itemCount: this.mergedItemCount
             }))) : null,
             h("div", { class: [
                     `${mergedClsPrefix}-pagination-item`,
@@ -339,7 +346,7 @@ export default defineComponent({
                 pageCount: mergedPageCount,
                 startIndex: this.startIndex,
                 endIndex: this.endIndex,
-                itemCount: this.itemCount
+                itemCount: this.mergedItemCount
             })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(BackwardIcon, null) }))),
             pageItems.map((pageItem, index) => {
                 return (h("div", { key: index, class: [
@@ -363,7 +370,7 @@ export default defineComponent({
                 page: mergedPage,
                 pageSize: mergedPageSize,
                 pageCount: mergedPageCount,
-                itemCount: this.itemCount,
+                itemCount: this.mergedItemCount,
                 startIndex: this.startIndex,
                 endIndex: this.endIndex
             })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(ForwardIcon, null) }))),
@@ -379,7 +386,7 @@ export default defineComponent({
                 pageCount: mergedPageCount,
                 startIndex: this.startIndex,
                 endIndex: this.endIndex,
-                itemCount: this.itemCount
+                itemCount: this.mergedItemCount
             }))) : null));
     }
 });