@type-dom/ui 0.0.8 → 0.0.10

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

@@ -7,14 +7,14 @@ class TdCheckboxGroup extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdCheckboxGroup';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             role: 'group',
             // ariaLabel: !config.isLabeledByFormItem ? config?.ariaLabel || 'checkbox-group' : undefined,
             // aria-labelledby="isLabeledByFormItem ? formItem?.labelId : undefined"
         });
-        this.ctrl.addStyleObj(td_checkbox_style_1.$checkboxGroupStyle);
+        this.style.addObj(td_checkbox_style_1.$checkboxGroupStyle);
         this.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdCheckboxGroup = TdCheckboxGroup;

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

@@ -16,13 +16,15 @@ class TdForm extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'form');
         this.className = 'TdForm';
-        this.ctrl.addAttrName('td-form');
+        this.attr.addName('td-form');
         this.provide(td_form_const_1.formContextKey, params); // 要在form-item 中 inject
-        this.addChild(this.getSlotNode());
+        if (params.slot) {
+            this.slotChild(params.slot);
+        }
         if (params === null || params === void 0 ? void 0 : params.model) {
             this.model = params.model;
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdForm = TdForm;

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

@@ -13,8 +13,8 @@ class TdFormItem extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdFormItem';
-        this.ctrl.addAttrName('td-form-item');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-form-item');
+        this.style.addObj({
             display: 'flex',
             // --font-size: 14px,
             fontSize: var_1.$fontSizes[(params === null || params === void 0 ? void 0 : params.size) || 'base'],
@@ -64,7 +64,7 @@ class TdFormItem extends ui_abstract_1.UI {
         // this.content.addChild(this.error);
         this.addChild(this.content);
         this.content.addChild(this.getSlotNode());
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     created() {
         // inject 要在 created 之中，否则无法确定 parent .
@@ -75,7 +75,7 @@ class TdFormItem extends ui_abstract_1.UI {
         // 下面的方法要调用到 this.parent 才能获取到。需要 form的setConfig 方法调用后
     }
     setup() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        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({
@@ -102,7 +102,7 @@ class TdFormItem extends ui_abstract_1.UI {
             else {
                 const labelWidth = (0, utils_1.addUnit)(props.labelWidth || ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.props.labelWidth) || '120px');
                 if (labelWidth) {
-                    this.label.ctrl.addStyleObj({
+                    this.label.style.addObj({
                         width: labelWidth,
                     });
                 }
@@ -117,17 +117,17 @@ class TdFormItem extends ui_abstract_1.UI {
                 }));
             }
             (_d = this.labelWrap) === null || _d === void 0 ? void 0 : _d.addChild(this.label);
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 display: ((_e = this.parent) === null || _e === void 0 ? void 0 : _e.props.inline) ? 'inline-flex' : 'flex',
                 verticalAlign: 'middle',
                 marginRight: ((_f = this.parent) === null || _f === void 0 ? void 0 : _f.props.inline)
                     ? '32px'
-                    : (_g = this.props.styleObj) === null || _g === void 0 ? void 0 : _g.marginRight,
+                    : this.style.get('marginRight'),
                 // justifyContent: justifyContent,
             });
-            this.setLabelPosition((_h = this.parent) === null || _h === void 0 ? void 0 : _h.props.labelPosition);
-            this.setSize((_j = this.parent) === null || _j === void 0 ? void 0 : _j.props.size);
-            this.setLabelWidth((_k = this.parent) === null || _k === void 0 ? void 0 : _k.props.labelWidth);
+            this.setLabelPosition((_g = this.parent) === null || _g === void 0 ? void 0 : _g.props.labelPosition);
+            this.setSize((_h = this.parent) === null || _h === void 0 ? void 0 : _h.props.size);
+            this.setLabelWidth((_j = this.parent) === null || _j === void 0 ? void 0 : _j.props.labelWidth);
         }
     }
     // 待实现：设置子元素的labelWidth
@@ -136,31 +136,31 @@ class TdFormItem extends ui_abstract_1.UI {
         if (width === undefined) {
             return;
         }
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
             width: (0, utils_1.addUnit)(width),
         });
     }
     setLabelPosition(position) {
         var _a;
         // todo top 怎么处理 ？
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
             justifyContent: position === 'left' ? 'flex-start' : 'flex-end',
         });
     }
     setSize(size = 'default') {
         var _a, _b;
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             fontSize: var_1.$fontSizes[size],
             marginBottom: td_form_item_style_1.$formItemMarginBottom[size],
         });
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.style.addObj({
             height: td_form_item_style_1.$formItemLineHeight[size],
             lineHeight: td_form_item_style_1.$formItemLineHeight[size],
         });
-        this.content.ctrl.addStyleObj({
+        this.content.style.addObj({
             lineHeight: td_form_item_style_1.$formItemLineHeight[size],
         });
-        (_b = this.error) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+        (_b = this.error) === null || _b === void 0 ? void 0 : _b.style.addObj({
             paddingTop: td_form_item_style_1.$formItemErrorPaddingTop[size],
         });
     }

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

@@ -8,27 +8,27 @@ class TdInputField extends field_input_abstract_1.FieldInput {
         super(params.labelTitle, params.placeholder);
         console.log('InputItem constructor . ');
         this.className = 'TdInputField';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             padding: '2px 10px 2px 0'
         });
-        this.ctrl.addAttrName('input-item');
-        this.label.ctrl.addStyleObj({
+        this.attr.addName('input-item');
+        this.label.style.addObj({
             fontSize: '16px',
             width: params.labelWidth || '150px'
         });
-        this.content.ctrl.addAttrObj({
+        this.content.attr.addObj({
             type: (params === null || params === void 0 ? void 0 : params.type) || 'text'
         });
         // todo 有后缀时才需要这样
-        // this.content.ctrl.addStyleObj({
+        // this.content.style.addObj({
         //   borderRadius: '4px 0 0 4px',
         // });
         if (params.readonly) {
-            this.content.ctrl.addAttrObj({
+            this.content.attr.addObj({
                 disabled: true
             });
         }
-        // this.button.ctrl.setStyleObj({
+        // this.button.style.setObj({
         //   display: 'inline-block',
         //   padding: '4px 3px',
         //   fontSize: '14px',
@@ -44,7 +44,7 @@ class TdInputField extends field_input_abstract_1.FieldInput {
         //   OfdEditor.selectedControl?.resetLabelText(this.content.dom.value);
         //   return;
         // }
-        // if (this.props.styleObj.display === 'none') this.setStyle('display', 'block');
+        // if (this.style.get('display') === 'none') this.setStyle('display', 'block');
         // if (OfdEditor.selectedControl?.formItem.labelText?.text) {
         //   this.resetInputValue(OfdEditor.selectedControl.formItem.labelText.text);
         // } else {

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

@@ -14,7 +14,6 @@ export declare class TdInput extends UI implements ITdInput {
     constructor(params?: ITdInputConfig);
     get value(): string;
     setup(): void;
-    initEvents(): void;
     setModelValue(value: IJsonDataProp): void;
     setHovering(hovering: boolean): void;
     setFocus(isFocused: boolean): void;

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

@@ -13,11 +13,11 @@ class TdInput extends ui_abstract_1.UI {
         super(params);
         console.log('TdInput constructor . ');
         this.className = 'TdInput';
-        this.ctrl.addAttrName('td-input');
-        this.ctrl.addAttrObj({
+        this.attr.addName('td-input');
+        this.attr.addObj({
             tabIndex: 0
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             position: 'relative',
             display: 'inline-flex',
             width: '100%',
@@ -33,7 +33,7 @@ class TdInput extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.modelValue) {
             this.modelValue = params.modelValue;
         }
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     get value() {
         return this.panel.inner.value;
@@ -41,7 +41,7 @@ class TdInput extends ui_abstract_1.UI {
     setup() {
         const props = this.props;
         if (props === null || props === void 0 ? void 0 : props.width) {
-            this.ctrl.addWidth(props.width);
+            this.style.addWidth(props.width);
         }
         //   todo
         if ((props === null || props === void 0 ? void 0 : props.type) === 'textarea') {
@@ -60,8 +60,6 @@ class TdInput extends ui_abstract_1.UI {
         if (!(props === null || props === void 0 ? void 0 : props.formatter) && (props === null || props === void 0 ? void 0 : props.parser)) {
             throw new Error('If you set the parser, you also need to set the formatter');
         }
-    }
-    initEvents() {
         if (this.props.disabled) {
             return;
         }
@@ -172,14 +170,14 @@ class TdInput extends ui_abstract_1.UI {
         this.hovering = hovering;
         if (hovering) {
             if (!this.isFocused) {
-                (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
+                (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.setObj({
                     boxShadow: '0 0 0 1px ' + td_input_style_1.$input.hoverBorderColor + ' inset'
                 });
             }
         }
         else {
             if (!this.isFocused) {
-                (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
+                (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.setObj({
                     boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
                 });
             }
@@ -189,12 +187,12 @@ class TdInput extends ui_abstract_1.UI {
         var _a, _b;
         this.isFocused = isFocused;
         if (isFocused) {
-            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
+            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.setObj({
                 boxShadow: '0 0 0 1px ' + td_input_style_1.$input.focusBorderColor + ' inset'
             });
         }
         else {
-            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
+            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.setObj({
                 boxShadow: '0 0 0 1px ' + td_input_style_1.$input.borderColor + ' inset'
             });
         }

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

@@ -9,7 +9,7 @@ class TdInputPrefix extends framework_1.TypeSpan {
         super();
         this.parent = parent;
         this.className = 'TdInputPrefix';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: (config === null || config === void 0 ? void 0 : config.prefixIcon) ? 'inline-flex' : 'none',
             whiteSpace: 'nowrap',
             flexShrink: 0,

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

@@ -10,7 +10,7 @@ class TdInputSuffix extends framework_1.TypeSpan {
         super();
         this.parent = parent;
         this.className = 'TdInputSuffix';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: this.parent.suffixVisible ? 'inline-flex' : 'none',
             whiteSpace: 'nowrap',
             flexShrink: 0,
@@ -80,12 +80,12 @@ class TdInputSuffix extends framework_1.TypeSpan {
                         this.parent.passwordVisible = !this.parent.passwordVisible;
                         (_a = this.passwordIcon) === null || _a === void 0 ? void 0 : _a.replaceSvg(this.parent.passwordVisible ? new svgs_1.ElViewSvg() : new svgs_1.ElHideSvg());
                         if (this.parent.passwordVisible) {
-                            this.parent.inner.ctrl.setAttrObj({
+                            this.parent.inner.attr.setObj({
                                 type: 'text'
                             });
                         }
                         else {
-                            this.parent.inner.ctrl.setAttrObj({
+                            this.parent.inner.attr.setObj({
                                 type: 'password'
                             });
                         }

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdInputWrapper = void 0;
 const framework_1 = require("@type-dom/framework");
+const use_cursor_1 = require("../../../../hooks/use-cursor");
 const var_1 = require("../../../../styles/var");
 const td_input_style_1 = require("../td-input.style");
 const suffix_1 = require("./suffix");
@@ -11,7 +12,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
         super();
         this.className = 'TdInputWrapper';
         this.parent = params === null || params === void 0 ? void 0 : params.parent;
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'inline-flex',
             flexGrow: 1,
             alignItems: 'center',
@@ -118,7 +119,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
         this.addChild(this.inner);
         this.suffix = new suffix_1.TdInputSuffix(this, params);
         this.addChild(this.suffix);
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
@@ -126,7 +127,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
             //   todo
         }
         if (props === null || props === void 0 ? void 0 : props.size) {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 padding: td_input_style_1.$wrapperPadding[props.size || 'default'],
                 fontSize: td_input_style_1.$inputFontSize[props.size || 'default'],
                 height: td_input_style_1.$inputHeight[props.size || 'default']
@@ -175,8 +176,8 @@ class TdInputWrapper extends framework_1.TypeDiv {
     }
     setDisabled(disabled) {
         if (disabled) {
-            this.inner.ctrl.setAttrObj({ disabled: 'disabled' });
-            this.inner.ctrl.setStyleObj({
+            this.inner.attr.setObj({ disabled: 'disabled' });
+            this.inner.style.setObj({
                 // color: var(--el-disabled-text-color),
                 color: var_1.$textColor.disabled,
                 // -webkit-text-fill-color: var(--el-disabled-text-color),
@@ -185,8 +186,8 @@ class TdInputWrapper extends framework_1.TypeDiv {
             });
         }
         else {
-            this.inner.ctrl.removeAttribute('disabled');
-            this.inner.ctrl.setStyleObj({
+            this.inner.attr.remove('disabled');
+            this.inner.style.setObj({
                 // color: var(--el-text-color),
                 color: var_1.$textColor.regular,
                 // -webkit-text-fill-color: var(--el-text-color),
@@ -227,12 +228,12 @@ class TdInputWrapper extends framework_1.TypeDiv {
     setShowClear(showClear) {
         var _a;
         console.log('setShowClear . showClear is ', showClear);
-        this.suffix.ctrl.show(this.suffixVisible ? 'inline-flex' : 'none');
-        (_a = this.suffix.clearIcon) === null || _a === void 0 ? void 0 : _a.ctrl.show(showClear ? 'inline-flex' : 'none');
+        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');
     }
     setShowPassword(showPassword) {
         var _a;
-        (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.ctrl.show(showPassword ? 'inline-flex' : 'none');
+        (_a = this.suffix.passwordIcon) === null || _a === void 0 ? void 0 : _a.style.show(showPassword ? 'inline-flex' : 'none');
     }
     setNativeInputValue() {
         console.log('setNativeInputValue . ');
@@ -246,7 +247,7 @@ class TdInputWrapper extends framework_1.TypeDiv {
     }
     handleInput(event, element) {
         console.log('input . this is ', this);
-        const [recordCursor, setCursor] = (0, framework_1.useCursor)(element === null || element === void 0 ? void 0 : element.dom);
+        const [recordCursor, setCursor] = (0, use_cursor_1.useCursor)(element === null || element === void 0 ? void 0 : element.dom);
         recordCursor();
         let { value } = event === null || event === void 0 ? void 0 : event.target;
         if (this.props.formatter) {

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

@@ -8,7 +8,7 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TextareaWrapper';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             position: 'relative',
             display: 'inline-block',
             width: '100%',
@@ -100,7 +100,7 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
         });
         this.addChildren(this.inner, this.countSpan);
         // this.childNodes = [this.inner, this.countSpan];
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
     // todo
     handleInput(event, element) {
@@ -110,7 +110,7 @@ class TdTextareaWrapper extends framework_1.TypeDiv {
         if (this.isComposing)
             return;
         if (this.props.autosize) {
-            this.inner.ctrl.setStyleObj({
+            this.inner.style.setObj({
                 // height: 'auto',
                 height: this.inner.dom.scrollHeight + 'px'
             });

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.js

@@ -7,11 +7,11 @@ class TdOption extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'li');
         this.className = 'TdOption';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'td-option',
             role: 'option'
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             // font-size: map.get($select, 'font-size'),
             fontSize: td_select_style_1.$select.fontSize, // $fontSizes.base,
             // 20 as the padding of option item, 12 as the size of ✓ icon size
@@ -29,7 +29,7 @@ class TdOption extends ui_abstract_1.UI {
             boxSizing: 'border-box',
             cursor: 'pointer'
         });
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdOption = TdOption;

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

@@ -8,10 +8,10 @@ class TdOptionGroup extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'ul');
         this.className = 'TdOptionGroup';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'option-group-wrap'
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             margin: '0',
             padding: '0',
             position: 'relative',
@@ -44,7 +44,7 @@ class TdOptionGroup extends ui_abstract_1.UI {
                 })
             ]
         }));
-        this.props = this.setProps(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdOptionGroup = TdOptionGroup;

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

@@ -13,5 +13,4 @@ export declare class TdRadio extends UI implements ITdRadio {
     setup(): void;
     setDisabled(disabled?: boolean): void;
     setChecked(checked: boolean): void;
-    initEvents(): void;
 }