@type-dom/ui 0.1.0 → 0.1.1

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

@@ -1,11 +1,34 @@
-import { ITdStatisticAbstract, ITdStatisticConfig } from '../td-statistic/td-statistic.interface';
-export interface ITdCountDown extends ITdStatisticAbstract {
+import { ITypeFragment, StyleValue, TypeFragmentProps } from '@type-dom/framework';
+import { Dayjs } from 'dayjs';
+import { MaybeRef } from '@type-dom/signals';
+export interface ITdCountDown extends ITypeFragment {
     className: 'TdCountDown';
 }
-export interface ITdCountDownConfig extends ITdStatisticConfig {
+export interface CountDownProps extends TypeFragmentProps {
     /**
      * @description Formatting the countdown display
      *     default: 'HH:mm:ss',
      */
     format?: string;
+    /**
+     * @description Sets the prefix of a countdown
+     */
+    prefix?: string;
+    /**
+     * @description Sets the suffix of a countdown
+     */
+    suffix?: string;
+    /**
+     * @description countdown titles
+     */
+    title?: string;
+    /**
+     * @description target time
+     *     default: 0,
+     */
+    value?: MaybeRef<number | Dayjs>;
+    /**
+     * @description Styles countdown values
+     */
+    valueStyle?: StyleValue;
 }

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatTime = exports.getTime = void 0;
 const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
 const timeUnits = [
     ['Y', 1000 * 60 * 60 * 24 * 365], // years
     ['M', 1000 * 60 * 60 * 24 * 30], // months
@@ -9,14 +10,15 @@ const timeUnits = [
     ['H', 1000 * 60 * 60], // hours
     ['m', 1000 * 60], // minutes
     ['s', 1000], // seconds
-    ['S', 1] // million 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;
+    // console.warn('formatTime , timestamp is ', timestamp, ' format is ', format);
+    let timeLeft = (0, signals_1.unref)(timestamp);
     const escapeRegex = /\[([^\]]*)]/g;
     const replacedText = timeUnits.reduce((current, [name, unit]) => {
         const replaceRegex = new RegExp(`${name}+(?![^\\[\\]]*\\])`, 'g');

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

@@ -0,0 +1,3 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-descriptions.css';
+import '@element-plus/components/descriptions-item/style/css';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/theme-chalk/el-descriptions.css");
+require("@element-plus/components/descriptions-item/style/css");

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

@@ -0,0 +1,3 @@
+import '../../../base/style';
+import '../../../../theme-chalk/descriptions.scss';
+import '../../td-descriptions-item/style';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");
+require("../../../../theme-chalk/descriptions.scss");
+require("../../td-descriptions-item/style");

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

@@ -1,9 +1,10 @@
-import { ITypeConfig, ITypeElement, TableRow, TypeFragment } from '@type-dom/framework';
+import { ITypeFragment, TypeFragmentProps, TableRow, TypeFragment } from '@type-dom/framework';
 import { TdDescriptionsItem } from '../td-descriptions-item/td-descriptions-item.class';
-export interface ITdDescriptionsRow extends ITypeElement {
+export interface ITdDescriptionsRow extends ITypeFragment {
     className: 'TdDescriptionsRow';
+    props: DescriptionsRowProps;
 }
-export interface ITdDescriptionsRowConfig extends ITypeConfig {
+export interface DescriptionsRowProps extends TypeFragmentProps {
     row?: TdDescriptionsItem[];
 }
 /**
@@ -13,8 +14,8 @@ export interface ITdDescriptionsRowConfig extends ITypeConfig {
  */
 export declare class TdDescriptionsRow extends TypeFragment implements ITdDescriptionsRow {
     className: 'TdDescriptionsRow';
-    props: ITdDescriptionsRowConfig;
+    props: DescriptionsRowProps;
     childNodes: TableRow[];
-    constructor(params?: ITdDescriptionsRowConfig);
+    constructor(params?: DescriptionsRowProps);
     setup(): void;
 }

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

@@ -3,6 +3,7 @@ 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");
+const token_1 = require("./token");
 /**
  * @name TdDescriptionsRow
  * @description
@@ -19,12 +20,11 @@ class TdDescriptionsRow extends framework_1.TypeFragment {
         var _a;
         // todo  descriptions.direction === 'vertical'
         //     descriptions.border 根据这两个条件判断，创建cell.
-        const descriptions = this.up('TdDescriptions');
-        console.log('descriptions is ', descriptions);
-        if (!descriptions) {
+        console.log('TdDescriptionsRow setup . ');
+        const descriptionsConfig = this.inject(token_1.descriptionsKey);
+        if (!descriptionsConfig) {
             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') {
@@ -37,44 +37,44 @@ class TdDescriptionsRow extends framework_1.TypeFragment {
                 labelTr.addChild(new td_descritions_cell_1.TdDescriptionsCell({
                     cell: item.props,
                     tag: 'th',
-                    type: 'label'
+                    type: 'label',
                 }));
             });
             row.forEach((item, index) => {
                 contentTr.addChild(new td_descritions_cell_1.TdDescriptionsCell({
                     cell: item.props,
                     tag: 'td',
-                    type: 'content'
+                    type: 'content',
                 }));
             });
             this.addChildren(labelTr, contentTr);
         }
         else {
+            console.warn('horizontal . ');
             const tr = new framework_1.TableRow();
             const row = this.props.row || [];
-            row.forEach((item, index) => {
+            row.forEach((item) => {
                 if (descriptionsConfig.border) {
                     tr.addChildren(new td_descritions_cell_1.TdDescriptionsCell({
                         cell: item.props,
                         tag: 'td',
-                        type: 'label'
+                        type: 'label',
                     }), new td_descritions_cell_1.TdDescriptionsCell({
                         cell: item.props,
                         tag: 'td',
-                        type: 'content'
+                        type: 'content',
                     }));
                 }
                 else {
                     tr.addChild(new td_descritions_cell_1.TdDescriptionsCell({
                         cell: item.props,
                         tag: 'td',
-                        type: 'both'
+                        type: 'both',
                     }));
                 }
             });
             this.addChild(tr);
         }
-        // this.useParams(this.config);
     }
 }
 exports.TdDescriptionsRow = TdDescriptionsRow;

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

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

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

@@ -5,13 +5,16 @@ const framework_1 = require("@type-dom/framework");
 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");
+const token_1 = require("./token");
 class TdDescriptions extends framework_1.TypeDiv {
     constructor(params) {
         super();
         this.className = 'TdDescriptions';
+        this.assignProps(token_1.descriptionProps);
         this.props = this.useParams(params);
+        this.provide(token_1.descriptionsKey, this.props);
     }
-    created() {
+    setup() {
         var _a, _b, _c, _d;
         const props = this.props;
         (0, td_descriptions_style_1.useSize)(props);
@@ -33,13 +36,13 @@ class TdDescriptions extends framework_1.TypeDiv {
                 this.headerTitle = new framework_1.Div({
                     name: 'title',
                     styleObj: td_descriptions_style_1.$descriptionsHeaderTitleStyle,
-                    childNodes: [props.slots.title],
+                    slot: [props.slots.title],
                 });
             }
             else {
                 this.headerTitle = new framework_1.Div({
                     name: 'title',
-                    text: props.title,
+                    slot: props.title,
                     styleObj: td_descriptions_style_1.$descriptionsHeaderTitleStyle,
                 });
             }
@@ -47,42 +50,38 @@ class TdDescriptions extends framework_1.TypeDiv {
             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],
+                    slot: [props.slots.extra],
                 }));
             }
             else {
                 this.header.addChild(new framework_1.Div({
                     name: 'extra',
-                    text: props.extra,
+                    slot: 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 }));
-        }
+        const rows = this.getRows(); // 获取数据排列的行数；
         console.log('rows is ', rows);
-        this.rows = rows;
-        this.body = new framework_1.Div({
-            name: 'body',
-            styleObj: td_descriptions_style_1.$descriptionsBodyStyle,
-        });
+        this.rows = rows.map((row) => new td_descriptions_row_1.TdDescriptionsRow({ row: row }));
+        console.log('TdDescriptionsRow rows is ', this.rows);
         this.bodyTable = new framework_1.Table({
             name: 'table',
             styleObj: td_descriptions_style_1.$descriptionsBodyTableStyle,
-            childNodes: [
+            slot: [
                 new framework_1.TableBody({
                     name: 'table-body',
-                    childNodes: rows,
+                    slot: this.rows,
                 }),
             ],
         });
-        this.body.addChild(this.bodyTable);
+        this.body = new framework_1.Div({
+            name: 'body',
+            styleObj: td_descriptions_style_1.$descriptionsBodyStyle,
+            slot: this.bodyTable,
+        });
         this.addChild(this.body);
         this.useParams(props); // todo ????
     }
@@ -100,8 +99,9 @@ class TdDescriptions extends framework_1.TypeDiv {
         return node;
     }
     getRows() {
+        var _a;
         const props = this.props;
-        const children = props.slot.filter((item) => item instanceof td_descriptions_item_class_1.TdDescriptionsItem);
+        const children = (_a = props.slot) === null || _a === void 0 ? void 0 : _a.filter((item) => item instanceof td_descriptions_item_class_1.TdDescriptionsItem);
         const rows = [];
         let temp = [];
         let count = props.column || 3;

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

@@ -1,10 +1,12 @@
-import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
-import { ISize } from '../../../styles/size';
+import { TypeProps, ITypeDiv, TypeDivProps, TypeElement } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
 import { TdDescriptionsItem } from '../td-descriptions-item/td-descriptions-item.class';
+import { MaybeRef } from '@type-dom/signals';
 export interface ITdDescriptions extends ITypeDiv {
     className: 'TdDescriptions';
+    props: DescriptionsProps;
 }
-export interface ITdDescriptionsConfig extends ITypeConfig {
+export interface DescriptionsProps extends TypeDivProps {
     /**
      * @description with or without border
      *     default: false,
@@ -23,7 +25,7 @@ export interface ITdDescriptionsConfig extends ITypeConfig {
     /**
      * @description size of list
      */
-    size?: ISize;
+    size?: MaybeRef<ComponentSize>;
     /**
      * @description title text, display on the top left
      *     default: '',
@@ -34,9 +36,35 @@ export interface ITdDescriptionsConfig extends ITypeConfig {
      *     default: '',
      */
     extra?: string;
+    /**
+     * @description width of every label column
+     *     default: '',
+     */
+    labelWidth?: string | number;
+    slot?: TdDescriptionsItem[];
     slots?: {
         title?: TypeElement;
         extra?: TypeElement;
     };
-    slot: TdDescriptionsItem[];
+}
+export interface IDescriptionsInject extends TypeProps {
+    border?: boolean;
+    column?: number;
+    direction?: 'horizontal' | 'vertical';
+    size?: ComponentSize;
+    title?: string;
+    extra?: string;
+    labelWidth?: string | number;
+}
+export interface IDescriptionsItemInject {
+    label: string;
+    span: number;
+    rowspan: number;
+    width: string | number;
+    minWidth: string | number;
+    labelWidth: string | number;
+    align: string;
+    labelAlign: string;
+    className: string;
+    labelClassName: string;
 }

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

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITdDescriptionsConfig } from './td-descriptions.interface';
+import { DescriptionsProps } from './td-descriptions.interface';
 export declare const $descriptionsHeaderMarginBottom: {
     large: string;
     default: string;
@@ -40,7 +40,7 @@ export declare const $descriptionsItemLabelMarginRight: {
     default: string;
     small: string;
 };
-export declare function useSize(config?: ITdDescriptionsConfig): void;
+export declare function useSize(config?: DescriptionsProps): void;
 export declare const $descriptionsItemVerticalLabelPaddingBottom: {
     large: string;
     default: string;
@@ -48,4 +48,4 @@ export declare const $descriptionsItemVerticalLabelPaddingBottom: {
 };
 export declare let $descriptionsCellLabelStyle: IStyle;
 export declare const $descriptionsCellContentStyle: IStyle;
-export declare function useBordered(config: ITdDescriptionsConfig): void;
+export declare function useBordered(config: DescriptionsProps): void;

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

@@ -5,30 +5,31 @@ exports.useSize = useSize;
 exports.useBordered = useBordered;
 const var_1 = require("../../../styles/var");
 const td_input_style_1 = require("../../form/td-input/td-input.style");
+const signals_1 = require("@type-dom/signals");
 exports.$descriptionsHeaderMarginBottom = {
     large: '20px',
     default: '16px',
-    small: '12px'
+    small: '12px',
 };
 exports.$descriptionsTitleFontSize = {
     large: '16px',
     default: '16px',
-    small: '14px'
+    small: '14px',
 };
 exports.$descriptionsCellPaddingBottom = {
     large: '16px',
     default: '12px',
-    small: '8px'
+    small: '8px',
 };
 exports.$descriptionsBorderedCellPadding = {
     large: '12px 15px',
     default: '8px 11px',
-    small: '4px 7px'
+    small: '4px 7px',
 };
 exports.$descriptionsCellFontSize = {
     large: '14px',
     default: '14px',
-    small: '12px'
+    small: '12px',
 };
 // Descriptions
 // css3 var in packages/theme-chalk/src/descriptions.scss
@@ -36,36 +37,36 @@ 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
+    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
+    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
+    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'
+    fontWeight: 'bold',
 };
 exports.$descriptionsBodyStyle = {
     // background-color: getCssVar('fill-color', 'blank')
-    backgroundColor: var_1.$fillColor.blank
+    backgroundColor: var_1.$fillColor.blank,
 };
 exports.$descriptionsBodyTableStyle = {
     borderCollapse: 'collapse',
-    width: '100%'
+    width: '100%',
 };
 exports.$descriptionsBodyTableCellStyle = {
     // display: 'inline-flex', // add by me
@@ -74,15 +75,15 @@ exports.$descriptionsBodyTableCellStyle = {
     fontWeight: 'normal',
     lineHeight: '23px',
     // font-size: map.get($descriptions-cell-font-size, 'default'),
-    fontSize: exports.$descriptionsCellFontSize.default
+    fontSize: exports.$descriptionsCellFontSize.default,
 };
 exports.$descriptionsItemLabelMarginRight = {
     large: '16px',
     default: '16px',
-    small: '12px'
+    small: '12px',
 };
 function useSize(config) {
-    const size = (config === null || config === void 0 ? void 0 : config.size) || 'default';
+    const size = (0, signals_1.unref)(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];
@@ -106,11 +107,11 @@ function useSize(config) {
 exports.$descriptionsItemVerticalLabelPaddingBottom = {
     large: '8px',
     default: '6px',
-    small: '4px'
+    small: '4px',
 };
 exports.$descriptionsCellLabelStyle = {};
 exports.$descriptionsCellContentStyle = {
-    color: var_1.$textColor.regular
+    color: var_1.$textColor.regular,
 };
 function useBordered(config) {
     const bordered = config === null || config === void 0 ? void 0 : config.border;
@@ -118,7 +119,7 @@ function useBordered(config) {
         exports.$descriptionsCellLabelStyle = {
             fontWeight: 'bold',
             color: var_1.$textColor.regular,
-            backgroundColor: exports.$descriptions.itemBorderedLabelBackground
+            backgroundColor: exports.$descriptions.itemBorderedLabelBackground,
         };
         exports.$descriptionsBodyTableCellStyle.border = exports.$descriptions.tableBorder;
         exports.$descriptionsBodyTableCellStyle.padding =
@@ -132,7 +133,7 @@ function useBordered(config) {
             exports.$descriptionsCellPaddingBottom.default;
         exports.$descriptionsCellLabelStyle = {
             color: var_1.$textColor.primary,
-            marginRight: exports.$descriptionsItemLabelMarginRight.default
+            marginRight: exports.$descriptionsItemLabelMarginRight.default,
         };
         if (config.direction === 'vertical') {
             exports.$descriptionsCellLabelStyle.paddingBottom =

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

@@ -1,16 +1,15 @@
-import { ITypeConfig, TypeHtml } from '@type-dom/framework';
-import { ITdDescriptionsItemConfig } from '../td-descriptions-item/td-descriptions-item.interface';
-export interface ITdDescriptionsCellConfig extends ITypeConfig {
-    cell?: ITdDescriptionsItemConfig;
+import { TypeProps, TypeHtml } from '@type-dom/framework';
+import { DescriptionsItemProps } from '../td-descriptions-item/td-descriptions-item.interface';
+export interface DescriptionsCellProps extends TypeProps {
+    cell?: DescriptionsItemProps;
     tag?: string;
     type?: string;
     span?: number;
 }
 export declare class TdDescriptionsCell extends TypeHtml {
     className: 'TdDescriptionsCell';
-    nodeName: 'td' | string;
-    dom: HTMLElement;
-    props: ITdDescriptionsCellConfig;
-    constructor(params?: ITdDescriptionsCellConfig);
+    props: DescriptionsCellProps;
+    dom?: HTMLElement;
+    constructor(params?: DescriptionsCellProps);
     setup(): void;
 }