vexip-ui/lib/components/upload/upload-file.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../collapse-transition/index.cjs");require("../icon/index.cjs");require("../progress/index.cjs");require("../renderer/index.cjs");const c=require("@vexip-ui/config"),T=require("@vexip-ui/utils"),q=require("./props.cjs"),F=require("./file-icon.cjs"),V=require("./symbol.cjs"),d=require("../renderer/renderer.cjs"),i=require("../icon/icon.cjs"),v=require("../progress/progress.vue2.cjs"),x=require("../collapse/collapse-transition.cjs"),S=["title"],D=["aria-label"],L={style:{"margin-bottom":"0.3em"}},$=["src","alt"],I=["disabled","aria-label"],j=["aria-label"],A=e.defineComponent({name:"UploadFile",__name:"upload-file",props:q.uploadFileProps,setup(z){const y=/\.(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i,B=/^data:image\//;function g(l){if(l.type)return l.type.startsWith("image/");const{name:a,url:t,base64:f}=l;return!!(y.test(a)||t&&(y.test(t)||B.test(t))||f&&B.test(f))}const P=z,n=c.useProps("uploadFile",P,{locale:null,file:{default:()=>({}),static:!0},iconRenderer:{default:null,isFunc:!0},listType:{default:"name",validator:l=>V.uploadListTypes.includes(l)},loadingText:null,selectToAdd:!1,precision:2,canPreview:{default:g,isFunc:!0},slots:()=>({})}),r=c.useNameHelper("upload"),p=c.useLocale("upload",e.toRef(n,"locale")),o=c.useIcons(),k=F.useFileIcons(o),C=e.computed(()=>typeof n.iconRenderer=="function"),m=e.computed(()=>n.file.path||n.file.name),s=e.computed(()=>n.file.status),b=e.computed(()=>T.toFixed(n.file.percentage,n.precision)),h=e.computed(()=>g(n.file)&&(n.file.url||n.file.base64)),u=e.shallowReadonly(e.reactive({file:e.toRef(n,"file"),status:s,percentage:b}));function w(l){return l.name.split(".").pop().toLocaleLowerCase()}function E(l,a=1){const t=w(l),f=t&&k.value[t]||k.value.default;return{...f,scale:+(f.scale||1)*a}}function N(l){c.emitEvent(n.onDelete,l)}function _(l){c.emitEvent(n.onPreview,l)}function R(l){if(!l.source||!g(n.file))return;const a=new FileReader;a.readAsDataURL(l.source),a.onload=()=>{var t;l.status!==V.StatusType.DELETE&&(l.base64=((t=a.result)==null?void 0:t.toString())??null)}}return(l,a)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass([e.unref(r).be("file"),e.unref(r).bem("file",e.unref(n).listType),e.unref(r).bem("file",s.value),e.unref(n).inherit&&e.unref(r).bem("file","inherit")]),title:m.value,tabindex:"-1"},[e.renderSlot(l.$slots,"default",e.normalizeProps(e.guardReactiveProps(e.unref(u))),()=>[e.createVNode(e.unref(d),{renderer:e.unref(n).slots.default,data:e.unref(u)},{default:e.withCtx(()=>[e.unref(n).listType==="name"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).be("label"))},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(r).be("icon"),e.unref(r).be("file-icon")])},[e.renderSlot(l.$slots,"icon",e.normalizeProps(e.guardReactiveProps(e.unref(u))),()=>[e.createVNode(e.unref(d),{renderer:e.unref(n).slots.icon,data:e.unref(u)},{default:e.withCtx(()=>[C.value?(e.openBlock(),e.createBlock(e.unref(d),{key:0,renderer:e.unref(n).iconRenderer,data:{file:e.unref(n).file}},null,8,["renderer","data"])):(e.openBlock(),e.createBlock(e.unref(i),e.normalizeProps(e.mergeProps({key:1},E(e.unref(n).file))),null,16))]),_:1},8,["renderer","data"])])],2),e.createElementVNode("span",{class:e.normalizeClass(e.unref(r).be("filename"))},e.toDisplayString(m.value),3)],2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).be("actions"))},[s.value==="uploading"?(e.openBlock(),e.createElementBlock("span",{key:0,style:{"margin-inline-end":"0.5em"},class:e.normalizeClass(e.unref(r).be("percentage"))},e.toDisplayString(`${b.value}%`),3)):e.createCommentVNode("",!0),s.value==="success"?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(r).be("icon"),e.unref(r).be("success")])},[e.createVNode(e.unref(i),e.normalizeProps(e.guardReactiveProps(e.unref(o).success)),null,16)],2)):s.value==="fail"?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass([e.unref(r).be("icon"),e.unref(r).be("fail")])},[e.createVNode(e.unref(i),e.normalizeProps(e.guardReactiveProps(e.unref(o).warning)),null,16)],2)):s.value==="uploading"?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass([e.unref(r).be("icon"),e.unref(r).be("loading")])},[e.createVNode(e.unref(i),e.normalizeProps(e.guardReactiveProps(e.unref(o).loading)),null,16)],2)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:e.normalizeClass([e.unref(r).be("icon"),e.unref(r).be("close")]),"aria-label":e.unref(p).ariaLabel.delete,onClick:a[0]||(a[0]=t=>N(e.unref(n).file))},[e.createVNode(e.unref(i),e.normalizeProps(e.guardReactiveProps(e.unref(o).delete)),null,16)],10,D)],2),s.value==="uploading"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r).be("progress"))},[e.createVNode(e.unref(v),{inherit:"","info-type":"none","stroke-width":2,percentage:e.unref(n).file.percentage,precision:e.unref(n).precision},null,8,["percentage","precision"])],2)):e.createCommentVNode("",!0)],64)):e.unref(n).listType==="thumbnail"||e.unref(n).listType==="card"?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(r).be("card"))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).be("thumbnail"))},[s.value==="uploading"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.unref(n).listType==="thumbnail"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r).be("progress"))},[e.createElementVNode("span",L,e.toDisplayString(e.unref(n).loadingText??e.unref(p).uploading),1),e.createVNode(e.unref(v),{inherit:"","info-type":"none","stroke-width":2,percentage:e.unref(n).file.percentage,precision:e.unref(n).precision},null,8,["percentage","precision"]),e.createElementVNode("span",{style:{"margin-top":"3px"},class:e.normalizeClass(e.unref(r).be("percentage"))},e.toDisplayString(`${b.value}%`),3)],2)):(e.openBlock(),e.createBlock(e.unref(i),e.mergeProps({key:1},e.unref(o).loading,{scale:+(e.unref(o).loading.scale||1)*1.8,label:"loading"}),null,16,["scale"]))],64)):h.value?(e.openBlock(),e.createElementBlock("img",{key:1,class:e.normalizeClass(e.unref(r).be("image")),src:e.unref(n).file.url||e.unref(n).file.base64||"",alt:m.value},null,10,$)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createTextVNode(e.toDisplayString(R(e.unref(n).file))+" ",1),e.renderSlot(l.$slots,"icon",e.normalizeProps(e.guardReactiveProps(e.unref(u))),()=>[e.createVNode(e.unref(d),{renderer:e.unref(n).slots.icon,data:e.unref(u)},{default:e.withCtx(()=>[C.value?(e.openBlock(),e.createBlock(e.unref(d),{key:0,renderer:e.unref(n).iconRenderer,data:{file:e.unref(n).file}},null,8,["renderer","data"])):(e.openBlock(),e.createBlock(e.unref(i),e.normalizeProps(e.mergeProps({key:1},E(e.unref(n).file,2.8))),null,16))]),_:1},8,["renderer","data"])])],64))],2),e.unref(n).listType==="card"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r).be("info"))},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(r).be("filename"))},e.toDisplayString(m.value),3),e.createVNode(e.unref(x),null,{default:e.withCtx(()=>[s.value==="uploading"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r).be("progress"))},[e.createVNode(e.unref(v),{inherit:"","info-type":"none","stroke-width":4,percentage:e.unref(n).file.percentage,precision:e.unref(n).precision},null,8,["percentage","precision"])],2)):e.createCommentVNode("",!0)]),_:1})],2)):e.createCommentVNode("",!0),e.unref(n).listType==="card"||s.value!=="uploading"?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(r).be("actions"))},[e.unref(n).listType==="thumbnail"?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(r).be("mask"))},null,2)):e.createCommentVNode("",!0),e.createElementVNode("button",{type:"button",class:e.normalizeClass([e.unref(r).be("icon"),e.unref(r).be("action"),{[e.unref(r).bem("action","disabled")]:!e.unref(n).canPreview(e.unref(n).file)}]),disabled:!e.unref(n).canPreview(e.unref(n).file),"aria-label":e.unref(p).ariaLabel.preview,onClick:a[1]||(a[1]=t=>_(e.unref(n).file))},[e.createVNode(e.unref(i),e.mergeProps(e.unref(o).preview,{scale:+(e.unref(o).preview.scale||1)*1.4}),null,16,["scale"])],10,I),e.createElementVNode("button",{type:"button",class:e.normalizeClass([e.unref(r).be("icon"),e.unref(r).be("action")]),"aria-label":e.unref(p).ariaLabel.delete,onClick:a[2]||(a[2]=t=>N(e.unref(n).file))},[e.createVNode(e.unref(i),e.mergeProps(e.unref(o).delete,{scale:+(e.unref(o).delete.scale||1)*1.4}),null,16,["scale"])],10,j)],2)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0)]),_:3},8,["renderer","data"])])],10,S))}});module.exports=A;
//# sourceMappingURL=upload-file.vue2.cjs.map