@type-dom/ui 0.1.0 → 0.1.1

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

@@ -2,166 +2,220 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSegmented = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
 const event_1 = require("../../../constants/event");
-const td_segmented_style_1 = require("./td-segmented.style");
-class TdSegmented extends framework_1.TypeDiv {
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_id_1 = require("../../../hooks/use-id");
+const use_form_common_props_1 = require("../../form/td-form/hooks/use-form-common-props");
+const use_form_item_1 = require("../../form/td-form/hooks/use-form-item");
+const td_segmented_const_1 = require("./td-segmented.const");
+require("./style/index");
+class TdSegmented extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
         this.className = 'TdSegmented';
-        (0, td_segmented_style_1.useStyle)(params);
-        this.attr.addObj({
-            name: 'td-segmented',
-            role: 'radiogroup',
-            ariaLabel: 'Segmented',
-            ariaLabelledby: 'Segmented'
-        });
-        this.style.addObj(td_segmented_style_1.$segmentedStyle);
-        this.modelValue = params === null || params === void 0 ? void 0 : params.modelValue;
-        this.disabled = params === null || params === void 0 ? void 0 : params.disabled; // todo form disabled
-        this.group = new framework_1.Div({
-            styleObj: td_segmented_style_1.$segmentedGroupStyle
-        });
-        this.addChild(this.group);
-        this.selectedDiv = new framework_1.Div({
-            styleObj: td_segmented_style_1.$segmentedItemSelectedStyle
+        this.addEmits(td_segmented_const_1.segmentedEmits);
+        this.assignProps(td_segmented_const_1.segmentedProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b;
+        // console.log('TdSegmented created');
+        const props = this.props;
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('segmented');
+        const segmentedId = (0, use_id_1.useId)();
+        const segmentedSize = (0, use_form_common_props_1.useFormSize)();
+        const _disabled = (0, use_form_common_props_1.useFormDisabled)();
+        const { formItem } = (0, use_form_item_1.useFormItem)();
+        const { inputId, isLabeledByFormItem } = (0, use_form_item_1.useFormItemInputId)(props, {
+            formItemContext: formItem,
         });
-        this.state = {
+        const segmentedRef = (0, signals_1.signal)(undefined);
+        const activeElement = (0, framework_1.useActiveElement)();
+        const state = (0, signals_1.toSignals)({
             isInit: false,
             width: 0,
+            height: 0,
             translateX: 0,
-            disabled: false,
-            focusVisible: false
+            translateY: 0,
+            focusVisible: false,
+        });
+        const handleChange = (item) => {
+            console.warn('handleChange . item is ', item);
+            const value = getValue(item);
+            emit(event_1.UPDATE_MODEL_EVENT, value);
+            emit(event_1.CHANGE_EVENT, value);
         };
-        this.group.addChild(this.selectedDiv);
-        // const props = this.props;
-        const options = (params === null || params === void 0 ? void 0 : params.options) || [];
-        const labels = [];
-        options.forEach((option, index) => {
-            var _a, _b;
-            const label = new framework_1.Label({
-                name: 'td-segmented-item',
-                styleObj: td_segmented_style_1.$segmentedItemStyle,
-                childNodes: [
-                    new framework_1.Input({
-                        name: (params === null || params === void 0 ? void 0 : params.name) || 'radio-' + framework_1.vHash,
-                        attrObj: {
-                            type: 'radio',
-                            value: this.getValue(option),
-                            disabled: this.getDisabled(option),
-                            checked: this.getSelected(option)
-                        },
-                        styleObj: td_segmented_style_1.$segmentedItemInputStyle,
-                        events: {
-                            change: (evt, element) => {
-                                this.handleChange(option, element);
-                            }
-                        }
-                    })
-                ]
-            });
-            if (typeof option === 'object' && option.slot) {
-                label.addChild(option.slot);
-                (_a = option.slot.style) === null || _a === void 0 ? void 0 : _a.addObj({
-                    zIndex: 1 // todo ????? 否则显示不出来
-                });
+        const getValue = (item) => {
+            return (0, utils_1.isObject)(item) ? item.value : item;
+        };
+        const getLabel = (item) => {
+            return (0, utils_1.isObject)(item) ? item.label : item;
+        };
+        const getDisabled = (item) => {
+            return !!(_disabled.get() || ((0, utils_1.isObject)(item) ? item.disabled : false));
+        };
+        const getSelected = (item) => {
+            var _a;
+            return ((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()) === getValue(item);
+        };
+        const getOption = (value) => {
+            var _a;
+            return (_a = props.options) === null || _a === void 0 ? void 0 : _a.find((item) => getValue(item) === value);
+        };
+        const getItemCls = (item) => {
+            return (0, signals_1.computed)(() => [
+                ns.e('item'),
+                ns.is('selected', getSelected(item)),
+                ns.is('disabled', getDisabled(item)),
+            ]);
+        };
+        const updateSelect = () => {
+            var _a, _b, _c;
+            console.warn('updateSelect . ');
+            if (!segmentedRef.get())
+                return;
+            // 这一步有问题； is-selected 样式有异步。应该直接根据vModel的值匹配
+            // const selectedItem = segmentedRef.get()?.querySelector(
+            //   '.is-selected'
+            // ) as HTMLElement
+            // const selectedItemInput = segmentedRef.get()?.querySelector(
+            //   '.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);
+            // 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');
+            if (!selectedItem || !selectedItemInput) {
+                state.width.set(0);
+                state.height.set(0);
+                state.translateX.set(0);
+                state.translateY.set(0);
+                state.focusVisible.set(false);
+                return;
+            }
+            const rect = selectedItem.getBoundingClientRect();
+            state.isInit.set(true);
+            if ((0, signals_1.unref)(props.direction) === 'vertical') {
+                state.height.set(rect.height);
+                state.translateY.set(selectedItem.offsetTop);
             }
             else {
-                label.addChild(new framework_1.Div({
-                    text: (_b = this.getLabel(option)) === null || _b === void 0 ? void 0 : _b.toString(),
-                    name: 'item-label',
-                    styleObj: td_segmented_style_1.$segmentedItemLabelStyle
-                }));
+                state.width.set(rect.width);
+                state.translateX.set(selectedItem.offsetLeft);
             }
-            if (this.getDisabled(option)) {
-                label.style.addObj({
-                    color: td_segmented_style_1.$segmented.itemDisabledColor,
-                    cursor: 'not-allowed'
-                });
+            try {
+                // This will failed in test
+                state.focusVisible.set(selectedItemInput.matches(':focus-visible'));
             }
-            labels.push(label);
+            catch (_d) { }
+        };
+        const segmentedCls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.m(segmentedSize.get()),
+            ns.is('block', props.block),
+        ]);
+        const selectedStyle = {
+            width: (0, signals_1.computed)(() => (0, signals_1.unref)(props.direction) === 'vertical'
+                ? '100%'
+                : `${state.width.get()}px`),
+            height: (0, signals_1.computed)(() => (0, signals_1.unref)(props.direction) === 'vertical'
+                ? `${state.height.get()}px`
+                : '100%'),
+            transform: (0, signals_1.computed)(() => (0, signals_1.unref)(props.direction) === 'vertical'
+                ? `translateY(${state.translateY.get()}px)`
+                : `translateX(${state.translateX.get()}px)`),
+            display: (0, signals_1.computed)(() => (state.isInit.get() ? 'block' : 'none')),
+        };
+        const selectedCls = (0, signals_1.computed)(() => {
+            var _a;
+            return [
+                ns.e('item-selected'),
+                ns.is('disabled', getDisabled(getOption((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()))),
+                ns.is('focus-visible', state.focusVisible.get()),
+            ];
         });
-        this.group.addChildren(...labels);
-        this.props = this.useParams(params);
-    }
-    mounted() {
-        console.log('TdSegmented created');
-        (0, framework_1.nextTick)(() => {
-            this.updateSelect();
+        const name = (0, signals_1.computed)(() => {
+            return props.name || segmentedId.get();
         });
-    }
-    getValue(item) {
-        return typeof item === 'object' ? item.value : item;
-    }
-    getLabel(item) {
-        return typeof item === 'object' ? item.label : item;
-    }
-    getDisabled(item) {
-        return !!(this.disabled || (typeof item === 'object' ? item.disabled : false));
-    }
-    getSelected(item) {
-        return this.props.modelValue === this.getValue(item);
-    }
-    getOption(value) {
-        var _a;
-        return this.props.options && ((_a = this.props.options) === null || _a === void 0 ? void 0 : _a.find((item) => this.getValue(item) === value));
-    }
-    updateSelect() {
-        console.log('updateSelect');
-        const labels = this.group.findChildNodes('Label');
-        labels.forEach((label, index) => {
-            const input = label.findChildNode('Input');
-            if ((input === null || input === void 0 ? void 0 : input.attr.get('value')) === this.modelValue) {
-                const rect = label.dom.getBoundingClientRect();
-                label.style.setObj({
-                    color: td_segmented_style_1.$segmented.itemSelectedColor
-                });
-                this.state.isInit = true;
-                this.state.width = rect.width;
-                this.state.translateX = label.dom.offsetLeft;
-                this.state.disabled = this.getDisabled(this.getOption(this.modelValue));
-            }
-            else {
-                input === null || input === void 0 ? void 0 : input.attr.remove('checked');
-                const options = this.props.options || [];
-                if (options[index]) {
-                    const disabled = this.getDisabled(options[index]);
-                    if (disabled) {
-                        label.style.setObj({
-                            color: td_segmented_style_1.$segmented.itemDisabledColor,
+        this.addChild(new framework_1.Div({
+            vIf: (_a = props.options) === null || _a === void 0 ? void 0 : _a.length,
+            refEl: segmentedRef,
+            styleObj: props.styleObj, // 父组件传入的样式
+            attrObj: {
+                name: 'td-segmented',
+                id: inputId.get(),
+                role: 'radiogroup',
+                class: segmentedCls,
+                ariaLabel: isLabeledByFormItem.get()
+                    ? props.ariaLabel || 'segmented'
+                    : undefined,
+                ariaLabelledby: isLabeledByFormItem.get()
+                    ? formItem.labelId
+                    : undefined,
+            },
+            slot: new framework_1.Div({
+                class: (0, signals_1.computed)(() => [ns.e('group'), ns.m((0, signals_1.unref)(props.direction))]),
+                slot: [
+                    new framework_1.Div({
+                        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),
+                                }),
+                            ],
                         });
-                    }
-                    else {
-                        label.style.setObj({
-                            color: undefined // remove color
-                        });
-                    }
-                }
+                    }),
+                ],
+            }),
+        }));
+        (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); // 不加选中样式不加载
+                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));
             }
         });
-        this.selectedStyle = {
-            width: `${this.state.width}px`,
-            transform: `translateX(${this.state.translateX}px)`,
-            display: this.state.isInit ? 'block' : 'none'
-        };
-        this.selectedDiv.style.setObj(this.selectedStyle);
-    }
-    handleChange(item, element) {
-        const value = this.getValue(item);
-        this.emit(event_1.UPDATE_MODEL_EVENT, value);
-        this.emit(event_1.CHANGE_EVENT, value);
-        console.log('handleChange ', item);
-        this.modelValue = this.getValue(item);
-        element.attr.add('checked', true);
-        this.updateSelect();
-        // const value = this.getValue(item);
-        // const update = this.props.emits?.[UPDATE_MODEL_EVENT];
-        // if (update) {
-        //   update(value);
-        // }
-        // const change = this.props.emits?.[CHANGE_EVENT];
-        // if (change) {
-        //   change(value);
-        // }
     }
 }
 exports.TdSegmented = TdSegmented;

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

@@ -0,0 +1,6 @@
+import { 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;
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentedEmits = exports.segmentedProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.segmentedProps = {
+    direction: 'horizontal',
+    validateEvent: true,
+};
+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),
+};

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

@@ -1,17 +1,19 @@
-import { ITypeDiv, TypeElement } from '@type-dom/framework';
-import { IAriaConfig } from '../../../aria';
-import { ISize } from '../../../styles/size';
-export interface ITdSegmented extends ITypeDiv {
+import { ITypeFragment, TypeElement, TypeFragmentProps } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { ComponentSize } from '../../../constants/size';
+export interface ITdSegmented extends ITypeFragment {
     className: 'TdSegmented';
 }
-export type Option = {
+export type OptionObject = {
     label: string;
     value: string | number | boolean;
     disabled?: boolean;
     slot?: TypeElement;
     [key: string]: any;
-} | string | number | boolean | undefined;
-export interface ITdSegmentedConfig extends IAriaConfig {
+};
+export type Option = OptionObject | string | number | boolean | undefined;
+export interface SegmentedProps extends TypeFragmentProps {
+    direction?: MaybeRef<'vertical' | 'horizontal'>;
     /**
      * @description options of segmented
      *     default: () => [],
@@ -29,7 +31,7 @@ export interface ITdSegmentedConfig extends IAriaConfig {
     /**
      * @description size of component
      */
-    size?: ISize;
+    size?: MaybeRef<ComponentSize>;
     /**
      * @description whether segmented is disabled
      */

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

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITdSegmentedConfig } from './td-segmented.interface';
+import { SegmentedProps } from './td-segmented.interface';
 export declare const $segmentedBorderRadius: {
     large: string;
     default: string;
@@ -33,5 +33,5 @@ export declare const $segmentedItemStyle: IStyle;
 export declare const $segmentedItemSelectedStyle: IStyle;
 export declare const $segmentedItemInputStyle: IStyle;
 export declare const $segmentedItemLabelStyle: IStyle;
-export declare function useStyle(config?: ITdSegmentedConfig): void;
-export declare function useSize(config?: ITdSegmentedConfig): void;
+export declare function useStyle(config?: SegmentedProps): void;
+export declare function useSize(config?: SegmentedProps): void;

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

@@ -3,23 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.$segmentedItemLabelStyle = exports.$segmentedItemInputStyle = exports.$segmentedItemSelectedStyle = exports.$segmentedItemStyle = exports.$segmentedGroupStyle = exports.$segmentedStyle = exports.$segmented = exports.$segmentedItemPadding = exports.$segmentedFontSize = exports.$segmentedBorderRadius = void 0;
 exports.useStyle = useStyle;
 exports.useSize = useSize;
+const signals_1 = require("@type-dom/signals");
 const var_1 = require("../../../styles/var");
 const td_button_style_1 = require("../../basic/td-button/td-button.style");
 const td_input_style_1 = require("../../form/td-input/td-input.style");
 exports.$segmentedBorderRadius = {
     large: td_button_style_1.$buttonBorderRadius.large, // map.get($button-border-radius, 'large'),
     default: td_button_style_1.$buttonBorderRadius.default, // map.get($button-border-radius, 'default'),
-    small: td_button_style_1.$buttonBorderRadius.small // map.get($button-border-radius, 'small'),
+    small: td_button_style_1.$buttonBorderRadius.small, // map.get($button-border-radius, 'small'),
 };
 exports.$segmentedFontSize = {
     large: '16px',
     default: '14px',
-    small: '14px'
+    small: '14px',
 };
 exports.$segmentedItemPadding = {
     large: '0 11px',
     default: '0 11px',
-    small: '0 7px'
+    small: '0 7px',
 };
 exports.$segmented = {
     // 'color': getCssVar('text-color', 'regular'),
@@ -40,7 +41,7 @@ exports.$segmented = {
     // 'item-active-bg-color': getCssVar('fill-color', 'darker'),
     itemActiveBgColor: var_1.$fillColor.darker,
     // 'item-disabled-color': getCssVar('text-color', 'placeholder'),
-    itemDisabledColor: var_1.$textColor.placeholder
+    itemDisabledColor: var_1.$textColor.placeholder,
 };
 exports.$segmentedStyle = {
     display: 'inline-flex',
@@ -57,7 +58,7 @@ exports.$segmentedStyle = {
     fontSize: exports.$segmentedFontSize.default,
     // color: getCssVar('segmented-color'),
     color: exports.$segmented.color,
-    boxSizing: 'border-box'
+    boxSizing: 'border-box',
 };
 exports.$segmentedGroupStyle = {
     display: 'flex',
@@ -73,7 +74,7 @@ exports.$segmentedItemStyle = {
     // borderRadius: calc(#{map.get($segmented-border-radius, 'default')} - 2px),
     borderRadius: parseInt(exports.$segmentedBorderRadius.default, 10) - 2 + 'px',
     // padding: map.get($segmented-item-padding, 'default'),
-    padding: exports.$segmentedItemPadding.default
+    padding: exports.$segmentedItemPadding.default,
 };
 exports.$segmentedItemSelectedStyle = {
     position: 'absolute',
@@ -86,7 +87,7 @@ exports.$segmentedItemSelectedStyle = {
     // border-radius: calc(#{map.get($segmented-border-radius, 'default')} - 2px),
     borderRadius: parseInt(exports.$segmentedBorderRadius.default, 10) - 2 + 'px',
     transition: 'all 0.3s',
-    pointerEvents: 'none'
+    pointerEvents: 'none',
 };
 exports.$segmentedItemInputStyle = {
     position: 'absolute',
@@ -94,7 +95,7 @@ exports.$segmentedItemInputStyle = {
     width: 0,
     height: 0,
     opacity: 0,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
 };
 exports.$segmentedItemLabelStyle = {
     flex: 1,
@@ -105,7 +106,7 @@ exports.$segmentedItemLabelStyle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     transition: 'color 0.3s',
-    zIndex: 1
+    zIndex: 1,
 };
 function useStyle(config) {
     useSize(config);
@@ -118,7 +119,8 @@ function useStyle(config) {
         delete exports.$segmentedItemStyle.minWidth;
     }
     if (config === null || config === void 0 ? void 0 : config.disabled) {
-        exports.$segmentedItemSelectedStyle.background = exports.$segmented.itemSelectedDisabledBgColor;
+        exports.$segmentedItemSelectedStyle.background =
+            exports.$segmented.itemSelectedDisabledBgColor;
         exports.$segmentedItemStyle.cursor = 'not-allowed';
         exports.$segmentedItemStyle.color = exports.$segmented.itemDisabledColor;
     }
@@ -132,11 +134,13 @@ function useStyle(config) {
     // }
 }
 function useSize(config) {
-    const size = (config === null || config === void 0 ? void 0 : config.size) || 'default';
+    const size = (0, signals_1.unref)(config === null || config === void 0 ? void 0 : config.size) || 'default';
     exports.$segmentedStyle.minHeight = td_input_style_1.$inputHeight[size];
     exports.$segmentedStyle.borderRadius = exports.$segmentedBorderRadius[size];
     exports.$segmentedStyle.fontSize = exports.$segmentedFontSize[size];
-    exports.$segmentedItemSelectedStyle.borderRadius = parseInt(exports.$segmentedBorderRadius[size], 10) - 2 + 'px';
-    exports.$segmentedItemStyle.borderRadius = parseInt(exports.$segmentedBorderRadius[size]) - 2 + 'px';
+    exports.$segmentedItemSelectedStyle.borderRadius =
+        parseInt(exports.$segmentedBorderRadius[size], 10) - 2 + 'px';
+    exports.$segmentedItemStyle.borderRadius =
+        parseInt(exports.$segmentedBorderRadius[size]) - 2 + 'px';
     exports.$segmentedItemStyle.padding = exports.$segmentedItemPadding[size];
 }

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

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

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

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

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

@@ -0,0 +1,2 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/statistic.scss';

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

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

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

@@ -1,6 +1,11 @@
-import { TdStatisticAbstract } from './td-statistic.abstract';
-import type { ITdStatistic, ITdStatisticConfig } from './td-statistic.interface';
-export declare class TdStatistic extends TdStatisticAbstract implements ITdStatistic {
+import { TypeDiv } from '@type-dom/framework';
+import { Computed } from '@type-dom/signals';
+import { StatisticProps, ITdStatistic } from './td-statistic.interface';
+import './style/index';
+export declare class TdStatistic extends TypeDiv implements ITdStatistic {
     className: 'TdStatistic';
-    constructor(params: ITdStatisticConfig);
+    props: StatisticProps;
+    displayValue?: Computed;
+    constructor(params?: StatisticProps);
+    setup(): void;
 }