@vrojs/element-plus 0.0.2 → 0.0.4

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

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

@@ -1,173 +0,0 @@
-# VroElSchemaFormDialog
-
-### 介绍
-
-基于 `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
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>类型</td>
-      <td>默认值</td>
-    </tr>
-    <tr v-for="(item, key) in vroElSchemaFormDialogProps" :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>透传给内部 VroElSchemaForm 的默认插槽</td>
-    </tr>
-  </tbody>
-</table>
-
-### 实例方法
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>说明</td>
-    </tr>
-    <tr>
-      <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>
-
-<script setup lang="ts">
-  import { reserve } from '@daysnap/utils'
-  import { VroElSchemaFormDialog, vroElSchemaFormDialogProps } from '.'
-  import { parseType } from '../utils'
-</script>

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

@@ -1,20 +0,0 @@
-import { showComponent } from '@vrojs/base'
-import { type AppContext, markRaw } from 'vue'
-
-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(
-    VroElWithConfig,
-    {
-      ...props,
-      is: markRaw(VroElSchemaFormDialog),
-    },
-    appContext,
-  )
-}

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

@@ -1,22 +0,0 @@
-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, (app) => {
-  app.component((Component as any).name, Component)
-  ;(Component as any)._context = app._context
-})
-export default VroElSchemaFormDialog
-
-export type VroElSchemaFormDialogInstance = InstanceType<typeof VroElSchemaFormDialog>
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    VroElSchemaFormDialog: typeof VroElSchemaFormDialog
-  }
-}

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

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

@@ -1,4 +0,0 @@
-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,4 +0,0 @@
-.vro-el-schema-form-dialog {
-  --el-dialog-width: 520px;
-  width: var(--el-dialog-width);
-}

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

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

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

@@ -1,73 +0,0 @@
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-
-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

@@ -1,52 +0,0 @@
-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,142 +0,0 @@
-<template>
-  <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 { 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 { useLocale } from '../locale'
-  import { VroElSchemaForm, vroElSchemaFormProps } from '../vro-el-schema-form'
-  import { vroElSchemaFormDialogInjectionKey } from './injection'
-  import { type VroElSchemaFormDialogProps, vroElSchemaFormDialogProps } from './types'
-
-  defineOptions({ name: 'VroElSchemaFormDialog' })
-
-  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) => {
-      dynamicProps.value = options
-    },
-    hideCallback: (reason) => emit('cancel', reason),
-    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,
-  })
-</script>

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

@@ -1,83 +0,0 @@
-# VroElSelect
-
-### 介绍
-
-基于 `ElSelect` 和 `ElOption` 的选项化封装。适合通过 `options` 快速渲染下拉选项，同时保留 Element Plus Select 的原有属性和事件。
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <vro-el-select v-model="value" :options="options" placeholder="请选择" />
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-
-  const value = ref('')
-  const options = [
-    { label: '苹果', value: 'apple' },
-    { label: '香蕉', value: 'banana' },
-    { label: '橙子', value: 'orange', props: { disabled: true } },
-  ]
-</script>
-```
-
-### 自定义字段名
-
-```html
-<vro-el-select v-model="value" :options="options" label-key="name" value-key="id" />
-```
-
-## API
-
-### 属性 Props
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>类型</td>
-      <td>默认值</td>
-    </tr>
-    <tr v-for="(item, key) in vroElSelectProps" :key="key">
-      <td>{{ key }}</td>
-      <td>{{ parseType(item.type || item) }}</td>
-      <td>{{ reserve(item.default, '-') }}</td>
-    </tr>
-  </tbody>
-</table>
-
-### 插槽 Slots
-
-支持默认插槽，传入后会作为 `ElSelect` 的内容，覆盖 `options` 自动渲染的选项。
-
-### 事件 Events
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>参数</td>
-      <td>说明</td>
-    </tr>
-    <tr>
-      <td>update:modelValue</td>
-      <td>value</td>
-      <td>选中值变化时触发</td>
-    </tr>
-    <tr>
-      <td>change</td>
-      <td>value</td>
-      <td>同 Element Plus Select change 事件</td>
-    </tr>
-  </tbody>
-</table>
-
-<script setup lang="ts">
-  import { reserve } from '@daysnap/utils'
-  import { VroElSelect, vroElSelectProps } from '.'
-  import { parseType } from '../utils'
-</script>

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

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

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

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

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

@@ -1,2 +0,0 @@
-import 'element-plus/es/components/option/style/css'
-import 'element-plus/es/components/select/style/css'

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

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

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

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