minnan-website/components/dynamicf/index.ts

import { markRaw } from "vue";
import { 
  Alert, Checkbox, DatePicker, Form, 
  FormItem, Image, Input, InputNumber, 
  Rate, Switch, Textarea, TimePicker
} from "ant-design-vue";
import { DynamicFormItemRegistry, type IDynamicFormOptions, configDefaultDynamicFormOptions } from "@imengyu/vue-dynamic-form";
import PasswordWithStrengthInput from "./PasswordWithStrengthInput.vue";
import CheckBoxValue from "./CheckBoxValue.vue";
import SimpleSelectFormItem from "./SimpleSelectFormItem.vue";
import IdAsValueDropdown from "./Dropdown/IdAsValueDropdown.vue";
import IdAsValueTreeDropdown from "./Dropdown/IdAsValueTreeDropdown.vue";
import SelectValue from "./SelectValue.vue";
import IdAsValueTree from "./IdAsValueTree.vue";
import UploadImageFormItem from "./UploadImageFormItem.vue";
import WrapperTimeRangePicker from "./WrapperTimeRangePicker.vue";
import WrapperRangePicker from "./WrapperRangePicker.vue";
import ActionRender from "./ActionRender.vue";
import CheckBoxToInt from "./CheckBoxToInt.vue";
import RadioValueVue from "./RadioValue.vue";
import StateRendererVue from "./Display/StateRenderer.vue";
import ShowDateOrNullVue from "./Display/ShowDateOrNull.vue";
import ShowImageListVue from "./Display/ShowImageList.vue";
import ShowValueOrNullVue from "./Display/ShowValueOrNull.vue";
import CascaderFormItemVue from "./CascaderFormItem.vue";
import SimpleEditDynamicStringListVue from "./SimpleEditDynamicStringList.vue";
import WhiteSpaceVue from "./WhiteSpace.vue";
import NumberRange from "./NumberRange.vue";

export const defaultConfig = {
  internalWidgets: {
    Form: {
      component: markRaw(Form),
      propsMap: {
        rules: 'rules',
        wrapperCol: 'wrapperCol',
        labelCol: 'labelCol',
      },
    },
    FormItem: {
      component: markRaw(FormItem),
      propsMap: {
        name: 'name',
        wrapperCol: 'wrapperCol',
        labelCol: 'labelCol',
      },
    },
  },
} as IDynamicFormOptions

export function registerAllFormComponents() {
  configDefaultDynamicFormOptions(defaultConfig);

  DynamicFormItemRegistry

    .register('text', markRaw(Input))
    .register('password', markRaw(Input), { type: "password" })
    .register('number', markRaw(InputNumber))
    .register('text-area', markRaw(Textarea))
    .register('password-with-strength', markRaw(PasswordWithStrengthInput))
    .register('switch', markRaw(Switch), {}, 'checked')
    .register('cascader', markRaw(CascaderFormItemVue))
    .register('check-box', markRaw(Checkbox), {}, 'checked')
    .register('check-box-int', markRaw(CheckBoxToInt))
    .register('check-box-value', markRaw(CheckBoxValue))
    .register('radio-value', markRaw(RadioValueVue))
    .register('number-range', markRaw(NumberRange))
    .register('rate', markRaw(Rate))
    .register('select', markRaw(SimpleSelectFormItem))
    .register('select-value', markRaw(SelectValue))
    .register('select-id', markRaw(IdAsValueDropdown))
    .register('select-tree-id', markRaw(IdAsValueTreeDropdown))
    .register('tree-id', markRaw(IdAsValueTree))
    .register('date', markRaw(DatePicker))
    .register('time', markRaw(TimePicker))
    .register('date-time', markRaw(DatePicker), { showTime: true })
    .register('date-range', markRaw(WrapperRangePicker))
    .register('time-range', markRaw(WrapperTimeRangePicker))
    .register('date-time-range', markRaw(WrapperRangePicker), { showTime: true })
    .register('single-image', markRaw(UploadImageFormItem), { single: true })
    .register('mulit-image', markRaw(UploadImageFormItem))
    .register('actions', markRaw(ActionRender))
    .register('alert', markRaw(Alert))
    .register('string-list', markRaw(SimpleEditDynamicStringListVue))
    .register('static-image', markRaw(Image), {}, "src")
    .register('static-state', markRaw(StateRendererVue))
    .register('static-value', markRaw(ShowValueOrNullVue))
    .register('static-date', markRaw(ShowDateOrNullVue))
    .register('static-image-list', markRaw(ShowImageListVue), {}, "images")
    .register('space', markRaw(WhiteSpaceVue))
}