Explorar el Código

fix: 补全 ComponentPropsMap 与 Vxe 表格表单链路的类型

dullathanol hace 2 meses
padre
commit
2013ba4de4

+ 11 - 1
apps/web-antd/src/adapter/component/index.ts

@@ -68,6 +68,16 @@ import { isEmpty } from '@vben/utils';
 
 import { message, Modal, notification } from 'ant-design-vue';
 
+type AdapterUploadProps = UploadProps & {
+  aspectRatio?: string;
+  crop?: boolean;
+  draggable?: boolean;
+  handleChange?: (event: UploadChangeParam) => void;
+  maxSize?: number;
+  onDragSort?: (oldIndex: number, newIndex: number) => void;
+  onHandleChange?: (event: UploadChangeParam) => void;
+};
+
 const AutoComplete = defineAsyncComponent(
   () => import('ant-design-vue/es/auto-complete'),
 );
@@ -646,7 +656,7 @@ export interface ComponentPropsMap {
   Textarea: TextAreaProps;
   TimePicker: TimePickerProps;
   TreeSelect: TreeSelectProps;
-  Upload: UploadProps;
+  Upload: AdapterUploadProps;
 }
 
 async function initComponentAdapter() {

+ 1 - 2
apps/web-antd/src/adapter/vxe-table.ts

@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
 
 import { h } from 'vue';
 
-import { useVbenForm as useForm } from '@vben/common-ui';
 import {
   setupVbenVxeTable,
   useVbenVxeGrid as useGrid,
@@ -68,7 +67,7 @@ setupVbenVxeTable({
     // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
     // vxeUI.formats.add
   },
-  useVbenForm: useVbenForm as typeof useForm,
+  useVbenForm,
 });
 
 export const useVbenVxeGrid = <T extends Record<string, any>>(

+ 9 - 1
apps/web-antdv-next/src/adapter/component/index.ts

@@ -63,6 +63,14 @@ import { isEmpty } from '@vben/utils';
 
 import { message, Modal, notification } from 'antdv-next';
 
+type AdapterUploadProps = UploadProps & {
+  aspectRatio?: string;
+  crop?: boolean;
+  handleChange?: (event: UploadChangeParam) => void;
+  maxSize?: number;
+  onHandleChange?: (event: UploadChangeParam) => void;
+};
+
 const AutoComplete = defineAsyncComponent(
   () => import('antdv-next/dist/auto-complete/index'),
 );
@@ -579,7 +587,7 @@ export interface ComponentPropsMap {
   Textarea: TextAreaProps;
   TimePicker: TimePickerProps;
   TreeSelect: TreeSelectProps;
-  Upload: UploadProps;
+  Upload: AdapterUploadProps;
 }
 
 async function initComponentAdapter() {

+ 1 - 2
apps/web-antdv-next/src/adapter/vxe-table.ts

@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
 
 import { h } from 'vue';
 
-import { useVbenForm as useForm } from '@vben/common-ui';
 import {
   setupVbenVxeTable,
   useVbenVxeGrid as useGrid,
@@ -68,7 +67,7 @@ setupVbenVxeTable({
     // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
     // vxeUI.formats.add
   },
-  useVbenForm: useVbenForm as typeof useForm,
+  useVbenForm,
 });
 
 export const useVbenVxeGrid = <T extends Record<string, any>>(

+ 1 - 2
apps/web-ele/src/adapter/vxe-table.ts

@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
 
 import { h } from 'vue';
 
-import { useVbenForm as useForm } from '@vben/common-ui';
 import {
   setupVbenVxeTable,
   useVbenVxeGrid as useGrid,
@@ -69,7 +68,7 @@ setupVbenVxeTable({
     // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
     // vxeUI.formats.add
   },
-  useVbenForm: useVbenForm as typeof useForm,
+  useVbenForm,
 });
 
 export const useVbenVxeGrid = <T extends Record<string, any>>(

+ 1 - 2
apps/web-naive/src/adapter/vxe-table.ts

@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
 
 import { h } from 'vue';
 
-import { useVbenForm as useForm } from '@vben/common-ui';
 import {
   setupVbenVxeTable,
   useVbenVxeGrid as useGrid,
@@ -68,7 +67,7 @@ setupVbenVxeTable({
     // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
     // vxeUI.formats.add
   },
-  useVbenForm: useVbenForm as typeof useForm,
+  useVbenForm,
 });
 
 export const useVbenVxeGrid = <T extends Record<string, any>>(

+ 1 - 2
apps/web-tdesign/src/adapter/vxe-table.ts

@@ -4,7 +4,6 @@ import type { ComponentPropsMap, ComponentType } from './component';
 
 import { h } from 'vue';
 
-import { useVbenForm as useForm } from '@vben/common-ui';
 import {
   setupVbenVxeTable,
   useVbenVxeGrid as useGrid,
@@ -68,7 +67,7 @@ setupVbenVxeTable({
     // 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
     // vxeUI.formats.add
   },
-  useVbenForm: useVbenForm as typeof useForm,
+  useVbenForm,
 });
 
 export const useVbenVxeGrid = <T extends Record<string, any>>(

+ 1 - 1
packages/@core/ui-kit/form-ui/src/types.ts

@@ -228,7 +228,7 @@ type MappedComponentProps<P> =
     ) => P & Record<string, any>)
   | (P & Record<string, any>);
 
-interface FormSchemaBody extends FormCommonConfig {
+interface FormSchemaBody extends Omit<FormCommonConfig, 'componentProps'> {
   /** 默认值 */
   defaultValue?: any;
   /** 依赖 */

+ 1 - 1
packages/effects/common-ui/src/components/api-component/types.ts

@@ -7,7 +7,7 @@ export type ApiComponentOptionsItem = {
   children?: ApiComponentOptionsItem[];
   disabled?: boolean;
   label?: string;
-  value?: string;
+  value?: number | string;
 };
 
 export interface ApiComponentProps {

+ 17 - 10
packages/effects/plugins/src/vxe-table/api.ts

@@ -1,6 +1,9 @@
 import type { VxeGridInstance } from 'vxe-table';
 
-import type { ExtendedFormApi } from '@vben-core/form-ui';
+import type {
+  BaseFormComponentType,
+  ExtendedFormApi,
+} from '@vben-core/form-ui';
 
 import type { VxeGridProps } from './types';
 
@@ -26,25 +29,29 @@ function getDefaultState(): VxeGridProps {
   };
 }
 
-export class VxeGridApi<T extends Record<string, any> = any> {
+export class VxeGridApi<
+  T extends Record<string, any> = any,
+  D extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<never, never>,
+> {
   public formApi = {} as ExtendedFormApi;
 
   // private prevState: null | VxeGridProps = null;
   public grid = {} as VxeGridInstance<T>;
-  public state: null | VxeGridProps<T> = null;
+  public state: null | VxeGridProps<T, D, P> = null;
 
-  public store: Store<VxeGridProps<T>>;
+  public store: Store<VxeGridProps<T, D, P>>;
 
   private isMounted = false;
 
   private stateHandler: StateHandler;
 
-  constructor(options: VxeGridProps = {}) {
+  constructor(options: VxeGridProps<T, D, P> = {} as VxeGridProps<T, D, P>) {
     const storeState = { ...options };
 
     const defaultState = getDefaultState();
-    this.store = new Store<VxeGridProps>(
-      mergeWithArrayOverride(storeState, defaultState),
+    this.store = new Store<VxeGridProps<T, D, P>>(
+      mergeWithArrayOverride(storeState, defaultState) as VxeGridProps<T, D, P>,
     );
 
     this.store.subscribe((state) => {
@@ -82,7 +89,7 @@ export class VxeGridApi<T extends Record<string, any> = any> {
     }
   }
 
-  setGridOptions(options: Partial<VxeGridProps['gridOptions']>) {
+  setGridOptions(options: Partial<VxeGridProps<T, D, P>['gridOptions']>) {
     this.setState({
       gridOptions: options,
     });
@@ -98,8 +105,8 @@ export class VxeGridApi<T extends Record<string, any> = any> {
 
   setState(
     stateOrFn:
-      | ((prev: VxeGridProps<T>) => Partial<VxeGridProps<T>>)
-      | Partial<VxeGridProps<T>>,
+      | ((prev: VxeGridProps<T, D, P>) => Partial<VxeGridProps<T, D, P>>)
+      | Partial<VxeGridProps<T, D, P>>,
   ) {
     if (isFunction(stateOrFn)) {
       this.store.setState((prev) => {

+ 2 - 2
packages/effects/plugins/src/vxe-table/types.ts

@@ -89,9 +89,9 @@ export type ExtendedVxeGridApi<
   D extends Record<string, any> = any,
   F extends BaseFormComponentType = BaseFormComponentType,
   P extends Record<string, any> = Record<never, never>,
-> = VxeGridApi<D> & {
+> = VxeGridApi<D, F, P> & {
   useStore: <S = NoInfer<VxeGridProps<D, F, P>>>(
-    selector?: (state: NoInfer<VxeGridProps<any, any, any>>) => S,
+    selector?: (state: NoInfer<VxeGridProps<D, F, P>>) => S,
   ) => Readonly<Ref<S>>;
 };
 

+ 13 - 4
packages/effects/plugins/src/vxe-table/use-vxe-grid.ts

@@ -25,7 +25,7 @@ export function useVbenVxeGrid<
   P extends Record<string, any> = Record<never, never>,
 >(options: VxeGridProps<T, D, P>) {
   // const IS_REACTIVE = isReactive(options);
-  const api = new VxeGridApi(options as VxeGridProps);
+  const api = new VxeGridApi<T, D, P>(options);
   const extendedApi: ExtendedVxeGridApi<T, D, P> = api as ExtendedVxeGridApi<
     T,
     D,
@@ -36,12 +36,21 @@ export function useVbenVxeGrid<
   };
 
   const Grid = defineComponent(
-    (props: VxeGridProps<T>, { attrs, slots }) => {
+    (props: VxeGridProps<T, D, P>, { attrs, slots }) => {
       onBeforeUnmount(() => {
         api.unmount();
       });
-      api.setState({ ...props, ...attrs });
-      return () => h(VxeGrid, { ...props, ...attrs, api: extendedApi }, slots);
+      api.setState({ ...props, ...attrs } as Partial<VxeGridProps<T, D, P>>);
+      return () =>
+        h(
+          VxeGrid,
+          {
+            ...props,
+            ...attrs,
+            api: extendedApi as ExtendedVxeGridApi,
+          },
+          slots,
+        );
     },
     {
       name: 'VbenVxeGrid',

+ 13 - 1
playground/src/adapter/component/index.ts

@@ -39,6 +39,7 @@ import type {
   IconPickerProps,
 } from '@vben/common-ui';
 import type { Sortable } from '@vben/hooks';
+import type { TipTapProps } from '@vben/plugins/tiptap';
 import type { Recordable } from '@vben/types';
 
 import {
@@ -69,6 +70,16 @@ import { isEmpty } from '@vben/utils';
 
 import { message, Modal, notification } from 'ant-design-vue';
 
+type AdapterUploadProps = UploadProps & {
+  aspectRatio?: string;
+  crop?: boolean;
+  draggable?: boolean;
+  handleChange?: (event: UploadChangeParam) => void;
+  maxSize?: number;
+  onDragSort?: (oldIndex: number, newIndex: number) => void;
+  onHandleChange?: (event: UploadChangeParam) => void;
+};
+
 const AutoComplete = defineAsyncComponent(
   () => import('ant-design-vue/es/auto-complete'),
 );
@@ -642,13 +653,14 @@ export interface ComponentPropsMap {
   RadioGroup: RadioGroupProps;
   RangePicker: RangePickerProps;
   Rate: RateProps;
+  RichEditor: TipTapProps;
   Select: SelectProps;
   Space: SpaceProps;
   Switch: SwitchProps;
   Textarea: TextAreaProps;
   TimePicker: TimePickerProps;
   TreeSelect: TreeSelectProps;
-  Upload: UploadProps;
+  Upload: AdapterUploadProps;
 }
 
 async function initComponentAdapter() {