@type-dom/ui 0.1.0 → 0.1.1

package/src/components/data/td-collapse-item/td-collapse-item.class.js

@@ -2,221 +2,77 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCollapseItem = void 0;
 const framework_1 = require("@type-dom/framework");
-const svgs_1 = require("@type-dom/svgs");
-const var_1 = require("../../../styles/var");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-// import { $collapseTransition, $collapseTransitionActive, $transition } from '../../../styles/transition';
-const td_collapse_style_1 = require("../td-collapse/td-collapse.style");
 const td_collapse_transition_class_1 = require("../td-collapse-transition/td-collapse-transition.class");
+const use_collapse_item_1 = require("../td-collapse/use-collapse-item");
+const td_collapse_item_const_1 = require("./td-collapse-item.const");
+require("./style/index");
 class TdCollapseItem extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a;
         super();
         this.className = 'TdCollapseItem';
         this.attr.addName('td-collapse-item');
-        this.headerBtn = new framework_1.Button({
-            name: 'collapse-item-header',
+        this.assignProps(td_collapse_item_const_1.collapseItemProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e;
+        console.log('setup . ');
+        const props = this.props;
+        const { focusing, id, isActive, handleFocus, handleHeaderClick, handleEnterClick, } = (0, use_collapse_item_1.useCollapseItem)(props);
+        const { arrowKls, headKls, rootKls, itemWrapperKls, itemContentKls, scopedContentId, scopedHeadId, } = (0, use_collapse_item_1.useCollapseItemDOM)(props, { focusing, isActive, id });
+        (0, framework_1.defineExpose)({
+            /** @description current collapse-item whether active */
+            isActive,
+        });
+        this.attr.addClass(rootKls);
+        this.addChild(new framework_1.Button({
             attrObj: {
+                id: scopedHeadId,
+                class: headKls,
+                ariaExpanded: isActive,
+                arialControls: scopedContentId,
+                ariaDescribedby: scopedContentId,
+                tabindex: props.disabled ? -1 : 0,
                 type: 'button',
-                // ariaControls: scopedHeadId,
-                // ariaExpanded: 'isActive',
-                tabIndex: this.disabled ? -1 : 0
-            },
-            styleObj: {
-                width: '100%',
-                padding: 0,
-                border: 'none',
-                display: 'flex',
-                alignItems: 'center',
-                // height: getCssVar('collapse-header-height'),
-                height: td_collapse_style_1.$collapse.headerHeight,
-                // line-height: getCssVar('collapse-header-height'),
-                lineHeight: td_collapse_style_1.$collapse.headerHeight,
-                // background-color: getCssVar('collapse-header-bg-color'),
-                backgroundColor: td_collapse_style_1.$collapse.headerBgColor,
-                // color: getCssVar('collapse-header-text-color'),
-                color: td_collapse_style_1.$collapse.headerTextColor,
-                cursor: 'pointer',
-                // border-bottom: 1px solid getCssVar('collapse-border-color'),
-                borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor,
-                // font-size: getCssVar('collapse-header-font-size'),
-                fontSize: td_collapse_style_1.$collapse.headerFontSize,
-                fontWeight: 500,
-                // transition: border-bottom-color getCssVar('transition-duration'),
-                transition: 'border-bottom-color ' + var_1.$transitionDurationDefault,
-                outline: 'none'
             },
             events: {
-                click: () => {
-                    const nameId = (params === null || params === void 0 ? void 0 : params.nameId) || '';
-                    this.handleHeaderClick(nameId);
-                },
-                // keydown.space.enter.stop.prevent: () => {
-                // },
-                keydown: (event) => {
-                    if ((event === null || event === void 0 ? void 0 : event.key) === 'Enter' || (event === null || event === void 0 ? void 0 : event.key) === ' ') {
-                        event === null || event === void 0 ? void 0 : event.preventDefault();
-                        event === null || event === void 0 ? void 0 : event.stopPropagation();
-                        this.handleEnterClick();
+                click: handleHeaderClick,
+                keydown: (evt) => {
+                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter' || (evt === null || evt === void 0 ? void 0 : evt.key) === 'Space') {
+                        handleEnterClick();
                     }
+                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
                 },
-                focus: () => {
-                    this.handleFocus();
-                },
-                blur: (evt, element) => {
-                    this.focusing = false;
-                }
-            }
-        });
-        this.addChild(this.headerBtn);
-        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.title) {
-            this.headerBtn.slotChild(params.slots.title);
-        }
-        else if (params === null || params === void 0 ? void 0 : params.title) {
-            this.headerBtn.setTitle(params.title);
-        }
-        this.arrowIcon = new td_icon_class_1.TdIcon({
-            svgObj: new svgs_1.ElArrowRightSvg(),
-            styleObj: {
-                margin: '0 8px 0 auto',
-                // transition: transform getCssVar('transition-duration'),
-                transition: 'transform ' + var_1.$transitionDurationDefault,
-                fontWeight: 300
-            }
-        });
-        this.headerBtn.addChild(this.arrowIcon);
-        this.wrapper = new framework_1.Div({
-            name: 'wrapper',
-            attrObj: {
-                ariaHidden: 'true',
-                role: 'region'
-                // ariaLabelledby: scopedHeadId,
+                focus: handleFocus,
+                blur: () => focusing.set(false),
             },
-            styleObj: {
-                // display: 'none',
-                willChange: 'height',
-                // maxHeight: 0,
-                // background-color: getCssVar('collapse-content-bg-color'),
-                backgroundColor: td_collapse_style_1.$collapse.contentBgColor,
-                overflow: 'hidden',
-                boxSizing: 'border-box',
-                // border-bottom: 1px solid getCssVar('collapse-border-color'),
-                borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor
-            }
-        });
-        this.wrapperContent = new framework_1.Div({
-            name: 'collapse-item-content',
-            styleObj: {
-                paddingBottom: '25px',
-                // font-size: getCssVar('collapse-content-font-size'),
-                fontSize: td_collapse_style_1.$collapse.contentFontSize,
-                // color: getCssVar('collapse-content-text-color'),
-                color: td_collapse_style_1.$collapse.contentTextColor,
-                lineHeight: 1.769230769230769
-            }
-        });
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.wrapperContent.slotChild(params.slot);
-        }
-        this.wrapper.addChild(this.wrapperContent);
-        this.transition = new td_collapse_transition_class_1.TdCollapseTransition({
-            parent: this,
-            slot: this.wrapper
-        });
-        this.addChild(this.transition);
-        this.props = this.useParams(params);
-    }
-    setActive(active) {
-        var _a;
-        if (active) {
-            // todo transition
-            // this.wrapper.addStyleObj($collapseTransitionActive);
-            // collapseTransitionConfig.beforeEnter && collapseTransitionConfig.beforeEnter(this.wrapper);
-            // collapseTransitionConfig.enter && collapseTransitionConfig.enter(this.wrapper);
-            // collapseTransitionConfig.afterEnter && collapseTransitionConfig.afterEnter(this.wrapper);
-            // collapseTransitionConfig.enterCancelled(this.wrapper);
-            // nextFrame(() => {
-            //   // 计算内容的高度
-            //   const contentHeight = this.wrapper.dom.scrollHeight + 'px';
-            //   console.log('contentHeight is ', contentHeight);
-            //   this.wrapper.setStyleObj({
-            //     maxHeight: contentHeight,
-            //     // height: '50px',
-            //     // opacity: 1,
-            //     // display: undefined,
-            //   });
-            // });
-            this.transition.showSlot(true);
-            this.headerBtn.style.setObj({
-                borderBottomColor: 'transparent'
-            });
-            (_a = this.arrowIcon.style) === null || _a === void 0 ? void 0 : _a.setObj({
-                transform: 'rotate(90deg)'
-            });
-        }
-        else {
-            // todo transition
-            // this.wrapper.addStyleObj($collapseTransition);
-            // nextFrame(() => {
-            //   this.wrapper.setStyleObj({
-            //     maxHeight: 0,
-            //     // height: '0px',
-            //     // opacity: 0,
-            //     // display: 'none',
-            //     // transition: 'transform 1s', // + $transitionDuration,
-            //   });
-            // });
-            this.transition.showSlot(false);
-            this.headerBtn.style.setObj({
-                transition: 'transform ' + var_1.$transitionDurationDefault,
-            });
-            this.arrowIcon.style.setObj({
-                transform: 'rotate(0deg)'
-            });
-            // todo transition
-            // this.wrapper.addStyleObj($collapseTransition);
-        }
-    }
-    setDisable(disabled) {
-        if (disabled) {
-            this.headerBtn.style.setObj({
-                // color: getCssVar('text-color-disabled'),
-                color: var_1.$textColor.disabled,
-                cursor: 'not-allowed'
-            });
-        }
-        else {
-            this.headerBtn.style.setObj({
-                // color: getCssVar('collapse-header-text-color'),
-                color: td_collapse_style_1.$collapse.headerTextColor,
-                cursor: 'pointer'
-            });
-        }
-    }
-    handleFocus() {
-        setTimeout(() => {
-            if (this.isClick) {
-                this.isClick = false;
-            }
-            else {
-                this.focusing = true;
-            }
-        }, 50);
-    }
-    handleHeaderClick(name) {
-        var _a;
-        console.log('handleHeaderClick, name is ', name);
-        if (this.props.disabled) {
-            return;
-        }
-        (_a = this.parent) === null || _a === void 0 ? void 0 : _a.handleItemClick(name);
-        this.focusing = false;
-        this.isClick = true;
-    }
-    handleEnterClick() {
-        var _a;
-        // name todo
-        (_a = this.parent) === null || _a === void 0 ? void 0 : _a.handleItemClick('name');
+            slot: [
+                ...(0, framework_1.arraySlot)((_b = (_a = props.slots) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : props.title),
+                ...(0, framework_1.arraySlot)((_d = (_c = props.slots) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : new td_icon_class_1.TdIcon({
+                    class: arrowKls,
+                    slot: new props.icon(),
+                })),
+            ],
+        }));
+        console.log('isActive.get() is ', isActive.get());
+        this.addChild(new td_collapse_transition_class_1.TdCollapseTransition({
+            slot: new framework_1.Div({
+                vShow: isActive,
+                attrObj: {
+                    id: scopedContentId,
+                    role: 'region',
+                    class: itemWrapperKls,
+                    ariaHidden: !isActive,
+                    ariaLabelledby: scopedHeadId,
+                },
+                slot: new framework_1.Div({
+                    class: itemContentKls,
+                    slot: props.slot || ((_e = props.slots) === null || _e === void 0 ? void 0 : _e.default),
+                }),
+            }),
+        }));
     }
 }
 exports.TdCollapseItem = TdCollapseItem;

package/src/components/data/td-collapse-item/td-collapse-item.const.d.ts

@@ -0,0 +1,2 @@
+import { CollapseItemProps } from './td-collapse-item.interface';
+export declare const collapseItemProps: CollapseItemProps;

package/src/components/data/td-collapse-item/td-collapse-item.const.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseItemProps = void 0;
+const svgs_1 = require("@type-dom/svgs");
+exports.collapseItemProps = {
+    title: '',
+    icon: svgs_1.ElArrowRightSvg,
+};

package/src/components/data/td-collapse-item/td-collapse-item.interface.d.ts

@@ -1,8 +1,8 @@
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps, TypeSvgSvg } from '@type-dom/framework';
 export interface ITdCollapseItem extends ITypeDiv {
     className: 'TdCollapseItem';
 }
-export interface ITdCollapseItemConfig extends ITypeConfig {
+export interface CollapseItemProps extends TypeDivProps {
     /**
      * @description title of the panel
      *     default: '',
@@ -12,7 +12,11 @@ export interface ITdCollapseItemConfig extends ITypeConfig {
      * @description unique identification of the panel
      *     default: undefined,
      */
-    nameId?: string | number;
+    name?: string | number;
+    /**
+     * @description icon of the collapse item
+     */
+    icon?: typeof TypeSvgSvg;
     /**
      * @description disable the collapse item
      */

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

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

package/src/components/data/td-collapse-transition/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-collapse-transition.css");

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

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

package/src/components/data/td-collapse-transition/style/index.js

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

package/src/components/data/td-collapse-transition/td-collapse-transition.class.d.ts

@@ -1,6 +1,8 @@
-import { ITransitionConfig, TypeTransition } from '@type-dom/framework';
+import { TransitionProps, TypeFragment } from '@type-dom/framework';
 import { ITdCollapseTransition } from './td-collapse-transition.interface';
-export declare class TdCollapseTransition extends TypeTransition implements ITdCollapseTransition {
+import './style/index';
+export declare class TdCollapseTransition extends TypeFragment implements ITdCollapseTransition {
     className: 'TdCollapseTransition';
-    constructor(params?: ITransitionConfig);
+    constructor(params?: TransitionProps);
+    setup(): void;
 }

package/src/components/data/td-collapse-transition/td-collapse-transition.class.js

@@ -2,11 +2,103 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCollapseTransition = void 0;
 const framework_1 = require("@type-dom/framework");
-const td_collapse_transition_util_1 = require("./td-collapse-transition.util");
-class TdCollapseTransition extends framework_1.TypeTransition {
+const use_namespace_1 = require("../../../hooks/use-namespace");
+require("./style/index");
+class TdCollapseTransition extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(Object.assign(td_collapse_transition_util_1.collapseTransitionConfig, params));
+        super();
         this.className = 'TdCollapseTransition';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('collapse-transition');
+        const reset = (el) => {
+            el.style.maxHeight = '';
+            el.style.overflow = el.dataset.oldOverflow;
+            el.style.paddingTop = el.dataset.oldPaddingTop;
+            el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        };
+        // todo 应该对应 transtion 中的 on开头的方法
+        const on = {
+            onBeforeEnter(el) {
+                if (!el)
+                    return;
+                if (!(el === null || el === void 0 ? void 0 : el.dataset))
+                    el.dataset = {};
+                el.dataset.oldPaddingTop = el.style.paddingTop;
+                el.dataset.oldPaddingBottom = el.style.paddingBottom;
+                if (el.style.height)
+                    el.dataset.elExistsHeight = el.style.height;
+                el.style.maxHeight = 0;
+                el.style.paddingTop = 0;
+                el.style.paddingBottom = 0;
+            },
+            onEnter(el) {
+                if (!el)
+                    return;
+                requestAnimationFrame(() => {
+                    el.dataset.oldOverflow = el.style.overflow;
+                    if (el.dataset.elExistsHeight) {
+                        el.style.maxHeight = el.dataset.elExistsHeight;
+                    }
+                    else if (el.scrollHeight !== 0) {
+                        el.style.maxHeight = `${el.scrollHeight}px`;
+                    }
+                    else {
+                        el.style.maxHeight = 0;
+                    }
+                    el.style.paddingTop = el.dataset.oldPaddingTop;
+                    el.style.paddingBottom = el.dataset.oldPaddingBottom;
+                    el.style.overflow = 'hidden';
+                });
+            },
+            onAfterEnter(el) {
+                if (!el)
+                    return;
+                el.style.maxHeight = '';
+                el.style.overflow = el.dataset.oldOverflow;
+            },
+            onEnterCancelled(el) {
+                if (!el)
+                    return;
+                reset(el);
+            },
+            onBeforeLeave(el) {
+                if (!el)
+                    return;
+                if (!el.dataset)
+                    el.dataset = {};
+                el.dataset.oldPaddingTop = el.style.paddingTop;
+                el.dataset.oldPaddingBottom = el.style.paddingBottom;
+                el.dataset.oldOverflow = el.style.overflow;
+                el.style.maxHeight = `${el.scrollHeight}px`;
+                el.style.overflow = 'hidden';
+            },
+            onLeave(el) {
+                if (!el)
+                    return;
+                if (el.scrollHeight !== 0) {
+                    el.style.maxHeight = 0;
+                    el.style.paddingTop = 0;
+                    el.style.paddingBottom = 0;
+                }
+            },
+            onAfterLeave(el) {
+                if (!el)
+                    return;
+                reset(el);
+            },
+            onLeaveCancelled(el) {
+                if (!el)
+                    return;
+                reset(el);
+            },
+        };
+        this.addChild(new framework_1.Transition(Object.assign(Object.assign({ name: ns.b() }, on), { 
+            // emits: on,
+            slot: props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) })));
     }
 }
 exports.TdCollapseTransition = TdCollapseTransition;

package/src/components/data/td-count-down/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-count-down/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-count-down/style/index.d.ts

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

package/src/components/data/td-count-down/style/index.js

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

package/src/components/data/td-count-down/td-count-down.class.d.ts

@@ -1,13 +1,10 @@
-import { TdStatisticAbstract } from '../td-statistic/td-statistic.abstract';
-import { ITdCountDown, ITdCountDownConfig } from './td-count-down.interface';
-export declare class TdCountDown extends TdStatisticAbstract implements ITdCountDown {
+import { ITdCountDown, CountDownProps } from './td-count-down.interface';
+import { TypeFragment } from '@type-dom/framework';
+import { Computed } from '@type-dom/signals';
+export declare class TdCountDown extends TypeFragment implements ITdCountDown {
     className: 'TdCountDown';
-    props: ITdCountDownConfig;
-    private rawValue;
-    private timer?;
-    constructor(params?: ITdCountDownConfig);
-    mounted(): void;
-    stopTimer(): void;
-    startTimer(): void;
-    setNumber(value: number): void;
+    props: CountDownProps;
+    displayValue?: Computed<string>;
+    constructor(params?: CountDownProps);
+    setup(): void;
 }

package/src/components/data/td-count-down/td-count-down.class.js

@@ -2,54 +2,85 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCountDown = void 0;
 const utils_1 = require("@type-dom/utils");
-const td_statistic_abstract_1 = require("../td-statistic/td-statistic.abstract");
 const utils_2 = require("./utils");
-class TdCountDown extends td_statistic_abstract_1.TdStatisticAbstract {
+const framework_1 = require("@type-dom/framework");
+const td_count_down_const_1 = require("./td-count-down.const");
+const signals_1 = require("@type-dom/signals");
+const td_statistic_class_1 = require("../td-statistic/td-statistic.class");
+class TdCountDown extends framework_1.TypeFragment {
     constructor(params = {}) {
-        const format = (params === null || params === void 0 ? void 0 : params.format) || 'HH:mm:ss';
-        params.formatter = (val) => (0, utils_2.formatTime)(val, format);
-        // title,prefix,suffix 可以是 TypeElement元素；
-        super(params);
+        super();
         this.className = 'TdCountDown';
-        this.rawValue = (0, utils_2.getTime)((params === null || params === void 0 ? void 0 : params.value) || 0) - Date.now();
-        this.setNumber(this.rawValue);
-        this.slotChild(params.slot);
+        this.addEmits(td_count_down_const_1.countdownEmits);
+        this.assignProps(td_count_down_const_1.countdownProps);
         this.props = this.useParams(params);
     }
-    mounted() {
-        this.stopTimer();
-        this.startTimer();
-    }
-    stopTimer() {
-        if (this.timer) {
-            (0, utils_1.cAF)(this.timer);
-            this.timer = undefined;
-        }
-    }
-    startTimer() {
-        var _a;
-        console.log('this.props.value is ', this.props.value);
-        const timestamp = (0, utils_2.getTime)(((_a = this.props) === null || _a === void 0 ? void 0 : _a.value) || 0);
-        const frameFunc = () => {
-            let diff = timestamp - Date.now();
-            // console.log('diff is ', diff);
-            // emit('change', diff)
-            this.setNumber(diff);
-            if (diff <= 0) {
-                diff = 0;
-                this.stopTimer();
-                // emit('finish')
+    setup() {
+        console.warn('TdCountDown setup . ');
+        const props = this.props;
+        const emit = this.emit;
+        let timer;
+        const rawValue = (0, signals_1.signal)(0);
+        const displayValue = (0, signals_1.computed)(() => (0, utils_2.formatTime)(rawValue.get(), props.format));
+        const formatter = (val) => (0, utils_2.formatTime)(val, props.format);
+        const stopTimer = () => {
+            if (timer) {
+                (0, utils_1.cAF)(timer);
+                timer = undefined;
             }
-            else {
-                this.timer = (0, utils_1.rAF)(frameFunc);
+        };
+        const startTimer = () => {
+            const value = (0, signals_1.unref)(props.value);
+            if ((0, utils_1.isUndefined)(value)) {
+                return;
             }
-            this.rawValue = diff;
+            const timestamp = (0, utils_2.getTime)(value);
+            const frameFunc = () => {
+                let diff = timestamp - Date.now();
+                emit('change', diff);
+                if (diff <= 0) {
+                    diff = 0;
+                    stopTimer();
+                    emit('finish');
+                }
+                else {
+                    timer = (0, utils_1.rAF)(frameFunc);
+                }
+                rawValue.set(diff);
+            };
+            timer = (0, utils_1.rAF)(frameFunc);
         };
-        this.timer = (0, utils_1.rAF)(frameFunc);
-    }
-    setNumber(value) {
-        var _a;
-        (_a = this.number.textNode) === null || _a === void 0 ? void 0 : _a.setText(this.formatValue(value));
+        (0, framework_1.onMounted)(() => {
+            const value = (0, signals_1.unref)(props.value);
+            if ((0, utils_1.isUndefined)(value)) {
+                return;
+            }
+            rawValue.set((0, utils_2.getTime)(value - Date.now()));
+            (0, signals_1.watch)(() => [(0, signals_1.unref)(props.value), props.format], () => {
+                stopTimer();
+                startTimer();
+            }, {
+                immediate: true,
+            });
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            stopTimer();
+        });
+        (0, framework_1.defineExpose)({
+            /**
+             * @description current display value
+             */
+            displayValue,
+        });
+        this.addChild(new td_statistic_class_1.TdStatistic({
+            value: rawValue,
+            title: props.title,
+            prefix: props.prefix,
+            suffix: props.suffix,
+            valueStyle: props.valueStyle,
+            formatter,
+            slots: props.slots,
+        }));
     }
 }
 exports.TdCountDown = TdCountDown;

package/src/components/data/td-count-down/td-count-down.const.d.ts

@@ -0,0 +1,6 @@
+import { CountDownProps } from './td-count-down.interface';
+export declare const countdownProps: CountDownProps;
+export declare const countdownEmits: {
+    finish: () => boolean;
+    change: (value: number) => boolean;
+};

package/src/components/data/td-count-down/td-count-down.const.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.countdownEmits = exports.countdownProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.countdownProps = {
+    format: 'HH:mm:ss',
+    value: 0,
+};
+exports.countdownEmits = {
+    finish: () => true,
+    [event_1.CHANGE_EVENT]: (value) => (0, utils_1.isNumber)(value),
+};