@type-dom/ui 0.0.9 → 0.1.0

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-input/widget/utils.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.calcTextareaHeight = calcTextareaHeight;
 const utils_1 = require("@type-dom/utils");
 let hiddenTextarea = undefined;
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  ${utils_1.isFireFox ? '' : 'overflow:hidden !important;'}
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
 `;
 const CONTEXT_STYLE = [
     'letter-spacing',

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',

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdOption extends IUI {
+import { ITypeConfig, ITypeLI } from '@type-dom/framework';
+export interface ITdOption extends ITypeLI {
     className: 'TdOption';
 }
-export interface ITdOptionConfig extends IUIConfig {
+export interface ITdOptionConfig extends ITypeConfig {
     /**
      * @description value of option
      *     required: true,

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

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

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

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdOptionGroup = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_select_style_1 = require("../td-select/td-select.style");
-class TdOptionGroup extends ui_abstract_1.UI {
+class TdOptionGroup extends framework_1.TypeUL {
     constructor(params = {}) {
-        super(params, 'ul');
+        super();
         this.className = 'TdOptionGroup';
         this.attr.addObj({
             name: 'option-group-wrap'

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdOptionGroup extends IUI {
+import { ITypeConfig, ITypeUL } from '@type-dom/framework';
+export interface ITdOptionGroup extends ITypeUL {
     className: 'TdOptionGroup';
 }
-export interface ITdOptionGroupConfig extends IUIConfig {
+export interface ITdOptionGroupConfig extends ITypeConfig {
     /**
      * @description name of the group
      */

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

@@ -1,7 +1,6 @@
-import { Input, Span } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Input, Span, TypeLabel } from '@type-dom/framework';
 import { ITdRadio, ITdRadioConfig } from './td-radio.interface';
-export declare class TdRadio extends UI implements ITdRadio {
+export declare class TdRadio extends TypeLabel implements ITdRadio {
     className: 'TdRadio';
     props: ITdRadioConfig;
     inputOriginal: Input;

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

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRadio = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
-class TdRadio extends ui_abstract_1.UI {
+class TdRadio extends framework_1.TypeLabel {
     constructor(params = {}) {
-        super(params, 'label');
+        super();
+        // this.useTag('label');
         this.className = 'TdRadio';
+        this.attr.addObj({
+            name: 'td-radio'
+        });
         this.style.addObj({
             color: var_1.$textColor.regular,
             fontWeight: var_1.$fontWeightPrimary,
@@ -160,7 +163,7 @@ class TdRadio extends ui_abstract_1.UI {
         this.disabled = disabled;
         if (disabled) {
             this.style.setObj({
-                cursor: 'notAllowed',
+                cursor: 'not-allowed',
                 opacity: 0.5
                 //   禁用事件
                 //   pointerEvents: 'none',
@@ -170,7 +173,7 @@ class TdRadio extends ui_abstract_1.UI {
             });
             this.inputOriginal.attr.setObj({ disabled: true });
             this.inputInner.style.setObj({
-                cursor: 'notAllowed',
+                cursor: 'not-allowed',
                 // color: $colors.default.base,
                 // borderWidth: '1px',
                 // borderStyle: 'solid',

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

@@ -1,9 +1,9 @@
+import { ITypeConfig, ITypeLabel } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdRadio extends IUI {
+export interface ITdRadio extends ITypeLabel {
     className: 'TdRadio';
 }
-export interface ITdRadioConfig extends IUIConfig {
+export interface ITdRadioConfig extends ITypeConfig {
     /**
      * @description binding value
      */

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

@@ -1,7 +1,6 @@
-import { Input, Span } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Input, Span, TypeLabel } from '@type-dom/framework';
 import { ITdRadioButton, ITdRadioButtonConfig } from './td-radio-button.interface';
-export declare class TdRadioButton extends UI implements ITdRadioButton {
+export declare class TdRadioButton extends TypeLabel implements ITdRadioButton {
     className: 'TdRadioButton';
     inputOriginal: Input;
     radioLabel: Span;

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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRadioButton = void 0;
 const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_button_style_1 = require("../../basic/td-button/td-button.style");
 const td_radio_group_class_1 = require("../td-radio-group/td-radio-group.class");
-class TdRadioButton extends ui_abstract_1.UI {
+class TdRadioButton extends framework_1.TypeLabel {
     constructor(params = {}) {
-        super(params, 'label');
+        super();
         this.className = 'TdRadioButton';
         this.attr.addName('radio-button');
         this.style.addObj({
@@ -61,7 +61,7 @@ class TdRadioButton extends ui_abstract_1.UI {
                 // color: $buttonTextColor.default,
                 // transition: getCssVar('transition-all'),
                 fontSize: var_1.$fontSizes.base,
-                padding: var_1.$paddingVerticalMap.default + ' ' + var_1.$paddingHorizontalMap.default
+                padding: td_button_style_1.$buttonPaddingVertical.default + ' ' + td_button_style_1.$buttonPaddingHorizontal.default
             }
         });
         this.addChildren(this.inputOriginal, this.radioLabel);
@@ -93,11 +93,11 @@ class TdRadioButton extends ui_abstract_1.UI {
             height: var_1.$commonComponentSize[size]
         });
         this.radioLabel.style.addObj({
-            padding: var_1.$paddingVerticalMap[size] + ' ' + var_1.$paddingHorizontalMap[size],
+            padding: td_button_style_1.$buttonPaddingVertical[size] + ' ' + td_button_style_1.$buttonPaddingHorizontal[size],
             fontSize: var_1.$fontSizes[size]
         });
         if (props === null || props === void 0 ? void 0 : props.isFirst) {
-            const radius = var_1.$borderRadiusMap[size];
+            const radius = td_button_style_1.$buttonBorderRadius[size];
             this.radioLabel.style.addObj({
                 borderRadius: radius + ' 0 0 ' + radius
             });
@@ -108,13 +108,13 @@ class TdRadioButton extends ui_abstract_1.UI {
             });
         }
         if (props === null || props === void 0 ? void 0 : props.isLast) {
-            const radius = var_1.$borderRadiusMap[size];
+            const radius = td_button_style_1.$buttonBorderRadius[size];
             this.radioLabel.style.addObj({
                 borderRadius: '0 ' + radius + ' ' + radius + ' 0'
             });
         }
         if (props === null || props === void 0 ? void 0 : props.checked) {
-            this.setChecked(props === null || props === void 0 ? void 0 : props.checked);
+            this.setChecked(!!(props === null || props === void 0 ? void 0 : props.checked));
         }
         if (props === null || props === void 0 ? void 0 : props.disabled) {
             this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
@@ -149,7 +149,7 @@ class TdRadioButton extends ui_abstract_1.UI {
         this.disabled = disabled;
         if (disabled) {
             this.style.setObj({
-                cursor: 'notAllowed',
+                cursor: 'not-allowed',
                 opacity: 0.5
                 //   禁用事件
                 //   pointerEvents: 'none',

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

@@ -1,9 +1,9 @@
+import { ITypeConfig, ITypeLabel } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdRadioButton extends IUI {
+export interface ITdRadioButton extends ITypeLabel {
     className: 'TdRadioButton';
 }
-export interface ITdRadioButtonConfig extends IUIConfig {
+export interface ITdRadioButtonConfig extends ITypeConfig {
     /**
      * @description binding value
      */

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

@@ -1,12 +1,9 @@
-import { IJsonData, IJsonDataProp, IPrimitive } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-import { TdRadio } from '../td-radio/td-radio.class';
+import { IJsonData, IJsonDataProp, IPrimitive, TypeDiv } from '@type-dom/framework';
 import { ITdRadioConfig } from '../td-radio/td-radio.interface';
 import { ITdRadioGroup, ITdRadioGroupConfig } from './td-radio-group.interface';
-export declare class TdRadioGroup extends UI implements ITdRadioGroup {
+export declare class TdRadioGroup extends TypeDiv implements ITdRadioGroup {
     className: 'TdRadioGroup';
     disabled?: boolean;
-    childNodes: TdRadio[];
     props: ITdRadioGroupConfig;
     constructor(params?: ITdRadioGroupConfig);
     get resultValue(): IPrimitive | IJsonData | IJsonDataProp[];

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

@@ -2,13 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRadioGroup = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_radio_class_1 = require("../td-radio/td-radio.class");
 const td_radio_button_class_1 = require("../td-radio-button/td-radio-button.class");
-class TdRadioGroup extends ui_abstract_1.UI {
+class TdRadioGroup extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdRadioGroup';
+        this.attr.addObj({
+            name: 'td-radio-group'
+        });
         this.style.addObj({
             display: 'inline-flex',
             alignItems: 'center',
@@ -16,7 +18,6 @@ class TdRadioGroup extends ui_abstract_1.UI {
             fontSize: '0',
             marginRight: '12px',
         });
-        this.childNodes = [];
         this.props = this.useParams(params);
     }
     get resultValue() {
@@ -92,13 +93,15 @@ class TdRadioGroup extends ui_abstract_1.UI {
         }
         // console.error('value is ', value);
         this.childNodes.forEach((opt) => {
-            if (String(opt.inputOriginal.attr.get('value')) === String(value)) {
-                // 设置选中样式
-                opt.setChecked(true);
-            }
-            else {
-                // 设置非选中样式
-                opt.setChecked(false);
+            if (opt instanceof td_radio_class_1.TdRadio) {
+                if (String(opt.inputOriginal.attr.get('value')) === String(value)) {
+                    // 设置选中样式
+                    opt.setChecked(true);
+                }
+                else {
+                    // 设置非选中样式
+                    opt.setChecked(false);
+                }
             }
         });
     }

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

@@ -1,11 +1,10 @@
+import { IJsonData, IPrimitive, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { ITdRadioConfig } from '../td-radio/td-radio.interface';
-import { IJsonData, IPrimitive, XProxy } from '@type-dom/framework';
-export interface ITdRadioGroup extends IUI {
+export interface ITdRadioGroup extends ITypeDiv {
     className: 'TdRadioGroup';
 }
-export interface ITdRadioGroupConfig extends IUIConfig {
+export interface ITdRadioGroupConfig extends ITypeConfig {
     isButton?: boolean;
     options?: ITdRadioConfig[];
     /**

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

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
 import { ITdSelectDropdown, ITdSelectDropdownConfig } from './dropdown.interface';
-export declare class TdSelectDropDown extends UI implements ITdSelectDropdown {
+import { TypeDiv } from '@type-dom/framework';
+export declare class TdSelectDropDown extends TypeDiv implements ITdSelectDropdown {
     className: 'TdSelectDropdown';
     props: ITdSelectDropdownConfig;
     private header?;

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

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSelectDropDown = void 0;
 const var_1 = require("../../../../styles/var");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
 const td_select_style_1 = require("../td-select.style");
-class TdSelectDropDown extends ui_abstract_1.UI {
+class TdSelectDropDown extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdSelectDropdown';
         this.style.addObj({
             // z-index: calc(#{getCssVar('index-top')} + 1);

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

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdSelectDropdown extends IUI {
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+export interface ITdSelectDropdown extends ITypeDiv {
     className: 'TdSelectDropdown';
 }
-export interface ITdSelectDropdownConfig extends IUIConfig {
+export interface ITdSelectDropdownConfig extends ITypeConfig {
     header?: TypeElement;
     footer?: TypeElement;
 }

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

@@ -1,8 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
-import { IUIConfig } from '../../../ui/ui.interface';
-import { ITdSelect } from './td-select.interface';
-export declare class TdSelect extends UI implements ITdSelect {
+import { TypeDiv } from '@type-dom/framework';
+import { ITdSelect, ITdSelectConfig } from './td-select.interface';
+export declare class TdSelect extends TypeDiv implements ITdSelect {
     className: 'TdSelect';
-    props: IUIConfig;
-    constructor(params?: IUIConfig);
+    constructor(params?: ITdSelectConfig);
 }

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

@@ -2,15 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSelect = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_tooltip_class_1 = require("../../feedback/td-tooltip/td-tooltip.class");
 const dropdown_class_1 = require("./dropdown/dropdown.class");
-const td_select_style_1 = require("./td-select.style");
-class TdSelect extends ui_abstract_1.UI {
+class TdSelect extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdSelect';
-        this.style.addObj(td_select_style_1.$select);
+        // this.style.addObj($select); // todo 应该是 $selectStyle
         this.addChild(new td_tooltip_class_1.TdTooltip({
             slot: [
                 new framework_1.Div({
@@ -20,7 +18,7 @@ class TdSelect extends ui_abstract_1.UI {
                     name: 'content',
                     childNodes: [
                         new dropdown_class_1.TdSelectDropDown({
-                            name: 'content-inner',
+                            name: 'content-inner'
                         })
                     ]
                 })