direvue/dist/direvue.umd.js

## Introduction

(function(y,L){typeof exports=="object"&&typeof module<"u"?module.exports=L(require("vue")):typeof define=="function"&&define.amd?define(["vue"],L):(y=typeof globalThis<"u"?globalThis:y||self,y.direvue=L(y.Vue))})(this,function(y){"use strict";const L={beforeMount(e,t){e.clickOutsideEvent=function(s){const o=s.type==="touchstart",a=!(e===s.target||e.contains(s.target));if((o||a)&&t.value){let l=!0;t.modifiers&&t.modifiers.enter&&!s.key==="Enter"&&(l=!1),typeof t.value=="function"&&!t.value(s)&&(l=!1),l&&t.value(s)}},document.addEventListener("click",e.clickOutsideEvent,!0),document.addEventListener("touchstart",e.clickOutsideEvent,!0)},unmounted(e){document.removeEventListener("click",e.clickOutsideEvent,!0),document.removeEventListener("touchstart",e.clickOutsideEvent,!0)}};async function H(e,t){try{await navigator.clipboard.writeText(e),t.dispatchEvent(new Event("copied"))}catch{t.dispatchEvent(new Event("copyerror"))}}const q=(e,t)=>{let s=e;return t.uppercase?s=s.toUpperCase():t.lowercase?s=s.toLowerCase():t.capitalize?s=s.charAt(0).toUpperCase()+s.slice(1):t.capitalizeAll&&(s=s.split(" ").map(o=>o.charAt(0).toUpperCase()+o.slice(1)).join(" ")),s},F=async(e,t,s)=>{const o=q(t,s);await H(o,e)},$=(e,t)=>{let s;if(t.arg==="id"){const a=document.getElementById(t.value);a&&(s=a.innerText)}else s=t.value;const o=()=>F(e,s,t.modifiers);e.addEventListener("click",o),e.clickCopyToClipboard=o},z={mounted(e,t){$(e,t)},updated(e,t){e.removeEventListener("click",e.clickCopyToClipboard),$(e,t)},unmounted(e){e.removeEventListener("click",e.clickCopyToClipboard)}},D={mounted:(e,t)=>{const s=t.value!==void 0?t.value:!0;b(e,s),T(e,s)},updated:(e,t)=>{const s=t.value!==void 0?t.value:!0;b(e,s),T(e,s)}};function b(e,t){t?O(e):N(e)}function O(e){e.disabled=!0,e.className+=" disabled",e.style.pointerEvents="none"}function N(e){e.disabled=!1,e.className=e.className.replace(/\bdisabled\b/g,""),e.style.pointerEvents="auto"}function T(e,t){const s=["click","mousedown","mouseup","mousemove","keydown","keyup","keypress","contextmenu","touchstart","touchend","touchmove","touchcancel"];t?s.forEach(o=>{e.addEventListener(o,M,!1)}):s.forEach(o=>{e.removeEventListener(o,M,!1)})}function M(e){e.preventDefault()}const P={mounted(e,t){e.addEventListener("click",()=>{S(t.value)})},updated(e,t){e.addEventListener("click",()=>{S(t.value)})}};function S(e){setTimeout(()=>{document.getElementById(e).scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"})},50)}const j={mounted(e,t){const s=document.createElement("div");s.classList.add("tooltip"),s.style.position="absolute",s.style.visibility="hidden",s.style.opacity=0,s.style.transition="opacity 0.2s",s.style.padding="10px",s.style.zIndex=10,s.style.textAlign="center";const o=document.createElement("div");o.classList.add("tooltip-arrow"),s.appendChild(o),s.textContent=t.value;const a=()=>{s.style.visibility="visible",s.style.opacity=1;const n=e.getBoundingClientRect(),i=s.getBoundingClientRect(),d=8;t.modifiers.top?(s.classList.add("tooltip-top"),s.style.top=`${n.top-i.height-d}px`,s.style.left=`${n.left+n.width/2-i.width/2}px`,o.style.top=`${i.height-1}px`,o.style.left=`${i.width/2-d}px`):t.modifiers.right?(s.classList.add("tooltip-right"),s.style.top=`${n.top+n.height/2-i.height/2}px`,s.style.left=`${n.right+d}px`,o.style.top=`${i.height/2-d}px`,o.style.left=`-${d}px`):t.modifiers.bottom?(s.classList.add("tooltip-bottom"),s.style.top=`${n.bottom+d}px`,s.style.left=`${n.left+n.width/2-i.width/2}px`,o.style.top=`-${d}px`,o.style.left=`${i.width/2-d}px`):t.modifiers.left?(s.classList.add("tooltip-left"),s.style.top=`${n.top+n.height/2-i.height/2}px`,s.style.left=`${n.left-i.width-d}px`,o.style.top=`${i.height/2-d}px`,o.style.left=`${i.width-1}px`):(s.classList.add("tooltip-top"),s.style.top=`${n.top-i.height-d}px`,s.style.left=`${n.left+n.width/2-i.width/2}px`,o.style.top=`${i.height-1}px`,o.style.left=`${i.width/2-d}px`)},l=()=>{s.style.visibility="hidden",s.style.opacity=0};e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",l),e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",l),y.onBeforeUnmount(()=>{e.removeEventListener("mouseenter",a),e.removeEventListener("mouseleave",l),e.removeChild(s)}),e.appendChild(s)}},G={mounted(e,t){A(e,t)},updated(e,t){A(e,t)}};function A(e,t){const s=e.innerText;e.innerHTML=s;let o=0;if(t.value){const{caseSensitive:a}=t.modifiers,l=`${a?"":"i"}g`,n=new RegExp(W(t.value),l),i=e.innerHTML.replace(n,d=>(o++,`<span class="highlight">${d}</span>`));e.innerHTML=i}e.dispatchEvent(new CustomEvent("highlight",{detail:o}))}function W(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}const X={install:e=>{e.directive("click-outside",L).directive("copy",z).directive("disable",D).directive("scroll-to-view",P).directive("tooltip",j).directive("highlight",G)}},Z=`<svg class='closeIconSvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275z"/></svg>`,I=`<svg class='prevIconSvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z"/></svg>`;function k(e,t){const s=document.createElement("button");return s.classList.add(e),s.innerHTML=t,s}const Y={mounted(e,t){const s=t.value,o=t.modifiers.thumbnails,a=t.modifiers.loop;e.addEventListener("click",()=>{const l={value:0};let n,i;d();function d(){n=document.createElement("div"),n.classList.add("fullscreen"),i=document.createElement("div"),i.classList.add("img-container"),n.appendChild(i),r(),o&&c(),document.body.appendChild(n),n.addEventListener("click",p=>{p.target===n&&document.body.removeChild(n)})}function r(){const p=document.createElement("img");p.src=s[l.value],p.classList.add("fullscreen-image"),i.appendChild(p),f(p,l)}function c(){const p=document.createElement("div");p.classList.add("thumbnail-bar");const m=document.createElement("div");m.classList.add("thumbnail-container"),p.appendChild(m),s.forEach((u,h)=>{const g=v(u,h);m.appendChild(g)}),n.appendChild(p)}function v(p,m){const u=document.createElement("div");return u.classList.add("thumbnail"),u.innerHTML=`<img src="${p}" alt="Thumbnail ${m}" />`,u.addEventListener("click",()=>{l.value=m,E()}),u}function f(p,m){const u=k("close-button",Z);u.addEventListener("click",()=>{document.body.removeChild(n)}),i.appendChild(u);const h=k("next-button",I);h.addEventListener("click",()=>{m.value=a?(m.value+1)%s.length:Math.min(m.value+1,s.length-1),E()}),i.appendChild(h);const g=k("prev-button",I);g.addEventListener("click",()=>{m.value=a?(m.value-1+s.length)%s.length:Math.max(m.value-1,0),E()}),i.appendChild(g)}function E(){i.querySelector(".fullscreen-image").src=s[l.value]}})}},K={mounted(e,t){const{filter:s,value:o,arg:a}=t.value,l=()=>{console.log("applyFilters"),e.classList.add(s),e.style.filter=`
        ${s==="grayscale"?`grayscale(${o||100}%) `:""}
        ${s==="blur"?`blur(${o||0}px) `:""}
        ${s==="brightness"?`brightness(${o||100}%) `:""}
        ${s==="contrast"?`contrast(${o||100}%) `:""}
        ${s==="invert"?"invert(100%) ":""}
        ${s==="opacity"?`opacity(${o||1}) `:""}
        ${s==="saturate"?`saturate(${o||100}%) `:""}
        ${s==="sepia"?`sepia(${o||0}%) `:""}
        ${s==="hueRotate"?`hue-rotate(${o||0}deg) `:""}
        ${s==="dropShadow"?`drop-shadow(${o||"2px 2px 2px rgba(0, 0, 0, 0.5)"})`:""}
      `},n=()=>{e.style.filter="none"},i=t.arg==="hover",d=t.arg==="click";console.log("onHover",i),i?(e.addEventListener("mouseenter",l),e.addEventListener("mouseleave",n)):d&&(e.addEventListener("click",l),e.addEventListener("dblclick",n))}},U={mounted(e,t){const s=t.value,o=t.arg||4,n=`
          <div class="v-image-gallery-mainJoin">
            ${s.slice(0,o).map((i,d)=>{const r=document.createElement("main");r.classList.add("v-image-gallery-mainElement"),d===3&&s.length>3||d===o-1&&s.length>o?r.classList.add("relative"):s.length===1?r.classList.add("col-span-2"):r.classList.add("col-span-1"),s.length===3&&d===2&&(r.classList.remove("col-span-1"),r.classList.add("col-span-2"));const c=document.createElement("img");c.src=i,c.alt="",c.classList.add("v-image-gallery-element"),s.length===3&&d===2&&c.classList.add("col-span-2"),d>=o&&c.classList.add("v-image-gallery-blur"),c.style.display=d<o?"block":"none",c.addEventListener("click",()=>{d===o-1&&s.length>o&&this.OpenPreview()});const v=document.createElement("div");v.className="black-overlay",v.style.display=d===o-1&&s.length>o?"flex":"none";const f=document.createElement("span");return f.className="v-image-gallery-spanElement",f.textContent=`+${s.length-o}`,v.appendChild(f),r.appendChild(c),r.appendChild(v),r.outerHTML}).join("")}
          </div>
        `;e.innerHTML=n}},_=`<svg class='closeIconSvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275z"/></svg>`,J={mounted(e){let t=!1,s=null,o;function a(i){if(t)e.style.transition="transform 0.3s ease",e.style.transform=s,t=!1,document.querySelector(".v-image-zoom-container").remove();else{const d=document.querySelector("body"),r=document.createElement("div");r.classList.add("v-image-zoom-container"),d.appendChild(r);const c=document.createElement("div");c.classList.add("v-image-zoom-imageWrapper"),r.appendChild(c);const v=document.createElement("button");v.classList.add("close-button"),v.innerHTML=_,v.addEventListener("click",n),c.appendChild(v),o=i.target.cloneNode(!0),o.classList.add("v-image-zoom-img"),o.style.transform="scale(0.5)",c.appendChild(o),s=getComputedStyle(e).transform,setTimeout(()=>{o.style.transition="transform 0.3s ease",o.style.transform="scale(1)",t=!0},0),r.addEventListener("click",l)}}function l(i){if(i.target===o||i.target.closest(".close-button")){i.preventDefault();return}o.style.transition="transform 0.3s ease",o.style.transform="scale(0.5)",t=!1,setTimeout(()=>{document.querySelector(".v-image-zoom-container").remove()},250)}function n(){o.style.transition="transform 0.3s ease",o.style.transform="scale(0.5)",t=!1,setTimeout(()=>{document.querySelector(".v-image-zoom-container").remove()},250)}e.addEventListener("click",a),e.addEventListener("touchstart",a)}},Q=`<svg id='vLoader' xmlns="http://www.w3.org/2000/svg" class='animate-spin' viewBox="0 0 16 16"><path fill="currentColor" d="M2 8a6 6 0 1 1 6 6a.5.5 0 0 0 0 1a7 7 0 1 0-7-7a.5.5 0 0 0 1 0Z"/></svg>`,ee={mounted(e,t){e.classList.add("hidden");const s=t.value&&t.value.loaderOptions;if(s&&s.value){e.insertAdjacentHTML("beforebegin",s.value);const o=document.getElementById("vLoader");o.style.width=s.width||"32px",o.style.height=s.height||"32px"}else{e.insertAdjacentHTML("beforebegin",Q);const o=document.getElementById("vLoader");o.style.width=s.width||"32px",o.style.height=s.height||"32px"}e.addEventListener("load",()=>{const o=document.getElementById("vLoader");o&&o.remove(),e.classList.remove("hidden")}),e.addEventListener("error",()=>{const o=t.value&&t.value.fallbacks;if(o&&o.length>0){let a=0;const l=()=>{e.src=o[a],e.addEventListener("load",()=>{e.classList.remove("hidden")}),e.addEventListener("error",()=>{a++,a<o.length?l():e.src="https://placehold.it/200x200?text=404"})};l()}else e.src="https://placehold.it/200x200?text=404"})}},te={mounted(e,t){const s=document.createElement("div");s.classList.add("image-compare-container");const o=document.createElement("img");o.classList.add("img-wrapper","before"),t.value.customClassSuffix&&o.classList.add("before-"+t.value.customClassSuffix),o.src=t.value.before;const a=document.createElement("img");a.classList.add("img-wrapper","after"),t.value.customClassSuffix&&a.classList.add("after-"+t.value.customClassSuffix),a.src=t.value.after;const l=document.createElement("div");t.value.direction==="vertical"?l.classList.add("slider","slider-vertical"):l.classList.add("slider");const n=document.createElement("div");n.classList.add("handle"),n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"></path> </svg>',t.value.direction==="vertical"&&n.classList.add("handle-vertical"),l.appendChild(n),s.appendChild(o),s.appendChild(a),s.appendChild(l),e.appendChild(s);let i=!1;const d=(p,m)=>{if(t.value.direction==="vertical"){let u,h;return function(){const g=this,C=arguments;C[0].type==="mousemove"?(clearTimeout(u),u=setTimeout(()=>p.apply(g,C),m)):C[0].type==="mousedown"&&(clearTimeout(h),h=setTimeout(()=>p.apply(g,C),m))}}else{let u;return function(){const h=this,g=arguments;clearTimeout(u),u=setTimeout(()=>p.apply(h,g),m)}}},r=()=>{i=!0},c=()=>{i=!1},v=p=>{t.value.direction==="vertical"?(l.style.top=`${p}%`,o.style.clipPath=`inset(${p}% 0 0 0)`,a.style.clipPath=`inset(0 0  ${100-p}% 0)`):(l.style.left=`${p}%`,o.style.clipPath=`inset(0 ${100-p}% 0 0)`,a.style.clipPath=`inset(0 0 0 ${p}%)`)};t.value.sliderValue?v(t.value.sliderValue):v(50);const f=d(p=>{if(i){const m=s.getBoundingClientRect();let u;if(t.value.direction==="vertical"){u=p.clientY-m.top,u=Math.max(0,Math.min(u,m.height));const h=u/m.height*100;v(h)}else{u=p.pageX-m.left,u=Math.max(0,Math.min(u,m.width));const h=u/m.width*100;v(h)}}},10),E=p=>{const m=s.getBoundingClientRect();let u;if(t.value.direction==="vertical"){p.preventDefault(),u=p.touches[0].clientY-m.top,u=Math.max(0,Math.min(u,m.height));const h=u/m.height*100;v(h)}else{u=p.touches[0].pageX-m.left,u=Math.max(0,Math.min(u,m.width));const h=u/m.width*100;v(h)}};l.addEventListener("mousedown",r),e.addEventListener("mouseup",c),e.addEventListener("mousemove",f),l.addEventListener("touchstart",r),e.addEventListener("touchend",c),e.addEventListener("touchmove",E)}},se={mounted(e,t){e.addEventListener("error",()=>{const s=e;let o=s.style.width,a=s.style.height,l=s.style.borderRadius;if(!o||!a||!l||!backgroundColor){const r=window.getComputedStyle(s);o=r.getPropertyValue("width"),a=r.getPropertyValue("height"),l=r.getPropertyValue("border-radius")}if(!o||!a){const r=s.naturalWidth,c=s.naturalHeight;o=r?`${r}px`:null,a=c?`${c}px`:null}const n=parseFloat(o),i=parseFloat(a);let d;if(l.includes("%")?(console.log("borderRadius:",l),d=parseFloat(l)/100*Math.min(n,i)):d=parseFloat(l),!isNaN(n)&&!isNaN(i)&&n>0&&i>0&&!isNaN(d)){const r=document.createElement("div");if(r.style.width=o,r.style.height=a,r.style.borderRadius=l,r.style.display="flex",r.style.justifyContent="center",r.style.alignItems="center",t.arg){let v=t.arg.split(" ");for(let f=0;f<v.length;f++)r.classList.add(v[f])}const c=document.createElement("span");c.textContent=s.alt||"Avatar",c.style.width="100%",c.style.height="100%",c.style.display="flex",c.style.justifyContent="center",c.style.alignItems="center",c.style.overflow="hidden",c.style.userSelect="none",r.appendChild(c),s.parentNode.replaceChild(r,s),e.removeEventListener("error",()=>{})}else console.log("Invalid width, height, or radius")})},updated(e,t){console.log("updated",t.value)}};function oe(e,t){const s="defaultOptionsKey",o=new XMLHttpRequest;o.open("GET",e,!0),o.onreadystatechange=function(){if(o.readyState===4)if(o.status===200){if(o.responseText.trim()===""){t.dispatchEvent(new Event("error")),console.error(`Error loading SVG file from ${e}: Empty response`);return}if(o.responseText.trim().indexOf("<svg")!==0){t.dispatchEvent(new Event("error")),console.log("Error loading SVG file from "+e+": Invalid SVG"),t.innerHTML=t[s].svg;return}const a=new DOMParser;try{const n=a.parseFromString(o.responseText,"image/svg+xml").documentElement,i=t[s];n.setAttribute("width",i.width),n.setAttribute("height",i.height),n.setAttribute("class",i.class),n.setAttribute("style",i.style),n.setAttribute("randomId",Math.random()+1),i.keepParent?t.appendChild(n):t.parentNode.replaceChild(n,t),t.dispatchEvent(new Event("loaded"))}catch(l){t.dispatchEvent(new Event("error")),console.error(`Error parsing SVG file from ${e}: ${l.message}`)}}else t.dispatchEvent(new Event("error")),console.error(`Error loading SVG file from ${e}: Status ${o.status}`)},o.send()}function ae(e){const t=e.getAttribute("svgWidth"),s=e.getAttribute("svgHeight"),o=e.getAttribute("svgStyle"),a=e.getAttribute("svgClass"),l=e.getAttribute("svgKeepParent");e.defaultOptionsKey={svg:'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="m8 12l2-1.5L8 9m8 3l-2-1.5L16 9m0 7l-1.333-1l-1.334 1L12 15l-1.333 1l-1.334-1L8 16"/></g></svg>',width:t||24,height:s||24,style:o||"",class:a||"",keepParent:l||!1}}const ne={mounted(e,t){ae(e),oe(`/assets/${t.value}.svg`,e)}},ie={install:e=>{e.directive("image-view",Y).directive("image-filter",K).directive("image-gallery",U).directive("image-zoom",J).directive("image-fallback",ee).directive("image-compare",te).directive("avatar",se).directive("svg",ne)}},le={mounted(e,t){B(e,t)},updated(e,t){B(e,t)}};function B(e,t){t.arg==="lockonFocus"?e.onblur=()=>e.focus():t.arg==="lock"?(e.focus(),e.onblur=()=>e.focus()):t.arg==="lockonCondition"?t.value?(e.focus(),e.onblur=()=>e.focus()):(e.onblur=null,e.blur()):e.focus()}const re={mounted(e){e&&e.addEventListener("input",()=>{ce(e)})}};function ce(e){e.style.height="",e.style.height=e.scrollHeight+"px"}const x=(e,t=10)=>{e.maxLength=t},de=[{name:"credit-card",function:(e,t)=>{w(t),e.value=e.value.replace(/\D/g,"").replace(/(\d{4})(\d)/,"$1 $2").replace(/(\d{4})(\d)/,"$1 $2").replace(/(\d{4})(\d)/,"$1 $2"),x(e,19)}},{name:"date",function:(e,t)=>{w(t),e.value=e.value.replace(/\D/g,"").replace(/(\d{2})(\d)/,"$1/$2").replace(/(\d{2})(\d)/,"$1/$2"),x(e,10)}},{name:"time",function:(e,t)=>{w(t),e.value=e.value.replace(/\D/g,"").replace(/(\d{2})(\d)/,"$1:$2").replace(/(\d{2})(\d)/,"$1:$2"),x(e,8)}},{name:"number",function:(e,t)=>{w(t),e.removeAttribute("maxlength"),e.value=e.value.replace(/\D/g,"")}},{name:"string",function:(e,t)=>{ue(t),e.value=e.value.replace(/[^A-Za-z]/g,"")}}];function V(e,t,s){if(e){const o=t.value,a=de.find(l=>l.name===o);a&&a.function(e,s)}}function w(e){const t=e.keyCode||e.which,s=String.fromCharCode(t);if(!/[0-9]|\.|Backspace|Delete/.test(s))return e.preventDefault(),!1}function ue(e){const t=e.keyCode||e.which,s=String.fromCharCode(t);if(!/[a-zA-Z]|Backspace|Delete/.test(s))return e.preventDefault(),!1}const pe={mounted(e,t){const s=o=>V(e,t,o);e.addEventListener("input",s),e._handleInputFunction=s},updated(e,t){if(t.value!==t.oldValue){e.value="",e.removeAttribute("maxlength"),e._handleInputFunction&&e.removeEventListener("input",e._handleInputFunction);const s=o=>V(e,t,o);e._handleInputFunction=s,e.addEventListener("input",s)}}},me=(e,t)=>{e.setAttribute("maxlength",t)};function ve(e,t){let s=e.getAttribute("mask-data");me(e,s.length);let o="",a=s.split(""),l=t.split(""),n=[];for(let i=0;i<a.length;i++){const d=a[i],r=l[i];if(r===void 0)break;if(d==="@"){if(/^[a-zA-Z]$/.test(r)&&(n.push(r),i+1<a.length)){const c=a[i+1];c!=="@"&&c!=="#"&&(n.push(c),i++)}}else if(d==="#"){if(/^\d$/.test(r)&&(n.push(r),i+1<a.length)){const c=a[i+1];c!=="@"&&c!=="#"&&(n.push(c),i++)}}else n.push(d)}return o=n.join(""),o}function R(e,t,s){if(!e||!t||!t.value)return;if(typeof t.value!="string"){console.error("Invalid mask format");return}function a(){let l=e.value;if(l){let n=ve(e,l);e.value=n}}e.addEventListener("input",a)}const he={mounted(e,t){e.setAttribute("mask-data",t.value),e.addEventListener("input",()=>{let o=e.getAttribute("mask-data").split(""),a=e.value.split("");o[0]==="@"?/^[a-zA-Z]$/.test(a[0])||(e.value=""):o[0]==="#"&&(/^\d$/.test(a[0])||(e.value="")),R(e,t)})},updated(e,t){if(t.value!==t.oldValue){e.setAttribute("mask-data",t.value);let s=t.value;s[0]!="#"&&s[0]!="@"&&(e.value=s[0])}e.addEventListener("input",()=>{R(e,t)})}},fe={install:e=>{e.directive("focus",le).directive("auto-resize",re).directive("mask",pe).directive("custom-mask",he)}},ge=(e,t,s)=>{const o=document.createElement("span");let a=1,l=.65;n();function n(){const r=e.getBoundingClientRect(),c=s.clientY-r.top+window.scrollY,v=s.clientX-r.left+window.scrollX;o.style.position="absolute",o.style.height="5px",o.style.width="5px",o.style.borderRadius="50%",o.style.backgroundColor=t.value||"#f2f2f29e",o.style.left=`${v}px`,o.style.top=`${c}px`,e.appendChild(o)}function i(){const r=+t.value||50,c=t.modifiers&&t.modifiers.fast?2:1;a<=r?(a+=c,l-=.65/(r*c),o.style.transform=`scale(${a})`,o.style.opacity=`${l}`):(o.remove(),clearInterval(d))}let d=setInterval(i,15)},ye={mounted:(e,t)=>{e.style.position="relative",e.style.overflow="hidden",e.addEventListener("click",s=>ge(e,t,s))}};function Le(e){let t=e.replace(/[^\d,]/g,"").split(",");console.log(t);let s=t[0],o=t[1],a=t[2],l=[];for(let n=0;n<5;n++)l.push(`rgb(${Math.round(s)}, ${Math.round(o)}, ${Math.round(a)})`),s=Math.round(s/1.5),o=Math.round(o/1.5),a=Math.round(a/1.5);return l}const Ee={mounted(e,t){let s=window.getComputedStyle(e).backgroundColor;console.log(s);const o=Le(s);console.log(o);const a=t.value&&t.value.hover?t.value.hover:o[1],l=t.value&&t.value.active?t.value.active:o[2];e.addEventListener("mouseenter",()=>{e.style.backgroundColor=a}),e.addEventListener("mouseleave",()=>{e.style.backgroundColor=s}),e.addEventListener("mousedown",()=>{e.style.backgroundColor=l}),e.addEventListener("mouseup",()=>{e.style.backgroundColor=s})}},we={install:e=>{e.directive("ripple",ye).directive("accent-background",Ee)}};return{install:e=>{e.use(X).use(ie).use(fe).use(we)}}});