@type-dom/ui 0.0.4 → 0.0.5

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

@@ -0,0 +1,18 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ISize } from '../../../styles/size';
+import { TdDescriptionsItem } from '../td-descriptions-item/td-descriptions-item.class';
+import { ITdDescriptions, ITdDescriptionsConfig } from './td-descriptions.interface';
+export declare class TdDescriptions extends UI implements ITdDescriptions {
+    className: 'TdDescriptions';
+    private header?;
+    private body?;
+    private rows?;
+    private headerTitle?;
+    private bodyTable?;
+    props: ITdDescriptionsConfig;
+    constructor(params: ITdDescriptionsConfig);
+    created(): void;
+    filledNode(node: TdDescriptionsItem, span: number, count: number, isLast?: boolean): TdDescriptionsItem;
+    getRows(): TdDescriptionsItem[][];
+    setSize(size: ISize): void;
+}

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

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDescriptions = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_descriptions_item_class_1 = require("../td-descriptions-item/td-descriptions-item.class");
+const td_descriptions_row_1 = require("./td-descriptions-row");
+const td_descriptions_style_1 = require("./td-descriptions.style");
+class TdDescriptions extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        this.className = 'TdDescriptions';
+        this.props = this.setParams(params);
+    }
+    created() {
+        var _a, _b, _c, _d;
+        const props = this.props;
+        (0, td_descriptions_style_1.useSize)(props);
+        (0, td_descriptions_style_1.useBordered)(props);
+        if ((props === null || props === void 0 ? void 0 : props.title) ||
+            (props === null || props === void 0 ? void 0 : props.extra) ||
+            ((_a = props === null || props === void 0 ? void 0 : props.slots) === null || _a === void 0 ? void 0 : _a.title) ||
+            ((_b = props === null || props === void 0 ? void 0 : props.slots) === null || _b === void 0 ? void 0 : _b.extra)) {
+            this.header = new framework_1.Div({
+                name: 'header',
+                styleObj: td_descriptions_style_1.$descriptionsHeaderStyle,
+            });
+            this.addChild(this.header);
+            this.headerTitle = new framework_1.Div({
+                name: 'title',
+                styleObj: td_descriptions_style_1.$descriptionsHeaderTitleStyle,
+            });
+            if ((_c = props === null || props === void 0 ? void 0 : props.slots) === null || _c === void 0 ? void 0 : _c.title) {
+                this.headerTitle = new framework_1.Div({
+                    name: 'title',
+                    styleObj: td_descriptions_style_1.$descriptionsHeaderTitleStyle,
+                    childNodes: [props.slots.title],
+                });
+            }
+            else {
+                this.headerTitle = new framework_1.Div({
+                    name: 'title',
+                    text: props.title,
+                    styleObj: td_descriptions_style_1.$descriptionsHeaderTitleStyle,
+                });
+            }
+            this.header.addChild(this.headerTitle);
+            if ((_d = props === null || props === void 0 ? void 0 : props.slots) === null || _d === void 0 ? void 0 : _d.extra) {
+                this.header.addChild(new framework_1.Div({
+                    name: 'extra',
+                    childNodes: [props.slots.extra],
+                }));
+            }
+            else {
+                this.header.addChild(new framework_1.Div({
+                    name: 'extra',
+                    text: props.extra,
+                }));
+            }
+        }
+        if (!(props === null || props === void 0 ? void 0 : props.slot)) {
+            throw Error('slot is required . ');
+        }
+        const items = this.getRows();
+        console.log('items is ', items);
+        const rows = [];
+        for (const item of items) {
+            rows.push(new td_descriptions_row_1.TdDescriptionsRow({ row: item }));
+        }
+        console.log('rows is ', rows);
+        this.rows = rows;
+        this.body = new framework_1.Div({
+            name: 'body',
+            styleObj: td_descriptions_style_1.$descriptionsBodyStyle,
+        });
+        this.bodyTable = new framework_1.Table({
+            name: 'table',
+            styleObj: td_descriptions_style_1.$descriptionsBodyTableStyle,
+            childNodes: [
+                new framework_1.TableBody({
+                    name: 'table-body',
+                    childNodes: rows,
+                }),
+            ],
+        });
+        this.body.addChild(this.bodyTable);
+        this.addChild(this.body);
+        this.setParams(props); // todo ????
+    }
+    filledNode(node, span, count, isLast = false) {
+        if (!node.props) {
+            node.props = {};
+        }
+        if (span > count) {
+            node.props.span = count;
+        }
+        if (isLast) {
+            // set the last span
+            node.props.span = span;
+        }
+        return node;
+    }
+    getRows() {
+        const props = this.props;
+        const children = props.slot.filter((item) => item instanceof td_descriptions_item_class_1.TdDescriptionsItem);
+        const rows = [];
+        let temp = [];
+        let count = props.column || 3;
+        let totalSpan = 0; // all spans number of item
+        children.forEach((child, index) => {
+            const span = child.props.span || 1;
+            if (index < children.length - 1) {
+                totalSpan += span > count ? count : span;
+            }
+            if (index === children.length - 1) {
+                // calculate the last item span
+                const lastSpan = (props.column || 3) - (totalSpan % (props.column || 3));
+                // const lastSpan = count - (totalSpan % count)
+                temp.push(this.filledNode(child, lastSpan, count, true));
+                rows.push(temp);
+                return;
+            }
+            if (span < count) {
+                count -= span;
+                temp.push(child);
+            }
+            else {
+                temp.push(this.filledNode(child, span, count));
+                rows.push(temp);
+                count = props.column || 3;
+                temp = [];
+            }
+        });
+        console.log('rows is ', rows);
+        return rows;
+    }
+    setSize(size) {
+        var _a, _b, _c, _d, _e;
+        this.props.size = size;
+        (0, td_descriptions_style_1.useSize)(this.props);
+        (0, td_descriptions_style_1.useBordered)(this.props);
+        this.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsStyle);
+        (_a = this.header) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsHeaderStyle);
+        (_b = this.headerTitle) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsHeaderTitleStyle);
+        (_c = this.body) === null || _c === void 0 ? void 0 : _c.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsBodyStyle);
+        (_d = this.bodyTable) === null || _d === void 0 ? void 0 : _d.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsBodyTableStyle);
+        (_e = this.rows) === null || _e === void 0 ? void 0 : _e.forEach((row) => {
+            row.childNodes.forEach((tr) => {
+                tr.childNodes.forEach((td) => {
+                    td.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsBodyTableCellStyle);
+                });
+            });
+        });
+    }
+}
+exports.TdDescriptions = TdDescriptions;

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

@@ -0,0 +1,43 @@
+import { TypeElement } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ISize } from '../../../styles/size';
+import { TdDescriptionsItem } from '../td-descriptions-item/td-descriptions-item.class';
+export interface ITdDescriptions extends IUI {
+    className: 'TdDescriptions';
+}
+export interface ITdDescriptionsConfig extends IUIConfig {
+    /**
+     * @description with or without border
+     *     default: false,
+     */
+    border?: boolean;
+    /**
+     * @description numbers of `Descriptions Item` in one line
+     *     default: 3,
+     */
+    column?: number;
+    /**
+     * @description direction of list
+     *     default: 'horizontal',
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @description size of list
+     */
+    size?: ISize;
+    /**
+     * @description title text, display on the top left
+     *     default: '',
+     */
+    title?: string;
+    /**
+     * @description extra text, display on the top right
+     *     default: '',
+     */
+    extra?: string;
+    slots?: {
+        title?: TypeElement;
+        extra?: TypeElement;
+    };
+    slot: TdDescriptionsItem[];
+}

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

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

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

@@ -0,0 +1,51 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdDescriptionsConfig } from './td-descriptions.interface';
+export declare const $descriptionsHeaderMarginBottom: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $descriptionsTitleFontSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $descriptionsCellPaddingBottom: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $descriptionsBorderedCellPadding: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $descriptionsCellFontSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $descriptions: {
+    tableBorder: string;
+    itemBorderedLabelBackground: string;
+};
+export declare const $descriptionsStyle: IStyle;
+export declare const $descriptionsHeaderStyle: IStyle;
+export declare const $descriptionsHeaderTitleStyle: IStyle;
+export declare const $descriptionsBodyStyle: IStyle;
+export declare const $descriptionsBodyTableStyle: IStyle;
+export declare const $descriptionsBodyTableCellStyle: IStyle;
+export declare const $descriptionsItemLabelMarginRight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare function useSize(config?: ITdDescriptionsConfig): void;
+export declare const $descriptionsItemVerticalLabelPaddingBottom: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare let $descriptionsCellLabelStyle: IStyle;
+export declare const $descriptionsCellContentStyle: IStyle;
+export declare function useBordered(config: ITdDescriptionsConfig): void;

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

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBordered = exports.$descriptionsCellContentStyle = exports.$descriptionsCellLabelStyle = exports.$descriptionsItemVerticalLabelPaddingBottom = exports.useSize = exports.$descriptionsItemLabelMarginRight = exports.$descriptionsBodyTableCellStyle = exports.$descriptionsBodyTableStyle = exports.$descriptionsBodyStyle = exports.$descriptionsHeaderTitleStyle = exports.$descriptionsHeaderStyle = exports.$descriptionsStyle = exports.$descriptions = exports.$descriptionsCellFontSize = exports.$descriptionsBorderedCellPadding = exports.$descriptionsCellPaddingBottom = exports.$descriptionsTitleFontSize = exports.$descriptionsHeaderMarginBottom = void 0;
+const var_1 = require("../../../styles/var");
+const td_input_style_1 = require("../../form/td-input/td-input.style");
+exports.$descriptionsHeaderMarginBottom = {
+    large: '20px',
+    default: '16px',
+    small: '12px'
+};
+exports.$descriptionsTitleFontSize = {
+    large: '16px',
+    default: '16px',
+    small: '14px'
+};
+exports.$descriptionsCellPaddingBottom = {
+    large: '16px',
+    default: '12px',
+    small: '8px'
+};
+exports.$descriptionsBorderedCellPadding = {
+    large: '12px 15px',
+    default: '8px 11px',
+    small: '4px 7px'
+};
+exports.$descriptionsCellFontSize = {
+    large: '14px',
+    default: '14px',
+    small: '12px'
+};
+// Descriptions
+// css3 var in packages/theme-chalk/src/descriptions.scss
+exports.$descriptions = {
+    // tableBorder: 1px solid getCssVar('border-color-lighter'),
+    tableBorder: '1px solid ' + var_1.$borderColor.lighter,
+    // itemBorderedLabelBackground: getCssVar('fill-color', 'light'),
+    itemBorderedLabelBackground: var_1.$fillColor.light
+};
+exports.$descriptionsStyle = {
+    boxSizing: 'border-box',
+    // fontSize: getCssVar('font-size', 'base'),
+    fontSize: var_1.$fontSizes.base,
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary
+};
+exports.$descriptionsHeaderStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    // margin-bottom: map.get($descriptions-header-margin-bottom, 'default'),
+    marginBottom: exports.$descriptionsHeaderMarginBottom.default
+};
+exports.$descriptionsHeaderTitleStyle = {
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary,
+    // font-size: map.get($descriptions-title-font-size, 'default'),
+    fontSize: exports.$descriptionsTitleFontSize.default,
+    fontWeight: 'bold'
+};
+exports.$descriptionsBodyStyle = {
+    // background-color: getCssVar('fill-color', 'blank')
+    backgroundColor: var_1.$fillColor.blank
+};
+exports.$descriptionsBodyTableStyle = {
+    borderCollapse: 'collapse',
+    width: '100%'
+};
+exports.$descriptionsBodyTableCellStyle = {
+    // display: 'inline-flex', // add by me
+    boxSizing: 'border-box',
+    textAlign: 'left',
+    fontWeight: 'normal',
+    lineHeight: '23px',
+    // font-size: map.get($descriptions-cell-font-size, 'default'),
+    fontSize: exports.$descriptionsCellFontSize.default
+};
+exports.$descriptionsItemLabelMarginRight = {
+    large: '16px',
+    default: '16px',
+    small: '12px'
+};
+function useSize(config) {
+    const size = (config === null || config === void 0 ? void 0 : config.size) || 'default';
+    // if (size !== 'default') {
+    exports.$descriptionsStyle.fontSize = td_input_style_1.$inputFontSize[size];
+    exports.$descriptionsHeaderStyle.marginBottom = exports.$descriptionsHeaderMarginBottom[size];
+    exports.$descriptionsHeaderTitleStyle.fontSize = exports.$descriptionsTitleFontSize[size];
+    exports.$descriptionsBodyTableStyle.fontSize = exports.$descriptionsCellFontSize[size];
+    exports.$descriptionsBodyTableCellStyle.fontSize = exports.$descriptionsCellFontSize[size];
+    if (config === null || config === void 0 ? void 0 : config.border) {
+        exports.$descriptionsBodyTableCellStyle.padding =
+            exports.$descriptionsBorderedCellPadding[size];
+    }
+    else {
+        exports.$descriptionsBodyTableCellStyle.paddingBottom =
+            exports.$descriptionsCellPaddingBottom[size];
+        exports.$descriptionsCellLabelStyle.marginRight =
+            exports.$descriptionsItemLabelMarginRight[size];
+        exports.$descriptionsCellLabelStyle.paddingBottom =
+            exports.$descriptionsItemVerticalLabelPaddingBottom[size];
+    }
+    // }
+}
+exports.useSize = useSize;
+exports.$descriptionsItemVerticalLabelPaddingBottom = {
+    large: '8px',
+    default: '6px',
+    small: '4px'
+};
+exports.$descriptionsCellLabelStyle = {};
+exports.$descriptionsCellContentStyle = {
+    color: var_1.$textColor.regular
+};
+function useBordered(config) {
+    const bordered = config === null || config === void 0 ? void 0 : config.border;
+    if (bordered) {
+        exports.$descriptionsCellLabelStyle = {
+            fontWeight: 'bold',
+            color: var_1.$textColor.regular,
+            backgroundColor: exports.$descriptions.itemBorderedLabelBackground
+        };
+        exports.$descriptionsBodyTableCellStyle.border = exports.$descriptions.tableBorder;
+        exports.$descriptionsBodyTableCellStyle.padding =
+            exports.$descriptionsBorderedCellPadding.default;
+        exports.$descriptionsCellContentStyle.color = var_1.$textColor.primary;
+    }
+    else {
+        exports.$descriptionsBodyTableCellStyle.border = undefined;
+        exports.$descriptionsBodyTableCellStyle.padding = undefined;
+        exports.$descriptionsBodyTableCellStyle.paddingBottom =
+            exports.$descriptionsCellPaddingBottom.default;
+        exports.$descriptionsCellLabelStyle = {
+            color: var_1.$textColor.primary,
+            marginRight: exports.$descriptionsItemLabelMarginRight.default
+        };
+        if (config.direction === 'vertical') {
+            exports.$descriptionsCellLabelStyle.paddingBottom =
+                exports.$descriptionsItemVerticalLabelPaddingBottom.default;
+        }
+    }
+}
+exports.useBordered = useBordered;

package/src/components/data/td-descriptions/td-descritions-cell.d.ts

@@ -0,0 +1,15 @@
+import { UI } from '../../../ui/ui.abstract';
+import { IUIConfig } from '../../../ui/ui.interface';
+import { ITdDescriptionsItemConfig } from '../td-descriptions-item/td-descriptions-item.interface';
+export interface ITdDescriptionsCellConfig extends IUIConfig {
+    cell?: ITdDescriptionsItemConfig;
+    tag?: string;
+    type?: string;
+    span?: number;
+}
+export declare class TdDescriptionsCell extends UI {
+    className: 'TdDescriptionsCell';
+    props: ITdDescriptionsCellConfig;
+    constructor(params?: ITdDescriptionsCellConfig);
+    created(): void;
+}

package/src/components/data/td-descriptions/td-descritions-cell.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDescriptionsCell = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_descriptions_style_1 = require("./td-descriptions.style");
+class TdDescriptionsCell extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'td');
+        this.className = 'TdDescriptionsCell';
+        this.props = this.setParams(params);
+    }
+    created() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        const descriptions = this.up('TdDescriptions');
+        // console.log('descriptions is ', descriptions);
+        if (!descriptions) {
+            throw Error('TdDescriptionsRow need TdDescriptions as parent. ');
+        }
+        const descriptionsConfig = descriptions.props;
+        const isVertical = (descriptionsConfig === null || descriptionsConfig === void 0 ? void 0 : descriptionsConfig.direction) === 'vertical';
+        // useSize(descriptionsConfig);
+        // useBordered(descriptionsConfig);
+        this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsBodyTableCellStyle);
+        const props = this.props;
+        const span = ((_a = props.cell) === null || _a === void 0 ? void 0 : _a.span) || 1;
+        // console.log('span is ', span);
+        switch (props.type) {
+            case 'label':
+                console.log('label . ');
+                this.ctrl.addAttrObj({
+                    colspan: isVertical ? span : 1,
+                    // colspan: span * 2 - 1 || 1
+                });
+                this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsCellLabelStyle);
+                if ((_c = (_b = props.cell) === null || _b === void 0 ? void 0 : _b.slots) === null || _c === void 0 ? void 0 : _c.label) {
+                    this.addChild(props === null || props === void 0 ? void 0 : props.cell.slots.label);
+                }
+                else if ((_d = props.cell) === null || _d === void 0 ? void 0 : _d.label) {
+                    this.addChild(new framework_1.TextNode(props.cell.label));
+                    if (props.cell.labelStyle) {
+                        this.ctrl.addStyleObj((_e = props.cell) === null || _e === void 0 ? void 0 : _e.labelStyle);
+                    }
+                }
+                if ((_f = props.cell) === null || _f === void 0 ? void 0 : _f.labelAlign) {
+                    this.ctrl.addStyleObj({
+                        textAlign: props.cell.labelAlign
+                    });
+                }
+                if ((_g = props.cell) === null || _g === void 0 ? void 0 : _g.width) {
+                    this.ctrl.addStyleObj({
+                        width: props.cell.width
+                    });
+                }
+                break;
+            case 'content':
+                // debugger;
+                console.log('content . ');
+                this.ctrl.addAttrObj({
+                    colspan: span * 2 - 1 || 1
+                });
+                this.ctrl.addStyleObj(td_descriptions_style_1.$descriptionsCellContentStyle);
+                if (typeof ((_h = props.cell) === null || _h === void 0 ? void 0 : _h.text) === 'string') {
+                    this.addChild(new framework_1.TextNode(props.cell.text));
+                }
+                else if ((_j = props.cell) === null || _j === void 0 ? void 0 : _j.slot) {
+                    this.slotChild(props.cell.slot);
+                }
+                if ((_k = props.cell) === null || _k === void 0 ? void 0 : _k.contentStyle) {
+                    this.ctrl.addStyleObj(props.cell.contentStyle);
+                }
+                if ((_l = props.cell) === null || _l === void 0 ? void 0 : _l.align) {
+                    this.ctrl.addStyleObj({
+                        textAlign: props.cell.align
+                    });
+                }
+                if ((_m = props.cell) === null || _m === void 0 ? void 0 : _m.width) {
+                    this.ctrl.addStyleObj({
+                        width: props.cell.width
+                    });
+                }
+                break;
+            default:
+                this.ctrl.addAttrObj({
+                    colspan: span
+                });
+                if ((_p = (_o = props.cell) === null || _o === void 0 ? void 0 : _o.slots) === null || _p === void 0 ? void 0 : _p.label) {
+                    props.cell.slots.label.ctrl.setStyleObj(td_descriptions_style_1.$descriptionsCellLabelStyle);
+                    this.addChild((_r = (_q = props.cell) === null || _q === void 0 ? void 0 : _q.slots) === null || _r === void 0 ? void 0 : _r.label);
+                }
+                else if ((_s = props.cell) === null || _s === void 0 ? void 0 : _s.label) {
+                    this.addChild(new framework_1.Span({
+                        text: props.cell.label,
+                        styleObj: Object.assign(td_descriptions_style_1.$descriptionsCellLabelStyle, props.cell.labelStyle)
+                    }));
+                }
+                if ((_t = props.cell) === null || _t === void 0 ? void 0 : _t.text) {
+                    this.addChild(new framework_1.Span({
+                        text: props.cell.text,
+                        styleObj: td_descriptions_style_1.$descriptionsCellContentStyle
+                    }));
+                }
+                else if ((_u = props.cell) === null || _u === void 0 ? void 0 : _u.slot) {
+                    this.slotChild(props.cell.slot);
+                }
+                break;
+        }
+    }
+}
+exports.TdDescriptionsCell = TdDescriptionsCell;

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

@@ -0,0 +1,10 @@
+import { TextNode, TypeNode } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdDescriptionsItem, ITdDescriptionsItemConfig } from './td-descriptions-item.interface';
+export declare class TdDescriptionsItem extends UI implements ITdDescriptionsItem {
+    className: 'TdDescriptionsItem';
+    props: ITdDescriptionsItemConfig;
+    label?: TypeNode;
+    content?: TextNode;
+    constructor(params?: ITdDescriptionsItemConfig);
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDescriptionsItem = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+class TdDescriptionsItem extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        this.className = 'TdDescriptionsItem';
+        // if (config?.slots?.label) {
+        //   this.label = config.slots.label
+        // } else if (config?.label) {
+        //   this.label = new TextNode(config.label);
+        // }
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+        }
+        this.props = this.setParams(params);
+    }
+}
+exports.TdDescriptionsItem = TdDescriptionsItem;

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

@@ -0,0 +1,51 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TypeHtml } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
+export interface ITdDescriptionsItem extends IUI {
+    className: 'TdDescriptionsItem';
+}
+export interface ITdDescriptionsItemConfig extends IUIConfig {
+    /**
+     * @description label text
+     *     default: '',
+     */
+    label?: string;
+    /**
+     * @description colspan of column
+     *     default: 1,
+     */
+    span?: number;
+    /**
+     * @description column width, the width of the same column in different rows is set by the max value (If no `border`, width contains label and content)
+     *     default: '',
+     */
+    width?: string | number;
+    /**
+     * @description column minimum width, columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion (If no`border`, width contains label and content)
+     *     default: '',
+     */
+    minWidth?: string | number;
+    /**
+     * @description column content alignment (If no `border`, effective for both label and content)
+     *     default: 'left',
+     */
+    align?: string;
+    /**
+     * @description column label alignment, if omitted, the value of the above `align` attribute will be applied (If no `border`, please use `align` attribute)
+     *     default: '',
+     */
+    labelAlign?: string;
+    /**
+     * @description column content custom class name
+     *     default: '',
+     */
+    contentStyle?: IStyle;
+    /**
+     * @description column label custom class name
+     *     default: '',
+     */
+    labelStyle?: IStyle;
+    slots?: {
+        label: TypeHtml;
+    };
+}

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

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

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

@@ -0,0 +1,10 @@
+export declare const $descriptionsItemLabelMarginRight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $descriptionsItemVerticalLabelPaddingBottom: {
+    large: string;
+    default: string;
+    small: string;
+};

package/src/components/data/td-descriptions-item/td-descriptions-item.style.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$descriptionsItemVerticalLabelPaddingBottom = exports.$descriptionsItemLabelMarginRight = void 0;
+exports.$descriptionsItemLabelMarginRight = {
+    large: '16px',
+    default: '16px',
+    small: '12px'
+};
+exports.$descriptionsItemVerticalLabelPaddingBottom = {
+    large: '8px',
+    default: '6px',
+    small: '4px'
+};

package/src/components/data/td-empty/img-empty.class.d.ts

@@ -0,0 +1,5 @@
+import { ITypeConfig, TypeSvgSvg } from '@type-dom/framework';
+export declare class ImgEmpty extends TypeSvgSvg {
+    className: 'ImgEmpty';
+    constructor(params?: ITypeConfig);
+}