designer-hub/packages/app/src/components/data-form.vue

<script setup lang="ts">
import WdButton from 'wot-design-uni/components/wd-button/wd-button.vue'
import WdInput from 'wot-design-uni/components/wd-input/wd-input.vue'
import WdPicker from 'wot-design-uni/components/wd-picker/wd-picker.vue'
import { ConfigProviderThemeVars } from 'wot-design-uni'
import { DataFormProps, DataFormSchema } from './data-form'
import { addUnit } from 'wot-design-uni/components/common/util'
import { omit } from 'radash'

const modelValue = defineModel({
  type: Object,
  default: () => ({}),
})
withDefaults(
  defineProps<{
    schema: DataFormSchema
    direction?: 'horizontal' | 'vertical'
  }>(),
  { direction: 'vertical', labelShow: true },
)
const emits = defineEmits(['submit'])
const form = ref()
const types = {
  TextField: WdInput,
  Submit: WdButton,
  Select: WdPicker,
  // Radio: WdRadioGroup,
}
const defaultProps = {
  TextField: {
    noBorder: true,
    style: {},
    customClass: 'rounded border border-[#e1e1e1] border-solid p-1',
    placeholder: ' ',
  },
  Submit: {
    customClass: 'w-full! rounded-lg! my-4!',
    block: true,
  },
}
const verticalDefaultProps = {
  TextField: {
    noBorder: true,
    style: {},
    customClass: 'rounded border border-[#e1e1e1] border-solid p-1',
    placeholder: ' ',
  },
  Submit: {
    customClass: 'w-full! rounded-lg! my-4!',
    block: true,
  },
}
const horizontalDefaultProps = {
  TextField: {
    customClass: 'text-red!',
    placeholderClass: 'text-black/30',
  },
  Select: {
    customClass: 'text-black/30! border-b-1 border-b-[#e1e1e1] border-b-solid',
  },
  Radio: {
    customClass: 'my--4!',
  },
  Checkbox: {
    customClass: 'my--4!',
  },
  TimePick: {
    customClass: 'm-0!',
  },
}
const themeVars: ConfigProviderThemeVars = {
  cellPadding: '0',
  cellWrapperPadding: '10rpx',
  radioButtonRadius: '8rpx',
  radioButtonBg: 'transparent',
  checkboxButtonRadius: '8rpx',
  checkboxButtonBg: 'transparent',
}
const submit = () => {
  emits('submit', modelValue)
}
const validate = (): Promise<{ valid: boolean; errors: any[] }> => form.value?.validate()
defineExpose({
  validate,
})
</script>
<template>
  <wd-config-provider :theme-vars="themeVars">
    <wd-form ref="form" :model="modelValue">
      <template
        v-for="([prop, { type, label, hiddenLabel, existing, props }], index) in Object.entries(
          schema,
        )"
        :key="index"
      >
        <div
          v-if="existing ?? true"
          class="grid mb-4"
          :class="[direction === 'horizontal' ? 'items-center' : '']"
          :style="
            direction === 'horizontal'
              ? { 'grid-template-columns': `${addUnit(props?.labelWidth)} auto` }
              : {}
          "
        >
          <label
            v-if="type !== 'Submit' && !hiddenLabel"
            class="text-sm font-normal leading-relaxed"
            :class="[direction === 'horizontal' ? 'text-black/60' : 'mb-1 text-black/40']"
            :for="prop"
          >
            {{ label || prop }}
          </label>
          <wd-input
            v-if="type === 'TextField'"
            v-bind="{
              ...(direction === 'vertical'
                ? verticalDefaultProps[type]
                : horizontalDefaultProps[type]),
              ...omit(props, ['labelWidth']),
            }"
            v-model="modelValue[prop]"
          ></wd-input>
          <wd-datetime-picker
            v-model="modelValue[prop]"
            v-if="type === 'TimePick'"
            v-bind="{
              ...(direction === 'vertical'
                ? verticalDefaultProps[type]
                : horizontalDefaultProps[type]),
              cell: false,
              ...props,
            }"
          />
          <wd-textarea
            v-if="type === 'Textarea'"
            v-model="modelValue[prop]"
            v-bind="{
              ...(direction === 'vertical'
                ? verticalDefaultProps[type]
                : horizontalDefaultProps[type]),
              cell: false,
              ...props,
            }"
          />
          <wd-picker
            v-if="type === 'Select'"
            v-bind="{
              ...(direction === 'vertical'
                ? verticalDefaultProps[type]
                : horizontalDefaultProps[type]),
              cell: false,
              ...props,
            }"
            v-model="modelValue[prop]"
          ></wd-picker>

          <wd-radio-group
            v-if="type === 'Radio'"
            v-bind="{
              ...(direction === 'vertical'
                ? verticalDefaultProps[type]
                : horizontalDefaultProps[type]),
              ...props,
              cell: true,
              shape: 'button',
            }"
            v-model="modelValue[prop]"
          >
            <template v-for="{ label, value } of props.columns" :key="value">
              <wd-radio :value="value">{{ label }}</wd-radio>
            </template>
          </wd-radio-group>

          <wd-checkbox-group
            v-if="type === 'Checkbox'"
            v-bind="{
              ...(direction === 'vertical'
                ? verticalDefaultProps[type]
                : horizontalDefaultProps[type]),
              ...props,
              cell: true,
              shape: 'button',
            }"
            v-model="modelValue[prop]"
          >
            <template v-for="{ label, value } of props.columns" :key="value">
              <wd-checkbox custom-class="mr-4!" :modelValue="value">{{ label }}</wd-checkbox>
            </template>
          </wd-checkbox-group>
          <wd-button
            v-if="type === 'Submit'"
            v-bind="{
              ...(direction === 'vertical' ? verticalDefaultProps[type] : {}),
              ...props,
              formType: 'submit',
            }"
            @click="submit"
          >
            <span v-if="type === 'Submit'">提交</span>
          </wd-button>
        </div>
      </template>
    </wd-form>
  </wd-config-provider>
</template>