@xiaohaih/json-form-vant 0.0.1

package/components/checkbox-group/index.vue

@@ -0,0 +1,67 @@
+<template>
+    <VanField
+        v-if="!hide"
+        :name="field" :label="label"
+        :disabled="globalDisabled || disabled"
+        :readonly="globalReadonly || readonly"
+        v-bind="$attrs"
+    >
+        <template #input>
+            <VanCheckboxGroup
+                :name="field" :model-value="checked"
+                :disabled="globalDisabled || disabled || globalReadonly || readonly"
+                v-bind="checkboxGroupProps" v-on="checkboxGroupOn"
+                @update:model-value="change"
+            >
+                <template v-for="item of finalOption" :key="item[valueKey]">
+                    <VanCheckbox :name="item[valueKey]" v-bind="checkboxProps" v-on="checkboxOn">
+                        {{ item[labelKey] }}
+                        <template v-for="(checkBoxItem, slotName) of checkboxSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                            <component :is="getNode(checkBoxItem)" v-bind="slotProps" :item="item" v-bind.prop="row" />
+                        </template>
+                    </VanCheckbox>
+                </template>
+            </VanCheckboxGroup>
+        </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 { Checkbox as VanCheckbox, CheckboxGroup as VanCheckboxGroup, Field as VanField } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent } from 'vue';
+import { pick } from '../../src/utils';
+import { useCommonSetup, useTempChecked } from '../use';
+import type { CheckboxGroupSlots } from './types';
+import { checkboxGroupEmitsPrivate as emits, checkboxGroupPropsPrivate as props } from './types';
+
+/**
+ * @file 多选框组
+ */
+export default defineComponent({
+    name: 'HCheckboxGroup',
+    components: { VanCheckbox, VanCheckboxGroup, VanField },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<CheckboxGroupSlots>,
+    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/checkbox-group/types.ts

@@ -0,0 +1,63 @@
+import type { emits2obj, PlainProps } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Checkbox as VanCheckbox } from 'vant';
+import { CheckboxGroup as VanCheckboxGroup, Field as VanField } 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 checkboxGroupPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 输入框左侧文本 */
+        label: { type: String },
+        /** VanCheckboxGroup 组件的属性 */
+        checkboxGroupProps: { type: Object as PropType<Partial<ComponentProps<typeof VanCheckboxGroup>>> },
+        /** VanCheckboxGroup 组件的事件 - 兼容 vue2 版本 */
+        checkboxGroupOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanCheckboxGroup.emits>>>>>, default: () => ({}) },
+        /** 显示的标签 */
+        labelKey: { type: String, default: 'label' },
+        /** 提交的值 */
+        valueKey: { type: String, default: 'value' },
+        /** VanCheckbox 组件的属性 */
+        checkboxProps: { type: Object as PropType<Partial<ComponentProps<typeof VanCheckbox>>> },
+        /** VanCheckbox 组件的事件 - 兼容 vue2 版本 */
+        checkboxOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanCheckbox.emits>>>>>, default: () => ({}) },
+        /** VanCheckbox 组件的插槽 */
+        checkboxSlots: { 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 checkboxGroupPropsPrivate = checkboxGroupPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const checkboxGroupProps = {
+    ...VanField.props as unknown as {},
+    ...checkboxGroupPropsPrivate,
+};
+export type CheckboxGroupProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof checkboxGroupPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function checkboxGroupEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const checkboxGroupEmitsPrivate = checkboxGroupEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const checkboxGroupEmits = {
+    ...VanField.emits,
+    ...checkboxGroupEmitsPrivate,
+};
+
+export type CheckboxGroupEmits<T> = ReturnType<typeof checkboxGroupEmitsGeneric<T>>;
+
+export interface CheckboxGroupSlots extends CommonSlots<any> {
+}

package/components/component-definition/components.ts

@@ -0,0 +1,29 @@
+/**
+ * 组件导出中转文件
+ * 从组件定义文件中导出所有组件
+ */
+export * from '../area/index';
+export * from '../cascader/index';
+export * from '../checkbox-group/index';
+export * from '../checkbox/index';
+export * from '../custom-render/index';
+export * from '../date-picker/index';
+export * from '../date-time-picker-group/index';
+export * from '../input/index';
+export * from '../number-keyboard/index';
+export * from '../password-input/index';
+export * from '../picker/index';
+export * from '../radio-group/index';
+export * from '../radio/index';
+export * from '../rate/index';
+export * from '../signature/index';
+export * from '../slider/index';
+export * from '../stepper/index';
+export * from '../switch/index';
+export * from '../time-picker/index';
+export * from '../tree-select/index';
+export * from '../upload/index';
+
+export const HDatetimePicker = { render: () => null };
+export interface DatetimePickerProps<A, B> {}
+

package/components/component-definition/definition.ts

@@ -0,0 +1,25 @@
+// 组件模板文件， 为低版本做兼容
+// 内部注册的且未循环引用的组件
+// postinstall 脚本的参考文件
+export * from '../area/index';
+export * from '../cascader/index';
+export * from '../checkbox-group/index';
+export * from '../checkbox/index';
+export * from '../custom-render/index';
+export * from '../date-picker/index';
+export * from '../date-time-picker-group/index';
+export * from '../datetime-picker/index';
+export * from '../input/index';
+export * from '../number-keyboard/index';
+export * from '../password-input/index';
+export * from '../picker/index';
+export * from '../radio-group/index';
+export * from '../radio/index';
+export * from '../rate/index';
+export * from '../signature/index';
+export * from '../slider/index';
+export * from '../stepper/index';
+export * from '../switch/index';
+export * from '../time-picker/index';
+export * from '../tree-select/index';
+export * from '../upload/index';

package/components/component-definition/index.ts

@@ -0,0 +1,4 @@
+export * from '../dynamic-group/index';
+export * from '../group/index';
+export * from '../input-slot/index';
+export * from './components';

package/components/custom-render/index.ts

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

package/components/custom-render/index.vue

@@ -0,0 +1,66 @@
+<template>
+    <template v-if="renderField">
+        <VanField v-if="!hide" :model-value="fieldModelValue" v-bind="$attrs">
+            <template v-for="(item, slotName) of slots" :key="slotName" #[hyphenate(slotName)]="row">
+                <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+            </template>
+            <template #input>
+                <component :is="customRender" v-bind="slotProps" />
+            </template>
+        </VanField>
+    </template>
+    <template v-else>
+        <component :is="customRender" v-bind="slotProps" />
+    </template>
+</template>
+
+<script lang="ts">
+import { getNode, hyphenate, noop, usePlain } from '@xiaohaih/json-form-core';
+import { Field as VanField } from 'vant';
+import type { SlotsType } from 'vue';
+import { computed, defineComponent, markRaw, ref, watch } from 'vue';
+import { useCommonSetup, useTempChecked } from '../use';
+import type { CustomRenderSlots } from './types';
+import { customRenderEmitsPrivate as emits, customRenderPropsPrivate as props } from './types';
+
+/**
+ * @file 自定义渲染
+ */
+export default defineComponent({
+    name: 'HCustomRender',
+    components: { VanField },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<CustomRenderSlots>,
+    setup(props, ctx) {
+        const plain = usePlain(props);
+        const { slotProps } = useCommonSetup(props, ctx, plain);
+        const fieldModelValue = computed(() => typeof plain.checked.value === 'object' ? '' : plain.checked.value);
+        const customRender = ref<any>();
+        // 由计算属性改为 watch
+        // 防止在 watch 中引用了响应式变量导致重渲染
+        watch(() => props.render, (render) => {
+            customRender.value = typeof render === 'function'
+                ? getNode(render(slotProps.value))
+                : render;
+        }, { immediate: true });
+        // const customRender = computed(() => {
+        //     return typeof props.render === 'function'
+        //         ? getNode(props.render(slotProps.value))
+        //         : props.render;
+        // });
+
+        return {
+            hyphenate,
+            getNode,
+            ...plain,
+            slotProps,
+            fieldModelValue,
+            customRender,
+        };
+    },
+});
+</script>
+
+<style lang="css" scoped></style>

package/components/custom-render/types.ts

@@ -0,0 +1,43 @@
+import type { CamelCase, Obj2Props, PlainProps, usePlain } from '@xiaohaih/json-form-core';
+import { emits2props, plainProps } from '@xiaohaih/json-form-core';
+import type { Component, ExtractPublicPropTypes, PropType, Ref } from 'vue';
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
+import type { CommonProps, CommonSlots, CommonSlotsProps, ComponentType } from '../share';
+import { commonProps } from '../share';
+
+/** 组件传参 - 私有 */
+export function customRenderPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** 是否渲染 form-item @default true */
+        renderField: { type: Boolean as PropType<boolean>, default: true },
+        /** 渲染节点 */
+        render: {
+            type: [Function, Object] as PropType<((option: CustomRenderSlotOption<Query, OptionQuery>) => () => any) | Record<string, any>>,
+            required: true,
+        },
+    } as const;
+}
+export interface CustomRenderSlotOption<Query extends Record<string, any>, OptionQuery extends Record<string, any>> extends CommonSlotsProps<Query, OptionQuery> {
+}
+/** 组件传参 - 私有 */
+export const customRenderPropsPrivate = customRenderPropsGeneric();
+/** 组件传参 - 外部调用 */
+
+export const customRenderProps = customRenderPropsPrivate;
+export type CustomRenderProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof customRenderPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function customRenderEmitsGeneric<T>() {
+    return {
+    };
+}
+/** 组件事件 - 私有 */
+export const customRenderEmitsPrivate = customRenderEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const customRenderEmits = customRenderEmitsPrivate;
+export type CustomRenderEmits<T> = ReturnType<typeof customRenderEmitsGeneric<T>>;
+
+export interface CustomRenderSlots extends CommonSlots<Record<string, any>> {
+}

package/components/date-picker/index.ts

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

package/components/date-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">
+                <VanDatePicker
+                    :model-value="checkedArr"
+                    v-bind="datePickerProps" v-on="datePickerOn"
+                    @change="changeHandle" @confirm="confirmHandle" @cancel="cancelHandle"
+                >
+                    <template v-for="(item, slotName) of datePickerSlots" :key="slotName" #[hyphenate(slotName)]="row">
+                        <component :is="getNode(item)" v-bind="slotProps" v-bind.prop="row" />
+                    </template>
+                </VanDatePicker>
+            </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 { DatePicker as VanDatePicker, Field as VanField, Popup as VanPopup } 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 { DatePickerSlots } from './types';
+import { datePickerEmitsPrivate as emits, datePickerPropsPrivate as props } from './types';
+
+/**
+ * @file 日期选择框
+ */
+export default defineComponent({
+    name: 'HDatePicker',
+    components: { VanDatePicker, VanField, VanPopup },
+    inheritAttrs: false,
+    props,
+    emits,
+    slots: Object as SlotsType<DatePickerSlots>,
+    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 dateEventHandle(type: string, value: PickerOption) {
+            if (props.valueTrigger === type || props.datePickerProps?.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: dateEventHandle.bind(null, 'change'),
+            confirmHandle: dateEventHandle.bind(null, 'confirm'),
+            cancelHandle: dateEventHandle.bind(null, 'cancel'),
+            popupInfo,
+        };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/components/date-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 { DatePicker as VanDatePicker, Field as VanField } 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 datePickerPropsGeneric<Query extends Record<string, any>, OptionQuery extends Record<string, any>>() {
+    return {
+        ...commonProps as CommonProps<Query, OptionQuery>,
+        ...plainProps as PlainProps<Query, OptionQuery>,
+        /** VanDatePicker 组件的属性 */
+        datePickerProps: { type: Object as PropType<Partial<ComponentProps<typeof VanDatePicker>>> },
+        /** VanDatePicker 组件的事件 - 兼容 vue2 版本 */
+        datePickerOn: { type: Object as PropType<Partial<ReturnType<typeof emits2obj<NonNullable<typeof VanDatePicker.emits>>>>>, default: () => ({}) },
+        /** VanDatePicker 组件的插槽 */
+        datePickerSlots: { 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 datePickerPropsPrivate = datePickerPropsGeneric();
+/** 组件传参 - 外部调用 */
+export const datePickerProps = {
+    ...VanField.props as unknown as {},
+    ...datePickerPropsPrivate,
+};
+export type DatePickerProps<Query extends Record<string, any>, OptionQuery extends Record<string, any>> = ExtractPublicPropTypes<ReturnType<typeof datePickerPropsGeneric<Query, OptionQuery>>>;
+
+/** 组件事件 - 私有 */
+export function datePickerEmitsGeneric<T>() {
+    return {};
+}
+/** 组件事件 - 私有 */
+export const datePickerEmitsPrivate = datePickerEmitsGeneric();
+/** 组件事件 - 外部调用 */
+export const datePickerEmits = {
+    ...VanField.emits,
+    ...datePickerEmitsPrivate,
+};
+
+export type DatePickerEmits<T> = ReturnType<typeof datePickerEmitsGeneric<T>>;
+
+export interface DatePickerSlots 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/date-time-picker-group/index.ts

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