@ftjs/core 0.4.3 → 0.5.0

package/dist/form/columns.d.ts

@@ -1,19 +1,19 @@
-import { MaybeRefOrGetter } from 'vue';
+import { MaybeRefOrGetter, VNodeChild } from 'vue';
 import { RecordPath } from '../type-helper';
-type WatchHandler<FormData extends Record<string, any>> = (params: {
+type WatchHandler<F extends Record<string, any>> = (params: {
     val: any;
     oldVal: any;
-    form: FormData;
+    form: F;
 }) => void;
-type Watch<FormData extends Record<string, any>> = WatchHandler<FormData> | {
-    handler: WatchHandler<FormData>;
+type Watch<F extends Record<string, any>> = WatchHandler<F> | {
+    handler: WatchHandler<F>;
     deep?: boolean;
     immediate?: boolean;
 };
 /**
  * 实现方需要继承这个interface
  */
-export interface FtFormColumnBase<FormData extends Record<string, any>> {
+export interface FtFormColumnBase<F extends Record<string, any>> {
     /**
      * 字段名 `fields` 和 `field` 至少有一个存在
      *
@@ -21,7 +21,7 @@ export interface FtFormColumnBase<FormData extends Record<string, any>> {
      *
      * 如果是在 TableColumns 中，则默认继承其中的 field
      */
-    field?: RecordPath<FormData>;
+    field?: RecordPath<F>;
     /**
      * 字段名数组，当表单需要返回多个值时，使用这个字段
      *
@@ -31,7 +31,7 @@ export interface FtFormColumnBase<FormData extends Record<string, any>> {
      *
      * 如人员信息: [staffId, staffInfoObj, deptInfoObj, ...]
      */
-    fields?: (RecordPath<FormData> | "-")[];
+    fields?: (RecordPath<F> | "-")[];
     /**
      * 字段标题
      *
@@ -45,7 +45,7 @@ export interface FtFormColumnBase<FormData extends Record<string, any>> {
     /**
      * 监听字段值变化，如果是 `fields` ，则只会监听第一个字段的值变化
      */
-    watch?: Watch<FormData>;
+    watch?: Watch<F>;
     /**
      * 字段默认值
      */
@@ -66,7 +66,7 @@ export interface FtFormColumnBase<FormData extends Record<string, any>> {
          *
          */
         value: boolean | string | number | boolean[] | string[] | number[] | /** 返回值表示这个字段是否显示 */ (({ formData, val, }: {
-            formData: FormData;
+            formData: F;
             val: any;
         }) => boolean);
     }[];
@@ -94,5 +94,17 @@ export interface FtFormColumnBase<FormData extends Record<string, any>> {
      * 是否查看模式
      */
     isView?: MaybeRefOrGetter<boolean>;
+    /**
+     * 自定义查看模式下的渲染
+     */
+    viewRender?: (props: {
+        formData: F;
+    }) => VNodeChild;
+    /**
+     * 自定义编辑模式下的渲染
+     */
+    editRender?: (props: {
+        formData: F;
+    }) => VNodeChild;
 }
 export {};

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

@@ -1,9 +1,9 @@
 import { ComputedRef } from 'vue';
 import { FtFormColumnBase } from './columns';
-interface FormInject {
-    form: ComputedRef<Record<string, any>>;
+interface FormInject<F extends Record<string, any>> {
+    form: ComputedRef<F>;
 }
-export declare const useFormInject: () => FormInject | undefined;
+export declare const useFormInject: <F extends Record<string, any> = Record<string, any>>() => FormInject<F> | undefined;
 export interface FtBaseFormProps<F extends Record<string, any>> {
     /**
      * v-model:formData 的值

package/dist/index.js

@@ -1,4 +1,4 @@
-import { unref, inject, computed, ref, watch, onUnmounted, provide, toValue, nextTick } from "vue";
+import { unref, inject, computed, ref, watch, onUnmounted, provide, toValue, watchEffect, nextTick } from "vue";
 const isBrowser = typeof window !== "undefined";
 const getField = (column) => {
   var _a;
@@ -104,10 +104,18 @@ const useColumnsChecked = (columns, cache) => {
     });
     return Object.fromEntries(entries);
   });
-  const storageV = getStorage(storageKey, cache);
+  const storageV = computed(() => {
+    return getStorage(storageKey, toValue(cache));
+  });
   const vRef = ref(
-    Object.assign({}, columnsV.value, storageV)
+    {}
   );
+  watchEffect(() => {
+    vRef.value = {
+      ...columnsV.value,
+      ...storageV.value
+    };
+  });
   const columnsChecked = computed({
     get() {
       return Object.entries(vRef.value).filter(([_, show]) => show).map(([field]) => field);
@@ -121,7 +129,7 @@ const useColumnsChecked = (columns, cache) => {
         return [field, show];
       });
       vRef.value = Object.fromEntries(entries);
-      setStorage(storageKey, storageV2, cache);
+      setStorage(storageKey, storageV2, toValue(cache));
     }
   });
   const resetColumnsChecked = () => {
@@ -142,10 +150,18 @@ const useColumnsSorted = (columns, cache) => {
     });
     return Object.fromEntries(entries);
   });
-  const storageV = getStorage(storageKey, cache);
+  const storageV = computed(() => {
+    return getStorage(storageKey, toValue(cache));
+  });
   const vRef = ref(
-    Object.assign({}, columnsV.value, storageV)
+    {}
   );
+  watchEffect(() => {
+    vRef.value = {
+      ...columnsV.value,
+      ...storageV.value
+    };
+  });
   const columnsSort = computed({
     get() {
       return vRef.value;
@@ -160,7 +176,7 @@ const useColumnsSorted = (columns, cache) => {
         return [field, v[field]];
       });
       vRef.value = Object.fromEntries(entries);
-      setStorage(storageKey, storageV2, cache);
+      setStorage(storageKey, storageV2, toValue(cache));
     }
   });
   const resetColumnsSort = () => {
@@ -200,11 +216,11 @@ const useForm = (props) => {
   });
   const { columnsChecked, resetColumnsChecked } = useColumnsChecked(
     columns,
-    props.cache
+    () => props.cache
   );
   const { columnsSort, resetColumnsSort } = useColumnsSorted(
     columns,
-    props.cache
+    () => props.cache
   );
   let tmpDefaultForm;
   const watchMap = /* @__PURE__ */ new Map();

package/dist/type-helper.d.ts

@@ -29,4 +29,10 @@ export type Unrefs<T> = {
 export type Refs<T> = {
     [K in keyof T]: T[K] extends Ref<any> ? T[K] : MaybeRef<T[K]>;
 };
+/**
+ * 工具类型：提取 Column 的类型
+ */
+export type ExtractColumnType<T> = T extends {
+    type: infer U;
+} ? U : never;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftjs/core",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "keywords": [],
   "author": "",
   "license": "MIT",