@type-dom/ui 0.0.10 → 0.1.0

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;
 }

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

@@ -3,24 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdInput = 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");
 const td_input_wrapper_class_1 = require("./widget/td-input-wrapper.class");
 const td_input_style_1 = require("./td-input.style");
 const td_textarea_wrapper_1 = require("./widget/td-textarea-wrapper");
-class TdInput extends ui_abstract_1.UI {
+class TdInput extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         console.log('TdInput constructor . ');
         this.className = 'TdInput';
-        this.attr.addName('td-input');
         this.attr.addObj({
+            name: 'td-input',
             tabIndex: 0
         });
         this.style.addObj({
             position: 'relative',
             display: 'inline-flex',
             width: '100%',
+            // width: '95%',
             boxSizing: 'border-box',
             verticalAlign: 'middle',
             // fontSize: var(--el-font-size-base),
@@ -33,35 +33,27 @@ class TdInput extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.modelValue) {
             this.modelValue = params.modelValue;
         }
-        this.props = this.useParams(params);
-    }
-    get value() {
-        return this.panel.inner.value;
-    }
-    setup() {
-        const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.width) {
-            this.style.addWidth(props.width);
-        }
         //   todo
-        if ((props === null || props === void 0 ? void 0 : props.type) === 'textarea') {
-            props.parent = this;
-            this.panel = new td_textarea_wrapper_1.TdTextareaWrapper(props);
+        if ((params === null || params === void 0 ? void 0 : params.type) === 'textarea') {
+            params.parent = this;
+            this.panel = new td_textarea_wrapper_1.TdTextareaWrapper(params);
             // this.textareaWrapper = new TdTextareaWrapper(props);
         }
         else {
-            this.panel = new td_input_wrapper_class_1.TdInputWrapper(props);
+            this.panel = new td_input_wrapper_class_1.TdInputWrapper(params);
         }
-        if (props === null || props === void 0 ? void 0 : props.placeholder) {
-            this.placeholder = props.placeholder;
+        if (params === null || params === void 0 ? void 0 : params.placeholder) {
+            this.placeholder = params.placeholder;
         }
-        this.panel.setParent(this);
         this.addChild(this.panel);
-        if (!(props === null || props === void 0 ? void 0 : props.formatter) && (props === null || props === void 0 ? void 0 : props.parser)) {
+        if (params === null || params === void 0 ? void 0 : params.width) {
+            this.style.addWidth(params.width);
+        }
+        if (!(params === null || params === void 0 ? void 0 : params.formatter) && (params === null || params === void 0 ? void 0 : params.parser)) {
             throw new Error('If you set the parser, you also need to set the formatter');
         }
-        if (this.props.disabled) {
-            return;
+        if (params.disabled) {
+            // this.panel.setDisabled(true);
         }
         this.addEvents({
             mouseleave: (evt) => {
@@ -138,9 +130,13 @@ class TdInput extends ui_abstract_1.UI {
                 this.emit('keydown', evt, element);
             }
         });
-        if (this.props.type === 'textarea') {
-            return; // ????
+        if (params.type === 'textarea') {
+            // ????
         }
+        this.props = this.useParams(params);
+    }
+    get value() {
+        return this.panel.inner.value;
     }
     setModelValue(value) {
         console.log('setModelValue . value is ', value);
@@ -197,6 +193,14 @@ class TdInput extends ui_abstract_1.UI {
             });
         }
     }
+    setShow(show, display = 'inline-flex') {
+        this.style.setObj({
+            display: show ? display : 'none'
+        });
+        this.panel.style.setObj({
+            display: show ? display : 'none'
+        });
+    }
     created() {
         // 注： 绑定变量要渲染前处理，而不是创建对象时处理
         if (this.props.modelValue) {

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

@@ -1,11 +1,10 @@
-import { IJsonDataProp, InputEnum, IObDataProp, Span, TypeSvgSvg } from '@type-dom/framework';
+import { IJsonDataProp, InputEnum, IObDataProp, ITypeConfig, ITypeDiv, Span, TypeSvgSvg } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { TdInput } from './td-input.class';
-export interface ITdInput extends IUI {
+export interface ITdInput extends ITypeDiv {
     className: 'TdInput';
 }
-export interface ITdInputConfig extends IUIConfig {
+export interface ITdInputConfig extends ITypeConfig {
     parent?: TdInput;
     /**
      * @description native input id

package/src/components/form/td-input/widget/suffix.d.ts

@@ -10,4 +10,5 @@ export declare class TdInputSuffix extends TypeSpan {
     clearIcon?: TdIcon;
     passwordIcon?: TdIcon;
     constructor(parent: TdInputWrapper, config?: ITdInputConfig);
+    setup(): void;
 }

package/src/components/form/td-input/widget/suffix.js

@@ -11,7 +11,7 @@ class TdInputSuffix extends framework_1.TypeSpan {
         this.parent = parent;
         this.className = 'TdInputSuffix';
         this.style.addObj({
-            display: this.parent.suffixVisible ? 'inline-flex' : 'none',
+            display: 'inline-flex',
             whiteSpace: 'nowrap',
             flexShrink: 0,
             flexWrap: 'nowrap',
@@ -116,5 +116,10 @@ class TdInputSuffix extends framework_1.TypeSpan {
             this.suffixInner.addChild(this.suffixIcon);
         }
     }
+    setup() {
+        this.style.addObj({
+            display: this.parent.suffixVisible ? 'inline-flex' : 'none' // constructor 中this.parent.suffixVisible是undefined
+        });
+    }
 }
 exports.TdInputSuffix = TdInputSuffix;

package/src/components/form/td-input/widget/td-input-wrapper.class.js

@@ -182,7 +182,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
                 color: var_1.$textColor.disabled,
                 // -webkit-text-fill-color: var(--el-disabled-text-color),
                 WebkitTextFillColor: var_1.$textColor.disabled,
-                cursor: 'notAllowed'
+                cursor: 'not-allowed'
             });
         }
         else {
@@ -226,14 +226,14 @@ class TdInputWrapper extends framework_1.TypeDiv {
     //   }
     // }
     setShowClear(showClear) {
-        var _a;
+        var _a, _b, _c;
         console.log('setShowClear . showClear is ', showClear);
         this.suffix.style.show(this.suffixVisible ? 'inline-flex' : 'none');
-        (_a = this.suffix.clearIcon) === null || _a === void 0 ? void 0 : _a.style.show(showClear ? 'inline-flex' : 'none');
+        (_c = (_b = (_a = this.suffix) === null || _a === void 0 ? void 0 : _a.clearIcon) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.show(showClear ? 'inline-flex' : 'none');
     }
     setShowPassword(showPassword) {
-        var _a;
-        (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.style.show(showPassword ? 'inline-flex' : 'none');
+        var _a, _b;
+        (_b = (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.show(showPassword ? 'inline-flex' : 'none');
     }
     setNativeInputValue() {
         console.log('setNativeInputValue . ');

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
 import { ITdOption, ITdOptionConfig } from './td-option.interface';
-export declare class TdOption extends UI implements ITdOption {
+import { TypeLI } from '@type-dom/framework';
+export declare class TdOption extends TypeLI implements ITdOption {
     className: 'TdOption';
     props: ITdOptionConfig;
     constructor(params?: ITdOptionConfig);

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdOption = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_select_style_1 = require("../td-select/td-select.style");
-class TdOption extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+class TdOption extends framework_1.TypeLI {
     constructor(params = {}) {
-        super(params, 'li');
+        super();
         this.className = 'TdOption';
         this.attr.addObj({
             name: 'td-option',