@type-dom/ui 0.0.10 → 0.1.1

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

@@ -0,0 +1,168 @@
+"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-form/form-label-wrap/form-label-wrap.class.d.ts

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,96 @@
+"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, _b; return ((_b = (_a = el.get()) === null || _a === void 0 ? void 0 : _a.firstElementChild) !== null && _b !== void 0 ? _b : null); }), 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

@@ -0,0 +1,6 @@
+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>) => 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>) => import("@type-dom/signals").Computed<boolean>;

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

@@ -0,0 +1,35 @@
+"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');
+    const form = (0, framework_1.inject)(td_form_const_1.formContextKey, undefined);
+    return (0, signals_1.computed)(() => disabled.get() || (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,5 +1,19 @@
+import { Signal, Computed } 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?: Computed | Signal<string | boolean>;
+    disableIdManagement?: Computed<boolean> | Signal<boolean>;
+}) => {
+    isLabeledByFormItem: Computed<boolean>;
+    inputId: Signal<string | undefined>;
+};

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

@@ -1,65 +1,58 @@
 "use strict";
-// todo
 Object.defineProperty(exports, "__esModule", { value: true });
-//
-// export const useFormItemInputId = (
-//   props: Partial<IUseFormItemInputCommonProps>,
-//   {
-//     formItemContext,
-//     disableIdGeneration,
-//     disableIdManagement,
-//   }: {
-//     formItemContext?: FormItemContext
-//     disableIdGeneration?: ComputedRef<boolean> | Ref<boolean>
-//     disableIdManagement?: ComputedRef<boolean> | Ref<boolean>
-//   }
-// ) => {
-//   if (!disableIdGeneration) {
-//     disableIdGeneration = ref<boolean>(false)
-//   }
-//   if (!disableIdManagement) {
-//     disableIdManagement = ref<boolean>(false)
-//   }
-//
-//   const inputId = ref<string>()
-//   let idUnwatch: WatchStopHandle | undefined = undefined
-//
-//   const isLabeledByFormItem = !!(
-//       !(props.label || props.ariaLabel) &&
-//       formItemContext &&
-//       formItemContext.inputIds &&
-//       formItemContext.inputIds?.length <= 1
-//     );
-//   //
-//   // // Generate id for ElFormItem label if not provided as prop
-//   // onMounted(() => {
-//   //   idUnwatch = watch(
-//   //     [toRef(props, 'id'), disableIdGeneration] as any,
-//   //     ([id, disableIdGeneration]: [string, boolean]) => {
-//   //       const newId = id ?? (!disableIdGeneration ? useId().value : undefined)
-//   //       if (newId !== inputId.value) {
-//   //         if (formItemContext?.removeInputId) {
-//   //           inputId.value && formItemContext.removeInputId(inputId.value)
-//   //           if (!disableIdManagement?.value && !disableIdGeneration && newId) {
-//   //             formItemContext.addInputId(newId)
-//   //           }
-//   //         }
-//   //         inputId.value = newId
-//   //       }
-//   //     },
-//   //     { immediate: true }
-//   //   )
-//   // })
-//   //
-//   // onUnmounted(() => {
-//   //   idUnwatch && idUnwatch()
-//   //   if (formItemContext?.removeInputId) {
-//   //     inputId.value && formItemContext.removeInputId(inputId.value)
-//   //   }
-//   // })
-//
-//   return {
-//     isLabeledByFormItem,
-//     inputId,
-//   }
-// }
+exports.useFormItemInputId = exports.useFormItem = void 0;
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const td_form_const_1 = require("../td-form.const");
+const use_id_1 = require("../../../../hooks/use-id");
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,11 @@
+"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

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

package/src/components/form/td-form/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.css");

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

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

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

@@ -0,0 +1,4 @@
+"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,17 +1,20 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdForm, ITdFormConfig } from './td-form.interface';
+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 UI implements ITdForm {
+export declare class TdForm extends TypeForm implements ITdForm {
     className: 'TdForm';
-    props: ITdFormConfig;
-    private model?;
+    childNodes: TdFormItem[];
+    props: FormProps;
     /**
      * 构造函数，初始化表单配置。
      * @param params
      */
-    constructor(params?: ITdFormConfig);
+    constructor(params?: FormProps);
+    setup(): void;
 }