@vrojs/element-plus 0.0.1 → 0.0.2

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

@@ -0,0 +1,59 @@
+import { ComponentManager } from '@vrojs/base'
+import {
+  ElCascader,
+  ElCheckboxGroup,
+  ElDatePicker,
+  ElDivider,
+  ElInput,
+  ElInputNumber,
+  ElRadioGroup,
+  ElSelect,
+  ElTreeSelect,
+} from 'element-plus'
+
+import { VroElCheckboxGroup } from '../vro-el-checkbox-group'
+import { VroElFileUpload } from '../vro-el-file-upload'
+import { VroElImageUpload } from '../vro-el-image-upload'
+import { VroElRadioGroup } from '../vro-el-radio-group'
+import { VroElSelect } from '../vro-el-select'
+import { VroElTags } from '../vro-el-tags'
+import { VroElTree } from '../vro-el-tree'
+
+export const vroElSchemaFormFieldManager = new ComponentManager()
+
+// 注册
+vroElSchemaFormFieldManager
+  .add('ElInput', ElInput, {
+    clearable: true,
+    showWordLimit: true,
+    autosize: { minRows: 2 },
+  })
+  .add('ElSelect', ElSelect, {
+    clearable: true,
+    filterable: true,
+  })
+  .add('ElRadioGroup', ElRadioGroup)
+  .add('ElCheckboxGroup', ElCheckboxGroup)
+  .add('ElDatePicker', ElDatePicker, {
+    type: 'date',
+    clearable: true,
+  })
+  .add('ElInputNumber', ElInputNumber)
+  .add('ElTreeSelect', ElTreeSelect)
+  .add('ElCascader', ElCascader, {
+    clearable: true,
+    validateEvent: false,
+  })
+  .add('ElDivider', ElDivider, {
+    contentPosition: 'center',
+  })
+  .add('VroElSelect', VroElSelect, {
+    clearable: true,
+    filterable: true,
+  })
+  .add('VroElCheckboxGroup', VroElCheckboxGroup)
+  .add('VroElRadioGroup', VroElRadioGroup)
+  .add('VroElImageUpload', VroElImageUpload)
+  .add('VroElFileUpload', VroElFileUpload)
+  .add('VroElTags', VroElTags)
+  .add('VroElTree', VroElTree)

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

@@ -2,12 +2,76 @@
 
 ### 介绍
 
-...
+基于 `ElDialog` 和 `VroElSchemaForm` 的弹窗表单组件。组件内置校验、提交 loading、确认/取消按钮，适合编辑、新建等弹窗表单场景，也支持通过函数方式调用。
 
 ## 代码演示
 
 ### 基础用法
 
+```html
+<template>
+  <el-button type="primary" @click="openDialog">打开弹窗</el-button>
+  <vro-el-schema-form-dialog
+    ref="dialogRef"
+    title="编辑用户"
+    :schema="schema"
+    :request="handleRequest"
+    @confirm="handleConfirm"
+  />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import type { VroElSchemaFormDialogInstance, VroElSchemaFormSchema } from '@vrojs/element-plus'
+
+  const dialogRef = ref<VroElSchemaFormDialogInstance>()
+  const schema = ref<VroElSchemaFormSchema>({
+    username: {
+      label: '用户名',
+      value: '',
+      is: 'ElInput',
+      rules: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
+    },
+  })
+
+  const openDialog = () => {
+    dialogRef.value?.show()
+  }
+
+  const handleRequest = async (data) => {
+    return data
+  }
+
+  const handleConfirm = (data) => {
+    console.log(data)
+  }
+</script>
+```
+
+### 函数调用
+
+```ts
+import { showVroElSchemaFormDialog } from '@vrojs/element-plus'
+
+const data = await showVroElSchemaFormDialog({
+  title: '新建用户',
+  schema,
+  request: async (value) => value,
+})
+```
+
+### 自定义底部按钮文本
+
+```html
+<vro-el-schema-form-dialog
+  ref="dialogRef"
+  title="编辑用户"
+  confirm-button-text="保存"
+  cancel-button-text="关闭"
+  :schema="schema"
+/>
+```
+
 ## API
 
 ### 属性 Props
@@ -36,8 +100,8 @@
       <td>说明</td>
     </tr>
     <tr>
-      <td>xx</td>
-      <td>xxx</td>
+      <td>default</td>
+      <td>透传给内部 VroElSchemaForm 的默认插槽</td>
     </tr>
   </tbody>
 </table>
@@ -51,8 +115,53 @@
       <td>说明</td>
     </tr>
     <tr>
-      <td>xx</td>
-      <td>xxx</td>
+      <td>schemaFormInstance</td>
+      <td>内部 VroElSchemaForm 实例</td>
+    </tr>
+    <tr>
+      <td>show</td>
+      <td>打开弹窗，支持传入动态 props</td>
+    </tr>
+    <tr>
+      <td>hide</td>
+      <td>关闭弹窗</td>
+    </tr>
+  </tbody>
+</table>
+
+### 事件 Events
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>参数</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>confirm</td>
+      <td>data</td>
+      <td>确认成功后触发</td>
+    </tr>
+    <tr>
+      <td>cancel</td>
+      <td>reason</td>
+      <td>关闭弹窗时触发</td>
+    </tr>
+    <tr>
+      <td>closed</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>

package/src/vro-el-schema-form-dialog/function-call.ts

@@ -1,12 +1,20 @@
 import { showComponent } from '@vrojs/base'
-import { AppContext } from 'vue'
+import { type AppContext, markRaw } from 'vue'
 
-import { VroElSchemaFormDialogProps } from './types'
+import VroElWithConfig from '../vro-el-with-config'
+import type { VroElSchemaFormDialogProps } from './types'
 import VroElSchemaFormDialog from './vro-el-schema-form-dialog.vue'
 
 export function showVroElSchemaFormDialog<T = any>(
   props: Partial<VroElSchemaFormDialogProps>,
   appContext: AppContext | null = null,
 ): Promise<T> {
-  return showComponent(VroElSchemaFormDialog, props, appContext)
+  return showComponent(
+    VroElWithConfig,
+    {
+      ...props,
+      is: markRaw(VroElSchemaFormDialog),
+    },
+    appContext,
+  )
 }

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

@@ -3,9 +3,14 @@ import { withInstall } from '@vrojs/base'
 import Component from './vro-el-schema-form-dialog.vue'
 
 export * from './function-call'
+export * from './injection'
 export * from './types'
+export * from './useVroElSchemaFormDialog'
 
-export const VroElSchemaFormDialog = withInstall<typeof Component>(Component)
+export const VroElSchemaFormDialog = withInstall<typeof Component>(Component, (app) => {
+  app.component((Component as any).name, Component)
+  ;(Component as any)._context = app._context
+})
 export default VroElSchemaFormDialog
 
 export type VroElSchemaFormDialogInstance = InstanceType<typeof VroElSchemaFormDialog>

package/src/vro-el-schema-form-dialog/injection.ts

@@ -0,0 +1,10 @@
+import { inject, type InjectionKey } from 'vue'
+
+export const vroElSchemaFormDialogInjectionKey = Symbol() as InjectionKey<{
+  confirm: (...args: any[]) => Promise<void>
+  hide: (reason?: any) => Promise<void>
+}>
+
+export function useVroElSchemaFormDialogInstance() {
+  return inject(vroElSchemaFormDialogInjectionKey, null)
+}

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

@@ -1,2 +1,4 @@
 import '../../style/base.scss'
+import '../../vro-el-schema-form/style/css'
+import '../../vro-el-with-config/style/css'
 import './index.scss'

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

@@ -0,0 +1,4 @@
+import '../../vro-el-schema-form/style/deps'
+import '../../vro-el-with-config/style/deps'
+import 'element-plus/es/components/button/style/css'
+import 'element-plus/es/components/dialog/style/css'

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

@@ -1 +1,4 @@
-.vro-el-schema-form-dialog { }
+.vro-el-schema-form-dialog {
+  --el-dialog-width: 520px;
+  width: var(--el-dialog-width);
+}

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

@@ -1,5 +1,73 @@
-import type { ExtractPropTypes } from 'vue'
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
 
-export const vroElSchemaFormDialogProps = {}
+import { vroElSchemaFormProps, type VroElSchemaFormSchema } from '../vro-el-schema-form'
+
+export interface VroElSchemaFormDialogRequest {
+  (data: any, schema: VroElSchemaFormSchema): Promise<any>
+}
+
+export const vroElSchemaFormDialogProps = {
+  ...vroElSchemaFormProps,
+
+  /**
+   * 弹窗标题。
+   */
+  title: String,
+
+  /**
+   * 弹窗样式。
+   */
+  style: {
+    type: Object as PropType<CSSProperties>,
+    default: () => ({}),
+  },
+
+  /**
+   * 确认前的提交请求，返回值会作为 confirm 事件参数。
+   */
+  request: Function as PropType<VroElSchemaFormDialogRequest>,
+
+  /**
+   * 表单标签位置。
+   */
+  labelPosition: {
+    type: String as PropType<'left' | 'right' | 'top'>,
+    default: 'top',
+  },
+
+  /**
+   * 表单标签宽度。
+   */
+  labelWidth: {
+    type: String,
+    default: '120px',
+  },
+
+  /**
+   * 是否显示取消按钮。
+   */
+  showCancelButton: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * 是否显示确认按钮。
+   */
+  showConfirmButton: {
+    type: Boolean,
+    default: true,
+  },
+
+  /**
+   * 取消按钮文本。
+   */
+  cancelButtonText: String,
+
+  /**
+   * 确认按钮文本。
+   */
+  confirmButtonText: String,
+}
 
 export type VroElSchemaFormDialogProps = ExtractPropTypes<typeof vroElSchemaFormDialogProps>

package/src/vro-el-schema-form-dialog/useVroElSchemaFormDialog.ts

@@ -0,0 +1,52 @@
+import banana from '@daysnap/banana'
+import { getCurrentInstance, type Ref, ref } from 'vue'
+
+import type { VroElSchemaFormSchema, VroElSchemaFormSchemaField } from '../vro-el-schema-form'
+import { showVroElSchemaFormDialog } from './function-call'
+
+export interface UseVroElSchemaFormDialogOptions<S extends VroElSchemaFormSchema> {
+  instanceRef?: Ref<any>
+  onGenerate?: (schema: S, ...args: any[]) => void
+  onSuccess?: (schema: S, ...args: any[]) => void
+}
+
+export interface UseVroElSchemaFormDialogInstance {
+  show: typeof showVroElSchemaFormDialog
+}
+
+export function useVroElSchemaFormDialog<
+  T extends VroElSchemaFormSchema,
+  S extends VroElSchemaFormSchema = { [P in keyof T]: VroElSchemaFormSchemaField },
+>(
+  generator: () => T | Promise<T>,
+  task: (schema: S, instance: UseVroElSchemaFormDialogInstance, ...args: any[]) => Promise<any>,
+  options: UseVroElSchemaFormDialogOptions<S> = {},
+) {
+  const { onGenerate, onSuccess, instanceRef } = options
+
+  const schema = ref<S>()
+
+  const instance = getCurrentInstance()
+
+  const trigger = async (...args: any[]) => {
+    schema.value = (await generator()) as unknown as S
+    if (args[0]) {
+      banana.assignment(args[0], schema.value as any)
+    }
+
+    onGenerate?.(schema.value as any, ...args)
+
+    await task(
+      schema.value,
+      instanceRef?.value ?? {
+        show: (props, appContext) =>
+          showVroElSchemaFormDialog(props, appContext ?? instance?.appContext),
+      },
+      ...args,
+    )
+
+    onSuccess?.(schema.value as any, ...args)
+  }
+
+  return [schema, trigger] as const
+}

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

@@ -1,20 +1,77 @@
 <template>
-  <el-dialog v-model="visible" class="vro-el-schema-form-dialog">
-    <span>vro-el-schema-form-dialog</span>
+  <el-dialog
+    v-model="visible"
+    ref="containerRef"
+    class="vro-el-schema-form-dialog"
+    :class="[id]"
+    :title="computedProps.title"
+    destroy-on-close
+    append-to-body
+    :close-on-click-modal="false"
+    :style="computedProps.style"
+    @close="hide()"
+    @closed="$emit('closed')"
+  >
+    <vro-el-schema-form
+      v-bind="schemaFormProps"
+      ref="refVroElSchemaForm"
+      @change-field="$emit('change-field', $event)"
+      @input-field="$emit('input-field', $event)"
+      @submit.prevent="handleSubmit()"
+    >
+      <slot></slot>
+    </vro-el-schema-form>
+
+    <template v-if="computedProps.showCancelButton || computedProps.showConfirmButton" #footer>
+      <span class="dialog-footer">
+        <el-button v-if="computedProps.showCancelButton" @click="hide('cancel')">
+          {{ computedProps.cancelButtonText || t('schemaFormDialog.cancelText') }}
+        </el-button>
+        <el-button
+          v-if="computedProps.showConfirmButton"
+          type="primary"
+          @click="handleSubmit"
+          :loading="loading"
+        >
+          {{ computedProps.confirmButtonText || t('schemaFormDialog.confirmText') }}
+        </el-button>
+      </span>
+    </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-  import { useVisible } from '@vrojs/use'
-  import { ref } from 'vue'
+  import { getRandom, pick } from '@daysnap/utils'
+  import { useAsyncTask, useVisible } from '@vrojs/use'
+  import { ElButton, ElDialog } from 'element-plus'
+  import { computed, nextTick, provide, ref, useTemplateRef, watch } from 'vue'
 
-  import { VroElSchemaFormDialogProps, vroElSchemaFormDialogProps } from './types'
+  import { useLocale } from '../locale'
+  import { VroElSchemaForm, vroElSchemaFormProps } from '../vro-el-schema-form'
+  import { vroElSchemaFormDialogInjectionKey } from './injection'
+  import { type VroElSchemaFormDialogProps, vroElSchemaFormDialogProps } from './types'
 
   defineOptions({ name: 'VroElSchemaFormDialog' })
-  defineProps(vroElSchemaFormDialogProps)
-  const emit = defineEmits(['cancel', 'confirm'])
 
-  const dynamicProps = ref<any>()
+  const emit = defineEmits(['change-field', 'input-field', 'cancel', 'confirm', 'closed'])
+
+  const props = defineProps(vroElSchemaFormDialogProps)
+  const { t } = useLocale()
+  const dynamicProps = ref<Partial<VroElSchemaFormDialogProps>>()
+  const computedProps = computed<VroElSchemaFormDialogProps>(() =>
+    Object.assign({}, props, dynamicProps.value),
+  )
+  const schemaFormProps = computed(() => {
+    const value = pick(computedProps.value, Object.keys(vroElSchemaFormProps) as any)
+    return {
+      ...value,
+      formProps: {
+        labelPosition: computedProps.value.labelPosition,
+        labelWidth: computedProps.value.labelWidth,
+        ...value.formProps,
+      },
+    }
+  })
 
   const { show, hide, confirm, visible } = useVisible<Partial<VroElSchemaFormDialogProps>, any>({
     showCallback: (options) => {
@@ -24,9 +81,62 @@
     confirmCallback: (data) => emit('confirm', data),
   })
 
+  const id = `id_${getRandom(10)}`
+  watch(visible, (v) => {
+    if (v) {
+      nextTick(() => {
+        const els = document.querySelectorAll(`.${id}`)
+        if (els.length) {
+          els.forEach((el) => (el.parentElement!.scrollTop = 0))
+        }
+      })
+    }
+  })
+
+  const refVroElSchemaForm = useTemplateRef('refVroElSchemaForm')
+  const { loading, trigger: handleSubmit } = useAsyncTask(
+    async () => {
+      if (!refVroElSchemaForm.value) {
+        throw new Error('not fond VroElSchemaForm')
+      }
+      await refVroElSchemaForm.value.validate().catch(() => {
+        throw 'cancel'
+      })
+
+      // 执行方法
+      let isBlock = false
+      await refVroElSchemaForm.value.trigger({
+        confirm,
+        hide,
+        block: () => {
+          isBlock = true
+          setTimeout(() => (isBlock = true))
+        },
+      })
+
+      if (visible.value && !isBlock) {
+        // 获取数据
+        const data = await refVroElSchemaForm.value.extractValues()
+        const result = (await computedProps.value.request?.(data, props.schema!)) ?? data
+
+        confirm(result)
+      }
+    },
+    {
+      throwError: true,
+    },
+  )
+
+  provide(vroElSchemaFormDialogInjectionKey, {
+    confirm,
+    hide,
+  })
+
   defineExpose({
+    get schemaFormInstance() {
+      return refVroElSchemaForm.value!
+    },
     show,
     hide,
-    confirm,
   })
 </script>

package/src/vro-el-tags/README.md

@@ -0,0 +1,73 @@
+# VroElTags
+
+### 介绍
+
+基于 `ElTag`、`ElInput` 和 `ElButton` 的标签编辑组件。支持通过 `v-model` 新增、删除标签，也可以设置为只读禁用状态。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <vro-el-tags v-model="value" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const value = ref(['Vue', 'Element Plus'])
+</script>
+```
+
+### 禁用状态
+
+```html
+<vro-el-tags v-model="value" disabled />
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElTagsProps" :key="key">
+      <td>{{ key }}</td>
+      <td>{{ parseType(item.type || item) }}</td>
+      <td>{{ reserve(item.default, '-') }}</td>
+    </tr>
+  </tbody>
+</table>
+
+### 插槽 Slots
+
+暂无。
+
+### 事件 Events
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>参数</td>
+      <td>说明</td>
+    </tr>
+    <tr>
+      <td>update:modelValue</td>
+      <td>value</td>
+      <td>标签列表变化时触发</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElTags, vroElTagsProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-tags/index.ts

@@ -0,0 +1,16 @@
+import { withInstall } from '@vrojs/base'
+
+import Component from './vro-el-tags.vue'
+
+export * from './types'
+
+export const VroElTags = withInstall<typeof Component>(Component)
+export default VroElTags
+
+export type VroElTagsInstance = InstanceType<typeof VroElTags>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VroElTags: typeof VroElTags
+  }
+}

package/src/vro-el-tags/style/css.ts

@@ -0,0 +1,2 @@
+import '../../style/base.scss'
+import './index.scss'

package/src/vro-el-tags/style/deps.ts

@@ -0,0 +1,3 @@
+import 'element-plus/es/components/button/style/css'
+import 'element-plus/es/components/input/style/css'
+import 'element-plus/es/components/tag/style/css'

package/src/vro-el-tags/style/index.scss

@@ -0,0 +1 @@
+.vro-el-tags { }

package/src/vro-el-tags/style/index.ts

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

package/src/vro-el-tags/types.ts

@@ -0,0 +1,21 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export const vroElTagsProps = {
+  /**
+   * 标签列表。
+   */
+  modelValue: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+
+  /**
+   * 是否禁用新增和删除标签。
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+export type VroElTagsProps = ExtractPropTypes<typeof vroElTagsProps>