magnifuer/dist/index.umd.js

Feature-rich Vue component and tooling for creating customizable magnifying-glass-style interfaces with ease.

(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@floating-ui/vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/vue","@vueuse/core"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.index={},l.Vue,l.FloatingUIVue,l.VueUse))})(this,function(l,e,Y,k){"use strict";function x(o,c,t,f={}){const r=e.toRef(c),u=e.reactive({width:e.toRef(t.width),height:e.toRef(t.height)}),d=e.toRef((f==null?void 0:f.allowOverflow)??!1),{elementX:g,elementY:i,x:b,y,elementWidth:z,elementHeight:M}=k.useMouseInElement(o),p=e.reactive({x:g,y:i,absolute:{x:b,y},isInside:k.useElementHover(o)}),h=e.reactive({width:z,height:M}),m=e.reactive({width:e.computed(()=>u.width/r.value),height:e.computed(()=>u.height/r.value)}),w=e.reactive({x:e.computed(()=>d.value?p.x:Math.max(m.width/2,Math.min(h.width-m.width/2,p.x))),y:e.computed(()=>d.value?p.y:Math.max(m.height/2,Math.min(h.height-m.height/2,p.y)))});return e.reactive({scale:r,x:e.computed(()=>w.x/h.width),y:e.computed(()=>w.y/h.height),absolute:w,pointer:p,size:u,containerSize:h,areaSize:m})}function s(o){return typeof o=="number"?`${o}px`:o}function $(o,c={}){const t=e.computed(()=>e.toValue(c.min)??1),f=e.computed(()=>e.toValue(c.max)??10),r=i=>Math.max(1,t.value,Math.min(f.value,i)),u=e.computed({get:()=>r(o.value),set:i=>{o.value=r(i)}});e.watch([t,f],()=>{o.value=u.value});function d(i){const b=e.toValue(c.speed)??1.3,y=c.step??((z,M)=>z*Math.pow(b,M));u.value=y(u.value,i)}function g(i){d(i.deltaY>0?-1:1),i.preventDefault(),i.stopPropagation()}return{scale:u,alter:d,onWheel:g}}const j=["src"],X=["src"],E=((o,c)=>{const t=o.__vccOpts||o;for(const[f,r]of c)t[f]=r;return t})(e.defineComponent({__name:"Magnifuer",props:e.mergeModels({controllable:{type:Boolean,default:!1},img:{},anchor:{default:"self"},position:{default:"anchor"},transform:{type:Boolean,default:!0},offset:{},floating:{},size:{default:"anchor"},teleport:{type:[String,Boolean],default:"body"},transition:{},zIndex:{default:1e3},disabled:{type:Boolean,default:!1},allowOverflow:{type:Boolean,default:!1},area:{type:Boolean,default:!0},cursor:{},borderRadius:{},areaClass:{},magnifierClass:{},contentClass:{}},{scale:{required:!0},scaleModifiers:{}}),emits:["update:scale"],setup(o,{expose:c}){var O;const t=o,f=e.useModel(o,"scale"),r=e.computed(()=>typeof t.controllable=="object"?t.controllable:{}),{onWheel:u}=$(f,{min:()=>r.value.min,max:()=>r.value.max,speed:()=>r.value.speed,step:r.value.step}),d=e.ref(),g=e.ref(),{elementPositionX:i,elementPositionY:b}=k.useMouseInElement(d),y=e.computed(()=>typeof window<"u"&&t.anchor instanceof HTMLElement?t.anchor:d.value),{x:z,y:M,elementPositionX:p,elementPositionY:h,elementWidth:m,elementHeight:w}=k.useMouseInElement(y),C=e.reactive({x:e.computed(()=>t.anchor==="pointer"?z.value:p.value),y:e.computed(()=>t.anchor==="pointer"?M.value:h.value),width:e.computed(()=>t.anchor==="pointer"?0:m.value),height:e.computed(()=>t.anchor==="pointer"?0:w.value)});function R(n=!1){if(t.img)return typeof t.img.src=="string"?t.img.src:n?t.img.src.magnifier:t.img.src.default}const V=e.reactive({default:e.computed(()=>R()),magnifier:e.computed(()=>R(!0))}),P=e.computed(()=>t.position==="anchor"?{x:C.x-(t.teleport===!1?i.value:0),y:C.y-(t.teleport===!1?b.value:0)}:t.position),B=e.computed(()=>{if(t.offset)return typeof t.offset=="object"?{x:s(t.offset.x),y:s(t.offset.y)}:{x:s(t.offset),y:s(t.offset)}}),{floatingStyles:T}=Y.useFloating(y,g,{open:()=>{var n;return(n=t.floating)==null?void 0:n.open},placement:()=>{var n;return(n=t.floating)==null?void 0:n.placement},strategy:()=>{var n;return(n=t.floating)==null?void 0:n.strategy},middleware:()=>{var n;return(n=t.floating)==null?void 0:n.middleware},transform:()=>{var n;return(n=t.floating)==null?void 0:n.transform},whileElementsMounted:(O=t.floating)==null?void 0:O.whileElementsMounted}),W=e.computed(()=>{if(t.floating)return T.value;const n={x:s(P.value.x),y:s(P.value.y)},S=B.value?`translate(${B.value.x}, ${B.value.y})`:"";return t.transform?{position:"absolute",top:"0",left:"0",transform:[S,`translate(${n.x}, ${n.y})`].filter(Boolean).join(" ")}:{position:"absolute",top:n.y,left:n.x,transform:S}}),I=x(d,f,{width:e.computed(()=>t.size==="anchor"?m.value:typeof t.size=="number"?t.size:t.size.width),height:e.computed(()=>t.size==="anchor"?w.value:typeof t.size=="number"?t.size:t.size.height)},{allowOverflow:()=>t.allowOverflow}),a=e.computed(()=>({active:!t.disabled&&I.pointer.isInside,...I,anchor:C,offset:B.value}));return c({state:a}),(n,S)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({ref_key:"containerRef",ref:d,class:"magnifuer",style:{cursor:n.cursor}},n.$attrs,{onWheel:S[0]||(S[0]=H=>n.controllable&&!n.disabled&&e.unref(u)(H))}),[e.renderSlot(n.$slots,"default",{state:a.value,isMagnifier:!1},()=>[n.img?(e.openBlock(),e.createElementBlock("img",e.mergeProps({key:0},n.img,{src:V.default}),null,16,j)):e.createCommentVNode("",!0)],!0),n.area&&a.value.active?(e.openBlock(),e.createElementBlock("div",{key:0,class:"magnifuer__area-container",style:e.normalizeStyle({width:e.unref(s)(a.value.areaSize.width),height:e.unref(s)(a.value.areaSize.height),transform:["translate(-50%, -50%)",`translate(${a.value.absolute.x}px, ${a.value.absolute.y}px)`].join(" ")})},[e.renderSlot(n.$slots,"area",{state:a.value},()=>[e.createElementVNode("div",{class:e.normalizeClass(["magnifuer__area",n.areaClass]),style:e.normalizeStyle({borderRadius:n.borderRadius})},null,6)],!0)],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.Teleport,{to:n.teleport===!1?void 0:n.teleport,disabled:n.teleport===!1},[e.createVNode(e.Transition,e.mergeProps({name:typeof n.transition=="string"?n.transition:void 0},typeof n.transition=="object"?n.transition:{}),{default:e.withCtx(()=>[a.value.active?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"magnifierRef",ref:g,class:e.normalizeClass(["magnifuer__magnifier",n.magnifierClass]),style:e.normalizeStyle({...W.value,width:e.unref(s)(a.value.size.width),height:e.unref(s)(a.value.size.height),zIndex:n.zIndex,borderRadius:n.borderRadius})},[e.createElementVNode("div",{ref:"contentRef",class:e.normalizeClass(["magnifuer__content",n.contentClass]),style:e.normalizeStyle({width:e.unref(s)(a.value.containerSize.width),height:e.unref(s)(a.value.containerSize.height),transform:[`scale(${f.value})`,`translate(${-a.value.x*100}%, ${-a.value.y*100}%)`].join(" ")})},[e.renderSlot(n.$slots,"magnifier",{state:a.value},()=>[e.renderSlot(n.$slots,"default",{state:a.value,isMagnifier:!0},()=>[n.img?(e.openBlock(),e.createElementBlock("img",e.mergeProps({key:0},n.img,{src:V.magnifier}),null,16,X)):e.createCommentVNode("",!0)],!0)],!0)],6)],6)):e.createCommentVNode("",!0)]),_:3},16,["name"])],8,["to","disabled"]))],16))}}),[["__scopeId","data-v-a54784e1"]]),N={install:o=>{o.component("Magnifuer",E)}};l.Magnifuer=E,l.default=N,l.useMagnifuer=x,l.useMagnifuerScale=$,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});