@type-dom/ui 0.0.3 → 0.0.5

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;

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;