naive-ui 2.21.5 → 2.23.2

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

@@ -1,27 +1,27 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr'; // vars:
-// --color
-// --text-color
-// --description-text-color
-// --action-text-color
-// --title-text-color
-// --title-font-weight
-// --bezier
-// --bezier-ease-out
-// --bezier-ease-in
-// --border-radius
-// --box-shadow
-// --close-margin
-// --close-size
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --line-height
-// --icon-color
-// --width
-// --padding-top
-// --padding-bottom
-// --padding-left
-// --padding-right
+// --n-color
+// --n-text-color
+// --n-description-text-color
+// --n-action-text-color
+// --n-title-text-color
+// --n-title-font-weight
+// --n-bezier
+// --n-bezier-ease-out
+// --n-bezier-ease-in
+// --n-border-radius
+// --n-box-shadow
+// --n-close-margin
+// --n-close-size
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-line-height
+// --n-icon-color
+// --n-width
+// --n-padding-top
+// --n-padding-bottom
+// --n-padding-left
+// --n-padding-right
 
 export default c([cB('notification-container', `
  z-index: 4000;
@@ -76,44 +76,44 @@ export default c([cB('notification-container', `
  opacity: 1;
  `), c('&.notification-transition-leave-active', `
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier),
- opacity .3s var(--bezier),
- transform .3s var(--bezier-ease-in),
- max-height .3s var(--bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ transform .3s var(--n-bezier-ease-in),
+ max-height .3s var(--n-bezier),
  margin-bottom .3s linear,
- box-shadow .3s var(--bezier);
+ box-shadow .3s var(--n-bezier);
  `)]), cB('notification', `
- background-color: var(--color);
- color: var(--text-color);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier),
- opacity .3s var(--bezier),
- transform .3s var(--bezier-ease-out),
- max-height .3s var(--bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ transform .3s var(--n-bezier-ease-out),
+ max-height .3s var(--n-bezier),
  margin-bottom .3s linear,
- box-shadow .3s var(--bezier);
+ box-shadow .3s var(--n-bezier);
  font-family: inherit;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  font-weight: 400;
  position: relative;
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 12px;
- padding-left: var(--padding-left);
- padding-right: var(--padding-right);
- width: var(--width);
- border-radius: var(--border-radius);
- box-shadow: var(--box-shadow);
+ padding-left: var(--n-padding-left);
+ padding-right: var(--n-padding-right);
+ width: var(--n-width);
+ border-radius: var(--n-border-radius);
+ box-shadow: var(--n-box-shadow);
  box-sizing: border-box;
  opacity: 1;
  `, [// TODO: refactor type styles & transition
 cE('avatar', [cB('icon', {
-  color: 'var(--icon-color)'
+  color: 'var(--n-icon-color)'
 }), cB('base-icon', {
-  color: 'var(--icon-color)'
+  color: 'var(--n-icon-color)'
 })]), cM('show-avatar', [cB('notification-main', `
  margin-left: 40px;
  width: calc(100% - 40px); 
@@ -123,21 +123,21 @@ cE('avatar', [cB('icon', {
  position: absolute;
  top: 0;
  right: 0;
- margin: var(--close-margin);
- font-size: var(--close-size);
- transition: color .3s var(--bezier);
+ margin: var(--n-close-margin);
+ font-size: var(--n-close-size);
+ transition: color .3s var(--n-bezier);
  `)]), cE('avatar', `
  position: absolute;
- top: var(--padding-top);
- left: var(--padding-left);
+ top: var(--n-padding-top);
+ left: var(--n-padding-left);
  width: 28px;
  height: 28px;
  font-size: 28px;
  `, [cB('icon', {
-  transition: 'color .3s var(--bezier)'
+  transition: 'color .3s var(--n-bezier)'
 })]), cB('notification-main', `
- padding-top: var(--padding-top);
- padding-bottom: var(--padding-bottom);
+ padding-top: var(--n-padding-top);
+ padding-bottom: var(--n-padding-bottom);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
@@ -150,30 +150,30 @@ cE('avatar', [cB('icon', {
  margin-top: 12px;
  `, [cE('meta', `
  font-size: 12px;
- transition: color .3s var(--bezier-ease-out);
- color: var(--description-text-color);
+ transition: color .3s var(--n-bezier-ease-out);
+ color: var(--n-description-text-color);
  `), cE('action', `
  cursor: pointer;
- transition: color .3s var(--bezier-ease-out);
- color: var(--action-text-color);
+ transition: color .3s var(--n-bezier-ease-out);
+ color: var(--n-action-text-color);
  `)]), cE('header', `
- font-weight: var(--title-font-weight);
+ font-weight: var(--n-title-font-weight);
  font-size: 16px;
- transition: color .3s var(--bezier-ease-out);
- color: var(--title-text-color);
+ transition: color .3s var(--n-bezier-ease-out);
+ color: var(--n-title-text-color);
  `), cE('description', `
  margin-top: 8px;
  font-size: 12px;
- transition: color .3s var(--bezier-ease-out);
- color: var(--description-text-color);
+ transition: color .3s var(--n-bezier-ease-out);
+ color: var(--n-description-text-color);
  `), cE('content', `
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  margin: 12px 0 0 0;
  font-family: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
- transition: color .3s var(--bezier-ease-out);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier-ease-out);
+ color: var(--n-text-color);
  `, [c('&:first-child', {
   margin: 0
 })])])])])]);

package/es/number-animation/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NNumberAnimation } from './src/NumberAnimation';
+export type { NumberAnimationProps } from './src/NumberAnimation';
+export type { NumberAnimationInst } from './src/NumberAnimation';

package/es/number-animation/index.js

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

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

@@ -0,0 +1,79 @@
+import type { ExtractPublicPropTypes } from '../../_utils';
+declare const numberAnimationProps: {
+    to: {
+        type: NumberConstructor;
+        default: number;
+    };
+    precision: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showSeparator: BooleanConstructor;
+    from: {
+        type: NumberConstructor;
+        default: number;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+export declare type NumberAnimationProps = ExtractPublicPropTypes<typeof numberAnimationProps>;
+export interface NumberAnimationInst {
+    play: () => void;
+}
+declare const _default: import("vue").DefineComponent<{
+    to: {
+        type: NumberConstructor;
+        default: number;
+    };
+    precision: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showSeparator: BooleanConstructor;
+    from: {
+        type: NumberConstructor;
+        default: number;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    play: () => void;
+    formattedValue: import("vue").ComputedRef<{
+        integer: string;
+        decimal: string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    to?: unknown;
+    precision?: unknown;
+    showSeparator?: unknown;
+    from?: unknown;
+    active?: unknown;
+    duration?: unknown;
+} & {
+    active: boolean;
+    duration: number;
+    from: number;
+    to: number;
+    precision: number;
+    showSeparator: boolean;
+} & {}>, {
+    active: boolean;
+    duration: number;
+    from: number;
+    to: number;
+    precision: number;
+    showSeparator: boolean;
+}>;
+export default _default;

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
                 };
             })
         };
@@ -45,8 +45,8 @@ export default defineComponent({
                 `${mergedClsPrefix}-page-header-wrapper`,
                 this.rtlEnabled && `${mergedClsPrefix}-page-header-wrapper--rtl`
             ] },
-            headerSlot ? (h("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumn" }, headerSlot())) : null,
-            h("div", { class: `${mergedClsPrefix}-page-header`, key: "header" },
+            headerSlot ? (h("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumb" }, headerSlot())) : null,
+            (showBack || avatarSlot || showTitle || showSubtitle || showExtra) && (h("div", { class: `${mergedClsPrefix}-page-header`, key: "header" },
                 h("div", { class: `${mergedClsPrefix}-page-header__main`, key: "back" },
                     showBack ? (h("div", { class: `${mergedClsPrefix}-page-header__back`, onClick: onBack },
                         h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
@@ -55,7 +55,7 @@ export default defineComponent({
                     avatarSlot ? (h("div", { class: `${mergedClsPrefix}-page-header__avatar` }, avatarSlot())) : null,
                     showTitle ? (h("div", { class: `${mergedClsPrefix}-page-header__title`, key: "title" }, title || titleSlot())) : null,
                     showSubtitle ? (h("div", { class: `${mergedClsPrefix}-page-header__subtitle`, key: "subtitle" }, subtitle || subtitleSlot())) : null),
-                showExtra ? (h("div", { class: `${mergedClsPrefix}-page-header__extra` }, extra || extraSlot())) : null),
+                showExtra ? (h("div", { class: `${mergedClsPrefix}-page-header__extra` }, extra || extraSlot())) : null)),
             defaultSlot ? (h("div", { class: `${mergedClsPrefix}-page-header-content`, key: "content" }, defaultSlot())) : null,
             footerSlot ? (h("div", { class: `${mergedClsPrefix}-page-header-footer`, key: "footer" }, footerSlot())) : null));
     }

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,27 +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', `
- margin-top: 20px;
- font-size: var(--font-size);
- `), cB('page-header-footer', `
- margin-top: 20px;
- 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(--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;