@vrojs/element-plus 0.0.1

package/src/vro-el-file-upload/types.ts

@@ -0,0 +1,50 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export interface VroElFileUploadCallback<T = any> {
+  (
+    files: File[],
+    options: {
+      params: T
+    },
+  ): Promise<string[]>
+}
+
+export const vroElFileUploadProps = {
+  /**
+   * 绑定值。单文件时可传字符串，多文件时传字符串数组。
+   */
+  modelValue: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '',
+  },
+
+  /**
+   * 原生文件选择 accept 属性。
+   */
+  accept: String,
+
+  /**
+   * 最大上传数量。
+   */
+  max: {
+    type: Number,
+    default: 1,
+  },
+
+  /**
+   * 是否禁用上传和删除。
+   */
+  disabled: Boolean,
+
+  /**
+   * 上传时透传给 upload 回调的自定义参数。
+   */
+  params: Object as PropType<Record<string, any>>,
+
+  /**
+   * 上传回调，接收本次选择的文件列表，返回文件访问地址列表。
+   */
+  upload: Function as PropType<VroElFileUploadCallback>,
+}
+
+export type VroElFileUploadProps = ExtractPropTypes<typeof vroElFileUploadProps>

package/src/vro-el-file-upload/utils.ts

@@ -0,0 +1,7 @@
+import { createFactory } from '@daysnap/utils'
+
+import type { VroElFileUploadProps } from './types'
+
+export const [setVroElFileUploadOptions, getVroElFileUploadOptions] = createFactory<
+  Partial<Pick<VroElFileUploadProps, 'upload'>>
+>({})

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="vro-el-file-upload">
+    <el-button
+      v-if="computeValue.length < max && !disabled"
+      class="vro-el-file-upload-btn"
+      :loading="loading"
+      :disabled="disabled"
+      type="primary"
+      icon="upload"
+    >
+      {{ t('fileUpload.btnText') }}
+      <input type="file" :accept="accept" :multiple="max > 1" @change="handleUpload" />
+    </el-button>
+
+    <ul class="vro-el-file-upload-content">
+      <li class="vro-el-file-upload-item" v-for="(item, index) in computeValue" :key="index">
+        <a :href="item" target="_blank">{{ item }}</a>
+        <el-icon v-if="!disabled" @click="handleDelete(index)">
+          <circle-close-filled />
+        </el-icon>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { isArray, isUndefined, omitBy } from '@daysnap/utils'
+  import { CircleCloseFilled } from '@element-plus/icons-vue'
+  import { useAsyncTask } from '@vrojs/use'
+  import { ElButton, ElIcon } from 'element-plus'
+  import { computed } from 'vue'
+
+  import { useLocale } from '../locale'
+  import { type VroElFileUploadProps, vroElFileUploadProps } from './types'
+  import { getVroElFileUploadOptions } from './utils'
+
+  defineOptions({ name: 'VroElFileUpload' })
+
+  const emit = defineEmits<{
+    (event: 'update:modelValue', value: string | string[]): void
+  }>()
+
+  const rawProps = defineProps(vroElFileUploadProps)
+
+  const { t } = useLocale()
+
+  const props = computed(() => {
+    return {
+      ...getVroElFileUploadOptions(),
+      ...omitBy(rawProps, isUndefined),
+    } as VroElFileUploadProps
+  })
+
+  const computeValue = computed(() => {
+    const { modelValue } = props.value
+    return isArray(modelValue) ? modelValue : modelValue ? [modelValue] : []
+  })
+
+  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 { modelValue, max, upload, params } = props.value
+
+      if (!upload) {
+        throw new Error('not set upload')
+      }
+
+      const res = await upload(files.slice(0, max - computeValue.value.length), { params })
+
+      let value: string | string[] = res[0]
+      if (isArray(modelValue)) {
+        value = [...modelValue, ...res]
+      }
+      emit('update:modelValue', value)
+    },
+    {
+      throwError: true,
+    },
+  )
+</script>

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

@@ -0,0 +1,68 @@
+# VroElIcon
+
+### 介绍
+
+基于 `ElIcon` 的图标封装。`name` 传入 Element Plus 图标组件或大写组件名时按组件渲染，传入普通字符串时按 `iconfont` 类名渲染。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <vro-el-icon :name="Search" />
+  <vro-el-icon name="icon-search" />
+</template>
+
+<script setup lang="ts">
+  import { Search } from '@element-plus/icons-vue'
+</script>
+```
+
+### 使用插槽
+
+```html
+<vro-el-icon>
+  <search />
+</vro-el-icon>
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElIconProps" :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>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElIcon, vroElIconProps } from '.'
+  import { parseType } from '../utils'
+</script>

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

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

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

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

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

@@ -0,0 +1 @@
+import 'element-plus/es/components/icon/style/css'

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { iconProps } from 'element-plus'
+import type { ExtractPropTypes, PropType, Raw } from 'vue'
+
+export const vroElIconProps = {
+  ...iconProps,
+  name: {
+    type: [String, Object] as PropType<string | Raw<object>>,
+    default: '',
+  },
+}
+
+export type VroElIconProps = ExtractPropTypes<typeof vroElIconProps>

package/src/vro-el-icon/vro-el-icon.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-icon class="vro-el-icon" v-bind="props">
+    <slot>
+      <component v-if="isElement" :is="name" />
+      <i v-else class="iconfont" :class="[name]"></i>
+    </slot>
+  </el-icon>
+</template>
+
+<script setup lang="ts">
+  import { isString } from '@daysnap/utils'
+  import { ElIcon } from 'element-plus'
+  import { computed } from 'vue'
+
+  import { vroElIconProps } from './types'
+
+  defineOptions({ name: 'VroElIcon' })
+  const props = defineProps(vroElIconProps)
+
+  const isElement = computed(() => {
+    const { name } = props
+    if (isString(name)) {
+      const char = name.substring(0, 1)
+      return char >= 'A' && char <= 'Z'
+    }
+    return true
+  })
+</script>

package/src/vro-el-image-upload/README.md

@@ -0,0 +1,99 @@
+# VroElImageUpload
+
+### 介绍
+
+基于 Element Plus Image 的图片上传组件。组件负责图片选择、预览、删除和拖拽排序，实际上传逻辑由 `upload` 回调提供。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  <vro-el-image-upload v-model="value" :upload="upload" />
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const value = ref('')
+
+  const upload = async (files: File[]) => {
+    return files.map((file) => URL.createObjectURL(file))
+  }
+</script>
+```
+
+### 多图上传
+
+```html
+<vro-el-image-upload v-model="value" :max="3" :upload="upload" />
+```
+
+### 图片压缩
+
+```html
+<vro-el-image-upload v-model="value" compressible :upload="upload" />
+```
+
+### 全局上传配置
+
+```ts
+import { setVroElImageUploadOptions } from '@vrojs/element-plus'
+
+setVroElImageUploadOptions({
+  compressible: false,
+  imageProps: {
+    fit: 'cover',
+  },
+  upload: async (files, { compress, params }) => {
+    return files.map((file) => `${params.domain}/${compress ? 'compressed' : 'raw'}/${file.name}`)
+  },
+})
+```
+
+## API
+
+### 属性 Props
+
+<table>
+  <tbody>
+    <tr>
+      <td>名称</td>
+      <td>类型</td>
+      <td>默认值</td>
+    </tr>
+    <tr v-for="(item, key) in vroElImageUploadProps" :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: string | string[]</td>
+      <td>上传、删除或排序后触发</td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup lang="ts">
+  import { reserve } from '@daysnap/utils'
+  import { VroElImageUpload, vroElImageUploadProps } from '.'
+  import { parseType } from '../utils'
+</script>

package/src/vro-el-image-upload/index.ts

@@ -0,0 +1,17 @@
+import { withInstall } from '@vrojs/base'
+
+import Component from './vro-el-image-upload.vue'
+
+export * from './types'
+export * from './utils'
+
+export const VroElImageUpload = withInstall<typeof Component>(Component)
+export default VroElImageUpload
+
+export type VroElImageUploadInstance = InstanceType<typeof VroElImageUpload>
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VroElImageUpload: typeof VroElImageUpload
+  }
+}

package/src/vro-el-image-upload/style/css.ts

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

package/src/vro-el-image-upload/style/deps.ts

@@ -0,0 +1,4 @@
+import 'element-plus/es/components/checkbox/style/css'
+import 'element-plus/es/components/icon/style/css'
+import 'element-plus/es/components/image/style/css'
+import 'element-plus/es/components/loading/style/css'

package/src/vro-el-image-upload/style/index.scss

@@ -0,0 +1,55 @@
+.vro-el-image-upload-content {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: -10px;
+}
+.vro-el-image-upload-item {
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+  margin-right: 10px;
+  font-size: 24px;
+  border-radius: 4px;
+  width: 100px;
+  height: 100px;
+  border: 1px #ccc dashed;
+  .vro-el-image-upload-image,
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    object-position: center;
+    object-fit: cover;
+    border-radius: 4px;
+    transform: translate3d(0, 0, 0);
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAlQTFRFyMjI////1tbWF77ztQAAABZJREFUeJxjYGAIDWUggggNbWAgggAA918Ooanz2WEAAAAASUVORK5CYII=)
+      center !important;
+    background-size: j(8) !important;
+  }
+  input {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    opacity: 0;
+  }
+}
+.vro-el-image-upload-clear {
+  position: absolute;
+  color: #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 20px;
+  right: -6px;
+  top: -6px;
+  background: red;
+}

package/src/vro-el-image-upload/style/index.ts

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

package/src/vro-el-image-upload/types.ts

@@ -0,0 +1,42 @@
+import type { ElImage } from 'element-plus'
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export type VroElImageUploadImageProps = InstanceType<typeof ElImage>['$props']
+
+export interface VroElImageUploadCallback<T = any> {
+  (
+    /** 当前待上传的图片文件列表 */
+    files: File[],
+    options: {
+      /** 是否开启压缩 */
+      compress: boolean
+      /** 上传时透传的自定义参数 */
+      params: T
+    },
+  ): Promise<string[]>
+}
+
+export const vroElImageUploadProps = {
+  /** 绑定值，字符串为单图模式，数组为多图模式 */
+  modelValue: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '',
+  },
+  /** 最多可上传的图片数量 */
+  max: {
+    type: Number,
+    default: 1,
+  },
+  /** 是否禁用上传、删除和排序 */
+  disabled: Boolean,
+  /** 是否显示压缩开关，传入对象时可作为响应式默认值 */
+  compressible: [Boolean, Object] as PropType<boolean | { value: boolean }>,
+  /** 上传时透传给 upload 回调的自定义参数 */
+  params: Object as PropType<Record<string, any>>,
+  /** 透传给 Element Plus Image 的属性 */
+  imageProps: Object as PropType<Partial<VroElImageUploadImageProps>>,
+  /** 自定义上传方法，需要返回图片访问地址列表 */
+  upload: Function as PropType<VroElImageUploadCallback>,
+}
+
+export type VroElImageUploadProps = ExtractPropTypes<typeof vroElImageUploadProps>

package/src/vro-el-image-upload/utils.ts

@@ -0,0 +1,7 @@
+import { createFactory } from '@daysnap/utils'
+
+import type { VroElImageUploadProps } from './types'
+
+export const [setVroElImageUploadOptions, getVroElImageUploadOptions] = createFactory<
+  Partial<Pick<VroElImageUploadProps, 'compressible' | 'upload' | 'imageProps'>>
+>({})

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

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