ant-design-x-vue-next/lib/attachments/FileList/FileListCard.js

Ant Design X for Vue — community continuation aligned with @ant-design/x

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("../../chunks/module-chunk.js"),R=require("./AudioIcon.js"),A=require("./JavaIcon.js"),M=require("./JavaScriptIcon.js"),B=require("./PythonIcon.js"),D=require("./VideoIcon.js"),z=require("../context.js");require("../../x-provider/index.js");const x=require("../util.js"),U=require("../style/index.js"),W=require("../../_util/hooks/use-state.js"),C=require("ant-design-vue"),o=require("../constants.js"),G=require("../../x-provider/hooks/use-x-provider-context.js"),F=" ",s="#8c8c8c",J=e.defineComponent({name:"AXAttachmentsFileListCard",__name:"FileListCard",props:{prefixCls:null,item:null,onRemove:{type:Function},className:null,style:null,imageProps:null,icon:null,type:null},setup(t,{expose:E}){e.toRef(t,"prefixCls");const N=[{key:"default",icon:e.createVNode(c.FileTextFilled,null,null),color:s,ext:new Set([])},{key:"excel",icon:e.createVNode(c.FileExcelFilled,null,null),color:"#22b35e",ext:o.EXCEL_EXTS},{key:"image",icon:e.createVNode(c.FileImageFilled,null,null),color:s,ext:o.IMG_EXTS},{key:"markdown",icon:e.createVNode(c.FileMarkdownFilled,null,null),color:s,ext:o.MARKDOWN_EXTS},{key:"pdf",icon:e.createVNode(c.FilePdfFilled,null,null),color:"#ff4d4f",ext:o.PDF_EXTS},{key:"ppt",icon:e.createVNode(c.FilePptFilled,null,null),color:"#ff6e31",ext:o.PPT_EXTS},{key:"word",icon:e.createVNode(c.FileWordFilled,null,null),color:"#1677ff",ext:o.WORD_EXTS},{key:"zip",icon:e.createVNode(c.FileZipFilled,null,null),color:"#fab714",ext:o.ZIP_EXTS},{key:"video",icon:e.createVNode(D.default,null,null),color:"#ff4d4f",ext:o.VIDEO_EXTS},{key:"audio",icon:e.createVNode(R.default,null,null),color:"#8c8c8c",ext:o.AUDIO_EXTS},{key:"java",icon:e.createVNode(A.default,null,null),color:"#1677ff",ext:new Set(["java"])},{key:"javascript",icon:e.createVNode(M.default,null,null),color:"#fab714",ext:new Set(["js"])},{key:"python",icon:e.createVNode(B.default,null,null),color:"#fab714",ext:new Set(["py"])}];function k(n){let i=n;const r=["B","KB","MB","GB","TB","PB","EB"];let v=0;for(;i>=1024&&v<r.length-1;)i/=1024,v++;return`${i.toFixed(0)} ${r[v]}`}const P=z.useAttachmentContextInject(),p=e.computed(()=>P.value.disabled),$=e.computed(()=>t.item.name),V=e.computed(()=>t.item.size),d=e.computed(()=>t.item.percent),a=e.computed(()=>t.item.status||"done"),y=e.computed(()=>t.item.description),{getPrefixCls:w}=G.default(),h=e.computed(()=>w("attachment",t.prefixCls)),l=`${h.value}-list-card`,[T,b,q]=U.default(h),O=e.useTemplateRef("file-list-card-container"),u=e.computed(()=>{const n=$.value||"",i=n.match(/^(.*)\.[^.]+$/);return{namePrefix:i?i[1]:n,nameSuffix:i?n.slice(i[1].length):""}}),X=e.computed(()=>x.matchExt(u.value.nameSuffix,o.IMG_EXTS)),S=e.computed(()=>y.value?y.value:a.value==="uploading"?`${d.value||0}%`:a.value==="error"?t.item.response||F:V.value?k(V.value):F),g=e.computed(()=>{if(t.icon)if(typeof t.icon=="string"){const n=N.find(i=>i.key===t.icon);if(n)return{icon:n.icon,color:n.color}}else return{icon:t.icon,color:void 0};for(const{ext:n,icon:i,color:r}of N)if(x.matchExt(u.value.nameSuffix,n))return{icon:i,iconColor:r};return{icon:e.createVNode(c.FileTextFilled,{key:"defaultIcon"},null),iconColor:s}}),[L,I]=W.default();e.watch(()=>t.item.originFileObj,()=>{if(t.item.originFileObj){let n=!0;x.previewImage(t.item.originFileObj).then(i=>{n&&I(i)}),e.onWatcherCleanup(()=>{n=!1})}I(void 0)},{immediate:!0});const m=e.computed(()=>t.item.thumbUrl||t.item.url||L.value),f=e.computed(()=>t.type==="image"||t.type!=="file"&&X.value&&(t.item.originFileObj||m.value)),j=e.computed(()=>f.value?e.createVNode(e.Fragment,null,[m.value&&e.createVNode(C.Image,e.mergeProps(t.imageProps,{alt:"preview",src:m.value}),null),a.value!=="done"&&e.createVNode("div",{class:`${l}-img-mask`},[a.value==="uploading"&&d.value!==void 0&&e.createVNode(C.Progress,{percent:d.value,prefixCls:l},null),a.value==="error"&&e.createVNode("div",{class:`${l}-desc`},[e.createVNode("div",{class:`${l}-ellipsis-prefix`},[S.value])])])]):e.createVNode(e.Fragment,null,[e.createVNode("div",{class:`${l}-icon`,style:{color:g.value.iconColor}},[g.value.icon]),e.createVNode("div",{class:`${l}-content`},[e.createVNode("div",{class:`${l}-name`},[e.createVNode("div",{class:`${l}-ellipsis-prefix`},[u.value.namePrefix??F]),e.createVNode("div",{class:`${l}-ellipsis-suffix`},[u.value.nameSuffix])]),e.createVNode("div",{class:`${l}-desc`},[e.createVNode("div",{class:`${l}-ellipsis-prefix`},[S.value])])])]));return E({nativeElement:O}),()=>T(e.createVNode("div",{class:c.classnames(l,{[`${l}-status-${a.value}`]:a.value,[`${l}-type-preview`]:f.value,[`${l}-type-overview`]:!f.value},t.className,b.value,q),style:t.style,ref:"file-list-card-container"},[j.value,!p.value&&t.onRemove&&e.createVNode("button",{type:"button",class:`${l}-remove`,onClick:()=>{t.onRemove(t.item)}},[e.createVNode(c.CloseCircleFilled,null,null)])]))}});exports.default=J;