@vrojs/element-plus 0.0.2 → 0.0.4

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

@@ -1,207 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

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

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

@@ -1,171 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,177 +0,0 @@
-<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>