@type-dom/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdForm = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_form_item_class_1 = require("../td-form-item/td-form-item.class");
+/**
+ * TdForm类继承自UI抽象类，实现ITdForm接口，用于创建和管理表单。
+ * 提交表单时，应该要获取所有子元素 form-item 里的 如 TdInput 这些可输入的组件的值。
+ * 表单提交地址也应该是可以配置的。
+ */
+class TdForm extends ui_abstract_1.UI {
+    /**
+     * 构造函数，初始化表单配置。
+     * @param {ITdFormConfig} config? 可选的表单配置对象。
+     */
+    constructor(config) {
+        super({ tag: 'form' });
+        this.className = 'TdForm';
+        this.addAttrName('td-form');
+        this.setConfig(config);
+    }
+    /**
+     * 设置表单配置，包括模型和样式配置，并应用到子元素。
+     * @param {ITdFormConfig} config? 可选的表单配置对象。
+     */
+    setConfig(config) {
+        super.setConfig(config);
+        // 应用模型数据
+        if (config === null || config === void 0 ? void 0 : config.model) {
+            this.model = config.model;
+        }
+        // 待实现：设置子元素的labelWidth
+        if (config === null || config === void 0 ? void 0 : config.labelWidth) {
+            //   todo 设置子元素的labelWidth
+        }
+        // 遍历子元素，应用样式和配置
+        this.children.forEach((child) => {
+            var _a, _b, _c, _d, _e;
+            if (child instanceof td_form_item_class_1.TdFormItem) {
+                child.addStyleObj({
+                    display: ((_a = this.config) === null || _a === void 0 ? void 0 : _a.inline) ? 'inline-flex' : 'flex',
+                    verticalAlign: 'middle',
+                    marginRight: ((_b = this.config) === null || _b === void 0 ? void 0 : _b.inline) ? '32px' : (_c = child.styleObj) === null || _c === void 0 ? void 0 : _c.marginRight,
+                    // justifyContent: justifyContent,
+                });
+                child.setLabelPosition((_d = this.config) === null || _d === void 0 ? void 0 : _d.labelPosition);
+                child.setSize((_e = this.config) === null || _e === void 0 ? void 0 : _e.size);
+            }
+        });
+    }
+}
+exports.TdForm = TdForm;

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

@@ -0,0 +1,92 @@
+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 {
+    className: 'TdForm';
+}
+export interface IFormRule {
+    required?: boolean;
+    validator?: (rule: any, value: any, callback: any) => boolean;
+    trigger?: string;
+    message?: string;
+    max?: number;
+    min?: number;
+    maxLength?: number;
+    minLength?: number;
+}
+export interface IFormRules {
+    [propName: string]: IFormRule[];
+}
+export interface ITdFormConfig extends IUIConfig {
+    /**
+     * @description Control the size of components in this form.
+     */
+    size?: ISize;
+    /**
+     * @description Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component.
+     */
+    disabled?: boolean;
+    /**
+     * @description Data of form component.
+     */
+    model?: object;
+    /**
+     * @description Validation rules of form.
+     */
+    rules?: IFormRules;
+    /**
+     * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.
+     *     default: 'right',
+     */
+    labelPosition?: 'left' | 'right' | 'top';
+    /**
+     * @description Position of asterisk.
+     *     default: 'left'
+     */
+    requireAsteriskPosition?: 'left' | 'right';
+    /**
+     * @description Width of label, e.g. `'50px'`. All its direct child form items will inherit this value. `auto` is supported.
+     *     default: '',
+     */
+    labelWidth?: string | number;
+    /**
+     * @description Suffix of the label.
+     *     default: '',
+     */
+    labelSuffix?: string;
+    /**
+     * @description Whether the form is inline.
+     */
+    inline?: boolean;
+    /**
+     * @description Whether to display the error message inline with the form item.
+     */
+    inlineMessage?: boolean;
+    /**
+     * @description Whether to display an icon indicating the validation result.
+     */
+    statusIcon?: boolean;
+    /**
+     * @description Whether to show the error message.
+     *     default: true,
+     */
+    showMessage?: boolean;
+    /**
+     * @description Whether to trigger validation when the `rules` prop is changed.
+     *     default: true,
+     */
+    validateOnRuleChange?: boolean;
+    /**
+     * @description Whether to hide required fields should have a red asterisk (star) beside their labels.
+     */
+    hideRequiredAsterisk?: boolean;
+    /**
+     * @description When validation fails, scroll to the first error form entry.
+     */
+    scrollToError?: boolean;
+    /**
+     * @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
+     */
+    scrollIntoViewOptions?: object | boolean;
+    options?: Array<ITdFormItemConfig>;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,4 @@
+export declare const $form: {
+    labelFontSize: string;
+    inlineContentWith: string;
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$form = void 0;
+const var_1 = require("../../../styles/var");
+exports.$form = {
+    labelFontSize: var_1.$fontSizes.base,
+    inlineContentWith: '220px'
+};

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

@@ -0,0 +1,17 @@
+import { Label } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+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';
+    parent?: TdForm;
+    private labelWrap?;
+    label?: Label;
+    private content;
+    private error?;
+    constructor(config?: ITdFormItemConfig);
+    setConfig(config?: ITdFormItemConfig): void;
+    setLabelPosition(position?: ILabelPosition): void;
+    setSize(size?: ISize): void;
+}

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

@@ -0,0 +1,145 @@
+"use strict";
+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");
+const td_form_item_style_1 = require("./td-form-item.style");
+class TdFormItem extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdFormItem';
+        this.addAttrName('td-form-item');
+        this.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']
+        });
+        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) {
+            this.addChild(this.labelWrap);
+        }
+        this.content = new framework_1.Div({
+            attrObj: {
+                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',
+                lineHeight: '32px',
+                position: 'relative',
+                // font-size: var(--font-size),
+                fontSize: var_1.$fontSizes.base,
+                minWidth: 0
+            }
+        });
+        this.error = new framework_1.Div({
+            text: 'Please input the ... ',
+            attrObj: {
+                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'],
+                position: 'absolute',
+                top: '100%',
+                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.childNodes = [this.labelWrap, this.content];
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        var _a, _b, _c, _d, _e, _f;
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.label) {
+            this.label = new framework_1.Label({
+                text: config.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'],
+                    // 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 || '',
+                }
+            });
+            if (((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.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');
+                if (labelWidth) {
+                    this.label.addStyleObj({
+                        width: labelWidth
+                    });
+                }
+            }
+            if (config.required) {
+                (_e = this.label) === null || _e === void 0 ? void 0 : _e.unshiftChild(new framework_1.Span({
+                    text: '*',
+                    styleObj: {
+                        color: var_1.$colors.danger.base,
+                        marginRight: '4px'
+                    }
+                }));
+            }
+            (_f = this.labelWrap) === null || _f === void 0 ? void 0 : _f.addChild(this.label);
+        }
+    }
+    setLabelPosition(position) {
+        var _a;
+        // todo top 怎么处理 ？
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.setStyleObj({
+            justifyContent: position === 'left' ? 'flex-start' : 'flex-end'
+        });
+    }
+    setSize(size = 'default') {
+        var _a, _b;
+        this.setStyleObj({
+            fontSize: var_1.$fontSizes[size],
+            marginBottom: td_form_item_style_1.$formItemMarginBottom[size]
+        });
+        (_a = this.label) === null || _a === void 0 ? void 0 : _a.setStyleObj({
+            height: 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]
+        });
+        (_b = this.error) === null || _b === void 0 ? void 0 : _b.setStyleObj({
+            paddingTop: td_form_item_style_1.$formItemErrorPaddingTop[size]
+        });
+    }
+}
+exports.TdFormItem = TdFormItem;

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

@@ -0,0 +1,57 @@
+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 interface ITdFormItem extends IUI {
+    className: 'TdFormItem';
+}
+export interface ITdFormItemConfig extends IUIConfig {
+    /**
+     * @description Label text.
+     */
+    label?: string;
+    /**
+     * @description Width of label, e.g. `'50px'`. `'auto'` is supported.
+     */
+    labelWidth?: string | number;
+    /**
+     * @description  A key of `model`. It could be an array of property paths (e.g `['a', 'b', '0']`). In the use of `validate` and `resetFields` method, the attribute is required.
+     */
+    /**
+     * @description Whether the field is required or not, will be determined by validation rules if omitted.
+     */
+    required?: boolean;
+    /**
+     * @description Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
+     */
+    /**
+     * @description Field error message, set its value and the field will validate error and show this message immediately.
+     */
+    error?: string;
+    /**
+     * @description Validation state of formItem.
+     */
+    validateStatus?: IFormItemValidateState;
+    /**
+     * @description Same as for in native label.
+     */
+    for?: string;
+    /**
+     * @description Inline style validate message.
+     */
+    inlineMessage?: string | boolean;
+    /**
+     * @description Whether to show the error message.
+     *     default: true,
+     */
+    showMessage?: boolean;
+    /**
+     * @description Control the size of components in this form-item.
+     */
+    size?: ISize;
+    contents?: TypeNode[];
+    contentAlign?: 'left' | 'right' | 'center';
+    labelPosition?: ILabelPosition;
+}
+export type ILabelPosition = 'left' | 'right' | 'top';

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formItemValidateStates = void 0;
+exports.formItemValidateStates = [
+    '',
+    'error',
+    'validating',
+    'success'
+];

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

@@ -0,0 +1,29 @@
+export declare const $formItem: {
+    display: string;
+};
+export declare const $formItemLabel: {};
+export declare const $formItemMarginBottom: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $formItemLineHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $formItemErrorPaddingTop: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $formItemLabelTopLineHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $formItemLabelTopMarginBottom: {
+    large: string;
+    default: string;
+    small: string;
+};

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$formItemLabelTopMarginBottom = exports.$formItemLabelTopLineHeight = exports.$formItemErrorPaddingTop = exports.$formItemLineHeight = exports.$formItemMarginBottom = exports.$formItemLabel = exports.$formItem = void 0;
+exports.$formItem = {
+    display: 'flex'
+    // --font-size: #{map.get($input-font-size, 'default')};
+    // margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
+};
+exports.$formItemLabel = {};
+exports.$formItemMarginBottom = {
+    'large': '22px',
+    'default': '18px',
+    'small': '18px'
+};
+exports.$formItemLineHeight = {
+    'large': '40px',
+    'default': '32px',
+    'small': '24px'
+};
+exports.$formItemErrorPaddingTop = {
+    'large': '4px',
+    'default': '2px',
+    'small': '2px'
+};
+exports.$formItemLabelTopLineHeight = {
+    'large': '22px',
+    'default': '22px',
+    'small': '20px'
+};
+exports.$formItemLabelTopMarginBottom = {
+    'large': '12px',
+    'default': '8px',
+    'small': '4px'
+};

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

@@ -0,0 +1,7 @@
+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>);
+    reset(value?: string): void;
+}

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

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdInput = void 0;
+exports.TdInputField = void 0;
 const field_input_abstract_1 = require("../field-item/input/field-input.abstract");
 // 标题属性
-class TdInput extends field_input_abstract_1.FieldInput {
+class TdInputField extends field_input_abstract_1.FieldInput {
     constructor(config) {
         super(config.labelTitle, config.placeholder);
         console.log('InputItem constructor . ');
-        this.className = 'TdInput';
+        this.className = 'TdInputField';
         this.addStyleObj({
-            padding: '2px 10px 2px 0',
+            padding: '2px 10px 2px 0'
         });
         this.addAttrName('input-item');
         this.label.addStyleObj({
             fontSize: '16px',
-            width: config.labelWidth || '150px',
+            width: config.labelWidth || '150px'
         });
         this.content.addAttrObj({
-            type: (config === null || config === void 0 ? void 0 : config.type) || 'text',
+            type: (config === null || config === void 0 ? void 0 : config.type) || 'text'
         });
         // todo 有后缀时才需要这样
         // this.content.addStyleObj({
@@ -25,7 +25,7 @@ class TdInput extends field_input_abstract_1.FieldInput {
         // });
         if (config.readonly) {
             this.content.addAttrObj({
-                disabled: true,
+                disabled: true
             });
         }
         // this.button.setStyleObj({
@@ -52,4 +52,4 @@ class TdInput extends field_input_abstract_1.FieldInput {
         // }
     }
 }
-exports.TdInput = TdInput;
+exports.TdInputField = TdInputField;

package/src/{form/td-input/td-input.interface.d.ts → components/form/td-input/td-input-field.interface.d.ts}

@@ -1,8 +1,8 @@
 import { TypeComponent } from '@type-dom/framework';
-export interface ITdInput extends TypeComponent {
-    className: 'TdInput';
+export interface ITdInputField extends TypeComponent {
+    className: 'TdInputField';
 }
-export interface ITdInputConfig {
+export interface ITdInputFieldConfig {
     labelTitle?: string;
     labelWidth?: string;
     placeholder?: string;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,21 @@
+import { IJsonDataProp } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+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 {
+    className: 'TdInput';
+    config?: ITdInputConfig;
+    private isWordLimitVisible?;
+    hovering?: boolean;
+    isFocused?: boolean;
+    panel: TdInputWrapper | TdTextareaWrapper;
+    private placeholder?;
+    constructor(config?: ITdInputConfig);
+    setConfig(config?: ITdInputConfig): void;
+    initEvents(): void;
+    setModelValue(value: IJsonDataProp): void;
+    setHovering(hovering: boolean): void;
+    setFocus(isFocused: boolean): void;
+    created(): void;
+}