@type-dom/ui 0.0.3 → 0.0.5

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;
+}

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

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCard = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const transition_1 = require("../../../styles/transition");
+const var_1 = require("../../../styles/var");
+const td_card_style_1 = require("./td-card.style");
+class TdCard extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        this.className = 'TdCard';
+        this.ctrl.addAttrName('td-card');
+        this.ctrl.addStyleObj({
+            //   border-radius: getCssVar('card', 'border-radius'),
+            borderRadius: td_card_style_1.$card.borderRadius,
+            // border: 1px solid getCssVar('card', 'border-color'),
+            border: '1px solid ' + td_card_style_1.$card.borderColor,
+            // background-color: getCssVar('card', 'bg-color'),
+            backgroundColor: td_card_style_1.$card.bgColor,
+            overflow: 'hidden',
+            // color: getCssVar('text-color', 'primary'),
+            color: var_1.$textColor.primary,
+            // transition: getCssVar('transition-duration'),
+            transition: transition_1.$transitionDuration.default
+        });
+        this.addShadow(params);
+        this.addHeader(params);
+        this.body = new framework_1.Div({
+            styleObj: {
+                // padding: getCssVar('card', 'padding'),
+                padding: td_card_style_1.$card.padding
+            }
+        });
+        if (params === null || params === void 0 ? void 0 : params.bodyStyle) {
+            this.body.ctrl.addStyleObj(params.bodyStyle);
+        }
+        if (params === null || params === void 0 ? void 0 : params.bodyClass) {
+            this.body.ctrl.addAttrClass(params.bodyClass);
+        }
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.body.slotChild(params.slot);
+        }
+        this.addChild(this.body);
+        this.addFooter(params);
+        this.props = this.setParams(params);
+    }
+    addShadow(params) {
+        const shadow = (params === null || params === void 0 ? void 0 : params.shadow) || 'always';
+        if (shadow === 'always') {
+            this.ctrl.addStyleObj({
+                boxShadow: var_1.$boxShadow.light
+            });
+        }
+        else if (shadow === 'hover') {
+            //   todo :hover :focus boxShadow: $boxShadow.light
+            this.ctrl.addAttrClass('hover-shadow');
+            (0, framework_1.createClass)('hover-shadow:hover', {
+                boxShadow: var_1.$boxShadow.light
+            });
+            (0, framework_1.createClass)('hover-shadow:focus', {
+                boxShadow: var_1.$boxShadow.light
+            });
+        }
+    }
+    addHeader(params) {
+        var _a;
+        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.header) {
+            this.header = new framework_1.Div({
+                styleObj: td_card_style_1.$cardHeader,
+                childNodes: [params.slots.header]
+            });
+            this.addChild(this.header);
+        }
+        else if (params === null || params === void 0 ? void 0 : params.header) {
+            // 文本
+            this.header = new framework_1.Div({
+                text: params.header,
+                styleObj: td_card_style_1.$cardHeader
+            });
+            this.addChild(this.header);
+        }
+    }
+    addFooter(params) {
+        var _a;
+        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.footer) {
+            this.footer = new framework_1.Div({
+                styleObj: td_card_style_1.$cardFooter,
+                childNodes: [params.slots.footer]
+            });
+            this.addChild(this.footer);
+        }
+        else if (params === null || params === void 0 ? void 0 : params.footer) {
+            this.footer = new framework_1.Div({
+                text: params.footer,
+                styleObj: td_card_style_1.$cardFooter
+            });
+            this.addChild(this.footer);
+        }
+    }
+}
+exports.TdCard = TdCard;

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

@@ -0,0 +1,26 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { IStyle } from '@type-dom/css-type';
+export interface ITdCard extends IUI {
+    className: 'TdCard';
+}
+export interface ITdCardConfig extends IUIConfig {
+    /**
+     * @description title of the card. Also accepts a DOM passed by `slot#header`
+     *     default: '',
+     */
+    header?: string;
+    footer?: string;
+    /**
+     * @description CSS style of card body
+     */
+    bodyStyle?: IStyle;
+    /**
+     * @description custom class name of card body
+     */
+    bodyClass?: string;
+    /**
+     * @description when to show card shadows
+     *     default: 'always',
+     */
+    shadow?: 'always' | 'hover' | 'never';
+}

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

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

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

@@ -0,0 +1,9 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $card: {
+    borderColor: string;
+    borderRadius: string;
+    padding: string;
+    bgColor: string;
+};
+export declare const $cardHeader: IStyle;
+export declare const $cardFooter: IStyle;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$cardFooter = exports.$cardHeader = exports.$card = void 0;
+const var_1 = require("../../../styles/var");
+exports.$card = {
+    // 'border-color': getCssVar('border-color', 'light'),
+    borderColor: var_1.$borderColor.light,
+    borderRadius: '4px',
+    padding: '20px',
+    // 'bg-color': getCssVar('fill-color', 'blank'),
+    bgColor: var_1.$fillColor.blank
+};
+exports.$cardHeader = {
+    // padding: calc(#{getCssVar('card', 'padding')} - 2px) getCssVar('card', 'padding'),
+    padding: `calc(${exports.$card.padding} - 2px) ${exports.$card.padding}`,
+    // border-bottom: 1px solid getCssVar('card', 'border-color'),
+    borderBottom: '1px solid ' + exports.$card.borderColor,
+    // box-sizing: border-box,
+    boxSizing: 'border-box'
+};
+exports.$cardFooter = {
+    //     padding: calc(#{getCssVar('card', 'padding')} - 2px)
+    // getCssVar('card', 'padding'),
+    padding: `calc(${exports.$card.padding} - 2px) ${exports.$card.padding}`,
+    // border-top: 1px solid getCssVar('card', 'border-color'),
+    borderTop: '1px solid ' + exports.$card.borderColor,
+    // box-sizing: border-box,
+    boxSizing: 'border-box'
+};