@type-dom/ui 0.0.10 → 0.1.1

package/src/components/configuration/td-config-provider/style/index.d.ts

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

package/src/components/configuration/td-config-provider/style/index.js

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

package/src/components/data/index.d.ts

@@ -1,30 +1,32 @@
 export { TdAvatar } from './td-avatar/td-avatar.class';
-export type { ITdAvatar, ITdAvatarConfig } from './td-avatar/td-avatar.interface';
+export type * from './td-avatar/td-avatar.interface';
 export { TdBadge } from './td-badge/td-badge.class';
-export type { ITdBadge, ITdBadgeConfig } from './td-badge/td-badge.interface';
+export type * from './td-badge/td-badge.interface';
 export { TdCard } from './td-card/td-card.class';
-export type { ITdCard, ITdCardConfig } from './td-card/td-card.interface';
+export type * from './td-card/td-card.interface';
 export { TdCollapse } from './td-collapse/td-collapse.class';
-export type { ITdCollapse, ITdCollapseConfig } from './td-collapse/td-collapse.interface';
+export type * from './td-collapse/td-collapse.interface';
 export { TdCollapseItem } from './td-collapse-item/td-collapse-item.class';
-export type { ITdCollapseItem, ITdCollapseItemConfig } from './td-collapse-item/td-collapse-item.interface';
+export type * from './td-collapse-item/td-collapse-item.interface';
 export { TdDescriptions } from './td-descriptions/td-descriptions.class';
-export type { ITdDescriptions, ITdDescriptionsConfig } from './td-descriptions/td-descriptions.interface';
+export type * from './td-descriptions/td-descriptions.interface';
 export { TdDescriptionsItem } from './td-descriptions-item/td-descriptions-item.class';
 export { TdEmpty } from './td-empty/td-empty.class';
-export type { ITdEmpty, ITdEmptyConfig } from './td-empty/td-empty.interface';
+export type * from './td-empty/td-empty.interface';
 export { TdImage } from './td-image/td-image.class';
-export type { ITdImage, ITdImageConfig } from './td-image/td-image.interface';
+export type * from './td-image/td-image.interface';
 export { TdStatistic } from './td-statistic/td-statistic.class';
-export type { ITdStatistic, ITdStatisticConfig } from './td-statistic/td-statistic.interface';
+export type * from './td-statistic/td-statistic.interface';
 export { TdCountDown } from './td-count-down/td-count-down.class';
-export type { ITdCountDown, ITdCountDownConfig } from './td-count-down/td-count-down.interface';
+export type * from './td-count-down/td-count-down.interface';
+export { TdProgress } from './td-progress/td-progress.class';
+export type * from './td-progress/td-progress.interface';
 export { TdResult } from './td-result/td-result.class';
-export type { ITdResult, ITdResultConfig } from './td-result/td-result.interface';
+export type * from './td-result/td-result.interface';
 export { TdSegmented } from './td-segmented/td-segmented.class';
-export type { ITdSegmented, ITdSegmentedConfig } from './td-segmented/td-segmented.interface';
+export type * from './td-segmented/td-segmented.interface';
 export * from './td-segmented/td-segmented.style';
 export { TdTag } from './td-tag/td-tag.class';
-export type { ITdTag, ITdTagConfig } from './td-tag/td-tag.interface';
+export type * from './td-tag/td-tag.interface';
 export { TdCheckTag } from './td-check-tag/td-check-tag.class';
-export type { ITdCheckTag, ITdCheckTagConfig } from './td-check-tag/td-check-tag.interface';
+export type * from './td-check-tag/td-check-tag.interface';

package/src/components/data/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdCheckTag = exports.TdTag = exports.TdSegmented = exports.TdResult = exports.TdCountDown = exports.TdStatistic = exports.TdImage = exports.TdEmpty = exports.TdDescriptionsItem = exports.TdDescriptions = exports.TdCollapseItem = exports.TdCollapse = exports.TdCard = exports.TdBadge = exports.TdAvatar = void 0;
+exports.TdCheckTag = exports.TdTag = exports.TdSegmented = exports.TdResult = exports.TdProgress = exports.TdCountDown = exports.TdStatistic = exports.TdImage = exports.TdEmpty = exports.TdDescriptionsItem = exports.TdDescriptions = exports.TdCollapseItem = exports.TdCollapse = exports.TdCard = exports.TdBadge = exports.TdAvatar = void 0;
 const tslib_1 = require("tslib");
 var td_avatar_class_1 = require("./td-avatar/td-avatar.class");
 Object.defineProperty(exports, "TdAvatar", { enumerable: true, get: function () { return td_avatar_class_1.TdAvatar; } });
@@ -24,6 +24,8 @@ var td_statistic_class_1 = require("./td-statistic/td-statistic.class");
 Object.defineProperty(exports, "TdStatistic", { enumerable: true, get: function () { return td_statistic_class_1.TdStatistic; } });
 var td_count_down_class_1 = require("./td-count-down/td-count-down.class");
 Object.defineProperty(exports, "TdCountDown", { enumerable: true, get: function () { return td_count_down_class_1.TdCountDown; } });
+var td_progress_class_1 = require("./td-progress/td-progress.class");
+Object.defineProperty(exports, "TdProgress", { enumerable: true, get: function () { return td_progress_class_1.TdProgress; } });
 var td_result_class_1 = require("./td-result/td-result.class");
 Object.defineProperty(exports, "TdResult", { enumerable: true, get: function () { return td_result_class_1.TdResult; } });
 var td_segmented_class_1 = require("./td-segmented/td-segmented.class");

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdAvatar, ITdAvatarConfig } from './td-avatar.interface';
-export declare class TdAvatar extends UI implements ITdAvatar {
+import { TypeSpan } from '@type-dom/framework';
+import { ITdAvatar, AvatarProps } from './td-avatar.interface';
+import './style/index';
+export declare class TdAvatar extends TypeSpan implements ITdAvatar {
     className: 'TdAvatar';
-    props: ITdAvatarConfig;
-    private img?;
-    private hasLoadError;
-    constructor(params?: ITdAvatarConfig);
+    props: AvatarProps;
+    constructor(params?: AvatarProps);
     setup(): void;
-    setSrc(src: string): void;
-    handleError(e: Event): void;
 }

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

@@ -1,119 +1,93 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAvatar = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
-const td_avatar_style_1 = require("./td-avatar.style");
+const signals_1 = require("@type-dom/signals");
 const utils_1 = require("@type-dom/utils");
-class TdAvatar extends ui_abstract_1.UI {
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_avatar_const_1 = require("./td-avatar.const");
+require("./style/index");
+class TdAvatar extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
         this.className = 'TdAvatar';
         this.attr.addName('td-avatar');
-        this.style.addObj({
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            boxSizing: 'border-box',
-            textAlign: 'center',
-            overflow: 'hidden',
-            // color: getCssVar('avatar', 'text-color'),
-            color: td_avatar_style_1.$avatar.textColor,
-            // background: getCssVar('avatar', 'bg-color'),
-            background: td_avatar_style_1.$avatar.bgColor,
-            // width: getCssVar('avatar', 'size'),
-            width: td_avatar_style_1.$avatarSize.default,
-            // height: getCssVar('avatar', 'size'),
-            height: td_avatar_style_1.$avatarSize.default,
-            // font-size: getCssVar('avatar', 'text-size'),
-            fontSize: td_avatar_style_1.$avatar.textSize
-        });
-        this.hasLoadError = false;
+        this.addEmits(td_avatar_const_1.avatarEmits);
+        this.assignProps(td_avatar_const_1.avatarProps);
         this.props = this.useParams(params);
     }
     setup() {
-        var _a, _b, _c;
         const props = this.props;
-        if (((props === null || props === void 0 ? void 0 : props.src) || (props === null || props === void 0 ? void 0 : props.srcSet)) && !this.hasLoadError) {
-            this.img = new framework_1.Img({
-                name: 'image',
-                styleObj: {
-                    display: 'block',
-                    width: '100%',
-                    height: '100%'
-                },
-                attrObj: {
-                    src: props.src
-                }
-            });
-            this.addChild(this.img);
-        }
-        else if (props === null || props === void 0 ? void 0 : props.icon) {
-            this.addChild(props.icon);
-            this.style.addObj({
-                fontSize: td_avatar_style_1.$avatar.iconSize
-            });
-        }
-        else {
-            if (props === null || props === void 0 ? void 0 : props.slot) {
-                this.slotChild(props.slot);
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('avatar');
+        const hasLoadError = (0, signals_1.signal)(false);
+        const avatarClass = (0, signals_1.computed)(() => {
+            const { size, icon, shape } = props;
+            const classList = [ns.b()];
+            if ((0, utils_1.isString)(size)) {
+                classList.push(ns.m(size));
             }
-        }
-        const fit = (props === null || props === void 0 ? void 0 : props.fit) || 'cover';
-        (_a = this.img) === null || _a === void 0 ? void 0 : _a.style.addObj({
-            objectFit: fit
+            if (icon) {
+                classList.push(ns.m('icon'));
+            }
+            if (shape) {
+                classList.push(ns.m(shape));
+            }
+            return classList;
         });
-        const shape = (props === null || props === void 0 ? void 0 : props.shape) || 'circle';
-        this.style.addObj({
-            borderRadius: shape === 'circle' ? '50%' : td_avatar_style_1.$avatar.borderRadius
+        const sizeStyle = (0, signals_1.computed)(() => {
+            const { size } = props;
+            return (0, utils_1.isNumber)(size)
+                ? ns.cssVarBlock({
+                    size: (0, utils_1.addUnit)(size) || '',
+                })
+                : undefined;
         });
-        const size = (props === null || props === void 0 ? void 0 : props.size) || 'default';
-        if ((0, utils_1.isNumber)(size)) {
-            this.style.addObj({
-                width: (0, utils_1.addUnit)(size),
-                height: (0, utils_1.addUnit)(size)
-            });
-            (_b = this.img) === null || _b === void 0 ? void 0 : _b.style.addObj({
-                width: (0, utils_1.addUnit)(size),
-                height: (0, utils_1.addUnit)(size)
-            });
-            if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeElement) {
-                props.slot.style.addObj({
-                    width: (0, utils_1.addUnit)(size),
-                    height: (0, utils_1.addUnit)(size)
-                });
-            }
+        const fitStyle = (0, signals_1.computed)(() => ({
+            objectFit: props.fit,
+        }));
+        // need reset hasLoadError to false if src changed
+        (0, signals_1.watch)(() => props.src, () => hasLoadError.set(false));
+        function handleError(e) {
+            console.warn('TdAvatar handleError. ');
+            hasLoadError.set(true);
+            emit('error', e);
         }
-        else {
-            this.style.addObj({
-                width: td_avatar_style_1.$avatarSize[size],
-                height: td_avatar_style_1.$avatarSize[size]
-            });
-            (_c = this.img) === null || _c === void 0 ? void 0 : _c.style.addObj({
-                width: td_avatar_style_1.$avatarSize[size],
-                height: td_avatar_style_1.$avatarSize[size]
-            });
-            if ((props === null || props === void 0 ? void 0 : props.slot) instanceof framework_1.TypeElement) {
-                props.slot.style.addObj({
-                    width: td_avatar_style_1.$avatarSize[size],
-                    height: td_avatar_style_1.$avatarSize[size]
-                });
-            }
+        this.attr.addClass(avatarClass);
+        this.style.addObj(sizeStyle);
+        if ((props.src || props.srcSet) && !hasLoadError.get()) {
+            this.addChild(new framework_1.Img({
+                vIf: (0, signals_1.computed)(() => (props.src || props.srcSet) && !hasLoadError.get()),
+                attrObj: {
+                    src: props.src,
+                    alt: props.alt,
+                    srcset: props.srcSet,
+                },
+                styleObj: fitStyle,
+                events: {
+                    error: handleError,
+                },
+            }));
         }
-    }
-    // todo 监听 src 改变
-    setSrc(src) {
-        var _a, _b;
-        if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.src) {
-            this.props.src = src;
+        else if (props.icon) {
+            this.addChild(new td_icon_class_1.TdIcon({
+                // vIf: computed(() => props.icon),
+                slot: props.icon,
+            }));
         }
-        if (((_b = this.props) === null || _b === void 0 ? void 0 : _b.src) !== src) {
-            this.hasLoadError = false;
+        else {
+            // 只加载，不动态清除；
+            this.slotChildren(props.slot);
         }
-    }
-    handleError(e) {
-        this.hasLoadError = true;
-        // emit('error', e)
+        (0, signals_1.watch)(() => hasLoadError.get(), (newVal) => {
+            if (newVal) {
+                if (props.slot instanceof framework_1.TypeElement) {
+                    this.slotChildren(props.slot); // todo 添加了，但是没有渲染
+                    props.slot.mount(this.dom); // todo 优化，如何才能替换
+                }
+            }
+        });
     }
 }
 exports.TdAvatar = TdAvatar;

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

@@ -0,0 +1,5 @@
+import { AvatarProps } from './td-avatar.interface';
+export declare const avatarProps: AvatarProps;
+export declare const avatarEmits: {
+    error: (evt: Event) => boolean;
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatarEmits = exports.avatarProps = void 0;
+exports.avatarProps = {
+    shape: 'circle',
+    src: '',
+    fit: 'cover',
+};
+exports.avatarEmits = {
+    error: (evt) => evt instanceof Event,
+};

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

@@ -1,16 +1,17 @@
 import { Globals } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { ISize } from '../../../styles/size';
+import { ITypeSpan, TypeSpanProps } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
-export interface ITdAvatar extends IUI {
+export interface ITdAvatar extends ITypeSpan {
     className: 'TdAvatar';
+    props: AvatarProps;
 }
-export interface ITdAvatarConfig extends IUIConfig {
+export interface AvatarProps extends TypeSpanProps {
     /**
      * @description avatar size.
      *     default: '',
      */
-    size?: number | ISize;
+    size?: number | ComponentSize;
     /**
      * @description avatar shape.
      *     default: 'circle',

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

@@ -1,3 +1,4 @@
+import { IStyle } from '@type-dom/css-type';
 export declare const $avatar: {
     textColor: string;
     bgColor: string;
@@ -10,4 +11,5 @@ export declare const $avatarSize: {
     default: string;
     small: string;
 };
+export declare const $avatarStyle: IStyle;
 export declare const $avatarSizeDefault: string;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$avatarSizeDefault = exports.$avatarSize = exports.$avatar = void 0;
+exports.$avatarSizeDefault = exports.$avatarStyle = exports.$avatarSize = exports.$avatar = void 0;
 const var_1 = require("../../../styles/var");
 exports.$avatar = {
     // 'text-color': getCssVar('color-white'),
@@ -10,11 +10,29 @@ exports.$avatar = {
     textSize: '14px',
     iconSize: '18px',
     // 'border-radius': getCssVar('border-radius-base'),
-    borderRadius: var_1.$borderRadius.base
+    borderRadius: var_1.$borderRadius.base,
 };
 exports.$avatarSize = {
     large: '56px',
     default: '40px',
-    small: '24px'
+    small: '24px',
+};
+exports.$avatarStyle = {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    textAlign: 'center',
+    overflow: 'hidden',
+    // color: getCssVar('avatar', 'text-color'),
+    color: exports.$avatar.textColor,
+    // background: getCssVar('avatar', 'bg-color'),
+    background: exports.$avatar.bgColor,
+    // width: getCssVar('avatar', 'size'),
+    width: exports.$avatarSize.default,
+    // height: getCssVar('avatar', 'size'),
+    height: exports.$avatarSize.default,
+    // font-size: getCssVar('avatar', 'text-size'),
+    fontSize: exports.$avatar.textSize,
 };
 exports.$avatarSizeDefault = exports.$avatarSize.default;

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
-import type { ITdBadge, ITdBadgeConfig } from './td-badge.interface';
-export declare class TdBadge extends UI implements ITdBadge {
+import { TypeDiv } from '@type-dom/framework';
+import { BadgeProps, ITdBadge } from './td-badge.interface';
+import './style/index';
+export declare class TdBadge extends TypeDiv implements ITdBadge {
     className: 'TdBadge';
-    props: ITdBadgeConfig;
-    private sup;
-    constructor(params?: ITdBadgeConfig);
+    props: BadgeProps;
+    constructor(params?: BadgeProps);
     setup(): void;
-    changeValue(value: number | string): void;
 }

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

@@ -1,108 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBadge = void 0;
+const signals_1 = require("@type-dom/signals");
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const var_1 = require("../../../styles/var");
-const td_badge_style_1 = require("./td-badge.style");
-class TdBadge extends ui_abstract_1.UI {
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_badge_const_1 = require("./td-badge.const");
+require("./style/index");
+class TdBadge extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a, _b, _c, _d;
-        super(params);
-        console.log('TdBadge constructor . ');
+        super();
+        // console.log('TdBadge constructor . ');
         this.className = 'TdBadge';
         this.attr.addName('td-badge');
-        this.style.addObj({
-            position: 'relative',
-            verticalAlign: 'middle',
-            display: 'inline-block',
-            width: 'fit-content'
-        });
-        // this.addChild(this.getSlotNode());
-        this.sup = new framework_1.Sup({
-            styleObj: {
-                // background-color: getCssVar('badge', 'bg-color'),
-                backgroundColor: (params === null || params === void 0 ? void 0 : params.color) ? params.color : td_badge_style_1.$badge.bgColor,
-                // border-radius: getCssVar('badge', 'radius'),
-                borderRadius: td_badge_style_1.$badge.radius,
-                // color: getCssVar('color', 'white'),
-                color: var_1.$colorWhite,
-                display: 'inline-flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                // font-size: getCssVar('badge', 'font-size'),
-                fontSize: td_badge_style_1.$badge.fontSize,
-                // height: getCssVar('badge', 'size'),
-                height: td_badge_style_1.$badge.size,
-                // padding: 0 getCssVar('badge', 'padding'),
-                padding: '0 ' + td_badge_style_1.$badge.padding,
-                whiteSpace: 'nowrap',
-                // border: 1px solid getCssVar('bg-color'),
-                border: '1px solid ' + var_1.$bgColor,
-                marginRight: (0, utils_1.addUnit)(-((_b = (_a = params === null || params === void 0 ? void 0 : params.offset) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 0)),
-                marginTop: (0, utils_1.addUnit)((_d = (_c = params === null || params === void 0 ? void 0 : params.offset) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0)
-            }
-        });
-        this.addChild(this.getSlotNode());
-        this.addChild(new framework_1.Transition({
-            name: 'td-badge',
-            parent: this,
-            slot: this.sup
-        }));
+        this.assignProps(td_badge_const_1.badgeProps);
         this.props = this.useParams(params);
     }
     setup() {
+        var _a, _b, _c;
         console.log('TdBadge setup');
         const props = this.props;
-        let content = (props === null || props === void 0 ? void 0 : props.isDot) ? '' : props === null || props === void 0 ? void 0 : props.value;
-        console.warn('TdBadge setup content is ', content);
-        this.sup.getTextNode().setText(content || '');
-        // this.sup.addChild(new TextNode(content))
-        if ((props === null || props === void 0 ? void 0 : props.max) &&
-            (props === null || props === void 0 ? void 0 : props.value) &&
-            (0, utils_1.isNumber)(props === null || props === void 0 ? void 0 : props.value) &&
-            (0, utils_1.isNumber)(props === null || props === void 0 ? void 0 : props.max)) {
-            if (props.max < props.value) {
-                content = props.max + '+';
-            }
-            else {
-                content = props.value === 0 && !props.showZero ? '' : props.value;
+        const ns = (0, use_namespace_1.useNamespace)('badge');
+        const content = (0, signals_1.computed)(() => {
+            if (props.isDot)
+                return '';
+            if ((0, utils_1.isNumber)((0, signals_1.unref)(props.value)) && (0, utils_1.isNumber)(props.max)) {
+                return props.max < Number((0, signals_1.unref)(props.value))
+                    ? `${props.max}+`
+                    : `${(0, signals_1.unref)(props.value)}`;
             }
-            this.sup.getTextNode().setText(content);
-        }
-        if (props === null || props === void 0 ? void 0 : props.slot) {
-            this.sup.style.addObj({
-                // 默认样式
-                position: 'absolute',
-                top: '0',
-                // right: calc(1px + #{getCssVar('badge', 'size')} / 2),
-                right: (props === null || props === void 0 ? void 0 : props.isDot) ? '5px' : 'calc(1px + ' + td_badge_style_1.$badge.size + ' / 2)',
-                transform: 'translateY(-50%) translateX(100%)',
-                // z-index: getCssVar('index', 'normal'),
-                zIndex: var_1.$zIndex.normal
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.isDot) {
-            this.sup.style.addObj({
-                height: 8,
-                width: 8,
-                padding: 0,
-                // right: '0',
-                borderRadius: '50%'
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.type) {
-            this.sup.style.addObj({
-                backgroundColor: var_1.$colors[props.type].base
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.dotStyle) {
-            this.sup.style.addObj(props.dotStyle);
-        }
-    }
-    changeValue(value) {
-        this.props.value = value;
+            return `${(0, signals_1.unref)(props.value)}`;
+        });
+        const style = (0, signals_1.computed)(() => {
+            var _a, _b, _c, _d, _e;
+            return Object.assign({ backgroundColor: props.color, marginRight: (0, utils_1.addUnit)(-((_b = (_a = props.offset) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 0)), marginTop: (0, utils_1.addUnit)((_d = (_c = props.offset) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0) }, ((_e = props.badgeStyle) !== null && _e !== void 0 ? _e : {}));
+        });
+        this.attr.addClass(ns.b());
+        this.slotChildren(props.slot);
+        this.addChild(new framework_1.Transition({
+            name: `${ns.namespace.get()}-zoom-in-center`,
+            slot: new framework_1.Sup({
+                vShow: (0, signals_1.computed)(() => {
+                    var _a;
+                    return !props.hidden &&
+                        (content.get() || props.isDot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.content));
+                }),
+                class: [
+                    ns.e('content'),
+                    ns.em('content', props.type),
+                    ns.is('fixed', !!(((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) || props.slot)),
+                    ns.is('dot', props.isDot),
+                    ns.is('hide-zero', !props.showZero && (0, signals_1.unref)(props.value) === 0),
+                    props.badgeClass,
+                ],
+                styleObj: style.get(),
+                slot: (_c = (_b = props.slots) === null || _b === void 0 ? void 0 : _b.content) !== null && _c !== void 0 ? _c : content,
+            }),
+        }));
     }
 }
 exports.TdBadge = TdBadge;

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

@@ -0,0 +1,2 @@
+import { BadgeProps } from './td-badge.interface';
+export declare const badgeProps: BadgeProps;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeProps = void 0;
+exports.badgeProps = {
+    value: '',
+    max: 99,
+    type: 'danger',
+    showZero: true,
+    offset: [0, 0],
+};