@qxs-bns/components 0.0.61 → 0.0.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/package.json.mjs +1 -1
- package/es/src/image-upload/src/image-upload.vue.mjs +1 -1
- package/es/src/image-upload/src/image-upload.vue.mjs.map +1 -1
- package/lib/package.json.cjs +1 -1
- package/lib/src/image-upload/src/image-upload.vue.cjs +1 -1
- package/lib/src/image-upload/src/image-upload.vue.cjs.map +1 -1
- package/package.json +2 -2
- package/types/src/image-upload/src/image-upload.vue.d.ts +2 -2
- package/types/src/image-upload/src/image-upload.vue.d.ts.map +1 -1
- package/types/tsconfig.tsbuildinfo +1 -1
package/es/package.json.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var r="0.0.
|
|
1
|
+
var r="0.0.62";export{r as version};
|
|
2
2
|
//# sourceMappingURL=package.json.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ElUpload as e,
|
|
1
|
+
import{ElUpload as e,ElImageViewer as i,ElMessage as t}from"element-plus/es";import"element-plus/es/components/base/style/index";import"element-plus/es/components/image-viewer/style/index";import"element-plus/es/components/upload/style/index";import{defineComponent as l,mergeModels as a,useAttrs as s,useModel as r,ref as p,computed as n,createElementBlock as o,openBlock as u,normalizeStyle as d,normalizeClass as m,unref as c,createVNode as f,createBlock as v,createCommentVNode as g,mergeProps as y,withCtx as h,renderSlot as b,createElementVNode as q,toDisplayString as x}from"vue";import{Plus as $}from"@element-plus/icons-vue";import{ZoomIn as w,Delete as _}from"@qxs-bns/icons";import{useNamespace as V}from"element-plus";import"element-plus/es/components/message/style/index";const k={class:"image-slot"},S=["src"],L=["onClick"],U=["onClick"],j={class:"tip-content"};var z=l({name:"QxsImageUpload",__name:"image-upload",props:a({action:{type:String,required:!0},headers:{type:null,required:!1},data:{type:null,required:!1},name:{type:String,required:!1,default:"file"},url:{type:String,required:!1},size:{type:Number,required:!1,default:20},width:{type:Number,required:!1,default:160},accept:{type:String,required:!1,default:"image/jpeg,image/jpg,image/png,image/gif"},height:{type:Number,required:!1,default:90},placeholder:{type:String,required:!1,default:"上传图片"},notip:{type:Boolean,required:!1,default:!1},tipText:{type:String,required:!1,default:""},beforeUpload:{type:null,required:!1},disabled:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:1}},{fileList:{type:Array,default:()=>[]},fileListModifiers:{}}),emits:a(["onSuccess","remove"],["update:fileList"]),setup(l,{emit:a}){const z=a,B=s(),C=r(l,"fileList"),M=V("image-upload"),N=p(0),O=p({imageViewerVisible:!1,progress:{preview:"",percent:0}}),R=n(()=>M.cssVarBlock({ns:M.namespace.value,width:`${l.width||160}px`,height:`${l.height||90}px`})),T=n(()=>l.accept.split(",").map(e=>e.split("/").pop())),A=n(()=>l.tipText||`上传图片支持 ${T.value.join(" / ")} 格式，且图片大小不超过 ${l.size}MB${l.width&&l.height?`，建议图片尺寸为 ${l.width}*${l.height}`:""}`);function I(e){N.value=C.value.indexOf(e),O.value.imageViewerVisible=!0}function Q(e){C.value.splice(C.value.indexOf(e),1)}function D(){O.value.imageViewerVisible=!1}const E=e=>{const i=e.name.split(".").pop()??"",a=T.value.includes(i),s=e.size/1024/1024<l.size;return a?s?(O.value.progress.preview=URL.createObjectURL(e),!l.beforeUpload||l.beforeUpload(e)):(t.error(`上传图片大小不能超过 ${l.size}MB！`),!1):(t.error(`上传图片只支持${T.value.join(" / ")}格式！`),!1)},F=e=>{O.value.progress.percent=Math.floor(e.percent)},G=(...e)=>{O.value.progress={preview:"",percent:0},z("onSuccess",...e)};return(t,l)=>{const a=e,s=i;return u(),o("div",{class:m(c(M).e("container")),style:d(c(R))},[f(a,y(c(B),{"file-list":C.value,"onUpdate:fileList":l[0]||(l[0]=e=>C.value=e),drag:"",limit:t.limit,"list-type":"picture-card",headers:t.headers,action:t.action,data:t.data,name:t.name,accept:t.accept,"before-upload":E,"on-progress":F,"on-preview":I,"on-success":G,class:[c(M).e("control"),t.limit<=C.value.length?c(M).e("more-than-limit"):""],"on-remove":Q}),{file:h(({file:e})=>[q("img",{class:m(`${c(M).namespace.value}-upload-list__item-thumbnail`),src:e.url,alt:""},null,10,S),q("span",{class:m(`${c(M).namespace.value}-upload-list__item-actions`)},[q("span",{class:m(`${c(M).namespace.value}-upload-list__item-preview`),onClick:i=>I(e)},[f(c(w))],10,L),t.disabled?g("v-if",!0):(u(),o("span",{key:0,class:m(`${c(M).namespace.value}-upload-list__item-delete`),onClick:i=>Q(e)},[f(c(_))],10,U))],2)]),tip:h(()=>[b(t.$slots,"tip",{},()=>[t.notip?g("v-if",!0):(u(),o("div",{key:0,class:m(`${c(M).namespace.value}-upload__tip-text`)},[q("div",j,x(c(A)),1)],2))])]),default:h(()=>[b(t.$slots,"default",{},()=>[q("div",k,[f(c($)),q("p",null,x(t.placeholder),1)])])]),_:3},16,["file-list","limit","headers","action","data","name","accept","class"]),c(O).imageViewerVisible?(u(),v(s,{key:0,"url-list":C.value.map(e=>e.url).filter(e=>void 0!==e),"initial-index":c(N),teleported:"",onClose:D},null,8,["url-list","initial-index"])):g("v-if",!0)],6)}}});export{z as default};
|
|
2
2
|
//# sourceMappingURL=image-upload.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-upload.vue.mjs","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport {
|
|
1
|
+
{"version":3,"file":"image-upload.vue.mjs","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Plus } from '@element-plus/icons-vue'\nimport { ZoomIn, Delete } from '@qxs-bns/icons'\nimport { useNamespace } from 'element-plus'\n\n// 组件名称\ndefineOptions({\n name: 'QxsImageUpload',\n})\n\n// Props 定义\nconst {\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 onSuccess: [res: any, uploadFile: UploadFile, uploadFiles: UploadFiles]\n remove: [file: UploadFile]\n}>()\n\n// 类型定义\nexport interface ImageUploadProps {\n action: UploadProps['action']\n headers?: UploadProps['headers']\n data?: UploadProps['data']\n name?: UploadProps['name']\n url?: string\n size?: number\n width?: number\n accept?: string\n height?: number\n placeholder?: string\n notip?: boolean\n tipText?: string\n beforeUpload?: UploadProps['beforeUpload']\n disabled?: boolean\n limit?: number\n}\n\ninterface UploadProgress {\n preview: string\n percent: number\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 || 160}px`,\n height: `${height || 90}px`,\n })\n})\n\n// 计算属性\nconst exts = computed(() =>\n accept.split(',').map(ext => ext.split('/').pop()),\n)\n\nconst tipMessage = computed(\n () =>\n tipText\n || `上传图片支持 ${exts.value.join(\n ' / ',\n )} 格式，且图片大小不超过 ${size}MB${width && height ? `，建议图片尺寸为 ${width}*${height}` : ''}`,\n)\n\n// 方法\nfunction onPreview(file: UploadFile) {\n initialIndex.value = fileList.value.indexOf(file)\n uploadData.value.imageViewerVisible = true\n}\nfunction onRemove(file: UploadFile) {\n fileList.value.splice(fileList.value.indexOf(file), 1)\n}\n\nfunction previewClose() {\n uploadData.value.imageViewerVisible = false\n}\n\nconst handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {\n const fileExt = file.name.split('.').pop() ?? ''\n const isTypeOk = exts.value.includes(fileExt)\n const isSizeOk = file.size / 1024 / 1024 < size\n\n if (!isTypeOk) {\n ElMessage.error(`上传图片只支持${exts.value.join(' / ')}格式！`)\n return false\n }\n\n if (!isSizeOk) {\n ElMessage.error(`上传图片大小不能超过 ${size}MB！`)\n return false\n }\n\n uploadData.value.progress.preview = URL.createObjectURL(file)\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 onSuccess: UploadProps['onSuccess'] = (...args) => {\n uploadData.value.progress = {\n preview: '',\n percent: 0,\n }\n emits('onSuccess', ...args)\n}\n</script>\n\n<template>\n <div\n :class=\"nsEl.e('container')\"\n :style=\"cssVar\"\n >\n <el-upload\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 :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 <Plus />\n <p>{{ placeholder }}</p>\n </div>\n </slot>\n <template #file=\"{ file }\">\n <img\n :class=\"`${nsEl.namespace.value}-upload-list__item-thumbnail`\"\n :src=\"file.url\"\n alt=\"\"\n >\n <span :class=\"`${nsEl.namespace.value}-upload-list__item-actions`\">\n <span\n :class=\"`${nsEl.namespace.value}-upload-list__item-preview`\"\n @click=\"onPreview(file)\"\n >\n <ZoomIn />\n </span>\n <span\n v-if=\"!disabled\"\n :class=\"`${nsEl.namespace.value}-upload-list__item-delete`\"\n @click=\"onRemove(file)\"\n >\n <Delete />\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 </el-upload>\n\n <el-image-viewer\n v-if=\"uploadData.imageViewerVisible\"\n :url-list=\"fileList.map((item: UploadFile) => item.url).filter((v: string | undefined) => v !== undefined)\"\n :initial-index=\"initialIndex\"\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","indexOf","onRemove","splice","previewClose","handleBeforeUpload","fileExt","name","isTypeOk","includes","isSizeOk","URL","createObjectURL","beforeUpload","ElMessage","error","onProgress","evt","Math","floor","onSuccess","args","_createElementBlock","class","_normalizeClass","_unref","e","style","_createVNode","_component_el_upload","_mergeProps","$event","drag","limit","headers","action","data","accept","length","_withCtx","_createElementVNode","src","url","alt","onClick","ZoomIn","disabled","Delete","tip","_renderSlot","_ctx","notip","_hoisted_5","_toDisplayString","_hoisted_1","Plus","placeholder","_createBlock","_component_el_image_viewer","item","filter","v","teleported","onClose"],"mappings":"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"}
|
package/lib/package.json.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";exports.version="0.0.
|
|
1
|
+
"use strict";exports.version="0.0.62";
|
|
2
2
|
//# sourceMappingURL=package.json.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("element-plus/es");require("element-plus/es/components/base/style/index"),require("element-plus/es/components/image-viewer/style/index"),require("element-plus/es/components/upload/style/index")
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("element-plus/es");require("element-plus/es/components/base/style/index"),require("element-plus/es/components/image-viewer/style/index"),require("element-plus/es/components/upload/style/index");var t=require("vue"),l=require("@element-plus/icons-vue"),i=require("@qxs-bns/icons"),r=require("element-plus");require("element-plus/es/components/message/style/index");const a={class:"image-slot"},s=["src"],n=["onClick"],o=["onClick"],u={class:"tip-content"};var p=t.defineComponent({name:"QxsImageUpload",__name:"image-upload",props:t.mergeModels({action:{type:String,required:!0},headers:{type:null,required:!1},data:{type:null,required:!1},name:{type:String,required:!1,default:"file"},url:{type:String,required:!1},size:{type:Number,required:!1,default:20},width:{type:Number,required:!1,default:160},accept:{type:String,required:!1,default:"image/jpeg,image/jpg,image/png,image/gif"},height:{type:Number,required:!1,default:90},placeholder:{type:String,required:!1,default:"上传图片"},notip:{type:Boolean,required:!1,default:!1},tipText:{type:String,required:!1,default:""},beforeUpload:{type:null,required:!1},disabled:{type:Boolean,required:!1,default:!1},limit:{type:Number,required:!1,default:1}},{fileList:{type:Array,default:()=>[]},fileListModifiers:{}}),emits:t.mergeModels(["onSuccess","remove"],["update:fileList"]),setup(p,{emit:d}){const c=d,m=t.useAttrs(),f=t.useModel(p,"fileList"),g=r.useNamespace("image-upload"),v=t.ref(0),y=t.ref({imageViewerVisible:!1,progress:{preview:"",percent:0}}),h=t.computed(()=>g.cssVarBlock({ns:g.namespace.value,width:`${p.width||160}px`,height:`${p.height||90}px`})),q=t.computed(()=>p.accept.split(",").map(e=>e.split("/").pop())),V=t.computed(()=>p.tipText||`上传图片支持 ${q.value.join(" / ")} 格式，且图片大小不超过 ${p.size}MB${p.width&&p.height?`，建议图片尺寸为 ${p.width}*${p.height}`:""}`);function x(e){v.value=f.value.indexOf(e),y.value.imageViewerVisible=!0}function b(e){f.value.splice(f.value.indexOf(e),1)}function w(){y.value.imageViewerVisible=!1}const C=t=>{const l=t.name.split(".").pop()??"",i=q.value.includes(l),r=t.size/1024/1024<p.size;return i?r?(y.value.progress.preview=URL.createObjectURL(t),!p.beforeUpload||p.beforeUpload(t)):(e.ElMessage.error(`上传图片大小不能超过 ${p.size}MB！`),!1):(e.ElMessage.error(`上传图片只支持${q.value.join(" / ")}格式！`),!1)},N=e=>{y.value.progress.percent=Math.floor(e.percent)},k=(...e)=>{y.value.progress={preview:"",percent:0},c("onSuccess",...e)};return(r,p)=>{const d=e.ElUpload,c=e.ElImageViewer;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(t.unref(g).e("container")),style:t.normalizeStyle(t.unref(h))},[t.createVNode(d,t.mergeProps(t.unref(m),{"file-list":f.value,"onUpdate:fileList":p[0]||(p[0]=e=>f.value=e),drag:"",limit:r.limit,"list-type":"picture-card",headers:r.headers,action:r.action,data:r.data,name:r.name,accept:r.accept,"before-upload":C,"on-progress":N,"on-preview":x,"on-success":k,class:[t.unref(g).e("control"),r.limit<=f.value.length?t.unref(g).e("more-than-limit"):""],"on-remove":b}),{file:t.withCtx(({file:e})=>[t.createElementVNode("img",{class:t.normalizeClass(`${t.unref(g).namespace.value}-upload-list__item-thumbnail`),src:e.url,alt:""},null,10,s),t.createElementVNode("span",{class:t.normalizeClass(`${t.unref(g).namespace.value}-upload-list__item-actions`)},[t.createElementVNode("span",{class:t.normalizeClass(`${t.unref(g).namespace.value}-upload-list__item-preview`),onClick:t=>x(e)},[t.createVNode(t.unref(i.ZoomIn))],10,n),r.disabled?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(`${t.unref(g).namespace.value}-upload-list__item-delete`),onClick:t=>b(e)},[t.createVNode(t.unref(i.Delete))],10,o))],2)]),tip:t.withCtx(()=>[t.renderSlot(r.$slots,"tip",{},()=>[r.notip?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(`${t.unref(g).namespace.value}-upload__tip-text`)},[t.createElementVNode("div",u,t.toDisplayString(t.unref(V)),1)],2))])]),default:t.withCtx(()=>[t.renderSlot(r.$slots,"default",{},()=>[t.createElementVNode("div",a,[t.createVNode(t.unref(l.Plus)),t.createElementVNode("p",null,t.toDisplayString(r.placeholder),1)])])]),_:3},16,["file-list","limit","headers","action","data","name","accept","class"]),t.unref(y).imageViewerVisible?(t.openBlock(),t.createBlock(c,{key:0,"url-list":f.value.map(e=>e.url).filter(e=>void 0!==e),"initial-index":t.unref(v),teleported:"",onClose:w},null,8,["url-list","initial-index"])):t.createCommentVNode("v-if",!0)],6)}}});exports.default=p;
|
|
2
2
|
//# sourceMappingURL=image-upload.vue.cjs.map
|
|
@@ -1 +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 {
|
|
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 { Plus } from '@element-plus/icons-vue'\nimport { ZoomIn, Delete } from '@qxs-bns/icons'\nimport { useNamespace } from 'element-plus'\n\n// 组件名称\ndefineOptions({\n name: 'QxsImageUpload',\n})\n\n// Props 定义\nconst {\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 onSuccess: [res: any, uploadFile: UploadFile, uploadFiles: UploadFiles]\n remove: [file: UploadFile]\n}>()\n\n// 类型定义\nexport interface ImageUploadProps {\n action: UploadProps['action']\n headers?: UploadProps['headers']\n data?: UploadProps['data']\n name?: UploadProps['name']\n url?: string\n size?: number\n width?: number\n accept?: string\n height?: number\n placeholder?: string\n notip?: boolean\n tipText?: string\n beforeUpload?: UploadProps['beforeUpload']\n disabled?: boolean\n limit?: number\n}\n\ninterface UploadProgress {\n preview: string\n percent: number\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 || 160}px`,\n height: `${height || 90}px`,\n })\n})\n\n// 计算属性\nconst exts = computed(() =>\n accept.split(',').map(ext => ext.split('/').pop()),\n)\n\nconst tipMessage = computed(\n () =>\n tipText\n || `上传图片支持 ${exts.value.join(\n ' / ',\n )} 格式，且图片大小不超过 ${size}MB${width && height ? `，建议图片尺寸为 ${width}*${height}` : ''}`,\n)\n\n// 方法\nfunction onPreview(file: UploadFile) {\n initialIndex.value = fileList.value.indexOf(file)\n uploadData.value.imageViewerVisible = true\n}\nfunction onRemove(file: UploadFile) {\n fileList.value.splice(fileList.value.indexOf(file), 1)\n}\n\nfunction previewClose() {\n uploadData.value.imageViewerVisible = false\n}\n\nconst handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {\n const fileExt = file.name.split('.').pop() ?? ''\n const isTypeOk = exts.value.includes(fileExt)\n const isSizeOk = file.size / 1024 / 1024 < size\n\n if (!isTypeOk) {\n ElMessage.error(`上传图片只支持${exts.value.join(' / ')}格式！`)\n return false\n }\n\n if (!isSizeOk) {\n ElMessage.error(`上传图片大小不能超过 ${size}MB！`)\n return false\n }\n\n uploadData.value.progress.preview = URL.createObjectURL(file)\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 onSuccess: UploadProps['onSuccess'] = (...args) => {\n uploadData.value.progress = {\n preview: '',\n percent: 0,\n }\n emits('onSuccess', ...args)\n}\n</script>\n\n<template>\n <div\n :class=\"nsEl.e('container')\"\n :style=\"cssVar\"\n >\n <el-upload\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 :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 <Plus />\n <p>{{ placeholder }}</p>\n </div>\n </slot>\n <template #file=\"{ file }\">\n <img\n :class=\"`${nsEl.namespace.value}-upload-list__item-thumbnail`\"\n :src=\"file.url\"\n alt=\"\"\n >\n <span :class=\"`${nsEl.namespace.value}-upload-list__item-actions`\">\n <span\n :class=\"`${nsEl.namespace.value}-upload-list__item-preview`\"\n @click=\"onPreview(file)\"\n >\n <ZoomIn />\n </span>\n <span\n v-if=\"!disabled\"\n :class=\"`${nsEl.namespace.value}-upload-list__item-delete`\"\n @click=\"onRemove(file)\"\n >\n <Delete />\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 </el-upload>\n\n <el-image-viewer\n v-if=\"uploadData.imageViewerVisible\"\n :url-list=\"fileList.map((item: UploadFile) => item.url).filter((v: string | undefined) => v !== undefined)\"\n :initial-index=\"initialIndex\"\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","indexOf","onRemove","splice","previewClose","handleBeforeUpload","fileExt","name","isTypeOk","includes","isSizeOk","URL","createObjectURL","beforeUpload","ElMessage","error","onProgress","evt","Math","floor","onSuccess","args","_createElementBlock","class","_normalizeClass","_unref","e","style","_createVNode","_component_el_upload","_mergeProps","$event","drag","limit","headers","action","data","accept","length","_withCtx","_createElementVNode","src","url","alt","onClick","ZoomIn","disabled","Delete","tip","_renderSlot","_ctx","notip","_hoisted_5","_toDisplayString","_hoisted_1","Plus","placeholder","_createBlock","_component_el_image_viewer","item","filter","v","teleported","onClose"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qxs-bns/components",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.62",
|
|
5
5
|
"description": "Vue 3 Component Library",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://trry-hub.github.io/qxs-bns/",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@iconify/vue": "^5.0.0",
|
|
46
46
|
"@qxs-bns/directives": "0.0.19",
|
|
47
47
|
"@qxs-bns/hooks": "0.0.5",
|
|
48
|
-
"@qxs-bns/icons": "0.0.
|
|
48
|
+
"@qxs-bns/icons": "0.0.5",
|
|
49
49
|
"@qxs-bns/utils": "0.0.26",
|
|
50
50
|
"@vueuse/core": "^11.3.0",
|
|
51
51
|
"echarts": "^5.5.1",
|
|
@@ -21,11 +21,11 @@ declare const fileList: import("vue").ModelRef<UploadFile[], string, UploadFile[
|
|
|
21
21
|
type __VLS_PublicProps = __VLS_Props & {
|
|
22
22
|
'fileList'?: typeof fileList['value'];
|
|
23
23
|
};
|
|
24
|
-
declare var __VLS_5: {},
|
|
24
|
+
declare var __VLS_5: {}, __VLS_19: {};
|
|
25
25
|
type __VLS_Slots = {} & {
|
|
26
26
|
default?: (props: typeof __VLS_5) => any;
|
|
27
27
|
} & {
|
|
28
|
-
tip?: (props: typeof
|
|
28
|
+
tip?: (props: typeof __VLS_19) => any;
|
|
29
29
|
};
|
|
30
30
|
declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
31
31
|
onSuccess: (res: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-upload.vue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"names":[],"mappings":"AAAA,OA8NO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAWxE,KAAK,WAAW,GAAG,gBAAgB,CAAC;AAuBpC,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AASD,QAAA,MAAM,QAAQ,0EAGZ,CAAA;AAyFF,KAAK,iBAAiB,GAAG,WAAW,GAAG;IACvC,UAAU,CAAC,EAAE,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC;CACrC,CAAC;
|
|
1
|
+
{"version":3,"file":"image-upload.vue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"names":[],"mappings":"AAAA,OA8NO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAWxE,KAAK,WAAW,GAAG,gBAAgB,CAAC;AAuBpC,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AASD,QAAA,MAAM,QAAQ,0EAGZ,CAAA;AAyFF,KAAK,iBAAiB,GAAG,WAAW,GAAG;IACvC,UAAU,CAAC,EAAE,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC;CACrC,CAAC;AAuJF,QAAA,IAAI,OAAO,IAAU,EAAE,QAAQ,IAAY,CAAE;AAC7C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAoC5C,QAAA,MAAM,eAAe;;;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|