@gx-design-vue/image 0.1.2 → 0.2.0-alpha.0

package/dist/image.umd.js

@@ -1 +0,0 @@
-(function(v,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@ant-design/icons-vue"),require("@gx-design-vue/pro-utils"),require("@gx-design-vue/pro-hooks"),require("vue-types"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@ant-design/icons-vue","@gx-design-vue/pro-utils","@gx-design-vue/pro-hooks","vue-types","@vueuse/core"],e):(v=typeof globalThis!="undefined"?globalThis:v||self,e(v.GImage={},v.vue,v.iconsVue,v.proUtils,v.proHooks,v.vueTypes,v.core))})(this,function(v,e,O,w,J,oe,W){"use strict";var de="",ue="",Q=oe.createTypes({func:void 0,bool:void 0,string:void 0,number:void 0,array:void 0,object:void 0,integer:void 0});Q.extend([{name:"looseBool",getter:!0,type:Boolean,default:void 0},{name:"style",getter:!0,type:[String,Object],default:void 0},{name:"VueNode",getter:!0,type:null}]);var H=Q;const j={appendToBody:{type:Boolean,default:!1},hideOnClickModal:{type:Boolean,default:!0},src:{type:String,default:""},fit:{type:String,default:""},lazy:H.bool,scrollContainer:{type:[String,Object]},placeholder:{type:[Function,Object],default:()=>{}},fallback:{type:[Function,Object],default:()=>{}},onError:{type:Function},onClick:{type:Function},disablePreview:H.bool,previewSrcList:{type:Array,default:()=>[]},width:H.number,height:H.number,zIndex:{type:Number,default:2e3}},re={urlList:{type:Array,default:()=>[]},zIndex:j.zIndex,initialIndex:{type:Number,default:0},infinite:{type:Boolean,default:!0},onHideOnClickModal:j.hideOnClickModal},T={tab:"Tab",enter:"Enter",space:"Space",left:"ArrowLeft",up:"ArrowUp",right:"ArrowRight",down:"ArrowDown",esc:"Escape",delete:"Delete",backspace:"Backspace"},R=function(t,l,u,N=!1){t&&l&&u&&t.addEventListener(l,u,N)},q=function(t,l,u,N=!1){t&&l&&u&&t.removeEventListener(l,u,N)},A={CONTAIN:{name:"contain",icon:e.createVNode(O.ExpandOutlined,null,null)},ORIGINAL:{name:"original",icon:e.createVNode(O.OneToOneOutlined,null,null)}},U=function(){return!w.isServer&&!!window.navigator.userAgent.match(/firefox/i)}()?"DOMMouseScroll":"mousewheel";function B(t){let l=!1;return function(...u){l||(l=!0,window.requestAnimationFrame(()=>{t.apply(this,u),l=!1}))}}const X=e.defineComponent({props:re,emits:["close","switch"],setup:function(t,{emit:l}){let u=null,N=null,b=null;const r=w.getPrefixCls({suffixCls:"image-viewer"}),f=e.ref(!0),h=e.ref(t.initialIndex),I=e.ref(null),x=e.ref(null),p=e.ref(A.CONTAIN),i=e.ref({scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}),c=e.computed(()=>{const{urlList:a}=t;return a.length<=1}),d=e.computed(()=>h.value===0),m=e.computed(()=>h.value===t.urlList.length-1),k=e.computed(()=>t.urlList[h.value]),S=e.ref("viewer-fade-enter-active"),E=e.computed(()=>{const{scale:a,deg:y,offsetX:n,offsetY:o,enableTransition:s}=i.value,g={transform:`scale(${a}) rotate(${y}deg)`,transition:s?"transform .3s":"",marginLeft:`${n}px`,marginTop:`${o}px`};return p.value.name===A.CONTAIN.name&&(g.maxWidth=g.maxHeight="100%"),g}),z=()=>{Z(),setTimeout(()=>{l("close")},200)},L=()=>{S.value="viewer-fade-enter-active",u=B(a=>{switch(a.code){case T.esc:z();break;case T.space:D();break;case T.left:G();break;case T.up:C("zoomIn");break;case T.right:Y();break;case T.down:C("zoomOut");break}}),N=B(a=>{(a.wheelDelta?a.wheelDelta:-a.detail)>0?C("zoomIn",{zoomRate:.015,enableTransition:!1}):C("zoomOut",{zoomRate:.015,enableTransition:!1})}),R(document,"keydown",u),R(document,U,N)},Z=()=>{S.value="viewer-fade-leave-active",q(document,"keydown",u),q(document,U,N),u=null,N=null},F=()=>{f.value=!1},_=a=>{f.value=!1,a.target.alt="\u52A0\u8F7D\u5931\u8D25"},P=a=>{if(f.value||a.button!==0)return;const{offsetX:y,offsetY:n}=i.value,o=a.pageX,s=a.pageY;b=B(g=>{i.value={...i.value,offsetX:y+g.pageX-o,offsetY:n+g.pageY-s}}),R(document,"mousemove",b),R(document,"mouseup",()=>{q(document,"mousemove",b)}),a.preventDefault()},M=()=>{i.value={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}},D=()=>{if(f.value)return;const a=Object.keys(A),y=Object.values(A),n=p.value.name,s=(y.findIndex(g=>g.name===n)+1)%a.length;p.value=A[a[s]],M()},G=()=>{if(d.value&&!t.infinite)return;const a=t.urlList.length;h.value=(h.value-1+a)%a},Y=()=>{if(m.value&&!t.infinite)return;const a=t.urlList.length;h.value=(h.value+1)%a},C=(a,y={})=>{if(f.value)return;const{zoomRate:n,rotateDeg:o,enableTransition:s}={zoomRate:.2,rotateDeg:90,enableTransition:!0,...y};switch(a){case"zoomOut":i.value.scale>.2&&(i.value.scale=parseFloat((i.value.scale-n).toFixed(3)));break;case"zoomIn":i.value.scale=parseFloat((i.value.scale+n).toFixed(3));break;case"clocelise":i.value.deg+=o;break;case"anticlocelise":i.value.deg-=o;break}i.value.enableTransition=s};return e.watch(k,()=>{e.nextTick(()=>{x.value.complete||(f.value=!0)})}),e.watch(h,a=>{M(),l("switch",a)}),J.onMountedOrActivated(()=>{var a,y;L(),(y=(a=I.value)==null?void 0:a.focus)==null||y.call(a)}),()=>e.createVNode("div",{ref:a=>I.value=a,tabindex:1,class:[`${r}-wrapper`,`${S.value}`],style:{zIndex:t.zIndex}},[e.createVNode("div",{class:`${r}-mask`,onClick:()=>t.onHideOnClickModal&&z()},null),e.createVNode("span",{class:[`${r}-btn`,`${r}-close`],onClick:()=>z()},[e.createVNode(O.CloseOutlined,null,null)]),!c.value&&e.createVNode(e.Fragment,null,[e.createVNode("span",{class:{[`${r}-btn`]:!0,[`${r}-prev`]:!0,["is-disabled"]:!t.infinite&&d.value},onClick:()=>G()},[e.createVNode(O.LeftOutlined,null,null)]),e.createVNode("span",{class:{[`${r}-btn`]:!0,[`${r}-next`]:!0,["is-disabled"]:!t.infinite&&d.value},onClick:()=>Y()},[e.createVNode(O.RightOutlined,null,null)])]),e.createVNode("div",{class:[`${r}-btn`,`${r}-actions`]},[e.createVNode("div",{class:`${r}-actions-inner`},[e.createVNode(O.ZoomOutOutlined,{onClick:()=>C("zoomOut")},null),e.createVNode(O.ZoomInOutlined,{onClick:()=>C("zoomIn")},null),e.createVNode("i",{class:`${r}-actions-divider`},null),e.createVNode("i",{onClick:()=>D()},[p.value.icon]),e.createVNode("i",{class:`${r}-actions-divider`},null),e.createVNode(O.RotateLeftOutlined,{onClick:()=>C("anticlocelise")},null),e.createVNode(O.RotateRightOutlined,{onClick:()=>C("clocelise")},null)])]),f.value&&e.createVNode("div",{class:`${r}-canvas`},[e.createVNode(e.resolveComponent("a-spin"),{indicator:e.createVNode(O.LoadingOutlined,{style:{color:"#fff",fontSize:"40px"}},null)},null)]),e.createVNode("div",{class:`${r}-canvas`},[t.urlList.map((a,y)=>e.createVNode("img",{ref:n=>x.value=n,class:`${r}-img`,key:a,style:{...E.value,display:y===h.value?"block":"none"},src:a,onLoad:()=>F(),onError:n=>_(n),onMousedown:n=>P(n)},null))])])}});function ie(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}let ee="";const ce=e.defineComponent({props:{hideOnClickModal:j.hideOnClickModal},setup(t,{slots:l}){const u=w.getPrefixCls({suffixCls:"image-viewer-group"}),N=e.ref(!1),b=e.ref(""),r=e.computed(()=>{var c,d,m,k,S;return((c=l.default)==null?void 0:c.call(l).length)===1&&(String((d=l.default)==null?void 0:d.call(l)[0].type)===String(Symbol("Fragment"))||String((m=l.default)==null?void 0:m.call(l)[0].type)===String(Symbol()))?((k=l.default)==null?void 0:k.call(l)[0].children)||[]:((S=l.default)==null?void 0:S.call(l))||[]}),f=e.computed(()=>r.value.filter(m=>I(m)).map(m=>m.props.src).filter(m=>m)||[]),h=e.computed(()=>Array.isArray(f.value)&&f.value.length>0),I=c=>c&&c.type&&(c.type.isGImage||c.type.name==="GImage"),x=()=>{let c=0;const d=f.value.findIndex(m=>m===b.value);return d>=0&&(c=d),c},p=c=>{!h.value||!c||(b.value=c,ee=document.body.style.overflow,document.body.style.overflow="hidden",N.value=!0)},i=()=>{document.body.style.overflow=ee,N.value=!1};return()=>{let c;return e.createVNode("div",{class:`${u}`},[e.createVNode(e.resolveComponent("a-space"),{size:15},ie(c=r.value.map((d,m)=>I(d)?e.createVNode("div",{key:m,class:`${u}-item`,onClick:()=>{var k;return p(((k=d.props)==null?void 0:k.src)||"")}},[e.cloneVNode(d,{disablePreview:!0})]):null))?c:{default:()=>[c]}),e.createVNode(e.Teleport,{to:"body"},{default:()=>[h.value&&N.value&&e.createVNode(X,{initialIndex:x(),urlList:f.value,onHideOnClickModal:t.hideOnClickModal,onClose:()=>i()},null)]})])}}}),se=t=>t&&t.nodeType===Node.ELEMENT_NODE,te=()=>document.documentElement.style.objectFit!==void 0;let ne="";const V={NONE:"none",CONTAIN:"contain",COVER:"cover",FILL:"fill",SCALE_DOWN:"scale-down"},$=e.defineComponent({props:j,name:"GImage",inheritAttrs:!1,emits:["error","click"],setup(t,{slots:l,emit:u,attrs:N}){const b=w.getPrefixCls({suffixCls:"image"}),r=e.ref(!1),f=e.ref(!0),h=e.ref(0),I=e.ref(0),x=e.ref(!1),p=e.ref(null),i=e.ref();let c,d;const m=e.computed(()=>({width:t.width?`${t.width}px`:void 0,height:t.height?`${t.height}px`:void 0})),k=e.computed(()=>{const{fit:n}=t;return!w.isServer&&n?te()?{"object-fit":n,...m.value}:{...Z(n),...m.value}:m.value}),S=e.computed(()=>{const{fit:n}=t;return!w.isServer&&!te()&&n!==V.FILL}),E=e.computed(()=>{const{previewSrcList:n}=t;return Array.isArray(n)&&n.length>0}),z=e.computed(()=>{const{src:n,previewSrcList:o}=t;let s=0;const g=o.indexOf(n);return g>=0&&(s=g),s}),L=e.computed(()=>N),Z=n=>{const o=t.width||h.value,s=t.height||I.value;if(!p.value)return{};const{clientWidth:g,clientHeight:K}=p.value;if(!o||!s||!g||!K)return{};const ae=o/s,le=g/K;switch(n===V.SCALE_DOWN&&(n=o<g&&s<K?V.NONE:V.CONTAIN),n){case V.NONE:return{width:"auto",height:"auto"};case V.CONTAIN:return ae<le?{width:"auto"}:{height:"auto"};case V.COVER:return ae<le?{height:"auto"}:{width:"auto"};default:return{}}},F=()=>{if(w.isServer)return;const n=L.value;f.value=!0,r.value=!1;const o=new Image;o.onload=s=>G(s,o),o.onerror=Y,Object.keys(n).forEach(s=>{if(s.toLowerCase()==="onload")return;const g=n[s];o.setAttribute(s,g)}),o.src=t.src};function _(){w.isInContainer(p.value,i.value)&&(F(),D())}const P=W.useThrottleFn(_,200),M=async()=>{var o;if(w.isServer)return;await e.nextTick();const{scrollContainer:n}=t;se(n)?i.value=n:w.isString(n)&&n!==""?i.value=(o=document.querySelector(n))!=null?o:void 0:p.value&&(i.value=w.getScrollContainer(p.value)),i.value&&(c=W.useEventListener(i,"scroll",P),setTimeout(()=>_(),200))},D=()=>{w.isServer||!i.value||!P||(c(),i.value=void 0)},G=(n,o)=>{h.value=o.width,I.value=o.height,f.value=!1,r.value=!1},Y=n=>{f.value=!1,r.value=!0,u("error",n)},C=n=>{if(!!n.ctrlKey){if(n.deltaY<0)return n.preventDefault(),!1;if(n.deltaY>0)return n.preventDefault(),!1}},a=()=>{!E.value||t.disablePreview||(d=W.useEventListener("wheel",C,{passive:!1}),ne=document.body.style.overflow,document.body.style.overflow="hidden",x.value=!0)},y=()=>{d==null||d(),document.body.style.overflow=ne,x.value=!1};return e.watch(()=>t.src,()=>{t.lazy?(f.value=!0,r.value=!1,D(),M()):F()}),J.onMountedOrActivated(()=>{t.lazy?M():F()}),()=>{const n=w.getSlotVNode(l,t,"fallback"),o=w.getSlotVNode(l,t,"placeholder");return e.createVNode(e.Fragment,null,[e.createVNode("div",{class:{[`${b}`]:!0,[`${L.value.class}`]:L.value.class},ref:s=>p.value=s,style:{...L.value.style||{},display:t.lazy?"block":void 0},onClick:()=>{u("click")}},[f.value?o||e.createVNode("div",{class:`${b}-placeholder`},null):r.value?n||e.createVNode("div",{class:`${b}-error`},[e.createTextVNode("\u52A0\u8F7D\u5931\u8D25")]):e.createVNode("img",e.mergeProps({class:{[`${b}-inner`]:!0,[`${b}-inner-center`]:S.value,[`${b}-preview`]:E.value}},L.value,{src:t.src,style:k.value,onClick:()=>a()}),null),e.createVNode(e.Teleport,{to:"body",disabled:!t.appendToBody},{default:()=>[E.value&&x.value&&e.createVNode(X,{zIndex:t.zIndex,initialIndex:z.value,urlList:t.previewSrcList,onHideOnClickModal:t.hideOnClickModal,onClose:()=>y()},null)]})])])}}});$.isWImage=!0,$.install=t=>(t.component($.name,$),t),v.GImage=$,v.ImageViewer=X,v.ImageViewerGroup=ce,v.default=$,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +0,0 @@
-.gx-image{position:relative;display:inline-flex;overflow:hidden}.gx-image-inner{width:100%;height:100%;vertical-align:top}.gx-image-inner.gx-image-inner-center{position:relative;top:50%;left:50%;display:block;transform:translate(-50%,-50%)}.gx-image-placeholder{width:100%;height:100%;background:#f5f7fa}.gx-image-error{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:14px;color:#c0c4cc;vertical-align:middle;background:#f5f7fa}.gx-image-preview,.gx-image-viewer-group-item{cursor:pointer}.gx-image-viewer-wrapper{position:fixed;top:0;right:0;bottom:0;left:0}.gx-image-viewer-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5}.gx-image-viewer-btn{position:absolute;z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;border-radius:50%;opacity:.8}.gx-image-viewer-close{top:40px;right:40px;width:40px;height:40px;font-size:40px;width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.gx-image-viewer-canvas{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.gx-image-viewer-actions{bottom:30px;left:50%;width:282px;height:44px;padding:0 23px;background-color:#606266;border-color:#fff;border-radius:22px;transform:translate(-50%)}.gx-image-viewer-actions-inner{display:flex;align-items:center;justify-content:space-around;width:100%;height:100%;font-size:23px;color:#fff;text-align:justify;cursor:default}.gx-image-viewer-prev{top:50%;left:40px;transform:translateY(-50%);width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.gx-image-viewer-next{top:50%;right:40px;text-indent:2px;transform:translateY(-50%);width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.viewer-fade-enter-active{animation:viewer-fade-in .3s}.viewer-fade-leave-active{animation:viewer-fade-out .3s}@keyframes viewer-fade-in{0%{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes viewer-fade-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20px,0)}}

package/dist/style.less

@@ -1,177 +0,0 @@
-@import './design/config.less';
-
-.size() {
-  width: 100%;
-  height: 100%;
-}
-
-.op-icon() {
-  width: 44px;
-  height: 44px;
-  font-size: 24px;
-  color: #fff;
-  background-color: #606266;
-  border-color: #fff;
-}
-
-.@{gx-prefix}-image {
-  position: relative;
-  display: inline-flex;
-  overflow: hidden;
-
-  &-inner {
-    .size();
-    vertical-align: top;
-
-    &.gx-image-inner-center {
-      position: relative;
-      top: 50%;
-      left: 50%;
-      display: block;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  &-placeholder {
-    .size();
-    background: #f5f7fa;
-  }
-
-  &-error {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .size();
-    font-size: 14px;
-    color: #c0c4cc;
-    vertical-align: middle;
-    background: #f5f7fa;
-  }
-
-  &-preview {
-    cursor: pointer;
-  }
-}
-
-.@{gx-prefix}-image-viewer {
-  &-group-item {
-    cursor: pointer;
-  }
-
-  &-wrapper {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  &-mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #000;
-    opacity: 0.5;
-  }
-
-  &-btn {
-    position: absolute;
-    z-index: 1;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    user-select: none;
-    border-radius: 50%;
-    opacity: 0.8;
-  }
-
-  &-close {
-    top: 40px;
-    right: 40px;
-    width: 40px;
-    height: 40px;
-    font-size: 40px;
-    .op-icon();
-  }
-
-  &-canvas {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  &-actions {
-    bottom: 30px;
-    left: 50%;
-    width: 282px;
-    height: 44px;
-    padding: 0 23px;
-    background-color: #606266;
-    border-color: #fff;
-    border-radius: 22px;
-    transform: translateX(-50%);
-
-    &-inner {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      width: 100%;
-      height: 100%;
-      font-size: 23px;
-      color: #fff;
-      text-align: justify;
-      cursor: default;
-    }
-  }
-
-  &-prev {
-    top: 50%;
-    left: 40px;
-    transform: translateY(-50%);
-    .op-icon();
-  }
-
-  &-next {
-    top: 50%;
-    right: 40px;
-    text-indent: 2px;
-    transform: translateY(-50%);
-    .op-icon();
-  }
-}
-
-.viewer-fade-enter-active {
-  animation: viewer-fade-in 0.3s;
-}
-
-.viewer-fade-leave-active {
-  animation: viewer-fade-out 0.3s;
-}
-
-@keyframes viewer-fade-in {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, -20px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes viewer-fade-out {
-  0% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(0, -20px, 0);
-  }
-}