Browse Source

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

pull/7809/head
dullathanol 6 months ago
committed by allen
parent
commit
2013ba4de4
  1. 12
      apps/web-antd/src/adapter/component/index.ts
  2. 3
      apps/web-antd/src/adapter/vxe-table.ts
  3. 10
      apps/web-antdv-next/src/adapter/component/index.ts
  4. 3
      apps/web-antdv-next/src/adapter/vxe-table.ts
  5. 3
      apps/web-ele/src/adapter/vxe-table.ts
  6. 3
      apps/web-naive/src/adapter/vxe-table.ts
  7. 3
      apps/web-tdesign/src/adapter/vxe-table.ts
  8. 2
      packages/@core/ui-kit/form-ui/src/types.ts
  9. 2
      packages/effects/common-ui/src/components/api-component/types.ts
  10. 27
      packages/effects/plugins/src/vxe-table/api.ts
  11. 4
      packages/effects/plugins/src/vxe-table/types.ts
  12. 17
      packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
  13. 14
      playground/src/adapter/component/index.ts

12
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() {

3
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>>(

10
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() {

3
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>>(

3
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>>(

3
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>>(

3
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>>(

2
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;
/** 依赖 */

2
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 {

27
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) => {

4
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>>;
};

17
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',

14
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() {

Loading…
Cancel
Save