vue-pane 0.0.0

package/dist/vue-pane.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VuePane={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t)=>{let n={};for(var i in e)r(n,i,{get:e[i],enumerable:!0});return t||r(n,Symbol.toStringTag,{value:`Module`}),n},l=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e},u=(e,t,n)=>(l(e,t,`default`),n&&l(n,t,`default`));t=((e,t,i)=>(i=e==null?{}:n(o(e)),l(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t,1);var d=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},f={},p={viewBox:`0 0 16 16`,width:`10`,height:`10`,fill:`none`};function m(e,n){return(0,t.openBlock)(),(0,t.createElementBlock)(`svg`,p,[...n[0]||=[(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,"stroke-width":`1.5`},null,-1),(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`5.5`,r:`1`,fill:`currentColor`},null,-1),(0,t.createElementVNode)(`rect`,{x:`7`,y:`7.5`,width:`2`,height:`4`,rx:`1`,fill:`currentColor`},null,-1)]])}var h={expandedDefault:!0,tooltipIcon:d(f,[[`render`,m]])},g=Symbol(`vp-config`);function _(){return(0,t.inject)(g,h)}function v(e=null){(0,t.provide)(g,{..._(),...e})}function y(e,t){let n=e.parentElement;if(!n)return 0;let r=n.classList.contains(t);e.style.transition=`none`,r||(n.classList.add(t),e.style.height=`auto`),e.offsetHeight;let i=e.clientHeight;return r||(n.classList.remove(t),e.style.height=``),e.offsetHeight,e.style.transition=``,i}function b(e,n,r,i=`vp-folder--expanded`){let a=null;r&&(a=localStorage?.getItem?.(r)??null);let o=_(),s=e=>n.value=e,c=n.value,l=(0,t.ref)(c===void 0?a===null?o.expandedDefault??!0:a===`true`:c);(0,t.watch)(l,e=>{r&&typeof localStorage<`u`&&localStorage.setItem(r,String(e)),s(e)}),(0,t.onMounted)(()=>{let t=e.value;t&&l.value&&(t.style.height=`auto`)});function u(e){let n=y(e,i);l.value=!0,(0,t.nextTick)(()=>{if(n===0){e.style.height=`auto`;return}e.style.paddingTop=`0`,e.style.paddingBottom=`0`,e.offsetHeight,e.style.height=n+`px`,e.style.paddingTop=``,e.style.paddingBottom=``,e.addEventListener(`transitionend`,t=>{t.propertyName===`height`&&l.value&&(e.style.height=`auto`)},{once:!0})})}function d(e){e.style.transition=`none`,e.style.height=e.clientHeight+`px`,e.offsetHeight,e.style.transition=``,e.offsetHeight,e.style.height=`0`,l.value=!1,e.addEventListener(`transitionend`,t=>{t.propertyName===`height`&&(e.style.height=``)},{once:!0})}(0,t.watch)(()=>n.value,t=>{if(t===void 0||t===l.value)return;let n=e.value;n&&(t?u(n):d(n))});function f(){let t=e.value;t&&(l.value?d(t):u(t))}return{isExpanded:l,toggle:f}}var x=(0,t.defineComponent)({__name:`VPane`,props:(0,t.mergeModels)({title:{},id:{},disabled:{type:Boolean},config:{}},{expanded:{type:Boolean,default:void 0},expandedModifiers:{}}),emits:[`update:expanded`],setup(e){let n=(0,t.useModel)(e,`expanded`);e.config&&v(e.config);let r=e.id??e.title,i=(0,t.computed)(()=>!!e.title),a=(0,t.ref)(null),{isExpanded:o,toggle:s}=b(a,n,r?`vp-pane-${r}`:void 0);return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`vp-pane`,{"vp-pane--expanded":(0,t.unref)(o),"vp-pane--no-title":!i.value,"vp--disabled":e.disabled}])},[i.value?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,class:`vp-pane__title`,onClick:r[0]||=(...e)=>(0,t.unref)(s)&&(0,t.unref)(s)(...e)},[(0,t.createTextVNode)((0,t.toDisplayString)(e.title)+` `,1),r[1]||=(0,t.createElementVNode)(`div`,{class:`vp-pane__chevron`},null,-1)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,{ref_key:`containerRef`,ref:a,class:`vp-pane__content`},[(0,t.renderSlot)(n.$slots,`default`)],512)],2))}}),S=Math.min,C=Math.max,w=Math.round,T=e=>({x:e,y:e}),ee={left:`right`,right:`left`,bottom:`top`,top:`bottom`};function te(e,t,n){return C(e,S(t,n))}function ne(e,t){return typeof e==`function`?e(t):e}function E(e){return e.split(`-`)[0]}function re(e){return e.split(`-`)[1]}function ie(e){return e===`x`?`y`:`x`}function ae(e){return e===`y`?`height`:`width`}function D(e){let t=e[0];return t===`t`||t===`b`?`y`:`x`}function oe(e){return ie(D(e))}function se(e,t,n){n===void 0&&(n=!1);let r=re(e),i=oe(e),a=ae(i),o=i===`x`?r===(n?`end`:`start`)?`right`:`left`:r===`start`?`bottom`:`top`;return t.reference[a]>t.floating[a]&&(o=ge(o)),[o,ge(o)]}function ce(e){let t=ge(e);return[le(e),t,le(t)]}function le(e){return e.includes(`start`)?e.replace(`start`,`end`):e.replace(`end`,`start`)}var ue=[`left`,`right`],de=[`right`,`left`],fe=[`top`,`bottom`],pe=[`bottom`,`top`];function me(e,t,n){switch(e){case`top`:case`bottom`:return n?t?de:ue:t?ue:de;case`left`:case`right`:return t?fe:pe;default:return[]}}function he(e,t,n,r){let i=re(e),a=me(E(e),n===`start`,r);return i&&(a=a.map(e=>e+`-`+i),t&&(a=a.concat(a.map(le)))),a}function ge(e){let t=E(e);return ee[t]+e.slice(t.length)}function _e(e){return{top:0,right:0,bottom:0,left:0,...e}}function ve(e){return typeof e==`number`?{top:e,right:e,bottom:e,left:e}:_e(e)}function ye(e){let{x:t,y:n,width:r,height:i}=e;return{width:r,height:i,top:n,left:t,right:t+r,bottom:n+i,x:t,y:n}}function be(e,t,n){let{reference:r,floating:i}=e,a=D(t),o=oe(t),s=ae(o),c=E(t),l=a===`y`,u=r.x+r.width/2-i.width/2,d=r.y+r.height/2-i.height/2,f=r[s]/2-i[s]/2,p;switch(c){case`top`:p={x:u,y:r.y-i.height};break;case`bottom`:p={x:u,y:r.y+r.height};break;case`right`:p={x:r.x+r.width,y:d};break;case`left`:p={x:r.x-i.width,y:d};break;default:p={x:r.x,y:r.y}}switch(re(t)){case`start`:p[o]-=f*(n&&l?-1:1);break;case`end`:p[o]+=f*(n&&l?-1:1);break}return p}async function xe(e,t){t===void 0&&(t={});let{x:n,y:r,platform:i,rects:a,elements:o,strategy:s}=e,{boundary:c=`clippingAncestors`,rootBoundary:l=`viewport`,elementContext:u=`floating`,altBoundary:d=!1,padding:f=0}=ne(t,e),p=ve(f),m=o[d?u===`floating`?`reference`:`floating`:u],h=ye(await i.getClippingRect({element:await(i.isElement==null?void 0:i.isElement(m))??!0?m:m.contextElement||await(i.getDocumentElement==null?void 0:i.getDocumentElement(o.floating)),boundary:c,rootBoundary:l,strategy:s})),g=u===`floating`?{x:n,y:r,width:a.floating.width,height:a.floating.height}:a.reference,_=await(i.getOffsetParent==null?void 0:i.getOffsetParent(o.floating)),v=await(i.isElement==null?void 0:i.isElement(_))&&await(i.getScale==null?void 0:i.getScale(_))||{x:1,y:1},y=ye(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({elements:o,rect:g,offsetParent:_,strategy:s}):g);return{top:(h.top-y.top+p.top)/v.y,bottom:(y.bottom-h.bottom+p.bottom)/v.y,left:(h.left-y.left+p.left)/v.x,right:(y.right-h.right+p.right)/v.x}}var Se=50,Ce=async(e,t,n)=>{let{placement:r=`bottom`,strategy:i=`absolute`,middleware:a=[],platform:o}=n,s=o.detectOverflow?o:{...o,detectOverflow:xe},c=await(o.isRTL==null?void 0:o.isRTL(t)),l=await o.getElementRects({reference:e,floating:t,strategy:i}),{x:u,y:d}=be(l,r,c),f=r,p=0,m={};for(let n=0;n<a.length;n++){let h=a[n];if(!h)continue;let{name:g,fn:_}=h,{x:v,y,data:b,reset:x}=await _({x:u,y:d,initialPlacement:r,placement:f,strategy:i,middlewareData:m,rects:l,platform:s,elements:{reference:e,floating:t}});u=v??u,d=y??d,m[g]={...m[g],...b},x&&p<Se&&(p++,typeof x==`object`&&(x.placement&&(f=x.placement),x.rects&&(l=x.rects===!0?await o.getElementRects({reference:e,floating:t,strategy:i}):x.rects),{x:u,y:d}=be(l,f,c)),n=-1)}return{x:u,y:d,placement:f,strategy:i,middlewareData:m}},we=function(e){return e===void 0&&(e={}),{name:`flip`,options:e,async fn(t){var n;let{placement:r,middlewareData:i,rects:a,initialPlacement:o,platform:s,elements:c}=t,{mainAxis:l=!0,crossAxis:u=!0,fallbackPlacements:d,fallbackStrategy:f=`bestFit`,fallbackAxisSideDirection:p=`none`,flipAlignment:m=!0,...h}=ne(e,t);if((n=i.arrow)!=null&&n.alignmentOffset)return{};let g=E(r),_=D(o),v=E(o)===o,y=await(s.isRTL==null?void 0:s.isRTL(c.floating)),b=d||(v||!m?[ge(o)]:ce(o)),x=p!==`none`;!d&&x&&b.push(...he(o,m,p,y));let S=[o,...b],C=await s.detectOverflow(t,h),w=[],T=i.flip?.overflows||[];if(l&&w.push(C[g]),u){let e=se(r,a,y);w.push(C[e[0]],C[e[1]])}if(T=[...T,{placement:r,overflows:w}],!w.every(e=>e<=0)){let e=(i.flip?.index||0)+1,t=S[e];if(t&&(!(u===`alignment`&&_!==D(t))||T.every(e=>D(e.placement)===_?e.overflows[0]>0:!0)))return{data:{index:e,overflows:T},reset:{placement:t}};let n=T.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0]?.placement;if(!n)switch(f){case`bestFit`:{let e=T.filter(e=>{if(x){let t=D(e.placement);return t===_||t===`y`}return!0}).map(e=>[e.placement,e.overflows.filter(e=>e>0).reduce((e,t)=>e+t,0)]).sort((e,t)=>e[1]-t[1])[0]?.[0];e&&(n=e);break}case`initialPlacement`:n=o;break}if(r!==n)return{reset:{placement:n}}}return{}}}},Te=new Set([`left`,`top`]);async function Ee(e,t){let{placement:n,platform:r,elements:i}=e,a=await(r.isRTL==null?void 0:r.isRTL(i.floating)),o=E(n),s=re(n),c=D(n)===`y`,l=Te.has(o)?-1:1,u=a&&c?-1:1,d=ne(t,e),{mainAxis:f,crossAxis:p,alignmentAxis:m}=typeof d==`number`?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:d.mainAxis||0,crossAxis:d.crossAxis||0,alignmentAxis:d.alignmentAxis};return s&&typeof m==`number`&&(p=s===`end`?m*-1:m),c?{x:p*u,y:f*l}:{x:f*l,y:p*u}}var De=function(e){return e===void 0&&(e=0),{name:`offset`,options:e,async fn(t){var n;let{x:r,y:i,placement:a,middlewareData:o}=t,s=await Ee(t,e);return a===o.offset?.placement&&(n=o.arrow)!=null&&n.alignmentOffset?{}:{x:r+s.x,y:i+s.y,data:{...s,placement:a}}}}},Oe=function(e){return e===void 0&&(e={}),{name:`shift`,options:e,async fn(t){let{x:n,y:r,placement:i,platform:a}=t,{mainAxis:o=!0,crossAxis:s=!1,limiter:c={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...l}=ne(e,t),u={x:n,y:r},d=await a.detectOverflow(t,l),f=D(E(i)),p=ie(f),m=u[p],h=u[f];if(o){let e=p===`y`?`top`:`left`,t=p===`y`?`bottom`:`right`,n=m+d[e],r=m-d[t];m=te(n,m,r)}if(s){let e=f===`y`?`top`:`left`,t=f===`y`?`bottom`:`right`,n=h+d[e],r=h-d[t];h=te(n,h,r)}let g=c.fn({...t,[p]:m,[f]:h});return{...g,data:{x:g.x-n,y:g.y-r,enabled:{[p]:o,[f]:s}}}}}};function ke(){return typeof window<`u`}function O(e){return Ae(e)?(e.nodeName||``).toLowerCase():`#document`}function k(e){var t;return(e==null||(t=e.ownerDocument)==null?void 0:t.defaultView)||window}function A(e){return((Ae(e)?e.ownerDocument:e.document)||window.document)?.documentElement}function Ae(e){return ke()?e instanceof Node||e instanceof k(e).Node:!1}function j(e){return ke()?e instanceof Element||e instanceof k(e).Element:!1}function M(e){return ke()?e instanceof HTMLElement||e instanceof k(e).HTMLElement:!1}function je(e){return!ke()||typeof ShadowRoot>`u`?!1:e instanceof ShadowRoot||e instanceof k(e).ShadowRoot}function N(e){let{overflow:t,overflowX:n,overflowY:r,display:i}=I(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&i!==`inline`&&i!==`contents`}function Me(e){return/^(table|td|th)$/.test(O(e))}function Ne(e){try{if(e.matches(`:popover-open`))return!0}catch{}try{return e.matches(`:modal`)}catch{return!1}}var Pe=/transform|translate|scale|rotate|perspective|filter/,Fe=/paint|layout|strict|content/,P=e=>!!e&&e!==`none`,Ie;function Le(e){let t=j(e)?I(e):e;return P(t.transform)||P(t.translate)||P(t.scale)||P(t.rotate)||P(t.perspective)||!ze()&&(P(t.backdropFilter)||P(t.filter))||Pe.test(t.willChange||``)||Fe.test(t.contain||``)}function Re(e){let t=L(e);for(;M(t)&&!F(t);){if(Le(t))return t;if(Ne(t))return null;t=L(t)}return null}function ze(){return Ie??=typeof CSS<`u`&&CSS.supports&&CSS.supports(`-webkit-backdrop-filter`,`none`),Ie}function F(e){return/^(html|body|#document)$/.test(O(e))}function I(e){return k(e).getComputedStyle(e)}function Be(e){return j(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function L(e){if(O(e)===`html`)return e;let t=e.assignedSlot||e.parentNode||je(e)&&e.host||A(e);return je(t)?t.host:t}function Ve(e){let t=L(e);return F(t)?e.ownerDocument?e.ownerDocument.body:e.body:M(t)&&N(t)?t:Ve(t)}function He(e,t,n){t===void 0&&(t=[]),n===void 0&&(n=!0);let r=Ve(e),i=r===e.ownerDocument?.body,a=k(r);if(i){let e=Ue(a);return t.concat(a,a.visualViewport||[],N(r)?r:[],e&&n?He(e):[])}else return t.concat(r,He(r,[],n))}function Ue(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function We(e){let t=I(e),n=parseFloat(t.width)||0,r=parseFloat(t.height)||0,i=M(e),a=i?e.offsetWidth:n,o=i?e.offsetHeight:r,s=w(n)!==a||w(r)!==o;return s&&(n=a,r=o),{width:n,height:r,$:s}}function Ge(e){return j(e)?e:e.contextElement}function R(e){let t=Ge(e);if(!M(t))return T(1);let n=t.getBoundingClientRect(),{width:r,height:i,$:a}=We(t),o=(a?w(n.width):n.width)/r,s=(a?w(n.height):n.height)/i;return(!o||!Number.isFinite(o))&&(o=1),(!s||!Number.isFinite(s))&&(s=1),{x:o,y:s}}var Ke=T(0);function qe(e){let t=k(e);return!ze()||!t.visualViewport?Ke:{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}}function Je(e,t,n){return t===void 0&&(t=!1),!n||t&&n!==k(e)?!1:t}function z(e,t,n,r){t===void 0&&(t=!1),n===void 0&&(n=!1);let i=e.getBoundingClientRect(),a=Ge(e),o=T(1);t&&(r?j(r)&&(o=R(r)):o=R(e));let s=Je(a,n,r)?qe(a):T(0),c=(i.left+s.x)/o.x,l=(i.top+s.y)/o.y,u=i.width/o.x,d=i.height/o.y;if(a){let e=k(a),t=r&&j(r)?k(r):r,n=e,i=Ue(n);for(;i&&r&&t!==n;){let e=R(i),t=i.getBoundingClientRect(),r=I(i),a=t.left+(i.clientLeft+parseFloat(r.paddingLeft))*e.x,o=t.top+(i.clientTop+parseFloat(r.paddingTop))*e.y;c*=e.x,l*=e.y,u*=e.x,d*=e.y,c+=a,l+=o,n=k(i),i=Ue(n)}}return ye({width:u,height:d,x:c,y:l})}function Ye(e,t){let n=Be(e).scrollLeft;return t?t.left+n:z(A(e)).left+n}function Xe(e,t){let n=e.getBoundingClientRect();return{x:n.left+t.scrollLeft-Ye(e,n),y:n.top+t.scrollTop}}function Ze(e){let{elements:t,rect:n,offsetParent:r,strategy:i}=e,a=i===`fixed`,o=A(r),s=t?Ne(t.floating):!1;if(r===o||s&&a)return n;let c={scrollLeft:0,scrollTop:0},l=T(1),u=T(0),d=M(r);if((d||!d&&!a)&&((O(r)!==`body`||N(o))&&(c=Be(r)),d)){let e=z(r);l=R(r),u.x=e.x+r.clientLeft,u.y=e.y+r.clientTop}let f=o&&!d&&!a?Xe(o,c):T(0);return{width:n.width*l.x,height:n.height*l.y,x:n.x*l.x-c.scrollLeft*l.x+u.x+f.x,y:n.y*l.y-c.scrollTop*l.y+u.y+f.y}}function Qe(e){return Array.from(e.getClientRects())}function $e(e){let t=A(e),n=Be(e),r=e.ownerDocument.body,i=C(t.scrollWidth,t.clientWidth,r.scrollWidth,r.clientWidth),a=C(t.scrollHeight,t.clientHeight,r.scrollHeight,r.clientHeight),o=-n.scrollLeft+Ye(e),s=-n.scrollTop;return I(r).direction===`rtl`&&(o+=C(t.clientWidth,r.clientWidth)-i),{width:i,height:a,x:o,y:s}}var et=25;function tt(e,t){let n=k(e),r=A(e),i=n.visualViewport,a=r.clientWidth,o=r.clientHeight,s=0,c=0;if(i){a=i.width,o=i.height;let e=ze();(!e||e&&t===`fixed`)&&(s=i.offsetLeft,c=i.offsetTop)}let l=Ye(r);if(l<=0){let e=r.ownerDocument,t=e.body,n=getComputedStyle(t),i=e.compatMode===`CSS1Compat`&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,o=Math.abs(r.clientWidth-t.clientWidth-i);o<=et&&(a-=o)}else l<=et&&(a+=l);return{width:a,height:o,x:s,y:c}}function nt(e,t){let n=z(e,!0,t===`fixed`),r=n.top+e.clientTop,i=n.left+e.clientLeft,a=M(e)?R(e):T(1);return{width:e.clientWidth*a.x,height:e.clientHeight*a.y,x:i*a.x,y:r*a.y}}function rt(e,t,n){let r;if(t===`viewport`)r=tt(e,n);else if(t===`document`)r=$e(A(e));else if(j(t))r=nt(t,n);else{let n=qe(e);r={x:t.x-n.x,y:t.y-n.y,width:t.width,height:t.height}}return ye(r)}function it(e,t){let n=L(e);return n===t||!j(n)||F(n)?!1:I(n).position===`fixed`||it(n,t)}function at(e,t){let n=t.get(e);if(n)return n;let r=He(e,[],!1).filter(e=>j(e)&&O(e)!==`body`),i=null,a=I(e).position===`fixed`,o=a?L(e):e;for(;j(o)&&!F(o);){let t=I(o),n=Le(o);!n&&t.position===`fixed`&&(i=null),(a?!n&&!i:!n&&t.position===`static`&&i&&(i.position===`absolute`||i.position===`fixed`)||N(o)&&!n&&it(e,o))?r=r.filter(e=>e!==o):i=t,o=L(o)}return t.set(e,r),r}function ot(e){let{element:t,boundary:n,rootBoundary:r,strategy:i}=e,a=[...n===`clippingAncestors`?Ne(t)?[]:at(t,this._c):[].concat(n),r],o=rt(t,a[0],i),s=o.top,c=o.right,l=o.bottom,u=o.left;for(let e=1;e<a.length;e++){let n=rt(t,a[e],i);s=C(n.top,s),c=S(n.right,c),l=S(n.bottom,l),u=C(n.left,u)}return{width:c-u,height:l-s,x:u,y:s}}function st(e){let{width:t,height:n}=We(e);return{width:t,height:n}}function ct(e,t,n){let r=M(t),i=A(t),a=n===`fixed`,o=z(e,!0,a,t),s={scrollLeft:0,scrollTop:0},c=T(0);function l(){c.x=Ye(i)}if(r||!r&&!a)if((O(t)!==`body`||N(i))&&(s=Be(t)),r){let e=z(t,!0,a,t);c.x=e.x+t.clientLeft,c.y=e.y+t.clientTop}else i&&l();a&&!r&&i&&l();let u=i&&!r&&!a?Xe(i,s):T(0);return{x:o.left+s.scrollLeft-c.x-u.x,y:o.top+s.scrollTop-c.y-u.y,width:o.width,height:o.height}}function lt(e){return I(e).position===`static`}function ut(e,t){if(!M(e)||I(e).position===`fixed`)return null;if(t)return t(e);let n=e.offsetParent;return A(e)===n&&(n=n.ownerDocument.body),n}function dt(e,t){let n=k(e);if(Ne(e))return n;if(!M(e)){let t=L(e);for(;t&&!F(t);){if(j(t)&&!lt(t))return t;t=L(t)}return n}let r=ut(e,t);for(;r&&Me(r)&&lt(r);)r=ut(r,t);return r&&F(r)&&lt(r)&&!Le(r)?n:r||Re(e)||n}var ft=async function(e){let t=this.getOffsetParent||dt,n=this.getDimensions,r=await n(e.floating);return{reference:ct(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:r.width,height:r.height}}};function pt(e){return I(e).direction===`rtl`}var mt={convertOffsetParentRelativeRectToViewportRelativeRect:Ze,getDocumentElement:A,getClippingRect:ot,getOffsetParent:dt,getElementRects:ft,getClientRects:Qe,getDimensions:st,getScale:R,isElement:j,isRTL:pt},ht=De,gt=Oe,_t=we,vt=(e,t,n)=>{let r=new Map,i={platform:mt,...n},a={...i.platform,_c:r};return Ce(e,t,{...i,platform:a})},B=c({Vue:()=>t,Vue2:()=>void 0,del:()=>xt,install:()=>yt,isVue2:()=>!1,isVue3:()=>!0,set:()=>bt});u(B,require("vue"));function yt(){}function bt(e,t,n){return Array.isArray(e)?(e.length=Math.max(e.length,t),e.splice(t,1,n),n):(e[t]=n,n)}function xt(e,t){if(Array.isArray(e)){e.splice(t,1);return}delete e[t]}function St(e){return typeof e==`object`&&!!e&&`$el`in e}function Ct(e){if(St(e)){let t=e.$el;return Ae(t)&&O(t)===`#comment`?null:t}return e}function V(e){return typeof e==`function`?e():(0,B.unref)(e)}function wt(e){return typeof window>`u`?1:(e.ownerDocument.defaultView||window).devicePixelRatio||1}function Tt(e,t){let n=wt(e);return Math.round(t*n)/n}function Et(e,t,n){n===void 0&&(n={});let r=n.whileElementsMounted,i=(0,B.computed)(()=>V(n.open)??!0),a=(0,B.computed)(()=>V(n.middleware)),o=(0,B.computed)(()=>V(n.placement)??`bottom`),s=(0,B.computed)(()=>V(n.strategy)??`absolute`),c=(0,B.computed)(()=>V(n.transform)??!0),l=(0,B.computed)(()=>Ct(e.value)),u=(0,B.computed)(()=>Ct(t.value)),d=(0,B.ref)(0),f=(0,B.ref)(0),p=(0,B.ref)(s.value),m=(0,B.ref)(o.value),h=(0,B.shallowRef)({}),g=(0,B.ref)(!1),_=(0,B.computed)(()=>{let e={position:p.value,left:`0`,top:`0`};if(!u.value)return e;let t=Tt(u.value,d.value),n=Tt(u.value,f.value);return c.value?{...e,transform:`translate(`+t+`px, `+n+`px)`,...wt(u.value)>=1.5&&{willChange:`transform`}}:{position:p.value,left:t+`px`,top:n+`px`}}),v;function y(){if(l.value==null||u.value==null)return;let e=i.value;vt(l.value,u.value,{middleware:a.value,placement:o.value,strategy:s.value}).then(t=>{d.value=t.x,f.value=t.y,p.value=t.strategy,m.value=t.placement,h.value=t.middlewareData,g.value=e!==!1})}function b(){typeof v==`function`&&(v(),v=void 0)}function x(){if(b(),r===void 0){y();return}if(l.value!=null&&u.value!=null){v=r(l.value,u.value,y);return}}function S(){i.value||(g.value=!1)}return(0,B.watch)([a,o,s,i],y,{flush:`sync`}),(0,B.watch)([l,u],x,{flush:`sync`}),(0,B.watch)(i,S,{flush:`sync`}),(0,B.getCurrentScope)()&&(0,B.onScopeDispose)(b),{x:(0,B.shallowReadonly)(d),y:(0,B.shallowReadonly)(f),strategy:(0,B.shallowReadonly)(p),placement:(0,B.shallowReadonly)(m),middlewareData:(0,B.shallowReadonly)(h),isPositioned:(0,B.shallowReadonly)(g),floatingStyles:_,update:y}}function Dt(){let e=(0,t.ref)(null),n=(0,t.useTemplateRef)(`floatingEl`),r=(0,t.ref)(!1),i=(0,t.ref)(void 0),{floatingStyles:a}=Et(e,n,{placement:`top-start`,strategy:`fixed`,middleware:[ht(4),_t(),gt({padding:8})]});function o(t,n){e.value=t.currentTarget,i.value=n,r.value=!0}function s(){r.value=!1}return{floatingStyles:a,visible:r,activeText:i,show:o,hide:s}}var Ot=(0,t.defineComponent)({__name:`PFolder`,props:(0,t.mergeModels)({title:{},tooltip:{},id:{},disabled:{type:Boolean}},{expanded:{type:Boolean,default:void 0},expandedModifiers:{}}),emits:[`update:expanded`],setup(e){let n=(0,t.useModel)(e,`expanded`),r=e.id??e.title,i=_(),a=(0,t.ref)(null),{isExpanded:o,toggle:s}=b(a,n,r?`vp-folder-${r}`:void 0),{floatingStyles:c,visible:l,activeText:u,show:d,hide:f}=Dt();return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`vp-folder vp-container`,{"vp-folder--expanded":(0,t.unref)(o),"vp--disabled":e.disabled}])},[(0,t.createElementVNode)(`button`,{class:`vp-folder__title`,onClick:r[2]||=(...e)=>(0,t.unref)(s)&&(0,t.unref)(s)(...e)},[(0,t.createElementVNode)(`div`,{class:`vp-folder__title-text`,onMouseenter:r[0]||=n=>e.tooltip&&(0,t.unref)(d)(n,e.tooltip),onMouseleave:r[1]||=(...e)=>(0,t.unref)(f)&&(0,t.unref)(f)(...e)},[(0,t.createTextVNode)((0,t.toDisplayString)(e.title)+` `,1),e.tooltip&&(0,t.unref)(i).tooltipIcon?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i).tooltipIcon),{key:0})):(0,t.createCommentVNode)(``,!0)],32),r[3]||=(0,t.createElementVNode)(`div`,{class:`vp-folder__chevron`},null,-1)]),r[4]||=(0,t.createElementVNode)(`div`,{class:`vp-folder__indent`},null,-1),(0,t.createElementVNode)(`div`,{ref_key:`containerRef`,ref:a,class:`vp-folder__content`},[(0,t.renderSlot)(n.$slots,`default`)],512),e.tooltip?((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{key:0,to:`body`},[(0,t.unref)(l)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:`floatingEl`,class:`vp-tooltip`,style:(0,t.normalizeStyle)((0,t.unref)(c))},(0,t.toDisplayString)((0,t.unref)(u)),5)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0)],2))}}),kt={class:`vp-label__text`},At={class:`vp-label__value`},H=(0,t.defineComponent)({__name:`PLabel`,props:{label:{},tooltip:{}},setup(e){let{floatingStyles:n,visible:r,activeText:i,show:a,hide:o}=Dt(),s=_();return(c,l)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`vp-label`,{"vp-label--no-label":!e.label}])},[(0,t.createElementVNode)(`div`,kt,[(0,t.createTextVNode)((0,t.toDisplayString)(e.label)+` `,1),e.tooltip&&(0,t.unref)(s).tooltipIcon?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(s).tooltipIcon),{key:0,onMouseenter:l[0]||=n=>e.tooltip&&(0,t.unref)(a)(n,e.tooltip),onMouseleave:(0,t.unref)(o)},null,40,[`onMouseleave`])):(0,t.createCommentVNode)(``,!0)]),(0,t.createElementVNode)(`div`,At,[(0,t.renderSlot)(c.$slots,`default`)]),e.tooltip?((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{key:0,to:`body`},[(0,t.unref)(r)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:`floatingEl`,class:`vp-tooltip`,style:(0,t.normalizeStyle)((0,t.unref)(n))},(0,t.toDisplayString)((0,t.unref)(i)),5)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0)],2))}}),jt={class:`vp-text`},Mt=[`value`],Nt=(0,t.defineComponent)({__name:`PText`,props:(0,t.mergeModels)({label:{},tooltip:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`);return(r,i)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,jt,[(0,t.createElementVNode)(`input`,{class:`vp-text__input`,type:`text`,value:n.value,onInput:i[0]||=e=>n.value=e.target.value},null,40,Mt)])]),_:1},8,[`label`,`tooltip`]))}}),Pt={class:`vp-text__guide`},Ft=[`d`],It=[`d`],Lt=(0,t.defineComponent)({__name:`PNumber`,props:(0,t.mergeModels)({label:{},tooltip:{},min:{},max:{},step:{default:1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.ref)(!1),i=(0,t.ref)(!1),a=(0,t.ref)(String(n.value)),o=(0,t.ref)(0);(0,t.watch)(n,e=>{i.value||(a.value=String(e))});function s(t){return e.min!==void 0&&(t=Math.max(e.min,t)),e.max!==void 0&&(t=Math.min(e.max,t)),t}function c(t){return Math.round(t/e.step)*e.step}let l=(0,t.computed)(()=>`M 0,4 L${o.value},4`),u=(0,t.computed)(()=>{let e=o.value;if(e===0)return``;let t=e+(e>0?-1:1),n=Math.max(-4,Math.min(4,-t));return`M ${t+n},0 L${t},4 L${t+n},8 M ${e},-1 L${e},9`}),d=(0,t.computed)(()=>{let t=e.step<1?String(e.step).split(`.`)[1]?.length??0:0;return n.value.toFixed(t)});function f(){i.value=!0}function p(){i.value=!1;let e=parseFloat(a.value);isNaN(e)?a.value=String(n.value):n.value=s(e)}function m(t){if(t.key===`Enter`)t.target.blur();else if(t.key===`ArrowUp`){t.preventDefault();let r=t.shiftKey?10:1;n.value=s(n.value+e.step*r)}else if(t.key===`ArrowDown`){t.preventDefault();let r=t.shiftKey?10:1;n.value=s(n.value-e.step*r)}}let h=0,g=0;function _(e){e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),r.value=!0,h=e.clientX,g=n.value,o.value=0,document.body.style.cursor=`ew-resize`}function v(e){if(!r.value)return;let t=e.clientX-h;o.value=t,n.value=s(c(g+t))}function y(){r.value=!1,o.value=0,document.body.style.cursor=``}return(n,i)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`vp-text vp-text--number`,{"vp-text--dragging":r.value}])},[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":i[0]||=e=>a.value=e,class:`vp-text__input`,type:`text`,onFocus:f,onBlur:p,onKeydown:m},null,544),[[t.vModelText,a.value]]),(0,t.createElementVNode)(`div`,{class:`vp-text__knob`,onPointerdown:_,onPointermove:v,onPointerup:y,onPointercancel:y},[((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,Pt,[(0,t.createElementVNode)(`path`,{class:`vp-text__guide-body`,d:l.value},null,8,Ft),(0,t.createElementVNode)(`path`,{class:`vp-text__guide-head`,d:u.value},null,8,It)])),(0,t.createElementVNode)(`div`,{class:`vp-text__drag-tooltip`,style:(0,t.normalizeStyle)({left:`${o.value}px`})},(0,t.toDisplayString)(d.value),5)],32)],2)]),_:1},8,[`label`,`tooltip`]))}}),Rt={class:`vp-button`},zt={class:`vp-button__label`},Bt=(0,t.defineComponent)({__name:`PButton`,props:{label:{},tooltip:{}},emits:[`click`],setup(e,{emit:n}){let r=n,{floatingStyles:i,visible:a,activeText:o,show:s,hide:c}=Dt(),l=_();return(n,u)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Rt,[(0,t.createElementVNode)(`button`,{class:`vp-button__btn`,onClick:u[1]||=e=>r(`click`)},[(0,t.createElementVNode)(`span`,zt,[(0,t.createTextVNode)((0,t.toDisplayString)(e.label)+` `,1),e.tooltip&&(0,t.unref)(l).tooltipIcon?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(l).tooltipIcon),{key:0,onMouseenter:u[0]||=n=>e.tooltip&&(0,t.unref)(s)(n,e.tooltip),onMouseleave:(0,t.unref)(c)},null,40,[`onMouseleave`])):(0,t.createCommentVNode)(``,!0)])]),e.tooltip?((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{key:0,to:`body`},[(0,t.unref)(a)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:`floatingEl`,class:`vp-tooltip`,style:(0,t.normalizeStyle)((0,t.unref)(i))},(0,t.toDisplayString)((0,t.unref)(o)),5)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0)]))}}),Vt={},Ht={class:`vp-separator`};function Ut(e,n){return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,Ht,[...n[0]||=[(0,t.createElementVNode)(`hr`,{class:`vp-separator__rule`},null,-1)]])}var Wt=d(Vt,[[`render`,Ut]]),Gt={class:`vp-checkbox`},Kt={class:`vp-checkbox__label`},qt=[`checked`],Jt=(0,t.defineComponent)({__name:`PCheckbox`,props:(0,t.mergeModels)({label:{},tooltip:{}},{modelValue:{type:Boolean,required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`);return(r,i)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,Gt,[(0,t.createElementVNode)(`label`,Kt,[(0,t.createElementVNode)(`input`,{class:`vp-checkbox__input`,type:`checkbox`,checked:n.value,onChange:i[0]||=e=>n.value=e.target.checked},null,40,qt),i[1]||=(0,t.createElementVNode)(`div`,{class:`vp-checkbox__box`},[(0,t.createElementVNode)(`svg`,{viewBox:`0 0 16 16`},[(0,t.createElementVNode)(`path`,{d:`M2 8l4 4l8 -8`})])],-1)])])]),_:1},8,[`label`,`tooltip`]))}}),Yt={class:`vp-select`},Xt=[`value`],Zt=[`value`],Qt=(0,t.defineComponent)({__name:`PSelect`,props:(0,t.mergeModels)({label:{},tooltip:{},options:{}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`);return(r,i)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,Yt,[(0,t.createElementVNode)(`select`,{class:`vp-select__input`,value:n.value,onChange:i[0]||=e=>n.value=e.target.value},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.options,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`option`,{key:e.value,value:e.value},(0,t.toDisplayString)(e.label),9,Zt))),128))],40,Xt),i[1]||=(0,t.createElementVNode)(`div`,{class:`vp-select__arrow`},[(0,t.createElementVNode)(`svg`,{viewBox:`0 0 16 16`},[(0,t.createElementVNode)(`path`,{d:`M 2 5 L 8 11 L 14 5`})])],-1)])]),_:1},8,[`label`,`tooltip`]))}}),$t={class:`vp-monitor`},en={class:`vp-monitor__value`},tn=(0,t.defineComponent)({__name:`PMonitor`,props:{value:{},label:{},tooltip:{}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,$t,[(0,t.createElementVNode)(`div`,en,(0,t.toDisplayString)(e.value),1)])]),_:1},8,[`label`,`tooltip`]))}}),nn={class:`vp-monitor-multi`},rn=[`value`],an=(0,t.defineComponent)({__name:`PMonitorMulti`,props:{value:{},label:{},tooltip:{}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,nn,[(0,t.createElementVNode)(`textarea`,{class:`vp-monitor-multi__value`,readonly:``,value:String(e.value)},null,8,rn)])]),_:1},8,[`label`,`tooltip`]))}}),on={class:`vp-slider`},sn=(0,t.defineComponent)({__name:`PSlider`,props:(0,t.mergeModels)({label:{},tooltip:{},min:{default:0},max:{default:1},step:{default:null}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.ref)(null),i=(0,t.ref)(!1),a=(0,t.computed)(()=>{let t=e.max-e.min;return t===0?0:(n.value-e.min)/t*100});function o(t){return Math.max(e.min,Math.min(e.max,t))}function s(t){let i=r.value;if(!i)return n.value;let a=i.getBoundingClientRect(),s=(t.clientX-a.left)/a.width,c=e.min+s*(e.max-e.min);return e.step===null?o(c):o(Math.round(c/e.step)*e.step)}function c(e){e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),i.value=!0,n.value=s(e)}function l(e){i.value&&(n.value=s(e))}function u(){i.value=!1}function d(t){let r=e.step??(e.max-e.min)/100;t.key===`ArrowRight`||t.key===`ArrowUp`?(t.preventDefault(),n.value=o(n.value+r*(t.shiftKey?10:1))):(t.key===`ArrowLeft`||t.key===`ArrowDown`)&&(t.preventDefault(),n.value=o(n.value-r*(t.shiftKey?10:1)))}return(n,i)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,on,[(0,t.createElementVNode)(`div`,{ref_key:`trackRef`,ref:r,class:`vp-slider__track`,tabindex:`0`,onPointerdown:c,onPointermove:l,onPointerup:u,onPointercancel:u,onKeydown:d},[(0,t.createElementVNode)(`div`,{class:`vp-slider__knob`,style:(0,t.normalizeStyle)({left:a.value+`%`})},null,4)],544)])]),_:1},8,[`label`,`tooltip`]))}}),cn={class:`vp-tab`},ln={class:`vp-tab__title-bar`},un=[`onClick`],dn={class:`vp-tab-item__label`},fn={class:`vp-tab__content`},pn={class:`vp-tab-page__content`},mn=(0,t.defineComponent)({__name:`PTab`,props:(0,t.mergeModels)({tabs:{},tooltips:{}},{modelValue:{default:0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),{floatingStyles:r,visible:i,activeText:a,show:o,hide:s}=Dt(),c=_();function l(e){n.value=e}return(u,d)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,cn,[(0,t.createElementVNode)(`div`,ln,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.tabs,(r,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:i,class:(0,t.normalizeClass)([`vp-tab-item`,{"vp-tab-item--selected":i===n.value}])},[(0,t.createElementVNode)(`button`,{class:`vp-tab-item__btn`,onClick:e=>l(i)},[(0,t.createElementVNode)(`span`,dn,[(0,t.createTextVNode)((0,t.toDisplayString)(r)+` `,1),e.tooltips?.[i]&&(0,t.unref)(c).tooltipIcon?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(c).tooltipIcon),{key:0,onMouseenter:n=>e.tooltips?.[i]&&(0,t.unref)(o)(n,e.tooltips[i]),onMouseleave:(0,t.unref)(s)},null,40,[`onMouseenter`,`onMouseleave`])):(0,t.createCommentVNode)(``,!0)])],8,un)],2))),128))]),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[(0,t.unref)(i)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref:`floatingEl`,class:`vp-tooltip`,style:(0,t.normalizeStyle)((0,t.unref)(r))},(0,t.toDisplayString)((0,t.unref)(a)),5)):(0,t.createCommentVNode)(``,!0)])),d[0]||=(0,t.createElementVNode)(`div`,{class:`vp-tab__indent`},null,-1),(0,t.createElementVNode)(`div`,fn,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.tabs,(e,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:`vp-tab-page`},[(0,t.createElementVNode)(`div`,pn,[(0,t.renderSlot)(u.$slots,e)])])),[[t.vShow,r===n.value]])),128))])]))}});function hn(e){"@babel/helpers - typeof";return hn=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},hn(e)}var gn=/^\s+/,_n=/\s+$/;function U(e,t){if(e||=``,t||={},e instanceof U)return e;if(!(this instanceof U))return new U(e,t);var n=vn(e);this._originalInput=e,this._r=n.r,this._g=n.g,this._b=n.b,this._a=n.a,this._roundA=Math.round(100*this._a)/100,this._format=t.format||n.format,this._gradientType=t.gradientType,this._r<1&&(this._r=Math.round(this._r)),this._g<1&&(this._g=Math.round(this._g)),this._b<1&&(this._b=Math.round(this._b)),this._ok=n.ok}U.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var e=this.toRgb();return(e.r*299+e.g*587+e.b*114)/1e3},getLuminance:function(){var e=this.toRgb(),t,n,r,i,a,o;return t=e.r/255,n=e.g/255,r=e.b/255,i=t<=.03928?t/12.92:((t+.055)/1.055)**2.4,a=n<=.03928?n/12.92:((n+.055)/1.055)**2.4,o=r<=.03928?r/12.92:((r+.055)/1.055)**2.4,.2126*i+.7152*a+.0722*o},setAlpha:function(e){return this._a=Hn(e),this._roundA=Math.round(100*this._a)/100,this},toHsv:function(){var e=Sn(this._r,this._g,this._b);return{h:e.h*360,s:e.s,v:e.v,a:this._a}},toHsvString:function(){var e=Sn(this._r,this._g,this._b),t=Math.round(e.h*360),n=Math.round(e.s*100),r=Math.round(e.v*100);return this._a==1?`hsv(`+t+`, `+n+`%, `+r+`%)`:`hsva(`+t+`, `+n+`%, `+r+`%, `+this._roundA+`)`},toHsl:function(){var e=bn(this._r,this._g,this._b);return{h:e.h*360,s:e.s,l:e.l,a:this._a}},toHslString:function(){var e=bn(this._r,this._g,this._b),t=Math.round(e.h*360),n=Math.round(e.s*100),r=Math.round(e.l*100);return this._a==1?`hsl(`+t+`, `+n+`%, `+r+`%)`:`hsla(`+t+`, `+n+`%, `+r+`%, `+this._roundA+`)`},toHex:function(e){return wn(this._r,this._g,this._b,e)},toHexString:function(e){return`#`+this.toHex(e)},toHex8:function(e){return Tn(this._r,this._g,this._b,this._a,e)},toHex8String:function(e){return`#`+this.toHex8(e)},toRgb:function(){return{r:Math.round(this._r),g:Math.round(this._g),b:Math.round(this._b),a:this._a}},toRgbString:function(){return this._a==1?`rgb(`+Math.round(this._r)+`, `+Math.round(this._g)+`, `+Math.round(this._b)+`)`:`rgba(`+Math.round(this._r)+`, `+Math.round(this._g)+`, `+Math.round(this._b)+`, `+this._roundA+`)`},toPercentageRgb:function(){return{r:Math.round(W(this._r,255)*100)+`%`,g:Math.round(W(this._g,255)*100)+`%`,b:Math.round(W(this._b,255)*100)+`%`,a:this._a}},toPercentageRgbString:function(){return this._a==1?`rgb(`+Math.round(W(this._r,255)*100)+`%, `+Math.round(W(this._g,255)*100)+`%, `+Math.round(W(this._b,255)*100)+`%)`:`rgba(`+Math.round(W(this._r,255)*100)+`%, `+Math.round(W(this._g,255)*100)+`%, `+Math.round(W(this._b,255)*100)+`%, `+this._roundA+`)`},toName:function(){return this._a===0?`transparent`:this._a<1?!1:Bn[wn(this._r,this._g,this._b,!0)]||!1},toFilter:function(e){var t=`#`+En(this._r,this._g,this._b,this._a),n=t,r=this._gradientType?`GradientType = 1, `:``;if(e){var i=U(e);n=`#`+En(i._r,i._g,i._b,i._a)}return`progid:DXImageTransform.Microsoft.gradient(`+r+`startColorstr=`+t+`,endColorstr=`+n+`)`},toString:function(e){var t=!!e;e||=this._format;var n=!1,r=this._a<1&&this._a>=0;return!t&&r&&(e===`hex`||e===`hex6`||e===`hex3`||e===`hex4`||e===`hex8`||e===`name`)?e===`name`&&this._a===0?this.toName():this.toRgbString():(e===`rgb`&&(n=this.toRgbString()),e===`prgb`&&(n=this.toPercentageRgbString()),(e===`hex`||e===`hex6`)&&(n=this.toHexString()),e===`hex3`&&(n=this.toHexString(!0)),e===`hex4`&&(n=this.toHex8String(!0)),e===`hex8`&&(n=this.toHex8String()),e===`name`&&(n=this.toName()),e===`hsl`&&(n=this.toHslString()),e===`hsv`&&(n=this.toHsvString()),n||this.toHexString())},clone:function(){return U(this.toString())},_applyModification:function(e,t){var n=e.apply(null,[this].concat([].slice.call(t)));return this._r=n._r,this._g=n._g,this._b=n._b,this.setAlpha(n._a),this},lighten:function(){return this._applyModification(An,arguments)},brighten:function(){return this._applyModification(jn,arguments)},darken:function(){return this._applyModification(Mn,arguments)},desaturate:function(){return this._applyModification(Dn,arguments)},saturate:function(){return this._applyModification(On,arguments)},greyscale:function(){return this._applyModification(kn,arguments)},spin:function(){return this._applyModification(Nn,arguments)},_applyCombination:function(e,t){return e.apply(null,[this].concat([].slice.call(t)))},analogous:function(){return this._applyCombination(Ln,arguments)},complement:function(){return this._applyCombination(Pn,arguments)},monochromatic:function(){return this._applyCombination(Rn,arguments)},splitcomplement:function(){return this._applyCombination(In,arguments)},triad:function(){return this._applyCombination(Fn,[3])},tetrad:function(){return this._applyCombination(Fn,[4])}},U.fromRatio=function(e,t){if(hn(e)==`object`){var n={};for(var r in e)e.hasOwnProperty(r)&&(r===`a`?n[r]=e[r]:n[r]=q(e[r]));e=n}return U(e,t)};function vn(e){var t={r:0,g:0,b:0},n=1,r=null,i=null,a=null,o=!1,s=!1;return typeof e==`string`&&(e=Jn(e)),hn(e)==`object`&&(Y(e.r)&&Y(e.g)&&Y(e.b)?(t=yn(e.r,e.g,e.b),o=!0,s=String(e.r).substr(-1)===`%`?`prgb`:`rgb`):Y(e.h)&&Y(e.s)&&Y(e.v)?(r=q(e.s),i=q(e.v),t=Cn(e.h,r,i),o=!0,s=`hsv`):Y(e.h)&&Y(e.s)&&Y(e.l)&&(r=q(e.s),a=q(e.l),t=xn(e.h,r,a),o=!0,s=`hsl`),e.hasOwnProperty(`a`)&&(n=e.a)),n=Hn(n),{ok:o,format:e.format||s,r:Math.min(255,Math.max(t.r,0)),g:Math.min(255,Math.max(t.g,0)),b:Math.min(255,Math.max(t.b,0)),a:n}}function yn(e,t,n){return{r:W(e,255)*255,g:W(t,255)*255,b:W(n,255)*255}}function bn(e,t,n){e=W(e,255),t=W(t,255),n=W(n,255);var r=Math.max(e,t,n),i=Math.min(e,t,n),a,o,s=(r+i)/2;if(r==i)a=o=0;else{var c=r-i;switch(o=s>.5?c/(2-r-i):c/(r+i),r){case e:a=(t-n)/c+(t<n?6:0);break;case t:a=(n-e)/c+2;break;case n:a=(e-t)/c+4;break}a/=6}return{h:a,s:o,l:s}}function xn(e,t,n){var r,i,a;e=W(e,360),t=W(t,100),n=W(n,100);function o(e,t,n){return n<0&&(n+=1),n>1&&--n,n<1/6?e+(t-e)*6*n:n<1/2?t:n<2/3?e+(t-e)*(2/3-n)*6:e}if(t===0)r=i=a=n;else{var s=n<.5?n*(1+t):n+t-n*t,c=2*n-s;r=o(c,s,e+1/3),i=o(c,s,e),a=o(c,s,e-1/3)}return{r:r*255,g:i*255,b:a*255}}function Sn(e,t,n){e=W(e,255),t=W(t,255),n=W(n,255);var r=Math.max(e,t,n),i=Math.min(e,t,n),a,o,s=r,c=r-i;if(o=r===0?0:c/r,r==i)a=0;else{switch(r){case e:a=(t-n)/c+(t<n?6:0);break;case t:a=(n-e)/c+2;break;case n:a=(e-t)/c+4;break}a/=6}return{h:a,s:o,v:s}}function Cn(e,t,n){e=W(e,360)*6,t=W(t,100),n=W(n,100);var r=Math.floor(e),i=e-r,a=n*(1-t),o=n*(1-i*t),s=n*(1-(1-i)*t),c=r%6,l=[n,o,a,a,s,n][c],u=[s,n,n,o,a,a][c],d=[a,a,s,n,n,o][c];return{r:l*255,g:u*255,b:d*255}}function wn(e,t,n,r){var i=[K(Math.round(e).toString(16)),K(Math.round(t).toString(16)),K(Math.round(n).toString(16))];return r&&i[0].charAt(0)==i[0].charAt(1)&&i[1].charAt(0)==i[1].charAt(1)&&i[2].charAt(0)==i[2].charAt(1)?i[0].charAt(0)+i[1].charAt(0)+i[2].charAt(0):i.join(``)}function Tn(e,t,n,r,i){var a=[K(Math.round(e).toString(16)),K(Math.round(t).toString(16)),K(Math.round(n).toString(16)),K(Kn(r))];return i&&a[0].charAt(0)==a[0].charAt(1)&&a[1].charAt(0)==a[1].charAt(1)&&a[2].charAt(0)==a[2].charAt(1)&&a[3].charAt(0)==a[3].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0)+a[3].charAt(0):a.join(``)}function En(e,t,n,r){return[K(Kn(r)),K(Math.round(e).toString(16)),K(Math.round(t).toString(16)),K(Math.round(n).toString(16))].join(``)}U.equals=function(e,t){return!e||!t?!1:U(e).toRgbString()==U(t).toRgbString()},U.random=function(){return U.fromRatio({r:Math.random(),g:Math.random(),b:Math.random()})};function Dn(e,t){t=t===0?0:t||10;var n=U(e).toHsl();return n.s-=t/100,n.s=Un(n.s),U(n)}function On(e,t){t=t===0?0:t||10;var n=U(e).toHsl();return n.s+=t/100,n.s=Un(n.s),U(n)}function kn(e){return U(e).desaturate(100)}function An(e,t){t=t===0?0:t||10;var n=U(e).toHsl();return n.l+=t/100,n.l=Un(n.l),U(n)}function jn(e,t){t=t===0?0:t||10;var n=U(e).toRgb();return n.r=Math.max(0,Math.min(255,n.r-Math.round(255*-(t/100)))),n.g=Math.max(0,Math.min(255,n.g-Math.round(255*-(t/100)))),n.b=Math.max(0,Math.min(255,n.b-Math.round(255*-(t/100)))),U(n)}function Mn(e,t){t=t===0?0:t||10;var n=U(e).toHsl();return n.l-=t/100,n.l=Un(n.l),U(n)}function Nn(e,t){var n=U(e).toHsl(),r=(n.h+t)%360;return n.h=r<0?360+r:r,U(n)}function Pn(e){var t=U(e).toHsl();return t.h=(t.h+180)%360,U(t)}function Fn(e,t){if(isNaN(t)||t<=0)throw Error(`Argument to polyad must be a positive number`);for(var n=U(e).toHsl(),r=[U(e)],i=360/t,a=1;a<t;a++)r.push(U({h:(n.h+a*i)%360,s:n.s,l:n.l}));return r}function In(e){var t=U(e).toHsl(),n=t.h;return[U(e),U({h:(n+72)%360,s:t.s,l:t.l}),U({h:(n+216)%360,s:t.s,l:t.l})]}function Ln(e,t,n){t||=6,n||=30;var r=U(e).toHsl(),i=360/n,a=[U(e)];for(r.h=(r.h-(i*t>>1)+720)%360;--t;)r.h=(r.h+i)%360,a.push(U(r));return a}function Rn(e,t){t||=6;for(var n=U(e).toHsv(),r=n.h,i=n.s,a=n.v,o=[],s=1/t;t--;)o.push(U({h:r,s:i,v:a})),a=(a+s)%1;return o}U.mix=function(e,t,n){n=n===0?0:n||50;var r=U(e).toRgb(),i=U(t).toRgb(),a=n/100;return U({r:(i.r-r.r)*a+r.r,g:(i.g-r.g)*a+r.g,b:(i.b-r.b)*a+r.b,a:(i.a-r.a)*a+r.a})},U.readability=function(e,t){var n=U(e),r=U(t);return(Math.max(n.getLuminance(),r.getLuminance())+.05)/(Math.min(n.getLuminance(),r.getLuminance())+.05)},U.isReadable=function(e,t,n){var r=U.readability(e,t),i,a;switch(a=!1,i=Yn(n),i.level+i.size){case`AAsmall`:case`AAAlarge`:a=r>=4.5;break;case`AAlarge`:a=r>=3;break;case`AAAsmall`:a=r>=7;break}return a},U.mostReadable=function(e,t,n){var r=null,i=0,a,o,s,c;n||={},o=n.includeFallbackColors,s=n.level,c=n.size;for(var l=0;l<t.length;l++)a=U.readability(e,t[l]),a>i&&(i=a,r=U(t[l]));return U.isReadable(e,r,{level:s,size:c})||!o?r:(n.includeFallbackColors=!1,U.mostReadable(e,[`#fff`,`#000`],n))};var zn=U.names={aliceblue:`f0f8ff`,antiquewhite:`faebd7`,aqua:`0ff`,aquamarine:`7fffd4`,azure:`f0ffff`,beige:`f5f5dc`,bisque:`ffe4c4`,black:`000`,blanchedalmond:`ffebcd`,blue:`00f`,blueviolet:`8a2be2`,brown:`a52a2a`,burlywood:`deb887`,burntsienna:`ea7e5d`,cadetblue:`5f9ea0`,chartreuse:`7fff00`,chocolate:`d2691e`,coral:`ff7f50`,cornflowerblue:`6495ed`,cornsilk:`fff8dc`,crimson:`dc143c`,cyan:`0ff`,darkblue:`00008b`,darkcyan:`008b8b`,darkgoldenrod:`b8860b`,darkgray:`a9a9a9`,darkgreen:`006400`,darkgrey:`a9a9a9`,darkkhaki:`bdb76b`,darkmagenta:`8b008b`,darkolivegreen:`556b2f`,darkorange:`ff8c00`,darkorchid:`9932cc`,darkred:`8b0000`,darksalmon:`e9967a`,darkseagreen:`8fbc8f`,darkslateblue:`483d8b`,darkslategray:`2f4f4f`,darkslategrey:`2f4f4f`,darkturquoise:`00ced1`,darkviolet:`9400d3`,deeppink:`ff1493`,deepskyblue:`00bfff`,dimgray:`696969`,dimgrey:`696969`,dodgerblue:`1e90ff`,firebrick:`b22222`,floralwhite:`fffaf0`,forestgreen:`228b22`,fuchsia:`f0f`,gainsboro:`dcdcdc`,ghostwhite:`f8f8ff`,gold:`ffd700`,goldenrod:`daa520`,gray:`808080`,green:`008000`,greenyellow:`adff2f`,grey:`808080`,honeydew:`f0fff0`,hotpink:`ff69b4`,indianred:`cd5c5c`,indigo:`4b0082`,ivory:`fffff0`,khaki:`f0e68c`,lavender:`e6e6fa`,lavenderblush:`fff0f5`,lawngreen:`7cfc00`,lemonchiffon:`fffacd`,lightblue:`add8e6`,lightcoral:`f08080`,lightcyan:`e0ffff`,lightgoldenrodyellow:`fafad2`,lightgray:`d3d3d3`,lightgreen:`90ee90`,lightgrey:`d3d3d3`,lightpink:`ffb6c1`,lightsalmon:`ffa07a`,lightseagreen:`20b2aa`,lightskyblue:`87cefa`,lightslategray:`789`,lightslategrey:`789`,lightsteelblue:`b0c4de`,lightyellow:`ffffe0`,lime:`0f0`,limegreen:`32cd32`,linen:`faf0e6`,magenta:`f0f`,maroon:`800000`,mediumaquamarine:`66cdaa`,mediumblue:`0000cd`,mediumorchid:`ba55d3`,mediumpurple:`9370db`,mediumseagreen:`3cb371`,mediumslateblue:`7b68ee`,mediumspringgreen:`00fa9a`,mediumturquoise:`48d1cc`,mediumvioletred:`c71585`,midnightblue:`191970`,mintcream:`f5fffa`,mistyrose:`ffe4e1`,moccasin:`ffe4b5`,navajowhite:`ffdead`,navy:`000080`,oldlace:`fdf5e6`,olive:`808000`,olivedrab:`6b8e23`,orange:`ffa500`,orangered:`ff4500`,orchid:`da70d6`,palegoldenrod:`eee8aa`,palegreen:`98fb98`,paleturquoise:`afeeee`,palevioletred:`db7093`,papayawhip:`ffefd5`,peachpuff:`ffdab9`,peru:`cd853f`,pink:`ffc0cb`,plum:`dda0dd`,powderblue:`b0e0e6`,purple:`800080`,rebeccapurple:`663399`,red:`f00`,rosybrown:`bc8f8f`,royalblue:`4169e1`,saddlebrown:`8b4513`,salmon:`fa8072`,sandybrown:`f4a460`,seagreen:`2e8b57`,seashell:`fff5ee`,sienna:`a0522d`,silver:`c0c0c0`,skyblue:`87ceeb`,slateblue:`6a5acd`,slategray:`708090`,slategrey:`708090`,snow:`fffafa`,springgreen:`00ff7f`,steelblue:`4682b4`,tan:`d2b48c`,teal:`008080`,thistle:`d8bfd8`,tomato:`ff6347`,turquoise:`40e0d0`,violet:`ee82ee`,wheat:`f5deb3`,white:`fff`,whitesmoke:`f5f5f5`,yellow:`ff0`,yellowgreen:`9acd32`},Bn=U.hexNames=Vn(zn);function Vn(e){var t={};for(var n in e)e.hasOwnProperty(n)&&(t[e[n]]=n);return t}function Hn(e){return e=parseFloat(e),(isNaN(e)||e<0||e>1)&&(e=1),e}function W(e,t){Wn(e)&&(e=`100%`);var n=Gn(e);return e=Math.min(t,Math.max(0,parseFloat(e))),n&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)}function Un(e){return Math.min(1,Math.max(0,e))}function G(e){return parseInt(e,16)}function Wn(e){return typeof e==`string`&&e.indexOf(`.`)!=-1&&parseFloat(e)===1}function Gn(e){return typeof e==`string`&&e.indexOf(`%`)!=-1}function K(e){return e.length==1?`0`+e:``+e}function q(e){return e<=1&&(e=e*100+`%`),e}function Kn(e){return Math.round(parseFloat(e)*255).toString(16)}function qn(e){return G(e)/255}var J=function(){var e=`(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)`,t=`[\\s|\\(]+(`+e+`)[,|\\s]+(`+e+`)[,|\\s]+(`+e+`)\\s*\\)?`,n=`[\\s|\\(]+(`+e+`)[,|\\s]+(`+e+`)[,|\\s]+(`+e+`)[,|\\s]+(`+e+`)\\s*\\)?`;return{CSS_UNIT:new RegExp(e),rgb:RegExp(`rgb`+t),rgba:RegExp(`rgba`+n),hsl:RegExp(`hsl`+t),hsla:RegExp(`hsla`+n),hsv:RegExp(`hsv`+t),hsva:RegExp(`hsva`+n),hex3:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex4:/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex8:/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/}}();function Y(e){return!!J.CSS_UNIT.exec(e)}function Jn(e){e=e.replace(gn,``).replace(_n,``).toLowerCase();var t=!1;if(zn[e])e=zn[e],t=!0;else if(e==`transparent`)return{r:0,g:0,b:0,a:0,format:`name`};var n;return(n=J.rgb.exec(e))?{r:n[1],g:n[2],b:n[3]}:(n=J.rgba.exec(e))?{r:n[1],g:n[2],b:n[3],a:n[4]}:(n=J.hsl.exec(e))?{h:n[1],s:n[2],l:n[3]}:(n=J.hsla.exec(e))?{h:n[1],s:n[2],l:n[3],a:n[4]}:(n=J.hsv.exec(e))?{h:n[1],s:n[2],v:n[3]}:(n=J.hsva.exec(e))?{h:n[1],s:n[2],v:n[3],a:n[4]}:(n=J.hex8.exec(e))?{r:G(n[1]),g:G(n[2]),b:G(n[3]),a:qn(n[4]),format:t?`name`:`hex8`}:(n=J.hex6.exec(e))?{r:G(n[1]),g:G(n[2]),b:G(n[3]),format:t?`name`:`hex`}:(n=J.hex4.exec(e))?{r:G(n[1]+``+n[1]),g:G(n[2]+``+n[2]),b:G(n[3]+``+n[3]),a:qn(n[4]+``+n[4]),format:t?`name`:`hex8`}:(n=J.hex3.exec(e))?{r:G(n[1]+``+n[1]),g:G(n[2]+``+n[2]),b:G(n[3]+``+n[3]),format:t?`name`:`hex`}:!1}function Yn(e){var t,n;return e||={level:`AA`,size:`small`},t=(e.level||`AA`).toUpperCase(),n=(e.size||`small`).toLowerCase(),t!==`AA`&&t!==`AAA`&&(t=`AA`),n!==`small`&&n!==`large`&&(n=`small`),{level:t,size:n}}var Xn=(e,t,n=!1)=>{if(n)switch(t){case`rgb`:return e.toRgb();case`prgb`:return e.toPercentageRgb();case`hsl`:return e.toHsl();case`hsv`:return e.toHsv();default:return null}else{let n=t;t===`hex`&&e.getAlpha()<1&&(n=`hex8`);let r=e.toString(n);try{r=JSON.parse(r)}catch{}return r}},Zn=(e,t)=>!!(Object.prototype.hasOwnProperty.call(e,t)&&typeof e[t]<`u`),Qn=e=>typeof e>`u`,X=[`update:tinyColor`,`update:modelValue`,`input`];function $n(e,n,r){let i,a,o=(0,t.computed)({get:()=>{let{modelValue:t,tinyColor:n,value:r}=e,o=n??t??r;return Qn(a)&&(Qn(r)||(a=U(r).getFormat()),Qn(t)||(a=U(t).getFormat())),Qn(i)&&(typeof r==`object`&&!(r instanceof U)&&(i=!0),typeof t==`object`&&(i=!0)),U(o)},set:e=>{s(e)}}),s=t=>{let r=U(t);Zn(e,`tinyColor`)&&n(`update:tinyColor`,r),Zn(e,`modelValue`)&&n(`update:modelValue`,Xn(r,a,i)),Zn(e,`value`)&&n(`input`,Xn(r,a,i))};return o}var er=e=>{let t={x:0,y:0};return e instanceof MouseEvent&&(t.x=e.pageX,t.y=e.pageY),typeof TouchEvent<`u`&&e instanceof TouchEvent&&(t.x=e.touches?.[0]?e.touches[0].pageX:e.changedTouches?.[0]?e.changedTouches[0].pageX:0,t.y=e.touches?.[0]?e.touches[0].pageY:e.changedTouches?.[0]?e.changedTouches[0].pageY:0),t},tr=()=>({x:window.scrollX||window.pageXOffset||document.documentElement.scrollLeft||0,y:window.scrollY||window.pageYOffset||document.documentElement.scrollTop||0}),nr=e=>{let{x:t,y:n}=tr(),r=e.getBoundingClientRect();return{x:r.left+t,y:r.top+n}},rr=e=>e.code===`ArrowUp`||e.keyCode===38?`up`:e.code===`ArrowDown`||e.keyCode===40?`down`:e.code===`ArrowLeft`||e.keyCode===37?`left`:e.code===`ArrowRight`||e.keyCode===39?`right`:null;function ir(e){let t=e.toString();return t.indexOf(`.`)===-1?0:t.split(`.`)[1].length}function ar(e,t,n){return Math.min(Math.max(e,t),n)}var or=(e,t=20)=>{let n,r,i;return(...a)=>{n?(clearTimeout(r),r=setTimeout(()=>{Date.now()-i>=t&&(e(...a),i=Date.now())},Math.max(t-(Date.now()-i),0))):(e(...a),i=Date.now(),n=!0)}},sr=[`aria-valuetext`],cr=(0,t.defineComponent)({__name:`SaturationSlider`,props:{hue:{},tinyColor:{},modelValue:{},value:{}},emits:[`change`].concat(X),setup(e,{emit:n}){let r=n,i=e,a=(0,t.ref)(0),o=$n(i,r),s=(0,t.computed)(()=>o.value.toHsv()),c=(0,t.computed)(()=>i.hue??s.value.h),l=(0,t.computed)(()=>`hsl(${c.value}, 100%, 50%)`),u=(0,t.computed)(()=>-(s.value.v*100)+1+100+`%`),d=(0,t.computed)(()=>s.value.v<=.01?a.value*100+`%`:s.value.s*100+`%`),f=(0,t.ref)(null);function p(e){let t=f.value;if(!t)return;let n=t.clientWidth,r=t.clientHeight,{x:i,y:o}=nr(t),{x:l,y:u}=er(e),d=ar(l-i,0,n),p=ar(u-o,0,r),h=d/n,g=ar(1-p/r,0,1);a.value=h;let _=Math.round(h*100),v=Math.round(g*100);_===1&&(_=.01),v===1&&(v=.01),m({h:c.value,s:_,v,a:s.value.a})}function m(e){o.value=e}let h=or(p,20);function g(e){e.preventDefault(),e.type.startsWith(`mouse`)?(window.addEventListener(`mousemove`,h),window.addEventListener(`mouseup`,h),window.addEventListener(`mouseup`,_)):e.type.startsWith(`touch`)&&(window.addEventListener(`touchmove`,h),window.addEventListener(`touchend`,h),window.addEventListener(`touchend`,_))}function _(){v()}function v(){window.removeEventListener(`mousemove`,h),window.removeEventListener(`mouseup`,h),window.removeEventListener(`mouseup`,_),window.removeEventListener(`touchmove`,h),window.removeEventListener(`touchend`,h),window.removeEventListener(`touchend`,_)}function y(e){switch(e.preventDefault(),rr(e)){case`left`:{let e=s.value.s-.01;m({...s.value,s:e>=0?e:0});break}case`right`:{let e=s.value.s+.01;m({...s.value,s:e>1?1:e});break}case`up`:{let e=s.value.v+.01;m({...s.value,v:e>1?1:e});break}case`down`:{let e=s.value.v-.01;m({...s.value,v:e<0?0:e});break}}}return(0,t.onUnmounted)(()=>{v()}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-saturation-slider bg`,style:(0,t.normalizeStyle)({background:l.value}),ref_key:`containerRef`,ref:f,onMousedown:g,onTouchstart:g,role:`application`,"aria-label":`Saturation and brightness picker`},[n[1]||=(0,t.createElementVNode)(`div`,{class:`bg white`},null,-1),n[2]||=(0,t.createElementVNode)(`div`,{class:`bg black`},null,-1),(0,t.createElementVNode)(`div`,{class:`picker-wrap`,style:(0,t.normalizeStyle)({top:u.value,left:d.value}),role:`slider`,tabindex:`0`,"aria-valuemin":`0`,"aria-valuemax":`1`,"aria-label":`press arrow to change saturation or brightness`,"aria-valuenow":`?`,"aria-valuetext":`saturation: ${s.value.s.toFixed(0)}%, brightness: ${s.value.v.toFixed(0)}%`,onKeydown:y},n[0]||=[(0,t.createElementVNode)(`div`,{class:`picker`},null,-1)],44,sr)],36))}}),Z=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},lr=Z(cr,[[`__scopeId`,`data-v-4d048d6e`]]),ur=e=>typeof e<`u`,dr={class:`vc-base-slider`},fr={key:0,class:`background`},pr=[`aria-label`,`aria-valuemax`,`aria-valuenow`],mr=Z((0,t.defineComponent)({__name:`BaseSlider`,props:{direction:{default:`horizontal`},modelValue:{default:0},value:{default:0},max:{default:100},step:{},ariaLabel:{default:`slider`}},emits:[`input`,`update:modelValue`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>r.modelValue??r.value),o=(0,t.computed)(()=>{let e=a.value/r.max;return r.direction===`vertical`&&(e=1-e),100*e+`%`}),s=(0,t.ref)(null);function c(e){ur(e)&&(i(`input`,e),i(`update:modelValue`,e))}function l(e){let{direction:t,max:n}=r,i=s.value;if(!i)return;let a=i.clientWidth,o=i.clientHeight,{x:l,y:u}=nr(i),{x:d,y:f}=er(e),p=d-l,m=f-u,h;h=t===`vertical`?m<0?n:m>o?0:(1-m/o)*n:p<0?0:p>a?n:p/a*n,c(h)}let u=or(l);function d(e){l(e),e.type.startsWith(`mouse`)?(window.addEventListener(`mousemove`,u),window.addEventListener(`mouseup`,f)):(window.addEventListener(`touchmove`,u),window.addEventListener(`touchend`,f))}function f(){p()}function p(){window.removeEventListener(`mousemove`,u),window.removeEventListener(`mouseup`,f),window.removeEventListener(`touchmove`,u),window.removeEventListener(`touchend`,f)}function m(e){e.preventDefault();let{direction:t,max:n}=r,i=rr(e),o=r.step??n/100,s=a.value,l;switch(i){case`left`:if(t!==`horizontal`)return;l=s-o<0?0:s-o;break;case`right`:if(t!==`horizontal`)return;l=s+o>n?n:s+o;break;case`down`:if(t!==`vertical`)return;l=s-o<0?0:s-o;break;case`up`:if(t!==`vertical`)return;l=s+o>n?n:s+o;break}c(l)}return(0,t.onUnmounted)(()=>{p()}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,dr,[e.$slots.background?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,fr,[(0,t.renderSlot)(e.$slots,`background`,{},void 0,!0)])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)({slider:!0,horizontal:e.direction===`horizontal`,vertical:e.direction===`vertical`}),ref_key:`containerRef`,ref:s,onMousedown:d,onTouchstart:d,role:`slider`,"aria-label":e.ariaLabel,"aria-valuemax":e.max,"aria-valuemin":`0`,"aria-valuenow":a.value.toFixed(1),tabindex:`0`,onKeydown:m},[(0,t.createElementVNode)(`div`,{class:`picker-wrap`,style:(0,t.normalizeStyle)({left:e.direction===`horizontal`?o.value:0,top:e.direction===`vertical`?o.value:0}),role:`presentation`},[(0,t.renderSlot)(e.$slots,`picker`,{},()=>[n[0]||=(0,t.createElementVNode)(`div`,{class:`picker`},null,-1)],!0)],4)],42,pr)]))}}),[[`__scopeId`,`data-v-972b0fad`]]),hr=Z((0,t.defineComponent)({__name:`HueSlider`,props:{direction:{default:`horizontal`},modelValue:{default:0}},emits:[`update:modelValue`],setup(e,{emit:n}){(0,t.useCssVars)(e=>({"2f44f39d":a.value}));let r=e,i=n,a=(0,t.computed)(()=>`linear-gradient(to ${r.direction===`horizontal`?`right`:`top`}, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)`),o=(0,t.computed)(()=>{let e=Number(r.modelValue);return Number.isNaN(e)?0:e}),s=(0,t.ref)();(0,t.watch)(o,(e,t)=>{e!==0&&e-t>0&&(s.value=`right`),e!==0&&e-t<0&&(s.value=`left`)});let c=(0,t.computed)(()=>r.direction===`vertical`?o.value===0&&s.value===`right`?0:o.value:r.direction===`horizontal`?o.value===0&&s.value===`right`?360:o.value:0);function l(e){u(Math.round(e))}function u(e){i(`update:modelValue`,e)}return(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(mr,{class:`vc-hue-slider`,max:360,step:1,modelValue:c.value,direction:e.direction,"onUpdate:modelValue":l,"aria-label":`Hue`},{background:(0,t.withCtx)(()=>n[0]||=[(0,t.createElementVNode)(`div`,{class:`gradient`},null,-1)]),picker:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)]),_:3},8,[`modelValue`,`direction`]))}}),[[`__scopeId`,`data-v-5367c985`]]),gr=Z((0,t.defineComponent)({__name:`CheckerboardBG`,props:{size:{default:8},white:{default:`#fff`},grey:{default:`#e6e6e6`}},setup(e){let n=e;function r(e,t,n){if(typeof document>`u`)return null;var r=document.createElement(`canvas`);r.width=r.height=n*2;var i=r.getContext(`2d`);return i?(i.fillStyle=e,i.fillRect(0,0,r.width,r.height),i.fillStyle=t,i.fillRect(0,0,n,n),i.translate(n,n),i.fillRect(0,0,n,n),r.toDataURL()):null}function i(e,t,n){return r(e,t,n)}let a=(0,t.computed)(()=>`url(${i(n.white,n.grey,n.size)})`);return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-checkerboard`,style:(0,t.normalizeStyle)({backgroundImage:a.value})},null,4))}}),[[`__scopeId`,`data-v-37d61ccd`]]),_r=Z((0,t.defineComponent)({__name:`AlphaSlider`,props:{tinyColor:{},modelValue:{},value:{}},emits:X,setup(e,{emit:n}){let r=$n(e,n),i=(0,t.computed)(()=>{let e=r.value.toRgb(),t=[e.r,e.g,e.b].join(`,`);return`linear-gradient(to right, rgba(`+t+`, 0) 0%, rgba(`+t+`, 1) 100%)`}),a=(0,t.computed)(()=>r.value.getAlpha());function o(e){r.value=r.value.setAlpha(e).clone()}return(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(mr,{class:`vc-alpha-slider`,modelValue:a.value,max:1,"aria-label":`Transparency`,"onUpdate:modelValue":o},{background:(0,t.withCtx)(()=>[(0,t.createVNode)(gr),(0,t.createElementVNode)(`div`,{class:`gradient`,style:(0,t.normalizeStyle)({background:i.value})},null,4)]),_:1},8,[`modelValue`]))}}),[[`__scopeId`,`data-v-07dd346b`]]),vr={class:`vc-editable-input`},yr=[`value`,`aria-label`],br={key:0,class:`vc-input-desc`,"aria-hidden":`true`},Q=Z((0,t.defineComponent)({__name:`EditableInput`,props:{value:{},label:{},desc:{},max:{},min:{},step:{default:1},a11y:{}},emits:[`change`,`blur`],setup(e,{emit:n}){let r=e,i=n,a=r.a11y?.label??r.label,o=`input__label__${a}__${Math.random().toString().slice(2,5)}`;function s(e){let{min:t,max:n}=r;if(ur(n)&&+e>n){i(`change`,n);return}if(ur(t)&&+e<t){i(`change`,t);return}i(`change`,e)}function c(e){s(e.target?.value)}function l(e){i(`blur`,e)}function u(e){let t=Number(r.value);if(!isNaN(t)){let n=r.step,i=ir(n),a=rr(e);a===`up`&&(s((t+n).toFixed(i)),e.preventDefault()),a===`down`&&(s((t-n).toFixed(i)),e.preventDefault())}}return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,vr,[(0,t.createElementVNode)(`input`,{class:`vc-input-input`,value:r.value,onKeydown:u,onInput:c,onBlur:l,"aria-label":(0,t.unref)(a),id:o},null,40,yr),(0,t.createElementVNode)(`label`,{for:o,class:`vc-input-label`,"aria-hidden":`true`},(0,t.toDisplayString)(r.label),1),e.desc?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,br,(0,t.toDisplayString)(e.desc),1)):(0,t.createCommentVNode)(``,!0)]))}}),[[`__scopeId`,`data-v-9c267b2b`]]),xr=e=>U(e).isValid(),Sr=(0,t.defineComponent)({__name:`HexInput`,props:{value:{},label:{},desc:{},a11y:{},type:{default:`hex`},withHash:{type:Boolean,default:!1}},emits:[`change`],setup(e,{emit:n}){let r=e,i=n,a={label:r.type===`hex`?`Hex`:`Hex with transparency`,...r.a11y},o=(e,t=`hex`)=>{let n=``;return t===`hex`&&(n=U(e).toHexString()),t===`hex8`&&(n=U(e).toHex8String()),r.withHash!==!0&&(n=n.replace(`#`,``)),n},s=(0,t.ref)(o(r.value,r.type));(0,t.watch)(()=>r.value,e=>{U.equals(e,s.value)||(s.value=o(e,r.type))});let c=e=>{if(!e)return;s.value=e;let t=e.length;e[0]===`#`&&--t,!(r.type===`hex`&&t%3!=0&&t!==8)&&(r.type===`hex8`&&t!==8||xr(e)&&i(`change`,e))},l=()=>{let e=s.value.length;s.value[0]===`#`&&--e,!(xr(s.value)&&(r.type===`hex`&&e===6||r.type===`hex8`&&e===8))&&(s.value=o(r.value,r.type))};return(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(Q,{label:r.label,a11y:a,value:s.value,onChange:c,onBlur:l},null,8,[`label`,`value`]))}});function Cr(){let e=`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789`;return e.charAt(Math.floor(Math.random()*62))+e.charAt(Math.floor(Math.random()*62))}var wr=e=>{let n=(0,t.ref)(0),r=`__from__vc__hue__${Cr()}`;return(0,t.watch)(e,e=>{if(e[r])return;let t=e.toHsl().h;t===0&&n.value!==0||(n.value=t)},{immediate:!0}),{hueRef:n,updateHueRef:t=>{let i=U({...e.value.toHsl(),h:t});i[r]=!0,e.value=i,n.value=t}}},Tr={class:`saturation`},Er={class:`body`},Dr={class:`controls`},Or={class:`color-wrap`},kr=[`aria-label`],Ar={class:`sliders`},jr={class:`hue-wrap`},Mr={key:0,class:`alpha-wrap`},Nr={key:0,class:`fieldsWrap`,"data-testid":`fields`},Pr={key:0,class:`fields`},Fr={class:`field`},Ir={class:`field`},Lr={class:`field`},Rr={key:0,class:`field`},zr={key:1,class:`fields`},Br={class:`field`},Vr={key:2,class:`fields`},Hr={class:`field`},Ur={class:`field`},Wr={class:`field`},Gr={key:0,class:`field`},Kr={class:`toggle-icon`,role:`presentation`},qr={style:{width:`24px`,height:`24px`},viewBox:`0 0 24 24`},Jr={class:`toggle-icon_highlighted`,role:`presentation`},Yr=Z((0,t.defineComponent)({__name:`ChromePicker`,props:{disableAlpha:{type:Boolean},disableFields:{type:Boolean},formats:{default:()=>[`rgb`,`hex`,`hsl`]},tinyColor:{},modelValue:{},value:{}},emits:X,setup(e,{emit:n}){let r=e,i=$n(r,n),{hueRef:a,updateHueRef:o}=wr(i),s=(0,t.ref)(0),c=(0,t.ref)(!1),l=(0,t.computed)(()=>{let e=i.value.toRgb();return`rgba(`+[e.r,e.g,e.b,i.value.getAlpha()].join(`,`)+`)`}),u=(0,t.computed)(()=>{let{h:e,s:t,l:n}=i.value.toHsl();return{h:e.toFixed(),s:`${(t*100).toFixed()}%`,l:`${(n*100).toFixed()}%`}}),d=(0,t.computed)(()=>i.value.toRgb()),f=(0,t.computed)(()=>Number(i.value.getAlpha().toFixed(2))),p=new Set([`hex`,`hsl`,`rgb`]),m=(0,t.computed)(()=>{let e=new Set,t=[],n=r.formats;for(let r of n)if(p.has(r)){let n=r;e.has(n)||(e.add(n),t.push(n))}return t}),h=(0,t.computed)(()=>{let{disableFields:e,formats:t}=r;return!(e===!0||!Array.isArray(t)||m.value.length===0)}),g=e=>m.value.includes(e),_=e=>m.value.indexOf(e),v=e=>{i.value=e},y=(e,t)=>{if(!t||isNaN(Number(t)))return;let n={[e]:t};i.value={...d.value,a:f.value,...n}},b=(e,t)=>{if(!t)return;let n={[e]:+t};(e===`s`||e===`l`)&&(n[e]=t.replace(`%`,``)/100),i.value={...i.value.toHsl(),a:f.value,...n}},x=()=>{if(s.value===m.value.length-1){s.value=0;return}s.value++},S=()=>{c.value=!0},C=()=>{c.value=!1};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{role:`application`,"aria-label":`Chrome Color Picker`,class:(0,t.normalizeClass)([`vc-chrome-picker`,e.disableAlpha?`alpha-disabled`:``])},[(0,t.createElementVNode)(`div`,Tr,[(0,t.createVNode)(lr,{tinyColor:(0,t.unref)(i),"onUpdate:tinyColor":n[0]||=e=>(0,t.isRef)(i)?i.value=e:null,hue:(0,t.unref)(a)},null,8,[`tinyColor`,`hue`])]),(0,t.createElementVNode)(`div`,Er,[(0,t.createElementVNode)(`div`,Dr,[(0,t.createElementVNode)(`div`,Or,[(0,t.createElementVNode)(`div`,{class:`active-color`,style:(0,t.normalizeStyle)({backgroundColor:l.value}),role:`presentation`,"aria-live":`polite`,"aria-label":`Current color is ${l.value}`},null,12,kr),r.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(gr,{key:0}))]),(0,t.createElementVNode)(`div`,Ar,[(0,t.createElementVNode)(`div`,jr,[(0,t.createVNode)(hr,{modelValue:(0,t.unref)(a),"onUpdate:modelValue":(0,t.unref)(o)},null,8,[`modelValue`,`onUpdate:modelValue`])]),r.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Mr,[(0,t.createVNode)(_r,{tinyColor:(0,t.unref)(i),"onUpdate:tinyColor":n[1]||=e=>(0,t.isRef)(i)?i.value=e:null},null,8,[`tinyColor`])]))])]),h.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Nr,[g(`rgb`)?(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Pr,[(0,t.createElementVNode)(`div`,Fr,[(0,t.createVNode)(Q,{label:`r`,value:d.value.r,onChange:n[2]||=e=>y(`r`,e),a11y:{label:`Red`}},null,8,[`value`])]),(0,t.createElementVNode)(`div`,Ir,[(0,t.createVNode)(Q,{label:`g`,value:d.value.g,onChange:n[3]||=e=>y(`g`,e),a11y:{label:`Green`}},null,8,[`value`])]),(0,t.createElementVNode)(`div`,Lr,[(0,t.createVNode)(Q,{label:`b`,value:d.value.b,onChange:n[4]||=e=>y(`b`,e),a11y:{label:`Blue`}},null,8,[`value`])]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Rr,[(0,t.createVNode)(Q,{label:`a`,value:f.value,step:.01,max:1,onChange:n[5]||=e=>y(`a`,e),a11y:{label:`Transparency`}},null,8,[`value`])]))],512)),[[t.vShow,s.value===_(`rgb`)]]):(0,t.createCommentVNode)(``,!0),g(`hex`)?(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`div`,zr,[(0,t.createElementVNode)(`div`,Br,[(0,t.createVNode)(Sr,{type:f.value===1?`hex`:`hex8`,label:`hex`,value:(0,t.unref)(i).toHex8String(),onChange:v,"with-hash":!0},null,8,[`type`,`value`])])],512)),[[t.vShow,s.value===_(`hex`)]]):(0,t.createCommentVNode)(``,!0),g(`hsl`)?(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Vr,[(0,t.createElementVNode)(`div`,Hr,[(0,t.createVNode)(Q,{label:`h`,value:(0,t.unref)(a).toFixed(),onChange:n[6]||=e=>b(`h`,e),a11y:{label:`Hue`}},null,8,[`value`])]),(0,t.createElementVNode)(`div`,Ur,[(0,t.createVNode)(Q,{label:`s`,value:u.value.s,onChange:n[7]||=e=>b(`s`,e),a11y:{label:`Saturation`}},null,8,[`value`])]),(0,t.createElementVNode)(`div`,Wr,[(0,t.createVNode)(Q,{label:`l`,value:u.value.l,onChange:n[8]||=e=>b(`l`,e),a11y:{label:`Lightness`}},null,8,[`value`])]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,Gr,[(0,t.createVNode)(Q,{label:`a`,value:f.value,step:.01,max:1,onChange:n[9]||=e=>b(`a`,e),a11y:{label:`Transparency`}},null,8,[`value`])]))],512)),[[t.vShow,s.value===_(`hsl`)]]):(0,t.createCommentVNode)(``,!0),m.value.length>1?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:3,class:`toggle-btn`,onClick:x,onKeydown:[(0,t.withKeys)(x,[`enter`]),(0,t.withKeys)(x,[`space`])],onMouseover:S,onMouseenter:S,onMouseout:C,onFocus:S,onBlur:C,role:`button`,"aria-label":`Change color format`,tabindex:`0`},[(0,t.createElementVNode)(`div`,Kr,[((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,qr,n[10]||=[(0,t.createElementVNode)(`path`,{fill:`currentColor`,d:`M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z`},null,-1)]))]),(0,t.withDirectives)((0,t.createElementVNode)(`div`,Jr,null,512),[[t.vShow,(0,t.unref)(c)]])],32)):(0,t.createCommentVNode)(``,!0)])):(0,t.createCommentVNode)(``,!0)])],2))}}),[[`__scopeId`,`data-v-dfdde7e0`]]);[`change`].concat(X),[`change`].concat(X),X.concat([`ok`,`cancel`,`reset`]),[`change`].concat(X);var Xr={class:`vp-color`},Zr={class:`vp-color__header`},Qr={class:`vp-color__text`},$r=[`value`],ei=(0,t.defineComponent)({__name:`PColor`,props:(0,t.mergeModels)({label:{},tooltip:{},alpha:{type:Boolean,default:!1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.ref)(!1),i=(0,t.ref)(null),a=(0,t.ref)(null),{floatingStyles:o}=Et(i,a,{placement:`bottom-start`,strategy:`fixed`,middleware:[ht(4),_t(),gt({padding:8})]});function s(){r.value=!r.value}function c(t){let r=U(t);r.isValid()&&(n.value=e.alpha?r.toHex8String():r.toHexString())}function l(t){let r=t.target.value,i=U(r);i.isValid()&&(n.value=e.alpha?i.toHex8String():i.toHexString())}function u(e){if(!r.value)return;let t=e.target;i.value?.contains(t)||a.value?.contains(t)||(r.value=!1)}return(0,t.onMounted)(()=>document.addEventListener(`pointerdown`,u)),(0,t.onUnmounted)(()=>document.removeEventListener(`pointerdown`,u)),(u,d)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,Xr,[(0,t.createElementVNode)(`div`,Zr,[(0,t.createElementVNode)(`div`,{ref_key:`swatchRef`,ref:i,class:`vp-color__swatch`},[(0,t.createElementVNode)(`button`,{class:`vp-color__swatch-btn`,onClick:s},[(0,t.createElementVNode)(`div`,{class:`vp-color__swatch-btn__color`,style:(0,t.normalizeStyle)({background:n.value})},null,4)])],512),(0,t.createElementVNode)(`div`,Qr,[(0,t.createElementVNode)(`input`,{class:`vp-text__input`,type:`text`,value:n.value,onChange:l},null,40,$r)])]),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[r.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref_key:`pickerRef`,ref:a,class:`vp-color__popup`,style:(0,t.normalizeStyle)((0,t.unref)(o))},[(0,t.createVNode)((0,t.unref)(Yr),{"model-value":n.value,"disable-alpha":!e.alpha,"onUpdate:modelValue":c},null,8,[`model-value`,`disable-alpha`])],4)):(0,t.createCommentVNode)(``,!0)]))])]),_:1},8,[`label`,`tooltip`]))}}),ti={class:`vp-graph`},ni={class:`vp-graph__svg`,viewBox:`0 0 100 100`,preserveAspectRatio:`none`},ri=[`points`],ii=(0,t.defineComponent)({__name:`PGraph`,props:{values:{},label:{},tooltip:{},min:{},max:{}},setup(e){let n=(0,t.computed)(()=>{if(!e.values.length)return``;let t=e.min??Math.min(...e.values),n=(e.max??Math.max(...e.values))-t||1;return e.values.map((r,i)=>`${i/(e.values.length-1)*100},${100-(r-t)/n*100}`).join(` `)});return(r,i)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,ti,[((0,t.openBlock)(),(0,t.createElementBlock)(`svg`,ni,[(0,t.createElementVNode)(`polyline`,{points:n.value},null,8,ri)]))])]),_:1},8,[`label`,`tooltip`]))}});function ai(e,n){let r=(0,t.ref)(!1);return(0,t.watch)(n,t=>{let n=e.value;if(n)if(r.value=!1,t){n.style.transition=`none`,n.style.height=`auto`,n.offsetHeight;let e=n.clientHeight;n.style.height=`0`,n.offsetHeight,n.style.transition=``,n.offsetHeight,n.style.height=e+`px`,n.addEventListener(`transitionend`,e=>{e.propertyName===`height`&&(n.style.height=`auto`,r.value=!0)},{once:!0})}else n.style.transition=`none`,n.style.height=n.clientHeight+`px`,n.offsetHeight,n.style.transition=``,n.offsetHeight,n.style.height=`0`,n.addEventListener(`transitionend`,e=>{e.propertyName===`height`&&(n.style.height=``)},{once:!0})}),r}var oi={class:`vp-point-2d__header`},si={class:`vp-point-2d__inputs`},ci={style:{display:`flex`,gap:`2px`}},li={class:`vp-text vp-text--number vp-text--first`,style:{flex:`1`}},ui=[`value`],di={class:`vp-text vp-text--number vp-text--last`,style:{flex:`1`}},fi=[`value`],pi={class:`vp-point-2d__picker-wrap`},$=160,mi=(0,t.defineComponent)({__name:`PPoint2d`,props:(0,t.mergeModels)({label:{},tooltip:{},min:{default:()=>-1},max:{default:1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=(0,t.ref)(!1),i=(0,t.ref)(null),a=(0,t.ref)(null),o=ai(i,r),s=(0,t.computed)(()=>n.value.x.toFixed(3)),c=(0,t.computed)(()=>n.value.y.toFixed(3));function l(t){return Math.max(e.min,Math.min(e.max,t))}function u(e){let t=parseFloat(e.target.value);isNaN(t)||(n.value={x:l(t),y:n.value.y})}function d(e){let t=parseFloat(e.target.value);isNaN(t)||(n.value={x:n.value.x,y:l(t)})}function f(){r.value=!r.value}function p(){let e=a.value;if(!e)return;let t=e.getContext(`2d`),n=$;t.clearRect(0,0,n,n),t.fillStyle=`rgba(0,0,0,0.3)`,t.fillRect(0,0,n,n),t.strokeStyle=`rgba(255,255,255,0.1)`,t.lineWidth=1,t.beginPath(),t.moveTo(n/2,0),t.lineTo(n/2,n),t.moveTo(0,n/2),t.lineTo(n,n/2),t.stroke()}(0,t.onMounted)(()=>{p()});let m=(0,t.computed)(()=>{let t=e.max-e.min;return(n.value.x-e.min)/t*$}),h=(0,t.computed)(()=>{let t=e.max-e.min;return $-(n.value.y-e.min)/t*$}),g=!1;function _(t){let n=a.value.getBoundingClientRect(),r=(t.clientX-n.left)/n.width,i=1-(t.clientY-n.top)/n.height,o=e.max-e.min;return{x:l(e.min+r*o),y:l(e.min+i*o)}}function v(e){e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),g=!0,n.value=_(e)}function y(e){g&&(n.value=_(e))}function b(){g=!1}return(n,l)=>((0,t.openBlock)(),(0,t.createBlock)(H,{label:e.label,tooltip:e.tooltip},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`vp-point-2d`,{"vp-point-2d--expanded":r.value,"vp-point-2d--complete":(0,t.unref)(o)}])},[(0,t.createElementVNode)(`div`,oi,[(0,t.createElementVNode)(`button`,{class:`vp-point-2d__btn`,onClick:f},[...l[2]||=[(0,t.createElementVNode)(`svg`,{viewBox:`0 0 16 16`},[(0,t.createElementVNode)(`path`,{d:`M8 2 L8 14 M2 8 L14 8`}),(0,t.createElementVNode)(`circle`,{cx:`8`,cy:`8`,r:`1.5`})],-1)]]),(0,t.createElementVNode)(`div`,si,[(0,t.createElementVNode)(`div`,ci,[(0,t.createElementVNode)(`div`,li,[(0,t.createElementVNode)(`input`,{class:`vp-text__input`,type:`text`,value:s.value,onBlur:u,onKeydown:l[0]||=(0,t.withKeys)(e=>e.target.blur(),[`enter`])},null,40,ui)]),(0,t.createElementVNode)(`div`,di,[(0,t.createElementVNode)(`input`,{class:`vp-text__input`,type:`text`,value:c.value,onBlur:d,onKeydown:l[1]||=(0,t.withKeys)(e=>e.target.blur(),[`enter`])},null,40,fi)])])])]),(0,t.createElementVNode)(`div`,{ref_key:`panelRef`,ref:i,class:`vp-point-2d__picker-panel`},[(0,t.createElementVNode)(`div`,pi,[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:a,class:`vp-point-2d__canvas`,height:$,width:$,onPointerdown:v,onPointermove:y,onPointerup:b,onPointercancel:b},null,544),(0,t.createElementVNode)(`div`,{class:`vp-point-2d__crosshair-h`,style:(0,t.normalizeStyle)({top:h.value+`px`})},null,4),(0,t.createElementVNode)(`div`,{class:`vp-point-2d__crosshair-v`,style:(0,t.normalizeStyle)({left:m.value+`px`})},null,4)])],512)],2)]),_:1},8,[`label`,`tooltip`]))}});e.PButton=Bt,e.PCheckbox=Jt,e.PColor=ei,e.PFolder=Ot,e.PGraph=ii,e.PLabel=H,e.PMonitor=tn,e.PMonitorMulti=an,e.PNumber=Lt,e.PPoint2d=mi,e.PSelect=Qt,e.PSeparator=Wt,e.PSlider=sn,e.PTab=mn,e.PText=Nt,e.VPane=x,e.usePaneConfig=_});

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "vue-pane",
+  "version": "0.0.0",
+  "description": "A Vue 3 debug/inspector pane component library inspired by Tweakpane.",
+  "type": "module",
+  "main": "./dist/vue-pane.umd.cjs",
+  "module": "./dist/vue-pane.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": "./dist/vue-pane.js",
+      "require": "./dist/vue-pane.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vue-tsc -b && vite build",
+    "build:watch": "vite build --watch",
+    "typecheck": "vue-tsc -b --noEmit",
+    "dev": "pnpm --prefix example dev",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@types/node": "^24.12.3",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "^10.4.1",
+    "eslint-plugin-vue": "^10.9.2",
+    "globals": "^17.6.0",
+    "sass": "^1.77.8",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.60.1",
+    "vite": "^8.0.12",
+    "vite-plugin-dts": "^5.0.2",
+    "vue": "^3.5.34",
+    "vue-tsc": "^3.2.8"
+  },
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "vue3",
+    "pane",
+    "inspector",
+    "debug",
+    "devtools",
+    "panel",
+    "gui",
+    "tweakpane",
+    "controls",
+    "settings"
+  ],
+  "author": {
+    "name": "Carl Olsen",
+    "email": "unstoppablecarlolsen@gmail.com"
+  },
+  "homepage": "https://github.com/unstoppablecarl/vue-pane#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unstoppablecarl/vue-pane.git"
+  },
+  "bugs": {
+    "url": "https://github.com/unstoppablecarl/vue-pane/issues"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^1.1.11",
+    "vue-color": "^3.3.3"
+  }
+}

package/src/components/PButton.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useTooltip } from '../composables/useTooltip'
+import { usePaneConfig } from '../composables/usePaneConfig'
+
+const {
+  label,
+  tooltip,
+} = defineProps<{
+  label: string
+  tooltip?: string
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+
+const { floatingStyles, visible, activeText, show, hide } = useTooltip()
+const config = usePaneConfig()
+</script>
+<template>
+  <div class="vp-button">
+    <button
+      class="vp-button__btn"
+      @click="emit('click')"
+    >
+      <span class="vp-button__label">
+        {{ label }}
+        <component
+          :is="config.tooltipIcon"
+          v-if="tooltip && config.tooltipIcon"
+          @mouseenter="tooltip && show($event, tooltip)"
+          @mouseleave="hide"
+        />
+      </span>
+    </button>
+    <Teleport
+      v-if="tooltip"
+      to="body"
+    >
+      <div
+        v-if="visible"
+        ref="floatingEl"
+        class="vp-tooltip"
+        :style="floatingStyles"
+      >
+        {{ activeText }}
+      </div>
+    </Teleport>
+  </div>
+</template>
+<style lang="scss">
+@use '../styles/view/button';
+</style>

package/src/components/PCheckbox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import PLabel from './PLabel.vue'
+
+const model = defineModel<boolean>({ required: true })
+const {
+  label,
+  tooltip,
+} = defineProps<{
+  label?: string
+  tooltip?: string
+}>()
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div class="vp-checkbox">
+      <label class="vp-checkbox__label">
+        <input
+          class="vp-checkbox__input"
+          type="checkbox"
+          :checked="model"
+          @change="model = ($event.target as HTMLInputElement).checked"
+        >
+        <div class="vp-checkbox__box">
+          <svg viewBox="0 0 16 16">
+            <path d="M2 8l4 4l8 -8" />
+          </svg>
+        </div>
+      </label>
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/checkbox';
+</style>

package/src/components/PColor.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { ChromePicker, tinycolor } from 'vue-color'
+import 'vue-color/style.css'
+import PLabel from './PLabel.vue'
+
+const model = defineModel<string>({ required: true })
+const {
+  label,
+  tooltip,
+  alpha = false,
+} = defineProps<{
+  label?: string
+  tooltip?: string
+  alpha?: boolean
+}>()
+
+const isOpen = ref(false)
+const swatchRef = ref<HTMLElement | null>(null)
+const pickerRef = ref<HTMLElement | null>(null)
+
+const { floatingStyles } = useFloating(swatchRef, pickerRef, {
+  placement: 'bottom-start',
+  strategy: 'fixed',
+  middleware: [offset(4), flip(), shift({ padding: 8 })],
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function onPickerChange(color: unknown) {
+  const tc = tinycolor(color as Parameters<typeof tinycolor>[0])
+  if (tc.isValid()) {
+    model.value = alpha ? tc.toHex8String() : tc.toHexString()
+  }
+}
+
+function onHexChange(e: Event) {
+  const val = (e.target as HTMLInputElement).value
+  const tc = tinycolor(val)
+  if (tc.isValid()) {
+    model.value = alpha ? tc.toHex8String() : tc.toHexString()
+  }
+}
+
+function onPointerDown(e: PointerEvent) {
+  if (!isOpen.value) return
+  const target = e.target as Node
+  if (swatchRef.value?.contains(target) || pickerRef.value?.contains(target)) return
+  isOpen.value = false
+}
+
+onMounted(() => document.addEventListener('pointerdown', onPointerDown))
+onUnmounted(() => document.removeEventListener('pointerdown', onPointerDown))
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div class="vp-color">
+      <div class="vp-color__header">
+        <div
+          ref="swatchRef"
+          class="vp-color__swatch"
+        >
+          <button
+            class="vp-color__swatch-btn"
+            @click="toggle"
+          >
+            <div
+              class="vp-color__swatch-btn__color"
+              :style="{ background: model }"
+            />
+          </button>
+        </div>
+        <div class="vp-color__text">
+          <input
+            class="vp-text__input"
+            type="text"
+            :value="model"
+            @change="onHexChange"
+          >
+        </div>
+      </div>
+      <Teleport to="body">
+        <div
+          v-if="isOpen"
+          ref="pickerRef"
+          class="vp-color__popup"
+          :style="floatingStyles"
+        >
+          <ChromePicker
+            :model-value="model"
+            :disable-alpha="!alpha"
+            @update:model-value="onPickerChange"
+          />
+        </div>
+      </Teleport>
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/color';
+</style>

package/src/components/PConfig.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { type PaneConfig, providePaneConfig } from '../composables/usePaneConfig.ts'
+
+const props = defineProps<PaneConfig>()
+const defined = Object.fromEntries(Object.entries(props).filter(([, v]) => v !== undefined))
+providePaneConfig(defined as Partial<PaneConfig>)
+</script>
+<template>
+  <slot />
+</template>

package/src/components/PFolder.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useFoldable } from '../composables/useFoldable'
+import { usePaneConfig } from '../composables/usePaneConfig'
+import { useTooltip } from '../composables/useTooltip'
+
+const expandedModel = defineModel<boolean>('expanded', { default: undefined })
+const {
+  title,
+  tooltip,
+  id,
+  disabled,
+} = defineProps<{
+  title: string
+  tooltip?: string
+  id?: string
+  disabled?: boolean
+}>()
+
+const key = id ?? title
+const config = usePaneConfig()
+const containerRef = ref<HTMLElement | null>(null)
+const { isExpanded, toggle } = useFoldable(
+  containerRef,
+  expandedModel,
+  key ? `vp-folder-${key}` : undefined,
+)
+
+const { floatingStyles, visible, activeText, show, hide } = useTooltip()
+</script>
+
+<template>
+  <div
+    class="vp-folder vp-container"
+    :class="{
+      'vp-folder--expanded': isExpanded,
+      'vp--disabled': disabled,
+    }"
+  >
+    <button
+      class="vp-folder__title"
+      @click="toggle"
+    >
+      <div
+        class="vp-folder__title-text"
+        @mouseenter="tooltip && show($event, tooltip)"
+        @mouseleave="hide"
+      >
+        {{ title }}
+        <component
+          :is="config.tooltipIcon"
+          v-if="tooltip && config.tooltipIcon"
+        />
+      </div>
+      <div class="vp-folder__chevron" />
+    </button>
+    <div class="vp-folder__indent" />
+    <div
+      ref="containerRef"
+      class="vp-folder__content"
+    >
+      <slot />
+    </div>
+    <Teleport
+      v-if="tooltip"
+      to="body"
+    >
+      <div
+        v-if="visible"
+        ref="floatingEl"
+        class="vp-tooltip"
+        :style="floatingStyles"
+      >
+        {{ activeText }}
+      </div>
+    </Teleport>
+  </div>
+</template>
+<style lang="scss">
+@use '../styles/view/folder';
+</style>

package/src/components/PGraph.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import PLabel from './PLabel.vue'
+
+const {
+  values,
+  label,
+  tooltip,
+  min,
+  max,
+} = defineProps<{
+  values: number[]
+  label?: string
+  tooltip?: string
+  min?: number
+  max?: number
+}>()
+
+const polylinePoints = computed(() => {
+  if (!values.length) return ''
+  const minV = min ?? Math.min(...values)
+  const maxV = max ?? Math.max(...values)
+  const range = maxV - minV || 1
+  return values.map((v, i) => {
+    const x = (i / (values.length - 1)) * 100
+    const y = 100 - ((v - minV) / range) * 100
+    return `${x},${y}`
+  }).join(' ')
+})
+</script>
+<template>
+  <PLabel
+    :label="label"
+    :tooltip="tooltip"
+  >
+    <div class="vp-graph">
+      <svg
+        class="vp-graph__svg"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+      >
+        <polyline :points="polylinePoints" />
+      </svg>
+    </div>
+  </PLabel>
+</template>
+<style lang="scss">
+@use '../styles/view/graph';
+</style>

package/src/components/PLabel.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { usePaneConfig } from '../composables/usePaneConfig'
+import { useTooltip } from '../composables/useTooltip'
+
+const {
+  label,
+  tooltip,
+} = defineProps<{
+  label?: string
+  tooltip?: string
+}>()
+
+const { floatingStyles, visible, activeText, show, hide } = useTooltip()
+const config = usePaneConfig()
+</script>
+<template>
+  <div
+    class="vp-label"
+    :class="{ 'vp-label--no-label': !label }"
+  >
+    <div class="vp-label__text">
+      {{ label }}
+      <component
+        :is="config.tooltipIcon"
+        v-if="tooltip && config.tooltipIcon"
+        @mouseenter="tooltip && show($event, tooltip)"
+        @mouseleave="hide"
+      />
+    </div>
+    <div class="vp-label__value">
+      <slot />
+    </div>
+    <Teleport
+      v-if="tooltip"
+      to="body"
+    >
+      <div
+        v-if="visible"
+        ref="floatingEl"
+        class="vp-tooltip"
+        :style="floatingStyles"
+      >
+        {{ activeText }}
+      </div>
+    </Teleport>
+  </div>
+</template>
+<style lang="scss">
+@use '../styles/view/label';
+</style>