@type-dom/ui 0.0.4 → 0.0.5

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

@@ -1,2 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//
+// export type FormContext = FormProps &
+//   UnwrapRef<FormLabelWidthContext> & {
+//   emit: SetupContext<FormEmits>['emit']
+//   getField: (prop: string) => FormItemContext | undefined
+//   addField: (field: FormItemContext) => void
+//   removeField: (field: FormItemContext) => void
+//   resetFields: (props?: Arrayable<FormItemProp>) => void
+//   clearValidate: (props?: Arrayable<FormItemProp>) => void
+//   validateField: (
+//     props?: Arrayable<FormItemProp>,
+//     callback?: FormValidateCallback
+//   ) => FormValidationResult
+// }
+//
+// export interface FormItemContext extends FormItemProps {
+//   $el: HTMLDivElement | undefined
+//   size: ComponentSize
+//   validateState: FormItemValidateState
+//   isGroup: boolean
+//   labelId: string
+//   inputIds: string[]
+//   hasLabel: boolean
+//   fieldValue: any
+//   addInputId: (id: string) => void
+//   removeInputId: (id: string) => void
+//   validate: (
+//     trigger: string,
+//     callback?: FormValidateCallback
+//   ) => FormValidationResult
+//   resetField(): void
+//   clearValidate(): void
+// }

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

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

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

@@ -5,140 +5,163 @@ 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_item_style_1 = require("./td-form-item.style");
 class TdFormItem extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    // new TdFormItem 是 发生在 TdForm slotChild 之前的。
+    constructor(params) {
+        super(params);
         this.className = 'TdFormItem';
-        this.addAttrName('td-form-item');
-        this.addStyleObj({
+        this.ctrl.addAttrName('td-form-item');
+        this.ctrl.addStyleObj({
             display: 'flex',
             // --font-size: 14px,
-            fontSize: var_1.$fontSizes[(config === null || config === void 0 ? void 0 : config.size) || 'base'],
-            marginBottom: td_form_item_style_1.$formItemMarginBottom[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+            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'],
         });
-        this.labelWrap = new framework_1.Div({
-            attrObj: {
-                name: 'td-form-item-label-wrap'
-            },
-            styleObj: {
-                display: 'flex'
-                // marginLeft: '11px', // 这个是动态计算的
-            }
-        });
-        if (config === null || config === void 0 ? void 0 : config.label) {
+        if (params === null || params === void 0 ? void 0 : params.label) {
+            this.labelWrap = new framework_1.Div({
+                name: 'td-form-item-label-wrap',
+                styleObj: {
+                    display: 'flex',
+                    // marginLeft: '11px', // 这个是动态计算的
+                },
+            });
             this.addChild(this.labelWrap);
         }
         this.content = new framework_1.Div({
-            attrObj: {
-                name: 'td-form-item-content'
-            },
+            name: 'td-form-item-content',
             styleObj: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 alignItems: 'center',
                 flex: 1,
-                justifyContent: (config === null || config === void 0 ? void 0 : config.contentAlign) || 'left',
+                justifyContent: (params === null || params === void 0 ? void 0 : params.contentAlign) || 'left',
                 lineHeight: '32px',
                 position: 'relative',
                 // font-size: var(--font-size),
                 fontSize: var_1.$fontSizes.base,
-                minWidth: 0
-            }
+                minWidth: 0,
+            },
         });
         this.error = new framework_1.Div({
             text: 'Please input the ... ',
-            attrObj: {
-                name: 'td-form-item-error'
-            },
+            name: 'td-form-item-error',
             styleObj: {
                 // color: getCssVar('color-danger');
                 color: var_1.$colors.danger.base,
                 fontSize: '12px',
                 lineHeight: '1',
                 // padding-top: #{map.get($form-item-error-padding-top, 'default')},
-                paddingTop: td_form_item_style_1.$formItemErrorPaddingTop[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                paddingTop: td_form_item_style_1.$formItemErrorPaddingTop[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
                 position: 'absolute',
                 top: '100%',
-                left: '0'
-            }
+                left: '0',
+            },
         });
         // todo 动态加载
         // this.content.addChild(this.error);
         this.addChild(this.content);
-        if (config === null || config === void 0 ? void 0 : config.contents) {
-            this.content.addChildren(...config.contents);
-        }
+        this.content.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
+    }
+    created() {
+        // inject 要在 created 之中，否则无法确定 parent .
+        // this.formConfig = this.inject(formContextKey);
+        // 就是 this.parent.params , 有必要单独引入一次吗？
+        // console.log('this.formConfig is ', this.formConfig);
         // this.childNodes = [this.labelWrap, this.content];
-        this.setConfig(config);
+        // 下面的方法要调用到 this.parent 才能获取到。需要 form的setConfig 方法调用后
     }
-    setConfig(config) {
-        var _a, _b, _c, _d, _e, _f;
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.label) {
+    setup() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.label) {
             this.label = new framework_1.Label({
-                text: config.label,
+                text: props.label,
                 styleObj: {
                     display: 'inline-flex',
                     justifyContent: 'flex-end',
                     alignItems: 'flex-start',
                     flex: '0 0 auto',
                     // font-size: var(--el-form-label-font-size),
-                    fontSize: var_1.$fontSizes[(config === null || config === void 0 ? void 0 : config.size) || 'base'],
+                    fontSize: var_1.$fontSizes[(props === null || props === void 0 ? void 0 : props.size) || 'base'],
                     // color: var(--el-text-color-regular),
                     color: var_1.$textColor.regular,
                     height: '32px',
                     lineHeight: '32px',
                     padding: '0 12px 0 0',
-                    boxSizing: 'border-box'
-                    // width: config?.labelWidth || this.parent?.config?.labelWidth || '',
-                }
+                    boxSizing: 'border-box',
+                    // width: props?.labelWidth || this.parent?.props.labelWidth || '',
+                },
             });
-            if (((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.labelPosition) === 'top') {
+            if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.props.labelPosition) === 'top') {
                 //   todo
             }
             else {
-                const labelWidth = (0, utils_1.addUnit)(config.labelWidth || ((_d = (_c = this.parent) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.labelWidth) || '120px');
+                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.addStyleObj({
-                        width: labelWidth
+                    this.label.ctrl.addStyleObj({
+                        width: labelWidth,
                     });
                 }
             }
-            if (config.required) {
-                (_e = this.label) === null || _e === void 0 ? void 0 : _e.unshiftChild(new framework_1.Span({
+            if (props.required) {
+                (_c = this.label) === null || _c === void 0 ? void 0 : _c.unshiftChild(new framework_1.Span({
                     text: '*',
                     styleObj: {
                         color: var_1.$colors.danger.base,
-                        marginRight: '4px'
-                    }
+                        marginRight: '4px',
+                    },
                 }));
             }
-            (_f = this.labelWrap) === null || _f === void 0 ? void 0 : _f.addChild(this.label);
+            (_d = this.labelWrap) === null || _d === void 0 ? void 0 : _d.addChild(this.label);
+            this.ctrl.addStyleObj({
+                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,
+                // 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);
         }
     }
+    // 待实现：设置子元素的labelWidth
+    setLabelWidth(width) {
+        var _a;
+        if (width === undefined) {
+            return;
+        }
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+            width: (0, utils_1.addUnit)(width),
+        });
+    }
     setLabelPosition(position) {
         var _a;
         // todo top 怎么处理 ？
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.setStyleObj({
-            justifyContent: position === 'left' ? 'flex-start' : 'flex-end'
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
+            justifyContent: position === 'left' ? 'flex-start' : 'flex-end',
         });
     }
     setSize(size = 'default') {
         var _a, _b;
-        this.setStyleObj({
+        this.ctrl.addStyleObj({
             fontSize: var_1.$fontSizes[size],
-            marginBottom: td_form_item_style_1.$formItemMarginBottom[size]
+            marginBottom: td_form_item_style_1.$formItemMarginBottom[size],
         });
-        (_a = this.label) === null || _a === void 0 ? void 0 : _a.setStyleObj({
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.ctrl.addStyleObj({
             height: td_form_item_style_1.$formItemLineHeight[size],
-            lineHeight: td_form_item_style_1.$formItemLineHeight[size]
+            lineHeight: td_form_item_style_1.$formItemLineHeight[size],
         });
-        this.content.setStyleObj({
-            lineHeight: td_form_item_style_1.$formItemLineHeight[size]
+        this.content.ctrl.addStyleObj({
+            lineHeight: td_form_item_style_1.$formItemLineHeight[size],
         });
-        (_b = this.error) === null || _b === void 0 ? void 0 : _b.setStyleObj({
-            paddingTop: td_form_item_style_1.$formItemErrorPaddingTop[size]
+        (_b = this.error) === null || _b === void 0 ? void 0 : _b.ctrl.addStyleObj({
+            paddingTop: td_form_item_style_1.$formItemErrorPaddingTop[size],
         });
     }
 }

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

@@ -1,8 +1,7 @@
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { ISize } from '../../../styles/size';
-import { TypeNode } from '@type-dom/framework';
 export declare const formItemValidateStates: readonly ["", "error", "validating", "success"];
-export type IFormItemValidateState = typeof formItemValidateStates[number];
+export type IFormItemValidateState = (typeof formItemValidateStates)[number];
 export interface ITdFormItem extends IUI {
     className: 'TdFormItem';
 }
@@ -50,7 +49,6 @@ export interface ITdFormItemConfig extends IUIConfig {
      * @description Control the size of components in this form-item.
      */
     size?: ISize;
-    contents?: TypeNode[];
     contentAlign?: 'left' | 'right' | 'center';
     labelPosition?: ILabelPosition;
 }

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

@@ -8,27 +8,27 @@ exports.$formItem = {
 };
 exports.$formItemLabel = {};
 exports.$formItemMarginBottom = {
-    'large': '22px',
-    'default': '18px',
-    'small': '18px'
+    large: '22px',
+    default: '18px',
+    small: '18px'
 };
 exports.$formItemLineHeight = {
-    'large': '40px',
-    'default': '32px',
-    'small': '24px'
+    large: '40px',
+    default: '32px',
+    small: '24px'
 };
 exports.$formItemErrorPaddingTop = {
-    'large': '4px',
-    'default': '2px',
-    'small': '2px'
+    large: '4px',
+    default: '2px',
+    small: '2px'
 };
 exports.$formItemLabelTopLineHeight = {
-    'large': '22px',
-    'default': '22px',
-    'small': '20px'
+    large: '22px',
+    default: '22px',
+    small: '20px'
 };
 exports.$formItemLabelTopMarginBottom = {
-    'large': '12px',
-    'default': '8px',
-    'small': '4px'
+    large: '12px',
+    default: '8px',
+    small: '4px'
 };

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

@@ -2,6 +2,6 @@ import { FieldInput } from '../field-item/input/field-input.abstract';
 import { ITdInputField, ITdInputFieldConfig } from './td-input-field.interface';
 export declare class TdInputField extends FieldInput implements ITdInputField {
     className: 'TdInputField';
-    constructor(config: Partial<ITdInputFieldConfig>);
+    constructor(params: ITdInputFieldConfig);
     reset(value?: string): void;
 }

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

@@ -4,31 +4,31 @@ exports.TdInputField = void 0;
 const field_input_abstract_1 = require("../field-item/input/field-input.abstract");
 // 标题属性
 class TdInputField extends field_input_abstract_1.FieldInput {
-    constructor(config) {
-        super(config.labelTitle, config.placeholder);
+    constructor(params) {
+        super(params.labelTitle, params.placeholder);
         console.log('InputItem constructor . ');
         this.className = 'TdInputField';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             padding: '2px 10px 2px 0'
         });
-        this.addAttrName('input-item');
-        this.label.addStyleObj({
+        this.ctrl.addAttrName('input-item');
+        this.label.ctrl.addStyleObj({
             fontSize: '16px',
-            width: config.labelWidth || '150px'
+            width: params.labelWidth || '150px'
         });
-        this.content.addAttrObj({
-            type: (config === null || config === void 0 ? void 0 : config.type) || 'text'
+        this.content.ctrl.addAttrObj({
+            type: (params === null || params === void 0 ? void 0 : params.type) || 'text'
         });
         // todo 有后缀时才需要这样
-        // this.content.addStyleObj({
+        // this.content.ctrl.addStyleObj({
         //   borderRadius: '4px 0 0 4px',
         // });
-        if (config.readonly) {
-            this.content.addAttrObj({
+        if (params.readonly) {
+            this.content.ctrl.addAttrObj({
                 disabled: true
             });
         }
-        // this.button.setStyleObj({
+        // this.button.ctrl.setStyleObj({
         //   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.styleObj.display === 'none') this.setStyle('display', 'block');
+        // if (this.props.styleObj.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-field.interface.d.ts

@@ -1,5 +1,5 @@
-import { TypeComponent } from '@type-dom/framework';
-export interface ITdInputField extends TypeComponent {
+import { ITypeDiv } from '@type-dom/framework';
+export interface ITdInputField extends ITypeDiv {
     className: 'TdInputField';
 }
 export interface ITdInputFieldConfig {

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

@@ -5,14 +5,15 @@ import { TdTextareaWrapper } from './widget/td-textarea-wrapper';
 import { ITdInput, ITdInputConfig } from './td-input.interface';
 export declare class TdInput extends UI implements ITdInput {
     className: 'TdInput';
-    config?: ITdInputConfig;
+    props: ITdInputConfig;
     private isWordLimitVisible?;
     hovering?: boolean;
     isFocused?: boolean;
     panel: TdInputWrapper | TdTextareaWrapper;
     private placeholder?;
-    constructor(config?: ITdInputConfig);
-    setConfig(config?: ITdInputConfig): void;
+    constructor(params?: ITdInputConfig);
+    get value(): string;
+    setup(): void;
     initEvents(): void;
     setModelValue(value: IJsonDataProp): void;
     setHovering(hovering: boolean): void;