@type-dom/ui 0.0.9 → 0.1.0

package/src/components/form/td-checkbox-button/td-checkbox-button.style.js

@@ -1,28 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$checkboxButtonInnerStyle = exports.$checkboxButtonOriginalStyle = exports.$checkboxButtonStyle = exports.$checkboxButton = void 0;
+exports.$checkboxButtonOriginalStyle = exports.$checkboxButtonInnerHoverStyle = exports.$checkboxButtonInnerStyle = exports.$checkboxButtonStyle = exports.$checkboxButton = void 0;
+exports.useCheckboxButtonStyle = useCheckboxButtonStyle;
+exports.useCheckedStyle = useCheckedStyle;
+exports.useDisabledStyle = useDisabledStyle;
+exports.useFocusStyle = useFocusStyle;
+exports.useSize = useSize;
 const var_1 = require("../../../styles/var");
 const transition_1 = require("../../../styles/transition");
 const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
+const td_button_style_1 = require("../../basic/td-button/td-button.style");
 exports.$checkboxButton = {
     // 'checked-bg-color': getCssVar('color-primary'),
-    checkedBgColor: var_1.$colors.primary.base,
+    checkedBgColor: var_1.$colorPrimary,
     // 'checked-text-color': getCssVar('color-white'),
-    checkedTextColor: var_1.$colors.white,
+    checkedTextColor: var_1.$colorWhite,
     // 'checked-border-color': getCssVar('color-primary'),
-    checkedBorderColor: var_1.$colors.primary.base,
+    checkedBorderColor: var_1.$colorPrimary,
 };
 exports.$checkboxButtonStyle = {
     position: 'relative',
     display: 'inline-block',
 };
-exports.$checkboxButtonOriginalStyle = {
-    opacity: 0,
-    outline: 'none',
-    position: 'absolute',
-    margin: 0,
-    zIndex: -1,
-};
 exports.$checkboxButtonInnerStyle = {
     display: 'inline-block',
     lineHeight: 1,
@@ -37,13 +36,14 @@ exports.$checkboxButtonInnerStyle = {
     // ),
     background: var_1.$button.bgColor,
     // border: getCssVar('border'),
+    border: var_1.$border,
     borderLeftColor: 'transparent',
     // color: var
     //   #{getCssVarName('button-text-color')},
     //   map.get($button, 'text-color',
     // ),
     color: var_1.$button.textColor,
-    // -webkit-appearance: 'none',
+    '-webkit-appearance': 'none',
     textAlign: 'center',
     boxSizing: 'border-box',
     outline: 'none',
@@ -53,3 +53,80 @@ exports.$checkboxButtonInnerStyle = {
     transition: transition_1.$transition.all,
     userSelect: 'none',
 };
+exports.$checkboxButtonInnerHoverStyle = {
+    color: var_1.$colorPrimary,
+};
+exports.$checkboxButtonOriginalStyle = {
+    opacity: 0,
+    outline: 'none',
+    position: 'absolute',
+    margin: 0,
+    zIndex: -1,
+};
+function useCheckboxButtonStyle(params) {
+    useCheckedStyle(params);
+    useDisabledStyle(params);
+    useSize(params);
+    // const paddingVertical = parseInt($buttonPaddingVertical.default) - parseInt($buttonBorderWidth) + 'px';
+    // const paddingHorizontal = parseInt($buttonPaddingHorizontal.default) - parseInt($buttonBorderWidth) + 'px';
+    // const fontSize = $fontSizes.default;
+    // $checkboxButtonInnerStyle = Object.assign($checkboxButtonInnerStyle, buttonSize(paddingVertical, paddingHorizontal, fontSize, 0))
+}
+function useCheckedStyle(params) {
+    const checked = params.checked;
+    if (checked) {
+        exports.$checkboxButtonInnerStyle.color = exports.$checkboxButton.checkedTextColor;
+        exports.$checkboxButtonInnerStyle.backgroundColor = exports.$checkboxButton.checkedBgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = exports.$checkboxButton.checkedBorderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow = '-1px 0 0 0 ' + var_1.$colors.primary['light-7'];
+        //   todo 如果是第一个子节点 则添加 border-left-color: getCssVar('checkbox-button-checked-border-color');
+        //   $checkboxButtonInnerStyle.borderLeftColor = $checkboxButton.checkedBorderColor;
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.color = var_1.$button.textColor;
+        exports.$checkboxButtonInnerStyle.backgroundColor = var_1.$button.bgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = var_1.$button.borderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useDisabledStyle(params) {
+    const disabled = params.disabled;
+    if (disabled) {
+        exports.$checkboxButtonInnerStyle.color = var_1.$disabled.textColor;
+        exports.$checkboxButtonInnerStyle.cursor = 'not-allowed';
+        exports.$checkboxButtonInnerStyle.backgroundImage = 'none';
+        exports.$checkboxButtonInnerStyle.backgroundColor = var_1.$button.disabled.bgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = var_1.$button.disabled.borderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow = 'none';
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.color = var_1.$button.textColor;
+        exports.$checkboxButtonInnerStyle.cursor = 'pointer';
+        exports.$checkboxButtonInnerStyle.backgroundImage = undefined;
+        exports.$checkboxButtonInnerStyle.background = var_1.$button.bgColor;
+        exports.$checkboxButtonInnerStyle.border = var_1.$border;
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useFocusStyle(params) {
+    const focus = false;
+    if (focus) {
+        exports.$checkboxButtonInnerStyle.borderColor = exports.$checkboxButton.checkedBorderColor;
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useSize(params) {
+    const size = params.size || 'default';
+    //         @include button-size(
+    //           map.get($button-padding-vertical, $size) - $button-border-width,
+    //           map.get($button-padding-horizontal, $size) - $button-border-width,
+    //           map.get($button-font-size, $size),
+    //           0
+    //         );
+    const paddingVertical = td_button_style_1.$buttonPaddingVertical[size];
+    const paddingHorizontal = td_button_style_1.$buttonPaddingHorizontal[size];
+    const sizeStyle = (0, td_button_style_1.buttonSize)(paddingVertical, paddingHorizontal, var_1.$fontSizes[size], 0);
+    exports.$checkboxButtonInnerStyle = Object.assign(exports.$checkboxButtonInnerStyle, sizeStyle);
+}

package/src/components/form/td-checkbox-group/td-checkbox-group.class.d.ts

@@ -1,7 +1,15 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdCheckboxGroup, ITdCheckboxGroupConfig } from './td-checkbox-group.interface';
-export declare class TdCheckboxGroup extends UI implements ITdCheckboxGroup {
+import { TypeHtml } from '@type-dom/framework';
+import { TdCheckbox } from '../td-checkbox/td-checkbox.class';
+import { TdCheckboxButton } from '../td-checkbox-button/td-checkbox-button.class';
+import { CheckboxGroupValueType, ITdCheckboxGroup, ITdCheckboxGroupConfig } from './td-checkbox-group.interface';
+export declare class TdCheckboxGroup extends TypeHtml implements ITdCheckboxGroup {
     className: 'TdCheckboxGroup';
+    nodeName: string;
+    dom: HTMLElement;
     props: ITdCheckboxGroupConfig;
+    childNodes: (TdCheckbox | TdCheckboxButton)[];
     constructor(params?: ITdCheckboxGroupConfig);
+    setup(): void;
+    changeEvent: (value: CheckboxGroupValueType) => Promise<void>;
+    setMinMax(checkbox: TdCheckbox | TdCheckboxButton): void;
 }

package/src/components/form/td-checkbox-group/td-checkbox-group.class.js

@@ -1,20 +1,133 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckboxGroup = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const tslib_1 = require("tslib");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
 const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
-class TdCheckboxGroup extends ui_abstract_1.UI {
-    constructor(params = {}) {
-        super(params);
+const td_checkbox_button_class_1 = require("../td-checkbox-button/td-checkbox-button.class");
+class TdCheckboxGroup extends framework_1.TypeHtml {
+    constructor(params = { modelValue: [] }) {
+        var _a;
+        super();
+        this.changeEvent = (value) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            this.emit(event_1.UPDATE_MODEL_EVENT, value);
+            yield (0, framework_1.nextTick)();
+            this.emit('change', value);
+        });
         this.className = 'TdCheckboxGroup';
+        this.nodeName = (_a = params.tag) !== null && _a !== void 0 ? _a : 'div';
+        this.dom = document.createElement(this.nodeName);
         this.attr.addObj({
+            name: 'td-checkbox-group',
             role: 'group',
             // ariaLabel: !config.isLabeledByFormItem ? config?.ariaLabel || 'checkbox-group' : undefined,
             // aria-labelledby="isLabeledByFormItem ? formItem?.labelId : undefined"
         });
         this.style.addObj(td_checkbox_style_1.$checkboxGroupStyle);
-        this.addChild(this.getSlotNode());
+        this.childNodes = [];
+        // this.addChild(this.getSlotNode());
+        if (params.slot) { // 这样子节点就是TdCheckbox组件了，不需要 SlotNode 再包一层；哪怕 SlotNode只是虚拟节点；
+            this.slotChild(params.slot);
+        }
+        if (params.size) {
+            this.childNodes.map((item) => {
+                item.props.size = params.size;
+            });
+        }
+        this.assignProps({
+            modelValue: [],
+            tag: 'div',
+            validateEvent: true,
+        });
         this.props = this.useParams(params);
+        this.addEmits({
+            [event_1.UPDATE_MODEL_EVENT]: (val) => (0, utils_1.isArray)(val),
+            change: (val) => (0, utils_1.isArray)(val),
+        });
+    }
+    setup() {
+        // 处理子节点和组合框的属性关系
+        this.childNodes.forEach((child, index) => {
+            const value = child.props.value;
+            if (index === 0 && child instanceof td_checkbox_button_class_1.TdCheckboxButton) {
+                child.setFirstStyle();
+            }
+            else if (index === this.childNodes.length - 1 && child instanceof td_checkbox_button_class_1.TdCheckboxButton) {
+                child.setLastStyle();
+            }
+            if (this.props.modelValue.includes(value)) {
+                child.setChecked(true);
+            }
+            if (this.props.size) {
+                child.setSize(this.props.size);
+            }
+            if (this.props.disabled) {
+                child.setDisabled(true);
+            }
+            if (this.props.min || this.props.max) {
+                this.setMinMax(child);
+            }
+            child.addEvents({
+                click: (evt) => {
+                    console.log('child click', evt, child);
+                    if (child.props.disabled) {
+                        return;
+                    }
+                    const checked = child.checkedValue;
+                    // 处理 modelValue 的更新
+                    if (checked) {
+                        if (this.props.modelValue.indexOf(value) === -1) {
+                            this.props.modelValue.push(value);
+                        }
+                        this.childNodes.forEach(chd => {
+                            if (this.props.min || this.props.max) {
+                                this.setMinMax(chd);
+                            }
+                        });
+                    }
+                    else {
+                        if (this.props.modelValue.indexOf(value) > -1) {
+                            this.props.modelValue.splice(this.props.modelValue.indexOf(value), 1);
+                        }
+                        this.childNodes.forEach(chd => {
+                            if (this.props.min || this.props.max) {
+                                this.setMinMax(chd);
+                            }
+                        });
+                    }
+                    this.changeEvent(this.props.modelValue);
+                }
+            });
+        });
+    }
+    setMinMax(checkbox) {
+        const value = checkbox.props.value;
+        if (this.props.modelValue.includes(value)) {
+            if (this.props.min && this.props.min === this.props.modelValue.length) {
+                checkbox.setDisabled(true);
+            }
+            else if (this.props.max && this.props.max === this.props.modelValue.length) {
+                checkbox.setDisabled(false);
+            }
+            else {
+                checkbox.setDisabled(false);
+            }
+            checkbox.setChecked(true);
+        }
+        else {
+            if (this.props.min && this.props.min === this.props.modelValue.length) {
+                checkbox.setDisabled(false);
+            }
+            else if (this.props.max && this.props.max === this.props.modelValue.length) {
+                checkbox.setDisabled(true);
+            }
+            else {
+                checkbox.setDisabled(false);
+            }
+            // checkbox.setChecked(checkbox.props.checked);
+        }
     }
 }
 exports.TdCheckboxGroup = TdCheckboxGroup;

package/src/components/form/td-checkbox-group/td-checkbox-group.interface.d.ts

@@ -1,14 +1,16 @@
-import { IPrimitive } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-export interface ITdCheckboxGroup extends IUI {
+import { TdCheckbox } from '../td-checkbox/td-checkbox.class';
+import { CheckboxValueType } from '../td-checkbox/td-checkbox.interface';
+export interface ITdCheckboxGroup extends ITypeHtml {
     className: 'TdCheckboxGroup';
 }
-export interface ITdCheckboxGroupConfig extends IUIConfig {
+export type CheckboxGroupValueType = Exclude<CheckboxValueType, boolean>[];
+export interface ITdCheckboxGroupConfig extends ITypeConfig {
     /**
      * @description binding value
      */
-    modelValue?: IPrimitive[];
+    modelValue: (string | boolean | number | undefined | object)[];
     /**
      * @description whether the nesting checkboxes are disabled
      */
@@ -47,4 +49,5 @@ export interface ITdCheckboxGroupConfig extends IUIConfig {
      *     default: true,
      */
     validateEvent?: boolean;
+    slot?: TdCheckbox[];
 }

package/src/components/form/td-form/td-form.class.d.ts

@@ -1,12 +1,14 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeForm } from '@type-dom/framework';
 import { ITdForm, ITdFormConfig } from './td-form.interface';
+import { TdFormItem } from '../td-form-item/td-form-item.class';
 /**
  * TdForm类继承自UI抽象类，实现ITdForm接口，用于创建和管理表单。
  * 提交表单时，应该要获取所有子元素 form-item 里的 如 TdInput 这些可输入的组件的值。
  * 表单提交地址也应该是可以配置的。
  */
-export declare class TdForm extends UI implements ITdForm {
+export declare class TdForm extends TypeForm implements ITdForm {
     className: 'TdForm';
+    childNodes: TdFormItem[];
     props: ITdFormConfig;
     private model?;
     /**

package/src/components/form/td-form/td-form.class.js

@@ -1,23 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdForm = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const td_form_const_1 = require("./td-form.const");
 /**
  * TdForm类继承自UI抽象类，实现ITdForm接口，用于创建和管理表单。
  * 提交表单时，应该要获取所有子元素 form-item 里的 如 TdInput 这些可输入的组件的值。
  * 表单提交地址也应该是可以配置的。
  */
-class TdForm extends ui_abstract_1.UI {
+class TdForm extends framework_1.TypeForm {
     /**
      * 构造函数，初始化表单配置。
      * @param params
      */
     constructor(params = {}) {
-        super(params, 'form');
+        super();
+        // this.useTag('form');
         this.className = 'TdForm';
-        this.attr.addName('td-form');
-        this.provide(td_form_const_1.formContextKey, params); // 要在form-item 中 inject
+        this.attr.addObj({
+            name: 'td-form',
+        });
+        this.childNodes = [];
         if (params.slot) {
             this.slotChild(params.slot);
         }
@@ -25,6 +28,7 @@ class TdForm extends ui_abstract_1.UI {
             this.model = params.model;
         }
         this.props = this.useParams(params);
+        this.provide(td_form_const_1.formContextKey, params); // 要在form-item 中 inject
     }
 }
 exports.TdForm = TdForm;

package/src/components/form/td-form/td-form.interface.d.ts

@@ -1,8 +1,10 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { ISize } from '../../../styles/size';
-import { ITdFormItemConfig } from '../td-form-item/td-form-item.interface';
-export interface ITdForm extends IUI {
+import { ITdFormItem, ITdFormItemConfig } from '../td-form-item/td-form-item.interface';
+import { TdFormItem } from '../td-form-item/td-form-item.class';
+import { ITypeConfig, ITypeForm } from '@type-dom/framework';
+export interface ITdForm extends ITypeForm {
     className: 'TdForm';
+    childNodes: ITdFormItem[];
 }
 export interface IFormRule {
     required?: boolean;
@@ -17,7 +19,7 @@ export interface IFormRule {
 export interface IFormRules {
     [propName: string]: IFormRule[];
 }
-export interface ITdFormConfig extends IUIConfig {
+export interface ITdFormConfig extends ITypeConfig {
     /**
      * @description Control the size of components in this form.
      */
@@ -89,4 +91,5 @@ export interface ITdFormConfig extends IUIConfig {
      */
     scrollIntoViewOptions?: object | boolean;
     options?: Array<ITdFormItemConfig>;
+    slot?: Array<TdFormItem>;
 }

package/src/components/form/td-form-item/td-form-item.class.d.ts

@@ -1,18 +1,17 @@
-import { Label } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Label, TypeDiv } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
 import { TdForm } from '../td-form/td-form.class';
 import { ILabelPosition, ITdFormItem, ITdFormItemConfig } from './td-form-item.interface';
-export declare class TdFormItem extends UI implements ITdFormItem {
+export declare class TdFormItem extends TypeDiv implements ITdFormItem {
     className: 'TdFormItem';
     props: ITdFormItemConfig;
-    label?: Label;
     parent?: TdForm;
+    private formConfig?;
+    label?: Label;
     private labelWrap?;
     private content;
     private error?;
     constructor(params?: ITdFormItemConfig);
-    created(): void;
     setup(): void;
     setLabelWidth(width?: string | number): void;
     setLabelPosition(position?: ILabelPosition): void;

package/src/components/form/td-form-item/td-form-item.class.js

@@ -3,15 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdFormItem = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
-// import { formContextKey } from '../td-form/td-form.const';
-// import { ITdFormConfig } from '../td-form/td-form.interface';
+const td_form_const_1 = require("../td-form/td-form.const");
 const td_form_item_style_1 = require("./td-form-item.style");
-class TdFormItem extends ui_abstract_1.UI {
+class TdFormItem extends framework_1.TypeDiv {
     // new TdFormItem 是 发生在 TdForm slotChild 之前的。
     constructor(params = {}) {
-        super(params);
+        var _a;
+        super();
         this.className = 'TdFormItem';
         this.attr.addName('td-form-item');
         this.style.addObj({
@@ -20,15 +19,23 @@ class TdFormItem extends ui_abstract_1.UI {
             fontSize: var_1.$fontSizes[(params === null || params === void 0 ? void 0 : params.size) || 'base'],
             marginBottom: td_form_item_style_1.$formItemMarginBottom[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
         });
-        if (params === null || params === void 0 ? void 0 : params.label) {
-            this.labelWrap = new framework_1.Div({
-                name: 'td-form-item-label-wrap',
+        this.labelWrap = new framework_1.Div({
+            name: 'td-form-item-label-wrap',
+            styleObj: {
+                display: 'flex',
+                alignItems: 'center'
+                // marginLeft: '11px', // 这个是动态计算的
+            },
+        });
+        this.addChild(this.labelWrap);
+        if (!params.label && params.required) {
+            (_a = this.labelWrap) === null || _a === void 0 ? void 0 : _a.addChild(new framework_1.Span({
+                text: '*',
                 styleObj: {
-                    display: 'flex',
-                    // marginLeft: '11px', // 这个是动态计算的
+                    color: var_1.$colors.danger.base,
+                    marginRight: '4px',
                 },
-            });
-            this.addChild(this.labelWrap);
+            }));
         }
         this.content = new framework_1.Div({
             name: 'td-form-item-content',
@@ -46,9 +53,10 @@ class TdFormItem extends ui_abstract_1.UI {
             },
         });
         this.error = new framework_1.Div({
-            text: 'Please input the ... ',
+            text: params.error || '',
             name: 'td-form-item-error',
             styleObj: {
+                display: 'none',
                 // color: getCssVar('color-danger');
                 color: var_1.$colors.danger.base,
                 fontSize: '12px',
@@ -61,21 +69,20 @@ class TdFormItem extends ui_abstract_1.UI {
             },
         });
         // todo 动态加载
-        // this.content.addChild(this.error);
+        this.content.addChild(this.error);
+        this.content.slotChild(params.slot);
+        // this.content.addChild(this.getSlotNode());
         this.addChild(this.content);
-        this.content.addChild(this.getSlotNode());
         this.props = this.useParams(params);
     }
-    created() {
+    setup() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         // inject 要在 created 之中，否则无法确定 parent .
-        // this.formConfig = this.inject(formContextKey);
+        this.formConfig = this.inject(td_form_const_1.formContextKey);
         // 就是 this.parent.params , 有必要单独引入一次吗？
-        // console.log('this.formConfig is ', this.formConfig);
+        console.log('this.formConfig is ', this.formConfig);
         // this.childNodes = [this.labelWrap, this.content];
         // 下面的方法要调用到 this.parent 才能获取到。需要 form的setConfig 方法调用后
-    }
-    setup() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.label) {
             this.label = new framework_1.Label({
@@ -136,31 +143,31 @@ class TdFormItem extends ui_abstract_1.UI {
         if (width === undefined) {
             return;
         }
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.setObj({
             width: (0, utils_1.addUnit)(width),
         });
     }
     setLabelPosition(position) {
         var _a;
         // todo top 怎么处理 ？
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.setObj({
             justifyContent: position === 'left' ? 'flex-start' : 'flex-end',
         });
     }
     setSize(size = 'default') {
         var _a, _b;
-        this.style.addObj({
+        this.style.setObj({
             fontSize: var_1.$fontSizes[size],
             marginBottom: td_form_item_style_1.$formItemMarginBottom[size],
         });
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.setObj({
             height: td_form_item_style_1.$formItemLineHeight[size],
             lineHeight: td_form_item_style_1.$formItemLineHeight[size],
         });
-        this.content.style.addObj({
+        this.content.style.setObj({
             lineHeight: td_form_item_style_1.$formItemLineHeight[size],
         });
-        (_b = this.error) === null || _b === void 0 ? void 0 : _b.style.addObj({
+        (_b = this.error) === null || _b === void 0 ? void 0 : _b.style.setObj({
             paddingTop: td_form_item_style_1.$formItemErrorPaddingTop[size],
         });
     }

package/src/components/form/td-form-item/td-form-item.interface.d.ts

@@ -1,11 +1,11 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeElement } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
 export declare const formItemValidateStates: readonly ["", "error", "validating", "success"];
 export type IFormItemValidateState = (typeof formItemValidateStates)[number];
-export interface ITdFormItem extends IUI {
+export interface ITdFormItem extends ITypeElement {
     className: 'TdFormItem';
 }
-export interface ITdFormItemConfig extends IUIConfig {
+export interface ITdFormItemConfig extends ITypeConfig {
     /**
      * @description Label text.
      */

package/src/components/form/td-input/td-input.class.d.ts

@@ -1,9 +1,8 @@
-import { IJsonDataProp } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { IJsonDataProp, TypeDiv } from '@type-dom/framework';
 import { TdInputWrapper } from './widget/td-input-wrapper.class';
 import { TdTextareaWrapper } from './widget/td-textarea-wrapper';
 import { ITdInput, ITdInputConfig } from './td-input.interface';
-export declare class TdInput extends UI implements ITdInput {
+export declare class TdInput extends TypeDiv implements ITdInput {
     className: 'TdInput';
     props: ITdInputConfig;
     private isWordLimitVisible?;
@@ -13,9 +12,9 @@ export declare class TdInput extends UI implements ITdInput {
     private placeholder?;
     constructor(params?: ITdInputConfig);
     get value(): string;
-    setup(): void;
     setModelValue(value: IJsonDataProp): void;
     setHovering(hovering: boolean): void;
     setFocus(isFocused: boolean): void;
+    setShow(show: boolean, display?: string): void;
     created(): void;
 }