@xiaohaih/json-form-vant 0.0.1

package/components/picker/types.ts

@@ -0,0 +1,94 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Picker as VanPicker, Popup as VanPopup } from 'vant';
+import { Field as VanField } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import type { ComponentEmit, ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function pickerPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanPicker 组件的属性 */
+        pickerProps: { type: Object as PropType<Partial<ComponentProps<typeof VanPicker>>> },
+        /** VanPicker 组件的事件 - 兼容 vue2 版本 */
+        pickerOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanPicker.emits>>>>>, default: () => ({}) },
+        /** VanPicker 组件的插槽 */
+        pickerSlots: { 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>>;
+            /** 自定义空状态内容 */
+            empty?: 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: '/' },
+        /** 是否显示全路径, 多列不生效 */
+        showAllLevels: { type: Boolean, default: true },
+        /** 对值进行格式化 - 显示在页面上的值 */
+        format: { type: Function as PropType<(option: {
+            source: any[];
+            value: any[];
+            columnsFieldNames: Record<'text' | 'value' | 'children', string>;
+            showAllLevels: boolean;
+            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 pickerPropsPrivate = pickerPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const pickerProps = {
+    ...VanField.props as unknown as {},
+    ...pickerPropsPrivate,
+};
+export type PickerProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof pickerPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function pickerEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const pickerEmitsPrivate = pickerEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const pickerEmits = {
+    ...VanField.emits,
+    ...pickerEmitsPrivate,
+};
+
+export type PickerEmits<T> = ReturnType<typeof pickerEmitsGeneric<T>>;
+
+export interface PickerSlots extends CommonSlots<any> {
+}
+
+/** 选中时的参数 */
+export interface PickerOption {
+    columnIndex: number;
+    selectedIndexes: number;
+    selectedOptions: Record<'text' | 'value', string>;
+    selectedValues: string[];
+}

package/components/radio/index.ts

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

package/components/radio/index.vue

@@ -0,0 +1,68 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field" :label="label"
+        :disabled="globalDisabled || disabled"
+        :readonly="globalReadonly || readonly"
+        v-bind="$attrs"
+    >
+        <template #input>
+            <VanRadio
+                :name="field" :model-value="checked"
+                :disabled="globalDisabled || disabled || globalReadonly || readonly"
+                v-bind="radioProps" v-on="radioOn"
+                @update:model-value="change"
+            >
+                <template v-for="(item, slotName) of radioSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                    <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                </template>
+            </VanRadio>
+        </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, Radio as VanRadio, RadioGroup as VanRadioGroup } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent } from 'vue';
+import { pick } from '../../src/utils';
+import { useCommonSetup, useTempChecked } from '../use';
+import type { RadioSlots } from './types';
+import { radioEmitsPrivate as emits, radioPropsPrivate as props } from './types';
+
+/**
+ * @file 单选框
+ */
+export default defineComponent({
+    name: 'HRadio',
+    components: { VanField, VanRadio, VanRadioGroup },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<RadioSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+
+        /** 重写 change 事件 */
+        function change(value: string) {
+            props.cancelable ? plain.change(plain.checked.value === value ? undefined : value) : plain.change(value);
+        }
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            change,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/radio/types.ts

@@ -0,0 +1,58 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Radio, RadioProps as VantRadioProps } from 'vant';
+import { Field as VanField, Radio as VanRadio } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { camelize } from 'vue';
+import type { ComponentEmit, ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+
+/** 组件传参 - 私有 */
+export function radioPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 输入框左侧文本 */
+        label: { type: String },
+        /** VanRadio 组件的属性 */
+        radioProps: { type: Object as PropType<Partial<ComponentProps<typeof VanRadio>>> },
+        /** VanRadio 组件的事件 - 兼容 vue2 版本 */
+        radioOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanRadio.emits>>>>>, default: () => ({}) },
+        /** VanRadio 组件的插槽 */
+        radioSlots: { type: Object as PropType<{
+            /** 自定义文本 */
+            default?: ComponentType<{ checked: boolean; disabled: boolean } & CommonSlotsProps<any, any>>;
+            /** 自定义图标 */
+            icon?: ComponentType<{ checked: boolean; disabled: boolean } & CommonSlotsProps<any, any>>;
+        }> },
+        /** 是否可取消选中 */
+        cancelable: { type: Boolean, default: true },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const radioPropsPrivate = radioPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const radioProps = {
+    ...VanField.props as unknown as {},
+    ...radioPropsPrivate,
+};
+export type RadioProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof radioPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function radioEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const radioEmitsPrivate = radioEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const radioEmits = {
+    ...VanField.emits,
+    ...radioEmitsPrivate,
+};
+
+export type RadioEmits<T> = ReturnType<typeof radioEmitsGeneric<T>>;
+
+export interface RadioSlots extends CommonSlots<any> {
+}

package/components/radio-group/index.ts

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

package/components/radio-group/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field" :label="label"
+        :model-value="(checked as string)"
+        :disabled="globalDisabled || disabled"
+        :readonly="globalReadonly || readonly"
+        v-bind="$attrs"
+    >
+        <template #input>
+            <VanRadioGroup
+                :name="field" :model-value="checked"
+                :disabled="globalDisabled || disabled || globalReadonly || readonly"
+                v-bind="radioGroupProps" v-on="radioGroupOn"
+                @update:model-value="change"
+            >
+                <template v-for="item of finalOption" :key="item[valueKey]">
+                    <VanRadio :name="item[valueKey]" v-bind="radioProps" v-on="radioOn">
+                        {{ item[labelKey] }}
+                        <template v-for="(radioItem, slotName) of radioSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                            <component :is="getNode(radioItem)" v-bind="slotProps" :item="item" v-bind.prop="row" />
+                        </template>
+                    </VanRadio>
+                </template>
+            </VanRadioGroup>
+        </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, Radio as VanRadio, RadioGroup as VanRadioGroup } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent } from 'vue';
+import { pick } from '../../src/utils';
+import { useCommonSetup, useTempChecked } from '../use';
+import type { RadioGroupSlots } from './types';
+import { radioGroupEmitsPrivate as emits, radioGroupPropsPrivate as props } from './types';
+
+/**
+ * @file 单选框组
+ */
+export default defineComponent({
+    name: 'HRadioGroup',
+    components: { VanField, VanRadio, VanRadioGroup },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<RadioGroupSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+
+        /** 重写 change 事件 */
+        function change(value: string) {
+            props.cancelable ? plain.change(plain.checked.value === value ? undefined : value) : plain.change(value);
+        }
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            change,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/radio-group/types.ts

@@ -0,0 +1,65 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Radio as VanRadio } from 'vant';
+import { Field as VanField, RadioGroup as VanRadioGroup } from 'vant';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
+import { camelize } from 'vue';
+import type { ComponentEmit, ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function radioGroupPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 输入框左侧文本 */
+        label: { type: String },
+        /** VanRadioGroup 组件的属性 */
+        radioGroupProps: { type: Object as PropType<Partial<ComponentProps<typeof VanRadioGroup>>> },
+        /** VanRadioGroup 组件的事件 - 兼容 vue2 版本 */
+        radioGroupOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanRadioGroup.emits>>>>>, default: () => ({}) },
+        /** 显示的标签 */
+        labelKey: { type: String, default: 'label' },
+        /** 提交的值 */
+        valueKey: { type: String, default: 'value' },
+        /** 是否可取消选中 */
+        cancelable: { type: Boolean },
+        /** VanRadio 组件的属性 */
+        radioProps: { type: Object as PropType<Partial<ComponentProps<typeof VanRadio>>> },
+        /** VanRadio 组件的事件 - 兼容 vue2 版本 */
+        radioOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanRadio.emits>>>>>, default: () => ({}) },
+        /** VanRadio 组件的插槽 */
+        radioSlots: { type: Object as PropType<{
+            /** 自定义文本 */
+            default?: ComponentType<{ checked: boolean; disabled: boolean; item: any } & CommonSlotsProps<any, any>>;
+            /** 自定义图标 */
+            icon?: ComponentType<{ checked: boolean; disabled: boolean; item: any } & CommonSlotsProps<any, any>>;
+        }> },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const radioGroupPropsPrivate = radioGroupPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const radioGroupProps = {
+    ...VanField.props as unknown as {},
+    ...radioGroupPropsPrivate,
+};
+export type RadioGroupProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof radioGroupPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function radioGroupEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const radioGroupEmitsPrivate = radioGroupEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const radioGroupEmits = {
+    ...VanField.emits,
+    ...radioGroupEmitsPrivate,
+};
+
+export type RadioGroupEmits<T> = ReturnType<typeof radioGroupEmitsGeneric<T>>;
+
+export interface RadioGroupSlots extends CommonSlots<any> {
+}

package/components/rate/index.ts

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

package/components/rate/index.vue

@@ -0,0 +1,63 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field"
+        :model-value="checked"
+        :disabled="globalDisabled || disabled"
+        :readonly="globalReadonly || readonly"
+        v-bind="$attrs"
+    >
+        <template #input>
+            <VanRate
+                :disabled="globalDisabled || disabled"
+                :readonly="globalReadonly || readonly"
+                :model-value="(checked as number)"
+                v-bind="rateProps" v-on="rateOn"
+                @update:model-value="change"
+            >
+                <template v-for="(item, slotName) of rateSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                    <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                </template>
+            </VanRate>
+        </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, Rate as VanRate } from 'vant';
+import type { SlotsType } from 'vue';
+import { defineComponent } from 'vue';
+import { useCommonSetup } from '../use';
+import type { RateSlots } from './types';
+import { rateEmitsPrivate as emits, ratePropsPrivate as props } from './types';
+
+/**
+ * @file 评分
+ */
+export default defineComponent({
+    name: 'HRate',
+    components: { VanField, VanRate },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<RateSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/rate/types.ts

@@ -0,0 +1,47 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import { Field as VanField, Rate as VanRate } 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 ratePropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanRate 组件的属性 */
+        rateProps: { type: Object as PropType<Partial<ComponentProps<typeof VanRate>>> },
+        /** VanRate 组件的事件 - 兼容 vue2 版本 */
+        rateOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanRate.emits>>>>>, default: () => ({}) },
+        /** VanRate 组件的插槽 */
+        rateSlots: { type: Object as PropType<{
+        }> },
+    } as const;
+}
+/** 组件传参 - 私有 */
+export const ratePropsPrivate = ratePropsGeneric();
+/** 组件传参 - 外部调用 */
+export const rateProps = {
+    ...VanField.props as unknown as {},
+    ...ratePropsPrivate,
+};
+export type RateProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof ratePropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function rateEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const rateEmitsPrivate = rateEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const rateEmits = {
+    ...VanField.emits,
+    ...rateEmitsPrivate,
+};
+
+export type RateEmits<T> = ReturnType<typeof rateEmitsGeneric<T>>;
+
+export interface RateSlots extends CommonSlots<any> {
+}

package/components/share.ts

@@ -0,0 +1,78 @@
+import type { Obj2Props, usePlain } from '@xiaohaih/json-form-core';
+import { Field as VanField } from 'vant';
+import type { AsyncComponentOptions, Component, ComponentOptions, ComponentPublicInstance, DefineComponent, ExtractPropTypes, PropType, Raw, VNode } from 'vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+export interface SlotQuery {
+    /** 是否禁用 */
+    disabled: boolean;
+    /** 绑定的值 */
+    modelValue: any;
+    /** 内部设置的类名 */
+    class: string;
+    /** 组件内部信息 */
+    extraOption: {
+        /** 表单信息值 */
+        query: Record<string, any>;
+        /** 触发外部搜索事件 */
+        search: () => void;
+        /** 触发内部搜索事件 */
+        insideSearch: () => void;
+    };
+    [index: string]: string | number | boolean | ((...args: any[]) => any) | Record<string, any> | any[];
+}
+
+const vantFieldProps = VanField.props as unknown as Obj2Props<ComponentProps<typeof VanField>>;
+/** 公共属性 - 泛型 */
+export function commonPropsGeneric<Query extends Record<string, any>, OptionQuery = Record<string, any>>() {
+    return {
+        /** field 组件属性 */
+        ...{} as typeof vantFieldProps,
+        /** 是否禁用 */
+        disabled: { type: Boolean as PropType<boolean>, default: undefined },
+        /** 是否只读 */
+        readonly: { type: Boolean as PropType<boolean>, default: undefined },
+        /** 是否隐藏表单项 */
+        hide: { type: Boolean as PropType<boolean>, default: undefined },
+        /** field 组件自身的插槽 */
+        slots: { type: Object as PropType<CommonSlots> },
+    } as const;
+}
+/** 公共属性 */
+export const commonProps = commonPropsGeneric();
+export type CommonProps<Query extends Record<string, any>, OptionQuery> = ReturnType<typeof commonPropsGeneric<Query, OptionQuery>>;
+
+/** 通用插槽 */
+export interface CommonSlots<T = Record<string, any>> {
+    /** 自定义输入框左侧文本 */
+    label?: ComponentType<CommonSlotsProps<any, any> & T>;
+    /** 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 */
+    input?: ComponentType<CommonSlotsProps<any, any> & T>;
+    /** 自定义输入框头部图标 */
+    leftIcon?: ComponentType<CommonSlotsProps<any, any> & T>;
+    /** 自定义输入框尾部图标 */
+    rightIcon?: ComponentType<CommonSlotsProps<any, any> & T>;
+    /** 自定义输入框尾部按钮 */
+    button?: ComponentType<CommonSlotsProps<any, any> & T>;
+    /** 自定义底部错误提示文案 */
+    errorMessage?: ComponentType<{ message: string } & CommonSlotsProps<any, any> & T>;
+    /** 自定义输入框最右侧的额外内容 */
+    extra?: ComponentType<CommonSlotsProps<any, any> & T>;
+}
+
+/** 插槽通用参数 */
+export interface CommonSlotsProps<Query extends Record<string, any>, Options extends Record<string, any>> {
+    props: Record<string, any>;
+    plain: ReturnType<typeof usePlain<Query, Options>>;
+}
+
+/** 支持的组件格式 */
+export type ComponentType<Props = Record<string, any>, Context = any>
+    = | DefineComponent | Raw<DefineComponent>
+        | ((props: Props, ctx?: Context) => any)
+        | ComponentOptions
+        | ComponentPublicInstance
+        | (() => Promise<Component | { default: Component }>)
+        | AsyncComponentOptions
+        | string | number
+        | { [key: string]: any };

package/components/signature/index.ts

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

package/components/signature/index.vue

@@ -0,0 +1,65 @@
+<template>
+    <VanField
+        v-if="renderField && !hide"
+        :name="field"
+        :disabled="finalDisabled"
+        :readonly="finalReadonly"
+        v-bind="$attrs"
+    >
+        <template #input>
+            <HSignaturePure v-bind="allAttrs" @load="load" />
+        </template>
+        <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+            <component :is="getNode(item)" v-if="plain" :plain="plain" :props="$props" v-bind="row" />
+        </template>
+    </VanField>
+    <HSignaturePure v-else-if="!hide" v-bind="allAttrs" />
+</template>
+
+<script lang="ts">
+import type { usePlain } from '@xiaohaih/json-form-core';
+import { getNode, getProvideValue, hyphenate } from '@xiaohaih/json-form-core';
+import type { SignatureInstance } from 'vant';
+import { Field as VanField, Signature as VanSignature } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { useCommonSetup } from '../use';
+import HSignaturePure from './instance.vue';
+import type { SignatureSlots, SubmitOption } from './types';
+import { signatureEmitsPrivate as emits, signaturePropsPrivate as props } from './types';
+
+/**
+ * @file 签名
+ */
+export default defineComponent({
+    name: 'HSignature',
+    components: { VanField, VanSignature, HSignaturePure },
+    inheritAttrs: false,
+    props,
+    emits,
+    setup(props, ctx) {
+        const allAttrs = computed(() => ({ ...props, ...ctx.attrs }));
+        const wrapperProvide = getProvideValue();
+        const finalDisabled = computed(() => props.disabled || wrapperProvide?.disabled?.value);
+        const finalReadonly = computed(() => props.readonly || wrapperProvide?.readonly?.value);
+
+        const plain = ref<ReturnType<typeof usePlain> | null>(null);
+        function load(_plain: ReturnType<typeof usePlain>) {
+            plain.value = _plain;
+        }
+
+        return {
+            hyphenate,
+            getNode,
+            allAttrs,
+            finalDisabled,
+            finalReadonly,
+            plain,
+            load,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>