@type-dom/ui 0.0.4 → 0.0.6

package/src/components/basic/td-space/td-space.interface.d.ts

@@ -12,6 +12,7 @@ export interface ITdSpaceConfig extends IUIConfig {
     direction?: 'horizontal' | 'vertical';
     /**
      * @description Controls the alignment of items	对齐方式
+     * 对应 align-items
      */
     alignment?: StyleAlignItems;
     /**

package/src/components/basic/td-text/td-text.class.d.ts

@@ -3,8 +3,8 @@ import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdText, ITdTextConfig } from './td-text.interface';
 export declare class TdText extends UI implements ITdText {
     className: 'TdText';
-    config?: ITdTextConfig;
+    props: ITdTextConfig;
     icon?: TdIcon;
-    constructor(config?: ITdTextConfig);
-    setConfig(config?: Partial<ITdTextConfig>): void;
+    constructor(params?: ITdTextConfig);
+    setup(): void;
 }

package/src/components/basic/td-text/td-text.class.js

@@ -4,41 +4,44 @@ exports.TdText = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_text_style_1 = require("./td-text.style");
 class TdText extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: (config === null || config === void 0 ? void 0 : config.tag) || 'span' });
+    constructor(params) {
+        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'span');
         this.className = 'TdText';
-        this.addStyleObj(td_text_style_1.$baseText);
-        this.setConfig(config);
+        this.ctrl.addStyleObj(td_text_style_1.$baseText);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.type) {
-            this.addStyleObj(td_text_style_1.$textStateColors[config.type].default);
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.type) {
+            this.ctrl.addStyleObj(td_text_style_1.$textStateColors[props.type].default);
         }
         else {
-            this.addStyleObj(td_text_style_1.$textStateColors.default.default);
+            this.ctrl.addStyleObj(td_text_style_1.$textStateColors.default.default);
         }
-        if (config === null || config === void 0 ? void 0 : config.size) {
-            this.addStyleObj(td_text_style_1.sizeOpts[config === null || config === void 0 ? void 0 : config.size]);
+        if (props === null || props === void 0 ? void 0 : props.size) {
+            this.ctrl.addStyleObj(td_text_style_1.sizeOpts[props === null || props === void 0 ? void 0 : props.size]);
         }
         else {
-            this.addStyleObj(td_text_style_1.sizeOpts.default);
+            this.ctrl.addStyleObj(td_text_style_1.sizeOpts.default);
         }
-        if ((config === null || config === void 0 ? void 0 : config.truncated) && (config === null || config === void 0 ? void 0 : config.width)) {
-            this.addStyleObj({
+        if ((props === null || props === void 0 ? void 0 : props.truncated) && (props === null || props === void 0 ? void 0 : props.width)) {
+            this.ctrl.addStyleObj({
                 display: 'inline-block',
                 maxWidth: '100%',
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
-                width: config === null || config === void 0 ? void 0 : config.width
+                width: props === null || props === void 0 ? void 0 : props.width
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.lineClamp) {
-            this.addStyleObj({
-                '-webkit-line-clamp': config === null || config === void 0 ? void 0 : config.lineClamp,
+        if (props === null || props === void 0 ? void 0 : props.lineClamp) {
+            this.ctrl.addStyleObj({
+                // '-webkit-line-clamp': props?.lineClamp,
+                WebkitLineClamp: props === null || props === void 0 ? void 0 : props.lineClamp,
                 display: '-webkit-inline-box',
-                '-webkit-box-orient': 'vertical',
+                // '-webkit-box-orient': 'vertical',
+                WebkitBoxOrient: 'vertical',
                 overflow: 'hidden'
             });
         }

package/src/components/basic/td-text/td-text.interface.d.ts

@@ -1,10 +1,12 @@
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { IType } from '../../../styles';
+import { ISize } from '../../../styles/size';
 export interface ITdText extends IUI {
     className: 'TdText';
 }
 export interface ITdTextConfig extends IUIConfig {
-    type?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | '';
-    size?: '' | 'default' | 'small' | 'large';
+    type?: IType;
+    size?: ISize;
     /**
      * @description render ellipsis
      */

package/src/components/basic/td-text/td-text.style.d.ts

@@ -1,4 +1,4 @@
-import { IStyle } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
 import { IType } from '../../../styles/var';
 export declare const $baseText: Partial<IStyle>;
 export declare const sizeOpts: Record<string, Partial<IStyle>>;

package/src/components/basic/td-text/td-text.style.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonVariant = exports.$textStateColors = exports.sizeOpts = exports.$baseText = void 0;
+exports.$textStateColors = exports.sizeOpts = exports.$baseText = void 0;
+exports.buttonVariant = buttonVariant;
 const var_1 = require("../../../styles/var");
 exports.$baseText = {
     alignSelf: 'center',
@@ -36,7 +37,9 @@ function buttonVariant($type) {
             color: var_1.$colors[$type].base
         },
         hover: {
-            color: $type === 'default' ? var_1.$colors['primary'].base : var_1.$colors[$type]['light-3'] // ['color', $type, 'light-3'],
+            color: $type === 'default'
+                ? var_1.$colors['primary'].base
+                : var_1.$colors[$type]['light-3'] // ['color', $type, 'light-3'],
             // content: '',
             // position: 'absolute',
             // left: 0,
@@ -53,7 +56,13 @@ function buttonVariant($type) {
         }
     };
 }
-exports.buttonVariant = buttonVariant;
-for (const $type of ['primary', 'success', 'warning', 'info', 'danger', 'default']) {
+for (const $type of [
+    'primary',
+    'success',
+    'warning',
+    'info',
+    'danger',
+    'default'
+]) {
     buttonVariant($type);
 }

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

@@ -0,0 +1,30 @@
+export { TdAvatar } from './td-avatar/td-avatar.class';
+export type { ITdAvatar, ITdAvatarConfig } 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 { TdCard } from './td-card/td-card.class';
+export type { ITdCard, ITdCardConfig } 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 { TdCollapseItem } from './td-collapse-item/td-collapse-item.class';
+export type { ITdCollapseItem, ITdCollapseItemConfig } 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 { 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 { TdImage } from './td-image/td-image.class';
+export type { ITdImage, ITdImageConfig } 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 { TdCountDown } from './td-count-down/td-count-down.class';
+export type { ITdCountDown, ITdCountDownConfig } from './td-count-down/td-count-down.interface';
+export { TdResult } from './td-result/td-result.class';
+export type { ITdResult, ITdResultConfig } 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 * 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 { TdCheckTag } from './td-check-tag/td-check-tag.class';
+export type { ITdCheckTag, ITdCheckTagConfig } from './td-check-tag/td-check-tag.interface';

package/src/components/data/index.js

@@ -1 +1,35 @@
 "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;
+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; } });
+var td_badge_class_1 = require("./td-badge/td-badge.class");
+Object.defineProperty(exports, "TdBadge", { enumerable: true, get: function () { return td_badge_class_1.TdBadge; } });
+var td_card_class_1 = require("./td-card/td-card.class");
+Object.defineProperty(exports, "TdCard", { enumerable: true, get: function () { return td_card_class_1.TdCard; } });
+var td_collapse_class_1 = require("./td-collapse/td-collapse.class");
+Object.defineProperty(exports, "TdCollapse", { enumerable: true, get: function () { return td_collapse_class_1.TdCollapse; } });
+var td_collapse_item_class_1 = require("./td-collapse-item/td-collapse-item.class");
+Object.defineProperty(exports, "TdCollapseItem", { enumerable: true, get: function () { return td_collapse_item_class_1.TdCollapseItem; } });
+var td_descriptions_class_1 = require("./td-descriptions/td-descriptions.class");
+Object.defineProperty(exports, "TdDescriptions", { enumerable: true, get: function () { return td_descriptions_class_1.TdDescriptions; } });
+var td_descriptions_item_class_1 = require("./td-descriptions-item/td-descriptions-item.class");
+Object.defineProperty(exports, "TdDescriptionsItem", { enumerable: true, get: function () { return td_descriptions_item_class_1.TdDescriptionsItem; } });
+var td_empty_class_1 = require("./td-empty/td-empty.class");
+Object.defineProperty(exports, "TdEmpty", { enumerable: true, get: function () { return td_empty_class_1.TdEmpty; } });
+var td_image_class_1 = require("./td-image/td-image.class");
+Object.defineProperty(exports, "TdImage", { enumerable: true, get: function () { return td_image_class_1.TdImage; } });
+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_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");
+Object.defineProperty(exports, "TdSegmented", { enumerable: true, get: function () { return td_segmented_class_1.TdSegmented; } });
+tslib_1.__exportStar(require("./td-segmented/td-segmented.style"), exports);
+var td_tag_class_1 = require("./td-tag/td-tag.class");
+Object.defineProperty(exports, "TdTag", { enumerable: true, get: function () { return td_tag_class_1.TdTag; } });
+var td_check_tag_class_1 = require("./td-check-tag/td-check-tag.class");
+Object.defineProperty(exports, "TdCheckTag", { enumerable: true, get: function () { return td_check_tag_class_1.TdCheckTag; } });

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

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

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

@@ -0,0 +1,120 @@
+"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 utils_1 = require("@type-dom/utils");
+class TdAvatar extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'span');
+        this.className = 'TdAvatar';
+        this.ctrl.addAttrName('td-avatar');
+        this.ctrl.addStyleObj({
+            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.props = this.setParams(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.ctrl.addStyleObj({
+                fontSize: td_avatar_style_1.$avatar.iconSize
+            });
+        }
+        else {
+            if (props === null || props === void 0 ? void 0 : props.slot) {
+                this.slotChild(props.slot);
+            }
+        }
+        const fit = (props === null || props === void 0 ? void 0 : props.fit) || 'cover';
+        (_a = this.img) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+            objectFit: fit
+        });
+        const shape = (props === null || props === void 0 ? void 0 : props.shape) || 'circle';
+        this.ctrl.addStyleObj({
+            borderRadius: shape === 'circle' ? '50%' : td_avatar_style_1.$avatar.borderRadius
+        });
+        const size = (props === null || props === void 0 ? void 0 : props.size) || 'default';
+        if ((0, utils_1.isNumber)(size)) {
+            this.ctrl.addStyleObj({
+                width: (0, utils_1.addUnit)(size),
+                height: (0, utils_1.addUnit)(size)
+            });
+            (_b = this.img) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+                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.ctrl.addStyleObj({
+                    width: (0, utils_1.addUnit)(size),
+                    height: (0, utils_1.addUnit)(size)
+                });
+            }
+        }
+        else {
+            this.ctrl.addStyleObj({
+                width: td_avatar_style_1.$avatarSize[size],
+                height: td_avatar_style_1.$avatarSize[size]
+            });
+            (_c = this.img) === null || _c === void 0 ? void 0 : _c.ctrl.addStyleObj({
+                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.ctrl.addStyleObj({
+                    width: td_avatar_style_1.$avatarSize[size],
+                    height: td_avatar_style_1.$avatarSize[size]
+                });
+            }
+        }
+        // super.setParams(config);
+    }
+    // todo 监听 src 改变
+    setSrc(src) {
+        var _a, _b;
+        if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.src) {
+            this.props.src = src;
+        }
+        if (((_b = this.props) === null || _b === void 0 ? void 0 : _b.src) !== src) {
+            this.hasLoadError = false;
+        }
+    }
+    handleError(e) {
+        this.hasLoadError = true;
+        // emit('error', e)
+    }
+}
+exports.TdAvatar = TdAvatar;

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

@@ -0,0 +1,41 @@
+import { Globals } from '@type-dom/css-type';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ISize } from '../../../styles/size';
+import { TdIcon } from '../../basic/td-icon/td-icon.class';
+export interface ITdAvatar extends IUI {
+    className: 'TdAvatar';
+}
+export interface ITdAvatarConfig extends IUIConfig {
+    /**
+     * @description avatar size.
+     *     default: '',
+     */
+    size?: number | ISize;
+    /**
+     * @description avatar shape.
+     *     default: 'circle',
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * @description representation type to icon, more info on icon component.
+     */
+    icon?: TdIcon;
+    /**
+     * @description the source of the image for an image avatar.
+     *     default: '',
+     */
+    src?: string;
+    /**
+     * @description native attribute `alt` of image avatar.
+     */
+    alt?: string;
+    /**
+     * @description native attribute srcset of image avatar.
+     */
+    srcSet?: string;
+    /**
+     * @description set how the image fit its container for an image avatar.
+     *     default: 'cover',
+     */
+    fit?: Globals | 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}

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

@@ -0,0 +1,13 @@
+export declare const $avatar: {
+    textColor: string;
+    bgColor: string;
+    textSize: string;
+    iconSize: string;
+    borderRadius: string;
+};
+export declare const $avatarSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $avatarSizeDefault: string;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$avatarSizeDefault = exports.$avatarSize = exports.$avatar = void 0;
+const var_1 = require("../../../styles/var");
+exports.$avatar = {
+    // 'text-color': getCssVar('color-white'),
+    textColor: var_1.$colorWhite,
+    // 'bg-color': getCssVar('text-color', 'disabled'),
+    bgColor: var_1.$textColor.disabled,
+    textSize: '14px',
+    iconSize: '18px',
+    // 'border-radius': getCssVar('border-radius-base'),
+    borderRadius: var_1.$borderRadius.base
+};
+exports.$avatarSize = {
+    large: '56px',
+    default: '40px',
+    small: '24px'
+};
+exports.$avatarSizeDefault = exports.$avatarSize.default;

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

@@ -0,0 +1,9 @@
+import { UI } from '../../../ui/ui.abstract';
+import type { ITdBadge, ITdBadgeConfig } from './td-badge.interface';
+export declare class TdBadge extends UI implements ITdBadge {
+    className: 'TdBadge';
+    props: ITdBadgeConfig;
+    private sup;
+    constructor(params?: ITdBadgeConfig);
+    setup(): void;
+}

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdBadge = void 0;
+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 {
+    constructor(params) {
+        var _a, _b, _c, _d;
+        super(params);
+        console.log('TdBadge constructor . ');
+        this.className = 'TdBadge';
+        this.ctrl.addAttrName('td-badge');
+        this.ctrl.addStyleObj({
+            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(new framework_1.Transition({
+            name: 'td-badge',
+            parent: this,
+            slot: this.sup
+        }));
+        this.props = this.setParams(params);
+    }
+    setup() {
+        var _a;
+        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.addChild(new framework_1.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;
+            }
+            (_a = this.sup.textNode) === null || _a === void 0 ? void 0 : _a.setText(content);
+        }
+        if (props === null || props === void 0 ? void 0 : props.slot) {
+            this.sup.ctrl.addStyleObj({
+                // 默认样式
+                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.ctrl.addStyleObj({
+                height: 8,
+                width: 8,
+                padding: 0,
+                // right: '0',
+                borderRadius: '50%'
+            });
+        }
+        if (props === null || props === void 0 ? void 0 : props.type) {
+            this.sup.ctrl.addStyleObj({
+                backgroundColor: var_1.$colors[props.type].base
+            });
+        }
+        if (props === null || props === void 0 ? void 0 : props.dotStyle) {
+            this.sup.ctrl.addStyleObj(props.dotStyle);
+        }
+    }
+}
+exports.TdBadge = TdBadge;

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

@@ -0,0 +1,52 @@
+import type { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { IStyle } from '@type-dom/css-type';
+export interface ITdBadge extends IUI {
+    className: 'TdBadge';
+}
+export interface ITdBadgeConfig extends IUIConfig {
+    /**
+     * @description display value.
+     *     default: '',
+     */
+    value?: string | number;
+    /**
+     * @description maximum value, shows `{max}+` when exceeded. Only works if value is a number.
+     *     default: 99,
+     */
+    max?: number;
+    /**
+     * @description if a little dot is displayed.
+     */
+    isDot?: boolean;
+    /**
+     * @description hidden badge.
+     */
+    hidden?: boolean;
+    /**
+     * @description badge type.
+     *     default: 'danger',
+     */
+    type?: 'primary' | 'success' | 'warning' | 'info' | 'danger';
+    /**
+     * @description whether to show badge when value is zero.
+     *     default: true,
+     */
+    showZero?: boolean;
+    /**
+     * @description customize dot background color
+     */
+    color?: string;
+    /**
+     * @description CSS style of dot
+     */
+    dotStyle?: IStyle;
+    /**
+     * @description set offset of the badge dot
+     *     default: [0, 0],
+     */
+    offset?: [number, number];
+    /**
+     * @description custom class name of badge dot
+     */
+    dotClass?: string;
+}

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

@@ -0,0 +1,7 @@
+export declare const $badge: {
+    bgColor: string;
+    radius: string;
+    fontSize: string;
+    padding: string;
+    size: string;
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$badge = void 0;
+const var_1 = require("../../../styles/var");
+exports.$badge = {
+    // 'bg-color': getCssVar('color-danger'),
+    bgColor: var_1.$colorDanger,
+    radius: '10px',
+    fontSize: '12px',
+    padding: '6px',
+    size: '18px'
+};

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

@@ -0,0 +1,14 @@
+import { Div } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdCard, ITdCardConfig } from './td-card.interface';
+export declare class TdCard extends UI implements ITdCard {
+    className: 'TdCard';
+    props: ITdCardConfig;
+    body: Div;
+    header?: Div;
+    footer?: Div;
+    constructor(params?: ITdCardConfig);
+    addShadow(params?: ITdCardConfig): void;
+    addHeader(params?: ITdCardConfig): void;
+    addFooter(params?: ITdCardConfig): void;
+}