@gindow/element-go 1.0.0

package/src/components/ExTableColumn.vue

@@ -0,0 +1,160 @@
+<template>
+  <el-table-column v-if="is('selection')" :type :prop :width :minWidth :align :label :className />
+  <el-table-column v-else :prop :width :minWidth :align :label :className>
+    <template #default="{ row, column }">
+      <template v-for="val in [value && typeof value === 'function' ? value(row, column) : value ?? get(row, prop ?? '') ?? defaultValue]">
+        <slot name="front" :row />
+        <!-- 插槽 -->
+        <slot v-if="$slots.default" :row />
+        <!-- 排序 -->
+        <ex-icon icon="hamburger-button" v-else-if="is('sort')" />
+        <!-- 状态 -->
+        <div v-else-if="is('state')" class="flex-center-items">
+          <ex-icon icon="dot" :color="val ? 'var(--el-color-success)' : 'var(--el-color-warning)'" />
+        </div>
+        <!-- 图标 -->
+        <div v-else-if="is('icon')" class="flex-center-items"><ex-icon :icon="val" :size="iconSize" /></div>
+        <!-- 编号 -->
+        <div v-else-if="is('id')">{{ val ? Formatter.id(val) : defaultValue }}</div>
+        <!-- 电话 -->
+        <div v-else-if="is('phone')">{{ val ? Formatter.phone(val) : defaultValue }}</div>
+        <!-- 金额 -->
+        <div v-else-if="is('currency')">{{ val ? Formatter.price(val, currency ?? row.currency) : defaultValue }}</div>
+        <!-- 链接 -->
+        <el-link v-else-if="is('link')" :type="linkType" underline="never" @click="click(row)">{{ val }}</el-link>
+        <!-- 标签 -->
+        <el-space v-else-if="is('tags')" wrap>
+          <el-tag v-for="item in val" :round="tagRound" :type="(tagType as ITag)" :effect="tagEffect" :size="tagSize">{{ tagKey ? item[tagKey] : item }}</el-tag>
+        </el-space>
+        <!-- 标签 -->
+        <el-tag v-else-if="is('tag')" :round="tagRound" :type="typeof tagType === 'function' ? tagType(row) : tagType" :effect="tagEffect" :size="tagSize">{{ val }}</el-tag>
+        <!-- 日期 -->
+        <div v-else-if="is('date')">{{ val ? DateTime.date(val) : defaultValue }}</div>
+        <!-- 时间 -->
+        <template v-else-if="is('datetime')">
+          <div v-if="!val">{{ defaultValue }}</div>
+          <template v-else>
+            <div>{{ DateTime.date(val) }}</div>
+            <div class="text-light">{{ DateTime.time(val) }}</div>
+          </template>
+        </template>
+        <!-- 布尔 -->
+        <template v-else-if="is('boolean')">
+          <ex-icon icon="correct" v-if="val" />
+          <ex-icon icon="error" v-else />
+        </template>
+        <!-- 头像 -->
+        <el-avatar v-else-if="is('avatar')" :size="48" :src="val"><img :src="avatar" /></el-avatar>
+        <!-- 图片 -->
+        <el-image v-else-if="is('image')" class="size-[48px] flex-center-items" fit="cover" lazy :src="val">
+          <template #error>
+            <div class="flex items-center justify-center w-full h-full bg-gray-100">
+              <ex-icon icon="picture" :size="24" />
+            </div>
+          </template>
+        </el-image>
+        <!-- 操作 -->
+        <div v-else-if="is('action')" class="flex-center-end gap-2">
+          <ex-button v-for="{ label, icon, click, disabled, hidden } in show" link class="ml-0!" type="primary" :icon
+            :hidden="hidden && typeof(hidden) === 'function' ? hidden(row) : hidden ?? false"
+            :disabled="disabled && typeof(disabled) === 'function' ? disabled(row) : disabled ?? false"
+            @click="click(row)">{{ typeof(label) === 'function' ? label(row) : label }}</ex-button>
+          <el-dropdown v-if="more.length">
+            <ex-button link type="primary" icon="more" :icon-size="18" />
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="{ label, icon, divided, disabled, hidden, click } in more" :key="label" :icon="i(icon)" :divided="divided"
+                  :hidden="hidden && typeof(hidden) === 'function' ? hidden(row) : hidden ?? false"                
+                  :disabled="disabled && typeof(disabled) === 'function' ? disabled(row) : disabled ?? false"
+                  @click="click(row)">{{ typeof(label) === 'function' ? label(row) : label }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+        <!-- 文本 -->
+        <div v-else>{{ val || defaultValue }}</div>
+      </template>
+    </template>
+  </el-table-column>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { IModel } from '../types'
+import { DateTime, Formatter, get } from '../utils'
+import { useIcon } from '../hooks/useIcon'
+import { useLocale } from '../locale'
+import avatar from '../assets/avatar.png'
+import ExButton from './ExButton.vue'
+import ExIcon from './ExIcon.vue'
+
+export type IType = 'id' | 'selection' | 'icon' | 'link' | 'phone' | 'boolean' | 'state' | 'tags' | 'tag' | 'currency' | 'date' | 'datetime' | 'sort' | 'image' | 'avatar' | 'text' | 'action'
+
+type ITag = 'primary' | 'success' | 'warning' | 'info' | 'danger'
+
+const props = defineProps({
+  type: { type: String as PropType<IType>, default: 'text' },
+  prop: { type: String },
+  label: { type: String },
+  value: { type: [String, Number, Function] },
+  width: { type: [String, Number] },
+  minWidth: { type: [String, Number] },
+  className: { type: String },
+  align: { type: String },
+  linkType: { type: String as PropType<'primary' | 'success' | 'warning' | 'info' | 'danger' | 'default'>, default: 'primary' },
+  iconSize: { type: Number, default: 16 },
+  tagKey: { type: String },
+  tagType: { type: [String, Function] as PropType<ITag | ((row: any) => ITag | undefined)> },
+  tagEffect: { type: String as PropType<'dark' | 'light' | 'plain'> },
+  tagSize: { type: String as PropType<'default' | 'small' | 'large'>, default: 'default' },
+  tagRound: { type: Boolean, default: false },
+  currency: { type: String },
+  onClick: { type: Function },
+  defaultValue: { type: String },
+})
+
+defineEmits(['sort'])
+
+const { i } = useIcon()
+const { t } = useLocale()
+
+const is = (type: IType) => props.type === type
+
+const show = inject('show') as IModel
+const more = inject('more') as IModel
+
+const template = {
+  id: { prop: 'id', width: 160 },
+  selection: { width: 30, align: 'center' },
+  sort: { width: 30, align: 'center' },
+  state: { prop: 'state', width: 40, align: 'center' },
+  link: {},
+  boolean: {},
+  phone: { prop: 'phone', label: t('core.phoneNumber') },
+  tags: { prop: 'tags' },
+  tag: {},
+  currency: { prop: 'amount', width: 140, align: 'right' },
+  date: { prop: 'created_at', label: t('core.createdAt'), width: 140, align: 'right' },
+  datetime: { prop: 'created_at', label: t('core.createdAt'), width: 140, align: 'right' },
+  image: { width: 60, align: 'center' },
+  avatar: { width: 60, align: 'center' },
+  text: {},
+} as { [property: string]: { prop?: string; label?: string; width?: number; align?: string } }
+
+const prop = computed(() => props.prop ?? template[props.type]?.prop)
+const label = computed(() => props.label ?? template[props.type]?.label)
+const width = computed(() => props.width ?? template[props.type]?.width)
+const align = computed(() => props.align ?? template[props.type]?.align)
+
+const click = (row: IModel) => props.onClick ? props.onClick(row) : null
+</script>
+
+<style scoped>
+.el-link { max-width: 100%; }
+.el-link :deep(.el-link__inner) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/components/ExUpload.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-upload ref="uploadRef" class="ex-upload"  v-model:file-list="files" list-type="text"
+    :limit
+    :multiple
+    :show-file-list
+    :disabled="disabled || loading"
+    :class="{ disabled }"
+    :before-upload="beforeUpload"
+    :on-exceed="onExceed" 
+    :on-preview="onPreview"
+    :on-change="onChange" v-bind="$attrs">
+    <slot v-if="slots.default" :loading="loading" />
+    <ex-icon v-else-if="$attrs['list-type']" icon="upload" :size="24" />
+    <el-button v-else :icon="i('upload')" :loading="loading">{{ t('core.upload') }}</el-button>
+    <template v-if="slots.file" #file="{ file }">
+      <slot name="file" :file="file" />
+    </template>
+    <el-progress v-if="showProgress && loading" type="circle" :width="100" color="#093" :percentage :format="(value: number) => value.toFixed(1) + '%'" />
+    <el-image-viewer v-if="showViewer" :url-list="files.map(({ url }: IModel) => url)" :max-scale="2" :min-scale="0.2" :initialIndex="index" teleported @close="showViewer = false" />
+  </el-upload>
+</template>
+
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import type { IUploadUserFile, IModel } from '../types'
+import type { UploadRawFile, UploadInstance, UploadFile } from 'element-plus'
+import { useLocale } from '../locale'
+import { useMessage } from '../hooks/useMessage'
+import { useIcon } from '../hooks/useIcon'
+import { useUpload } from '../hooks/useUpload'
+import ExIcon from './ExIcon.vue'
+
+const emit = defineEmits(['change'])
+const files = defineModel('fileList', { type: Array as PropType<IUploadUserFile[]>, default: () => ([]) })
+const { limit, disabled, multiple, showFileList, showProgress, compressor } = defineProps({
+  limit: { type: Number, default: 500 },
+  disabled: { type: Boolean, default: false },
+  multiple: { type: Boolean, default: true },
+  showFileList: { type: Boolean, default: false },
+  showProgress: { type: Boolean, default: true },
+  compressor: { type: Boolean, default: false },
+})
+
+const slots = useSlots() as { default?: () => VNode[]; file?: (props: { file: IUploadUserFile }) => VNode[] }
+const loading = computed(() => files.value.some(file => ['uploading'].includes(file.status ?? ''))) // 上传中
+const percentage = computed(() => files.value.reduce((prev, file) => prev + (file.percentage ?? 0), 0) / (files.value.length * 100) * 100) // 总进度
+
+// 手动上传
+const uploadRef = ref<UploadInstance>()
+const submit = () => uploadRef.value!.submit()
+
+defineExpose({ submit })
+
+// 预先处理
+const { i } = useIcon()
+const { t } = useLocale()
+const { error, warning } = useMessage()
+const { handler } = useUpload()
+const beforeUpload = (file: UploadRawFile) => {  
+  if (file.size > 1024 * 1024 * 200) {
+    error(t('core.message.tooLarge')) // 限制尺寸
+    return false
+  }
+  return handler(file, { compressor })
+}
+
+// 数量限制
+const onExceed = () => warning(t('core.message.fileExceed', { limit })) // 超出数量
+
+const showViewer = ref(false)
+const index = ref(0)
+const onPreview = (file: UploadFile) => {
+  index.value = files.value.findIndex(({ url }) => url === file.url)
+  showViewer.value = true
+}
+
+const onChange = (file: IUploadUserFile, fileList: IUploadUserFile[]) => {
+  nextTick(() => {
+    if (!multiple && fileList.length > 1) files.value = [file]
+    emit('change', file, files.value)
+  })
+}
+</script>
+
+<style scoped>
+.ex-upload :deep(.el-upload-dragger) { border-radius: 0; }
+.ex-upload.disabled :deep(.el-upload-dragger) { border-color: var(--el-border-color) !important; cursor: default; }
+.ex-upload.disabled :deep(.el-upload-dragger .el-icon--upload) { color: #ccc; }
+.ex-upload.disabled :deep(.el-upload-dragger .el-upload__text), .disabled :deep(.el-upload__text em) { color: #ccc; }
+.el-progress { position: fixed; bottom: 20px; right: 20px; }
+</style>

package/src/components/ExUploadAsset.vue

@@ -0,0 +1,299 @@
+<template>
+  <ex-upload ref="uploadRef" class="ex-upload-asset inline-flex" :class="{ border }" v-bind="$attrs" v-model:file-list="files"
+    :action
+    :headers
+    :data
+    :multiple
+    :auto-upload="false"
+    :before-upload="beforeUpload"
+    @change="onChange">
+    <template #default="{ loading }: { loading: boolean }" v-if="$slots.default">
+      <slot :loading="loading" />
+    </template>
+    <!-- 文件列表 -->
+    <template #file="{ file }: { file :IUploadUserFile }">
+      <!-- 图片模式 -->
+      <div v-if="$attrs['list-type']" class="w-full">
+        <el-image :src="file.asset?.shrink || file.url" fit="cover" class="w-full h-full" />
+        <!-- 自定义鼠标悬浮操作 -->
+        <div class="el-upload-list__item-actions" :class="{ mask: file.status !== 'success' }">
+          <!-- 上传中隐藏操作 -->
+          <div class="text-center">
+            <span class="el-upload-list__item-preview icon" @click="onView(file)" v-if="['success', 'fail'].includes(file.status!)">
+              <ex-icon icon="zoom-in" />
+            </span>
+            <span class="el-upload-list__item-delete icon" @click="remove(file)" v-if="['success', 'fail'].includes(file.status!)">
+              <ex-icon icon="delete" />
+            </span>
+            <div v-if="file.status === 'ready'">
+              <el-text type="primary">
+                <span class="text-white">等待上传</span>
+              </el-text>
+            </div>
+            <div v-else-if="file.status === 'fail'">
+              <el-text type="primary">
+                <span class="text-white">上传错误</span>
+              </el-text>
+            </div>
+          </div>
+          <!-- 上传中进度 -->
+          <el-progress type="circle" :percentage="file.percentage" v-if="file.status === 'uploading'">
+            <div class="text-white">{{ file.percentage }} % </div>
+          </el-progress>
+        </div>
+      </div>
+      <!-- 文字模式 -->
+      <el-row class="px-1" v-else>
+        <el-col class="flex-1! flex-center-v">
+          <el-link underline="never" @click="onView(file)">{{ file.name || file.title || file.asset?.title }}</el-link>
+        </el-col>
+        <el-col class="flex-0! flex-center-v">
+          <el-link underline="never"><ex-icon icon="delete" @click="remove(file)" /></el-link>
+        </el-col>
+      </el-row>
+    </template>
+  </ex-upload>
+  <ex-asset-preview v-if="preview" v-model:show="show" :asset :assets />
+</template>
+
+<script setup lang="ts">
+import type { IAsset, IUploadUserFile } from '../types'
+import { catchError, filter, from, map, mergeMap, of } from 'rxjs'
+import { request, DateTime } from '../utils'
+import { useLocale } from '../locale'
+import { useMessage } from '../hooks/useMessage'
+import { useUpload } from '../hooks/useUpload'
+import { useNanoid } from '../hooks/useNanoid'
+import axios, { type AxiosResponse } from 'axios'
+import ExAssetPreview from './ExAssetPreview.vue'
+import ExIcon from './ExIcon.vue'
+import ExUpload from './ExUpload.vue'
+
+const ids = defineModel<string[] | string>('ids', { default: () => ([]) })
+const files = defineModel<IUploadUserFile[]>('fileList', {
+  default: () => ([]),
+  get(value) {
+    if (!value) return []
+    else if (value && !Array.isArray(value)) return value = [value]
+    return value
+  },
+})
+
+const { disk, place, data: model, compressor, multiple, autoUpload, onSuccess, preview } = defineProps({
+  disk: { type: String, default: 'local' },
+  place: { type: String, required: true },
+  data: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+  compressor: { type: Boolean, default: false },
+  multiple: { type: Boolean, default: true },
+  autoUpload: { type: Boolean, default: true },
+  onSuccess: { type: Function as PropType<(value: IAsset[])=> void>, default: () => ({}) },
+  preview: { type: Boolean, default: true },
+  border: { type: Boolean, default: false },
+})
+
+// 手动上传
+const assets = computed(()=> {
+  return files.value.filter(item => item.asset || item.id).map(item => {
+    if (item.asset?.id) return item.asset
+    else if (item.id) return item
+  }).filter(item => item) as IAsset[]
+})
+const submit = () => upload().then(() => onSuccess(assets.value))
+
+defineExpose({ submit })
+
+// 自动上传（确保仅执行一次）
+const onChange = useThrottleFn(() => nextTick(() => {
+  if (autoUpload) submit()
+  else files.value.forEach(async item => await beforeUpload(item, { compressor : false })) // HEIC 预览
+}))
+
+// 资源编号（集）
+const assetIds = computed(() => files.value.filter(item => item.id || item.asset)?.map(item => item.id || item.asset?.id!) ?? [])
+
+watch(() => assetIds.value, value => ids.value = multiple ? value : (value[value.length - 1] ?? ''))
+
+// 删除文件
+const { confirm } = useMessage()
+const { t } = useLocale()
+const remove = (file: IUploadUserFile) => confirm(t('core.message.delConfirm', { name: file.title ?? '' })).then(() => {
+  files.value = files.value.filter(item => {
+    if (file.id) return item.id !== file.id
+    else return item.asset?.id !== file.asset?.id
+  })
+}).catch(() => {})
+
+// 上传文件
+const action = '/user/asset/upload'
+const headers = { 'Authorization': `Bearer ${request.getToken()}` }
+const data = { ...model, place }
+const upload = () => {
+  return new Promise(async (resolve) => {
+    if (disk !== 'local') await signature()
+    const makeRequest = handlers[disk] || svrUpload
+    const requests$ = from(files.value).pipe( // 创建链路
+      filter(file => !(file.id || file.asset)), // 排除已上传文件
+      map(file => {
+        file.status = 'uploading'
+        file.percentage = 0
+        return file
+      }),
+      mergeMap(file => from(beforeUpload(file, { compressor })).pipe(
+        catchError(() => {
+          file.status = 'fail'
+          return of(file)
+        })
+      )),
+      filter(file => file.status !== 'fail'),
+      mergeMap(file => from(makeRequest(file)).pipe(
+        catchError(() => {
+          file.status = 'fail'
+          return of(file)
+        })
+      ), 5) // 控制并发数
+    )
+    // 执行请求
+    requests$.subscribe({
+      next: (file: IUploadUserFile) => file.status = 'success',
+      error: (file: IUploadUserFile) => file.status = 'fail',
+      complete: () => resolve(true) //全部上传完回调
+    })
+  })
+}
+
+// 服务器上传
+const svrUpload = (file: IUploadUserFile) => {
+  return new Promise((resolve, reject) => {
+    const formData = new FormData()
+    formData.append('file[]', file.raw!)
+    formData.append('place', place)
+    Object.keys(model).forEach((key: string) => formData.append(key, model[key] as string)) // 扩展数据
+    request.upload(action, formData).then(({ data }: AxiosResponse) => {
+      file.asset = data[0]
+      resolve(file)
+    }).catch(() => reject(file))
+  })
+}
+
+// 阿里云上传
+const { numeric } = useNanoid()
+const ossUpload = (file: IUploadUserFile) => {
+  return new Promise(async (resolve, reject) => {
+    const filename = DateTime.dayjs().format('YYYYMMDDHHmmss') + numeric(4) + file.name.substring(file.name.lastIndexOf('.'))
+    const { host, policy, access_id: OSSAccessKeyId, signature, dir, callback, user_id } = signatureData.value
+    const para: Record<string, any> = {
+      policy,
+      OSSAccessKeyId,
+      callback,
+      signature,
+      success_action_status: 200,
+      key: dir + filename,
+      file: file.raw,
+      'x:title': file.name,
+      'x:image_width': file.width,
+      'x:image_height': file.height,
+      'x:user_id': user_id,
+      'x:type': file.type,
+      'x:mimeType': file.mimeType,
+    }
+    Object.keys(model).forEach((key: string) => para[`x:${key}`] = model[key]) // 扩展数据
+    // 请求上传
+    axios.post(host, para, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+      onUploadProgress: ({ loaded, total }) => file.percentage = 100 * loaded / total !
+    }).then(({ data }: AxiosResponse) => {
+      file.asset = data.data
+      resolve(file)
+    }).catch(() => reject(file))
+  })
+}
+
+// 华为云上传
+const obsUpload = (file: IUploadUserFile) => {
+  return new Promise(async (resolve, reject) => {
+    const filename = DateTime.dayjs().format('YYYYMMDDHHmmss') + numeric(4) + file.name.substring(file.name.lastIndexOf('.'))
+    const { host, policy, access_id: AccessKeyId, signature, callback_url: callbackUrl, dir, callback_body: callbackBody, user_id } = signatureData.value
+    const para: Record<string, any> = {
+      key: dir + filename,
+      callbackUrl,
+      callbackBody,
+      callbackBodyType: 'application/x-www-form-urlencoded',
+      AccessKeyId,
+      policy,
+      signature,
+      'x:title': btoa(encodeURI(file.name)),  // 不能有中文和&符号
+      'x:image_width': file.width ?? '',  // 必须加空值处理
+      'x:image_height': file.height ?? '',
+      'x:user_id': user_id,
+      'x:type': file.type,
+      'x:mimeType': file.mimeType,
+      'x-obs-acl': 'public-read',
+      file: file.raw,
+      size: file.raw?.size,
+    }
+    Object.keys(model).forEach((key: string) => para[`x:${key}`] = model[key]) // 扩展数据
+    // 请求上传
+    axios.post(host, para, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+      onUploadProgress: ({ loaded, total }) => file.percentage = 100 * loaded / total !
+    }).then(({ data }: AxiosResponse) => {
+      file.asset = data.data
+      resolve(file)
+    }).catch(() => reject(file))
+  })
+}
+
+// 上传处理器映射
+const handlers: Record<string, typeof svrUpload> = {
+  local: svrUpload,
+  oss: ossUpload,
+  obs: obsUpload
+}
+
+// 获取签名
+const signatureData = ref()
+const signature = async () => {
+  const url = disk === 'oss' ? '/user/asset/upload/signature' : '/user/asset/obsSignature'
+  const { data } = await request.get(url, { place }, true)
+  signatureData.value = data
+}
+
+// 预先处理
+const { error } = useMessage()
+const { handler, getDimension, getFileType } = useUpload()
+const beforeUpload = async (file: any, { compressor = true }): Promise<any> => {
+  if (file.id || file.asset) return file  // 排除已上传文件
+  if (file.size > 1024 * 1024 * 200) return error('文件大小超出限制') // 限制文件大小
+  return new Promise(async resolve => {
+    try {
+      const { width, height } = await getDimension(file.raw) // 获取图片宽高
+      file.width = width
+      file.height = height
+    } catch {}
+    const isCompressor = compressor || file.size > 1024 * 1024 * 20 // 超过 20M 则压缩
+    file.raw = await handler(file.raw, { compressor: isCompressor })
+    const { mimeType } = await getFileType(file.raw)
+    file.type = mimeType.split('/')[0] ?? 'application'
+    file.mimeType = mimeType
+    file.url = URL.createObjectURL(file.raw)
+    resolve(file)
+  })
+}
+
+const show = ref(false)
+const asset =ref()
+const onView = (value: IUploadUserFile) => {
+  if (!preview) return
+  if (value.id || value.asset?.id) {
+    show.value = true
+    asset.value = value.id ? value : value.asset
+  }
+}
+</script>
+
+<style scoped>
+.ex-upload-asset { border-color: var(--el-border-color-lighter); }
+.ex-upload-asset :deep(.el-upload-list--text) { margin-top: 0; }
+.ex-upload-asset :deep(.el-upload-list--text .el-upload-list__item) { margin: 0; background-color: transparent; user-select: none; }
+.ex-upload-asset :deep(.el-upload-list--text .el-upload-list__item:first-child) { margin-top: 10px; }
+</style>

package/src/components/vIcon.vue

@@ -0,0 +1,23 @@
+<template>
+  <Icon :icon="name" :width="size" :height="size" :style="iconStyle" :aria-hidden="null" />
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+const props = defineProps({
+  vendor: { type: String, default: 'icon-park-outline' },
+  icon: { type: String, default: '' },
+  size: { type: Number, default: 16 },
+  strokeWidth: { type: Number, default: 3 },
+  color: { type: String },
+})
+
+const name = computed(() => props.icon.indexOf(':') !== -1 ? props.icon : `${props.vendor}:${props.icon}`)
+const iconStyle = computed(() => props.color ? { color: props.color } : undefined)
+const strokeWidth = computed(() => props.strokeWidth)
+</script>
+
+<style scoped>
+:deep(g), :deep(path) { stroke-width: v-bind(strokeWidth) }
+</style>

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/hooks/useBreak.ts

@@ -0,0 +1,23 @@
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+const MD = 768
+
+export const useBreak = () => {
+  const matches = ref(typeof window !== 'undefined' ? window.matchMedia(`(min-width: ${MD}px)`).matches : true)
+  let mql: MediaQueryList | undefined
+  const onChange = (e: MediaQueryListEvent) => matches.value = e.matches
+
+  onMounted(() => {
+    if (typeof window === 'undefined') return
+    mql = window.matchMedia(`(min-width: ${MD}px)`)
+    matches.value = mql.matches
+    mql.addEventListener('change', onChange)
+  })
+
+  onBeforeUnmount(() => mql?.removeEventListener('change', onChange))
+
+  const isDesktop = computed(() => matches.value)
+  const isMobile = computed(() => !matches.value)
+
+  return { isMobile, isDesktop }
+}