@type-dom/ui 0.1.2 → 0.2.0

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

@@ -1,168 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDefaultValue = exports.isValidRange = void 0;
-const dayjs_1 = require("dayjs");
-const utils_1 = require("@type-dom/utils");
-const isValidRange = (range) => {
-    if (!(0, utils_1.isArray)(range))
-        return false;
-    const [left, right] = range;
-    return (dayjs_1.default.isDayjs(left) && dayjs_1.default.isDayjs(right) // && left.isSameOrBefore(right)
-    );
-};
-exports.isValidRange = isValidRange;
-const getDefaultValue = (defaultValue, { lang, unit, unlinkPanels }) => {
-    let start;
-    if ((0, utils_1.isArray)(defaultValue)) {
-        // eslint-disable-next-line prefer-const
-        let [left, right] = defaultValue.map((d) => (0, dayjs_1.default)(d).locale(lang));
-        if (!unlinkPanels) {
-            right = left.add(1, unit);
-        }
-        return [left, right];
-    }
-    else if (defaultValue) {
-        start = (0, dayjs_1.default)(defaultValue);
-    }
-    else {
-        start = (0, dayjs_1.default)();
-    }
-    start = start.locale(lang);
-    return [start, start.add(1, unit)];
-};
-exports.getDefaultValue = getDefaultValue;
-//
-// type Dimension = {
-//   row: number;
-//   column: number;
-// };
-//
-// type BuildPickerTableMetadata = {
-//   startDate?: Dayjs | null;
-//   unit: 'month' | 'day';
-//   columnIndexOffset: number;
-//   now: Dayjs;
-//   nextEndDate: Dayjs | null;
-//   relativeDateGetter: (index: number) => Dayjs;
-//   setCellMetadata?: (
-//     cell: DateCell,
-//     dimension: { rowIndex: number; columnIndex: number }
-//   ) => void;
-//   setRowMetadata?: (row: DateCell[]) => void;
-// };
-//
-// export const buildPickerTable = (
-//   dimension: Dimension,
-//   rows: DateCell[][],
-//   {
-//     columnIndexOffset,
-//     startDate,
-//     nextEndDate,
-//     now,
-//     unit,
-//     relativeDateGetter,
-//     setCellMetadata,
-//     setRowMetadata,
-//   }: BuildPickerTableMetadata
-// ) => {
-//   for (let rowIndex = 0; rowIndex < dimension.row; rowIndex++) {
-//     const row = rows[rowIndex];
-//     for (let columnIndex = 0; columnIndex < dimension.column; columnIndex++) {
-//       let cell = row[columnIndex + columnIndexOffset];
-//       if (!cell) {
-//         cell = {
-//           row: rowIndex,
-//           column: columnIndex,
-//           type: 'normal',
-//           inRange: false,
-//           start: false,
-//           end: false,
-//         };
-//       }
-//       const index = rowIndex * dimension.column + columnIndex;
-//       const nextStartDate = relativeDateGetter(index);
-//       cell.dayjs = nextStartDate;
-//       cell.date = nextStartDate.toDate();
-//       cell.timestamp = nextStartDate.valueOf();
-//       cell.type = 'normal';
-//
-//       cell.inRange =
-//         !!(
-//           startDate &&
-//           nextStartDate.isSameOrAfter(startDate, unit) &&
-//           nextEndDate &&
-//           nextStartDate.isSameOrBefore(nextEndDate, unit)
-//         ) ||
-//         !!(
-//           startDate &&
-//           nextStartDate.isSameOrBefore(startDate, unit) &&
-//           nextEndDate &&
-//           nextStartDate.isSameOrAfter(nextEndDate, unit)
-//         );
-//
-//       if (startDate?.isSameOrAfter(nextEndDate)) {
-//         cell.start = !!nextEndDate && nextStartDate.isSame(nextEndDate, unit);
-//         cell.end = startDate && nextStartDate.isSame(startDate, unit);
-//       } else {
-//         cell.start = !!startDate && nextStartDate.isSame(startDate, unit);
-//         cell.end = !!nextEndDate && nextStartDate.isSame(nextEndDate, unit);
-//       }
-//
-//       const isToday = nextStartDate.isSame(now, unit);
-//
-//       if (isToday) {
-//         cell.type = 'today';
-//       }
-//       setCellMetadata?.(cell, { rowIndex, columnIndex });
-//       row[columnIndex + columnIndexOffset] = cell;
-//     }
-//     setRowMetadata?.(row);
-//   }
-// };
-//
-// export const datesInMonth = (year: number, month: number, lang: string) => {
-//   const firstDay = dayjs()
-//     .locale(lang)
-//     .startOf('month')
-//     .month(month)
-//     .year(year);
-//   const numOfDays = firstDay.daysInMonth();
-//   return rangeArr(numOfDays).map((n) => firstDay.add(n, 'day').toDate());
-// };
-//
-// export const getValidDateOfMonth = (
-//   year: number,
-//   month: number,
-//   lang: string,
-//   disabledDate?: DisabledDateType
-// ) => {
-//   const _value = dayjs().year(year).month(month).startOf('month');
-//   const _date = datesInMonth(year, month, lang).find((date) => {
-//     return !disabledDate?.(date);
-//   });
-//   if (_date) {
-//     return dayjs(_date).locale(lang);
-//   }
-//   return _value.locale(lang);
-// };
-//
-// export const getValidDateOfYear = (
-//   value: Dayjs,
-//   lang: string,
-//   disabledDate?: DisabledDateType
-// ) => {
-//   const year = value.year();
-//   if (!disabledDate?.(value.toDate())) {
-//     return value.locale(lang);
-//   }
-//   const month = value.month();
-//   if (!datesInMonth(year, month, lang).every(disabledDate)) {
-//     return getValidDateOfMonth(year, month, lang, disabledDate);
-//   }
-//   for (let i = 0; i < 12; i++) {
-//     if (!datesInMonth(year, i, lang).every(disabledDate)) {
-//       return getValidDateOfMonth(year, i, lang, disabledDate);
-//     }
-//   }
-//   return value;
-// };

package/src/components/form/td-date-time-picker/td-date-time-picker.class.js

@@ -1 +0,0 @@
-"use strict";

package/src/components/form/td-date-time-picker/td-date-time-picker.interface.js

@@ -1 +0,0 @@
-"use strict";

package/src/components/form/td-form/form-label-wrap/form-label-wrap.class.d.ts

@@ -1,15 +0,0 @@
-import { TypeFragmentProps, TypeFragment } from '@type-dom/framework';
-interface FormLabelWrapProps extends TypeFragmentProps {
-    isAutoWidth: boolean;
-    updateAll: boolean;
-}
-/**
- * auto width 时，会自动计算宽度，并通知父元素更新宽度；
- */
-export declare class FormLabelWrap extends TypeFragment {
-    className: 'FormLabelWrap';
-    props: FormLabelWrapProps;
-    constructor(params: FormLabelWrapProps);
-    setup(): void;
-}
-export {};

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

@@ -1,96 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormLabelWrap = void 0;
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const utils_1 = require("@type-dom/utils");
-const use_namespace_1 = require("../../../../hooks/use-namespace");
-const td_form_const_1 = require("../td-form.const");
-const COMPONENT_NAME = 'TdLabelWrap';
-/**
- * auto width 时，会自动计算宽度，并通知父元素更新宽度；
- */
-class FormLabelWrap extends framework_1.TypeFragment {
-    constructor(params) {
-        super();
-        this.className = 'FormLabelWrap';
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const slots = (0, framework_1.useSlots)();
-        const formContext = (0, framework_1.inject)(td_form_const_1.formContextKey, undefined);
-        const formItemContext = (0, framework_1.inject)(td_form_const_1.formItemContextKey);
-        if (!formItemContext)
-            (0, utils_1.throwError)(COMPONENT_NAME, 'usage: <el-form-item><label-wrap /></el-form-item>');
-        const ns = (0, use_namespace_1.useNamespace)('form');
-        const el = (0, signals_1.signal)();
-        const computedWidth = (0, signals_1.signal)(0);
-        const getLabelWidth = () => {
-            var _a, _b;
-            if ((_a = el.get()) === null || _a === void 0 ? void 0 : _a.firstElementChild) {
-                const width = window.getComputedStyle((_b = el.get()) === null || _b === void 0 ? void 0 : _b.firstElementChild).width;
-                return Math.ceil(Number.parseFloat(width));
-            }
-            else {
-                return 0;
-            }
-        };
-        const updateLabelWidth = (action = 'update') => {
-            (0, framework_1.nextTick)(() => {
-                if ((props.slot || (slots === null || slots === void 0 ? void 0 : slots.default)) && props.isAutoWidth) {
-                    if (action === 'update') {
-                        computedWidth.set(getLabelWidth());
-                    }
-                    else if (action === 'remove') {
-                        formContext === null || formContext === void 0 ? void 0 : formContext.deregisterLabelWidth(computedWidth.get());
-                    }
-                }
-            });
-        };
-        const updateLabelWidthFn = () => updateLabelWidth('update');
-        (0, framework_1.onMounted)(() => {
-            updateLabelWidthFn();
-        });
-        (0, framework_1.onBeforeUnmount)(() => {
-            updateLabelWidth('remove');
-        });
-        (0, framework_1.onUpdated)(() => updateLabelWidthFn());
-        (0, signals_1.watch)(computedWidth, (val, oldVal) => {
-            if (props.updateAll) {
-                formContext === null || formContext === void 0 ? void 0 : formContext.registerLabelWidth(val, oldVal);
-            }
-        });
-        (0, framework_1.useResizeObserver)((0, signals_1.computed)(() => { var _a; return ((_a = el.get()) === null || _a === void 0 ? void 0 : _a.firstElementChild); }), updateLabelWidthFn);
-        if (!props.slot && !(slots === null || slots === void 0 ? void 0 : slots.default)) {
-            return;
-        }
-        const { isAutoWidth } = props;
-        if (isAutoWidth) {
-            const autoLabelWidth = formContext === null || formContext === void 0 ? void 0 : formContext.autoLabelWidth;
-            const hasLabel = formItemContext === null || formItemContext === void 0 ? void 0 : formItemContext.hasLabel;
-            const style = {};
-            if (hasLabel && autoLabelWidth && autoLabelWidth.get() !== 'auto') {
-                const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth.get(), 10) - computedWidth.get());
-                const labelPosition = formItemContext.labelPosition || formContext.labelPosition;
-                const marginPosition = labelPosition === 'left' ? 'marginRight' : 'marginLeft';
-                if (marginWidth) {
-                    style[marginPosition] = `${marginWidth}px`;
-                }
-            }
-            this.addChild(new framework_1.Div({
-                refDom: el,
-                class: [ns.be('item', 'label-wrap')],
-                styleObj: style,
-                slot: props.slot || (slots === null || slots === void 0 ? void 0 : slots.default),
-            }));
-        }
-        else {
-            this.assignProps({
-                refDom: el,
-            });
-            this.slotChildren(props.slot || (slots === null || slots === void 0 ? void 0 : slots.default));
-        }
-    }
-}
-exports.FormLabelWrap = FormLabelWrap;

package/src/components/form/td-form/hooks/use-form-common-props.d.ts

@@ -1,6 +0,0 @@
-import { MaybeRef } from '@type-dom/signals';
-import { ComponentSize } from '../../../../constants/size';
-export declare const useFormSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
-export declare const useFormDisabled: (fallback?: MaybeRef<boolean | undefined>) => import("@type-dom/signals").Computed<boolean>;
-export declare const useSize: (fallback?: MaybeRef<ComponentSize | undefined>, ignore?: Partial<Record<"prop" | "form" | "formItem" | "global", boolean>>) => import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
-export declare const useDisabled: (fallback?: MaybeRef<boolean | undefined>) => import("@type-dom/signals").Computed<boolean>;

package/src/components/form/td-form/hooks/use-form-common-props.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDisabled = exports.useSize = exports.useFormDisabled = exports.useFormSize = void 0;
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const use_size_1 = require("../../../../hooks/use-size");
-const use_prop_1 = require("../../../../hooks/use-prop");
-const td_form_const_1 = require("../td-form.const");
-const useFormSize = (fallback, ignore = {}) => {
-    const emptyRef = (0, signals_1.signal)(undefined);
-    const size = ignore.prop ? emptyRef : (0, use_prop_1.useProp)('size');
-    const globalConfig = ignore.global ? emptyRef : (0, use_size_1.useGlobalSize)();
-    const form = ignore.form
-        ? { size: undefined }
-        : (0, framework_1.inject)(td_form_const_1.formContextKey, undefined);
-    const formItem = ignore.formItem
-        ? { size: undefined }
-        : (0, framework_1.inject)(td_form_const_1.formItemContextKey, undefined);
-    return (0, signals_1.computed)(() => (0, signals_1.unref)(size) ||
-        (0, signals_1.unref)(fallback) ||
-        (0, signals_1.unref)(formItem === null || formItem === void 0 ? void 0 : formItem.size) ||
-        (form === null || form === void 0 ? void 0 : form.size) ||
-        globalConfig.get() ||
-        'default');
-};
-exports.useFormSize = useFormSize;
-const useFormDisabled = (fallback) => {
-    const disabled = (0, use_prop_1.useProp)('disabled');
-    // console.warn('disabled is ', disabled);
-    const form = (0, framework_1.inject)(td_form_const_1.formContextKey, undefined);
-    return (0, signals_1.computed)(() => ((0, signals_1.unref)(disabled) || (0, signals_1.unref)(fallback) || (0, signals_1.unref)(form === null || form === void 0 ? void 0 : form.disabled) || false));
-};
-exports.useFormDisabled = useFormDisabled;
-// These exports are used for preventing breaking changes
-exports.useSize = exports.useFormSize;
-exports.useDisabled = exports.useFormDisabled;

package/src/components/form/td-form/hooks/use-form-item.d.ts

@@ -1,19 +0,0 @@
-import { Signal, Computed, Ref } from '@type-dom/signals';
-import { FormContext, FormItemContext } from '../td-form.interface';
-export declare const useFormItem: () => {
-    form: FormContext;
-    formItem: FormItemContext;
-};
-export type IUseFormItemInputCommonProps = {
-    id?: string;
-    label?: string | number | boolean | Record<string, any>;
-    ariaLabel?: string | number | boolean | Record<string, any>;
-};
-export declare const useFormItemInputId: (props: Partial<IUseFormItemInputCommonProps>, { formItemContext, disableIdGeneration, disableIdManagement, }: {
-    formItemContext?: FormItemContext;
-    disableIdGeneration?: Ref<string | boolean>;
-    disableIdManagement?: Ref<boolean>;
-}) => {
-    isLabeledByFormItem: Computed<boolean>;
-    inputId: Signal<string | undefined>;
-};

package/src/components/form/td-form/hooks/use-form-item.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFormItemInputId = exports.useFormItem = void 0;
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const use_id_1 = require("../../../../hooks/use-id");
-const td_form_const_1 = require("../td-form.const");
-const useFormItem = () => {
-    const form = (0, framework_1.inject)(td_form_const_1.formContextKey, undefined);
-    const formItem = (0, framework_1.inject)(td_form_const_1.formItemContextKey, undefined);
-    return {
-        form,
-        formItem,
-    };
-};
-exports.useFormItem = useFormItem;
-const useFormItemInputId = (props, { formItemContext, disableIdGeneration, disableIdManagement, }) => {
-    if (!disableIdGeneration) {
-        disableIdGeneration = (0, signals_1.signal)(false);
-    }
-    if (!disableIdManagement) {
-        disableIdManagement = (0, signals_1.signal)(false);
-    }
-    const inputId = (0, signals_1.signal)();
-    let idUnwatch = undefined; // effect中的 stop
-    const isLabeledByFormItem = (0, signals_1.computed)(() => {
-        return !!(!(props.label || props.ariaLabel) &&
-            formItemContext &&
-            formItemContext.inputIds &&
-            (0, signals_1.unref)(formItemContext.inputIds).length <= 1);
-    });
-    // Generate id for TdFormItem label if not provided as prop
-    (0, framework_1.onMounted)(() => {
-        idUnwatch = (0, signals_1.watch)(() => [(0, signals_1.unref)(props.id), disableIdGeneration === null || disableIdGeneration === void 0 ? void 0 : disableIdGeneration.get()], ([id, disableIdGeneration]) => {
-            const newId = id !== null && id !== void 0 ? id : (!disableIdGeneration ? (0, use_id_1.useId)().get() : undefined);
-            if (newId !== inputId.get()) {
-                if (formItemContext === null || formItemContext === void 0 ? void 0 : formItemContext.removeInputId) {
-                    inputId.get() && formItemContext.removeInputId(inputId.get());
-                    if (!(disableIdManagement === null || disableIdManagement === void 0 ? void 0 : disableIdManagement.get()) && !disableIdGeneration && newId) {
-                        formItemContext.addInputId(newId);
-                    }
-                }
-                inputId.set(newId);
-            }
-        }, { immediate: true });
-    });
-    (0, framework_1.onUnmounted)(() => {
-        idUnwatch && idUnwatch();
-        if (formItemContext === null || formItemContext === void 0 ? void 0 : formItemContext.removeInputId) {
-            inputId.get() && formItemContext.removeInputId(inputId.get());
-        }
-    });
-    return {
-        isLabeledByFormItem,
-        inputId,
-    };
-};
-exports.useFormItemInputId = useFormItemInputId;

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

@@ -1,2 +0,0 @@
-export { useFormSize, useFormDisabled, useSize, useDisabled, } from './hooks/use-form-common-props';
-export { useFormItem, useFormItemInputId } from './hooks/use-form-item';

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFormItemInputId = exports.useFormItem = exports.useDisabled = exports.useSize = exports.useFormDisabled = exports.useFormSize = void 0;
-var use_form_common_props_1 = require("./hooks/use-form-common-props");
-Object.defineProperty(exports, "useFormSize", { enumerable: true, get: function () { return use_form_common_props_1.useFormSize; } });
-Object.defineProperty(exports, "useFormDisabled", { enumerable: true, get: function () { return use_form_common_props_1.useFormDisabled; } });
-Object.defineProperty(exports, "useSize", { enumerable: true, get: function () { return use_form_common_props_1.useSize; } });
-Object.defineProperty(exports, "useDisabled", { enumerable: true, get: function () { return use_form_common_props_1.useDisabled; } });
-var use_form_item_1 = require("./hooks/use-form-item");
-Object.defineProperty(exports, "useFormItem", { enumerable: true, get: function () { return use_form_item_1.useFormItem; } });
-Object.defineProperty(exports, "useFormItemInputId", { enumerable: true, get: function () { return use_form_item_1.useFormItemInputId; } });

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

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

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

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-import { TypeForm } from '@type-dom/framework';
-import { TdFormItem } from '../td-form-item/td-form-item.class';
-import { ITdForm, FormProps } from './td-form.interface';
-import './style/index';
-/**
- * TdForm类继承自UI抽象类，实现ITdForm接口，用于创建和管理表单。
- * 提交表单时，应该要获取所有子元素 form-item 里的 如 TdInput 这些可输入的组件的值。
- * 表单提交地址也应该是可以配置的。
- */
-export declare class TdForm extends TypeForm implements ITdForm {
-    className: 'TdForm';
-    childNodes: TdFormItem[];
-    props: FormProps;
-    /**
-     * 构造函数，初始化表单配置。
-     * @param params
-     */
-    constructor(params?: FormProps);
-    setup(): void;
-}

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

@@ -1,188 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdForm = void 0;
-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 framework_1.TypeForm {
-    /**
-     * 构造函数，初始化表单配置。
-     * @param params
-     */
-    constructor(params = {}) {
-        super();
-        this.className = 'TdForm';
-        this.attr.addName('td-form');
-        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);