@type-dom/ui 0.0.3 → 0.0.5

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

@@ -0,0 +1,22 @@
+import { Input } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdSegmented, ITdSegmentedConfig, Option } from './td-segmented.interface';
+export declare class TdSegmented extends UI implements ITdSegmented {
+    className: 'TdSegmented';
+    props: ITdSegmentedConfig;
+    private group;
+    private disabled?;
+    private state;
+    private selectedStyle?;
+    private selectedDiv;
+    modelValue?: string | number | boolean | undefined;
+    constructor(params?: ITdSegmentedConfig);
+    mounted(): void;
+    getValue(item: Option): string | number | boolean | undefined;
+    getLabel(item: Option): string | number | boolean | undefined;
+    getDisabled(item: Option): boolean | undefined;
+    getSelected(item: Option): boolean;
+    getOption(value?: string | number | boolean): Option;
+    updateSelect(): void;
+    handleChange(item: Option, element: Input): void;
+}

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

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSegmented = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const event_1 = require("../../../constants/event");
+const td_segmented_style_1 = require("./td-segmented.style");
+class TdSegmented extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        this.className = 'TdSegmented';
+        (0, td_segmented_style_1.useStyle)(params);
+        this.ctrl.addAttrName('td-segmented');
+        this.ctrl.addStyleObj(td_segmented_style_1.$segmentedStyle);
+        this.ctrl.addAttrObj({
+            role: 'radiogroup',
+            ariaLabel: 'Segmented',
+            ariaLabelledby: 'Segmented'
+        });
+        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.state = {
+            isInit: false,
+            width: 0,
+            translateX: 0,
+            disabled: false,
+            focusVisible: false
+        };
+        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;
+            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);
+                option.slot.ctrl.addStyleObj({
+                    zIndex: 1 // todo ????? 否则显示不出来
+                });
+            }
+            else {
+                label.addChild(new framework_1.Div({
+                    text: (_a = this.getLabel(option)) === null || _a === void 0 ? void 0 : _a.toString(),
+                    name: 'item-label',
+                    styleObj: td_segmented_style_1.$segmentedItemLabelStyle
+                }));
+            }
+            if (this.getDisabled(option)) {
+                label.ctrl.addStyleObj({
+                    color: td_segmented_style_1.$segmented.itemDisabledColor,
+                    cursor: 'not-allowed'
+                });
+            }
+            labels.push(label);
+        });
+        this.group.addChildren(...labels);
+        this.props = this.setParams(params);
+    }
+    mounted() {
+        console.log('TdSegmented created');
+        (0, framework_1.nextTick)(() => {
+            this.updateSelect();
+        });
+    }
+    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 (_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) => {
+            var _a, _b, _c;
+            const input = label.findChildNode('Input');
+            if (((_a = input === null || input === void 0 ? void 0 : input.props.attrObj) === null || _a === void 0 ? void 0 : _a.value) === this.modelValue) {
+                const rect = label.dom.getBoundingClientRect();
+                label.ctrl.setStyleObj({
+                    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 {
+                (_b = input === null || input === void 0 ? void 0 : input.props.attrObj) === null || _b === void 0 ? true : delete _b.checked;
+                (_c = input === null || input === void 0 ? void 0 : input.props.attrObj) === null || _c === void 0 ? true : delete _c.checked;
+                const options = this.props.options || [];
+                if (options[index]) {
+                    const disabled = this.getDisabled(options[index]);
+                    if (disabled) {
+                        label.ctrl.setStyleObj({
+                            color: td_segmented_style_1.$segmented.itemDisabledColor,
+                        });
+                    }
+                    else {
+                        label.ctrl.setStyleObj({
+                            color: undefined // remove color
+                        });
+                    }
+                }
+            }
+        });
+        this.selectedStyle = {
+            width: `${this.state.width}px`,
+            transform: `translateX(${this.state.translateX}px)`,
+            display: this.state.isInit ? 'block' : 'none'
+        };
+        this.selectedDiv.ctrl.setStyleObj(this.selectedStyle);
+    }
+    handleChange(item, element) {
+        var _a, _b;
+        // const value = getValue(item)
+        // emit(UPDATE_MODEL_EVENT, value)
+        // emit(CHANGE_EVENT, value)
+        console.log('handleChange ', item);
+        this.modelValue = this.getValue(item);
+        // element.attrObj?.checked = true;
+        element.ctrl.addAttribute('checked', true);
+        this.updateSelect();
+        const value = this.getValue(item);
+        const update = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a[event_1.UPDATE_MODEL_EVENT];
+        if (update) {
+            update(value);
+        }
+        const change = (_b = this.props.emits) === null || _b === void 0 ? void 0 : _b[event_1.CHANGE_EVENT];
+        if (change) {
+            change(value);
+        }
+    }
+}
+exports.TdSegmented = TdSegmented;

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

@@ -0,0 +1,51 @@
+import { TypeElement } from '@type-dom/framework';
+import { IUI } from '../../../ui/ui.interface';
+import { IAriaConfig } from '../../../aria';
+import { ISize } from '../../../styles/size';
+export interface ITdSegmented extends IUI {
+    className: 'TdSegmented';
+}
+export type Option = {
+    label: string;
+    value: string | number | boolean;
+    disabled?: boolean;
+    slot?: TypeElement;
+    [key: string]: any;
+} | string | number | boolean | undefined;
+export interface ITdSegmentedConfig extends IAriaConfig {
+    /**
+     * @description options of segmented
+     *     default: () => [],
+     */
+    options?: Option[];
+    /**
+     * @description binding value
+     *     default: undefined,
+     */
+    modelValue?: string | number | boolean;
+    /**
+     * @description fit width of parent content
+     */
+    block?: boolean;
+    /**
+     * @description size of component
+     */
+    size?: ISize;
+    /**
+     * @description whether segmented is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description whether to trigger form validation
+     *     default: true,
+     */
+    validateEvent?: boolean;
+    /**
+     * @description native input id
+     */
+    id?: string;
+    /**
+     * @description native `name` attribute
+     */
+    name?: string;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,37 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdSegmentedConfig } from './td-segmented.interface';
+export declare const $segmentedBorderRadius: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $segmentedFontSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $segmentedItemPadding: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $segmented: {
+    color: string;
+    bgColor: string;
+    padding: string;
+    itemSelectedColor: string;
+    itemSelectedBgColor: string;
+    itemSelectedDisabledBgColor: string;
+    itemHoverColor: string;
+    itemHoverBgColor: string;
+    itemActiveBgColor: string;
+    itemDisabledColor: string;
+};
+export declare const $segmentedStyle: IStyle;
+export declare const $segmentedGroupStyle: IStyle;
+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;

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

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSize = exports.useStyle = exports.$segmentedItemLabelStyle = exports.$segmentedItemInputStyle = exports.$segmentedItemSelectedStyle = exports.$segmentedItemStyle = exports.$segmentedGroupStyle = exports.$segmentedStyle = exports.$segmented = exports.$segmentedItemPadding = exports.$segmentedFontSize = exports.$segmentedBorderRadius = void 0;
+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'),
+};
+exports.$segmentedFontSize = {
+    large: '16px',
+    default: '14px',
+    small: '14px'
+};
+exports.$segmentedItemPadding = {
+    large: '0 11px',
+    default: '0 11px',
+    small: '0 7px'
+};
+exports.$segmented = {
+    // 'color': getCssVar('text-color', 'regular'),
+    color: var_1.$textColor.regular,
+    // 'bg-color': getCssVar('fill-color', 'light'),
+    bgColor: var_1.$fillColor.light,
+    padding: '2px',
+    // 'item-selected-color': getCssVar('color-white'),
+    itemSelectedColor: var_1.$colorWhite,
+    // 'item-selected-bg-color': getCssVar('color-primary'),
+    itemSelectedBgColor: var_1.$colors.primary.base,
+    // 'item-selected-disabled-bg-color': getCssVar('color-primary', 'light-5'),
+    itemSelectedDisabledBgColor: var_1.$colors.primary['light-5'],
+    // 'item-hover-color': getCssVar('text-color', 'primary'),
+    itemHoverColor: var_1.$textColor.primary,
+    // 'item-hover-bg-color': getCssVar('fill-color', 'dark'),
+    itemHoverBgColor: var_1.$fillColor.dark,
+    // '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
+};
+exports.$segmentedStyle = {
+    display: 'inline-flex',
+    alignItems: 'stretch',
+    // minHeight: map.get($input-height, 'default'),
+    minHeight: td_input_style_1.$inputHeight.default,
+    // background: getCssVar('segmented-bg-color'),
+    background: exports.$segmented.bgColor,
+    // padding: getCssVar('segmented-padding'),
+    padding: exports.$segmented.padding,
+    // border-radius: map.get($segmented-border-radius, 'default'),
+    borderRadius: exports.$segmentedBorderRadius.default,
+    // font-size: map.get($segmented-font-size, 'default'),
+    fontSize: exports.$segmentedFontSize.default,
+    // color: getCssVar('segmented-color'),
+    color: exports.$segmented.color,
+    boxSizing: 'border-box'
+};
+exports.$segmentedGroupStyle = {
+    display: 'flex',
+    alignItems: 'stretch',
+    position: 'relative',
+    width: '100%',
+};
+exports.$segmentedItemStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+    cursor: 'pointer',
+    // 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
+};
+exports.$segmentedItemSelectedStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    // background: getCssVar('segmented-item-selected-bg-color'),
+    background: exports.$segmented.itemSelectedBgColor,
+    height: '100%',
+    width: '10px',
+    // border-radius: calc(#{map.get($segmented-border-radius, 'default')} - 2px),
+    borderRadius: parseInt(exports.$segmentedBorderRadius.default, 10) - 2 + 'px',
+    transition: 'all 0.3s',
+    pointerEvents: 'none'
+};
+exports.$segmentedItemInputStyle = {
+    position: 'absolute',
+    margin: 0,
+    width: 0,
+    height: 0,
+    opacity: 0,
+    pointerEvents: 'none'
+};
+exports.$segmentedItemLabelStyle = {
+    flex: 1,
+    textAlign: 'center',
+    lineHeight: 'normal',
+    // @include utils-ellipsis,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    transition: 'color 0.3s',
+    zIndex: 1
+};
+function useStyle(config) {
+    useSize(config);
+    if (config === null || config === void 0 ? void 0 : config.block) {
+        exports.$segmentedStyle.display = 'flex';
+        exports.$segmentedItemStyle.minWidth = 0;
+    }
+    else {
+        exports.$segmentedStyle.display = 'inline-flex';
+        delete exports.$segmentedItemStyle.minWidth;
+    }
+    if (config === null || config === void 0 ? void 0 : config.disabled) {
+        exports.$segmentedItemSelectedStyle.background = exports.$segmented.itemSelectedDisabledBgColor;
+        exports.$segmentedItemStyle.cursor = 'not-allowed';
+        exports.$segmentedItemStyle.color = exports.$segmented.itemDisabledColor;
+    }
+    else {
+        exports.$segmentedItemSelectedStyle.background = exports.$segmented.itemSelectedBgColor;
+        exports.$segmentedItemStyle.cursor = 'pointer';
+        delete exports.$segmentedItemStyle.color;
+    }
+    // if (config.focusVisible) {
+    //
+    // }
+}
+exports.useStyle = useStyle;
+function useSize(config) {
+    const size = (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.$segmentedItemStyle.padding = exports.$segmentedItemPadding[size];
+}
+exports.useSize = useSize;

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

@@ -0,0 +1,15 @@
+import { Div, Span, TypeElement } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdStatisticConfig, ITdStatisticAbstract } from './td-statistic.interface';
+import { Dayjs } from 'dayjs';
+export declare abstract class TdStatisticAbstract extends UI implements ITdStatisticAbstract {
+    abstract className: 'TdStatistic' | 'TdCountDown';
+    head?: Div;
+    content: Div;
+    prefix?: TypeElement;
+    number: Span;
+    suffix?: TypeElement;
+    props: ITdStatisticConfig;
+    protected constructor(params: ITdStatisticConfig);
+    formatValue(value: number | string | Dayjs): string;
+}

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

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdStatisticAbstract = void 0;
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_statistic_style_1 = require("./td-statistic.style");
+class TdStatisticAbstract extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a, _b, _c, _d;
+        super(params);
+        if (params === null || params === void 0 ? void 0 : params.title) {
+            this.head = new framework_1.Div({
+                name: 'head',
+                styleObj: {
+                    // font-weight: getCssVar('statistic-title-font-weight'),
+                    fontWeight: td_statistic_style_1.$statistic.titleFontWeight,
+                    // font-size: getCssVar('statistic-title-font-size'),
+                    fontSize: td_statistic_style_1.$statistic.titleFontSize,
+                    // color: getCssVar('statistic-title-color'),
+                    color: td_statistic_style_1.$statistic.titleColor,
+                    lineHeight: '20px',
+                    marginBottom: '4px'
+                }
+            });
+            if (params === null || params === void 0 ? void 0 : params.title) {
+                this.head.addChild(new framework_1.TextNode(params.title));
+            }
+            if ((_a = params.slots) === null || _a === void 0 ? void 0 : _a.title) {
+                this.head.addChild((_b = params.slots) === null || _b === void 0 ? void 0 : _b.title);
+            }
+            this.addChild(this.head);
+        }
+        this.content = new framework_1.Div({
+            name: 'content',
+            styleObj: {
+                // font-weight: getCssVar('statistic-content-font-weight');
+                fontWeight: td_statistic_style_1.$statistic.contentFontWeight,
+                // font-size: getCssVar('statistic-content-font-size');
+                fontSize: td_statistic_style_1.$statistic.contentFontSize,
+                // color: getCssVar('statistic-content-color');
+                color: td_statistic_style_1.$statistic.contentColor
+            }
+        });
+        if (params === null || params === void 0 ? void 0 : params.valueStyle) {
+            this.content.ctrl.addStyleObj(params.valueStyle);
+        }
+        this.addChild(this.content);
+        if (params === null || params === void 0 ? void 0 : params.prefix) {
+            this.prefix = new framework_1.Div({
+                name: 'prefix',
+                styleObj: {
+                    marginRight: '4px',
+                    display: 'inline-block'
+                },
+                childNodes: [
+                    new framework_1.Span({
+                        text: params.prefix
+                    })
+                ]
+            });
+            this.content.addChild(this.prefix);
+        }
+        if ((_c = params === null || params === void 0 ? void 0 : params.slots) === null || _c === void 0 ? void 0 : _c.prefix) {
+            this.prefix = params.slots.prefix;
+            this.content.addChild(params.slots.prefix);
+        }
+        this.number = new framework_1.Span({
+            text: this.formatValue((params === null || params === void 0 ? void 0 : params.value) || 0),
+            styleObj: {
+                display: 'inline-block'
+            }
+        });
+        this.content.addChild(this.number);
+        if (params === null || params === void 0 ? void 0 : params.suffix) {
+            this.suffix = new framework_1.Div({
+                name: 'suffix',
+                styleObj: {
+                    marginLeft: '4px',
+                    display: 'inline-block'
+                },
+                childNodes: [
+                    new framework_1.Span({
+                        text: params.suffix
+                    })
+                ]
+            });
+            this.content.addChild(this.suffix);
+        }
+        if ((_d = params === null || params === void 0 ? void 0 : params.slots) === null || _d === void 0 ? void 0 : _d.suffix) {
+            this.suffix = params.slots.suffix;
+            this.content.addChild(params.slots.suffix);
+        }
+        this.props = this.setParams(params);
+    }
+    formatValue(value) {
+        const { formatter, precision, decimalSeparator, groupSeparator } = this.props;
+        if ((0, utils_1.isFunction)(formatter)) {
+            return formatter(value);
+        }
+        if (!(0, utils_1.isNumber)(value)) {
+            return String(value);
+        }
+        let [integer, decimal = ''] = String(value).split('.');
+        decimal = decimal
+            .padEnd(precision || 0, '0') // precision 默认为 0；
+            .slice(0, (precision || 0) > 0 ? precision : 0);
+        // groupSeparator 默认 ,
+        integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator || ',');
+        return [integer, decimal].join(decimal ? decimalSeparator : '');
+    }
+}
+exports.TdStatisticAbstract = TdStatisticAbstract;

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

@@ -0,0 +1,6 @@
+import { TdStatisticAbstract } from './td-statistic.abstract';
+import type { ITdStatistic, ITdStatisticConfig } from './td-statistic.interface';
+export declare class TdStatistic extends TdStatisticAbstract implements ITdStatistic {
+    className: 'TdStatistic';
+    constructor(params: ITdStatisticConfig);
+}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdStatistic = void 0;
+const td_statistic_abstract_1 = require("./td-statistic.abstract");
+class TdStatistic extends td_statistic_abstract_1.TdStatisticAbstract {
+    constructor(params) {
+        super(params);
+        this.className = 'TdStatistic';
+    }
+}
+exports.TdStatistic = TdStatistic;

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

@@ -0,0 +1,58 @@
+import { TypeElement } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
+import { Dayjs } from 'dayjs';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdStatisticAbstract extends IUI {
+    className: 'TdStatistic' | 'TdCountDown';
+}
+export interface ITdStatistic extends ITdStatisticAbstract {
+    className: 'TdStatistic';
+}
+export interface ITdStatisticConfig extends IUIConfig {
+    /**
+     * @description Setting the decimal point
+     *     default: '.',
+     */
+    decimalSeparator?: string;
+    /**
+     * @description Sets the thousandth identifier
+     *     default: ',',
+     */
+    groupSeparator?: string;
+    /**
+     * @description numerical precision
+     *     default: 0,
+     */
+    precision?: number;
+    /**
+     * @description Custom numerical presentation
+     */
+    formatter?: (value: number | Dayjs) => string;
+    /**
+     * @description Numerical content
+     *     default: 0,
+     */
+    value?: number | Dayjs;
+    /**
+     * @description Sets the prefix of a number
+     */
+    prefix?: string;
+    /**
+     * @description  Sets the suffix of a number
+     */
+    suffix?: string;
+    /**
+     * @description Numeric titles
+     */
+    title?: string;
+    /**
+     * @description Styles numeric values
+     */
+    valueStyle?: IStyle;
+    slots?: {
+        prefix?: TypeElement;
+        suffix?: TypeElement;
+        title?: TypeElement;
+        value?: TypeElement;
+    };
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,9 @@
+import { Property } from '@type-dom/css-type';
+export declare const $statistic: {
+    titleFontWeight: Property.FontWeight;
+    titleFontSize: string;
+    titleColor: string;
+    contentFontWeight: Property.FontWeight;
+    contentFontSize: string;
+    contentColor: string;
+};

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$statistic = void 0;
+const var_1 = require("../../../styles/var");
+exports.$statistic = {
+    titleFontWeight: 400,
+    // titleFontSize: getCssVar('font-size', 'extra-small'),
+    titleFontSize: var_1.$fontSizes.extraSmall,
+    // titleColor: getCssVar('text-color', 'regular'),
+    titleColor: var_1.$textColor.regular,
+    contentFontWeight: 400,
+    // contentFontSize: getCssVar('font-size', 'extra-large'),
+    contentFontSize: var_1.$fontSizes.extraLarge,
+    // contentColor: getCssVar('text-color', 'primary'),
+    contentColor: var_1.$textColor.primary
+};

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

@@ -0,0 +1 @@
+"use strict";