petite-vue-directives
Version:
A collection of custom directives for petite-vue.
2 lines (1 loc) • 1.74 kB
JavaScript
var PetiteVueDirectives=function(i){"use strict";const u=n=>{try{n.get(`(()=>{$refs["${n.exp}"]=$el})()`)}catch(t){console.warn("expression error:",t)}};function a(n={}){const t=[];for(const e of Object.keys(n))if(e.includes("_")){const[r,...o]=e.split("_");t.push({key:r,value:o.length===1?o[0]:o})}else t.push({key:e,value:void 0});return t}function l(n,t){return`(()=>{const $v={${Object.entries(n).map(([o,s])=>`${o}:${s}`).join(",")}};${t}})()`}const d=n=>{const t=n.arg,e=o=>{o.forEach(s=>{try{const c=l({width:s.contentRect.width,height:s.contentRect.height},n.exp);n.get(c)}catch(c){console.warn("expression error:",c)}})},r=new ResizeObserver(e);if(t==="document")r.observe(document.documentElement);else if(t==="window")r.observe(document.documentElement);else if(typeof t=="string"&&t!==""){const o=document.querySelector(`#${t}`);o?r.observe(o):console.error(`v-resize: Element with id "${t}" not found`)}else r.observe(n.el);return()=>r.disconnect()},f=n=>{const t=a(n.modifiers),e=h(t)||0,r=v(t),o=new IntersectionObserver(s=>{s.forEach(c=>{const g=l({intersect:c.isIntersecting},n.exp);n.get(g)})},{threshold:e,rootMargin:r});return requestAnimationFrame(()=>o.observe(n.el)),()=>o.disconnect()};function h(n){let t=0;return n.forEach(({key:e,value:r},o)=>{e==="half"?t=.5:e==="full"?t=.99:e==="threshold"&&(t=(Number(r)||.99)/100)}),t}function v(n){const t=n.find(r=>r.key==="margin");if(!t)return"0px";let e=Array.isArray(t.value)?t.value:[t.value];return e.length===1?e=[e[0],e[0],e[0],e[0]]:e.length===2?e=[e[0],e[1],e[0],e[1]]:e.length===3?e=[e[0],e[1],e[2],e[1]]:e.length===4?e=e:e=e.slice(0,4),e.join(" ")}return i.vIntersect=f,i.vRef=u,i.vResize=d,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),i}({});