@vrojs/element-plus 0.0.2 → 0.0.4

package/src/vro-el-image-upload/vro-el-image-upload.vue

@@ -1,134 +0,0 @@
-<template>
-  <div class="vro-el-image-upload">
-    <vue-draggable
-      class="vro-el-image-upload-content"
-      :disabled="props.disabled || props.max <= 1"
-      :animation="150"
-      :model-value="computeValue"
-      filter=".vro-el-image-upload-btn"
-      @update:model-value="handleUpdate"
-    >
-      <div class="vro-el-image-upload-item" v-for="(item, index) in computeValue" :key="item">
-        <el-image
-          class="vro-el-image-upload-image"
-          v-bind="props.imageProps"
-          :src="item"
-          :preview-src-list="computeValue"
-          :initial-index="index"
-        />
-        <el-icon
-          v-if="!props.disabled"
-          class="vro-el-image-upload-clear"
-          @click="handleDelete(index)"
-        >
-          <circle-close-filled />
-        </el-icon>
-      </div>
-      <div
-        v-if="computeValue.length < props.max && !props.disabled"
-        v-loading="loading"
-        class="vro-el-image-upload-item vro-el-image-upload-btn"
-      >
-        <el-icon class="vro-el-image-upload-add"><plus /></el-icon>
-        <input type="file" accept="image/*" :multiple="props.max > 1" @change="handleUpload" />
-      </div>
-    </vue-draggable>
-    <el-checkbox v-if="!props.disabled && props.compressible" v-model="compress">
-      {{ t('imageUpload.compressText') }}
-    </el-checkbox>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { isArray, isBoolean, isUndefined, omitBy } from '@daysnap/utils'
-  import { CircleCloseFilled, Plus } from '@element-plus/icons-vue'
-  import { useAsyncTask } from '@vrojs/use'
-  import { ElCheckbox, ElIcon, ElImage, ElLoading } from 'element-plus'
-  import { computed, ref } from 'vue'
-  import { VueDraggable } from 'vue-draggable-plus'
-
-  import { useLocale } from '../locale'
-  import { type VroElImageUploadProps, vroElImageUploadProps } from './types'
-  import { getVroElImageUploadOptions } from './utils'
-
-  defineOptions({ name: 'VroElImageUpload' })
-
-  const emit = defineEmits<{
-    'update:modelValue': [value: string | string[]]
-  }>()
-  const rawProps = defineProps(vroElImageUploadProps)
-  const { t } = useLocale()
-
-  const props = computed(() => {
-    const {
-      compressible = false,
-      upload,
-      ...rest
-    } = {
-      ...getVroElImageUploadOptions(),
-      ...omitBy(rawProps, isUndefined),
-    } as VroElImageUploadProps
-
-    return {
-      upload,
-      compressible,
-      compress: isBoolean(compressible) ? compressible : compressible.value,
-      ...rest,
-    }
-  })
-
-  const vLoading = ElLoading.directive
-  const compress = ref(props.value.compress)
-
-  const computeValue = computed(() => {
-    const { modelValue } = props.value
-    return isArray(modelValue) ? modelValue : modelValue ? [modelValue] : []
-  })
-
-  const handleUpdate = (value: string[]) => {
-    if (isArray(props.value.modelValue)) {
-      emit('update:modelValue', value)
-    }
-  }
-
-  const handleDelete = (index: number) => {
-    let value: string | string[] = ''
-    if (isArray(props.value.modelValue)) {
-      value = [...props.value.modelValue]
-      value.splice(index, 1)
-    }
-    emit('update:modelValue', value)
-  }
-
-  const { loading, trigger: handleUpload } = useAsyncTask(
-    async (event: Event) => {
-      const target = event.target as HTMLInputElement
-      const files = Array.from(target.files ?? [])
-
-      target.value = ''
-      if (!files?.length) {
-        return
-      }
-
-      const { max, upload, params } = props.value
-
-      if (!upload) {
-        throw new Error('not set upload')
-      }
-
-      const res = await upload(files.slice(0, max - computeValue.value.length), {
-        compress: compress.value,
-        params,
-      })
-
-      let value: string | string[] = res[0]
-      if (isArray(props.value.modelValue)) {
-        value = [...props.value.modelValue, ...res]
-      }
-      emit('update:modelValue', value)
-    },
-    {
-      throwError: true,
-    },
-  )
-</script>

package/src/vro-el-radio-group/README.md

@@ -1,83 +0,0 @@
-# VroElRadioGroup
-
-### 介绍
-
-基于 `ElRadioGroup` 和 `ElRadio` 的选项化封装。适合通过 `options` 快速渲染单选项，同时保留 Element Plus RadioGroup 的原有属性和事件。
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <vro-el-radio-group v-model="value" :options="options" />
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-
-  const value = ref('daily')
-  const options = [
-    { label: '每天', value: 'daily' },
-    { label: '每周', value: 'weekly' },
-    { label: '每月', value: 'monthly', props: { disabled: true } },
-  ]
-</script>
-```
-
-### 自定义字段名
-
-```html
-<vro-el-radio-group 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 vroElRadioGroupProps" :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>
-    <tr>
-      <td>change</td>
-      <td>value</td>
-      <td>同 Element Plus RadioGroup change 事件</td>
-    </tr>
-  </tbody>
-</table>
-
-<script setup lang="ts">
-  import { reserve } from '@daysnap/utils'
-  import { VroElRadioGroup, vroElRadioGroupProps } from '.'
-  import { parseType } from '../utils'
-</script>

package/src/vro-el-radio-group/index.ts

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

package/src/vro-el-radio-group/style/css.ts

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

package/src/vro-el-radio-group/style/deps.ts

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

package/src/vro-el-radio-group/style/index.scss

@@ -1 +0,0 @@
-.vro-el-radio-group { }

package/src/vro-el-radio-group/style/index.ts

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

package/src/vro-el-radio-group/types.ts

@@ -1,29 +0,0 @@
-import { radioGroupProps } from 'element-plus'
-import type { ExtractPropTypes, PropType } from 'vue'
-
-export const vroElRadioGroupProps = {
-  ...radioGroupProps,
-
-  /**
-   * 选项列表，支持基础值或对象配置。
-   */
-  options: Array as PropType<any[]>,
-
-  /**
-   * 选项展示文本的字段名。
-   */
-  labelKey: {
-    type: String,
-    default: 'label',
-  },
-
-  /**
-   * 选项绑定值的字段名。
-   */
-  valueKey: {
-    type: String,
-    default: 'value',
-  },
-}
-
-export type VroElRadioGroupProps = ExtractPropTypes<typeof vroElRadioGroupProps>

package/src/vro-el-radio-group/vro-el-radio-group.vue

@@ -1,34 +0,0 @@
-<template>
-  <el-radio-group
-    v-bind="restProps"
-    class="vro-el-radio-group"
-    @update:model-value="$emit('update:modelValue', $event)"
-    @change="$emit('change', $event)"
-  >
-    <el-radio
-      v-for="(option, index) in options"
-      v-bind="option.props"
-      :key="index"
-      :value="option[valueKey || 'value'] ?? option"
-    >
-      {{ option[labelKey || 'label'] ?? option }}
-    </el-radio>
-  </el-radio-group>
-</template>
-
-<script setup lang="ts">
-  import { pick } from '@daysnap/utils'
-  import { ElRadio, ElRadioGroup, radioGroupProps } from 'element-plus'
-  import { computed } from 'vue'
-
-  import { vroElRadioGroupProps } from './types'
-
-  defineOptions({ name: 'VroElRadioGroup' })
-
-  defineEmits(['update:modelValue', 'change'])
-  const props = defineProps(vroElRadioGroupProps)
-
-  const restProps = computed(() => {
-    return pick(props, Object.keys(radioGroupProps) as any[])
-  })
-</script>

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

@@ -1,146 +0,0 @@
-# VroElSchemaFilter
-
-### 介绍
-
-基于 `VroElSchemaForm` 的筛选表单组件。组件会根据 `schema` 渲染筛选项，并内置搜索、重置按钮，适合列表页、表格页的查询条件区域。
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <vro-el-schema-filter
-    :schema="schema"
-    :form-props="{ labelWidth: '90px' }"
-    @query="handleQuery"
-    @reset="handleReset"
-  />
-</template>
-
-<script setup lang="ts">
-  import { ref } from 'vue'
-  import type { VroElSchemaFormSchema } from '@vrojs/element-plus'
-
-  const schema = ref<VroElSchemaFormSchema>({
-    keyword: {
-      label: '关键词',
-      value: '',
-      is: 'ElInput',
-      props: {
-        placeholder: '请输入关键词',
-      },
-    },
-    status: {
-      label: '状态',
-      value: '',
-      defaultValue: '',
-      is: 'VroElSelect',
-      options: [
-        { label: '启用', value: 'enabled' },
-        { label: '停用', value: 'disabled' },
-      ],
-    },
-  })
-
-  const handleQuery = (value) => {
-    console.log(value)
-  }
-
-  const handleReset = () => {
-    console.log('reset')
-  }
-</script>
-```
-
-### 重置默认值
-
-字段存在 `defaultValue` 时，点击重置会恢复为 `defaultValue`；否则会根据当前值类型重置为空字符串、空数组或空对象。
-
-```ts
-const schema = {
-  type: {
-    label: '类型',
-    value: 'all',
-    defaultValue: 'all',
-    is: 'VroElRadioGroup',
-    options: [
-      { label: '全部', value: 'all' },
-      { label: '个人', value: 'personal' },
-      { label: '企业', value: 'company' },
-    ],
-  },
-}
-```
-
-### 自定义按钮区域
-
-默认插槽会追加到搜索、重置按钮后面。
-
-```html
-<vro-el-schema-filter :schema="schema">
-  <el-button>导出</el-button>
-</vro-el-schema-filter>
-```
-
-## API
-
-### 属性 Props
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>类型</td>
-      <td>默认值</td>
-    </tr>
-    <tr v-for="(item, key) in vroElSchemaFilterProps" :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>搜索、重置按钮后的自定义内容</td>
-    </tr>
-  </tbody>
-</table>
-
-### 事件 Events
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>参数</td>
-      <td>说明</td>
-    </tr>
-    <tr>
-      <td>query</td>
-      <td>value</td>
-      <td>点击搜索或回车查询时触发，参数为过滤空值后的表单值</td>
-    </tr>
-    <tr>
-      <td>reset</td>
-      <td>-</td>
-      <td>点击重置时触发</td>
-    </tr>
-  </tbody>
-</table>
-
-<script setup lang="ts">
-  import { reserve } from '@daysnap/utils'
-  import { VroElSchemaFilter, vroElSchemaFilterProps } from '.'
-  import { parseType } from '../utils'
-</script>

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

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

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

@@ -1,3 +0,0 @@
-import '../../style/base.scss'
-import '../../vro-el-schema-form/style/css'
-import './index.scss'

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

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

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

@@ -1,20 +0,0 @@
-.vro-el-schema-filter {
-  display: block;
-  box-sizing: border-box;
-  overflow: hidden;
-  padding: 0 16px 16px;
-  background-color: var(--el-bg-color);
-  .el-form-item__label {
-    display: flex;
-    align-items: center;
-    text-align: right;
-    line-height: 1.1;
-    margin-bottom: 0;
-  }
-  .el-form-item {
-    margin-bottom: 0;
-  }
-  .el-col {
-    margin-top: 16px;
-  }
-}

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

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

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

@@ -1,31 +0,0 @@
-import type { ColProps } from 'element-plus'
-import type { ExtractPropTypes, PropType } from 'vue'
-
-import { vroElSchemaFormProps } from '../vro-el-schema-form'
-
-export const vroElSchemaFilterProps = {
-  ...vroElSchemaFormProps,
-
-  /**
-   * 筛选项默认栅格配置。
-   */
-  colProps: {
-    type: Object as PropType<Partial<ColProps>>,
-    default: () => ({ span: 8 }),
-  },
-
-  /**
-   * 表单标签宽度，透传给内部 VroElSchemaForm。
-   */
-  labelWidth: {
-    type: [String, Number] as PropType<string | number>,
-    default: '120px',
-  },
-
-  /**
-   * 查询和重置按钮 loading 状态。
-   */
-  loading: Boolean,
-}
-
-export type VroElSchemaFilterProps = ExtractPropTypes<typeof vroElSchemaFilterProps>

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

@@ -1,64 +0,0 @@
-<template>
-  <vro-el-schema-form
-    v-bind="props"
-    ref="refVroElSchemaForm"
-    class="vro-el-schema-filter"
-    @submit.prevent
-    @keyup.enter="handleQuery"
-  >
-    <el-col v-bind="colProps">
-      <el-form-item v-bind="formItemProps">
-        <el-button type="primary" :icon="Search" :loading="loading" @click="handleQuery">
-          {{ t('schemaFilter.searchText') }}
-        </el-button>
-        <el-button :icon="RefreshRight" :loading="loading" @click="handleReset">
-          {{ t('schemaFilter.resetText') }}
-        </el-button>
-        <slot></slot>
-      </el-form-item>
-    </el-col>
-  </vro-el-schema-form>
-</template>
-
-<script setup lang="ts">
-  import { filterEmptyValue, isArray, isFunction, isObject, isUndefined } from '@daysnap/utils'
-  import { RefreshRight, Search } from '@element-plus/icons-vue'
-  import { ElButton, ElCol, ElFormItem } from 'element-plus'
-  import { useTemplateRef } from 'vue'
-
-  import { useLocale } from '../locale'
-  import { VroElSchemaForm } from '../vro-el-schema-form'
-  import { vroElSchemaFilterProps } from './types'
-
-  defineOptions({ name: 'VroElSchemaFilter' })
-
-  const emit = defineEmits(['query', 'reset'])
-  const props = defineProps(vroElSchemaFilterProps)
-  const { t } = useLocale()
-
-  const refVroElSchemaForm = useTemplateRef('refVroElSchemaForm')
-
-  const handleQuery = async () => {
-    const data = (await refVroElSchemaForm.value?.extractValues()) ?? {}
-    emit('query', filterEmptyValue(data, true))
-  }
-  const handleReset = () => {
-    Object.values(props.schema).forEach((filed) => {
-      // eslint-disable-next-line prefer-const
-      let { value, resetValue } = filed
-      if (!isUndefined(resetValue)) {
-        value = isFunction(resetValue) ? resetValue(value) : resetValue
-      } else if (isArray(value)) {
-        value = []
-      } else if (isObject(value)) {
-        value = {}
-      } else {
-        value = ''
-      }
-      filed.value = value
-    })
-    refVroElSchemaForm.value?.resetFields()
-    emit('reset')
-    handleQuery()
-  }
-</script>