@type-dom/ui 0.1.1 → 0.1.3

package/src/components/data/td-image-viewer/td-image-viewer.interface.d.ts

@@ -1,4 +1,4 @@
-import { ITypeFragment, TypeFragmentProps, TypeSvgSvg } from '@type-dom/framework';
+import { ISlotRaw, ITypeFragment, TypeFragmentProps, TypeSvgSvg } from '@type-dom/framework';
 export interface ITdImageViewer extends ITypeFragment {
     className: 'TdImageViewer';
 }
@@ -50,10 +50,19 @@ export interface ImageViewerProps extends TypeFragmentProps {
      *     default: 7,
      */
     maxScale?: number;
+    /**
+     * @description show preview image progress content.
+     *    default: false,
+     */
+    showProgress?: boolean;
     /**
      * @description set HTML attribute: crossorigin.
      */
     crossorigin?: 'anonymous' | 'use-credentials' | '';
+    slots?: {
+        progress?: (progress: any, index?: number) => ISlotRaw | ISlotRaw[];
+        toolbar?: (toolbar: any) => ISlotRaw | ISlotRaw[];
+    };
 }
 export type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clockwise' | 'anticlockwise';
 export interface ImageViewerMode {

package/src/components/data/td-pagination/style/css.d.ts

@@ -1,4 +1,4 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-pagination.css';
 import '@element-plus/components/select/style/css';
 import '@element-plus/components/input/style/css';

package/src/components/data/td-pagination/style/css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-pagination.css");
 require("@element-plus/components/select/style/css");
 require("@element-plus/components/input/style/css");

package/src/components/data/td-pagination/td-pagination.class.js

@@ -91,19 +91,16 @@ class TdPagination extends framework_1.TypeFragment {
         });
         const innerPageSize = (0, signals_1.signal)((0, td_pagination_const_1.isAbsent)(props.defaultPageSize) ? 10 : props.defaultPageSize);
         const innerCurrentPage = (0, signals_1.signal)((0, td_pagination_const_1.isAbsent)(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
-        const pageSizeBridge = (0, signals_1.computed)({
-            get() {
-                return (0, td_pagination_const_1.isAbsent)(props.pageSize) ? innerPageSize.get() : props.pageSize;
-            },
-            set(v) {
-                if ((0, td_pagination_const_1.isAbsent)(props.pageSize)) {
-                    innerPageSize.set(v);
-                }
-                if (hasPageSizeListener) {
-                    emit('update:page-size', v);
-                    emit('size-change', v);
-                }
-            },
+        const pageSizeBridge = (0, signals_1.computed)(() => {
+            return (0, td_pagination_const_1.isAbsent)(props.pageSize) ? innerPageSize.get() : props.pageSize;
+        }, (v) => {
+            if ((0, td_pagination_const_1.isAbsent)(props.pageSize)) {
+                innerPageSize.set(v);
+            }
+            if (hasPageSizeListener) {
+                emit('update:page-size', v);
+                emit('size-change', v);
+            }
         });
         const pageCountBridge = (0, signals_1.computed)(() => {
             let pageCount = 0;
@@ -115,28 +112,25 @@ class TdPagination extends framework_1.TypeFragment {
             }
             return pageCount;
         });
-        const currentPageBridge = (0, signals_1.computed)({
-            get() {
-                return (0, td_pagination_const_1.isAbsent)(props.currentPage)
-                    ? innerCurrentPage.get()
-                    : props.currentPage;
-            },
-            set(v) {
-                let newCurrentPage = v;
-                if (v < 1) {
-                    newCurrentPage = 1;
-                }
-                else if (v > pageCountBridge.get()) {
-                    newCurrentPage = pageCountBridge.get();
-                }
-                if ((0, td_pagination_const_1.isAbsent)(props.currentPage)) {
-                    innerCurrentPage.set(newCurrentPage);
-                }
-                if (hasCurrentPageListener) {
-                    emit('update:current-page', newCurrentPage);
-                    emit('current-change', newCurrentPage);
-                }
-            },
+        const currentPageBridge = (0, signals_1.computed)(() => {
+            return (0, td_pagination_const_1.isAbsent)(props.currentPage)
+                ? innerCurrentPage.get()
+                : props.currentPage;
+        }, (v) => {
+            let newCurrentPage = v;
+            if (v < 1) {
+                newCurrentPage = 1;
+            }
+            else if (v > pageCountBridge.get()) {
+                newCurrentPage = pageCountBridge.get();
+            }
+            if ((0, td_pagination_const_1.isAbsent)(props.currentPage)) {
+                innerCurrentPage.set(newCurrentPage);
+            }
+            if (hasCurrentPageListener) {
+                emit('update:current-page', newCurrentPage);
+                emit('current-change', newCurrentPage);
+            }
         });
         (0, signals_1.watch)(pageCountBridge, (val) => {
             if (currentPageBridge.get() > val)

package/src/components/data/td-progress/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-progress.css';

package/src/components/data/td-progress/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-progress.css");

package/src/components/data/td-progress/td-progress.class.d.ts

@@ -1,5 +1,6 @@
 import { TypeDiv } from '@type-dom/framework';
 import { ProgressProps } from './td-progress.interface';
+import './style/index';
 export declare class TdProgress extends TypeDiv {
     className: 'TdProgress';
     props: ProgressProps;

package/src/components/data/td-progress/td-progress.class.js

@@ -8,6 +8,7 @@ const framework_1 = require("@type-dom/framework");
 const use_namespace_1 = require("../../../hooks/use-namespace");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_progress_const_1 = require("./td-progress.const");
+require("./style/index");
 class TdProgress extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
@@ -16,7 +17,7 @@ class TdProgress extends framework_1.TypeDiv {
         this.props = this.useParams(params);
     }
     setup() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         const STATUS_COLOR_MAP = {
             success: '#13ce66',
             exception: '#ff4949',
@@ -50,11 +51,11 @@ class TdProgress extends framework_1.TypeDiv {
         const trackPath = (0, signals_1.computed)(() => {
             const r = radius.get();
             const isDashboard = props.type === 'dashboard';
-            return `
-          M 50 50
-          m 0 ${isDashboard ? '' : '-'}${r}
-          a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}
-          a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}
+            return `
+          M 50 50
+          m 0 ${isDashboard ? '' : '-'}${r}
+          a ${r} ${r} 0 1 1 0 ${isDashboard ? '-' : ''}${r * 2}
+          a ${r} ${r} 0 1 1 0 ${isDashboard ? '' : '-'}${r * 2}
           `;
         });
         const perimeter = (0, signals_1.computed)(() => 2 * Math.PI * radius.get());
@@ -114,7 +115,7 @@ class TdProgress extends framework_1.TypeDiv {
         }
         const getCurrentColor = (percentage) => {
             var _a;
-            const { color } = props;
+            const color = (0, signals_1.unref)(props.color);
             if ((0, utils_1.isFunction)(color)) {
                 return color(percentage);
             }
@@ -122,7 +123,7 @@ class TdProgress extends framework_1.TypeDiv {
                 return color;
             }
             else {
-                const colors = getColors((0, signals_1.unref)(color));
+                const colors = getColors(color);
                 for (const color of colors) {
                     if (color.percentage > percentage)
                         return color.color;
@@ -133,7 +134,7 @@ class TdProgress extends framework_1.TypeDiv {
         this.attr.addClass((0, signals_1.computed)(() => [
             ns.b(),
             ns.m(props.type),
-            ns.is(status),
+            ns.is(props.status),
             {
                 [ns.m('without-text')]: !props.showText,
                 [ns.m('text-inside')]: props.textInside,
@@ -146,6 +147,7 @@ class TdProgress extends framework_1.TypeDiv {
             ariaValuemax: 100,
         });
         if (props.type === 'line') {
+            console.warn('line progress');
             this.addChild(new framework_1.Div({
                 class: ns.b('bar'),
                 slot: new framework_1.Div({
@@ -164,10 +166,14 @@ class TdProgress extends framework_1.TypeDiv {
                         ],
                         styleObj: barStyle,
                         slot: new framework_1.Div({
-                            vIf: (this.props.showText || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) || props.slot) &&
-                                props.textInside,
+                            vIf: (props.showText || ((_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) !== null && _b !== void 0 ? _b : props.slot)) &&
+                                !!props.textInside,
                             class: ns.be('bar', 'innerText'),
-                            slot: (_c = (_b = props.slots) === null || _b === void 0 ? void 0 : _b.percentage) !== null && _c !== void 0 ? _c : new framework_1.Span({ slot: content }),
+                            slot: (0, utils_1.isFunction)(props.slot)
+                                ? props.slot(props.percentage)
+                                : props.slot
+                                    ? this.props.slot
+                                    : new framework_1.Span({ slot: content }),
                         }),
                     }),
                 }),
@@ -190,47 +196,48 @@ class TdProgress extends framework_1.TypeDiv {
                                 class: ns.be('circle', 'track'),
                                 d: trackPath.get(),
                                 stroke: `var(${ns.cssVarName('fill-color-light')}, #e5e9f2)`,
-                                strokeLinecap: this.props.strokeLinecap,
+                                strokeLinecap: props.strokeLinecap,
                                 strokeWidth: Number(relativeStrokeWidth.get()),
                                 fill: 'none',
                             },
-                            styleObj: trailPathStyle.get(),
+                            styleObj: trailPathStyle,
                         }),
                         new framework_1.SvgPath({
                             attrObj: {
                                 class: ns.be('circle', 'path'),
                                 d: trackPath.get(),
-                                stroke: stroke.get(),
+                                stroke: stroke,
                                 fill: 'none',
-                                opacity: this.props.percentage ? 1 : 0,
+                                opacity: props.percentage ? 1 : 0,
                                 strokeLinecap: this.props.strokeLinecap,
                                 strokeWidth: Number(relativeStrokeWidth.get()),
                             },
-                            styleObj: circlePathStyle.get(),
+                            styleObj: circlePathStyle,
                         }),
                     ],
                 }),
             }));
         }
-        if ((this.props.showText || ((_d = props.slots) === null || _d === void 0 ? void 0 : _d.default) || props.slot) &&
-            !this.props.textInside) {
+        if ((props.showText || ((_c = props.slots) === null || _c === void 0 ? void 0 : _c.default) || props.slot) &&
+            !props.textInside) {
             this.addChild(new framework_1.Div({
-                class: ns.b('text'),
+                class: ns.e('text'),
                 styleObj: {
                     fontSize: `${progressTextSize.get()}px`,
                 },
-                slot: (_f = (_e = props.slots) === null || _e === void 0 ? void 0 : _e.percentage) !== null && _f !== void 0 ? _f : new framework_1.Fragment({
-                    slot: [
-                        new framework_1.Span({
-                            vIf: !status,
-                            slot: content,
-                        }),
-                        new td_icon_class_1.TdIcon({
-                            vIf: status,
-                            slot: new (statusIcon.get())(),
+                slot: (0, utils_1.isFunction)(props.slot)
+                    ? props.slot(props.percentage)
+                    : props.slot
+                        ? props.slot
+                        : new framework_1.Fragment({
+                            slot: !props.status
+                                ? new framework_1.Span({
+                                    slot: content,
+                                })
+                                : new td_icon_class_1.TdIcon({
+                                    slot: new (statusIcon.get())(),
+                                })
                         }),
-                    ],
-                }),
             }));
         }
     }

package/src/components/data/td-progress/td-progress.interface.d.ts

@@ -25,7 +25,7 @@ export interface ProgressProps extends TypeDivProps {
     /**
      * @description control the animation duration of indeterminate progress or striped flow progress
      */
-    duration?: number;
+    duration?: MaybeRef<number>;
     /**
      * @description the width of progress bar
      */

package/src/components/data/td-result/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-result.css';

package/src/components/data/td-result/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-result.css");

package/src/components/data/td-segmented/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-segmented.css';

package/src/components/data/td-segmented/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-segmented.css");

package/src/components/data/td-segmented/td-segmented.class.js

@@ -21,7 +21,7 @@ class TdSegmented extends framework_1.TypeFragment {
     }
     setup() {
         var _a, _b;
-        // console.log('TdSegmented created');
+        console.log('TdSegmented setup . ');
         const props = this.props;
         const emit = this.emit;
         const ns = (0, use_namespace_1.useNamespace)('segmented');
@@ -43,16 +43,17 @@ class TdSegmented extends framework_1.TypeFragment {
             focusVisible: false,
         });
         const handleChange = (item) => {
-            console.warn('handleChange . item is ', item);
+            // console.warn('handleChange . item is ', item);
             const value = getValue(item);
             emit(event_1.UPDATE_MODEL_EVENT, value);
             emit(event_1.CHANGE_EVENT, value);
         };
+        const aliasProps = (0, signals_1.computed)(() => (Object.assign(Object.assign({}, td_segmented_const_1.defaultProps), props.props)));
         const getValue = (item) => {
-            return (0, utils_1.isObject)(item) ? item.value : item;
+            return (0, utils_1.isObject)(item) ? item[aliasProps.get().value] : item;
         };
         const getLabel = (item) => {
-            return (0, utils_1.isObject)(item) ? item.label : item;
+            return (0, utils_1.isObject)(item) ? item[aliasProps.get().label] : item;
         };
         const getDisabled = (item) => {
             return !!(_disabled.get() || ((0, utils_1.isObject)(item) ? item.disabled : false));
@@ -74,7 +75,7 @@ class TdSegmented extends framework_1.TypeFragment {
         };
         const updateSelect = () => {
             var _a, _b, _c;
-            console.warn('updateSelect . ');
+            // console.warn('updateSelect . ');
             if (!segmentedRef.get())
                 return;
             // 这一步有问题； is-selected 样式有异步。应该直接根据vModel的值匹配
@@ -85,7 +86,7 @@ class TdSegmented extends framework_1.TypeFragment {
             //   '.is-selected input'
             // ) as HTMLElement
             const selectedEl = this.down('attrObj.value', (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get());
-            console.log('selectedItem is ', selectedEl);
+            // console.log('selectedItem is ', selectedEl);
             // todo watch 触发时，dom 未必已经创建。
             const selectedItem = selectedEl === null || selectedEl === void 0 ? void 0 : selectedEl.dom;
             const selectedItemInput = (_c = (_b = selectedEl === null || selectedEl === void 0 ? void 0 : selectedEl.dom) === null || _b === void 0 ? void 0 : _b.querySelector) === null || _c === void 0 ? void 0 : _c.call(_b, 'input');
@@ -108,10 +109,12 @@ class TdSegmented extends framework_1.TypeFragment {
                 state.translateX.set(selectedItem.offsetLeft);
             }
             try {
-                // This will failed in test
+                // This will failed in test-dts
                 state.focusVisible.set(selectedItemInput.matches(':focus-visible'));
             }
-            catch (_d) { }
+            catch (err) {
+                console.error('selectedItemInput.matches is not supported', err);
+            }
         };
         const segmentedCls = (0, signals_1.computed)(() => [
             ns.b(),
@@ -144,12 +147,12 @@ class TdSegmented extends framework_1.TypeFragment {
         this.addChild(new framework_1.Div({
             vIf: (_a = props.options) === null || _a === void 0 ? void 0 : _a.length,
             refEl: segmentedRef,
+            class: segmentedCls,
             styleObj: props.styleObj, // 父组件传入的样式
             attrObj: {
                 name: 'td-segmented',
                 id: inputId.get(),
                 role: 'radiogroup',
-                class: segmentedCls,
                 ariaLabel: isLabeledByFormItem.get()
                     ? props.ariaLabel || 'segmented'
                     : undefined,
@@ -164,58 +167,52 @@ class TdSegmented extends framework_1.TypeFragment {
                         styleObj: selectedStyle,
                         class: selectedCls,
                     }),
-                    ...props.options.map((item, index) => {
-                        return new framework_1.Label({
-                            class: getItemCls(item),
-                            attrObj: {
-                                value: getValue(item),
-                            },
-                            slot: [
-                                new framework_1.Input({
-                                    attrObj: {
-                                        class: ns.e('item-input'),
-                                        type: 'radio',
-                                        name: name.get(),
-                                        checked: getSelected(item),
-                                        disabled: getDisabled(item),
-                                    },
-                                    events: {
-                                        change: () => handleChange(item),
-                                    },
-                                }),
-                                new framework_1.Div({
-                                    class: ns.e('item-label'),
-                                    slot: (0, utils_1.isObject)(item) && item.slot ? item.slot : getLabel(item),
-                                }),
-                            ],
-                        });
-                    }),
+                    new framework_1.Fragment({
+                        slot: (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                            return new framework_1.Label({
+                                class: getItemCls(item),
+                                attrObj: {
+                                    value: getValue(item),
+                                },
+                                slot: [
+                                    new framework_1.Input({
+                                        attrObj: {
+                                            class: ns.e('item-input'),
+                                            type: 'radio',
+                                            name: name.get(),
+                                            checked: getSelected(item),
+                                            disabled: getDisabled(item),
+                                        },
+                                        events: {
+                                            change: () => handleChange(item),
+                                        },
+                                    }),
+                                    new framework_1.Div({
+                                        class: ns.e('item-label'),
+                                        slot: ((0, utils_1.isObject)(item) && item.slot) ? item.slot : getLabel(item),
+                                    }),
+                                ],
+                            });
+                        }),
+                    })
                 ],
             }),
         }));
-        (0, framework_1.useResizeObserver)((_b = segmentedRef.get()) === null || _b === void 0 ? void 0 : _b.dom, updateSelect);
-        (0, signals_1.watch)(activeElement, updateSelect);
         (0, framework_1.onMounted)(() => {
-            // add by me
-            updateSelect(); // 不加初始化时选中样式不加载
-            (0, signals_1.effect)(() => {
-                // unref(props.direction);
-                (0, signals_1.unref)(props.size);
-                (0, signals_1.unref)(props.vModel);
-                // unref(activeElement);
-                // unref(selectedStyle.width);
-                // unref(selectedStyle.height);
-                // unref(selectedStyle.transform); // 不加选中样式不加载
+            var _a;
+            // console.error('onMounted . ');
+            (0, framework_1.useResizeObserver)((_a = segmentedRef.get()) === null || _a === void 0 ? void 0 : _a.dom, updateSelect);
+            (0, signals_1.watch)(activeElement, updateSelect);
+            (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
+                var _a;
                 updateSelect();
+                if (props.validateEvent) {
+                    (_a = formItem === null || formItem === void 0 ? void 0 : formItem.validate) === null || _a === void 0 ? void 0 : _a.call(formItem, 'change').catch((err) => (0, utils_1.debugWarn)(err));
+                }
+            }, {
+                immediate: true,
             });
         });
-        (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
-            var _a;
-            updateSelect();
-            if (props.validateEvent) {
-                (_a = formItem === null || formItem === void 0 ? void 0 : formItem.validate) === null || _a === void 0 ? void 0 : _a.call(formItem, 'change').catch((err) => (0, utils_1.debugWarn)(err));
-            }
-        });
     }
 }
 exports.TdSegmented = TdSegmented;

package/src/components/data/td-segmented/td-segmented.const.d.ts

@@ -1,6 +1,7 @@
-import { SegmentedProps } from './td-segmented.interface';
+import { Props, SegmentedProps } from './td-segmented.interface';
 export declare const segmentedProps: SegmentedProps;
 export declare const segmentedEmits: {
     "update:modelValue": (val: any) => val is string | number | boolean;
     change: (val: any) => val is string | number | boolean;
 };
+export declare const defaultProps: Required<Props>;

package/src/components/data/td-segmented/td-segmented.const.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.segmentedEmits = exports.segmentedProps = void 0;
+exports.defaultProps = exports.segmentedEmits = exports.segmentedProps = void 0;
 const utils_1 = require("@type-dom/utils");
 const event_1 = require("../../../constants/event");
 exports.segmentedProps = {
@@ -11,3 +11,8 @@ exports.segmentedEmits = {
     [event_1.UPDATE_MODEL_EVENT]: (val) => (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val) || (0, utils_1.isBoolean)(val),
     [event_1.CHANGE_EVENT]: (val) => (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val) || (0, utils_1.isBoolean)(val),
 };
+exports.defaultProps = {
+    label: 'label',
+    value: 'value',
+    disabled: 'disabled',
+};

package/src/components/data/td-segmented/td-segmented.interface.d.ts

@@ -5,13 +5,16 @@ export interface ITdSegmented extends ITypeFragment {
     className: 'TdSegmented';
 }
 export type OptionObject = {
-    label: string;
-    value: string | number | boolean;
+    label?: string;
+    myLabel?: string;
+    value?: string | number | boolean;
+    myValue?: string | number | boolean;
     disabled?: boolean;
+    myDisabled?: boolean;
     slot?: TypeElement;
     [key: string]: any;
 };
-export type Option = OptionObject | string | number | boolean | undefined;
+export type Option = Record<string, any> | string | number | boolean;
 export interface SegmentedProps extends TypeFragmentProps {
     direction?: MaybeRef<'vertical' | 'horizontal'>;
     /**
@@ -24,6 +27,11 @@ export interface SegmentedProps extends TypeFragmentProps {
      *     default: undefined,
      */
     modelValue?: string | number | boolean;
+    /**
+     * @description configuration options, see the following table
+     *     default: () => defaultProps,
+     */
+    props?: Props;
     /**
      * @description fit width of parent content
      */
@@ -49,4 +57,10 @@ export interface SegmentedProps extends TypeFragmentProps {
      * @description native `name` attribute
      */
     name?: string;
+    ariaLabel?: string;
+}
+export interface Props {
+    label?: string;
+    value?: string;
+    disabled?: string;
 }

package/src/components/data/td-statistic/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-statistic.css';

package/src/components/data/td-statistic/style/css.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-require("@element-plus/components/base/style/css");
+require("../../../base/style/css");
 require("@element-plus/theme-chalk/el-statistic.css");

package/src/components/data/td-statistic/td-statistic.class.d.ts

@@ -1,11 +1,12 @@
 import { TypeDiv } from '@type-dom/framework';
 import { Computed } from '@type-dom/signals';
+import dayjs from 'dayjs';
 import { StatisticProps, ITdStatistic } from './td-statistic.interface';
 import './style/index';
 export declare class TdStatistic extends TypeDiv implements ITdStatistic {
     className: 'TdStatistic';
     props: StatisticProps;
-    displayValue?: Computed;
+    displayValue?: Computed<string | number | number[] | dayjs.Dayjs>;
     constructor(params?: StatisticProps);
     setup(): void;
 }

package/src/components/data/td-statistic/td-statistic.class.js

@@ -10,7 +10,7 @@ require("./style/index");
 class TdStatistic extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
-        console.warn('TdStatistic constructor . ');
+        // console.warn('TdStatistic constructor . ');
         this.className = 'TdStatistic';
         this.assignProps(td_statistic_const_1.statisticProps);
         this.props = this.useParams(params);
@@ -26,7 +26,7 @@ class TdStatistic extends framework_1.TypeDiv {
             }
             // https://github.com/element-plus/element-plus/issues/17784
             if (!(0, utils_1.isNumber)(value) || Number.isNaN(value)) {
-                return value;
+                return (0, signals_1.unref)(value);
             }
             let [integer, decimal = ''] = String(value).split('.');
             decimal = decimal

package/src/components/data/td-statistic/td-statistic.interface.d.ts

@@ -28,7 +28,7 @@ export interface StatisticProps extends TypeDivProps {
      * @description Numerical content
      *     default: 0,
      */
-    value?: MaybeRef<number | Dayjs>;
+    value?: MaybeRef<number | number[] | Dayjs>;
     /**
      * @description Sets the prefix of a number
      */

package/src/components/data/td-tag/style/css.d.ts

@@ -1,2 +1,2 @@
-import '@element-plus/components/base/style/css';
+import '../../../base/style/css';
 import '@element-plus/theme-chalk/el-tag.css';