@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,30 +1,188 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdForm = 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 signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_form_common_props_1 = require("./hooks/use-form-common-props");
+const utils_2 = require("./utils");
 const td_form_const_1 = require("./td-form.const");
+require("./style/index");
 /**
  * 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.className = 'TdForm';
         this.attr.addName('td-form');
-        this.provide(td_form_const_1.formContextKey, params); // 要在form-item 中 inject
-        if (params.slot) {
-            this.slotChild(params.slot);
-        }
-        if (params === null || params === void 0 ? void 0 : params.model) {
-            this.model = params.model;
-        }
+        this.childNodes = [];
+        this.addEmits(td_form_const_1.formEmits);
+        this.assignProps(td_form_const_1.formProps);
         this.props = this.useParams(params);
     }
+    setup() {
+        var _a;
+        const COMPONENT_NAME = 'TdForm';
+        const props = this.props;
+        const emit = this.emit;
+        const fields = [];
+        const formSize = (0, use_form_common_props_1.useFormSize)();
+        const ns = (0, use_namespace_1.useNamespace)('form');
+        const formClasses = (0, signals_1.computed)(() => {
+            const { labelPosition, inline } = props;
+            return [
+                ns.b(),
+                // todo: in v2.2.0, we can remove default
+                // in fact, remove it doesn't affect the final style
+                ns.m(formSize.get() || 'default'),
+                {
+                    [ns.m(`label-${labelPosition}`)]: labelPosition,
+                    [ns.m('inline')]: inline,
+                },
+            ];
+        });
+        const getField = (prop) => {
+            return fields.find((field) => field.prop === prop);
+        };
+        const addField = (field) => {
+            fields.push(field);
+        };
+        const removeField = (field) => {
+            if (field.prop) {
+                fields.splice(fields.indexOf(field), 1);
+            }
+        };
+        const resetFields = (properties = []) => {
+            if (!props.model) {
+                (0, utils_1.debugWarn)(COMPONENT_NAME, 'model is required for resetFields to work.');
+                return;
+            }
+            (0, utils_2.filterFields)(fields, properties).forEach((field) => field.resetField());
+        };
+        const clearValidate = (props = []) => {
+            (0, utils_2.filterFields)(fields, props).forEach((field) => field.clearValidate());
+        };
+        const isValidatable = (0, signals_1.computed)(() => {
+            const hasModel = !!props.model;
+            if (!hasModel) {
+                (0, utils_1.debugWarn)(COMPONENT_NAME, 'model is required for validate to work.');
+            }
+            return hasModel;
+        });
+        const obtainValidateFields = (props) => {
+            if (fields.length === 0)
+                return [];
+            const filteredFields = (0, utils_2.filterFields)(fields, props);
+            if (!filteredFields.length) {
+                (0, utils_1.debugWarn)(COMPONENT_NAME, 'please pass correct props!');
+                return [];
+            }
+            return filteredFields;
+        };
+        const validate = (callback) => tslib_1.__awaiter(this, void 0, void 0, function* () { return validateField(undefined, callback); });
+        const doValidateField = (...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (props = []) {
+            if (!isValidatable.get())
+                return false;
+            const fields = obtainValidateFields(props);
+            if (fields.length === 0)
+                return true;
+            let validationErrors = {};
+            for (const field of fields) {
+                try {
+                    yield field.validate('');
+                }
+                catch (fields) {
+                    validationErrors = Object.assign(Object.assign({}, validationErrors), fields);
+                }
+            }
+            if (Object.keys(validationErrors).length === 0)
+                return true;
+            return Promise.reject(validationErrors);
+        });
+        const validateField = (...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (modelProps = [], callback) {
+            const shouldThrow = !(0, utils_1.isFunction)(callback);
+            try {
+                const result = yield doValidateField(modelProps);
+                // When result is false meaning that the fields are not validatable
+                if (result === true) {
+                    yield (callback === null || callback === void 0 ? void 0 : callback(result));
+                }
+                return result;
+            }
+            catch (e) {
+                if (e instanceof Error)
+                    throw e;
+                const invalidFields = e;
+                if (props.scrollToError) {
+                    scrollToField(Object.keys(invalidFields)[0]);
+                }
+                yield (callback === null || callback === void 0 ? void 0 : callback(false, invalidFields));
+                return shouldThrow && Promise.reject(invalidFields);
+            }
+        });
+        const scrollToField = (prop) => {
+            var _a;
+            const field = (0, utils_2.filterFields)(fields, prop)[0];
+            if (field) {
+                (_a = (0, signals_1.unref)(field.$el)) === null || _a === void 0 ? void 0 : _a.scrollIntoView(props.scrollIntoViewOptions);
+            }
+        };
+        (0, signals_1.watch)(() => props.rules, () => {
+            if (props.validateOnRuleChange) {
+                validate().catch((err) => (0, utils_1.debugWarn)(err));
+            }
+        }, { deep: true });
+        (0, framework_1.provide)(td_form_const_1.formContextKey, Object.assign(Object.assign(Object.assign({}, props), { // todo
+            emit,
+            resetFields,
+            clearValidate,
+            validateField,
+            getField,
+            addField,
+            removeField }), (0, utils_2.useFormLabelWidth)()));
+        (0, framework_1.defineExpose)({
+            /**
+             * @description Validate the whole form. Receives a callback or returns `Promise`.
+             */
+            validate,
+            /**
+             * @description Validate specified fields.
+             */
+            validateField,
+            /**
+             * @description Reset specified fields and remove validation result.
+             */
+            resetFields,
+            /**
+             * @description Clear validation message for specified fields.
+             */
+            clearValidate,
+            /**
+             * @description Scroll to the specified fields.
+             */
+            scrollToField,
+            /**
+             * @description All fields context.
+             */
+            fields,
+        });
+        this.attr.addClass(formClasses);
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
+    }
 }
 exports.TdForm = TdForm;
+tslib_1.__decorate([
+    framework_1.logMethod,
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", []),
+    tslib_1.__metadata("design:returntype", void 0)
+], TdForm.prototype, "setup", null);

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

@@ -1,5 +1,9 @@
 import { InjectionKey } from '@type-dom/framework';
-import { ITdFormItemConfig } from '../td-form-item/td-form-item.interface';
-import { ITdFormConfig } from './td-form.interface';
-export declare const formContextKey: InjectionKey<ITdFormConfig>;
-export declare const formItemContextKey: InjectionKey<ITdFormItemConfig>;
+import { FormItemProp } from '../td-form-item/td-form-item.interface';
+import { FormContext, FormItemContext, FormProps } from './td-form.interface';
+export declare const formContextKey: InjectionKey<FormContext>;
+export declare const formItemContextKey: InjectionKey<FormItemContext>;
+export declare const formProps: FormProps;
+export declare const formEmits: {
+    validate: (prop: FormItemProp, isValid: boolean, message: string) => boolean;
+};

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

@@ -1,5 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formItemContextKey = exports.formContextKey = void 0;
+exports.formEmits = exports.formProps = exports.formItemContextKey = exports.formContextKey = void 0;
+const utils_1 = require("@type-dom/utils");
 exports.formContextKey = Symbol('formContextKey');
 exports.formItemContextKey = Symbol('formItemContextKey');
+exports.formProps = {
+    labelPosition: 'right',
+    requireAsteriskPosition: 'left',
+    labelWidth: '',
+    labelSuffix: '',
+    showMessage: true,
+    validateOnRuleChange: true,
+};
+exports.formEmits = {
+    validate: (prop, isValid, message) => ((0, utils_1.isArray)(prop) || (0, utils_1.isString)(prop)) &&
+        (0, utils_1.isBoolean)(isValid) &&
+        (0, utils_1.isString)(message),
+};

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

@@ -1,10 +1,15 @@
-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 { ITypeForm, TypeFormProps } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { Arrayable } from '@type-dom/utils';
+import { ComponentSize } from '../../../constants';
+import { FormItemProp, FormItemProps, IFormItemValidateState, ITdFormItem } from '../td-form-item/td-form-item.interface';
+import { TdFormItem } from '../td-form-item/td-form-item.class';
+import type { useFormLabelWidth } from './utils';
+export interface ITdForm extends ITypeForm {
     className: 'TdForm';
+    childNodes: ITdFormItem[];
 }
-export interface IFormRule {
+export interface FormRule {
     required?: boolean;
     validator?: (rule: any, value: any, callback: any) => boolean;
     trigger?: string;
@@ -14,18 +19,20 @@ export interface IFormRule {
     maxLength?: number;
     minLength?: number;
 }
-export interface IFormRules {
-    [propName: string]: IFormRule[];
+export interface FormRules {
+    [propName: string]: FormRule[];
 }
-export interface ITdFormConfig extends IUIConfig {
+export interface FormMetaProps {
     /**
      * @description Control the size of components in this form.
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @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;
+    disabled?: MaybeRef<boolean>;
+}
+export interface FormProps extends FormMetaProps, TypeFormProps {
     /**
      * @description Data of form component.
      */
@@ -33,7 +40,7 @@ export interface ITdFormConfig extends IUIConfig {
     /**
      * @description Validation rules of form.
      */
-    rules?: IFormRules;
+    rules?: FormRules;
     /**
      * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required.
      *     default: 'right',
@@ -88,5 +95,39 @@ export interface ITdFormConfig extends IUIConfig {
      * @description When validation fails, it scrolls to the first error item based on the scrollIntoView option.
      */
     scrollIntoViewOptions?: object | boolean;
-    options?: Array<ITdFormItemConfig>;
+    options?: Array<FormItemProps>;
+    slot?: Array<TdFormItem>;
+}
+export interface ValidateError {
+    message?: string;
+    fieldValue?: any;
+    field?: string;
+}
+export type FormLabelWidthContext = ReturnType<typeof useFormLabelWidth>;
+export type ValidateFieldsError = Record<string, ValidateError[]>;
+export type FormValidationResult = Promise<boolean>;
+export type FormValidateCallback = (isValid: boolean, invalidFields?: ValidateFieldsError) => Promise<void> | void;
+export type FormContext = FormProps & FormLabelWidthContext & {
+    emit: any;
+    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: MaybeRef<HTMLDivElement | undefined>;
+    size: MaybeRef<ComponentSize>;
+    validateState: MaybeRef<IFormItemValidateState>;
+    isGroup: MaybeRef<boolean>;
+    labelId: string;
+    inputIds: MaybeRef<string[]>;
+    hasLabel: MaybeRef<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/td-form.interface.js

@@ -1,35 +1,2 @@
 "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/td-form.old.d.ts

@@ -0,0 +1,19 @@
+import { TypeForm } from '@type-dom/framework';
+import { ITdForm, FormProps } 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 TypeForm implements ITdForm {
+    className: 'TdForm';
+    childNodes: TdFormItem[];
+    props: FormProps;
+    private model?;
+    /**
+     * 构造函数，初始化表单配置。
+     * @param params
+     */
+    constructor(params?: FormProps);
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdForm = void 0;
+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 framework_1.TypeForm {
+    /**
+     * 构造函数，初始化表单配置。
+     * @param params
+     */
+    constructor(params = {}) {
+        super();
+        // this.useTag('form');
+        this.className = 'TdForm';
+        this.attr.addObj({
+            name: 'td-form',
+        });
+        this.childNodes = [];
+        if (params.slot) {
+            this.slotChildren(params.slot);
+        }
+        if (params === null || params === void 0 ? void 0 : params.model) {
+            this.model = params.model;
+        }
+        this.props = this.useParams(params);
+        // this.provide(formContextKey, params); // 要在form-item 中 inject
+        this.addEmits(td_form_const_1.formEmits);
+    }
+}
+exports.TdForm = TdForm;

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

@@ -4,5 +4,5 @@ exports.$form = void 0;
 const var_1 = require("../../../styles/var");
 exports.$form = {
     labelFontSize: var_1.$fontSizes.base,
-    inlineContentWith: '220px'
+    inlineContentWith: '220px',
 };

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

@@ -0,0 +1,9 @@
+import { Arrayable } from '@type-dom/framework';
+import { FormItemProp } from '../td-form-item/td-form-item.interface';
+import { FormItemContext } from './td-form.interface';
+export declare function useFormLabelWidth(): {
+    autoLabelWidth: import("@type-dom/signals").Computed<string>;
+    registerLabelWidth: (val: number, oldVal?: number) => void;
+    deregisterLabelWidth: (val: number) => void;
+};
+export declare const filterFields: (fields: FormItemContext[], props: Arrayable<FormItemProp>) => FormItemContext[];

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

@@ -0,0 +1,55 @@
+"use strict";
+// import { computed, ref } from 'vue'
+// import { debugWarn, ensureArray } from '@element-plus/utils'
+// import type { Arrayable } from '@element-plus/utils'
+// import type { FormItemContext } from './types'
+// import type { FormItemProp } from './form-item'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterFields = void 0;
+exports.useFormLabelWidth = useFormLabelWidth;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const SCOPE = 'TdForm';
+function useFormLabelWidth() {
+    const potentialLabelWidthArr = (0, signals_1.signal)([]);
+    const autoLabelWidth = (0, signals_1.computed)(() => {
+        if (!potentialLabelWidthArr.get().length)
+            return '0';
+        const max = Math.max(...potentialLabelWidthArr.get());
+        return max ? `${max}px` : '';
+    });
+    function getLabelWidthIndex(width) {
+        const index = potentialLabelWidthArr.get().indexOf(width);
+        if (index === -1 && autoLabelWidth.get() === '0') {
+            (0, utils_1.debugWarn)(SCOPE, `unexpected width ${width}`);
+        }
+        return index;
+    }
+    function registerLabelWidth(val, oldVal) {
+        if (val && oldVal) {
+            const index = getLabelWidthIndex(oldVal);
+            potentialLabelWidthArr.get().splice(index, 1, val);
+        }
+        else if (val) {
+            potentialLabelWidthArr.get().push(val);
+        }
+    }
+    function deregisterLabelWidth(val) {
+        const index = getLabelWidthIndex(val);
+        if (index > -1) {
+            potentialLabelWidthArr.get().splice(index, 1);
+        }
+    }
+    return {
+        autoLabelWidth,
+        registerLabelWidth,
+        deregisterLabelWidth,
+    };
+}
+const filterFields = (fields, props) => {
+    const normalized = (0, utils_1.ensureArray)(props);
+    return normalized.length > 0
+        ? fields.filter((field) => field.prop && normalized.includes(field.prop))
+        : fields;
+};
+exports.filterFields = filterFields;

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

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-form-item.css';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/theme-chalk/el-form-item.css");

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

@@ -0,0 +1,2 @@
+import '../../../base/style';
+import '../../../../theme-chalk/form-item.scss';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");
+require("../../../../theme-chalk/form-item.scss");

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

@@ -1,20 +1,9 @@
-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';
-export declare class TdFormItem extends UI implements ITdFormItem {
+import { TypeDiv } from '@type-dom/framework';
+import { ITdFormItem, FormItemProps } from './td-form-item.interface';
+import './style/index';
+export declare class TdFormItem extends TypeDiv implements ITdFormItem {
     className: 'TdFormItem';
-    props: ITdFormItemConfig;
-    label?: Label;
-    parent?: TdForm;
-    private labelWrap?;
-    private content;
-    private error?;
-    constructor(params?: ITdFormItemConfig);
-    created(): void;
+    props: FormItemProps;
+    constructor(params?: FormItemProps);
     setup(): void;
-    setLabelWidth(width?: string | number): void;
-    setLabelPosition(position?: ILabelPosition): void;
-    setSize(size?: ISize): void;
 }