@qxs-bns/components 0.0.6 → 0.0.7

package/index.cjs

@@ -1 +1 @@
-"use strict";var Ee=Object.defineProperty,$e=Object.defineProperties;var ke=Object.getOwnPropertyDescriptors;var q=Object.getOwnPropertySymbols;var pe=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var de=(t,l,o)=>l in t?Ee(t,l,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[l]=o,Q=(t,l)=>{for(var o in l||(l={}))pe.call(l,o)&&de(t,o,l[o]);if(q)for(var o of q(l))fe.call(l,o)&&de(t,o,l[o]);return t},te=(t,l)=>$e(t,ke(l));var oe=(t,l)=>{var o={};for(var n in t)pe.call(t,n)&&l.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&q)for(var n of q(t))l.indexOf(n)<0&&fe.call(t,n)&&(o[n]=t[n]);return o};var ve=(t,l,o)=>new Promise((n,u)=>{var i=h=>{try{p(o.next(h))}catch(r){u(r)}},f=h=>{try{p(o.throw(h))}catch(r){u(r)}},p=h=>h.done?n(h.value):Promise.resolve(h.value).then(i,f);p((o=o.apply(t,l)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),O=require("./vendor.cjs");function K(t,l){return t.install=o=>{for(const n of[t,...Object.values({})])o.component(n.name,n)},t}const ne="qxs",_e="is-";function A(t,l,o,n,u){let i=`${t}-${l}`;return o&&(i+=`-${o}`),n&&(i+=`__${n}`),u&&(i+=`--${u}`),i}const ze=Symbol("namespaceContextKey");function Be(t){const l=e.getCurrentInstance()?e.inject(ze,e.ref(ne)):e.ref(ne);return e.computed(()=>e.unref(l)||ne)}function J(t,l){const o=Be();return{namespace:o,b:(n="")=>A(o.value,t,n,"",""),e:n=>n?A(o.value,t,"",n,""):"",m:n=>n?A(o.value,t,"","",n):"",be:(n,u)=>n&&u?A(o.value,t,n,u,""):"",em:(n,u)=>n&&u?A(o.value,t,"",n,u):"",bm:(n,u)=>n&&u?A(o.value,t,n,"",u):"",bem:(n,u,i)=>n&&u&&i?A(o.value,t,n,u,i):"",is:(n,...u)=>{const i=u.length>=1?u[0]:!0;return n&&i?`${_e}${n}`:""},cssVar:n=>{const u={};for(const i in n)n[i]&&(u[`--${o.value}-${i}`]=n[i]);return u},cssVarName:n=>`--${o.value}-${n}`,cssVarBlock:n=>{const u={};for(const i in n)n[i]&&(u[`--${o.value}-${t}-${i}`]=n[i]);return u},cssVarBlockName:n=>`--${o.value}-${t}-${n}`}}const Ve={class:"slot"},Ne={key:0,class:"el-upload__tip"},Se={style:{display:"inline-block"}},Re=e.defineComponent({name:"QxsFileUpload",__name:"file-upload",props:{action:{},headers:{},data:{},name:{default:"file"},size:{default:20},max:{default:3},accept:{default:"zip,rar"},files:{default:()=>[]},notip:{type:Boolean,default:!1},ext:{}},emits:["onSuccess"],setup(t,{emit:l}){const o=t,n=l,u=J("file-upload"),i=e.computed(()=>o.accept.split(",").map(r=>r.split("/").pop())),f=r=>{var s;const c=(s=r.name.split(".").at(-1))!=null?s:"",d=i.value.includes(c),a=r.size/1024/1024<o.size;return d||O.ElMessage.error(`上传文件只支持 ${i.value.join(" / ")} 格式！`),a||O.ElMessage.error(`上传文件大小不能超过 ${o.size}MB！`),d&&a},p=()=>{O.ElMessage.warning("文件上传超过限制")},h=(r,v,c)=>{n("onSuccess",r,v,c)};return(r,v)=>{const c=e.resolveComponent("el-icon"),d=e.resolveComponent("el-alert"),a=e.resolveComponent("el-upload");return e.openBlock(),e.createBlock(a,{headers:r.headers,action:r.action,data:r.data,name:r.name,"before-upload":f,"on-exceed":p,"on-success":h,"file-list":r.files,limit:r.max,drag:"",class:e.normalizeClass(e.unref(u).e("control"))},{tip:e.withCtx(()=>[r.notip?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ne,[e.createElementVNode("div",Se,[e.createVNode(d,{title:`上传文件支持 ${i.value.join(" / ")} 格式，单个文件大小不超过 ${r.size}MB，且文件数量不超过 ${r.max} 个`,type:"info","show-icon":"",closable:!1},null,8,["title"])])]))]),default:e.withCtx(()=>[e.createElementVNode("div",Ve,[e.createVNode(c,{class:"el-icon--upload"},{default:e.withCtx(()=>[e.createVNode(e.unref(O.upload_filled_default))]),_:1}),v[0]||(v[0]=e.createElementVNode("div",{class:"el-upload__text"},[e.createTextVNode(" 将文件拖到此处，或"),e.createElementVNode("em",null,"点击上传")],-1))])]),_:1},8,["headers","action","data","name","file-list","limit","class"])}}}),he=K(Re);function Me(t,l){let o,n,u;const i=e.ref(!0),f=()=>{i.value=!0,u()};e.watch(t,f,{flush:"sync"});const p=typeof l=="function"?l:l.get,h=typeof l=="function"?void 0:l.set,r=e.customRef((v,c)=>(n=v,u=c,{get(){return i.value&&(o=p(),i.value=!1),n(),o},set(d){h==null||h(d)}}));return Object.isExtensible(r)&&(r.trigger=f),r}function le(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function z(t){return typeof t=="function"?t():e.unref(t)}const me=typeof window!="undefined"&&typeof document!="undefined";typeof WorkerGlobalScope!="undefined"&&globalThis instanceof WorkerGlobalScope;const He=t=>t!=null,Oe=Object.prototype.toString,Te=t=>Oe.call(t)==="[object Object]",We=()=>{};function Ie(t){return e.getCurrentInstance()}function Ae(t,l={}){if(!e.isRef(t))return e.toRefs(t);const o=Array.isArray(t.value)?Array.from({length:t.value.length}):{};for(const n in t.value)o[n]=e.customRef(()=>({get(){return t.value[n]},set(u){var i;if((i=z(l.replaceRef))!=null?i:!0)if(Array.isArray(t.value)){const p=[...t.value];p[n]=u,t.value=p}else{const p=te(Q({},t.value),{[n]:u});Object.setPrototypeOf(p,Object.getPrototypeOf(t.value)),t.value=p}else t.value[n]=u}}));return o}function ae(t,l=!0,o){Ie()?e.onMounted(t,o):l?t():e.nextTick(t)}function R(t){var l;const o=z(t);return(l=o==null?void 0:o.$el)!=null?l:o}const Y=me?window:void 0;function j(...t){let l,o,n,u;if(typeof t[0]=="string"||Array.isArray(t[0])?([o,n,u]=t,l=Y):[l,o,n,u]=t,!l)return We;Array.isArray(o)||(o=[o]),Array.isArray(n)||(n=[n]);const i=[],f=()=>{i.forEach(v=>v()),i.length=0},p=(v,c,d,a)=>(v.addEventListener(c,d,a),()=>v.removeEventListener(c,d,a)),h=e.watch(()=>[R(l),z(u)],([v,c])=>{if(f(),!v)return;const d=Te(c)?Q({},c):c;i.push(...o.flatMap(a=>n.map(s=>p(v,a,s,d))))},{immediate:!0,flush:"post"}),r=()=>{h(),f()};return le(r),r}function Ue(){const t=e.ref(!1),l=e.getCurrentInstance();return l&&e.onMounted(()=>{t.value=!0},l),t}function ge(t){const l=Ue();return e.computed(()=>(l.value,!!t()))}function Fe(t,l,o={}){const d=o,{window:n=Y}=d,u=oe(d,["window"]);let i;const f=ge(()=>n&&"MutationObserver"in n),p=()=>{i&&(i.disconnect(),i=void 0)},h=e.computed(()=>{const a=z(t),s=(Array.isArray(a)?a:[a]).map(R).filter(He);return new Set(s)}),r=e.watch(()=>h.value,a=>{p(),f.value&&a.size&&(i=new MutationObserver(l),a.forEach(s=>i.observe(s,u)))},{immediate:!0,flush:"post"}),v=()=>i==null?void 0:i.takeRecords(),c=()=>{p(),r()};return le(c),{isSupported:f,stop:c,takeRecords:v}}function Le(t){const l=e.getCurrentInstance(),o=Me(()=>null,()=>l.proxy.$el);return e.onUpdated(o.trigger),e.onMounted(o.trigger),o}function Pe(t,l={}){var o,n;const{pointerTypes:u,preventDefault:i,stopPropagation:f,exact:p,onMove:h,onEnd:r,onStart:v,initialValue:c,axis:d="both",draggingElement:a=Y,containerElement:s,handle:b=t}=l,y=e.ref((o=z(c))!=null?o:{x:0,y:0}),N=e.ref(),k=g=>u?u.includes(g.pointerType):!0,B=g=>{z(i)&&g.preventDefault(),z(f)&&g.stopPropagation()},Z=g=>{var M;if(g.button!==0||z(l.disabled)||!k(g)||z(p)&&g.target!==z(t))return;const E=z(s),H=(M=E==null?void 0:E.getBoundingClientRect)==null?void 0:M.call(E),_=z(t).getBoundingClientRect(),L={x:g.clientX-(E?_.left-H.left+E.scrollLeft:_.left),y:g.clientY-(E?_.top-H.top+E.scrollTop:_.top)};(v==null?void 0:v(L,g))!==!1&&(N.value=L,B(g))},F=g=>{if(z(l.disabled)||!k(g)||!N.value)return;const M=z(s),E=z(t).getBoundingClientRect();let{x:H,y:_}=y.value;(d==="x"||d==="both")&&(H=g.clientX-N.value.x,M&&(H=Math.min(Math.max(0,H),M.scrollWidth-E.width))),(d==="y"||d==="both")&&(_=g.clientY-N.value.y,M&&(_=Math.min(Math.max(0,_),M.scrollHeight-E.height))),y.value={x:H,y:_},h==null||h(y.value,g),B(g)},ee=g=>{z(l.disabled)||!k(g)||N.value&&(N.value=void 0,r==null||r(y.value,g),B(g))};if(me){const g={capture:(n=l.capture)!=null?n:!0};j(b,"pointerdown",Z,g),j(a,"pointermove",F,g),j(a,"pointerup",ee,g)}return te(Q({},Ae(y)),{position:y,isDragging:e.computed(()=>!!N.value),style:e.computed(()=>`left:${y.value.x}px;top:${y.value.y}px;`)})}function we(t,l,o={}){const c=o,{window:n=Y}=c,u=oe(c,["window"]);let i;const f=ge(()=>n&&"ResizeObserver"in n),p=()=>{i&&(i.disconnect(),i=void 0)},h=e.computed(()=>Array.isArray(t)?t.map(d=>R(d)):[R(t)]),r=e.watch(h,d=>{if(p(),f.value&&n){i=new ResizeObserver(l);for(const a of d)a&&i.observe(a,u)}},{immediate:!0,flush:"post"}),v=()=>{p(),r()};return le(v),{isSupported:f,stop:v}}function De(t,l={}){const{reset:o=!0,windowResize:n=!0,windowScroll:u=!0,immediate:i=!0}=l,f=e.ref(0),p=e.ref(0),h=e.ref(0),r=e.ref(0),v=e.ref(0),c=e.ref(0),d=e.ref(0),a=e.ref(0);function s(){const b=R(t);if(!b){o&&(f.value=0,p.value=0,h.value=0,r.value=0,v.value=0,c.value=0,d.value=0,a.value=0);return}const y=b.getBoundingClientRect();f.value=y.height,p.value=y.bottom,h.value=y.left,r.value=y.right,v.value=y.top,c.value=y.width,d.value=y.x,a.value=y.y}return we(t,s),e.watch(()=>R(t),b=>!b&&s()),Fe(t,s,{attributeFilter:["style","class"]}),u&&j("scroll",s,{capture:!0,passive:!0}),n&&j("resize",s,{passive:!0}),ae(()=>{i&&s()}),{height:f,bottom:p,left:h,right:r,top:v,width:c,x:d,y:a,update:s}}function G(t,l={width:0,height:0},o={}){const{window:n=Y,box:u="content-box"}=o,i=e.computed(()=>{var c,d;return(d=(c=R(t))==null?void 0:c.namespaceURI)==null?void 0:d.includes("svg")}),f=e.ref(l.width),p=e.ref(l.height),{stop:h}=we(t,([c])=>{const d=u==="border-box"?c.borderBoxSize:u==="content-box"?c.contentBoxSize:c.devicePixelContentBoxSize;if(n&&i.value){const a=R(t);if(a){const s=a.getBoundingClientRect();f.value=s.width,p.value=s.height}}else if(d){const a=Array.isArray(d)?d:[d];f.value=a.reduce((s,{inlineSize:b})=>s+b,0),p.value=a.reduce((s,{blockSize:b})=>s+b,0)}else f.value=c.contentRect.width,p.value=c.contentRect.height},o);ae(()=>{const c=R(t);c&&(f.value="offsetWidth"in c?c.offsetWidth:l.width,p.value="offsetHeight"in c?c.offsetHeight:l.height)});const r=e.watch(()=>R(t),c=>{f.value=c?l.width:0,p.value=c?l.height:0});function v(){h(),r()}return{width:f,height:p,stop:v}}function Qe(t=Le()){const l=e.shallowRef(),o=()=>{const n=R(t);n&&(l.value=n.parentElement)};return ae(o),e.watch(()=>z(t),o),l}const je=e.defineComponent({name:"QxsFixedActionBar",inheritAttrs:!1,__name:"fixed-action-bar",props:{padding:{type:String,default:"8px"}},setup(t){const l=t,o=J("fixed-action-bar"),n=e.useAttrs(),u=e.ref(!1),i=e.ref(null),f=e.ref(null),p=Qe(f),{height:h}=G(i,void 0,{box:"border-box"}),{left:r}=De(p),{width:v}=G(p,void 0,{box:"border-box"});function c(){const a=window.scrollY||document.documentElement.scrollTop,s=window.innerHeight||document.documentElement.clientHeight,b=document.documentElement.scrollHeight;u.value=Math.ceil(a+s)>=b}e.onMounted(()=>{c(),window.addEventListener("scroll",c)}),e.onUnmounted(()=>{window.removeEventListener("scroll",c)});const d=e.computed(()=>Q({width:`${v||0}px`,left:`${r}px`,class:`${u.value?"":o.is("shadow")} ${n.class||""}`},o.cssVarBlock({"actionbar-padding":`${l.padding}`})));return(a,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"placeholderRef",ref:f,style:e.normalizeStyle(`width: 100%; height: ${e.unref(h)}px`)},null,4),e.createElementVNode("div",{ref_key:"actionbar",ref:i,style:e.normalizeStyle(d.value),class:e.normalizeClass([d.value.class,e.unref(o).e("actionbar")]),"data-fixed-calc-width":""},[e.renderSlot(a.$slots,"default")],6)],64))}}),ye=K(je),Ye={key:1,class:"image"},Xe={class:"mask"},qe={class:"actions"},Ge={key:0,class:"el-upload__tip-text"},Ke={style:{display:"inline-block"}},Je=e.defineComponent({name:"QxsImageUpload",__name:"image-upload",props:{action:{},headers:{},data:{},name:{default:"file"},url:{default:""},size:{default:20},width:{default:160},accept:{default:"image/jpeg,image/jpg,image/png,image/gif"},height:{default:90},placeholder:{default:"点击上传图片"},notip:{type:Boolean,default:!1},tipText:{},beforeUpload:{}},emits:["update:url","onSuccess"],setup(t,{emit:l}){const o=t,n=l,u=J("image-upload"),i=e.ref({imageViewerVisible:!1,progress:{preview:"",percent:0}}),f=e.computed(()=>o.accept.split(",").map(a=>a.split("/").pop()));function p(){i.value.imageViewerVisible=!0}function h(){i.value.imageViewerVisible=!1}function r(){n("update:url","")}const v=a=>{var k;const b=(k=a.name.split(".").at(-1))!=null?k:"",y=f.value.includes(b),N=a.size/1024/1024<o.size;return y?N?i.value.progress.preview=URL.createObjectURL(a):O.ElMessage.error(`上传图片大小不能超过 ${o.size}MB！`):O.ElMessage.error(`上传图片只支持${f.value.join(" / ")}格式！`),y&&N&&(!o.beforeUpload||o.beforeUpload(a))},c=a=>{i.value.progress.percent=~~a.percent},d=(...a)=>{i.value.progress.preview="",i.value.progress.percent=0,n("onSuccess",...a)};return(a,s)=>{const b=e.resolveComponent("el-icon"),y=e.resolveComponent("el-image"),N=e.resolveComponent("el-progress"),k=e.resolveComponent("el-upload"),B=e.resolveComponent("el-image-viewer");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(u).e("upload-container"))},[e.createVNode(k,{"show-file-list":!1,headers:a.headers,action:a.action,data:a.data,name:a.name,"before-upload":v,"on-progress":c,"on-success":d,drag:"",accept:a.accept,class:e.normalizeClass(e.unref(u).e("image-upload"))},{default:e.withCtx(()=>[a.url===""?(e.openBlock(),e.createBlock(y,{key:0,src:a.url===""?a.placeholder:a.url,style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`),fit:"fill"},{error:e.withCtx(()=>[e.createElementVNode("div",{class:"image-slot",style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`)},[e.createVNode(b,null,{default:e.withCtx(()=>[e.createVNode(e.unref(O.plus_default))]),_:1}),e.createElementVNode("p",null,e.toDisplayString(a.placeholder),1)],4)]),_:1},8,["src","style"])):(e.openBlock(),e.createElementBlock("div",Ye,[e.createVNode(y,{src:a.url,style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`),fit:"fill"},null,8,["src","style"]),e.createElementVNode("div",Xe,[e.createElementVNode("div",qe,[e.createElementVNode("span",{title:"预览",onClick:e.withModifiers(p,["stop"])},[e.createVNode(b,null,{default:e.withCtx(()=>[e.createVNode(e.unref(O.zoom_in_default))]),_:1})]),e.createElementVNode("span",{title:"移除",onClick:e.withModifiers(r,["stop"])},[e.createVNode(b,null,{default:e.withCtx(()=>[e.createVNode(e.unref(O.delete_default))]),_:1})])])])])),e.withDirectives(e.createElementVNode("div",{class:"progress",style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`)},[e.createVNode(y,{src:i.value.progress.preview,style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`),fit:"fill"},null,8,["src","style"]),e.createVNode(N,{type:"circle",width:Math.min(a.width,a.height)*.8,percentage:i.value.progress.percent},null,8,["width","percentage"])],4),[[e.vShow,a.url===""&&i.value.progress.percent]])]),_:1},8,["headers","action","data","name","accept","class"]),a.notip?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ge,[e.createElementVNode("div",Ke,e.toDisplayString(a.tipText||`上传图片支持 ${f.value.join(" / ")} 格式，且图片大小不超过 ${a.size}MB，建议图片尺寸为 ${a.width}*${a.height}`),1)])),i.value.imageViewerVisible?(e.openBlock(),e.createBlock(B,{key:1,"url-list":[a.url],teleported:"",onClose:h},null,8,["url-list"])):e.createCommentVNode("",!0)],2)}}}),be=K(Je);function Ze(t){const l=e.ref(null);return t&&(l.value=t.getContext("2d")),{clearCanvas:()=>{l.value&&l.value.clearRect(0,0,t.width,t.height)},drawColor:(f,p,h,r,v)=>{l.value&&(l.value.fillStyle=v,l.value.fillRect(f,p,h,r))},drawImage:(f,p,h,r,v)=>{l.value.drawImage(f,p,h,r,v)},cropCanvas:(f,p,h,r)=>new Promise(v=>{if(l.value){const c=document.createElement("canvas");c.width=h,c.height=r;const d=c.getContext("2d");d?(d.drawImage(t,f,p,h,r,0,0,h,r),c.toBlob(a=>{if(a){const s=new File([a],"cropped_image.png",{type:"image/png"});v(s)}else v(null)},"image/png")):v(null)}else v(null)})}}const et=["src"],tt=e.defineComponent({name:"QxsPhotoCropTool",__name:"photo-crop-tool",props:{imgFile:{type:Object,default:()=>null},aspectRatio:{type:String,default:()=>"16 / 9"},defaultWidth:{type:Number,default:()=>320},defaultHeight:{type:Number,default:()=>180},zoomType:{type:String,default:()=>"fixed"}},setup(t,{expose:l}){const o=t;let n=0,u=0,i=0,f=0;const p=J("photo-crop-tool"),h=e.ref(null),r=e.ref(null),v=e.ref(null),c=e.ref(""),d=e.ref(""),a=e.ref({x:0,y:0}),s=e.ref({width:o.defaultWidth,height:o.defaultHeight,x:0,y:0}),{width:b,height:y}=G(h),{width:N}=G(v),{x:k,y:B,style:Z}=Pe(h,{containerElement:r,draggingElement:h,disabled:e.computed(()=>!!d.value),exact:!0,initialValue:a}),F=e.computed(()=>o.imgFile?URL.createObjectURL(o.imgFile):"");e.watch(()=>o.imgFile,m=>{m&&!m.type.startsWith("image/")?c.value="文件类型错误":c.value=""});const ee=e.computed(()=>{var m;return(((m=v.value)==null?void 0:m.naturalWidth)||0)/N.value}),g=e.computed(()=>{const m={left:0,top:0};return d.value==="bottom-right"?(m.left=s.value.x,m.top=s.value.y):d.value==="top-left"?(m.left=s.value.x-b.value,m.top=s.value.y-y.value):d.value==="top-right"?(m.top=s.value.y-y.value,m.left=s.value.x):d.value==="bottom-left"&&(m.left=s.value.x-b.value,m.top=s.value.y),m}),M=e.computed(()=>{const{aspectRatio:m}=o,w={width:`${s.value.width||o.defaultWidth}`,height:`${s.value.height||o.defaultHeight}`,"aspect-ratio":m,top:`${g.value.top}px`,left:`${g.value.left}px`};return o.zoomType==="free"?delete w["aspect-ratio"]:o.zoomType==="fixed"&&delete w.height,p.cssVarBlock(w)});function E(m){return m*ee.value}function H(){return ve(this,arguments,function*(m=v.value){var P,D;let w="transparent";r.value&&(w=window.getComputedStyle(r.value).backgroundColor);const C=document.createElement("canvas");C.width=E(((P=r.value)==null?void 0:P.clientWidth)||0),C.height=E(((D=r.value)==null?void 0:D.clientHeight)||0);const{drawImage:U,cropCanvas:T,drawColor:W}=Ze(C);return W(0,0,C.width,C.height,w),U(m,E(m.offsetLeft),E(m.offsetTop),m.naturalWidth,m.naturalHeight),yield T(E(k.value),E(B.value),E(b.value),E(y.value))})}function _(m,w){var T,W;const C=((T=r.value)==null?void 0:T.clientWidth)||1/0,U=((W=r.value)==null?void 0:W.clientHeight)||1/0;return{width:Math.min(Math.max(m,0),C),height:Math.min(Math.max(w,0),U)}}function L(m){var U,T,W,P,D,re,ue,ce;const w=m.clientX-n,C=m.clientY-u;if(d.value==="bottom-right"){if(o.zoomType==="free"){const{width:$,height:x}=_(i+w,f+C);s.value.width=$,s.value.height=x}else if(o.zoomType==="fixed"){const $=Number.parseFloat(o.aspectRatio.split(" / ")[0])/Number.parseFloat(o.aspectRatio.split(" / ")[1]);let x=i+w,V=x/$;const{width:I,height:S}=_(x,V);S>(((U=r.value)==null?void 0:U.clientHeight)||1/0)&&(V=((T=r.value)==null?void 0:T.clientHeight)||1/0,x=V*$),s.value.width=I,s.value.height=S}}else if(d.value==="top-left"){if(o.zoomType==="free"){const{width:$,height:x}=_(i-w,f-C);s.value.width=$,s.value.height=x}else if(o.zoomType==="fixed"){const $=Number.parseFloat(o.aspectRatio.split(" / ")[0])/Number.parseFloat(o.aspectRatio.split(" / ")[1]);let x=i-w,V=x/$;const{width:I,height:S}=_(x,V);S>(((W=r.value)==null?void 0:W.clientHeight)||1/0)&&(V=((P=r.value)==null?void 0:P.clientHeight)||1/0,x=V*$),s.value.width=I,s.value.height=S}k.value=g.value.left,B.value=g.value.top}else if(d.value==="top-right"){if(o.zoomType==="free"){const{width:$,height:x}=_(i+w,f-C);s.value.width=$,s.value.height=x}else if(o.zoomType==="fixed"){const $=Number.parseFloat(o.aspectRatio.split(" / ")[0])/Number.parseFloat(o.aspectRatio.split(" / ")[1]);let x=i+w,V=x/$;const{width:I,height:S}=_(x,V);S>(((D=r.value)==null?void 0:D.clientHeight)||1/0)&&(V=((re=r.value)==null?void 0:re.clientHeight)||1/0,x=V*$),s.value.width=I,s.value.height=S}k.value=g.value.left,B.value=g.value.top}else if(d.value==="bottom-left"){if(o.zoomType==="free"){const{width:$,height:x}=_(i-w,f+C);s.value.width=$,s.value.height=x}else if(o.zoomType==="fixed"){const $=Number.parseFloat(o.aspectRatio.split(" / ")[0])/Number.parseFloat(o.aspectRatio.split(" / ")[1]);let x=i-w,V=x/$;const{width:I,height:S}=_(x,V);S>(((ue=r.value)==null?void 0:ue.clientHeight)||1/0)&&(V=((ce=r.value)==null?void 0:ce.clientHeight)||1/0,x=V*$),s.value.width=I,s.value.height=S}k.value=g.value.left,B.value=g.value.top}m.preventDefault(),m.stopPropagation()}function X(m,w){d.value=w,n=m.clientX,u=m.clientY,i=s.value.width,f=s.value.height,w==="bottom-right"?(s.value.x=k.value,s.value.y=B.value):w==="top-left"?(s.value.x=k.value+b.value,s.value.y=B.value+y.value):w==="top-right"?(s.value.x=k.value,s.value.y=B.value+y.value):w==="bottom-left"&&(s.value.x=k.value+b.value,s.value.y=B.value)}function se(){d.value=""}function Ce(){s.value.width=o.defaultWidth,s.value.height=o.defaultHeight,k.value=0,B.value=0}return document.addEventListener("mouseup",se),document.addEventListener("mousemove",L),e.onMounted(()=>{e.nextTick(()=>{var m,w;a.value.x=(((m=r.value)==null?void 0:m.offsetWidth)||0)/2-s.value.width/2,a.value.y=(((w=r.value)==null?void 0:w.offsetHeight)||0)/2-s.value.height/2})}),e.onUnmounted(()=>{F.value&&URL.revokeObjectURL(F.value),document.removeEventListener("mouseup",se),document.removeEventListener("mousemove",L)}),l({crop:H,resize:Ce}),(m,w)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerBoxRef",ref:r,class:e.normalizeClass([e.unref(p).e("img-box")])},[c.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(p).e("error-message")])},e.toDisplayString(c.value),3)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("img",{ref_key:"imgRef",ref:v,class:e.normalizeClass([e.unref(p).e("image")]),src:F.value},null,10,et),e.createElementVNode("div",{ref_key:"cropBoxRef",ref:h,class:e.normalizeClass([e.unref(p).e("crop-tool-box")]),style:e.normalizeStyle([M.value,d.value?`left: ${g.value.left}px;top: ${g.value.top}px`:e.unref(Z)])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(p).e("top-left")]),onMousedown:w[0]||(w[0]=C=>X(C,"top-left"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(p).e("top-right")]),onMousedown:w[1]||(w[1]=C=>X(C,"top-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(p).e("bottom-right")]),onMousedown:w[2]||(w[2]=C=>X(C,"bottom-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(p).e("bottom-left")]),onMousedown:w[3]||(w[3]=C=>X(C,"bottom-left"))},null,34)],6)],64))],2))}}),xe=K(tt),ot=Object.freeze(Object.defineProperty({__proto__:null,QxsFileUpload:he,QxsFixedActionBar:ye,QxsImageUpload:be,QxsPhotoCropTool:xe},Symbol.toStringTag,{value:"Module"})),nt="0.0.6";function lt(t){return{version:nt,install:o=>{for(const n in t)o.use(t[n])}}}const ie=lt(ot),at=ie.install,it=ie.version;exports.QxsFileUpload=he;exports.QxsFixedActionBar=ye;exports.QxsImageUpload=be;exports.QxsPhotoCropTool=xe;exports.default=ie;exports.install=at;exports.version=it;
+"use strict";var Ee=Object.defineProperty,$e=Object.defineProperties;var ke=Object.getOwnPropertyDescriptors;var q=Object.getOwnPropertySymbols;var pe=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var de=(t,l,o)=>l in t?Ee(t,l,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[l]=o,Q=(t,l)=>{for(var o in l||(l={}))pe.call(l,o)&&de(t,o,l[o]);if(q)for(var o of q(l))fe.call(l,o)&&de(t,o,l[o]);return t},te=(t,l)=>$e(t,ke(l));var oe=(t,l)=>{var o={};for(var n in t)pe.call(t,n)&&l.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&q)for(var n of q(t))l.indexOf(n)<0&&fe.call(t,n)&&(o[n]=t[n]);return o};var ve=(t,l,o)=>new Promise((n,u)=>{var i=h=>{try{p(o.next(h))}catch(r){u(r)}},f=h=>{try{p(o.throw(h))}catch(r){u(r)}},p=h=>h.done?n(h.value):Promise.resolve(h.value).then(i,f);p((o=o.apply(t,l)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),O=require("./vendor.cjs");function K(t,l){return t.install=o=>{for(const n of[t,...Object.values({})])o.component(n.name,n)},t}const ne="qxs",_e="is-";function A(t,l,o,n,u){let i=`${t}-${l}`;return o&&(i+=`-${o}`),n&&(i+=`__${n}`),u&&(i+=`--${u}`),i}const ze=Symbol("namespaceContextKey");function Be(t){const l=e.getCurrentInstance()?e.inject(ze,e.ref(ne)):e.ref(ne);return e.computed(()=>e.unref(l)||ne)}function J(t,l){const o=Be();return{namespace:o,b:(n="")=>A(o.value,t,n,"",""),e:n=>n?A(o.value,t,"",n,""):"",m:n=>n?A(o.value,t,"","",n):"",be:(n,u)=>n&&u?A(o.value,t,n,u,""):"",em:(n,u)=>n&&u?A(o.value,t,"",n,u):"",bm:(n,u)=>n&&u?A(o.value,t,n,"",u):"",bem:(n,u,i)=>n&&u&&i?A(o.value,t,n,u,i):"",is:(n,...u)=>{const i=u.length>=1?u[0]:!0;return n&&i?`${_e}${n}`:""},cssVar:n=>{const u={};for(const i in n)n[i]&&(u[`--${o.value}-${i}`]=n[i]);return u},cssVarName:n=>`--${o.value}-${n}`,cssVarBlock:n=>{const u={};for(const i in n)n[i]&&(u[`--${o.value}-${t}-${i}`]=n[i]);return u},cssVarBlockName:n=>`--${o.value}-${t}-${n}`}}const Ve={class:"slot"},Ne={key:0,class:"el-upload__tip"},Se={style:{display:"inline-block"}},Re=e.defineComponent({name:"QxsFileUpload",__name:"file-upload",props:{action:{},headers:{},data:{},name:{default:"file"},size:{default:20},max:{default:3},accept:{default:"zip,rar"},files:{default:()=>[]},notip:{type:Boolean,default:!1},ext:{}},emits:["onSuccess"],setup(t,{emit:l}){const o=t,n=l,u=J("file-upload"),i=e.computed(()=>o.accept.split(",").map(r=>r.split("/").pop())),f=r=>{var s;const c=(s=r.name.split(".").at(-1))!=null?s:"",d=i.value.includes(c),a=r.size/1024/1024<o.size;return d||O.ElMessage.error(`上传文件只支持 ${i.value.join(" / ")} 格式！`),a||O.ElMessage.error(`上传文件大小不能超过 ${o.size}MB！`),d&&a},p=()=>{O.ElMessage.warning("文件上传超过限制")},h=(r,v,c)=>{n("onSuccess",r,v,c)};return(r,v)=>{const c=e.resolveComponent("el-icon"),d=e.resolveComponent("el-alert"),a=e.resolveComponent("el-upload");return e.openBlock(),e.createBlock(a,{headers:r.headers,action:r.action,data:r.data,name:r.name,"before-upload":f,"on-exceed":p,"on-success":h,"file-list":r.files,limit:r.max,drag:"",class:e.normalizeClass(e.unref(u).e("control"))},{tip:e.withCtx(()=>[r.notip?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ne,[e.createElementVNode("div",Se,[e.createVNode(d,{title:`上传文件支持 ${i.value.join(" / ")} 格式，单个文件大小不超过 ${r.size}MB，且文件数量不超过 ${r.max} 个`,type:"info","show-icon":"",closable:!1},null,8,["title"])])]))]),default:e.withCtx(()=>[e.createElementVNode("div",Ve,[e.createVNode(c,{class:"el-icon--upload"},{default:e.withCtx(()=>[e.createVNode(e.unref(O.upload_filled_default))]),_:1}),v[0]||(v[0]=e.createElementVNode("div",{class:"el-upload__text"},[e.createTextVNode(" 将文件拖到此处，或"),e.createElementVNode("em",null,"点击上传")],-1))])]),_:1},8,["headers","action","data","name","file-list","limit","class"])}}}),he=K(Re);function Me(t,l){let o,n,u;const i=e.ref(!0),f=()=>{i.value=!0,u()};e.watch(t,f,{flush:"sync"});const p=typeof l=="function"?l:l.get,h=typeof l=="function"?void 0:l.set,r=e.customRef((v,c)=>(n=v,u=c,{get(){return i.value&&(o=p(),i.value=!1),n(),o},set(d){h==null||h(d)}}));return Object.isExtensible(r)&&(r.trigger=f),r}function le(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function z(t){return typeof t=="function"?t():e.unref(t)}const me=typeof window!="undefined"&&typeof document!="undefined";typeof WorkerGlobalScope!="undefined"&&globalThis instanceof WorkerGlobalScope;const He=t=>t!=null,Oe=Object.prototype.toString,Te=t=>Oe.call(t)==="[object Object]",We=()=>{};function Ie(t){return e.getCurrentInstance()}function Ae(t,l={}){if(!e.isRef(t))return e.toRefs(t);const o=Array.isArray(t.value)?Array.from({length:t.value.length}):{};for(const n in t.value)o[n]=e.customRef(()=>({get(){return t.value[n]},set(u){var i;if((i=z(l.replaceRef))!=null?i:!0)if(Array.isArray(t.value)){const p=[...t.value];p[n]=u,t.value=p}else{const p=te(Q({},t.value),{[n]:u});Object.setPrototypeOf(p,Object.getPrototypeOf(t.value)),t.value=p}else t.value[n]=u}}));return o}function ae(t,l=!0,o){Ie()?e.onMounted(t,o):l?t():e.nextTick(t)}function R(t){var l;const o=z(t);return(l=o==null?void 0:o.$el)!=null?l:o}const Y=me?window:void 0;function j(...t){let l,o,n,u;if(typeof t[0]=="string"||Array.isArray(t[0])?([o,n,u]=t,l=Y):[l,o,n,u]=t,!l)return We;Array.isArray(o)||(o=[o]),Array.isArray(n)||(n=[n]);const i=[],f=()=>{i.forEach(v=>v()),i.length=0},p=(v,c,d,a)=>(v.addEventListener(c,d,a),()=>v.removeEventListener(c,d,a)),h=e.watch(()=>[R(l),z(u)],([v,c])=>{if(f(),!v)return;const d=Te(c)?Q({},c):c;i.push(...o.flatMap(a=>n.map(s=>p(v,a,s,d))))},{immediate:!0,flush:"post"}),r=()=>{h(),f()};return le(r),r}function Ue(){const t=e.ref(!1),l=e.getCurrentInstance();return l&&e.onMounted(()=>{t.value=!0},l),t}function ge(t){const l=Ue();return e.computed(()=>(l.value,!!t()))}function Fe(t,l,o={}){const d=o,{window:n=Y}=d,u=oe(d,["window"]);let i;const f=ge(()=>n&&"MutationObserver"in n),p=()=>{i&&(i.disconnect(),i=void 0)},h=e.computed(()=>{const a=z(t),s=(Array.isArray(a)?a:[a]).map(R).filter(He);return new Set(s)}),r=e.watch(()=>h.value,a=>{p(),f.value&&a.size&&(i=new MutationObserver(l),a.forEach(s=>i.observe(s,u)))},{immediate:!0,flush:"post"}),v=()=>i==null?void 0:i.takeRecords(),c=()=>{p(),r()};return le(c),{isSupported:f,stop:c,takeRecords:v}}function Le(t){const l=e.getCurrentInstance(),o=Me(()=>null,()=>l.proxy.$el);return e.onUpdated(o.trigger),e.onMounted(o.trigger),o}function Pe(t,l={}){var o,n;const{pointerTypes:u,preventDefault:i,stopPropagation:f,exact:p,onMove:h,onEnd:r,onStart:v,initialValue:c,axis:d="both",draggingElement:a=Y,containerElement:s,handle:b=t}=l,y=e.ref((o=z(c))!=null?o:{x:0,y:0}),N=e.ref(),k=g=>u?u.includes(g.pointerType):!0,B=g=>{z(i)&&g.preventDefault(),z(f)&&g.stopPropagation()},Z=g=>{var M;if(g.button!==0||z(l.disabled)||!k(g)||z(p)&&g.target!==z(t))return;const E=z(s),H=(M=E==null?void 0:E.getBoundingClientRect)==null?void 0:M.call(E),_=z(t).getBoundingClientRect(),L={x:g.clientX-(E?_.left-H.left+E.scrollLeft:_.left),y:g.clientY-(E?_.top-H.top+E.scrollTop:_.top)};(v==null?void 0:v(L,g))!==!1&&(N.value=L,B(g))},F=g=>{if(z(l.disabled)||!k(g)||!N.value)return;const M=z(s),E=z(t).getBoundingClientRect();let{x:H,y:_}=y.value;(d==="x"||d==="both")&&(H=g.clientX-N.value.x,M&&(H=Math.min(Math.max(0,H),M.scrollWidth-E.width))),(d==="y"||d==="both")&&(_=g.clientY-N.value.y,M&&(_=Math.min(Math.max(0,_),M.scrollHeight-E.height))),y.value={x:H,y:_},h==null||h(y.value,g),B(g)},ee=g=>{z(l.disabled)||!k(g)||N.value&&(N.value=void 0,r==null||r(y.value,g),B(g))};if(me){const g={capture:(n=l.capture)!=null?n:!0};j(b,"pointerdown",Z,g),j(a,"pointermove",F,g),j(a,"pointerup",ee,g)}return te(Q({},Ae(y)),{position:y,isDragging:e.computed(()=>!!N.value),style:e.computed(()=>`left:${y.value.x}px;top:${y.value.y}px;`)})}function we(t,l,o={}){const c=o,{window:n=Y}=c,u=oe(c,["window"]);let i;const f=ge(()=>n&&"ResizeObserver"in n),p=()=>{i&&(i.disconnect(),i=void 0)},h=e.computed(()=>Array.isArray(t)?t.map(d=>R(d)):[R(t)]),r=e.watch(h,d=>{if(p(),f.value&&n){i=new ResizeObserver(l);for(const a of d)a&&i.observe(a,u)}},{immediate:!0,flush:"post"}),v=()=>{p(),r()};return le(v),{isSupported:f,stop:v}}function De(t,l={}){const{reset:o=!0,windowResize:n=!0,windowScroll:u=!0,immediate:i=!0}=l,f=e.ref(0),p=e.ref(0),h=e.ref(0),r=e.ref(0),v=e.ref(0),c=e.ref(0),d=e.ref(0),a=e.ref(0);function s(){const b=R(t);if(!b){o&&(f.value=0,p.value=0,h.value=0,r.value=0,v.value=0,c.value=0,d.value=0,a.value=0);return}const y=b.getBoundingClientRect();f.value=y.height,p.value=y.bottom,h.value=y.left,r.value=y.right,v.value=y.top,c.value=y.width,d.value=y.x,a.value=y.y}return we(t,s),e.watch(()=>R(t),b=>!b&&s()),Fe(t,s,{attributeFilter:["style","class"]}),u&&j("scroll",s,{capture:!0,passive:!0}),n&&j("resize",s,{passive:!0}),ae(()=>{i&&s()}),{height:f,bottom:p,left:h,right:r,top:v,width:c,x:d,y:a,update:s}}function G(t,l={width:0,height:0},o={}){const{window:n=Y,box:u="content-box"}=o,i=e.computed(()=>{var c,d;return(d=(c=R(t))==null?void 0:c.namespaceURI)==null?void 0:d.includes("svg")}),f=e.ref(l.width),p=e.ref(l.height),{stop:h}=we(t,([c])=>{const d=u==="border-box"?c.borderBoxSize:u==="content-box"?c.contentBoxSize:c.devicePixelContentBoxSize;if(n&&i.value){const a=R(t);if(a){const s=a.getBoundingClientRect();f.value=s.width,p.value=s.height}}else if(d){const a=Array.isArray(d)?d:[d];f.value=a.reduce((s,{inlineSize:b})=>s+b,0),p.value=a.reduce((s,{blockSize:b})=>s+b,0)}else f.value=c.contentRect.width,p.value=c.contentRect.height},o);ae(()=>{const c=R(t);c&&(f.value="offsetWidth"in c?c.offsetWidth:l.width,p.value="offsetHeight"in c?c.offsetHeight:l.height)});const r=e.watch(()=>R(t),c=>{f.value=c?l.width:0,p.value=c?l.height:0});function v(){h(),r()}return{width:f,height:p,stop:v}}function Qe(t=Le()){const l=e.shallowRef(),o=()=>{const n=R(t);n&&(l.value=n.parentElement)};return ae(o),e.watch(()=>z(t),o),l}const je=e.defineComponent({name:"QxsFixedActionBar",inheritAttrs:!1,__name:"fixed-action-bar",props:{padding:{type:String,default:"8px"}},setup(t){const l=t,o=J("fixed-action-bar"),n=e.useAttrs(),u=e.ref(!1),i=e.ref(null),f=e.ref(null),p=Qe(f),{height:h}=G(i,void 0,{box:"border-box"}),{left:r}=De(p),{width:v}=G(p,void 0,{box:"border-box"});function c(){const a=window.scrollY||document.documentElement.scrollTop,s=window.innerHeight||document.documentElement.clientHeight,b=document.documentElement.scrollHeight;u.value=Math.ceil(a+s)>=b}e.onMounted(()=>{c(),window.addEventListener("scroll",c)}),e.onUnmounted(()=>{window.removeEventListener("scroll",c)});const d=e.computed(()=>Q({width:`${v||0}px`,left:`${r}px`,class:`${u.value?"":o.is("shadow")} ${n.class||""}`},o.cssVarBlock({"actionbar-padding":`${l.padding}`})));return(a,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"placeholderRef",ref:f,style:e.normalizeStyle(`width: 100%; height: ${e.unref(h)}px`)},null,4),e.createElementVNode("div",{ref_key:"actionbar",ref:i,style:e.normalizeStyle(d.value),class:e.normalizeClass([d.value.class,e.unref(o).e("actionbar")]),"data-fixed-calc-width":""},[e.renderSlot(a.$slots,"default")],6)],64))}}),ye=K(je),Ye={key:1,class:"image"},Xe={class:"mask"},qe={class:"actions"},Ge={key:0,class:"el-upload__tip-text"},Ke={style:{display:"inline-block"}},Je=e.defineComponent({name:"QxsImageUpload",__name:"image-upload",props:{action:{},headers:{},data:{},name:{default:"file"},url:{default:""},size:{default:20},width:{default:160},accept:{default:"image/jpeg,image/jpg,image/png,image/gif"},height:{default:90},placeholder:{default:"点击上传图片"},notip:{type:Boolean,default:!1},tipText:{},beforeUpload:{}},emits:["update:url","onSuccess"],setup(t,{emit:l}){const o=t,n=l,u=J("image-upload"),i=e.ref({imageViewerVisible:!1,progress:{preview:"",percent:0}}),f=e.computed(()=>o.accept.split(",").map(a=>a.split("/").pop()));function p(){i.value.imageViewerVisible=!0}function h(){i.value.imageViewerVisible=!1}function r(){n("update:url","")}const v=a=>{var k;const b=(k=a.name.split(".").at(-1))!=null?k:"",y=f.value.includes(b),N=a.size/1024/1024<o.size;return y?N?i.value.progress.preview=URL.createObjectURL(a):O.ElMessage.error(`上传图片大小不能超过 ${o.size}MB！`):O.ElMessage.error(`上传图片只支持${f.value.join(" / ")}格式！`),y&&N&&(!o.beforeUpload||o.beforeUpload(a))},c=a=>{i.value.progress.percent=~~a.percent},d=(...a)=>{i.value.progress.preview="",i.value.progress.percent=0,n("onSuccess",...a)};return(a,s)=>{const b=e.resolveComponent("el-icon"),y=e.resolveComponent("el-image"),N=e.resolveComponent("el-progress"),k=e.resolveComponent("el-upload"),B=e.resolveComponent("el-image-viewer");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(u).e("upload-container"))},[e.createVNode(k,{"show-file-list":!1,headers:a.headers,action:a.action,data:a.data,name:a.name,"before-upload":v,"on-progress":c,"on-success":d,drag:"",accept:a.accept,class:e.normalizeClass(e.unref(u).e("image-upload"))},{default:e.withCtx(()=>[a.url===""?(e.openBlock(),e.createBlock(y,{key:0,src:a.url===""?a.placeholder:a.url,style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`),fit:"fill"},{error:e.withCtx(()=>[e.createElementVNode("div",{class:"image-slot",style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`)},[e.createVNode(b,null,{default:e.withCtx(()=>[e.createVNode(e.unref(O.plus_default))]),_:1}),e.createElementVNode("p",null,e.toDisplayString(a.placeholder),1)],4)]),_:1},8,["src","style"])):(e.openBlock(),e.createElementBlock("div",Ye,[e.createVNode(y,{src:a.url,style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`),fit:"fill"},null,8,["src","style"]),e.createElementVNode("div",Xe,[e.createElementVNode("div",qe,[e.createElementVNode("span",{title:"预览",onClick:e.withModifiers(p,["stop"])},[e.createVNode(b,null,{default:e.withCtx(()=>[e.createVNode(e.unref(O.zoom_in_default))]),_:1})]),e.createElementVNode("span",{title:"移除",onClick:e.withModifiers(r,["stop"])},[e.createVNode(b,null,{default:e.withCtx(()=>[e.createVNode(e.unref(O.delete_default))]),_:1})])])])])),e.withDirectives(e.createElementVNode("div",{class:"progress",style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`)},[e.createVNode(y,{src:i.value.progress.preview,style:e.normalizeStyle(`width:${a.width}px;height:${a.height}px;`),fit:"fill"},null,8,["src","style"]),e.createVNode(N,{type:"circle",width:Math.min(a.width,a.height)*.8,percentage:i.value.progress.percent},null,8,["width","percentage"])],4),[[e.vShow,a.url===""&&i.value.progress.percent]])]),_:1},8,["headers","action","data","name","accept","class"]),a.notip?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Ge,[e.createElementVNode("div",Ke,e.toDisplayString(a.tipText||`上传图片支持 ${f.value.join(" / ")} 格式，且图片大小不超过 ${a.size}MB，建议图片尺寸为 ${a.width}*${a.height}`),1)])),i.value.imageViewerVisible?(e.openBlock(),e.createBlock(B,{key:1,"url-list":[a.url],teleported:"",onClose:h},null,8,["url-list"])):e.createCommentVNode("",!0)],2)}}}),be=K(Je);function Ze(t){const l=e.ref(null);return t&&(l.value=t.getContext("2d")),{clearCanvas:()=>{l.value&&l.value.clearRect(0,0,t.width,t.height)},drawColor:(f,p,h,r,v)=>{l.value&&(l.value.fillStyle=v,l.value.fillRect(f,p,h,r))},drawImage:(f,p,h,r,v)=>{l.value.drawImage(f,p,h,r,v)},cropCanvas:(f,p,h,r)=>new Promise(v=>{if(l.value){const c=document.createElement("canvas");c.width=h,c.height=r;const d=c.getContext("2d");d?(d.drawImage(t,f,p,h,r,0,0,h,r),c.toBlob(a=>{if(a){const s=new File([a],"cropped_image.png",{type:"image/png"});v(s)}else v(null)},"image/png")):v(null)}else v(null)})}}const et=["src"],tt=e.defineComponent({name:"QxsPhotoCropTool",__name:"photo-crop-tool",props:{imgFile:{type:Object,default:()=>null},aspectRatio:{type:String,default:()=>"16 / 9"},defaultWidth:{type:Number,default:()=>320},defaultHeight:{type:Number,default:()=>180},zoomType:{type:String,default:()=>"fixed"}},setup(t,{expose:l}){const o=t;let n=0,u=0,i=0,f=0;const p=J("photo-crop-tool"),h=e.ref(null),r=e.ref(null),v=e.ref(null),c=e.ref(""),d=e.ref(""),a=e.ref({x:0,y:0}),s=e.ref({width:o.defaultWidth,height:o.defaultHeight,x:0,y:0}),{width:b,height:y}=G(h),{width:N}=G(v),{x:k,y:B,style:Z}=Pe(h,{containerElement:r,draggingElement:h,disabled:e.computed(()=>!!d.value),exact:!0,initialValue:a}),F=e.computed(()=>o.imgFile?URL.createObjectURL(o.imgFile):"");e.watch(()=>o.imgFile,m=>{m&&!m.type.startsWith("image/")?c.value="文件类型错误":c.value=""});const ee=e.computed(()=>{var m;return(((m=v.value)==null?void 0:m.naturalWidth)||0)/N.value}),g=e.computed(()=>{const m={left:0,top:0};return d.value==="bottom-right"?(m.left=s.value.x,m.top=s.value.y):d.value==="top-left"?(m.left=s.value.x-b.value,m.top=s.value.y-y.value):d.value==="top-right"?(m.top=s.value.y-y.value,m.left=s.value.x):d.value==="bottom-left"&&(m.left=s.value.x-b.value,m.top=s.value.y),m}),M=e.computed(()=>{const{aspectRatio:m}=o,w={width:`${s.value.width||o.defaultWidth}`,height:`${s.value.height||o.defaultHeight}`,"aspect-ratio":m,top:`${g.value.top}px`,left:`${g.value.left}px`};return o.zoomType==="free"?delete w["aspect-ratio"]:o.zoomType==="fixed"&&delete w.height,p.cssVarBlock(w)});function E(m){return m*ee.value}function H(){return ve(this,arguments,function*(m=v.value){var P,D;let w="transparent";r.value&&(w=window.getComputedStyle(r.value).backgroundColor);const C=document.createElement("canvas");C.width=E(((P=r.value)==null?void 0:P.clientWidth)||0),C.height=E(((D=r.value)==null?void 0:D.clientHeight)||0);const{drawImage:U,cropCanvas:T,drawColor:W}=Ze(C);return W(0,0,C.width,C.height,w),U(m,E(m.offsetLeft),E(m.offsetTop),m.naturalWidth,m.naturalHeight),yield T(E(k.value),E(B.value),E(b.value),E(y.value))})}function _(m,w){var T,W;const C=((T=r.value)==null?void 0:T.clientWidth)||1/0,U=((W=r.value)==null?void 0:W.clientHeight)||1/0;return{width:Math.min(Math.max(m,0),C),height:Math.min(Math.max(w,0),U)}}function L(m){var U,T,W,P,D,re,ue,ce;const w=m.clientX-n,C=m.clientY-u;if(d.value==="bottom-right"){if(o.zoomType==="free"){const{width:$,height:x}=_(i+w,f+C);s.value.width=$,s.value.height=x}else if(o.zoomType==="fixed"){const $=Number.parseFloat(o.aspectRatio.split(" / ")[0])/Number.parseFloat(o.aspectRatio.split(" / ")[1]);let x=i+w,V=x/$;const{width:I,height:S}=_(x,V);S>(((U=r.value)==null?void 0:U.clientHeight)||1/0)&&(V=((T=r.value)==null?void 0:T.clientHeight)||1/0,x=V*$),s.value.width=I,s.value.height=S}}else if(d.value==="top-left"){if(o.zoomType==="free"){const{width:$,height:x}=_(i-w,f-C);s.value.width=$,s.value.height=x}else if(o.zoomType==="fixed"){const $=Number.parseFloat(o.aspectRatio.split(" / ")[0])/Number.parseFloat(o.aspectRatio.split(" / ")[1]);let x=i-w,V=x/$;const{width:I,height:S}=_(x,V);S>(((W=r.value)==null?void 0:W.clientHeight)||1/0)&&(V=((P=r.value)==null?void 0:P.clientHeight)||1/0,x=V*$),s.value.width=I,s.value.height=S}k.value=g.value.left,B.value=g.value.top}else if(d.value==="top-right"){if(o.zoomType==="free"){const{width:$,height:x}=_(i+w,f-C);s.value.width=$,s.value.height=x}else if(o.zoomType==="fixed"){const $=Number.parseFloat(o.aspectRatio.split(" / ")[0])/Number.parseFloat(o.aspectRatio.split(" / ")[1]);let x=i+w,V=x/$;const{width:I,height:S}=_(x,V);S>(((D=r.value)==null?void 0:D.clientHeight)||1/0)&&(V=((re=r.value)==null?void 0:re.clientHeight)||1/0,x=V*$),s.value.width=I,s.value.height=S}k.value=g.value.left,B.value=g.value.top}else if(d.value==="bottom-left"){if(o.zoomType==="free"){const{width:$,height:x}=_(i-w,f+C);s.value.width=$,s.value.height=x}else if(o.zoomType==="fixed"){const $=Number.parseFloat(o.aspectRatio.split(" / ")[0])/Number.parseFloat(o.aspectRatio.split(" / ")[1]);let x=i-w,V=x/$;const{width:I,height:S}=_(x,V);S>(((ue=r.value)==null?void 0:ue.clientHeight)||1/0)&&(V=((ce=r.value)==null?void 0:ce.clientHeight)||1/0,x=V*$),s.value.width=I,s.value.height=S}k.value=g.value.left,B.value=g.value.top}m.preventDefault(),m.stopPropagation()}function X(m,w){d.value=w,n=m.clientX,u=m.clientY,i=s.value.width,f=s.value.height,w==="bottom-right"?(s.value.x=k.value,s.value.y=B.value):w==="top-left"?(s.value.x=k.value+b.value,s.value.y=B.value+y.value):w==="top-right"?(s.value.x=k.value,s.value.y=B.value+y.value):w==="bottom-left"&&(s.value.x=k.value+b.value,s.value.y=B.value)}function se(){d.value=""}function Ce(){s.value.width=o.defaultWidth,s.value.height=o.defaultHeight,k.value=0,B.value=0}return document.addEventListener("mouseup",se),document.addEventListener("mousemove",L),e.onMounted(()=>{e.nextTick(()=>{var m,w;a.value.x=(((m=r.value)==null?void 0:m.offsetWidth)||0)/2-s.value.width/2,a.value.y=(((w=r.value)==null?void 0:w.offsetHeight)||0)/2-s.value.height/2})}),e.onUnmounted(()=>{F.value&&URL.revokeObjectURL(F.value),document.removeEventListener("mouseup",se),document.removeEventListener("mousemove",L)}),l({crop:H,resize:Ce}),(m,w)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerBoxRef",ref:r,class:e.normalizeClass([e.unref(p).e("img-box")])},[c.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(p).e("error-message")])},e.toDisplayString(c.value),3)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("img",{ref_key:"imgRef",ref:v,class:e.normalizeClass([e.unref(p).e("image")]),src:F.value},null,10,et),e.createElementVNode("div",{ref_key:"cropBoxRef",ref:h,class:e.normalizeClass([e.unref(p).e("crop-tool-box")]),style:e.normalizeStyle([M.value,d.value?`left: ${g.value.left}px;top: ${g.value.top}px`:e.unref(Z)])},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(p).e("top-left")]),onMousedown:w[0]||(w[0]=C=>X(C,"top-left"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(p).e("top-right")]),onMousedown:w[1]||(w[1]=C=>X(C,"top-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(p).e("bottom-right")]),onMousedown:w[2]||(w[2]=C=>X(C,"bottom-right"))},null,34),e.createElementVNode("div",{class:e.normalizeClass([e.unref(p).e("bottom-left")]),onMousedown:w[3]||(w[3]=C=>X(C,"bottom-left"))},null,34)],6)],64))],2))}}),xe=K(tt),ot=Object.freeze(Object.defineProperty({__proto__:null,QxsFileUpload:he,QxsFixedActionBar:ye,QxsImageUpload:be,QxsPhotoCropTool:xe},Symbol.toStringTag,{value:"Module"})),nt="0.0.7";function lt(t){return{version:nt,install:o=>{for(const n in t)o.use(t[n])}}}const ie=lt(ot),at=ie.install,it=ie.version;exports.QxsFileUpload=he;exports.QxsFixedActionBar=ye;exports.QxsImageUpload=be;exports.QxsPhotoCropTool=xe;exports.default=ie;exports.install=at;exports.version=it;

package/index.js

@@ -878,7 +878,7 @@ const Vt = ["src"], At = /* @__PURE__ */ ce({
   QxsFixedActionBar: St,
   QxsImageUpload: Wt,
   QxsPhotoCropTool: Nt
-}, Symbol.toStringTag, { value: "Module" })), Ut = "0.0.6";
+}, Symbol.toStringTag, { value: "Module" })), Ut = "0.0.7";
 function Ft(e) {
   return {
     version: Ut,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qxs-bns/components",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Vue 3 Component Library",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -11,6 +11,7 @@
       "import": "./index.js",
       "require": "./index.cjs"
     },
+    "./theme-chalk": "./theme-chalk/index.css",
     "./theme-chalk/*": "./theme-chalk/*"
   },
   "keywords": [
@@ -38,7 +39,7 @@
   "dependencies": {
     "@qxs-bns/hooks": "0.0.1",
     "@qxs-bns/utils": "0.0.1",
-    "@qxs-bns/directives": "0.0.1",
+    "@qxs-bns/directives": "0.0.2",
     "element-plus": ">=2.4.0",
     "@element-plus/icons-vue": "^2.0.0"
   }

package/theme-chalk/base.scss

@@ -0,0 +1,17 @@
+@use "var";
+@use "common/transition";
+
+:root {
+  // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
+  [data-fixed-calc-width] {
+    position: fixed;
+    right: 0;
+    left: 0%;
+  }
+
+  [data-mode="mobile"] {
+    [data-fixed-calc-width] {
+      width: 100% !important;
+    }
+  }
+}

package/theme-chalk/file-upload.scss

@@ -0,0 +1,33 @@
+@use "mixins/mixins" as *;
+
+@include b(file-upload) {
+  @include e(control) {
+    .el-upload.is-drag {
+      display: inline-block;
+
+      .el-upload-dragger {
+        padding: 0;
+
+        .el-icon--upload {
+          margin-bottom: 0;
+          font-size: 40px;
+        }
+
+        .el-upload__text {
+          padding: 0 6px;
+          font-size: 14px;
+          line-height: 1.5;
+        }
+      }
+
+      &.is-dragover {
+        border-width: 1px;
+      }
+
+      .slot {
+        width: 160px;
+        height: 90px;
+      }
+    }
+  }
+}

package/theme-chalk/fixed-action-bar.scss

@@ -0,0 +1,17 @@
+@use "mixins/mixins" as *;
+
+@include b(fixed-action-bar) {
+  &__actionbar {
+    bottom: 0;
+    z-index: 10;
+    padding: getCssVar("fixed-action-bar", "actionbar-padding");
+    text-align: center;
+    background-color: var(--qxs-bg-color, #fff);
+    box-shadow: 0 0 1px 0 var(--qxs-border-color, #f3f3f2);
+    transition: box-shadow 0.3s, var(--qxs-transition-box-shadow, #f3f3f2);
+
+    @include when(shadow) {
+      box-shadow: 0 -10px 10px -10px var(--qxs-border-color, #fff);
+    }
+  }
+}

package/theme-chalk/image-upload.scss

@@ -0,0 +1,136 @@
+@use "mixins/mixins" as *;
+
+@include b(image-upload) {
+  @include e(upload-container) {
+    line-height: initial;
+
+    .el-upload__tip-text {
+      font-size: 14px;
+      line-height: 32px;
+      color: #c8c8c8;
+    }
+
+    .el-image {
+      display: block;
+    }
+
+    .image {
+      position: relative;
+      overflow: hidden;
+      border-radius: 6px;
+
+      .mask {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--el-overlay-color-lighter);
+        opacity: 0;
+        transition: opacity 0.3s;
+
+        .actions {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: center;
+          width: 100px;
+          height: 100px;
+
+          @include position-center(xy);
+
+          span {
+            width: 50%;
+            color: var(--el-color-white);
+            text-align: center;
+            cursor: pointer;
+            transition: color 0.1s, transform 0.1s;
+
+            &:hover {
+              transform: scale(1.5);
+            }
+
+            .el-icon {
+              font-size: 24px;
+            }
+          }
+        }
+      }
+
+      &:hover .mask {
+        opacity: 1;
+      }
+    }
+
+    @include e(image-upload) {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .el-upload {
+      font-size: 0;
+
+      .el-upload-dragger {
+        display: inline-block;
+        padding: 0;
+        font-size: 0;
+
+        &.is-dragover {
+          border-width: 1px;
+        }
+
+        .image-slot {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          font-size: 14px;
+          color: var(--el-text-color-placeholder);
+          background-color: #f5f5f5;
+          transition: all 0.3s;
+
+          &:hover {
+            background-color: #eee;
+          }
+
+          .el-icon {
+            font-size: 28px;
+          }
+
+          p {
+            margin-top: 10px;
+            margin-bottom: 0;
+            line-height: 1em;
+            color: #5a5a5a;
+          }
+        }
+
+        .progress {
+          position: absolute;
+          top: 0;
+
+          &::after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            content: "";
+            background-color: var(--el-overlay-color-lighter);
+          }
+
+          .el-progress {
+            z-index: 1;
+
+            @include position-center(xy);
+
+            .el-progress__text {
+              color: var(--el-text-color-placeholder);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/theme-chalk/index.scss

@@ -0,0 +1,8 @@
+@use "./base";
+// component styles
+
+@use "./rich-editor";
+@use "./fixed-action-bar";
+@use "./photo-crop-tool";
+@use "./image-upload";
+@use "./file-upload";

package/theme-chalk/photo-crop-tool.scss

@@ -0,0 +1,84 @@
+@use "mixins/mixins" as *;
+
+@include b(photo-crop-tool) {
+  @include e(img-box) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #fafafa;
+
+    @include e(error-message) {
+      color: red;
+    }
+
+    @include e(image) {
+      max-width: 100%;
+      max-height: 100%;
+      vertical-align: middle;
+      // 禁止选中
+      user-select: none;
+      object-fit: contain;
+      // 禁止过拽
+      -webkit-user-drag: none;
+    }
+
+    @include e(crop-tool-box) {
+      position: absolute;
+      width: calc(getCssVar("photo-crop-tool", "width") * 1px);
+      max-width: 100%;
+      height: calc(getCssVar("photo-crop-tool", "height") * 1px);
+      max-height: 100%;
+      aspect-ratio: getCssVar("photo-crop-tool", "aspect-ratio");
+      overflow: hidden;
+      cursor: move;
+      border: 1px dashed #fff;
+      box-shadow: 0 0 0 9999px rgb(0 0 0 / 40%); /* 扩展阴影以覆盖周围区域 */
+      > div {
+        position: absolute;
+        z-index: 3;
+        width: 30%;
+        aspect-ratio: 1 / 1;
+        background-color: rgba($color: #020202, $alpha: 1%);
+        border-radius: 50%;
+        transition: all 0.3s;
+
+        &:hover,
+        &:active {
+          background-color: rgba($color: #020202, $alpha: 50%);
+        }
+
+        @include e(top-left) {
+          top: 0;
+          left: 0;
+          cursor: nwse-resize;
+          transform: translate3d(-50%, -50%, 0);
+        }
+
+        @include e(top-right) {
+          top: 0;
+          right: 0;
+          cursor: nesw-resize;
+          transform: translate3d(50%, -50%, 0);
+        }
+
+        @include e(bottom-right) {
+          right: 0;
+          bottom: 0;
+          cursor: nwse-resize;
+          transform: translate3d(50%, 50%, 0);
+        }
+
+        @include e(bottom-left) {
+          bottom: 0;
+          left: 0;
+          cursor: nesw-resize;
+          transform: translate3d(-50%, 50%, 0);
+        }
+      }
+    }
+  }
+}

package/theme-chalk/rich-editor.scss

@@ -0,0 +1,23 @@
+@use "mixins/mixins" as *;
+
+@include b(rich-editor) {
+  @include e(tiny-mce) {
+    .tox:not(.tox-tinymce-inline) {
+      border-width: 1px;
+      border-radius: var(--qxs-border-radius-base);
+
+      .tox-editor-header {
+        box-shadow: 0 2px 2px -2px rgb(34 47 62 / 10%), 0 4px 4px -4px rgb(34 47 62 / 7%);
+      }
+
+      .tox-sidebar-wrap {
+        max-height: 600px;
+        overflow-y: auto;
+      }
+    }
+
+    .tox-tinymce-aux {
+      z-index: 2500 !important;
+    }
+  }
+}

package/theme-chalk/var.scss

@@ -0,0 +1,87 @@
+// CSS3 var
+@use "common/var" as *;
+@use "mixins/var" as *;
+@use "mixins/mixins" as *;
+
+// for better performance do not dynamically change the root variable if you really
+// do not need that, since this could introduce recalculation overhead for rendering.
+// https://lisilinhart.info/posts/css-variables-performance/
+
+// common
+/* stylelint-disable no-duplicate-selectors */
+:root {
+  @include set-css-var-value("color-white", $color-white);
+  @include set-css-var-value("color-black", $color-black);
+
+  // get rgb
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-rgb($type);
+  }
+
+  // Typography
+  @include set-component-css-var("font-size", $font-size);
+  @include set-component-css-var("font-family", $font-family);
+  @include set-css-var-value("font-weight-primary", 500);
+  @include set-css-var-value("font-line-height-primary", 24px);
+
+  // z-index --qxs-index-#{$type}
+  @include set-component-css-var("index", $z-index);
+
+  // --qxs-border-radius-#{$type}
+  @include set-component-css-var("border-radius", $border-radius);
+
+  // Transition
+  // refer to this website to get the bezier motion function detail
+  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+  @include set-component-css-var("transition-duration", $transition-duration);
+  @include set-component-css-var("transition-function", $transition-function);
+  @include set-component-css-var("transition", $transition);
+
+  // common component size
+  @include set-component-css-var("component-size", $common-component-size);
+}
+
+// for light
+:root {
+  color-scheme: light;
+
+  // --qxs-color-#{$type}
+  // --qxs-color-#{$type}-light-{$i}
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // color-scheme
+  // Background --qxs-bg-color-#{$type}
+  @include set-component-css-var("bg-color", $bg-color);
+  // --qxs-text-color-#{$type}
+  @include set-component-css-var("text-color", $text-color);
+  // --qxs-border-color-#{$type}
+  @include set-component-css-var("border-color", $border-color);
+  // Fill --qxs-fill-color-#{$type}
+  @include set-component-css-var("fill-color", $fill-color);
+
+  // Box-shadow
+  // --qxs-box-shadow-#{$type}
+  @include set-component-css-var("box-shadow", $box-shadow);
+  // Disable base
+  @include set-component-css-var("disabled", $disabled);
+
+  // overlay & mask
+  @include set-component-css-var("overlay-color", $overlay-color);
+  @include set-component-css-var("mask-color", $mask-color);
+
+  // Border
+  @include set-css-var-value("border-width", $border-width);
+  @include set-css-var-value("border-style", $border-style);
+  @include set-css-var-value("border-color-hover", $border-color-hover);
+  @include set-css-var-value(
+    "border",
+    getCssVar("border-width") getCssVar("border-style")
+    getCssVar("border-color")
+  );
+
+  // Svg
+  @include css-var-from-global("svg-monochrome-grey", "border-color");
+}
+/* stylelint-enable no-duplicate-selectors */