@qxs-bns/components 0.0.77 → 0.0.79

package/lib/src/image-upload/src/image-upload.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-upload.vue.cjs","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Delete, UploadImage, ZoomIn } from '@qxs-bns/icons'\nimport { ElImageViewer, ElMessage, ElUpload, useNamespace } from 'element-plus'\nimport { computed, onUnmounted, ref, useAttrs } from 'vue'\n\n// 类型定义\nexport interface ImageUploadProps {\n  /** 上传地址（必需） */\n  action: UploadProps['action']\n  /** 请求头 */\n  headers?: UploadProps['headers']\n  /** 上传时附带的额外参数 */\n  data?: UploadProps['data']\n  /** 上传的文件字段名 */\n  name?: UploadProps['name']\n  /** 文件大小限制（MB） */\n  size?: number\n  /** 图片显示宽度（px） */\n  width?: number\n  /** 图片显示高度（px） */\n  height?: number\n  /** 接受的文件类型 */\n  accept?: string\n  /** 上传区域提示文字 */\n  placeholder?: string\n  /** 是否隐藏提示文字 */\n  notip?: boolean\n  /** 自定义提示文字 */\n  tipText?: string\n  /** 上传前的钩子函数 */\n  beforeUpload?: UploadProps['beforeUpload']\n  /** 是否禁用 */\n  disabled?: boolean\n  /** 最大上传数量 */\n  limit?: number\n}\n\ninterface UploadProgress {\n  preview: string\n  percent: number\n}\n\n// 组件名称\ndefineOptions({\n  name: 'QxsImageUpload',\n})\n\n// Props 定义\nconst {\n  action,\n  headers,\n  data,\n  name = 'file',\n  size = 20,\n  width = 160,\n  height = 90,\n  limit = 1,\n  placeholder = '上传图片',\n  notip = false,\n  accept = 'image/jpeg,image/jpg,image/png,image/gif',\n  beforeUpload,\n  tipText = '',\n  disabled = false,\n} = defineProps<ImageUploadProps>()\n\n// Emits 定义 - 统一事件命名\nconst emits = defineEmits<{\n  success: [res: any, uploadFile: UploadFile, uploadFiles: UploadFiles]\n  remove: [file: UploadFile]\n}>()\n\nconst attrs = useAttrs()\n\nconst fileList = defineModel('fileList', {\n  type: Array as () => UploadFile[],\n  default: () => [],\n})\n\n// 命名空间\nconst nsEl = useNamespace('image-upload')\n\nconst initialIndex = ref(0)\n// 响应式数据\nconst uploadData = ref<{\n  imageViewerVisible: boolean\n  progress: UploadProgress\n}>({\n  imageViewerVisible: false,\n  progress: {\n    preview: '',\n    percent: 0,\n  },\n})\n\nconst cssVar = computed(() => {\n  return nsEl.cssVarBlock({\n    ns: nsEl.namespace.value,\n    width: `${width}px`,\n    height: `${height}px`,\n  })\n})\n\n// 计算属性\nconst exts = computed(() =>\n  accept.split(',').map(ext => ext.split('/').pop()),\n)\n\nconst tipMessage = computed(() => {\n  if (tipText) {\n    return tipText\n  }\n\n  const formatText = `上传图片支持 ${exts.value.join(' / ')} 格式，且图片大小不超过 ${size}MB`\n  const sizeText = width && height ? `，建议图片尺寸为 ${width}×${height}` : ''\n\n  return formatText + sizeText\n})\n\n// 方法\nfunction onPreview(file: UploadFile) {\n  // 确保文件有有效的 URL 才能预览\n  if (!file.url) {\n    console.warn('文件缺少 URL，无法预览:', file)\n    return\n  }\n\n  // 直接使用文件在列表中的索引\n  initialIndex.value = fileList.value.indexOf(file)\n  uploadData.value.imageViewerVisible = true\n}\n\nfunction onRemove(file: UploadFile) {\n  // 如果组件被禁用，阻止删除\n  if (disabled) {\n    return\n  }\n\n  // 清理可能的 Object URL\n  if (file.url && file.url.startsWith('blob:')) {\n    URL.revokeObjectURL(file.url)\n  }\n\n  // 直接使用文件在列表中的索引来删除\n  const index = fileList.value.indexOf(file)\n  if (index > -1) {\n    fileList.value.splice(index, 1)\n  }\n\n  // 触发删除事件\n  emits('remove', file)\n}\n\nfunction previewClose() {\n  uploadData.value.imageViewerVisible = false\n}\n\nconst handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {\n  // 参数校验\n  if (!file || !file.name) {\n    ElMessage.error('文件信息无效！')\n    return false\n  }\n\n  // 文件类型校验\n  const fileExt = file.name.split('.').pop()?.toLowerCase() ?? ''\n  const isTypeOk = exts.value.some(ext => ext?.toLowerCase() === fileExt)\n\n  if (!isTypeOk) {\n    ElMessage.error(`上传图片只支持 ${exts.value.join(' / ')} 格式！`)\n    return false\n  }\n\n  // 文件大小校验\n  const fileSizeMB = file.size / 1024 / 1024\n  if (fileSizeMB > size) {\n    ElMessage.error(`上传图片大小不能超过 ${size}MB！`)\n    return false\n  }\n\n  // 设置预览\n  try {\n    uploadData.value.progress.preview = URL.createObjectURL(file)\n  }\n  catch (error) {\n    console.warn('创建预览失败:', error)\n  }\n\n  // 执行自定义校验\n  return beforeUpload ? beforeUpload(file) : true\n}\n\nconst onProgress: UploadProps['onProgress'] = (evt) => {\n  uploadData.value.progress.percent = Math.floor(evt.percent)\n}\n\nconst onError: UploadProps['onError'] = (error, _file, _fileList) => {\n  // 上传失败时也要清理预览 URL\n  if (uploadData.value.progress.preview) {\n    URL.revokeObjectURL(uploadData.value.progress.preview)\n    uploadData.value.progress.preview = ''\n  }\n  uploadData.value.progress.percent = 0\n\n  ElMessage.error(`上传失败: ${error.message || '未知错误'}`)\n}\n\nconst onSuccess: UploadProps['onSuccess'] = (...args) => {\n  // 清理预览 URL，防止内存泄漏\n  if (uploadData.value.progress.preview) {\n    URL.revokeObjectURL(uploadData.value.progress.preview)\n  }\n\n  uploadData.value.progress = {\n    preview: '',\n    percent: 0,\n  }\n  emits('success', ...args)\n}\n\n// 清理所有可能的 Object URL\nfunction cleanupObjectURLs() {\n  // 清理进度预览 URL\n  if (uploadData.value.progress.preview) {\n    URL.revokeObjectURL(uploadData.value.progress.preview)\n    uploadData.value.progress.preview = ''\n  }\n\n  // 清理文件列表中可能的 Object URL\n  fileList.value.forEach((file) => {\n    if (file.url && file.url.startsWith('blob:')) {\n      URL.revokeObjectURL(file.url)\n    }\n  })\n}\n\n// 组件卸载时清理资源\nonUnmounted(() => {\n  cleanupObjectURLs()\n})\n</script>\n\n<template>\n  <div\n    :class=\"nsEl.e('container')\"\n    :style=\"cssVar\"\n  >\n    <ElUpload\n      v-bind=\"attrs\"\n      v-model:file-list=\"fileList\"\n      drag\n      :limit=\"limit\"\n      list-type=\"picture-card\"\n      :headers=\"headers\"\n      :action=\"action\"\n      :data=\"data\"\n      :name=\"name\"\n      :accept=\"accept\"\n      :before-upload=\"handleBeforeUpload\"\n      :on-progress=\"onProgress\"\n      :on-preview=\"onPreview\"\n      :on-success=\"onSuccess\"\n      :on-error=\"onError\"\n      :class=\"[nsEl.e('control'), limit <= fileList.length ? nsEl.e('more-than-limit') : '']\"\n      :on-remove=\"onRemove\"\n    >\n      <slot>\n        <div class=\"image-slot\">\n          <QxsIcon\n            size=\"32px\"\n            :icon=\"UploadImage\"\n          />\n          <p>{{ placeholder }}</p>\n        </div>\n      </slot>\n      <template #file=\"{ file }\">\n        <img\n          v-if=\"file.url\"\n          :class=\"`${nsEl.namespace.value}-upload-list__item-thumbnail`\"\n          :src=\"file.url\"\n          :alt=\"file.name || '图片'\"\n        >\n        <div\n          v-else\n          :class=\"`${nsEl.namespace.value}-upload-list__item-thumbnail`\"\n          style=\"display: flex; align-items: center; justify-content: center; color: #909399; background: #f5f7fa;\"\n        >\n          无图片\n        </div>\n        <span :class=\"`${nsEl.namespace.value}-upload-list__item-actions`\">\n          <span\n            v-if=\"file.url\"\n            :class=\"[\n              `${nsEl.namespace.value}-upload-list__item-preview`,\n              `${nsEl.namespace.value}-image-upload__action-btn`,\n              `${nsEl.namespace.value}-image-upload__action-btn--preview`,\n            ]\"\n            @click=\"onPreview(file)\"\n          >\n            <ZoomIn size=\"14px\" />\n          </span>\n          <span\n            v-if=\"file.url\"\n            :class=\"`${nsEl.namespace.value}-upload-list__item-divider`\"\n          />\n          <span\n            :class=\"[\n              `${nsEl.namespace.value}-upload-list__item-delete`,\n              `${nsEl.namespace.value}-image-upload__action-btn`,\n              `${nsEl.namespace.value}-image-upload__action-btn--delete`,\n              disabled ? 'is-disabled' : '',\n            ]\"\n            @click=\"onRemove(file)\"\n          >\n            <Delete size=\"14px\" />\n          </span>\n        </span>\n      </template>\n      <template #tip>\n        <slot name=\"tip\">\n          <div\n            v-if=\"!notip\"\n            :class=\"`${nsEl.namespace.value}-upload__tip-text`\"\n          >\n            <div class=\"tip-content\">\n              {{ tipMessage }}\n            </div>\n          </div>\n        </slot>\n      </template>\n    </ElUpload>\n\n    <ElImageViewer\n      v-if=\"uploadData.imageViewerVisible\"\n      :url-list=\"fileList.map((item: UploadFile) => item.url!).filter(Boolean)\"\n      :initial-index=\"initialIndex\"\n      :show-progress=\"fileList.length > 1\"\n      teleported\n      @close=\"previewClose\"\n    />\n  </div>\n</template>\n"],"names":["emits","__emit","attrs","useAttrs","fileList","_useModel","__props","nsEl","useNamespace","initialIndex","ref","uploadData","imageViewerVisible","progress","preview","percent","cssVar","computed","cssVarBlock","ns","namespace","value","width","height","exts","split","map","ext","pop","tipMessage","tipText","join","size","onPreview","file","url","indexOf","console","warn","onRemove","disabled","startsWith","URL","revokeObjectURL","index","splice","previewClose","handleBeforeUpload","name","ElMessage","error","fileExt","toLowerCase","some","createObjectURL","beforeUpload","onProgress","evt","Math","floor","onError","_file","_fileList","message","onSuccess","args","onUnmounted","forEach","_createElementBlock","class","_normalizeClass","_unref","e","style","_createVNode","ElUpload","_mergeProps","$event","drag","limit","headers","action","data","accept","length","_withCtx","src","alt","display","color","background","_createElementVNode","onClick","ZoomIn","Delete","tip","_renderSlot","_ctx","notip","_hoisted_5","_toDisplayString","_hoisted_1","_component_QxsIcon","icon","UploadImage","placeholder","_createBlock","ElImageViewer","item","filter","Boolean","teleported","onClose"],"mappings":"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"}
+{"version":3,"file":"image-upload.vue.cjs","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Delete, UploadImage, ZoomIn } from '@qxs-bns/icons'\nimport { ElImageViewer, ElMessage, ElUpload, useNamespace } from 'element-plus'\nimport { computed, onUnmounted, ref, useAttrs } from 'vue'\n\n// 类型定义\nexport interface ImageUploadProps {\n  /** 上传地址（必需） */\n  action: UploadProps['action']\n  /** 请求头 */\n  headers?: UploadProps['headers']\n  /** 上传时附带的额外参数 */\n  data?: UploadProps['data']\n  /** 上传的文件字段名 */\n  name?: UploadProps['name']\n  /** 文件大小限制（MB） */\n  size?: number\n  /** 图片显示宽度（px） */\n  width?: number\n  /** 图片显示高度（px） */\n  height?: number\n  /** 接受的文件类型 */\n  accept?: string\n  /** 上传区域提示文字 */\n  placeholder?: string\n  /** 是否隐藏提示文字 */\n  notip?: boolean\n  /** 自定义提示文字 */\n  tipText?: string\n  /** 上传前的钩子函数 */\n  beforeUpload?: UploadProps['beforeUpload']\n  /** 是否禁用 */\n  disabled?: boolean\n  /** 最大上传数量 */\n  limit?: number\n}\n\n// 组件名称\ndefineOptions({\n  name: 'QxsImageUpload',\n})\n\n// Props 定义\nconst {\n  action,\n  headers,\n  data,\n  name = 'file',\n  size = 20,\n  width = 160,\n  height = 90,\n  limit = 1,\n  placeholder = '上传图片',\n  notip = false,\n  accept = 'image/jpeg,image/jpg,image/png,image/gif',\n  beforeUpload,\n  tipText = '',\n  disabled = false,\n} = defineProps<ImageUploadProps>()\n\n// Emits 定义\nconst emits = defineEmits<{\n  success: [res: any, uploadFile: UploadFile, uploadFiles: UploadFiles]\n  remove: [file: UploadFile]\n}>()\n\nconst attrs = useAttrs()\n\nconst fileList = defineModel('fileList', {\n  type: Array as () => UploadFile[],\n  default: () => [],\n})\n\n// 命名空间\nconst nsEl = useNamespace('image-upload')\n\n// 响应式数据\nconst imageViewerVisible = ref(false)\nconst initialIndex = ref(0)\nconst previewUrl = ref('')\nconst uploadProgress = ref(0)\nconst isUploading = ref(false)\n\nconst cssVar = computed(() => {\n  return nsEl.cssVarBlock({\n    ns: nsEl.namespace.value,\n    width: `${width}px`,\n    height: `${height}px`,\n  })\n})\n\n// 计算属性\nconst exts = computed(() =>\n  accept.split(',').map(ext => ext.split('/').pop()),\n)\n\nconst tipMessage = computed(() => {\n  if (tipText) {\n    return tipText\n  }\n\n  const formatText = `支持 ${exts.value.join(' / ')} 格式，大小不超过 ${size}MB`\n  const sizeText = width && height ? `，建议尺寸 ${width}×${height}` : ''\n\n  return formatText + sizeText\n})\n\n// 状态文本转换\nfunction getStatusText(status: string | undefined): string {\n  const statusMap: Record<string, string> = {\n    ready: '准备中',\n    uploading: '上传中',\n    success: '上传成功',\n    fail: '上传失败',\n    error: '上传错误',\n  }\n  return statusMap[status || ''] || status || '未知状态'\n}\n\n// 方法\nfunction onPreview(file: UploadFile) {\n  if (!file.url) {\n    console.warn('文件缺少 URL，无法预览:', file)\n    return\n  }\n\n  // 简化索引查找：优先对象引用，备用 URL 匹配\n  let index = fileList.value.indexOf(file)\n  if (index === -1) {\n    index = fileList.value.findIndex(item => item.url === file.url)\n  }\n\n  initialIndex.value = Math.max(0, index)\n  imageViewerVisible.value = true\n}\n\nfunction onRemove(file: UploadFile) {\n  if (disabled) {\n    return\n  }\n\n  // 如果正在上传，重置上传状态\n  if (file.status === 'uploading' && isUploading.value) {\n    isUploading.value = false\n    uploadProgress.value = 0\n\n    // 清理预览 URL\n    if (previewUrl.value) {\n      URL.revokeObjectURL(previewUrl.value)\n      previewUrl.value = ''\n    }\n  }\n\n  // 清理可能的 Object URL\n  if (file.url?.startsWith('blob:')) {\n    URL.revokeObjectURL(file.url)\n  }\n\n  // 从数组中移除文件\n  const index = fileList.value.indexOf(file)\n  if (index > -1) {\n    fileList.value.splice(index, 1)\n  }\n\n  emits('remove', file)\n}\n\nfunction previewClose() {\n  imageViewerVisible.value = false\n}\n\nconst handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {\n  if (!file?.name) {\n    ElMessage.error('文件信息无效，请重新选择文件')\n    return false\n  }\n\n  // 文件类型校验\n  const fileExt = file.name.split('.').pop()?.toLowerCase() ?? ''\n  const isTypeOk = exts.value.some(ext => ext?.toLowerCase() === fileExt)\n  if (!isTypeOk) {\n    ElMessage.error(`仅支持上传 ${exts.value.join(' / ')} 格式的图片`)\n    return false\n  }\n\n  // 文件大小校验\n  const fileSizeMB = file.size / 1024 / 1024\n  if (fileSizeMB > size) {\n    ElMessage.error(`图片大小不能超过 ${size}MB`)\n    return false\n  }\n\n  // 设置预览和上传状态\n  try {\n    previewUrl.value = URL.createObjectURL(file)\n  }\n  catch (error) {\n    console.warn('创建预览失败:', error)\n  }\n\n  // 开始上传\n  isUploading.value = true\n  uploadProgress.value = 0\n\n  return beforeUpload ? beforeUpload(file) : true\n}\n\nconst onProgress: UploadProps['onProgress'] = (evt) => {\n  uploadProgress.value = Math.floor(evt.percent)\n}\n\nconst onSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {\n  // 检查文件是否还在列表中（可能已被删除）\n  const fileExists = fileList.value.some(file =>\n    file.uid === uploadFile.uid\n    || (file.name === uploadFile.name && file.size === uploadFile.size),\n  )\n\n  // 清理预览 URL 和重置状态\n  if (previewUrl.value) {\n    URL.revokeObjectURL(previewUrl.value)\n    previewUrl.value = ''\n  }\n  isUploading.value = false\n  uploadProgress.value = 0\n\n  // 只有文件还存在时才触发成功回调\n  if (fileExists) {\n    emits('success', response, uploadFile, uploadFiles)\n  }\n}\n\nconst onError: UploadProps['onError'] = (error, uploadFile, _uploadFiles) => {\n  // 检查文件是否还在列表中（可能已被删除）\n  const fileExists = fileList.value.some(file =>\n    file.uid === uploadFile.uid\n    || (file.name === uploadFile.name && file.size === uploadFile.size),\n  )\n\n  // 清理预览 URL 和重置状态\n  if (previewUrl.value) {\n    URL.revokeObjectURL(previewUrl.value)\n    previewUrl.value = ''\n  }\n  isUploading.value = false\n  uploadProgress.value = 0\n\n  // 只有文件还存在时才显示错误信息\n  if (fileExists) {\n    ElMessage.error(`图片上传失败：${error.message || '网络异常，请重试'}`)\n  }\n}\n\n// 组件卸载时清理资源\nonUnmounted(() => {\n  if (previewUrl.value) {\n    URL.revokeObjectURL(previewUrl.value)\n  }\n  // 清理文件列表中的 blob URL\n  fileList.value.forEach((file) => {\n    if (file.url?.startsWith('blob:')) {\n      URL.revokeObjectURL(file.url)\n    }\n  })\n})\n</script>\n\n<template>\n  <div\n    :class=\"nsEl.e('container')\"\n    :style=\"cssVar\"\n  >\n    <ElUpload\n      v-bind=\"attrs\"\n      v-model:file-list=\"fileList\"\n      drag\n      :limit=\"limit\"\n      list-type=\"picture-card\"\n      :headers=\"headers\"\n      :action=\"action\"\n      :data=\"data\"\n      :name=\"name\"\n      :accept=\"accept\"\n      :before-upload=\"handleBeforeUpload\"\n      :on-progress=\"onProgress\"\n      :on-preview=\"onPreview\"\n      :on-success=\"onSuccess\"\n      :on-error=\"onError\"\n      :class=\"[nsEl.e('control'), limit <= fileList.length ? nsEl.e('more-than-limit') : '']\"\n      :on-remove=\"onRemove\"\n    >\n      <slot>\n        <div class=\"image-slot\">\n          <QxsIcon\n            size=\"32px\"\n            :icon=\"UploadImage\"\n          />\n          <p>{{ placeholder }}</p>\n        </div>\n      </slot>\n      <template #file=\"{ file }\">\n        <div style=\"position: relative; width: 100%; height: 100%;\">\n          <img\n            v-if=\"file.url\"\n            :class=\"`${nsEl.namespace.value}-upload-list__item-thumbnail`\"\n            :src=\"file.url\"\n            :alt=\"file.name || '图片'\"\n          >\n          <div\n            v-else\n            :class=\"`${nsEl.namespace.value}-upload-list__item-thumbnail`\"\n            style=\"display: flex; align-items: center; justify-content: center; color: #909399; background: #f5f7fa;\"\n          >\n            无图片\n          </div>\n\n          <!-- 上传进度条 -->\n          <div\n            v-if=\"isUploading\"\n            class=\"upload-progress\"\n          >\n            <div\n              class=\"upload-progress-bar\"\n              :style=\"{ width: `${uploadProgress}%` }\"\n            />\n          </div>\n\n          <!-- 调试信息 -->\n          <div\n            v-if=\"isUploading\"\n            class=\"upload-debug\"\n          >\n            {{ uploadProgress }}% - {{ getStatusText(file.status) }}\n          </div>\n        </div>\n\n        <span :class=\"`${nsEl.namespace.value}-upload-list__item-actions`\">\n          <span\n            v-if=\"file.url\"\n            :class=\"[\n              `${nsEl.namespace.value}-upload-list__item-preview`,\n              `${nsEl.namespace.value}-image-upload__action-btn`,\n              `${nsEl.namespace.value}-image-upload__action-btn--preview`,\n            ]\"\n            @click=\"onPreview(file)\"\n          >\n            <ZoomIn size=\"14px\" />\n          </span>\n          <span\n            v-if=\"file.url\"\n            :class=\"`${nsEl.namespace.value}-upload-list__item-divider`\"\n          />\n          <span\n            :class=\"[\n              `${nsEl.namespace.value}-upload-list__item-delete`,\n              `${nsEl.namespace.value}-image-upload__action-btn`,\n              `${nsEl.namespace.value}-image-upload__action-btn--delete`,\n              disabled ? 'is-disabled' : '',\n            ]\"\n            @click=\"onRemove(file)\"\n          >\n            <Delete size=\"14px\" />\n          </span>\n        </span>\n      </template>\n      <template #tip>\n        <slot name=\"tip\">\n          <div\n            v-if=\"!notip\"\n            :class=\"`${nsEl.namespace.value}-upload__tip-text`\"\n          >\n            <div class=\"tip-content\">\n              {{ tipMessage }}\n            </div>\n          </div>\n        </slot>\n      </template>\n    </ElUpload>\n\n    <ElImageViewer\n      v-if=\"imageViewerVisible\"\n      :url-list=\"fileList.map((item: UploadFile) => item.url!).filter(Boolean)\"\n      :initial-index=\"initialIndex\"\n      :show-progress=\"fileList.length > 1\"\n      teleported\n      @close=\"previewClose\"\n    />\n  </div>\n</template>\n"],"names":["emits","__emit","attrs","useAttrs","fileList","_useModel","__props","nsEl","useNamespace","imageViewerVisible","ref","initialIndex","previewUrl","uploadProgress","isUploading","cssVar","computed","cssVarBlock","ns","namespace","value","width","height","exts","split","map","ext","pop","tipMessage","tipText","join","size","onPreview","file","url","console","warn","index","indexOf","findIndex","item","Math","max","onRemove","disabled","status","URL","revokeObjectURL","startsWith","splice","previewClose","handleBeforeUpload","name","ElMessage","error","fileExt","toLowerCase","some","createObjectURL","beforeUpload","onProgress","evt","floor","percent","onSuccess","response","uploadFile","uploadFiles","fileExists","uid","onError","_uploadFiles","message","onUnmounted","forEach","_createElementBlock","class","_normalizeClass","_unref","e","style","_createVNode","ElUpload","_mergeProps","$event","drag","limit","headers","action","data","accept","length","_withCtx","_createElementVNode","_hoisted_2","src","alt","display","color","background","_createCommentVNode","_openBlock","_hoisted_4","_hoisted_5","_toDisplayString","ready","uploading","success","fail","onClick","ZoomIn","Delete","tip","_renderSlot","_ctx","notip","_hoisted_8","_hoisted_1","_component_QxsIcon","icon","UploadImage","placeholder","_createBlock","ElImageViewer","filter","Boolean","teleported","onClose"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qxs-bns/components",
   "type": "module",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "description": "Vue 3 Component Library",
   "license": "MIT",
   "homepage": "https://qxs-bns.pages.dev/guide/components/overview.html",