@ftjs/core 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 yuhengshen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# @ftjs/antd
+
+![NPM Version](https://img.shields.io/npm/v/@ftjs/core)
+![GitHub License](https://img.shields.io/github/license/yuhengshen/tf)
+
+---
+
+核心模块
+
+## 文档
+
+请查看 [@ftjs/core 文档](https://tf-docs.yhs.ink/@ftjs/core/introduction.html)。
+
+## License
+
+[MIT](../../LICENSE)

package/dist/form/columns.d.ts

@@ -0,0 +1,94 @@
+import { MaybeRefOrGetter } from 'vue';
+import { RecordPath } from '../type-helper';
+type WatchHandler<FormData extends Record<string, any>> = (params: {
+    val: any;
+    oldVal: any;
+    form: FormData;
+}) => void;
+type Watch<FormData extends Record<string, any>> = WatchHandler<FormData> | {
+    handler: WatchHandler<FormData>;
+    deep?: boolean;
+    immediate?: boolean;
+};
+/**
+ * 实现方需要继承这个interface
+ */
+export interface TfFormColumnBase<FormData extends Record<string, any>> {
+    /**
+     * 字段名 `fields` 和 `field` 至少有一个存在
+     *
+     * `field` 优先级高于 `fields`
+     *
+     * 如果是在 TableColumns 中，则默认继承其中的 field
+     */
+    field?: RecordPath<FormData>;
+    /**
+     * 字段名数组，当表单需要返回多个值时，使用这个字段
+     *
+     * 如： [startTime, endTime]
+     *
+     * 注意： 第一个字段需要尽量是基础类型的值(这个值会用于watch, expect等操作)，后面可以包含详情
+     *
+     * 如人员信息: [staffId, staffInfoObj, deptInfoObj, ...]
+     */
+    fields?: string[];
+    /**
+     * 字段标题
+     *
+     * 如果是在 TableColumns 中，则默认继承其中的 title
+     */
+    title?: MaybeRefOrGetter<string>;
+    /**
+     * 是否隐藏
+     */
+    hide?: MaybeRefOrGetter<boolean>;
+    /**
+     * 监听字段值变化，如果是 `fields` ，则只会监听第一个字段的值变化
+     */
+    watch?: Watch<FormData>;
+    /**
+     * 字段默认值
+     */
+    value?: any;
+    /**
+     * 控制其他字段基于此值的显示规则
+     *
+     * 当其他字段值符合`value`时，控制字段显示，否则隐藏
+     */
+    control?: {
+        /**
+         * 控制字段
+         */
+        field: string;
+        /**
+         * 条件，可以是一个值，也可以是一个函数
+         *
+         *
+         */
+        value: boolean | string | number | boolean[] | string[] | number[] | /** 返回值表示这个字段是否显示 */ (({ formData, val, }: {
+            formData: FormData;
+            val: any;
+        }) => boolean);
+    }[];
+    valueGetter?: (val: any) => any;
+    valueSetter?: (val: any) => any;
+    /**
+     * props 配置，子类定义
+     */
+    props?: any;
+    /**
+     * slots 配置，子类定义
+     */
+    slots?: {};
+    /**
+     * 排序
+     *
+     * @default index
+     */
+    sort?: number;
+    /**
+     * 是否查看模式
+     */
+    isView?: MaybeRefOrGetter<boolean>;
+}
+export {};

package/dist/form/define-component.d.ts

@@ -0,0 +1,110 @@
+import { Component, EmitsOptions, SetupContext, SlotsType, VNode } from 'vue';
+import { TfFormColumnBase } from './columns';
+import { RuntimeProps } from '../utils';
+import { TupleKeys } from '../type-helper';
+export interface FormTypeMap<_FormData extends Record<string, any>> {
+    default: {
+        formSlots: {};
+        extendedProps: {};
+        internalFormProps: {};
+        columns: (TfFormColumnBase<any> & {
+            type: "custom";
+        }) | (TfFormColumnBase<any> & {
+            type: "custom2";
+        });
+    };
+}
+export interface TfFormIntrinsicProps<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> {
+    /**
+     * 用于缓存配置，不填则不缓存
+     */
+    cache?: string;
+    /**
+     * v-model:formData 的值
+     *
+     * 如果`formData`不为`undefined`或者`null`，则双向绑定这个值，否则 TfForm内部会生成一个内部值
+     */
+    formData?: FormData;
+    /**
+     * 内部 form 组件 props
+     */
+    internalFormProps?: FormTypeMap<FormData>[Type]["internalFormProps"];
+    /**
+     * v-model:formData 的更新函数
+     *
+     * 需要`formData`不为空
+     */
+    "onUpdate:formData"?: (value: FormData) => void;
+    /**
+     * 提交函数
+     * @param formData 当先的有效表单值
+     * @returns
+     */
+    onSubmit?: (formData: FormData) => Promise<void> | void;
+}
+/**
+ * 每一个表单组件的 props
+ */
+export interface CommonFormItemProps<T extends TfFormColumnBase<any>> {
+    /** column 定义 */
+    column: T;
+    /** 是否查看模式 */
+    isView: boolean;
+}
+export type TfFormPropsMap<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> = TfFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
+    columns: FormTypeMap<FormData>[Type]["columns"][];
+};
+/**
+ * 定义表单容器组件
+ */
+export declare const defineTfForm: <Type extends keyof FormTypeMap<any>>(setup: (props: {}, ctx: SetupContext<EmitsOptions, SlotsType<FormTypeMap<any>[Type]["formSlots"] & {
+    /**
+     * 表单内容
+     */
+    formContent: () => any;
+}>>) => any, renderMap: Map<string, Component>, _runtimeProps: RuntimeProps<TupleKeys<FormTypeMap<any>[Type]["extendedProps"]>>[] & {
+    length: TupleKeys<FormTypeMap<any>[Type]["extendedProps"]>["length"];
+}) => new <FormData extends Record<string, any>>(props: (TfFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
+    columns: FormTypeMap<FormData>[Type]["columns"][];
+} & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+})) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => import('vue').CreateComponentPublicInstanceWithMixins<TfFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
+    columns: FormTypeMap<FormData>[Type]["columns"][];
+} & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, EmitsOptions, import('vue').PublicProps, {}, false, {}, SlotsType<FormTypeMap<FormData>[Type]["formSlots"]>, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, {} & ((TfFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
+    columns: FormTypeMap<FormData>[Type]["columns"][];
+} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} extends infer T ? T extends TfFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
+    columns: FormTypeMap<FormData>[Type]["columns"][];
+} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} ? T extends void ? {} : T : never : never) | (TfFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
+    columns: FormTypeMap<FormData>[Type]["columns"][];
+} & {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+} extends infer T_1 ? T_1 extends TfFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
+    columns: FormTypeMap<FormData>[Type]["columns"][];
+} & {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+} ? T_1 extends void ? {} : T_1 : never : never)), {}, {}, {}, {}, {}>;
+/**
+ * 定义表单组件
+ */
+export declare function defineFormComponent<T extends TfFormColumnBase<any>>(setup: (props: CommonFormItemProps<T>, ctx: SetupContext) => () => VNode): import('vue').DefineSetupFnComponent<CommonFormItemProps<T>, EmitsOptions, {}, CommonFormItemProps<T> & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), import('vue').PublicProps>;

package/dist/form/index.d.ts

@@ -0,0 +1,5 @@
+export * from './use-form-item';
+export * from './use-form';
+export * from './define-component';
+export * from '../utils';
+export * from './columns';

package/dist/form/types.d.ts

@@ -0,0 +1,78 @@
+import { Ref, ComputedRef } from 'vue';
+import { RecordPath } from '../type-helper';
+import { FormTypeMap } from './define-component';
+import { GetFormData, ResetToDefault, SetAsDefault } from './use-form';
+/**
+ * 对于需要暴露给外部使用的方法，其类型从这里Pick，这样会有统一的类型提示
+ */
+export interface ExposeWithComment<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> {
+    /**
+     * 获取表单当前展示出的项目的表单值
+     */
+    getFormData: GetFormData<FormData>;
+    /**
+     * 重置表单为默认值
+     *
+     * `sync false` 由于这个方法很可能在`watchEffect`中调用
+     *
+     * 以非同步的方式调用，其内部属性不会放到`watchEffect`的依赖中
+     * @param sync 是否同步更新，默认为 false
+     */
+    resetToDefault: ResetToDefault;
+    /**
+     * 设置当前表单的默认值，如果参数为空，则将`当前表单值`设置为默认值
+     */
+    setAsDefault: SetAsDefault<FormData>;
+    /**
+     * 表单值，包含已经隐藏的值
+     */
+    form: Ref<FormData>;
+    /**
+     * 配置显示的项目
+     */
+    columnsChecked: Ref<RecordPath<FormData>[]>;
+    /**
+     * 重置配置显示项目
+     */
+    resetColumnsChecked: () => void;
+    /**
+     * 配置排序的项目
+     */
+    columnsSort: Ref<Partial<Record<RecordPath<FormData>, number>>>;
+    /**
+     * 重置排序
+     */
+    resetColumnsSort: () => void;
+    /**
+     * 所有表单项目
+     */
+    columns: ComputedRef<FormTypeMap<FormData>[Type]["columns"]>;
+    /**
+     * 当前显示的表单项目
+     */
+    visibleColumns: ComputedRef<FormTypeMap<FormData>[Type]["columns"]>;
+    /**
+     * 表单容器组件 props, 由表单容器组件决定
+     *
+     * 定义方式：
+     *
+     * @example
+     * ```ts
+     *
+     * declare module "@ftjs/core" {
+     *   interface FormContainerProps {
+     *     ...
+     *   }
+     * }
+     * ```
+     */
+    internalFormProps: ComputedRef<FormTypeMap<FormData>[Type]["internalFormProps"] | undefined>;
+    /**
+     * 表单提交事件
+     */
+    onSubmit?: (formData: FormData) => Promise<void> | void;
+    /**
+     * 缓存
+     */
+    cache: ComputedRef<string | undefined>;
+}

package/dist/form/use-form-item.d.ts

@@ -0,0 +1,22 @@
+import { TfFormColumnBase } from './columns';
+import { CommonFormItemProps, FormTypeMap } from './define-component';
+interface UseFormItemOptions<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> {
+    /** 通用 props */
+    props: CommonFormItemProps<FormTypeMap<FormData>[Type]["columns"]>;
+    /**
+     * set 转换
+     */
+    valueSetter?: (val: any) => any;
+    /**
+     * get 转换
+     */
+    valueGetter?: (val: any) => any;
+}
+/**
+ * 通用的 form item 组件处理，处理 form 中的值
+ */
+export declare const useFormItem: <FromData extends Record<string, any>, Type extends keyof FormTypeMap<FromData>>(options: UseFormItemOptions<TfFormColumnBase<FormData>, Type>) => {
+    valueComputed: import('vue').WritableComputedRef<any, any>;
+    isView: import('vue').ComputedRef<boolean>;
+};
+export {};

package/dist/form/use-form.d.ts

@@ -0,0 +1,20 @@
+import { Ref, ComputedRef } from 'vue';
+import { FormTypeMap, TfFormIntrinsicProps } from './define-component';
+import { SplitEventKeys } from '../type-helper';
+import { ExposeWithComment } from './types';
+export type FormInject<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> = Pick<ExposeWithComment<FormData, Type>, "form" | "columnsChecked" | "columnsSort" | "visibleColumns" | "internalFormProps" | "onSubmit" | "getFormData" | "resetToDefault" | "setAsDefault" | "resetColumnsSort" | "resetColumnsChecked" | "cache"> & SplitEventKeys<FormTypeMap<FormData>[Type]["extendedProps"]> & {
+    columns: ComputedRef<FormTypeMap<FormData>[Type]["columns"][]>;
+};
+export declare const useForm: <FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>>(props: TfFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
+    columns: FormTypeMap<FormData>[Type]["columns"][];
+}, formData: Ref<FormData | undefined>, runtimePropsKeys: string[]) => {
+    form: Ref<FormData, FormData>;
+    visibleColumns: ComputedRef<FormTypeMap<FormData>[Type]["columns"][]>;
+    resetToDefault: ResetToDefault;
+    getFormData: GetFormData<FormData>;
+    setAsDefault: SetAsDefault<FormData>;
+};
+export declare const useFormInject: <FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>>() => FormInject<FormData, Type> | undefined;
+export type GetFormData<FormData extends Record<string, any>> = () => FormData;
+export type ResetToDefault = (sync?: boolean) => Promise<void> | void;
+export type SetAsDefault<FormData extends Record<string, any>> = (v?: FormData) => void;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './form';
+export * from './table';
+export type * from './type-helper';

package/dist/index.js

@@ -0,0 +1,570 @@
+import { unref, computed, toValue, ref, watch, onUnmounted, provide, inject, nextTick, defineComponent, h } from "vue";
+const isBrowser = typeof window !== "undefined";
+const getField = (column) => {
+  var _a;
+  return column.field ?? ((_a = column.fields) == null ? void 0 : _a[0]);
+};
+const isEmptyStrOrNull = (val) => {
+  return val === "" || val == null;
+};
+const cloneDeep = (obj) => {
+  if (typeof obj === "object" && obj !== null) {
+    return JSON.parse(JSON.stringify(obj));
+  }
+  return obj;
+};
+const get = (obj, path) => {
+  const keys = path.split(".");
+  let result = obj;
+  for (const key of keys) {
+    if (result == null || typeof result !== "object") {
+      return void 0;
+    }
+    if (Reflect.has(result, key)) {
+      result = Reflect.get(result, key);
+    } else {
+      return void 0;
+    }
+  }
+  return result;
+};
+const set = (obj, path, value) => {
+  const keys = path.split(".");
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (!Reflect.has(obj, key)) {
+      Reflect.set(obj, key, {});
+    }
+    obj = Reflect.get(obj, key);
+  }
+  Reflect.set(obj, keys[keys.length - 1], value);
+};
+const has = (obj, path) => {
+  const keys = path.split(".");
+  for (const key of keys) {
+    if (!Reflect.has(obj, key)) {
+      return false;
+    }
+    obj = Reflect.get(obj, key);
+  }
+  return true;
+};
+const unrefs = (obj) => {
+  if (!obj || typeof obj !== "object") {
+    return obj;
+  }
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => [key, unref(value)])
+  );
+};
+const getStorage = (key, cache) => {
+  let value = {};
+  if (cache && isBrowser) {
+    try {
+      const storageStr = localStorage.getItem(key);
+      if (storageStr) {
+        const storageV = JSON.parse(storageStr);
+        if (storageV[cache]) {
+          value = storageV[cache];
+        }
+      }
+    } catch (error) {
+      console.error(error);
+      value = {};
+    }
+  }
+  return value;
+};
+const setStorage = (key, value, cache) => {
+  if (cache && isBrowser) {
+    let obj = {};
+    const storageStr = localStorage.getItem(key);
+    if (storageStr) {
+      try {
+        obj = JSON.parse(storageStr) ?? {};
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    obj[cache] = value;
+    localStorage.setItem(key, JSON.stringify(obj));
+  }
+};
+const transferVueArrayPropsToObject = (arr) => {
+  const props = {};
+  arr.forEach((item) => {
+    if (typeof item === "string") {
+      props[item] = {};
+    } else {
+      props[item[0]] = item[1] || {};
+    }
+  });
+  return props;
+};
+const getPropsKeys = (arr) => {
+  return arr.map((item) => {
+    if (typeof item === "string") {
+      return item;
+    } else {
+      return item[0];
+    }
+  });
+};
+const provideFormKey = Symbol("@ftjs/core-form-provide");
+const useColumnsChecked = (columns, cache) => {
+  const storageKey = `tf-form-columns-checked-obj`;
+  const columnsV = computed(() => {
+    const entries = columns.value.map((e) => {
+      var _a;
+      const field = e.field ?? ((_a = e.fields) == null ? void 0 : _a[0]);
+      return [field, !toValue(e.hide)];
+    });
+    return Object.fromEntries(entries);
+  });
+  const storageV = getStorage(storageKey, cache);
+  const vRef = ref(
+    Object.assign({}, columnsV.value, storageV)
+  );
+  const columnsChecked = computed({
+    get() {
+      return Object.entries(vRef.value).filter(([_, show]) => show).map(([field]) => field);
+    },
+    set(v) {
+      const storageV2 = {};
+      const entries = columns.value.map((e) => {
+        const field = getField(e);
+        const show = v.includes(field);
+        if (show !== !toValue(e.hide)) storageV2[field] = show;
+        return [field, show];
+      });
+      vRef.value = Object.fromEntries(entries);
+      setStorage(storageKey, storageV2, cache);
+    }
+  });
+  const resetColumnsChecked = () => {
+    columnsChecked.value = columns.value.filter((e) => !toValue(e.hide)).map((e) => getField(e));
+  };
+  return {
+    columnsChecked,
+    resetColumnsChecked
+  };
+};
+const useColumnsSorted = (columns, cache) => {
+  const storageKey = `tf-form-columns-sorted-obj`;
+  const columnsV = computed(() => {
+    const entries = columns.value.map((e, idx) => {
+      var _a;
+      const field = e.field ?? ((_a = e.fields) == null ? void 0 : _a[0]);
+      return [field, e.sort ?? idx];
+    });
+    return Object.fromEntries(entries);
+  });
+  const storageV = getStorage(storageKey, cache);
+  const vRef = ref(
+    Object.assign({}, columnsV.value, storageV)
+  );
+  const columnsSort = computed({
+    get() {
+      return vRef.value;
+    },
+    set(v) {
+      const storageV2 = {};
+      const entries = columns.value.map((e, idx) => {
+        const field = getField(e);
+        if (v[field] !== (e.sort ?? idx)) {
+          storageV2[field] = v[field];
+        }
+        return [field, v[field]];
+      });
+      vRef.value = Object.fromEntries(entries);
+      setStorage(storageKey, storageV2, cache);
+    }
+  });
+  const resetColumnsSort = () => {
+    const resetV = {};
+    columns.value.forEach((e, idx) => {
+      const field = getField(e);
+      resetV[field] = e.sort ?? idx;
+    });
+    columnsSort.value = resetV;
+  };
+  return {
+    columnsSort,
+    resetColumnsSort
+  };
+};
+const getFieldsAndValues = (column) => {
+  const fields = column.fields || [column.field];
+  const values = column.fields ? column.value || [] : [column.value];
+  return { fields, values };
+};
+const useForm = (props, formData, runtimePropsKeys) => {
+  const columns = computed(() => toValue(props.columns));
+  const formLocal = ref({});
+  const form = unref(formData) != null ? formData : formLocal;
+  const { columnsChecked, resetColumnsChecked } = useColumnsChecked(
+    columns,
+    props.cache
+  );
+  const { columnsSort, resetColumnsSort } = useColumnsSorted(
+    columns,
+    props.cache
+  );
+  let tmpDefaultForm;
+  const watchMap = /* @__PURE__ */ new Map();
+  const hideFieldSet = ref(/* @__PURE__ */ new Set());
+  const visibleColumns = computed(() => {
+    return columns.value.filter((column) => {
+      var _a;
+      const key = getField(column);
+      return !hideFieldSet.value.has(key) && (((_a = columnsChecked.value) == null ? void 0 : _a.includes(key)) ?? true);
+    }).sort((a, b) => {
+      const keyA = getField(a);
+      const keyB = getField(b);
+      const aSort = columnsSort.value[keyA] ?? 0;
+      const bSort = columnsSort.value[keyB] ?? 0;
+      return aSort - bSort;
+    });
+  });
+  const customProps = runtimePropsKeys.reduce((acc, event) => {
+    if (event.startsWith("on")) {
+      acc[event] = props[event];
+    } else {
+      acc[event] = computed(() => props[event]);
+    }
+    return acc;
+  }, {});
+  watch(
+    columns,
+    (_v, _o, onCleanup) => {
+      onCleanup(() => {
+        watchMap.forEach((cancel) => cancel());
+        watchMap.clear();
+        hideFieldSet.value.clear();
+        console.warn(`[@ftjs/core] 检测到columns在改变，应该尽量避免变动`);
+      });
+      addFormDefaultValue();
+      runFieldWatch();
+    },
+    {
+      immediate: true
+    }
+  );
+  onUnmounted(() => {
+    watchMap.forEach((cancel) => cancel());
+  });
+  function runFieldWatch() {
+    columns.value.forEach((column) => {
+      let watchObj = column.watch;
+      const control = column.control;
+      if (!watchObj && !control) return;
+      const field = getField(column);
+      const cancel = [];
+      if (typeof watchObj === "function") {
+        watchObj = {
+          handler: watchObj
+        };
+      }
+      if (watchObj) {
+        cancel.push(
+          watch(
+            () => {
+              return get(form.value, field);
+            },
+            (val, oldVal) => {
+              watchObj.handler({ val, oldVal, form: form.value });
+            },
+            {
+              immediate: watchObj.immediate,
+              deep: watchObj.deep
+            }
+          )
+        );
+      }
+      if (control) {
+        cancel.push(
+          watch(
+            () => get(form.value, field),
+            (val) => {
+              control.forEach(({ field: field2, value }) => {
+                let show = true;
+                if (typeof value === "function") {
+                  show = value({
+                    formData: form.value,
+                    val
+                  });
+                } else {
+                  show = Array.isArray(value) ? value.includes(val) : val === value;
+                }
+                if (show) {
+                  hideFieldSet.value.delete(field2);
+                } else {
+                  hideFieldSet.value.add(field2);
+                }
+              });
+            },
+            {
+              immediate: true
+            }
+          )
+        );
+      }
+      watchMap.set(field, () => {
+        cancel.forEach((c) => c());
+      });
+    });
+  }
+  const resetToDefault = async (sync = false) => {
+    if (!sync) await nextTick();
+    if (tmpDefaultForm) {
+      form.value = cloneDeep(tmpDefaultForm);
+      return;
+    }
+    form.value = columns.value.reduce((prev, column) => {
+      const { fields, values } = getFieldsAndValues(column);
+      fields.forEach((field, idx) => {
+        set(prev, field, cloneDeep(values[idx]));
+      });
+      return prev;
+    }, {});
+  };
+  const setAsDefault = (v) => {
+    tmpDefaultForm = cloneDeep(v ?? form.value);
+  };
+  function addFormDefaultValue() {
+    columns.value.forEach((column) => {
+      const { fields, values } = getFieldsAndValues(column);
+      fields.forEach((field, idx) => {
+        if (values[idx] != null && !has(form.value, field)) {
+          set(form.value, field, cloneDeep(values[idx]));
+        }
+      });
+    });
+  }
+  const getFormData = () => {
+    const formData2 = {};
+    visibleColumns.value.forEach((usefulColumn) => {
+      const { fields } = getFieldsAndValues(usefulColumn);
+      fields.forEach((field) => {
+        set(formData2, field, get(form.value, field));
+      });
+    });
+    return formData2;
+  };
+  const internalFormProps = computed(() => props.internalFormProps);
+  const cache = computed(() => props.cache);
+  provide(provideFormKey, {
+    form,
+    columnsChecked,
+    columnsSort,
+    columns,
+    visibleColumns,
+    internalFormProps,
+    cache,
+    getFormData,
+    resetToDefault,
+    setAsDefault,
+    onSubmit: props.onSubmit,
+    resetColumnsChecked,
+    resetColumnsSort,
+    ...customProps
+  });
+  return {
+    form,
+    visibleColumns,
+    resetToDefault,
+    getFormData,
+    setAsDefault
+  };
+};
+const useFormInject = () => {
+  return inject(provideFormKey);
+};
+const useFormItem = (options) => {
+  let { props, valueGetter, valueSetter } = options;
+  if (props.column.valueGetter) {
+    valueGetter = props.column.valueGetter;
+  }
+  if (props.column.valueSetter) {
+    valueSetter = props.column.valueSetter;
+  }
+  const { form } = useFormInject();
+  const valueComputed = computed({
+    get() {
+      let val;
+      if (props.column.fields) {
+        val = props.column.fields.map((field) => {
+          return get(form.value, field);
+        }).filter((e) => !isEmptyStrOrNull(e));
+      } else if (props.column.field) {
+        val = get(form.value, props.column.field);
+      } else {
+        console.warn(`column 没有设置 field 或者 fields`, props.column);
+      }
+      if (valueGetter) val = valueGetter(val);
+      return val;
+    },
+    set(val) {
+      if (valueSetter) val = valueSetter(val);
+      if (props.column.fields) {
+        props.column.fields.forEach((field, index) => {
+          set(form.value, field, val == null ? void 0 : val[index]);
+        });
+      } else if (props.column.field) {
+        set(form.value, props.column.field, val);
+      } else {
+        console.warn(`column 没有设置 field 或者 fields`, props.column);
+      }
+    }
+  });
+  const isView = computed(() => {
+    return toValue(props.column.isView) ?? props.isView;
+  });
+  return {
+    valueComputed,
+    isView
+  };
+};
+const defineTfForm = (setup, renderMap, _runtimeProps) => {
+  const FormComponent = defineComponent(setup, {
+    inheritAttrs: false,
+    name: "TfFormContainer"
+  });
+  const runtimeProps = [
+    "cache",
+    "columns",
+    "formData",
+    "internalFormProps",
+    "onSubmit",
+    "onUpdate:formData",
+    ..._runtimeProps
+  ];
+  return defineComponent(
+    (props, ctx) => {
+      const formData = computed({
+        get: () => props.formData,
+        set(v) {
+          var _a;
+          (_a = props["onUpdate:formData"]) == null ? void 0 : _a.call(props, v);
+        }
+      });
+      const { visibleColumns } = useForm(
+        props,
+        formData,
+        getPropsKeys(_runtimeProps)
+      );
+      return () => h(FormComponent, null, {
+        ...ctx.slots,
+        formContent: () => visibleColumns.value.map((column) => {
+          var _a;
+          if (!renderMap.has(column.type)) {
+            console.warn(
+              `[@ftjs/core]: 没有配置 column.type ${column.type}, 请检查该组件是否注册`
+            );
+            return null;
+          }
+          const component = renderMap.get(column.type);
+          return h(component, {
+            column,
+            // 是否为查看模式
+            isView: column.isView,
+            key: column.field ?? ((_a = column.fields) == null ? void 0 : _a[0])
+          });
+        })
+      });
+    },
+    {
+      props: transferVueArrayPropsToObject(runtimeProps),
+      name: "TfForm"
+    }
+  );
+};
+function defineFormComponent(setup) {
+  return defineComponent(setup, {
+    props: ["column", "isView"],
+    inheritAttrs: false
+  });
+}
+const provideTableKey = Symbol("@ftjs/core-table-provide");
+const useTable = (props, runtimePropsKeys) => {
+  const formColumns = computed(() => {
+    const fromTable = props.columns.filter((e) => e.search).map((e) => ({
+      field: e.field,
+      title: e.title,
+      ...e.search
+    }));
+    return [...fromTable, ...props.searchColumns ?? []];
+  });
+  const tableColumns = computed(() => {
+    return props.columns;
+  });
+  const injectProps = runtimePropsKeys.reduce(
+    (acc, key) => {
+      if (key.startsWith("on")) {
+        acc[key] = props[key];
+      } else {
+        acc[key] = computed(() => props[key]);
+      }
+      return acc;
+    },
+    {}
+  );
+  provide(provideTableKey, {
+    formColumns,
+    tableColumns,
+    ...injectProps
+  });
+};
+const useTableInject = () => {
+  return inject(provideTableKey);
+};
+function defineTfTable(setup, _runtimeProps) {
+  const TableComponent = defineComponent(setup, {
+    inheritAttrs: false,
+    name: "TfTableContainer"
+  });
+  const runtimeProps = [
+    "cache",
+    "columns",
+    "searchColumns",
+    "total",
+    "defaultPageSize",
+    ["loading", { type: Boolean }],
+    "internalTableProps",
+    "internalFormProps",
+    "tableData",
+    "keyField",
+    ..._runtimeProps
+  ];
+  return defineComponent(
+    (props, ctx) => {
+      useTable(props, getPropsKeys(runtimeProps));
+      return () => h(TableComponent, null, ctx.slots);
+    },
+    {
+      props: transferVueArrayPropsToObject(runtimeProps),
+      name: "TfTable"
+    }
+  );
+}
+export {
+  cloneDeep,
+  defineFormComponent,
+  defineTfForm,
+  defineTfTable,
+  get,
+  getField,
+  getPropsKeys,
+  getStorage,
+  has,
+  isBrowser,
+  isEmptyStrOrNull,
+  set,
+  setStorage,
+  transferVueArrayPropsToObject,
+  unrefs,
+  useForm,
+  useFormInject,
+  useFormItem,
+  useTableInject
+};

package/dist/table/columns.d.ts

@@ -0,0 +1,16 @@
+import { RecordPath } from '../type-helper';
+/**
+ * 表格列定义
+ *
+ * @public
+ */
+export interface TfTableColumn<TableData extends Record<string, any>> {
+    /**
+     * 列标题
+     */
+    title?: string;
+    /**
+     * 列字段
+     */
+    field: RecordPath<TableData> | `_${string}`;
+}

package/dist/table/define-components.d.ts

@@ -0,0 +1,89 @@
+import { EmitsOptions, SetupContext, SlotsType } from 'vue';
+import { TfTableColumn } from './columns';
+import { RuntimeProps, TfFormColumnBase } from '../form';
+import { TupleKeys } from '../type-helper';
+export interface TableTypeMap<TableData extends Record<string, any>, SearchData extends Record<string, any>> {
+    default: {
+        tableSlots: {};
+        tableColumn: TfTableColumn<TableData>;
+        formColumn: TfFormColumnBase<SearchData>;
+        extendedProps: {};
+        internalFormProps: {};
+        internalTableProps: {};
+    };
+}
+export type TableColumn<TableData extends Record<string, any>, SearchData extends Record<string, any>, Type extends keyof TableTypeMap<TableData, SearchData>> = TableTypeMap<TableData, SearchData>[Type]["tableColumn"] & {
+    /**
+     * 搜索表单配置
+     */
+    search?: TableTypeMap<TableData, SearchData>[Type]["formColumn"];
+};
+export interface TfTableIntrinsicProps<TableData extends Record<string, any>, SearchData extends Record<string, any>, type extends keyof TableTypeMap<TableData, SearchData>> {
+    /**
+     * 用于缓存配置，不填则不缓存
+     */
+    cache?: string;
+    /**
+     * 列定义
+     */
+    columns: TableColumn<TableData, SearchData, type>[];
+    /**
+     * 列定义外的搜索条件
+     */
+    searchColumns?: TableTypeMap<TableData, SearchData>[type]["formColumn"][];
+    /**
+     * 表格总条数
+     */
+    total?: number;
+    /**
+     * 默认每页条数
+     */
+    defaultPageSize?: number;
+    /**
+     * 是否显示 loading
+     */
+    loading?: boolean;
+    /**
+     * 内部表单组件的 props
+     */
+    internalFormProps?: TableTypeMap<TableData, SearchData>[type]["internalFormProps"];
+    /**
+     * 内部表格组件的 props
+     */
+    internalTableProps?: TableTypeMap<TableData, SearchData>[type]["internalTableProps"];
+    /**
+     * 表格数据
+     */
+    tableData?: TableData[];
+    /**
+     * 表格 key 字段
+     */
+    keyField?: string;
+}
+export type TfTablePropsMap<TableData extends Record<string, any>, SearchData extends Record<string, any>, Type extends keyof TableTypeMap<TableData, SearchData>> = TfTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"];
+export declare function defineTfTable<Type extends keyof TableTypeMap<any, any>>(setup: (props: {}, ctx: SetupContext<EmitsOptions, SlotsType<TableTypeMap<any, any>[Type]["tableSlots"]>>) => any, _runtimeProps: RuntimeProps<TupleKeys<TableTypeMap<any, any>[Type]["extendedProps"]>>[] & {
+    length: TupleKeys<TableTypeMap<any, any>[Type]["extendedProps"]>["length"];
+}): new <TableData extends Record<string, any>, SearchData extends Record<string, any> = TableData>(props: (TfTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+})) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => import('vue').CreateComponentPublicInstanceWithMixins<TfTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & ({
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+}), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, EmitsOptions, import('vue').PublicProps, {}, false, {}, SlotsType<TableTypeMap<TableData, SearchData>[Type]["tableSlots"]>, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, {} & ((TfTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} extends infer T ? T extends TfTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+} ? T extends void ? {} : T : never : never) | (TfTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+} extends infer T_1 ? T_1 extends TfTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & {
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+} ? T_1 extends void ? {} : T_1 : never : never)), {}, {}, {}, {}, {}>;

package/dist/table/index.d.ts

@@ -0,0 +1,3 @@
+export * from './columns';
+export * from './define-components';
+export { useTableInject } from './use-table';

package/dist/table/use-table.d.ts

@@ -0,0 +1,10 @@
+import { ComputedRef } from 'vue';
+import { TableTypeMap, TfTableIntrinsicProps } from './define-components';
+import { SplitEventKeys } from '../type-helper';
+type TableInject<TableData extends Record<string, any>, FormData extends Record<string, any> = TableData, Type extends keyof TableTypeMap<TableData, FormData> = "default"> = SplitEventKeys<TfTableIntrinsicProps<TableData, FormData, Type> & TableTypeMap<TableData, FormData>[Type]["extendedProps"]> & {
+    formColumns: ComputedRef<TableTypeMap<TableData, FormData>[Type]["formColumn"][]>;
+    tableColumns: ComputedRef<TableTypeMap<TableData, FormData>[Type]["tableColumn"][]>;
+};
+export declare const useTable: <TableData extends Record<string, any>, FormData extends Record<string, any>, Type extends keyof TableTypeMap<TableData, FormData>>(props: TfTableIntrinsicProps<TableData, FormData, Type>, runtimePropsKeys: string[]) => void;
+export declare const useTableInject: <TableData extends Record<string, any>, FormData extends Record<string, any> = TableData, Type extends keyof TableTypeMap<TableData, FormData> = "default">() => TableInject<TableData, FormData, Type> | undefined;
+export {};

package/dist/type-helper.d.ts

@@ -0,0 +1,67 @@
+import { ComputedRef, MaybeRef } from 'vue';
+/**
+ * 临时工具类型减1
+ */
+type Sub1 = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+/**
+ * 工具类型：获取对象的路径
+ *
+ * T: 传入的对象类型
+ * Depth: 有一些对象属性是循环引用的，需要限制下递归深度，避免超出栈的最大深度
+ */
+export type RecordPath<T, Depth extends number = 5> = Depth extends -1 ? string : T extends any[] ? `${number}` | `${number}.${RecordPath<T[number], Sub1[Depth]>}` : T extends Record<string, any> ? ValueOf<{
+    [K in keyof T]-?: K extends string ? `${K}` | `${K}.${RecordPath<T[K], Sub1[Depth]>}` : never;
+}> : never;
+export type ValueOf<T> = T[keyof T];
+/**
+ * 工具类型：恢复{@link MaybeRef}值为普通值
+ */
+export type Unref<T> = T extends MaybeRef<infer U> ? U : T;
+/**
+ * 工具类型：将对象的属性值转换为 {@link Unref}
+ */
+export type Unrefs<T> = {
+    [K in keyof T]: Unref<T[K]>;
+};
+/**
+ * 工具类型：将对象的属性值转换为 {@link MaybeRef}
+ */
+export type Refs<T> = {
+    [K in keyof T]: MaybeRef<T[K]>;
+};
+/**
+ * 工具类型：将对象的属性转换为元组
+ *
+ * @deprecated 元祖推算的元素顺序不确定，所以实际上无法使用，替换为 {@link WithLengthKeys}
+ */
+export type TupleKeys<T> = UnionToTuple<keyof T>;
+/**
+ * 工具类型：将联合类型转换为元组
+ *
+ * @deprecated 元祖推算的元素顺序不确定，所以实际上无法使用
+ */
+type UnionToTuple<T> = ((T extends any ? (t: T) => T : never) extends infer U ? (U extends any ? (u: U) => any : never) extends (v: infer V) => any ? V : never : never) extends (_: any) => infer W ? [...UnionToTuple<Exclude<T, W>>, W] : [];
+/**
+ * 工具类型：得到一个具有指定长度的数组，且每个元素唯一
+ */
+export type WithLengthKeys<T> = (keyof T)[] & {
+    length: TupleKeys<T>["length"];
+};
+/**
+ * 工具类型：将对象中所有属性值转为 {@link ComputedRef}
+ */
+export type ComputedRefKeys<T> = {
+    [K in keyof T]-?: T[K] extends ComputedRef<any> ? T[K] : ComputedRef<T[K]>;
+};
+/**
+ * 工具类型：将对象中所有属性值分流，分为事件和非事件
+ *
+ * 事件可为空。
+ * 属性为可为空的计算属性，本身一定存在。
+ */
+export type SplitEventKeys<T> = {
+    [K in keyof T as K extends `on${string}` ? K : never]?: T[K];
+} & {
+    [K in keyof T as K extends `on${string}` ? never : K]-?: ComputedRef<T[K]>;
+};
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,40 @@
+import { PropType } from 'vue';
+import { RecordPath, Unrefs } from './type-helper';
+import { TfFormColumnBase } from './form/columns';
+export declare const isBrowser: boolean;
+export declare const getField: <T extends Record<string, any>>(column: TfFormColumnBase<T>) => RecordPath<T>;
+export declare const isEmptyStrOrNull: (val: any) => boolean;
+export declare const cloneDeep: <T>(obj: T) => T;
+export declare const get: (obj: any, path: string) => any;
+export declare const set: (obj: any, path: string, value: any) => void;
+export declare const has: (obj: any, path: string) => boolean;
+/**
+ * 浅层的将对象的属性值(可能是响应式)转换为普通值，不转化getter
+ * @param obj
+ * @returns
+ */
+export declare const unrefs: <T>(obj: T) => Unrefs<T>;
+/**
+ * 获取缓存
+ * @param key 缓存 key
+ * @param cache 缓存名称
+ * @returns
+ */
+export declare const getStorage: (key: string, cache?: string) => {};
+/**
+ * 设置缓存
+ * @param key 缓存 key
+ * @param cache 缓存名称
+ */
+export declare const setStorage: (key: string, value: any, cache?: string) => void;
+export type RuntimeProps<T extends readonly any[] = []> = T[number] | [
+    T[number],
+    {
+        type?: PropType<any> | true | null;
+        required?: boolean;
+        default?: any;
+        validator?(value: unknown, props: any): boolean;
+    }
+];
+export declare const transferVueArrayPropsToObject: (arr: RuntimeProps[]) => any;
+export declare const getPropsKeys: (arr: RuntimeProps<any>[]) => any[];

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@ftjs/core",
+  "version": "0.0.2",
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^22.10.9",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/ui": "^3.0.5",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^17.0.2",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.5",
+    "vue-tsc": "2.2.0",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "minify": "pnpm dlx esbuild ./dist/index.js --minify --outfile=./dist/index.min.js",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "pub": "tsx ../../scripts/publish.ts"
+  }
+}