@vrojs/element-plus 0.0.1 → 0.0.2

package/src/vro-el-schema-form/README.md

@@ -0,0 +1,207 @@
+# VroElSchemaForm
+
+### 介绍
+
+基于 `ElForm` 的 schema 表单封装。组件通过 `schema` 描述字段、布局、校验和事件，适合快速搭建中后台表单，同时保留 Element Plus Form、Row、Col、FormItem 的透传能力。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <vro-el-schema-form
+    ref="refVroElSchemaForm"
+    :schema="schema"
+    :form-props="{ labelWidth: '90px' }"
+    :col-props="{ span: 12 }"
+  />
+  <el-button type="primary" :loading="loading" @click="trigger">提交</el-button>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useVroElSchemaForm, type VroElSchemaFormInstance } from '@vrojs/element-plus'
+
+  const refVroElSchemaForm = ref<VroElSchemaFormInstance>()
+  const { schema, loading, trigger } = useVroElSchemaForm(
+    {
+      username: {
+        label: '用户名',
+        value: '',
+        is: 'ElInput',
+        rules: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
+      },
+      role: {
+        label: '角色',
+        value: '',
+        is: 'VroElSelect',
+        options: [
+          { label: '管理员', value: 'admin' },
+          { label: '运营', value: 'operator' },
+        ],
+      },
+    },
+    async (data) => {
+      console.log(data)
+    },
+    {
+      instanceRef: refVroElSchemaForm,
+    },
+  )
+</script>
+```
+
+### 动态显示
+
+```ts
+const schema = {
+  accountType: {
+    label: '账号类型',
+    value: 'personal',
+    is: 'VroElRadioGroup',
+    options: [
+      { label: '个人', value: 'personal' },
+      { label: '企业', value: 'company' },
+    ],
+  },
+  realName: {
+    label: '姓名',
+    value: '',
+    is: 'ElInput',
+    hidden: (_, __, metadata) => metadata.accountType.value !== 'personal',
+  },
+  companyName: {
+    label: '企业名称',
+    value: '',
+    is: 'ElInput',
+    hidden: (_, __, metadata) => metadata.accountType.value !== 'company',
+  },
+}
+```
+
+### 字段插槽
+
+字段的 `slots` 配置用于把外部同名插槽转发给实际渲染组件。
+
+```html
+<vro-el-schema-form :schema="schema">
+  <template #prepend>
+    <span>https://</span>
+  </template>
+</vro-el-schema-form>
+```
+
+```ts
+const schema = {
+  website: {
+    label: '网址',
+    value: '',
+    is: 'ElInput',
+    slots: {
+      prepend: 'prepend',
+    },
+  },
+}
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElSchemaFormProps" :key="key">
+      <td>{{ key }}</td>
+      <td>{{ parseType(item.type || item) }}</td>
+      <td>{{ reserve(item.default, '-') }}</td>
+    </tr>
+  </tbody>
+</table>
+
+### 插槽 Slots
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>default</td>
+      <td>表单尾部内容，会渲染在 ElRow 内部</td>
+    </tr>
+    <tr>
+      <td>schema 字段 slots 配置中的 key</td>
+      <td>转发给字段组件的插槽，插槽参数为 { item }</td>
+    </tr>
+  </tbody>
+</table>
+
+### 实例方法
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>form</td>
+      <td>ElForm 实例</td>
+    </tr>
+    <tr>
+      <td>validate</td>
+      <td>校验表单和支持 validate 的字段组件</td>
+    </tr>
+    <tr>
+      <td>validateField</td>
+      <td>校验指定字段</td>
+    </tr>
+    <tr>
+      <td>resetFields</td>
+      <td>重置表单字段</td>
+    </tr>
+    <tr>
+      <td>extractValues</td>
+      <td>提取 schema 字段值和支持 extractValues 的字段组件值</td>
+    </tr>
+    <tr>
+      <td>trigger</td>
+      <td>触发支持 trigger 的字段组件</td>
+    </tr>
+  </tbody>
+</table>
+
+### 事件 Events
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>参数</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>change-field</td>
+      <td>{ key, value }</td>
+      <td>字段 change 时触发</td>
+    </tr>
+    <tr>
+      <td>input-field</td>
+      <td>{ key, value }</td>
+      <td>字段 input 时触发</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElSchemaForm, vroElSchemaFormProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-schema-form/defineVroElSchemaFormCreateField.ts

@@ -0,0 +1,12 @@
+import type { VroElSchemaFormSchemaField } from './types'
+
+export function defineVroElSchemaFormCreateField<
+  T extends (...args: any[]) => VroElSchemaFormSchemaField,
+>(generator: T) {
+  return (options: Partial<VroElSchemaFormSchemaField> = {}, ...args: Parameters<T>) => {
+    return {
+      ...generator(...args),
+      ...options,
+    } as VroElSchemaFormSchemaField
+  }
+}

package/src/vro-el-schema-form/defineVroElSchemaFormFieldTrigger.ts

@@ -0,0 +1,9 @@
+export function defineVroElSchemaFormFieldTrigger(
+  request: (ctx: {
+    confirm: (...args: any[]) => void
+    hide: (reason?: any) => void
+    block: () => void
+  }) => any,
+) {
+  return request
+}

package/src/vro-el-schema-form/index.ts

@@ -0,0 +1,20 @@
+import { withInstall } from '@vrojs/base'
+
+import Component from './vro-el-schema-form.vue'
+
+export * from './defineVroElSchemaFormCreateField'
+export * from './defineVroElSchemaFormFieldTrigger'
+export * from './types'
+export * from './useVroElSchemaForm'
+export * from './vroElSchemaFormFieldManager'
+
+export const VroElSchemaForm = withInstall<typeof Component>(Component)
+export default VroElSchemaForm
+
+export type VroElSchemaFormInstance = InstanceType<typeof VroElSchemaForm>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VroElSchemaForm: typeof VroElSchemaForm
+  }
+}

package/src/vro-el-schema-form/style/css.ts

@@ -0,0 +1,9 @@
+import '../../style/base.scss'
+import '../../vro-el-checkbox-group/style/css'
+import '../../vro-el-file-upload/style/css'
+import '../../vro-el-image-upload/style/css'
+import '../../vro-el-radio-group/style/css'
+import '../../vro-el-select/style/css'
+import '../../vro-el-tags/style/css'
+import '../../vro-el-tree/style/css'
+import './index.scss'

package/src/vro-el-schema-form/style/deps.ts

@@ -0,0 +1,20 @@
+import '../../vro-el-checkbox-group/style/deps'
+import '../../vro-el-file-upload/style/deps'
+import '../../vro-el-image-upload/style/deps'
+import '../../vro-el-radio-group/style/deps'
+import '../../vro-el-select/style/deps'
+import '../../vro-el-tags/style/deps'
+import '../../vro-el-tree/style/deps'
+import 'element-plus/es/components/cascader/style/css'
+import 'element-plus/es/components/checkbox-group/style/css'
+import 'element-plus/es/components/col/style/css'
+import 'element-plus/es/components/date-picker/style/css'
+import 'element-plus/es/components/divider/style/css'
+import 'element-plus/es/components/form-item/style/css'
+import 'element-plus/es/components/form/style/css'
+import 'element-plus/es/components/input-number/style/css'
+import 'element-plus/es/components/input/style/css'
+import 'element-plus/es/components/radio-group/style/css'
+import 'element-plus/es/components/row/style/css'
+import 'element-plus/es/components/select/style/css'
+import 'element-plus/es/components/tree-select/style/css'

package/src/vro-el-schema-form/style/index.scss

@@ -0,0 +1,4 @@
+.vro-el-schema-form {
+  display: block;
+  width: 100%;
+}

package/src/vro-el-schema-form/style/index.ts

@@ -0,0 +1,2 @@
+import './deps'
+import './css'

package/src/vro-el-schema-form/types.ts

@@ -0,0 +1,171 @@
+import type { Arrayable } from '@vrojs/base'
+import {
+  type ColProps,
+  type FormItemProps,
+  type FormItemRule,
+  type FormProps,
+  type RowProps,
+} from 'element-plus'
+import { type ExtractPropTypes, type PropType, type Raw } from 'vue'
+
+export interface VroElSchemaFormSchemaField {
+  /**
+   * 字段渲染组件，支持内置注册名、外部注册名或组件对象。
+   */
+  is?:
+    | 'ElInput'
+    | 'ElSelect'
+    | 'ElRadioGroup'
+    | 'ElCheckboxGroup'
+    | 'ElDatePicker'
+    | 'ElInputNumber'
+    | 'ElTreeSelect'
+    | 'ElCascader'
+    | 'ElDivider'
+    | 'VroElSelect'
+    | 'VroElCheckboxGroup'
+    | 'VroElRadioGroup'
+    | 'VroElImageUpload'
+    | 'VroElFileUpload'
+    | 'VroElTags'
+    | 'VroElTree'
+    | Raw<object>
+    | (string & {})
+
+  /**
+   * 表单项标签文本。
+   */
+  label?: string
+
+  /**
+   * 字段当前值。
+   */
+  value?: any
+
+  /**
+   * 字段默认值，供外部工具生成初始值时使用。
+   */
+  defaultValue?: any
+
+  /**
+   * 字段重置值，重置的时候使用。
+   */
+  resetValue?: any
+
+  /**
+   * 透传给字段组件的属性。
+   */
+  props?: Record<string, any>
+
+  /**
+   * 字段选项列表，常用于选择器、单选、多选等组件。
+   */
+  options?: any
+
+  /**
+   * 选项展示文本字段名。
+   */
+  labelKey?: string
+
+  /**
+   * 选项绑定值字段名。
+   */
+  valueKey?: string
+
+  /**
+   * 当前字段栅格配置，会与组件级 colProps 合并。
+   */
+  colProps?: Partial<ColProps>
+
+  /**
+   * 当前字段表单项配置，会与组件级 formItemProps 合并。
+   */
+  formItemProps?: Partial<FormItemProps>
+
+  /**
+   * 从字段值转换提交值。
+   */
+  get?: (value: any, filed: VroElSchemaFormSchemaField, metadata: VroElSchemaFormSchema) => any
+
+  /**
+   * 将外部数据写入字段。
+   */
+  set?: (source: any, field: VroElSchemaFormSchemaField, metadata: VroElSchemaFormSchema) => void
+
+  /**
+   * 是否隐藏字段，支持根据当前字段和完整 schema 动态判断。
+   */
+  hidden?:
+    | boolean
+    | ((value: any, filed: VroElSchemaFormSchemaField, metadata: VroElSchemaFormSchema) => boolean)
+
+  /**
+   * 字段校验规则，透传给 ElForm rules。
+   */
+  rules?:
+    | Arrayable<FormItemRule>
+    | ((
+        value: any,
+        field: VroElSchemaFormSchemaField,
+        metadata: VroElSchemaFormSchema,
+      ) => Arrayable<FormItemRule>)
+
+  /**
+   * 字段 change 事件回调。
+   */
+  onChange?: (value: any, field: VroElSchemaFormSchemaField, metadata: VroElSchemaFormSchema) => any
+
+  /**
+   * 字段 input 事件回调。
+   */
+  onInput?: (value: any, field: VroElSchemaFormSchemaField, metadata: VroElSchemaFormSchema) => any
+
+  [key: string]: any
+}
+
+export type VroElSchemaFormSchema = Record<string, VroElSchemaFormSchemaField>
+export type VroElSchemaFormFormProps = Partial<Omit<FormProps, 'model' | 'rules'>>
+
+export const vroElSchemaFormProps = {
+  /**
+   * 透传给 ElForm 的属性，不包含 model 和 rules。
+   */
+  formProps: {
+    type: Object as PropType<VroElSchemaFormFormProps>,
+    default: () => ({}),
+  },
+
+  /**
+   * 透传给 ElRow 的属性。
+   */
+  rowProps: {
+    type: Object as PropType<Partial<RowProps>>,
+    default: () => ({}),
+  },
+
+  /**
+   * 透传给 ElCol 的默认属性，字段级 colProps 优先级更高。
+   */
+  colProps: {
+    type: Object as PropType<Partial<ColProps>>,
+    default: () => ({}),
+  },
+
+  /**
+   * 透传给 ElFormItem 的默认属性，字段级 formItemProps 优先级更高。
+   */
+  formItemProps: {
+    type: Object as PropType<Partial<FormItemProps>>,
+    default: () => ({}),
+  },
+
+  /**
+   * 表单字段 schema 配置。
+   */
+  schema: {
+    type: Object as PropType<VroElSchemaFormSchema>,
+    default: () => ({}),
+  },
+}
+
+export type VroElSchemaFormProps = ExtractPropTypes<typeof vroElSchemaFormProps>

package/src/vro-el-schema-form/useVroElSchemaForm.ts

@@ -0,0 +1,48 @@
+import banana from '@daysnap/banana'
+import { isFunction } from '@daysnap/utils'
+import { useAsyncTask } from '@vrojs/use'
+import { reactive, type Ref, ref } from 'vue'
+
+import type { VroElSchemaFormInstance } from '.'
+import type { VroElSchemaFormSchema } from './types'
+
+export function useVroElSchemaForm<T extends (data: any) => Promise<any>>(
+  rawSchema: (() => VroElSchemaFormSchema) | VroElSchemaFormSchema,
+  task?: T,
+  options: {
+    initialValue?: Record<string, any>
+    instanceRef?: Ref<VroElSchemaFormInstance | undefined>
+  } = {},
+) {
+  const { instanceRef, initialValue } = options
+  const schema = reactive(isFunction(rawSchema) ? rawSchema() : rawSchema)
+
+  const refVroElSchemaForm = instanceRef ?? ref<VroElSchemaFormInstance>()
+
+  const { loading, trigger } = useAsyncTask(
+    async () => {
+      if (!refVroElSchemaForm.value) {
+        return
+      }
+      try {
+        await refVroElSchemaForm.value.validate()
+      } catch {
+        throw ''
+      }
+      const data = await refVroElSchemaForm.value.extractValues()
+      await task?.(data)
+    },
+    { throwError: true },
+  )
+
+  if (initialValue) {
+    banana.assignment(initialValue, schema as any)
+  }
+
+  return {
+    schema,
+    refVroElSchemaForm,
+    loading,
+    trigger,
+  }
+}

package/src/vro-el-schema-form/vro-el-schema-form.vue

@@ -0,0 +1,177 @@
+<template>
+  <el-form
+    v-bind="elFormProps"
+    ref="refForm"
+    class="vro-el-schema-form"
+    :model="model"
+    :rules="rules"
+  >
+    <el-row :gutter="16" v-bind="rowProps">
+      <el-col v-for="(item, key) in metadata" :key="key" v-bind="{ ...colProps, ...item.colProps }">
+        <el-form-item
+          :label="item.label"
+          :prop="key"
+          v-bind="{ ...formItemProps, ...item.formItemProps }"
+        >
+          <component
+            v-model="item.value"
+            v-bind="mapping?.[key]?.props"
+            :is="mapping?.[key]?.is"
+            ref="refComponents"
+            @change="handleChange(key, $event)"
+            @input="handleInput(key, $event)"
+          >
+            <template v-for="(slot, key) in item.slots" #[slot] :key="slot">
+              <slot :name="key" :item="item" />
+            </template>
+          </component>
+        </el-form-item>
+      </el-col>
+      <slot></slot>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+  import banana from '@daysnap/banana'
+  import { filterEmptyValue, isFunction, isString } from '@daysnap/utils'
+  import { ElCol, ElForm, ElFormItem, ElRow } from 'element-plus'
+  import { computed, ref, useTemplateRef, watchEffect } from 'vue'
+
+  import { useLocale } from '../locale'
+  import { datePickerValueFormat } from '../utils'
+  import { defineVroElSchemaFormFieldTrigger } from './defineVroElSchemaFormFieldTrigger'
+  import { vroElSchemaFormProps, type VroElSchemaFormSchema } from './types'
+  import { vroElSchemaFormFieldManager } from './vroElSchemaFormFieldManager'
+
+  defineOptions({ name: 'VroElSchemaForm' })
+
+  const emit = defineEmits(['change-field', 'input-field'])
+  const props = defineProps(vroElSchemaFormProps)
+
+  const elFormProps = computed(() => {
+    return {
+      validateOnRuleChange: false,
+      ...props.formProps,
+    }
+  })
+
+  const { locale } = useLocale()
+
+  // 规则
+  const rules = ref<Record<string, any>>({})
+  const model = ref<Record<string, any>>({})
+  const metadata = ref<VroElSchemaFormSchema>({})
+
+  watchEffect(() => {
+    const { schema } = props
+    metadata.value = {}
+    Object.entries(schema).forEach(([key, item]) => {
+      // eslint-disable-next-line prefer-const
+      let { hidden, value, rules: itemRules, is } = item
+
+      if (isFunction(hidden)) {
+        hidden = hidden(value, item, schema)
+      }
+      if (!is) {
+        hidden = true
+      }
+      if (!hidden) {
+        model.value[key] = value
+        metadata.value[key] = item
+      }
+
+      if (isFunction(rules)) {
+        rules.value = rules(value, item, schema)
+      }
+      rules.value[key] = itemRules
+    })
+  })
+
+  const mapping = computed(() => {
+    return Object.entries(metadata.value).reduce<Record<string, any>>((res, [key, item]) => {
+      // eslint-disable-next-line prefer-const
+      let { props = {}, is, options, labelKey, valueKey } = item
+      if (isString(is)) {
+        const data = vroElSchemaFormFieldManager.get(is)
+        if (data) {
+          let loc: Record<string, any> = {}
+          if (isString(is)) {
+            loc = (locale.value.el['schemaForm'] as any)[is]
+          }
+
+          if (is === 'ElDatePicker') {
+            props.valueFormat = datePickerValueFormat[props?.type ?? 'date']
+          }
+          is = data.is
+          props = Object.assign(
+            {},
+            data.props,
+            loc,
+            filterEmptyValue({ options, labelKey, valueKey }),
+            props,
+          )
+
+          if (props.disabled) {
+            props.placeholder = '-'
+            if (is === 'ElDatePicker') {
+              props.startPlaceholder = '-'
+              props.endPlaceholder = '-'
+            }
+          }
+        }
+      }
+      res[key] = { is, props }
+      return res
+    }, {})
+  })
+
+  // 事件
+  const handleChange = async (key: string, value: any) => {
+    emit('change-field', { key, value })
+    await props.schema[key]?.onChange?.(value, props.schema[key], props.schema)
+  }
+  const handleInput = async (key: string, value: any) => {
+    emit('input-field', { key, value })
+    await props.schema[key]?.onInput?.(value, props.schema[key], props.schema)
+  }
+
+  // 校验
+  const refComponents = useTemplateRef<any[]>('refComponents')
+  const refForm = useTemplateRef('refForm')
+  const validate = async () => {
+    const instances = refComponents.value?.filter((item) => isFunction(item.validate)) ?? []
+    await Promise.all([refForm.value, ...instances].map((item) => item?.validate()))
+  }
+
+  // 获取值 这里返回异步函数 为以后可能会做校验做准备
+  const extractValues = async () => {
+    const instances = refComponents.value?.filter((item) => isFunction(item.extractValues)) ?? []
+    const results = await Promise.all<Record<string, any>[]>(
+      instances.map((item) => item.extractValues()),
+    )
+    results.push(banana.extract(props.schema as any))
+    return results.filter(Boolean).reduce<Record<string, any>>((res, item) => {
+      return { ...res, ...item }
+    }, {})
+  }
+
+  // 触发执行子组件的 trigger 事件
+  const trigger = defineVroElSchemaFormFieldTrigger(async (ctx) => {
+    const instances = refComponents.value?.filter((item) => isFunction(item.trigger)) ?? []
+    await Promise.all(instances.map((item) => item.trigger(ctx)))
+  })
+
+  defineExpose({
+    get form() {
+      return refForm.value!
+    },
+    validate,
+    resetFields: () => refForm.value?.resetFields(),
+    trigger,
+    extractValues,
+    validateField: async (key: string) => {
+      return refForm.value?.validateField(key)
+    },
+  })
+</script>