@ftjs/core 0.2.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,4 @@
1
1
  export * from './use-form-item';
2
2
  export * from './use-form';
3
- export * from './define-component';
4
3
  export * from '../utils';
5
4
  export * from './columns';
@@ -1,6 +1,5 @@
1
1
  import { VNodeChild } from 'vue';
2
- import { FtFormColumnBase } from './columns';
3
- import { CommonFormItemProps, FormTypeMap } from './define-component';
2
+ import { FtBaseFormProps } from './use-form';
4
3
  type Slots = (props: {
5
4
  value: any;
6
5
  isView: boolean;
@@ -9,9 +8,9 @@ type Slots = (props: {
9
8
  export type CommonSlots<T extends readonly string[]> = {
10
9
  [K in T[number]]?: Slots;
11
10
  };
12
- interface UseFormItemOptions<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> {
11
+ interface UseFormItemOptions<P extends FtBaseFormProps<any>> {
13
12
  /** 通用 props */
14
- props: CommonFormItemProps<FormTypeMap<FormData>[Type]["columns"]>;
13
+ props: P;
15
14
  /**
16
15
  * set 转换
17
16
  */
@@ -24,7 +23,7 @@ interface UseFormItemOptions<FormData extends Record<string, any>, Type extends
24
23
  /**
25
24
  * 通用的 form item 组件处理,处理 form 中的值
26
25
  */
27
- export declare const useFormItem: <FromData extends Record<string, any>, Type extends keyof FormTypeMap<FromData>>(options: UseFormItemOptions<FtFormColumnBase<FormData>, Type>) => {
26
+ export declare const useFormItem: (options: UseFormItemOptions<any>) => {
28
27
  valueComputed: import('vue').WritableComputedRef<any, any>;
29
28
  slots: Record<string, (props?: any) => VNodeChild> | undefined;
30
29
  };
@@ -1,20 +1,46 @@
1
- import { Ref, ComputedRef } from 'vue';
2
- import { FormTypeMap, FtFormIntrinsicProps } from './define-component';
3
- import { SplitEventKeys } from '../type-helper';
4
- import { ExposeWithComment } from './types';
5
- 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"]> & {
6
- columns: ComputedRef<FormTypeMap<FormData>[Type]["columns"][]>;
7
- };
8
- export declare const useForm: <FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>>(props: FtFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
9
- columns: FormTypeMap<FormData>[Type]["columns"][];
10
- }, formData: Ref<FormData | undefined>, runtimePropsKeys: string[]) => {
11
- form: Ref<FormData, FormData>;
12
- visibleColumns: ComputedRef<FormTypeMap<FormData>[Type]["columns"][]>;
1
+ import { ComputedRef } from 'vue';
2
+ import { FtFormColumnBase } from './columns';
3
+ interface FormInject {
4
+ form: ComputedRef<Record<string, any>>;
5
+ }
6
+ export declare const useFormInject: () => FormInject | undefined;
7
+ export interface FtBaseFormProps<F extends Record<string, any>> {
8
+ /**
9
+ * v-model:formData 的值
10
+ */
11
+ formData?: F;
12
+ "onUpdate:formData"?: (value: F) => void;
13
+ /**
14
+ * 提交表单
15
+ */
16
+ onSubmit?: (formData: F) => Promise<void> | void;
17
+ /**
18
+ * 是否查看模式
19
+ */
20
+ isView?: boolean;
21
+ /**
22
+ * 表单列
23
+ */
24
+ columns: FtFormColumnBase<F>[];
25
+ /**
26
+ * 用于缓存配置,不填则不缓存
27
+ */
28
+ cache?: string;
29
+ }
30
+ export type ExtractFormData<P extends FtBaseFormProps<any>> = P extends FtBaseFormProps<infer F> ? F : never;
31
+ export type ExtractColumns<P extends FtBaseFormProps<any>> = P extends FtBaseFormProps<any> ? P["columns"] : never;
32
+ export declare const useForm: <P extends FtBaseFormProps<any>>(props: P) => {
33
+ form: import('vue').WritableComputedRef<any, any>;
34
+ visibleColumns: ComputedRef<ExtractColumns<P>>;
35
+ columnsChecked: import('vue').WritableComputedRef<string[], string[]>;
36
+ columnsSort: import('vue').WritableComputedRef<Record<string, number>, Record<string, number>>;
13
37
  resetToDefault: ResetToDefault;
14
- getFormData: GetFormData<FormData>;
15
- setAsDefault: SetAsDefault<FormData>;
38
+ getFormData: GetFormData<ExtractFormData<P>>;
39
+ setAsDefault: SetAsDefault<ExtractFormData<P>>;
40
+ resetColumnsChecked: () => void;
41
+ resetColumnsSort: () => void;
16
42
  };
17
- export declare const useFormInject: <FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>>() => FormInject<FormData, Type> | undefined;
18
43
  export type GetFormData<FormData extends Record<string, any>> = () => FormData;
19
44
  export type ResetToDefault = (sync?: boolean) => Promise<void> | void;
20
45
  export type SetAsDefault<FormData extends Record<string, any>> = (v?: FormData) => void;
46
+ export {};
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { unref, computed, toValue, ref, watch, onUnmounted, provide, inject, nextTick, defineComponent, h } from "vue";
1
+ import { unref, inject, computed, ref, watch, onUnmounted, provide, toValue, nextTick } from "vue";
2
2
  const isBrowser = typeof window !== "undefined";
3
3
  const getField = (column) => {
4
4
  var _a;
@@ -90,27 +90,10 @@ const setStorage = (key, value, cache) => {
90
90
  localStorage.setItem(key, JSON.stringify(obj));
91
91
  }
92
92
  };
93
- function transferVueArrayPropsToObject(arr) {
94
- const props = {};
95
- arr.forEach((item) => {
96
- if (typeof item === "string") {
97
- props[item] = {};
98
- } else {
99
- props[item[0]] = item[1] || {};
100
- }
101
- });
102
- return props;
103
- }
104
- const getPropsKeys = (arr) => {
105
- return arr.map((item) => {
106
- if (typeof item === "string") {
107
- return item;
108
- } else {
109
- return item[0];
110
- }
111
- });
112
- };
113
93
  const provideFormKey = Symbol("@ftjs/core-form-provide");
94
+ const useFormInject = () => {
95
+ return inject(provideFormKey);
96
+ };
114
97
  const useColumnsChecked = (columns, cache) => {
115
98
  const storageKey = `ftjs-form-columns-checked-obj`;
116
99
  const columnsV = computed(() => {
@@ -198,10 +181,23 @@ const getFieldsAndValues = (column) => {
198
181
  const values = column.fields ? column.value || [] : [column.value];
199
182
  return { fields, values };
200
183
  };
201
- const useForm = (props, formData, runtimePropsKeys) => {
202
- const columns = computed(() => toValue(props.columns));
203
- const formLocal = ref({});
204
- const form = unref(formData) != null ? formData : formLocal;
184
+ const useForm = (props) => {
185
+ var _a;
186
+ const columns = computed(() => props.columns);
187
+ const formLocal = ref(props.formData ?? {});
188
+ if (props.formData == null) {
189
+ (_a = props["onUpdate:formData"]) == null ? void 0 : _a.call(props, formLocal.value);
190
+ }
191
+ const form = computed({
192
+ get() {
193
+ return formLocal.value;
194
+ },
195
+ set(v) {
196
+ var _a2;
197
+ formLocal.value = v;
198
+ (_a2 = props["onUpdate:formData"]) == null ? void 0 : _a2.call(props, v);
199
+ }
200
+ });
205
201
  const { columnsChecked, resetColumnsChecked } = useColumnsChecked(
206
202
  columns,
207
203
  props.cache
@@ -215,9 +211,9 @@ const useForm = (props, formData, runtimePropsKeys) => {
215
211
  const hideFieldSet = ref(/* @__PURE__ */ new Set());
216
212
  const visibleColumns = computed(() => {
217
213
  return columns.value.filter((column) => {
218
- var _a;
214
+ var _a2;
219
215
  const key = getField(column);
220
- return !hideFieldSet.value.has(key) && (((_a = columnsChecked.value) == null ? void 0 : _a.includes(key)) ?? true);
216
+ return !hideFieldSet.value.has(key) && (((_a2 = columnsChecked.value) == null ? void 0 : _a2.includes(key)) ?? true);
221
217
  }).sort((a, b) => {
222
218
  const keyA = getField(a);
223
219
  const keyB = getField(b);
@@ -226,14 +222,6 @@ const useForm = (props, formData, runtimePropsKeys) => {
226
222
  return aSort - bSort;
227
223
  });
228
224
  });
229
- const customProps = runtimePropsKeys.reduce((acc, event) => {
230
- if (event.startsWith("on")) {
231
- acc[event] = props[event];
232
- } else {
233
- acc[event] = computed(() => props[event]);
234
- }
235
- return acc;
236
- }, {});
237
225
  watch(
238
226
  columns,
239
227
  (_v, _o, onCleanup) => {
@@ -341,7 +329,7 @@ const useForm = (props, formData, runtimePropsKeys) => {
341
329
  });
342
330
  }
343
331
  const getFormData = () => {
344
- const formData2 = {};
332
+ const formData = {};
345
333
  visibleColumns.value.forEach((usefulColumn) => {
346
334
  const { fields } = getFieldsAndValues(usefulColumn);
347
335
  fields.forEach((field) => {
@@ -349,40 +337,26 @@ const useForm = (props, formData, runtimePropsKeys) => {
349
337
  if (usefulColumn.formatGetFormData) {
350
338
  value = usefulColumn.formatGetFormData(value);
351
339
  }
352
- set(formData2, field, value);
340
+ set(formData, field, value);
353
341
  });
354
342
  });
355
- return formData2;
343
+ return formData;
356
344
  };
357
- const internalFormProps = computed(() => props.internalFormProps);
358
- const cache = computed(() => props.cache);
359
345
  provide(provideFormKey, {
360
- form,
361
- columnsChecked,
362
- columnsSort,
363
- columns,
364
- visibleColumns,
365
- internalFormProps,
366
- cache,
367
- getFormData,
368
- resetToDefault,
369
- setAsDefault,
370
- onSubmit: props.onSubmit,
371
- resetColumnsChecked,
372
- resetColumnsSort,
373
- ...customProps
346
+ form
374
347
  });
375
348
  return {
376
349
  form,
377
350
  visibleColumns,
351
+ columnsChecked,
352
+ columnsSort,
378
353
  resetToDefault,
379
354
  getFormData,
380
- setAsDefault
355
+ setAsDefault,
356
+ resetColumnsChecked,
357
+ resetColumnsSort
381
358
  };
382
359
  };
383
- const useFormInject = () => {
384
- return inject(provideFormKey);
385
- };
386
360
  const useFormItem = (options) => {
387
361
  let { props, valueGetter, valueSetter } = options;
388
362
  if (props.column.valueGetter) {
@@ -458,147 +432,44 @@ const useFormItem = (options) => {
458
432
  slots
459
433
  };
460
434
  };
461
- const defineFtForm = (setup, renderMap, _runtimeProps) => {
462
- const FormComponent = defineComponent(setup, {
463
- inheritAttrs: false,
464
- name: "FtFormContainer"
465
- });
466
- const runtimeProps = [
467
- "cache",
468
- "columns",
469
- "formData",
470
- "internalFormProps",
471
- "onSubmit",
472
- "isView",
473
- "onUpdate:formData",
474
- ..._runtimeProps
475
- ];
476
- return defineComponent(
477
- (props, ctx) => {
478
- const formData = computed({
479
- get: () => props.formData,
480
- set(v) {
481
- var _a;
482
- (_a = props["onUpdate:formData"]) == null ? void 0 : _a.call(props, v);
483
- }
484
- });
485
- const { visibleColumns } = useForm(
486
- props,
487
- formData,
488
- getPropsKeys(_runtimeProps)
489
- );
490
- return () => h(FormComponent, null, {
491
- ...ctx.slots,
492
- formContent: () => visibleColumns.value.map((column) => {
493
- if (!renderMap.has(column.type)) {
494
- console.warn(
495
- `[@ftjs/core]: 没有配置 column.type ${column.type}, 请检查该组件是否注册`
496
- );
497
- return null;
498
- }
499
- const component = renderMap.get(column.type);
500
- const isView = toValue(column.isView) ?? props.isView;
501
- return h(component, {
502
- column,
503
- // 是否为查看模式
504
- isView,
505
- key: getField(column)
506
- });
507
- })
508
- });
509
- },
510
- {
511
- props: transferVueArrayPropsToObject(runtimeProps),
512
- name: "FtForm"
513
- }
514
- );
515
- };
516
- function defineFormComponent(setup) {
517
- return defineComponent(setup, {
518
- props: ["column", "isView"],
519
- inheritAttrs: false
520
- });
521
- }
522
- const provideTableKey = Symbol("@ftjs/core-table-provide");
523
- const useTable = (props, runtimePropsKeys) => {
435
+ const useTable = (props) => {
524
436
  const formColumns = computed(() => {
525
- const fromTable = props.columns.filter((e) => e.search).map((e) => ({
526
- field: e.field,
527
- title: e.title,
528
- ...e.search
529
- }));
530
- return [...fromTable, ...props.searchColumns ?? []];
531
- });
532
- const tableColumns = computed(() => {
533
- return props.columns;
534
- });
535
- const injectProps = runtimePropsKeys.reduce(
536
- (acc, key) => {
537
- if (key.startsWith("on")) {
538
- acc[key] = props[key];
539
- } else {
540
- acc[key] = computed(() => props[key]);
437
+ const fromTable = props.columns.filter((e) => e.search).map((e) => {
438
+ if (typeof e.search === "string") {
439
+ return {
440
+ field: e.field,
441
+ title: e.title,
442
+ type: e.search
443
+ };
541
444
  }
542
- return acc;
543
- },
544
- {}
545
- );
546
- provide(provideTableKey, {
547
- formColumns,
548
- tableColumns,
549
- ...injectProps
445
+ return {
446
+ field: e.field,
447
+ title: e.title,
448
+ ...e.search
449
+ };
450
+ });
451
+ return [
452
+ ...fromTable,
453
+ ...props.searchColumns ?? []
454
+ ];
550
455
  });
456
+ return {
457
+ formColumns
458
+ };
551
459
  };
552
- const useTableInject = () => {
553
- return inject(provideTableKey);
554
- };
555
- function defineFtTable(setup, _runtimeProps) {
556
- const TableComponent = defineComponent(setup, {
557
- inheritAttrs: false,
558
- name: "FtTableContainer"
559
- });
560
- const runtimeProps = [
561
- "cache",
562
- "columns",
563
- "searchColumns",
564
- "total",
565
- ["defaultPageSize", { type: Number, default: 20 }],
566
- ["loading", { type: Boolean }],
567
- "internalTableProps",
568
- "internalFormProps",
569
- "tableData",
570
- "keyField",
571
- ..._runtimeProps
572
- ];
573
- return defineComponent(
574
- (props, ctx) => {
575
- useTable(props, getPropsKeys(runtimeProps));
576
- return () => h(TableComponent, null, ctx.slots);
577
- },
578
- {
579
- props: transferVueArrayPropsToObject(runtimeProps),
580
- name: "FtTable"
581
- }
582
- );
583
- }
584
460
  export {
585
461
  cloneDeep,
586
- defineFormComponent,
587
- defineFtForm,
588
- defineFtTable,
589
462
  get,
590
463
  getField,
591
- getPropsKeys,
592
464
  getStorage,
593
465
  has,
594
466
  isBrowser,
595
467
  isEmptyStrOrNull,
596
468
  set,
597
469
  setStorage,
598
- transferVueArrayPropsToObject,
599
470
  unrefs,
600
471
  useForm,
601
472
  useFormInject,
602
473
  useFormItem,
603
- useTableInject
474
+ useTable
604
475
  };
@@ -1,3 +1,2 @@
1
- export * from './columns';
2
- export * from './define-components';
3
- export { useTableInject } from './use-table';
1
+ export * from './types';
2
+ export * from './use-table';
@@ -0,0 +1,61 @@
1
+ import { FtFormColumnBase } from '../form';
2
+ import { RecordPath } from '../type-helper';
3
+ /**
4
+ * 表格列定义
5
+ *
6
+ * @public
7
+ */
8
+ export interface FtTableColumn<TableData extends Record<string, any>, SColumn extends string | FtFormColumnBase<any> = FtFormColumnBase<any> | string> {
9
+ /**
10
+ * 列标题
11
+ */
12
+ title?: string;
13
+ /**
14
+ * 列字段
15
+ */
16
+ field: RecordPath<TableData> | `_${string}`;
17
+ /**
18
+ * 搜索配置
19
+ */
20
+ search?: SColumn;
21
+ }
22
+ export interface FtBaseTableProps<T extends Record<string, any>, TableColumn extends FtTableColumn<T>, SearchColumn extends FtFormColumnBase<any>> {
23
+ /**
24
+ * 用于缓存配置,不填则不缓存
25
+ */
26
+ cache?: string;
27
+ /**
28
+ * 列定义
29
+ */
30
+ columns: TableColumn[];
31
+ /**
32
+ * 列定义外的搜索条件
33
+ */
34
+ searchColumns?: SearchColumn[];
35
+ /**
36
+ * 表格总条数
37
+ */
38
+ total?: number;
39
+ /**
40
+ * 默认每页条数
41
+ *
42
+ * @default 20
43
+ */
44
+ defaultPageSize?: number;
45
+ /**
46
+ * 是否显示 loading
47
+ */
48
+ loading?: boolean;
49
+ /**
50
+ * 表格数据
51
+ */
52
+ tableData: T[];
53
+ /**
54
+ * 表格数据更新事件
55
+ */
56
+ "onUpdate:tableData"?: (data: T[]) => void;
57
+ /**
58
+ * 表格 key 字段
59
+ */
60
+ keyField?: string;
61
+ }
@@ -1,9 +1,7 @@
1
- import { ComputedRef } from 'vue';
2
- import { TableTypeMap, FtTableIntrinsicProps } from './define-components';
3
- import { SplitEventKeys } from '../type-helper';
4
- export type TableInject<TableData extends Record<string, any>, FormData extends Record<string, any> = TableData, Type extends keyof TableTypeMap<TableData, FormData> = "default"> = SplitEventKeys<FtTableIntrinsicProps<TableData, FormData, Type> & TableTypeMap<TableData, FormData>[Type]["extendedProps"]> & {
5
- formColumns: ComputedRef<TableTypeMap<TableData, FormData>[Type]["formColumn"][]>;
6
- tableColumns: ComputedRef<TableTypeMap<TableData, FormData>[Type]["tableColumn"][]>;
1
+ import { FtBaseTableProps, FtTableColumn } from './types';
2
+ import { FtFormColumnBase } from '../form';
3
+ type ExtractSearchColumn<P extends FtBaseTableProps<any, any, any>> = P extends FtBaseTableProps<any, any, infer C> ? C extends string ? never : C : never;
4
+ export declare const useTable: <P extends FtBaseTableProps<any, FtTableColumn<any>, FtFormColumnBase<any>>>(props: P) => {
5
+ formColumns: import('vue').ComputedRef<ExtractSearchColumn<P>[]>;
7
6
  };
8
- export declare const useTable: <TableData extends Record<string, any>, FormData extends Record<string, any>, Type extends keyof TableTypeMap<TableData, FormData>>(props: FtTableIntrinsicProps<TableData, FormData, Type>, runtimePropsKeys: string[]) => void;
9
- 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;
7
+ export {};
@@ -1,4 +1,4 @@
1
- import { ComputedRef, MaybeRef, Ref } from 'vue';
1
+ import { MaybeRef, Ref } from 'vue';
2
2
  /**
3
3
  * 临时工具类型减1
4
4
  */
@@ -29,33 +29,4 @@ export type Unrefs<T> = {
29
29
  export type Refs<T> = {
30
30
  [K in keyof T]: T[K] extends Ref<any> ? T[K] : MaybeRef<T[K]>;
31
31
  };
32
- /**
33
- * 工具类型:将对象的属性转换为元组
34
- *
35
- * @deprecated 元祖推算的元素顺序不确定,所以实际上无法使用,替换为 {@link WithLengthKeys}
36
- */
37
- export type TupleKeys<T> = UnionToTuple<keyof T>;
38
- /**
39
- * 工具类型:将联合类型转换为元组
40
- *
41
- * @deprecated 元祖推算的元素顺序不确定,所以实际上无法使用
42
- */
43
- 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] : [];
44
- /**
45
- * 工具类型:得到一个具有指定长度的数组,且每个元素唯一
46
- */
47
- export type WithLengthKeys<T> = (keyof T)[] & {
48
- length: TupleKeys<T>["length"];
49
- };
50
- /**
51
- * 工具类型:将对象中所有属性值分流,分为事件和非事件
52
- *
53
- * 事件可为空。
54
- * 属性为可为空的计算属性,本身一定存在。
55
- */
56
- export type SplitEventKeys<T> = {
57
- [K in keyof T as K extends `on${string}` ? K : never]?: T[K];
58
- } & {
59
- [K in keyof T as K extends `on${string}` ? never : K]-?: ComputedRef<T[K]>;
60
- };
61
32
  export {};
package/dist/utils.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { PropType } from 'vue';
2
1
  import { RecordPath, Unrefs } from './type-helper';
3
2
  import { FtFormColumnBase } from './form/columns';
4
3
  export declare const isBrowser: boolean;
@@ -30,14 +29,3 @@ export declare const getStorage: (key: string, cache?: string) => {};
30
29
  * @param cache 缓存名称
31
30
  */
32
31
  export declare const setStorage: (key: string, value: any, cache?: string) => void;
33
- export type RuntimeProps<T extends readonly any[] = []> = T[number] | [
34
- T[number],
35
- {
36
- type?: PropType<any> | true | null;
37
- required?: boolean;
38
- default?: any;
39
- validator?(value: unknown, props: any): boolean;
40
- }
41
- ];
42
- export declare function transferVueArrayPropsToObject<T extends readonly any[] = []>(arr: RuntimeProps<T>[]): any;
43
- export declare const getPropsKeys: (arr: RuntimeProps<any>[]) => any[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ftjs/core",
3
- "version": "0.2.1",
3
+ "version": "0.4.0",
4
4
  "keywords": [],
5
5
  "author": "",
6
6
  "license": "MIT",
@@ -1,114 +0,0 @@
1
- import { Component, EmitsOptions, SetupContext, SlotsType, VNode } from 'vue';
2
- import { FtFormColumnBase } from './columns';
3
- import { RuntimeProps } from '../utils';
4
- import { TupleKeys } from '../type-helper';
5
- export interface FormTypeMap<_FormData extends Record<string, any>> {
6
- default: {
7
- formSlots: {};
8
- extendedProps: {};
9
- internalFormProps: {};
10
- columns: (FtFormColumnBase<any> & {
11
- type: "custom";
12
- }) | (FtFormColumnBase<any> & {
13
- type: "custom2";
14
- });
15
- };
16
- }
17
- export interface FtFormIntrinsicProps<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> {
18
- /**
19
- * 用于缓存配置,不填则不缓存
20
- */
21
- cache?: string;
22
- /**
23
- * v-model:formData 的值
24
- *
25
- * 如果`formData`不为`undefined`或者`null`,则双向绑定这个值,否则 FtForm内部会生成一个内部值
26
- */
27
- formData?: FormData;
28
- /**
29
- * 是否查看模式
30
- */
31
- isView?: boolean;
32
- /**
33
- * 内部 form 组件 props
34
- */
35
- internalFormProps?: FormTypeMap<FormData>[Type]["internalFormProps"];
36
- /**
37
- * v-model:formData 的更新函数
38
- *
39
- * 需要`formData`不为空
40
- */
41
- "onUpdate:formData"?: (value: FormData) => void;
42
- /**
43
- * 提交函数
44
- * @param formData 当先的有效表单值
45
- * @returns
46
- */
47
- onSubmit?: (formData: FormData) => Promise<void> | void;
48
- }
49
- /**
50
- * 每一个表单组件的 props
51
- */
52
- export interface CommonFormItemProps<T extends FtFormColumnBase<any>> {
53
- /** column 定义 */
54
- column: T;
55
- /** 是否查看模式 */
56
- isView: boolean;
57
- }
58
- export type FtFormPropsMap<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> = FtFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
59
- columns: FormTypeMap<FormData>[Type]["columns"][];
60
- };
61
- /**
62
- * 定义表单容器组件
63
- */
64
- export declare const defineFtForm: <Type extends keyof FormTypeMap<any>>(setup: (props: {}, ctx: SetupContext<EmitsOptions, SlotsType<FormTypeMap<any>[Type]["formSlots"] & {
65
- /**
66
- * 表单内容
67
- */
68
- formContent: () => any;
69
- }>>) => any, renderMap: Map<string, Component>, _runtimeProps: RuntimeProps<TupleKeys<FormTypeMap<any>[Type]["extendedProps"]>>[] & {
70
- length: TupleKeys<FormTypeMap<any>[Type]["extendedProps"]>["length"];
71
- }) => new <FormData extends Record<string, any>>(props: (FtFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
72
- columns: FormTypeMap<FormData>[Type]["columns"][];
73
- } & ({
74
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
75
- } | {
76
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
77
- })) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => import('vue').CreateComponentPublicInstanceWithMixins<FtFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
78
- columns: FormTypeMap<FormData>[Type]["columns"][];
79
- } & ({
80
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
81
- } | {
82
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
83
- }), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, EmitsOptions, import('vue').PublicProps, {}, false, {}, SlotsType<FormTypeMap<FormData>[Type]["formSlots"]>, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
84
- P: {};
85
- B: {};
86
- D: {};
87
- C: {};
88
- M: {};
89
- Defaults: {};
90
- }, {} & ((FtFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
91
- columns: FormTypeMap<FormData>[Type]["columns"][];
92
- } & {
93
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
94
- } extends infer T ? T extends FtFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
95
- columns: FormTypeMap<FormData>[Type]["columns"][];
96
- } & {
97
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
98
- } ? T extends void ? {} : T : never : never) | (FtFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
99
- columns: FormTypeMap<FormData>[Type]["columns"][];
100
- } & {
101
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
102
- } extends infer T_1 ? T_1 extends FtFormIntrinsicProps<FormData, Type> & FormTypeMap<FormData>[Type]["extendedProps"] & {
103
- columns: FormTypeMap<FormData>[Type]["columns"][];
104
- } & {
105
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
106
- } ? T_1 extends void ? {} : T_1 : never : never)), {}, {}, {}, {}, {}>;
107
- /**
108
- * 定义表单组件
109
- */
110
- export declare function defineFormComponent<T extends FtFormColumnBase<any>>(setup: (props: CommonFormItemProps<T>, ctx: SetupContext) => () => VNode): import('vue').DefineSetupFnComponent<CommonFormItemProps<T>, EmitsOptions, {}, CommonFormItemProps<T> & ({
111
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
112
- } | {
113
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
114
- }), import('vue').PublicProps>;
@@ -1,78 +0,0 @@
1
- import { Ref, ComputedRef } from 'vue';
2
- import { RecordPath } from '../type-helper';
3
- import { FormTypeMap } from './define-component';
4
- import { GetFormData, ResetToDefault, SetAsDefault } from './use-form';
5
- /**
6
- * 对于需要暴露给外部使用的方法,其类型从这里Pick,这样会有统一的类型提示
7
- */
8
- export interface ExposeWithComment<FormData extends Record<string, any>, Type extends keyof FormTypeMap<FormData>> {
9
- /**
10
- * 获取表单当前展示出的项目的表单值
11
- */
12
- getFormData: GetFormData<FormData>;
13
- /**
14
- * 重置表单为默认值
15
- *
16
- * `sync false` 由于这个方法很可能在`watchEffect`中调用
17
- *
18
- * 以非同步的方式调用,其内部属性不会放到`watchEffect`的依赖中
19
- * @param sync 是否同步更新,默认为 false
20
- */
21
- resetToDefault: ResetToDefault;
22
- /**
23
- * 设置当前表单的默认值,如果参数为空,则将`当前表单值`设置为默认值
24
- */
25
- setAsDefault: SetAsDefault<FormData>;
26
- /**
27
- * 表单值,包含已经隐藏的值
28
- */
29
- form: Ref<FormData>;
30
- /**
31
- * 配置显示的项目
32
- */
33
- columnsChecked: Ref<RecordPath<FormData>[]>;
34
- /**
35
- * 重置配置显示项目
36
- */
37
- resetColumnsChecked: () => void;
38
- /**
39
- * 配置排序的项目
40
- */
41
- columnsSort: Ref<Partial<Record<RecordPath<FormData>, number>>>;
42
- /**
43
- * 重置排序
44
- */
45
- resetColumnsSort: () => void;
46
- /**
47
- * 所有表单项目
48
- */
49
- columns: ComputedRef<FormTypeMap<FormData>[Type]["columns"]>;
50
- /**
51
- * 当前显示的表单项目
52
- */
53
- visibleColumns: ComputedRef<FormTypeMap<FormData>[Type]["columns"]>;
54
- /**
55
- * 表单容器组件 props, 由表单容器组件决定
56
- *
57
- * 定义方式:
58
- *
59
- * @example
60
- * ```ts
61
- *
62
- * declare module "@ftjs/core" {
63
- * interface FormContainerProps {
64
- * ...
65
- * }
66
- * }
67
- * ```
68
- */
69
- internalFormProps: ComputedRef<FormTypeMap<FormData>[Type]["internalFormProps"] | undefined>;
70
- /**
71
- * 表单提交事件
72
- */
73
- onSubmit?: (formData: FormData) => Promise<void> | void;
74
- /**
75
- * 缓存
76
- */
77
- cache: ComputedRef<string | undefined>;
78
- }
@@ -1,16 +0,0 @@
1
- import { RecordPath } from '../type-helper';
2
- /**
3
- * 表格列定义
4
- *
5
- * @public
6
- */
7
- export interface FtTableColumn<TableData extends Record<string, any>> {
8
- /**
9
- * 列标题
10
- */
11
- title?: string;
12
- /**
13
- * 列字段
14
- */
15
- field: RecordPath<TableData> | `_${string}`;
16
- }
@@ -1,94 +0,0 @@
1
- import { EmitsOptions, SetupContext, SlotsType } from 'vue';
2
- import { FtTableColumn } from './columns';
3
- import { RuntimeProps, FtFormColumnBase } from '../form';
4
- import { TupleKeys } from '../type-helper';
5
- export interface TableTypeMap<TableData extends Record<string, any>, SearchData extends Record<string, any>> {
6
- default: {
7
- tableSlots: {};
8
- tableColumn: FtTableColumn<TableData>;
9
- formColumn: FtFormColumnBase<SearchData>;
10
- extendedProps: {
11
- testProps: string;
12
- onTestEvent: () => void;
13
- };
14
- internalFormProps: {};
15
- internalTableProps: {};
16
- };
17
- }
18
- export type TableColumn<TableData extends Record<string, any>, SearchData extends Record<string, any>, Type extends keyof TableTypeMap<TableData, SearchData>> = TableTypeMap<TableData, SearchData>[Type]["tableColumn"] & {
19
- /**
20
- * 搜索表单配置
21
- */
22
- search?: TableTypeMap<TableData, SearchData>[Type]["formColumn"];
23
- };
24
- export interface FtTableIntrinsicProps<TableData extends Record<string, any>, SearchData extends Record<string, any>, type extends keyof TableTypeMap<TableData, SearchData>> {
25
- /**
26
- * 用于缓存配置,不填则不缓存
27
- */
28
- cache?: string;
29
- /**
30
- * 列定义
31
- */
32
- columns: TableColumn<TableData, SearchData, type>[];
33
- /**
34
- * 列定义外的搜索条件
35
- */
36
- searchColumns?: TableTypeMap<TableData, SearchData>[type]["formColumn"][];
37
- /**
38
- * 表格总条数
39
- */
40
- total?: number;
41
- /**
42
- * 默认每页条数
43
- *
44
- * @default 20
45
- */
46
- defaultPageSize?: number;
47
- /**
48
- * 是否显示 loading
49
- */
50
- loading?: boolean;
51
- /**
52
- * 内部表单组件的 props
53
- */
54
- internalFormProps?: TableTypeMap<TableData, SearchData>[type]["internalFormProps"];
55
- /**
56
- * 内部表格组件的 props
57
- */
58
- internalTableProps?: TableTypeMap<TableData, SearchData>[type]["internalTableProps"];
59
- /**
60
- * 表格数据
61
- */
62
- tableData?: TableData[];
63
- /**
64
- * 表格 key 字段
65
- */
66
- keyField?: string;
67
- }
68
- export type FtTablePropsMap<TableData extends Record<string, any>, SearchData extends Record<string, any>, Type extends keyof TableTypeMap<TableData, SearchData>> = FtTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"];
69
- export declare function defineFtTable<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"]>>[] & {
70
- length: TupleKeys<TableTypeMap<any, any>[Type]["extendedProps"]>["length"];
71
- }): new <TableData extends Record<string, any>, SearchData extends Record<string, any> = TableData>(props: (FtTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & ({
72
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
73
- } | {
74
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
75
- })) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => import('vue').CreateComponentPublicInstanceWithMixins<FtTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & ({
76
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
77
- } | {
78
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
79
- }), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, EmitsOptions, import('vue').PublicProps, {}, false, {}, SlotsType<TableTypeMap<TableData, SearchData>[Type]["tableSlots"]>, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
80
- P: {};
81
- B: {};
82
- D: {};
83
- C: {};
84
- M: {};
85
- Defaults: {};
86
- }, {} & ((FtTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & {
87
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
88
- } extends infer T ? T extends FtTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & {
89
- [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
90
- } ? T extends void ? {} : T : never : never) | (FtTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & {
91
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
92
- } extends infer T_1 ? T_1 extends FtTableIntrinsicProps<TableData, SearchData, Type> & TableTypeMap<TableData, SearchData>[Type]["extendedProps"] & {
93
- [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
94
- } ? T_1 extends void ? {} : T_1 : never : never)), {}, {}, {}, {}, {}>;