@type-dom/ui 0.1.2 → 0.2.0

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

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$collapseStyle = exports.$collapse = void 0;
-const var_1 = require("../../../styles/var");
-// Collapse
-// css3 var in packages/theme-chalk/src/collapse.scss
-exports.$collapse = {
-    // 'border-color': getCssVar('border-color-lighter'),
-    borderColor: var_1.$borderColor.lighter,
-    // 'header-height': '48px',
-    headerHeight: '48px',
-    // 'header-bg-color': getCssVar('fill-color', 'blank'),
-    headerBgColor: var_1.$fillColor.blank,
-    // 'header-text-color': getCssVar('text-color-primary'),
-    headerTextColor: var_1.$textColor.primary,
-    // 'header-font-size': '13px',
-    headerFontSize: '13px',
-    // 'content-bg-color': getCssVar('fill-color', 'blank'),
-    contentBgColor: var_1.$fillColor.blank,
-    'content-font-size': '13px',
-    contentFontSize: '13px',
-    // 'content-text-color': getCssVar('text-color-primary'),
-    contentTextColor: var_1.$textColor.primary,
-};
-exports.$collapseStyle = {
-    // border-top: 1px solid getCssVar('collapse-border-color');
-    borderTop: '1px solid ' + exports.$collapse.borderColor,
-    // border-bottom: 1px solid getCssVar('collapse-border-color');
-    borderBottom: '1px solid ' + exports.$collapse.borderColor,
-};

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

@@ -1,20 +0,0 @@
-import { CollapseItemProps } from '../td-collapse-item/td-collapse-item.interface';
-export declare const useCollapseItem: (props: CollapseItemProps) => {
-    focusing: import("@type-dom/signals").Signal<boolean>;
-    id: import("@type-dom/signals").Computed<number>;
-    isActive: import("@type-dom/signals").Computed<boolean | undefined>;
-    handleFocus: () => void;
-    handleHeaderClick: () => void;
-    handleEnterClick: () => void;
-};
-export declare const useCollapseItemDOM: (props: CollapseItemProps, { focusing, isActive, id }: Partial<ReturnType<typeof useCollapseItem>>) => {
-    arrowKls: import("@type-dom/signals").Computed<string[]>;
-    headKls: import("@type-dom/signals").Computed<(string | {
-        focusing: boolean | undefined;
-    })[]>;
-    rootKls: import("@type-dom/signals").Computed<string[]>;
-    itemWrapperKls: import("@type-dom/signals").Computed<string>;
-    itemContentKls: import("@type-dom/signals").Computed<string>;
-    scopedContentId: import("@type-dom/signals").Computed<string>;
-    scopedHeadId: import("@type-dom/signals").Computed<string>;
-};

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

@@ -1,86 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCollapseItemDOM = exports.useCollapseItem = void 0;
-// import { computed, inject, ref, unref } from 'vue'
-// import { useIdInjection, useNamespace } from '@element-plus/hooks'
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const use_id_1 = require("../../../hooks/use-id");
-const constants_1 = require("./constants");
-// import type { CollapseItemProps } from './collapse-item'
-const useCollapseItem = (props) => {
-    const collapse = (0, framework_1.inject)(constants_1.collapseContextKey);
-    const { namespace } = (0, use_namespace_1.useNamespace)('collapse');
-    const focusing = (0, signals_1.signal)(false);
-    const isClick = (0, signals_1.signal)(false);
-    const idInjection = (0, use_id_1.useIdInjection)();
-    const id = (0, signals_1.computed)(() => idInjection.current++);
-    const name = (0, signals_1.computed)(() => {
-        var _a;
-        return ((_a = props.name) !== null && _a !== void 0 ? _a : `${namespace.get()}-id-${idInjection.prefix}-${(0, signals_1.unref)(id)}`);
-    });
-    // console.warn('name is ', name);
-    const isActive = (0, signals_1.computed)(() => collapse === null || collapse === void 0 ? void 0 : collapse.activeNames.get().includes((0, signals_1.unref)(name)));
-    // console.error('isActive is ', isActive);
-    const handleFocus = () => {
-        setTimeout(() => {
-            if (!isClick.get()) {
-                focusing.set(true);
-            }
-            else {
-                isClick.set(false);
-            }
-        }, 50);
-    };
-    const handleHeaderClick = () => {
-        if (props.disabled)
-            return;
-        collapse === null || collapse === void 0 ? void 0 : collapse.handleItemClick((0, signals_1.unref)(name));
-        focusing.set(false);
-        isClick.set(true);
-    };
-    const handleEnterClick = () => {
-        collapse === null || collapse === void 0 ? void 0 : collapse.handleItemClick((0, signals_1.unref)(name));
-    };
-    return {
-        focusing,
-        id,
-        isActive,
-        handleFocus,
-        handleHeaderClick,
-        handleEnterClick,
-    };
-};
-exports.useCollapseItem = useCollapseItem;
-const useCollapseItemDOM = (props, { focusing, isActive, id }) => {
-    const ns = (0, use_namespace_1.useNamespace)('collapse');
-    const rootKls = (0, signals_1.computed)(() => [
-        ns.b('item'),
-        ns.is('active', (0, signals_1.unref)(isActive)),
-        ns.is('disabled', props.disabled),
-    ]);
-    const headKls = (0, signals_1.computed)(() => [
-        ns.be('item', 'header'),
-        ns.is('active', (0, signals_1.unref)(isActive)),
-        { focusing: (0, signals_1.unref)(focusing) && !props.disabled },
-    ]);
-    const arrowKls = (0, signals_1.computed)(() => [
-        ns.be('item', 'arrow'),
-        ns.is('active', (0, signals_1.unref)(isActive)),
-    ]);
-    const itemWrapperKls = (0, signals_1.computed)(() => ns.be('item', 'wrap'));
-    const itemContentKls = (0, signals_1.computed)(() => ns.be('item', 'content'));
-    const scopedContentId = (0, signals_1.computed)(() => ns.b(`content-${(0, signals_1.unref)(id)}`));
-    const scopedHeadId = (0, signals_1.computed)(() => ns.b(`head-${(0, signals_1.unref)(id)}`));
-    return {
-        arrowKls,
-        headKls,
-        rootKls,
-        itemWrapperKls,
-        itemContentKls,
-        scopedContentId,
-        scopedHeadId,
-    };
-};
-exports.useCollapseItemDOM = useCollapseItemDOM;

package/src/components/data/td-collapse/use-collapse.d.ts

@@ -1,9 +0,0 @@
-import { AnyFn } from '@type-dom/utils';
-import { CollapseActiveName, CollapseProps } from './td-collapse.interface';
-export declare const useCollapse: (props: CollapseProps, emit: AnyFn) => {
-    activeNames: import("@type-dom/signals").Signal<CollapseActiveName[]>;
-    setActiveNames: (_activeNames: CollapseActiveName[]) => void;
-};
-export declare const useCollapseDOM: () => {
-    rootKls: import("@type-dom/signals").Computed<string>;
-};

package/src/components/data/td-collapse/use-collapse.js

@@ -1,68 +0,0 @@
-"use strict";
-// import { computed, provide, ref, watch } from 'vue'
-// import { ensureArray } from '@element-plus/utils'
-// import { useNamespace } from '@element-plus/hooks'
-// import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-// import { collapseContextKey } from './constants'
-//
-// import type { SetupContext } from 'vue'
-// import type {
-//   CollapseActiveName,
-//   CollapseEmits,
-//   CollapseProps,
-// } from './collapse'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCollapseDOM = exports.useCollapse = void 0;
-const utils_1 = require("@type-dom/utils");
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const event_1 = require("../../../constants/event");
-const constants_1 = require("./constants");
-const useCollapse = (props, emit) => {
-    var _a;
-    const activeNames = (0, signals_1.signal)((0, utils_1.ensureArray)((_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get()));
-    const setActiveNames = (_activeNames) => {
-        activeNames.set(_activeNames);
-        const value = props.accordion ? activeNames.get()[0] : activeNames.get();
-        emit(event_1.UPDATE_MODEL_EVENT, value);
-        emit(event_1.CHANGE_EVENT, value);
-    };
-    const handleItemClick = (name) => {
-        if (props.accordion) {
-            setActiveNames([activeNames.get()[0] === name ? '' : name]);
-        }
-        else {
-            const _activeNames = [...activeNames.get()];
-            const index = _activeNames.indexOf(name);
-            if (index > -1) {
-                _activeNames.splice(index, 1);
-            }
-            else {
-                _activeNames.push(name);
-            }
-            setActiveNames(_activeNames);
-        }
-    };
-    (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, // props.vModel 是数组，
-    (newValue, oldValue) => newValue && activeNames.set((0, utils_1.ensureArray)(newValue))
-    // { deep: true }
-    );
-    (0, framework_1.provide)(constants_1.collapseContextKey, {
-        activeNames,
-        handleItemClick,
-    });
-    return {
-        activeNames,
-        setActiveNames,
-    };
-};
-exports.useCollapse = useCollapse;
-const useCollapseDOM = () => {
-    const ns = (0, use_namespace_1.useNamespace)('collapse');
-    const rootKls = (0, signals_1.computed)(() => ns.b());
-    return {
-        rootKls,
-    };
-};
-exports.useCollapseDOM = useCollapseDOM;

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

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

package/src/components/data/td-collapse-item/style/css.js

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-import { TypeDiv } from '@type-dom/framework';
-import { Computed } from '@type-dom/signals';
-import { ITdCollapseItem, CollapseItemProps } from './td-collapse-item.interface';
-import './style/index';
-export declare class TdCollapseItem extends TypeDiv implements ITdCollapseItem {
-    className: 'TdCollapseItem';
-    props: CollapseItemProps;
-    isActive?: Computed<boolean | undefined>;
-    constructor(params?: CollapseItemProps);
-    setup(): void;
-}

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

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdCollapseItem = void 0;
-const framework_1 = require("@type-dom/framework");
-const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-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 = {}) {
-        super();
-        this.className = 'TdCollapseItem';
-        this.attr.addName('td-collapse-item');
-        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',
-            },
-            events: {
-                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: handleFocus,
-                blur: () => focusing.set(false),
-            },
-            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

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

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

@@ -1,8 +0,0 @@
-"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,24 +0,0 @@
-import { ITypeDiv, TypeDivProps, TypeSvgSvg } from '@type-dom/framework';
-export interface ITdCollapseItem extends ITypeDiv {
-    className: 'TdCollapseItem';
-}
-export interface CollapseItemProps extends TypeDivProps {
-    /**
-     * @description title of the panel
-     *     default: '',
-     */
-    title?: string;
-    /**
-     * @description unique identification of the panel
-     *     default: undefined,
-     */
-    name?: string | number;
-    /**
-     * @description icon of the collapse item
-     */
-    icon?: typeof TypeSvgSvg;
-    /**
-     * @description disable the collapse item
-     */
-    disabled?: boolean;
-}

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

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

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

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

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

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

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

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

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

@@ -1,4 +0,0 @@
-"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,8 +0,0 @@
-import { TransitionProps, TypeFragment } from '@type-dom/framework';
-import { ITdCollapseTransition } from './td-collapse-transition.interface';
-import './style/index';
-export declare class TdCollapseTransition extends TypeFragment implements ITdCollapseTransition {
-    className: 'TdCollapseTransition';
-    constructor(params?: TransitionProps);
-    setup(): void;
-}

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

@@ -1,104 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdCollapseTransition = void 0;
-const framework_1 = require("@type-dom/framework");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-require("./style/index");
-class TdCollapseTransition extends framework_1.TypeFragment {
-    constructor(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-collapse-transition/td-collapse-transition.interface.d.ts

@@ -1,4 +0,0 @@
-import { ITypeTransition } from '@type-dom/framework';
-export interface ITdCollapseTransition extends ITypeTransition {
-    className: 'TdCollapseTransition';
-}

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

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

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

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

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

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

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

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

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

@@ -1,4 +0,0 @@
-"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,10 +0,0 @@
-import { TypeFragment } from '@type-dom/framework';
-import { Computed } from '@type-dom/signals';
-import { ITdCountDown, CountDownProps } from './td-count-down.interface';
-export declare class TdCountDown extends TypeFragment implements ITdCountDown {
-    className: 'TdCountDown';
-    props: CountDownProps;
-    displayValue?: Computed<string>;
-    constructor(params?: CountDownProps);
-    setup(): void;
-}

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

@@ -1,87 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdCountDown = void 0;
-const utils_1 = require("@type-dom/utils");
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const event_1 = require("../../../constants/event");
-const td_statistic_class_1 = require("../td-statistic/td-statistic.class");
-const utils_2 = require("./utils");
-const td_count_down_const_1 = require("./td-count-down.const");
-class TdCountDown extends framework_1.TypeFragment {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdCountDown';
-        this.addEmits(td_count_down_const_1.countdownEmits);
-        this.assignProps(td_count_down_const_1.countdownProps);
-        this.props = this.useParams(params);
-    }
-    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;
-            }
-        };
-        const startTimer = () => {
-            const value = (0, signals_1.unref)(props.value);
-            if ((0, utils_1.isUndefined)(value)) {
-                return;
-            }
-            const timestamp = (0, utils_2.getTime)(value);
-            const frameFunc = () => {
-                let diff = timestamp - Date.now();
-                emit(event_1.CHANGE_EVENT, 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);
-        };
-        (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

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