@type-dom/ui 0.0.4 → 0.0.5

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

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCollapseItem = void 0;
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const var_1 = require("../../../styles/var");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+// import { $collapseTransition, $collapseTransitionActive, $transition } from '../../../styles/transition';
+const td_collapse_style_1 = require("../td-collapse/td-collapse.style");
+const td_collapse_transition_class_1 = require("../td-collapse-transition/td-collapse-transition.class");
+class TdCollapseItem extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a;
+        super(params, 'fragment');
+        this.className = 'TdCollapseItem';
+        this.headerBtn = new framework_1.Button({
+            name: 'collapse-item-header',
+            attrObj: {
+                type: 'button',
+                // ariaControls: scopedHeadId,
+                // ariaExpanded: 'isActive',
+                tabIndex: this.disabled ? -1 : 0
+            },
+            styleObj: {
+                width: '100%',
+                padding: 0,
+                border: 'none',
+                display: 'flex',
+                alignItems: 'center',
+                // height: getCssVar('collapse-header-height'),
+                height: td_collapse_style_1.$collapse.headerHeight,
+                // line-height: getCssVar('collapse-header-height'),
+                lineHeight: td_collapse_style_1.$collapse.headerHeight,
+                // background-color: getCssVar('collapse-header-bg-color'),
+                backgroundColor: td_collapse_style_1.$collapse.headerBgColor,
+                // color: getCssVar('collapse-header-text-color'),
+                color: td_collapse_style_1.$collapse.headerTextColor,
+                cursor: 'pointer',
+                // border-bottom: 1px solid getCssVar('collapse-border-color'),
+                borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor,
+                // font-size: getCssVar('collapse-header-font-size'),
+                fontSize: td_collapse_style_1.$collapse.headerFontSize,
+                fontWeight: 500,
+                // transition: border-bottom-color getCssVar('transition-duration'),
+                transition: 'border-bottom-color ' + var_1.$transitionDuration,
+                outline: 'none'
+            },
+            events: {
+                click: () => {
+                    const nameId = (params === null || params === void 0 ? void 0 : params.nameId) || '';
+                    this.handleHeaderClick(nameId);
+                },
+                // keydown.space.enter.stop.prevent: () => {
+                // },
+                keydown: (event) => {
+                    if (event.key === 'Enter' ||
+                        event.key === ' ') {
+                        event === null || event === void 0 ? void 0 : event.preventDefault();
+                        event === null || event === void 0 ? void 0 : event.stopPropagation();
+                        this.handleEnterClick();
+                    }
+                },
+                focus: () => {
+                    this.handleFocus();
+                },
+                blur: (evt, element) => {
+                    this.focusing = false;
+                }
+            }
+        });
+        this.addChild(this.headerBtn);
+        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.title) {
+            this.headerBtn.slotChild(params.slots.title);
+        }
+        else if (params === null || params === void 0 ? void 0 : params.title) {
+            this.headerBtn.setTitle(params.title);
+        }
+        this.arrowIcon = new td_icon_class_1.TdIcon({
+            svgObj: new svgs_1.ElArrowRightSvg(),
+            styleObj: {
+                margin: '0 8px 0 auto',
+                // transition: transform getCssVar('transition-duration'),
+                transition: 'transform ' + var_1.$transitionDuration,
+                fontWeight: 300
+            }
+        });
+        this.headerBtn.addChild(this.arrowIcon);
+        this.wrapper = new framework_1.Div({
+            name: 'wrapper',
+            attrObj: {
+                ariaHidden: 'true',
+                role: 'region'
+                // ariaLabelledby: scopedHeadId,
+            },
+            styleObj: {
+                // display: 'none',
+                willChange: 'height',
+                // maxHeight: 0,
+                // background-color: getCssVar('collapse-content-bg-color'),
+                backgroundColor: td_collapse_style_1.$collapse.contentBgColor,
+                overflow: 'hidden',
+                boxSizing: 'border-box',
+                // border-bottom: 1px solid getCssVar('collapse-border-color'),
+                borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor
+            }
+        });
+        this.content = new framework_1.Div({
+            name: 'collapse-item-content',
+            styleObj: {
+                paddingBottom: '25px',
+                // font-size: getCssVar('collapse-content-font-size'),
+                fontSize: td_collapse_style_1.$collapse.contentFontSize,
+                // color: getCssVar('collapse-content-text-color'),
+                color: td_collapse_style_1.$collapse.contentTextColor,
+                lineHeight: 1.769230769230769
+            }
+        });
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.content.slotChild(params.slot);
+        }
+        this.wrapper.addChild(this.content);
+        this.transition = new td_collapse_transition_class_1.TdCollapseTransition({
+            parent: this,
+            slot: this.wrapper
+        });
+        this.addChild(this.transition);
+        this.props = this.setParams(params);
+    }
+    setActive(active) {
+        if (active) {
+            // todo transition
+            // this.wrapper.addStyleObj($collapseTransitionActive);
+            // collapseTransitionConfig.beforeEnter && collapseTransitionConfig.beforeEnter(this.wrapper);
+            // collapseTransitionConfig.enter && collapseTransitionConfig.enter(this.wrapper);
+            // collapseTransitionConfig.afterEnter && collapseTransitionConfig.afterEnter(this.wrapper);
+            // collapseTransitionConfig.enterCancelled(this.wrapper);
+            // nextFrame(() => {
+            //   // 计算内容的高度
+            //   const contentHeight = this.wrapper.dom.scrollHeight + 'px';
+            //   console.log('contentHeight is ', contentHeight);
+            //   this.wrapper.setStyleObj({
+            //     maxHeight: contentHeight,
+            //     // height: '50px',
+            //     // opacity: 1,
+            //     // display: undefined,
+            //   });
+            // });
+            this.transition.showSlot(true);
+            this.headerBtn.ctrl.setStyleObj({
+                borderBottomColor: 'transparent'
+            });
+            this.arrowIcon.ctrl.setStyleObj({
+                transform: 'rotate(90deg)'
+            });
+        }
+        else {
+            // todo transition
+            // this.wrapper.addStyleObj($collapseTransition);
+            // nextFrame(() => {
+            //   this.wrapper.setStyleObj({
+            //     maxHeight: 0,
+            //     // height: '0px',
+            //     // opacity: 0,
+            //     // display: 'none',
+            //     // transition: 'transform 1s', // + $transitionDuration,
+            //   });
+            // });
+            this.transition.showSlot(false);
+            this.headerBtn.ctrl.setStyleObj({
+                transition: 'transform ' + var_1.$transitionDuration
+            });
+            this.arrowIcon.ctrl.setStyleObj({
+                transform: 'rotate(0deg)'
+            });
+            // todo transition
+            // this.wrapper.addStyleObj($collapseTransition);
+        }
+    }
+    setDisable(disabled) {
+        if (disabled) {
+            this.headerBtn.ctrl.setStyleObj({
+                // color: getCssVar('text-color-disabled'),
+                color: var_1.$textColor.disabled,
+                cursor: 'not-allowed'
+            });
+        }
+        else {
+            this.headerBtn.ctrl.setStyleObj({
+                // color: getCssVar('collapse-header-text-color'),
+                color: td_collapse_style_1.$collapse.headerTextColor,
+                cursor: 'pointer'
+            });
+        }
+    }
+    handleFocus() {
+        setTimeout(() => {
+            if (!this.isClick) {
+                this.focusing = true;
+            }
+            else {
+                this.isClick = false;
+            }
+        }, 50);
+    }
+    handleHeaderClick(name) {
+        var _a;
+        console.log('handleHeaderClick, name is ', name);
+        if (this.props.disabled) {
+            return;
+        }
+        (_a = this.parent) === null || _a === void 0 ? void 0 : _a.handleItemClick(name);
+        this.focusing = false;
+        this.isClick = true;
+    }
+    handleEnterClick() {
+        var _a;
+        // name todo
+        (_a = this.parent) === null || _a === void 0 ? void 0 : _a.handleItemClick('name');
+    }
+}
+exports.TdCollapseItem = TdCollapseItem;

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

@@ -0,0 +1,20 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdCollapseItem extends IUI {
+    className: 'TdCollapseItem';
+}
+export interface ITdCollapseItemConfig extends IUIConfig {
+    /**
+     * @description title of the panel
+     *     default: '',
+     */
+    title?: string;
+    /**
+     * @description unique identification of the panel
+     *     default: undefined,
+     */
+    nameId?: string | number;
+    /**
+     * @description disable the collapse item
+     */
+    disabled?: boolean;
+}

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

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

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

@@ -0,0 +1,6 @@
+import { ITransitionConfig, TypeTransition } from '@type-dom/framework';
+import { ITdCollapseTransition } from './td-collapse-transition.interface';
+export declare class TdCollapseTransition extends TypeTransition implements ITdCollapseTransition {
+    className: 'TdCollapseTransition';
+    constructor(params?: ITransitionConfig);
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCollapseTransition = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_collapse_transition_util_1 = require("./td-collapse-transition.util");
+class TdCollapseTransition extends framework_1.TypeTransition {
+    constructor(params) {
+        super(Object.assign(td_collapse_transition_util_1.collapseTransitionConfig, params));
+        this.className = 'TdCollapseTransition';
+    }
+}
+exports.TdCollapseTransition = TdCollapseTransition;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { ITransitionConfig } from '@type-dom/framework';
+export declare const collapseTransitionConfig: ITransitionConfig;

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

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseTransitionConfig = void 0;
+const reset = (element) => {
+    const el = element === null || element === void 0 ? void 0 : element.dom;
+    if (!el) {
+        throw Error('element is not exist . ');
+    }
+    // el.style.maxHeight = '';
+    // el.style.overflow = el.dataset.oldOverflow
+    // el.style.paddingTop = el.dataset.oldPaddingTop
+    // el.style.paddingBottom = el.dataset.oldPaddingBottom
+    element === null || element === void 0 ? void 0 : element.ctrl.setStyleObj({
+        maxHeight: '',
+        overflow: el.dataset.oldOverflow,
+        paddingTop: el.dataset.oldPaddingTop,
+        paddingBottom: el.dataset.oldPaddingBottom
+    });
+};
+exports.collapseTransitionConfig = {
+    onBeforeEnter(element) {
+        console.log('beforeEnter . ');
+        const el = element === null || element === void 0 ? void 0 : element.dom;
+        if (!el) {
+            throw Error('element is not exist . ');
+        }
+        if (!el.dataset) {
+            // el.dataset = {};
+            element.ctrl.setAttribute('dataset', false);
+        }
+        element.ctrl.setAttrObj({
+            dataOldPaddingTop: el.style.paddingTop,
+            dataOldPaddingBottom: el.style.paddingBottom
+        });
+        // el.dataset.oldPaddingTop = el.style.paddingTop
+        // el.dataset.oldPaddingBottom = el.style.paddingBottom
+        if (el.style.height) {
+            // el.dataset.existsHeight = el.style.height
+            element.ctrl.setAttrObj({
+                dataExistsHeight: el.style.height
+            });
+        }
+        // el.style.maxHeight = 0
+        // el.style.paddingTop = 0
+        // el.style.paddingBottom = 0
+        element.ctrl.setStyleObj({
+            maxHeight: 0,
+            paddingTop: 0,
+            paddingBottom: 0,
+            transition: 'max-height .3s ease-in-out'
+        });
+    },
+    onEnter(element) {
+        console.log('enter . ');
+        const el = element === null || element === void 0 ? void 0 : element.dom;
+        if (!el) {
+            throw Error('element is not exist . ');
+        }
+        requestAnimationFrame(() => {
+            element.ctrl.setAttrObj({
+                dataOldOverflow: el.style.overflow
+            });
+            // el.dataset.oldOverflow = el.style.overflow
+            if (el.dataset.existsHeight) {
+                // el.style.maxHeight = el.dataset.existsHeight
+                element.ctrl.setStyleObj({
+                    maxHeight: el.dataset.existsHeight
+                });
+            }
+            else if (el.scrollHeight !== 0) {
+                // el.style.maxHeight = `${el.scrollHeight}px`
+                element.ctrl.setStyleObj({
+                    maxHeight: `${el.scrollHeight}px`
+                });
+            }
+            else {
+                // el.style.maxHeight = 0
+                element.ctrl.setStyleObj({
+                    maxHeight: 0
+                });
+            }
+            // el.style.paddingTop = el.dataset.oldPaddingTop
+            // el.style.paddingBottom = el.dataset.oldPaddingBottom
+            // el.style.overflow = 'hidden'
+            element.ctrl.setStyleObj({
+                paddingTop: el.dataset.oldPaddingTop,
+                paddingBottom: el.dataset.oldPaddingBottom,
+                overflow: 'hidden'
+            });
+        });
+    },
+    onAfterEnter(element) {
+        var _a;
+        // el.style.maxHeight = ''
+        // el.style.overflow = el.dataset.oldOverflow
+        element === null || element === void 0 ? void 0 : element.ctrl.setStyleObj({
+            maxHeight: '',
+            overflow: (_a = element === null || element === void 0 ? void 0 : element.dom) === null || _a === void 0 ? void 0 : _a.dataset.oldOverflow
+        });
+    },
+    onEnterCancelled(element) {
+        reset(element);
+    },
+    onBeforeLeave(element) {
+        const el = element === null || element === void 0 ? void 0 : element.dom;
+        if (!el) {
+            throw Error('element is not exist . ');
+        }
+        // if (!el.dataset) el.dataset = {}
+        // el.dataset.oldPaddingTop = el.style.paddingTop
+        // el.dataset.oldPaddingBottom = el.style.paddingBottom
+        // el.dataset.oldOverflow = el.style.overflow
+        element.ctrl.setAttrObj({
+            dataOldPaddingTop: el.style.paddingTop,
+            dataOldPaddingBottom: el.style.paddingBottom,
+            dataOldOverflow: el.style.overflow
+        });
+        // el.style.maxHeight = `${el.scrollHeight}px`
+        // el.style.overflow = 'hidden'
+        element.ctrl.setStyleObj({
+            maxHeight: `${el.scrollHeight}px`,
+            overflow: 'hidden'
+        });
+    },
+    onLeave(element) {
+        const el = element === null || element === void 0 ? void 0 : element.dom;
+        if (!el) {
+            throw Error('element is not exist . ');
+        }
+        if (el.scrollHeight !== 0) {
+            // el.style.maxHeight = 0
+            // el.style.paddingTop = 0
+            // el.style.paddingBottom = 0
+            element.ctrl.setStyleObj({
+                maxHeight: 0,
+                paddingTop: 0,
+                paddingBottom: 0
+            });
+        }
+    },
+    onAfterLeave(element) {
+        reset(element);
+    },
+    onLeaveCancelled(element) {
+        reset(element);
+    }
+};

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

@@ -0,0 +1,13 @@
+import { TdStatisticAbstract } from '../td-statistic/td-statistic.abstract';
+import { ITdCountDown, ITdCountDownConfig } from './td-count-down.interface';
+export declare class TdCountDown extends TdStatisticAbstract implements ITdCountDown {
+    className: 'TdCountDown';
+    private rawValue;
+    private timer?;
+    props: ITdCountDownConfig;
+    constructor(params?: ITdCountDownConfig);
+    mounted(): void;
+    stopTimer(): void;
+    startTimer(): void;
+    setNumber(value: number): void;
+}

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCountDown = void 0;
+const utils_1 = require("@type-dom/utils");
+const td_statistic_abstract_1 = require("../td-statistic/td-statistic.abstract");
+const utils_2 = require("./utils");
+class TdCountDown extends td_statistic_abstract_1.TdStatisticAbstract {
+    constructor(params = {}) {
+        const format = (params === null || params === void 0 ? void 0 : params.format) || 'HH:mm:ss';
+        params.formatter = (val) => (0, utils_2.formatTime)(val, format);
+        // title,prefix,suffix 可以是 TypeElement元素；
+        super(params);
+        this.className = 'TdCountDown';
+        this.rawValue = (0, utils_2.getTime)((params === null || params === void 0 ? void 0 : params.value) || 0) - Date.now();
+        this.setNumber(this.rawValue);
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.slotChild(params.slot);
+        }
+        this.props = this.setParams(params);
+    }
+    mounted() {
+        this.stopTimer();
+        this.startTimer();
+    }
+    stopTimer() {
+        if (this.timer) {
+            (0, utils_1.cAF)(this.timer);
+            this.timer = undefined;
+        }
+    }
+    startTimer() {
+        var _a;
+        console.log('this.props.value is ', this.props.value);
+        const timestamp = (0, utils_2.getTime)(((_a = this.props) === null || _a === void 0 ? void 0 : _a.value) || 0);
+        const frameFunc = () => {
+            let diff = timestamp - Date.now();
+            // console.log('diff is ', diff);
+            // emit('change', diff)
+            this.setNumber(diff);
+            if (diff <= 0) {
+                diff = 0;
+                this.stopTimer();
+                // emit('finish')
+            }
+            else {
+                this.timer = (0, utils_1.rAF)(frameFunc);
+            }
+            this.rawValue = diff;
+        };
+        this.timer = (0, utils_1.rAF)(frameFunc);
+    }
+    setNumber(value) {
+        var _a;
+        (_a = this.number.textNode) === null || _a === void 0 ? void 0 : _a.setText(this.formatValue(value));
+    }
+}
+exports.TdCountDown = TdCountDown;

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,11 @@
+import { ITdStatisticAbstract, ITdStatisticConfig } from '../td-statistic/td-statistic.interface';
+export interface ITdCountDown extends ITdStatisticAbstract {
+    className: 'TdCountDown';
+}
+export interface ITdCountDownConfig extends ITdStatisticConfig {
+    /**
+     * @description Formatting the countdown display
+     *     default: 'HH:mm:ss',
+     */
+    format?: string;
+}

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

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

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

@@ -0,0 +1,3 @@
+import type { Dayjs } from 'dayjs';
+export declare const getTime: (value: number | Dayjs) => number;
+export declare const formatTime: (timestamp: number, format: string) => string;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTime = exports.getTime = void 0;
+const utils_1 = require("@type-dom/utils");
+const timeUnits = [
+    ['Y', 1000 * 60 * 60 * 24 * 365], // years
+    ['M', 1000 * 60 * 60 * 24 * 30], // months
+    ['D', 1000 * 60 * 60 * 24], // days
+    ['H', 1000 * 60 * 60], // hours
+    ['m', 1000 * 60], // minutes
+    ['s', 1000], // seconds
+    ['S', 1] // million seconds
+];
+const getTime = (value) => {
+    return (0, utils_1.isNumber)(value) ? new Date(value).getTime() : value.valueOf();
+};
+exports.getTime = getTime;
+const formatTime = (timestamp, format) => {
+    let timeLeft = timestamp;
+    const escapeRegex = /\[([^\]]*)]/g;
+    const replacedText = timeUnits.reduce((current, [name, unit]) => {
+        const replaceRegex = new RegExp(`${name}+(?![^\\[\\]]*\\])`, 'g');
+        if (replaceRegex.test(current)) {
+            const value = Math.floor(timeLeft / unit);
+            timeLeft -= value * unit;
+            return current.replace(replaceRegex, (match) => String(value).padStart(match.length, '0'));
+        }
+        return current;
+    }, format);
+    return replacedText.replace(escapeRegex, '$1');
+};
+exports.formatTime = formatTime;

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

@@ -0,0 +1,21 @@
+import { TableRow, TypeFragment } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TdDescriptionsItem } from '../td-descriptions-item/td-descriptions-item.class';
+export interface ITdDescriptionsRow extends IUI {
+    className: 'TdDescriptionsRow';
+}
+export interface ITdDescriptionsRowConfig extends IUIConfig {
+    row: TdDescriptionsItem[];
+}
+/**
+ * @name TdDescriptionsRow
+ * @description
+ * @author darcrand
+ */
+export declare class TdDescriptionsRow extends TypeFragment implements ITdDescriptionsRow {
+    className: 'TdDescriptionsRow';
+    props: ITdDescriptionsRowConfig;
+    childNodes: TableRow[];
+    constructor(params?: ITdDescriptionsRowConfig);
+    created(): void;
+}

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

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDescriptionsRow = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_descritions_cell_1 = require("./td-descritions-cell");
+/**
+ * @name TdDescriptionsRow
+ * @description
+ * @author darcrand
+ */
+class TdDescriptionsRow extends framework_1.TypeFragment {
+    constructor(params) {
+        super();
+        this.className = 'TdDescriptionsRow';
+        this.childNodes = [];
+        this.props = this.setParams(params);
+    }
+    created() {
+        var _a;
+        // todo  descriptions.direction === 'vertical'
+        //     descriptions.border 根据这两个条件判断，创建cell.
+        const descriptions = this.up('TdDescriptions');
+        console.log('descriptions is ', descriptions);
+        if (!descriptions) {
+            throw Error('TdDescriptionsRow need TdDescriptions as parent. ');
+        }
+        const descriptionsConfig = descriptions.props;
+        // useSize(descriptionsConfig);
+        // useBordered(descriptionsConfig);
+        if ((descriptionsConfig === null || descriptionsConfig === void 0 ? void 0 : descriptionsConfig.direction) === 'vertical') {
+            //   todo  要加 两个 tr , 这样就不是 一个 tr 的组件了。
+            console.log('vertical . ');
+            const labelTr = new framework_1.TableRow();
+            const contentTr = new framework_1.TableRow();
+            const row = ((_a = this.props) === null || _a === void 0 ? void 0 : _a.row) || [];
+            row.forEach((item, index) => {
+                labelTr.addChild(new td_descritions_cell_1.TdDescriptionsCell({
+                    cell: item.props,
+                    tag: 'th',
+                    type: 'label'
+                }));
+            });
+            row.forEach((item, index) => {
+                contentTr.addChild(new td_descritions_cell_1.TdDescriptionsCell({
+                    cell: item.props,
+                    tag: 'td',
+                    type: 'content'
+                }));
+            });
+            this.addChildren(labelTr, contentTr);
+        }
+        else {
+            const tr = new framework_1.TableRow();
+            const row = this.props.row || [];
+            row.forEach((item, index) => {
+                if (descriptionsConfig.border) {
+                    tr.addChildren(new td_descritions_cell_1.TdDescriptionsCell({
+                        cell: item.props,
+                        tag: 'td',
+                        type: 'label'
+                    }), new td_descritions_cell_1.TdDescriptionsCell({
+                        cell: item.props,
+                        tag: 'td',
+                        type: 'content'
+                    }));
+                }
+                else {
+                    tr.addChild(new td_descritions_cell_1.TdDescriptionsCell({
+                        cell: item.props,
+                        tag: 'td',
+                        type: 'both'
+                    }));
+                }
+            });
+            this.addChild(tr);
+        }
+        // this.setParams(this.config);
+    }
+}
+exports.TdDescriptionsRow = TdDescriptionsRow;