@xiaohaih/json-form-vant 0.0.1

package/components/time-picker/index.vue

@@ -0,0 +1,130 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field"
+        :disabled="globalDisabled || disabled"
+        :readonly="true"
+        :is-link="isLink"
+        :model-value="showText"
+        v-bind="$attrs"
+        @click="clickHandle"
+    >
+        <template #extra>
+            <VanPopup v-model:show="popupInfo.visible" teleport="body" round position="bottom" v-bind="popupProps" v-on="popupOn" @close="popupInfo.close">
+                <VanTimePicker
+                    :model-value="checkedArr"
+                    v-bind="timePickerProps" v-on="timePickerOn"
+                    @change="changeHandle" @confirm="confirmHandle" @cancel="cancelHandle"
+                >
+                    <template v-for="(item, slotName) of timePickerSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                        <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                    </template>
+                </VanTimePicker>
+            </VanPopup>
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import { Field as VanField, Popup as VanPopup, TimePicker as VanTimePicker } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+import type { PickerOption } from '../picker/types';
+import { useCommonSetup } from '../use';
+import type { TimePickerSlots } from './types';
+import { timePickerEmitsPrivate as emits, timePickerPropsPrivate as props } from './types';
+
+/**
+ * @file 时间选择框
+ */
+export default defineComponent({
+    name: 'HTimePicker',
+    components: { VanField, VanPopup, VanTimePicker },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<TimePickerSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        /** 展示在页面上的值 */
+        const showText = ref('');
+        /** 给时间组件的值 */
+        const checkedArr = ref<string[]>([]);
+        let tempValue: any;
+        // 监听外部值的改变, 如果改变且与临时值不一致时
+        // 则更新当前值, 并重置临时值
+        watch(
+            plain.checked,
+            (val) => {
+                if (val === tempValue) return tempValue = null;
+                tempValue = null;
+                checkedArr.value = val ? props.valueUnformat(val, props.separator) : [];
+                showText.value = checkedArr.value.length ? props.format(checkedArr.value, props.separator) : '';
+            },
+            { immediate: true },
+        );
+
+        /** 点击事件 */
+        function clickHandle(ev: MouseEvent) {
+            if (plain.globalDisabled.value || props.disabled || plain.globalReadonly.value || props.readonly) return;
+            props.onRowClick ? props.onRowClick(popupInfo.value, ev) : popupInfo.value.open();
+        }
+        /**
+         * 时间更改事件
+         * @param {string} type 事件类型
+         * @param {string} value 日期值
+         */
+        function timeEventHandle(type: string, value: PickerOption) {
+            if (props.valueTrigger === type || props.timePickerProps?.showToolbar === false) {
+                checkedArr.value = value.selectedValues;
+                plain.change(props.valueFormat(value.selectedValues, props.separator));
+                showText.value = props.format(value.selectedValues, props.separator);
+                tempValue = plain.checked.value;
+                nextTick(() => tempValue = null);
+            }
+            switch (type) {
+                case 'confirm':
+                case 'cancel':
+                {
+                    popupInfo.value.close();
+                    break;
+                }
+                default: break;
+            }
+        }
+
+        /** 弹窗显示状态 */
+        const popupInfo = ref({
+            visible: false,
+            open() {
+                popupInfo.value.visible = true;
+            },
+            close() {
+                popupInfo.value.visible = false;
+            },
+        });
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            showText,
+            checkedArr,
+            clickHandle,
+            changeHandle: timeEventHandle.bind(null, 'change'),
+            confirmHandle: timeEventHandle.bind(null, 'confirm'),
+            cancelHandle: timeEventHandle.bind(null, 'cancel'),
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/time-picker/types.ts

@@ -0,0 +1,91 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Popup as VanPopup } from 'vant';
+import { Field as VanField, TimePicker as VanTimePicker } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentEmit, ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { PickerOption } from '../picker/types';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function timePickerPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanTimePicker 组件的属性 */
+        timePickerProps: { type: Object as PropType<Partial<ComponentProps<typeof VanTimePicker>>> },
+        /** VanTimePicker 组件的事件 - 兼容 vue2 版本 */
+        timePickerOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanTimePicker.emits>>>>>, default: () => ({}) },
+        /** VanTimePicker 组件的插槽 */
+        timePickerSlots: { type: Object as PropType<{
+            /** 自定义整个顶部栏的内容 */
+            toolbar?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义标题内容 */
+            title?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义确认按钮内容 */
+            confirm?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义取消按钮内容 */
+            cancel?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义选项内容 */
+            option?: ComponentType<{ option: PickerOption; index: number } & CommonSlotsProps<any, any>>;
+            /** 自定义选项上方内容 */
+            columnsTop?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义选项下方内容 */
+            columnsBottom?: ComponentType<CommonSlotsProps<any, any>>;
+        }> },
+        /** 是否展示右侧箭头并开启点击反馈 - Field 字段, 调整默认值 */
+        isLink: { type: Boolean, default: true },
+        /** 点击事件, 当传递了此事件时, 会忽略内部打开弹窗操作 */
+        onRowClick: { type: Function as PropType<(option: { open: () => void; close: () => void }, ev: MouseEvent) => void> },
+        /** 日期分隔符 @default : */
+        separator: { type: String, default: ':' },
+        /** 对值进行格式化 - 显示在页面上的值 */
+        format: { type: Function as PropType<(option: string[], separator: string) => any>, default: valueFormatDefault },
+        /** 对值进行格式化 - 提交值 */
+        valueFormat: { type: Function as PropType<(option: string[], separator: string) => any>, default: valueFormatDefault },
+        /** 取消值的格式化 - 给 VanDatePicker 的值 */
+        valueUnformat: { type: Function as PropType<(option: any, separator: string) => string[]>, default: valueUnformatDefault },
+        /** 值触发方式 @default confirm */
+        valueTrigger: { type: String as PropType<'change' | 'confirm' | 'cancel'>, default: 'confirm' },
+        /** 弹窗组件的属性 */
+        popupProps: { type: Object as PropType<Partial<ComponentExposed<typeof VanPopup>>> },
+        /** 弹窗组件的事件 - 兼容 vue2 版本 */
+        popupOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanPopup.emits>>>>>, default: () => ({}) },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const timePickerPropsPrivate = timePickerPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const timePickerProps = {
+    ...VanField.props as unknown as {},
+    ...timePickerPropsPrivate,
+};
+export type TimePickerProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof timePickerPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function timePickerEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const timePickerEmitsPrivate = timePickerEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const timePickerEmits = {
+    ...VanField.emits,
+    ...timePickerEmitsPrivate,
+};
+
+export type TimePickerEmits<T> = ReturnType<typeof timePickerEmitsGeneric<T>>;
+
+export interface TimePickerSlots extends CommonSlots<any> {
+}
+
+/** 默认的合并函数 */
+function valueFormatDefault(option: string[], separator: string) {
+    return option.join(separator);
+}
+/** 默认的取消格式化函数 */
+function valueUnformatDefault(val: string, separator: string) {
+    if (!val) return [];
+    return Array.isArray(val) ? val : val.split(separator);
+}

package/components/tree-select/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HTreeSelect from './index.vue';
+
+export { HTreeSelect };
+export type HTreeSelectInstance = ComponentExposed<typeof HTreeSelect>;
+export * from './types';

package/components/tree-select/index.vue

@@ -0,0 +1,160 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field"
+        :disabled="globalDisabled || disabled"
+        :readonly="true"
+        :is-link="isLink"
+        :model-value="showText"
+        v-bind="$attrs"
+        @click="clickHandle"
+    >
+        <template #extra>
+            <VanPopup v-model:show="popupInfo.visible" teleport="body" round position="bottom" v-bind="popupProps" v-on="popupOn" @close="popupInfo.close">
+                <VanTreeSelect
+                    :main-active-index="mainActiveIndex"
+                    :active-id="checked"
+                    :items="finalOption"
+                    v-bind="treeSelectProps" v-on="treeSelectOn"
+                    @update:main-active-index="mainActiveIndexChange"
+                    @update:active-id="activeIdChange"
+                >
+                    <template v-for="(item, slotName) of treeSelectSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                        <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" :options="finalOption" />
+                    </template>
+                </VanTreeSelect>
+            </VanPopup>
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import { Field as VanField, Popup as VanPopup, TreeSelect as VanTreeSelect } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, nextTick, ref, watch } from 'vue';
+import type { PickerOption } from '../picker/types';
+import { useCommonSetup } from '../use';
+import type { TreeSelectOption, TreeSelectSlots } from './types';
+import { treeSelectEmitsPrivate as emits, treeSelectPropsPrivate as props } from './types';
+
+/**
+ * @file 分类选择器
+ */
+export default defineComponent({
+    name: 'HTreeSelect',
+    components: { VanTreeSelect, VanField, VanPopup },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<TreeSelectSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        /** 展示在页面上的值 */
+        const showText = computed(() => {
+            const value = plain.checked.value as string | string[];
+            if (!value) return '';
+            const { format, separator } = props;
+            const source = (props.treeSelectProps?.items || plain.finalOption.value) as TreeSelectOption[];
+            if (format) return format({ source, value, separator });
+            const result: string[] = [];
+            let _item: TreeSelectOption['children'][number] | undefined;
+            if (typeof value === 'string') {
+                source.some((o) => {
+                    _item = o.children.find((oo) => oo.id === value);
+                    _item && result.push(_item.text);
+                    return !!_item;
+                });
+            }
+            else {
+                value.forEach((val) => source.some((oo) => {
+                    _item = oo.children.find((ooo) => ooo.id === val);
+                    _item && result.push(_item.text);
+                    return !!_item;
+                }));
+            }
+            return result.filter(Boolean).join(separator);
+        });
+        /** 点击事件 */
+        function clickHandle(ev: MouseEvent) {
+            if (plain.globalDisabled.value || props.disabled || plain.globalReadonly.value || props.readonly) return;
+            props.onRowClick ? props.onRowClick(popupInfo.value, ev) : popupInfo.value.open();
+        }
+        /** 左侧激活项 */
+        const mainActiveIndex = ref(0);
+        let tempChecked: any;
+        watch(
+            [plain.checked, plain.finalOption],
+            ([val, options]) => {
+                if (!options?.length) return;
+                // 两者相等, 说明是 activeIdChange, 可以直接返回
+                if (tempChecked === val) {
+                    tempChecked = null;
+                    return;
+                }
+                tempChecked = null;
+                // 直接重置为 0
+                mainActiveIndex.value = 0;
+                if (!(val && val.length)) return;
+                // 如果是字符串, 直接赋值所在下标
+                if (typeof val === 'string') {
+                    let flag: boolean;
+                    (options as TreeSelectOption[]).some((o, idx) => {
+                        flag = o.children.some((oo) => oo.id === val);
+                        flag && (mainActiveIndex.value = idx);
+                        return flag;
+                    });
+                }
+                else {
+                    // 如果是数组, 取最小的一个下标
+                    const idxs = (val as string[]).map((o) => (options as TreeSelectOption[]).findIndex((oo) => oo.children.some((ooo) => ooo.id === o)));
+                    // Math.max 兜底处理, 防止出现 -1
+                    mainActiveIndex.value = Math.max(0, Math.min(...idxs));
+                }
+            },
+            { immediate: true },
+        );
+        /** 左侧标签更改事件 */
+        function mainActiveIndexChange(index: number) {
+            mainActiveIndex.value = index;
+        }
+        /** 右侧更改事件 */
+        function activeIdChange(value: string | string[]) {
+            plain.change(value);
+            tempChecked = plain.checked.value;
+            nextTick(() => tempChecked = null);
+        }
+
+        /** 弹窗显示状态 */
+        const popupInfo = ref({
+            visible: false,
+            open() {
+                popupInfo.value.visible = true;
+            },
+            close() {
+                popupInfo.value.visible = false;
+            },
+        });
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            showText,
+            clickHandle,
+            mainActiveIndex,
+            mainActiveIndexChange,
+            activeIdChange,
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/tree-select/types.ts

@@ -0,0 +1,77 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { TreeSelectChild, Popup as VanPopup } from 'vant';
+import { Field as VanField, TreeSelect as VanTreeSelect } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentEmit, ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { PickerOption } from '../picker/types';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function treeSelectPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanTreeSelect 组件的属性 */
+        treeSelectProps: { type: Object as PropType<Partial<ComponentProps<typeof VanTreeSelect>>> },
+        /** VanTreeSelect 组件的事件 - 兼容 vue2 版本 */
+        treeSelectOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanTreeSelect.emits>>>>>, default: () => ({}) },
+        /** VanTreeSelect 组件的插槽 */
+        treeSelectSlots: { type: Object as PropType<{
+            /** 自定义导航名称 */
+            navText?: ComponentType<{ item: TreeSelectChild } & CommonSlotsProps<any, any>>;
+            /** 自定义右侧区域内容 */
+            content?: ComponentType<{ options: any[] } & CommonSlotsProps<any, any>>;
+        }> },
+        /** 是否展示右侧箭头并开启点击反馈 - Field 字段, 调整默认值 */
+        isLink: { type: Boolean, default: true },
+        /** 点击事件, 当传递了此事件时, 会忽略内部打开弹窗操作 */
+        onRowClick: { type: Function as PropType<(option: { open: () => void; close: () => void }, ev: MouseEvent) => void> },
+        /** 显示文本的分隔符 @default / */
+        separator: { type: String, default: ',' },
+        /** 对值进行格式化 - 显示在页面上的值 */
+        format: { type: Function as PropType<(option: {
+            source: TreeSelectOption[];
+            value: string | string[];
+            separator: string;
+        }) => any> },
+        /** 值触发方式 @default confirm */
+        valueTrigger: { type: String as PropType<'change' | 'confirm' | 'cancel'>, default: 'confirm' },
+        /** 弹窗组件的属性 */
+        popupProps: { type: Object as PropType<Partial<ComponentExposed<typeof VanPopup>>> },
+        /** 弹窗组件的事件 - 兼容 vue2 版本 */
+        popupOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanPopup.emits>>>>>, default: () => ({}) },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const treeSelectPropsPrivate = treeSelectPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const treeSelectProps = {
+    ...VanField.props as unknown as {},
+    ...treeSelectPropsPrivate,
+};
+export type TreeSelectProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof treeSelectPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function treeSelectEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const treeSelectEmitsPrivate = treeSelectEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const treeSelectEmits = {
+    ...VanField.emits,
+    ...treeSelectEmitsPrivate,
+};
+
+export type TreeSelectEmits<T> = ReturnType<typeof treeSelectEmitsGeneric<T>>;
+
+export interface TreeSelectSlots extends CommonSlots<any> {
+}
+
+export interface TreeSelectOption {
+    text: string;
+    id: string;
+    children: Omit<TreeSelectOption, 'children'>[];
+}

package/components/upload/index.ts

@@ -0,0 +1,6 @@
+import type { ComponentExposed } from 'vue-component-type-helpers';
+import HUpload from './index.vue';
+
+export { HUpload };
+export type HUploadInstance = ComponentExposed<typeof HUpload>;
+export * from './types';

package/components/upload/index.vue

@@ -0,0 +1,109 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field"
+        :disabled="globalDisabled || disabled"
+        :readonly="globalReadonly || readonly"
+        v-bind="$attrs"
+    >
+        <template #input>
+            <VanUploader
+                :disabled="globalDisabled || disabled"
+                :readonly="globalReadonly || readonly"
+                :afterRead="rewriteAfterRead"
+                :model-value="checked"
+                v-bind="uploadProps" v-on="uploadOn"
+                @update:model-value="change"
+            >
+                <template v-for="(item, slotName) of uploadSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                    <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                </template>
+            </VanUploader>
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+        </template>
+    </VanField>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, usePlain } from '@xiaohaih/json-form-core';
+import { Field as VanField, Uploader as VanUploader } from 'vant';
+import type { SlotsType } from 'vue';
+import { defineComponent, unref } from 'vue';
+import { useCommonSetup } from '../use';
+import type { FileInfo, UploadDetail, UploadOption, UploadSlots } from './types';
+import { uploadEmitsPrivate as emits, uploadPropsPrivate as props } from './types';
+
+/**
+ * @file 上传
+ */
+export default defineComponent({
+    name: 'HUploader',
+    components: { VanField, VanUploader },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<UploadSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+
+        /** 重写文件上传功能 */
+        function rewriteAfterRead(file: FileInfo | FileInfo[], detail: UploadDetail) {
+            const opt = getUploadOption(file, detail);
+            if (props.afterRead) return props.afterRead(file, detail, opt);
+            if (!props.uploadRequest) return;
+
+            opt.files.forEach((o) => {
+                o.status = 'uploading';
+                o.message = typeof props.uploadingMessage === 'function' ? props.uploadingMessage(o) : props.uploadingMessage;
+            });
+            const res = props.uploadRequest(opt);
+            typeof res === 'object' && (res.then ? res.then(opt.success.bind(null, opt.files)) : res.catch(opt.fail.bind(null, opt.files)));
+        }
+        function getUploadOption(file: FileInfo | FileInfo[], detail: UploadDetail) {
+            return {
+                file: Array.isArray(file) ? file[0] : file,
+                files: Array.isArray(file) ? file : [file],
+                success: successCallback,
+                fail: failCallback,
+            } as UploadOption;
+        }
+        function successCallback(file: FileInfo | FileInfo[], res: any) {
+            const files = Array.isArray(file) ? file : [file];
+            files.some((o) => {
+                if (o.status !== 'uploading') return false;
+                o.status = 'done';
+                o.message = '';
+                o.response = res;
+                return false;
+            });
+        }
+        function failCallback(file: FileInfo | FileInfo[], res: any) {
+            const files = Array.isArray(file) ? file : [file];
+            files.some((o) => {
+                if (o.status !== 'uploading') return false;
+                o.status = 'failed';
+                o.message = typeof props.failedMessage === 'function' ? props.failedMessage(o, res) : props.failedMessage;
+                o.response = res;
+                return false;
+            });
+        }
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            rewriteAfterRead,
+            getUploadOption,
+            successCallback,
+            failCallback,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/upload/types.ts

@@ -0,0 +1,85 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { PopupProps, UploaderFileListItem } from 'vant';
+import { Field as VanField, Uploader as VanUploader } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function uploadPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanUploader 组件的属性 */
+        uploadProps: { type: Object as PropType<Partial<ComponentProps<typeof VanUploader>>> },
+        /** VanUploader 组件的事件 - 兼容 vue2 版本 */
+        uploadOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanUploader.emits>>>>>, default: () => ({}) },
+        /** VanUploader 组件的插槽 */
+        uploadSlots: { type: Object as PropType<{
+            /** 自定义上传区域 */
+            default?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义删除按钮 */
+            previewDelete?: ComponentType<CommonSlotsProps<any, any>>;
+            /** 自定义覆盖在预览区域上方的内容 */
+            previewCover?: ComponentType<{ item: UploaderFileListItem } & CommonSlotsProps<any, any>>;
+        }> },
+        /** 文件读取完毕后执行的回调 */
+        afterRead: { type: Function as PropType<(file: FileInfo | FileInfo[], detail: UploadDetail, option: UploadOption) => void> },
+        /** 文件上传方法 */
+        uploadRequest: { type: Function as PropType<(option: UploadOption) => Promise<any> | void> },
+        /** 上传中的提示 */
+        uploadingMessage: { type: [String, Function] as PropType<string | ((fileInfo: FileInfo) => string)>, default: '上传中' },
+        /** 失败的提示 */
+        failedMessage: { type: [String, Function] as PropType<string | ((fileInfo: FileInfo, response: any) => string)> },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const uploadPropsPrivate = uploadPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const uploadProps = {
+    ...VanField.props as unknown as {},
+    ...uploadPropsPrivate,
+};
+export type UploadProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof uploadPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function uploadEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const uploadEmitsPrivate = uploadEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const uploadEmits = {
+    ...VanField.emits,
+    ...uploadEmitsPrivate,
+};
+
+export type UploadEmits<T> = ReturnType<typeof uploadEmitsGeneric<T>>;
+
+export interface UploadSlots extends CommonSlots<any> {
+}
+
+/** 上传文件信息 */
+export interface FileInfo extends UploaderFileListItem {
+    /** 服务器返回的信息 */
+    response?: any;
+}
+/**  */
+export interface UploadDetail {
+    name: number | string;
+    index: number;
+}
+
+/** 文件上传提供的参数 */
+export interface UploadOption {
+    /** 当前选中的第一个文件 */
+    file: FileInfo;
+    /** 多选时所有文件 */
+    files: FileInfo[];
+    /** 成功回调 */
+    success: (file: FileInfo | FileInfo[], res: any) => void;
+    /** 失败回调 */
+    fail: (file: FileInfo | FileInfo[], res: any) => void;
+}