naive-ui 2.23.1 → 2.23.2

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";

package/es/data-table/src/DataTable.d.ts

@@ -3817,45 +3817,45 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--th-padding': string;
-        '--td-padding': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--line-height': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--th-color': string;
-        '--th-color-hover': string;
-        '--th-color-modal': string;
-        '--th-color-hover-modal': string;
-        '--th-color-popover': string;
-        '--th-color-hover-popover': string;
-        '--td-color': string;
-        '--td-color-hover': string;
-        '--td-color-modal': string;
-        '--td-color-hover-modal': string;
-        '--td-color-popover': string;
-        '--td-color-hover-popover': string;
-        '--th-text-color': string;
-        '--td-text-color': string;
-        '--th-font-weight': string;
-        '--th-button-color-hover': string;
-        '--th-icon-color': string;
-        '--th-icon-color-active': string;
-        '--filter-size': string;
-        '--pagination-margin': string;
-        '--empty-padding': string;
-        '--box-shadow-before': string;
-        '--box-shadow-after': string;
-        '--sorter-size': string;
-        '--loading-size': string;
-        '--loading-color': string;
-        '--opacity-loading': string;
-        '--td-color-striped': string;
-        '--td-color-striped-modal': string;
-        '--td-color-striped-popover': string;
+        '--n-font-size': string;
+        '--n-th-padding': string;
+        '--n-td-padding': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-line-height': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-th-color': string;
+        '--n-th-color-hover': string;
+        '--n-th-color-modal': string;
+        '--n-th-color-hover-modal': string;
+        '--n-th-color-popover': string;
+        '--n-th-color-hover-popover': string;
+        '--n-td-color': string;
+        '--n-td-color-hover': string;
+        '--n-td-color-modal': string;
+        '--n-td-color-hover-modal': string;
+        '--n-n-td-color-popover': string;
+        '--n-td-color-hover-popover': string;
+        '--n-th-text-color': string;
+        '--n-td-text-color': string;
+        '--n-th-font-weight': string;
+        '--n-th-button-color-hover': string;
+        '--n-th-icon-color': string;
+        '--n-th-icon-color-active': string;
+        '--n-filter-size': string;
+        '--n-pagination-margin': string;
+        '--n-empty-padding': string;
+        '--n-box-shadow-before': string;
+        '--n-box-shadow-after': string;
+        '--n-sorter-size': string;
+        '--n-loading-size': string;
+        '--n-loading-color': string;
+        '--n-opacity-loading': string;
+        '--n-td-color-striped': string;
+        '--n-td-color-striped-modal': string;
+        '--n-td-color-striped-popover': string;
     }>;
     filter: (filters: import("./interface").FilterState | null) => void;
     filters: (filters: import("./interface").FilterState | null) => void;

package/es/data-table/src/DataTable.js

@@ -200,9 +200,9 @@ export default defineComponent({
                 const { self: { actionDividerColor, actionPadding, actionButtonMargin } } = themeRef.value;
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return {
-                    '--action-padding': actionPadding,
-                    '--action-button-margin': actionButtonMargin,
-                    '--action-divider-color': actionDividerColor
+                    '--n-action-padding': actionPadding,
+                    '--n-action-button-margin': actionButtonMargin,
+                    '--n-action-divider-color': actionDividerColor
                 };
             }),
             mergedTableLayoutRef,
@@ -235,45 +235,45 @@ export default defineComponent({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [createKey('fontSize', size)]: fontSize, [createKey('thPadding', size)]: thPadding, [createKey('tdPadding', size)]: tdPadding } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--th-padding': thPadding,
-                    '--td-padding': tdPadding,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--line-height': lineHeight,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--th-color': thColor,
-                    '--th-color-hover': thColorHover,
-                    '--th-color-modal': thColorModal,
-                    '--th-color-hover-modal': thColorHoverModal,
-                    '--th-color-popover': thColorPopover,
-                    '--th-color-hover-popover': thColorHoverPopover,
-                    '--td-color': tdColor,
-                    '--td-color-hover': tdColorHover,
-                    '--td-color-modal': tdColorModal,
-                    '--td-color-hover-modal': tdColorHoverModal,
-                    '--td-color-popover': tdColorPopover,
-                    '--td-color-hover-popover': tdColorHoverPopover,
-                    '--th-text-color': thTextColor,
-                    '--td-text-color': tdTextColor,
-                    '--th-font-weight': thFontWeight,
-                    '--th-button-color-hover': thButtonColorHover,
-                    '--th-icon-color': thIconColor,
-                    '--th-icon-color-active': thIconColorActive,
-                    '--filter-size': filterSize,
-                    '--pagination-margin': paginationMargin,
-                    '--empty-padding': emptyPadding,
-                    '--box-shadow-before': boxShadowBefore,
-                    '--box-shadow-after': boxShadowAfter,
-                    '--sorter-size': sorterSize,
-                    '--loading-size': loadingSize,
-                    '--loading-color': loadingColor,
-                    '--opacity-loading': opacityLoading,
-                    '--td-color-striped': tdColorStriped,
-                    '--td-color-striped-modal': tdColorStripedModal,
-                    '--td-color-striped-popover': tdColorStripedPopover
+                    '--n-font-size': fontSize,
+                    '--n-th-padding': thPadding,
+                    '--n-td-padding': tdPadding,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-line-height': lineHeight,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-th-color': thColor,
+                    '--n-th-color-hover': thColorHover,
+                    '--n-th-color-modal': thColorModal,
+                    '--n-th-color-hover-modal': thColorHoverModal,
+                    '--n-th-color-popover': thColorPopover,
+                    '--n-th-color-hover-popover': thColorHoverPopover,
+                    '--n-td-color': tdColor,
+                    '--n-td-color-hover': tdColorHover,
+                    '--n-td-color-modal': tdColorModal,
+                    '--n-td-color-hover-modal': tdColorHoverModal,
+                    '--n-n-td-color-popover': tdColorPopover,
+                    '--n-td-color-hover-popover': tdColorHoverPopover,
+                    '--n-th-text-color': thTextColor,
+                    '--n-td-text-color': tdTextColor,
+                    '--n-th-font-weight': thFontWeight,
+                    '--n-th-button-color-hover': thButtonColorHover,
+                    '--n-th-icon-color': thIconColor,
+                    '--n-th-icon-color-active': thIconColorActive,
+                    '--n-filter-size': filterSize,
+                    '--n-pagination-margin': paginationMargin,
+                    '--n-empty-padding': emptyPadding,
+                    '--n-box-shadow-before': boxShadowBefore,
+                    '--n-box-shadow-after': boxShadowAfter,
+                    '--n-sorter-size': sorterSize,
+                    '--n-loading-size': loadingSize,
+                    '--n-loading-color': loadingColor,
+                    '--n-opacity-loading': opacityLoading,
+                    '--n-td-color-striped': tdColorStriped,
+                    '--n-td-color-striped-modal': tdColorStripedModal,
+                    '--n-td-color-striped-popover': tdColorStripedPopover
                 };
             }) });
     },

package/es/data-table/src/TableParts/Body.js

@@ -2,6 +2,8 @@
 import { h, ref, defineComponent, inject, watchEffect, onUnmounted, computed, renderSlot, Fragment } from 'vue';
 import { pxfy, repeat } from 'seemly';
 import { VirtualList, VResizeObserver } from 'vueuc';
+import { useMemo } from 'vooks';
+import { cssrAnchorMetaName } from '../../../_mixins/common';
 import { c } from '../../../_utils/cssr';
 import { NScrollbar } from '../../../_internal';
 import { formatLength } from '../../../_utils';
@@ -12,7 +14,6 @@ import Cell from './Cell';
 import ExpandTrigger from './ExpandTrigger';
 import RenderSafeCheckbox from './BodyCheckbox';
 import TableHeader from './Header';
-import { useMemo } from 'vooks';
 function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
     function traverse(rs) {
@@ -190,12 +191,12 @@ export default defineComponent({
                 const createActiveLeftFixedStyle = (leftActiveFixedColKey) => {
                     if (leftActiveFixedColKey === null)
                         return null;
-                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--box-shadow-after)' });
+                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--n-box-shadow-after)' });
                 };
                 const createActiveRightFixedStyle = (rightActiveFixedColKey) => {
                     if (rightActiveFixedColKey === null)
                         return null;
-                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--box-shadow-before)' });
+                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--n-box-shadow-before)' });
                 };
                 return c([
                     createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
@@ -226,7 +227,8 @@ export default defineComponent({
             style.mount({
                 id: `n-${componentId}`,
                 force: true,
-                props: cProps
+                props: cProps,
+                anchorMetaName: cssrAnchorMetaName
             });
             fixedStyleMounted = true;
         });