@vrojs/element-plus 0.0.1 → 0.0.3

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

@@ -1,89 +0,0 @@
-# VroElFileUpload
-
-### 介绍
-
-基于 Element Plus Button 的轻量文件上传组件。组件只负责选择文件、展示已上传地址和删除交互，实际上传逻辑由 `upload` 回调提供。
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <vro-el-file-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-file-upload v-model="value" :max="3" :upload="upload" />
-```
-
-### 全局上传配置
-
-```ts
-import { setVroElFileUploadOptions } from '@vrojs/element-plus'
-
-setVroElFileUploadOptions({
-  upload: async (files, { params }) => {
-    return files.map((file) => `${params.domain}/${file.name}`)
-  },
-})
-```
-
-## API
-
-### 属性 Props
-
-<table>
-  <tbody>
-    <tr>
-      <td>名称</td>
-      <td>类型</td>
-      <td>默认值</td>
-    </tr>
-    <tr v-for="(item, key) in vroElFileUploadProps" :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 { VroElFileUpload, vroElFileUploadProps } from '.'
-  import { parseType } from '../utils'
-</script>

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-.vro-el-file-upload-btn {
-  position: relative;
-  input {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    cursor: pointer;
-    opacity: 0;
-  }
-}
-.vro-el-file-upload-item {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  margin-top: 4px;
-  a {
-    text-decoration: underline;
-    color: #007bee;
-    margin-right: 10px;
-  }
-  i {
-    cursor: pointer;
-    margin-right: 10px;
-    color: #ee0000;
-    background-color: #f2f2f2;
-  }
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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