vue-accessible-color-picker - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6

dist/vue-accessible-color-picker-unstyled.js

@@ -1,1 +0,1 @@
-import{ref as e,reactive as t,computed as n,watch as r,onMounted as o,onBeforeUnmount as a,openBlock as l,createElementBlock as s,createElementVNode as u,renderSlot as i,createCommentVNode as c,unref as h,Fragment as p,renderList as f,toDisplayString as v,createTextVNode as d}from"vue";function b(e,t,n){return Math.max(t,Math.min(e,n))}function g(e,t=2){return e.toFixed(t).replace(/0+$/,"").replace(/\.$/,"")}function m(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360}function y(e){return g(360*e)}function w(e){if(!e.endsWith("%"))return NaN;const t=e.substring(0,e.length-1);if(t.endsWith("."))return NaN;const n=parseFloat(t);return Number.isNaN(n)?NaN:b(n,0,100)/100}function x(e){return g(100*e)+"%"}function $(e){if(e.endsWith("%"))return w(e);if(e.endsWith("."))return NaN;const t=parseFloat(e);return Number.isNaN(t)?NaN:b(t,0,255)/255}function k(e){return g(255*e)}function C(e){return e.endsWith("%")?w(e):b(parseFloat(e),0,1)}function N(e){return String(e)}const A={hsl:{h:{to:y,from:m},s:{to:x,from:w},l:{to:x,from:w},a:{to:N,from:C}},hwb:{h:{to:y,from:m},w:{to:x,from:w},b:{to:x,from:w},a:{to:N,from:C}},rgb:{r:{to:k,from:$},g:{to:k,from:$},b:{to:k,from:$},a:{to:N,from:C}}};function L(e){const t=e.replace(/^#/,""),n=[],r=t.length>4?2:1;for(let e=0;e<t.length;e+=r){const o=t.slice(e,e+r);n.push(o.repeat(r%2+1))}3===n.length&&n.push("ff");const o=n.map((e=>parseInt(e,16)/255));return{r:o[0],g:o[1],b:o[2],a:o[3]}}function S(e){const t=e.l<.5?e.l*(1+e.s):e.l+e.s-e.l*e.s,n=2*e.l-t;return{r:E(n,t,e.h+1/3),g:E(n,t,e.h),b:E(n,t,e.h-1/3),a:e.a}}function E(e,t,n){return n<0?n+=1:n>1&&(n-=1),n<1/6?e+6*(t-e)*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}function M(e){return{r:F(5,e),g:F(3,e),b:F(1,e),a:e.a}}function F(e,t){const n=(e+6*t.h)%6;return t.v-t.v*t.s*Math.max(0,Math.min(n,4-n,1))}function I(e){return{h:e.h,s:1===e.b?0:1-e.w/(1-e.b),v:1-e.b,a:e.a}}function P(e){const t=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b);let r;return r=n===t?0:n===e.r?(0+(e.g-e.b)/(n-t))/6:n===e.g?(2+(e.b-e.r)/(n-t))/6:(4+(e.r-e.g)/(n-t))/6,r<0&&(r+=1),{h:r,w:t,b:1-n,a:e.a}}function O(e){const t=P(e),n=t.w,r=1-t.b,o=(r+n)/2;let a;return a=0===r||1===n?0:(r-o)/Math.min(o,1-o),{h:t.h,s:a,l:o,a:e.a}}function T(e){return"#"+Object.values(e).map((e=>{const t=255*e,n=Math.round(t).toString(16);return 1===n.length?"0"+n:n})).join("")}const j={hex:[["hsl",e=>q(e,[L,O])],["hsv",e=>q(e,[L,P,I])],["hwb",e=>q(e,[L,P])],["rgb",L]],hsl:[["hex",e=>q(e,[S,T])],["hsv",function(e){const t=e.l+e.s*Math.min(e.l,1-e.l),n=0===t?0:2-2*e.l/t;return{h:e.h,s:n,v:t,a:e.a}}],["hwb",e=>q(e,[S,P])],["rgb",S]],hsv:[["hex",e=>q(e,[M,T])],["hsl",function(e){const t=e.v-e.v*e.s/2,n=Math.min(t,1-t),r=0===n?0:(e.v-t)/n;return{h:e.h,s:r,l:t,a:e.a}}],["hwb",function(e){return{h:e.h,w:(1-e.s)*e.v,b:1-e.v,a:e.a}}],["rgb",M]],hwb:[["hex",e=>q(e,[I,M,T])],["hsl",e=>q(e,[I,M,O])],["hsv",I],["rgb",e=>q(e,[I,M])]],rgb:[["hex",T],["hsl",O],["hsv",e=>q(e,[P,I])],["hwb",P]]};function q(e,t){return t.reduce(((e,t)=>t(e)),e)}function H(e){const t={};for(const n in e)t[n]=e[n];return t}const W={hex:(e,t)=>t&&[5,9].includes(e.length)?e.substring(0,e.length-(e.length-1)/4):e,hsl:(e,t)=>`hsl(${g(360*e.h)} ${g(100*e.s)}% ${g(100*e.l)}%`+(t?")":` / ${g(e.a)})`),hwb:(e,t)=>`hwb(${g(360*e.h)} ${g(100*e.w)}% ${g(100*e.b)}%`+(t?")":` / ${g(e.a)})`),rgb:(e,t)=>`rgb(${g(255*e.r)} ${g(255*e.g)} ${g(255*e.b)}`+(t?")":` / ${g(e.a)})`)};function D(e,t,n){return W[t](e,n)}function K(e){return!!e.startsWith("#")&&(!![3,4,6,8].includes(e.length-1)&&/^#[0-9A-Fa-f]+$/.test(e))}function _(e){if("string"!=typeof e){const t=function(e){return Object.prototype.hasOwnProperty.call(e,"r")?"rgb":Object.prototype.hasOwnProperty.call(e,"w")?"hwb":Object.prototype.hasOwnProperty.call(e,"v")?"hsv":"hsl"}(e);return{format:t,color:e}}if(K(e))return{format:"hex",color:e};if(!e.includes("(")){const t=document.createElement("canvas").getContext("2d");t.fillStyle=e;const n=t.fillStyle;return"#000000"===n&&"black"!==e?null:{format:"hex",color:n}}const[t,n]=e.split("("),r=t.substring(0,3),o=n.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");3===o.length&&o.push("1");const a=r.split("").concat("a"),l=Object.fromEntries(a.map(((e,t)=>[e,A[r][e].from(o[t])])));return{format:r,color:l}}const R=["hex","hsl","hwb","rgb"],U=["show","hide"],X={class:"vacp-range-input-group"},Y=["for"],z={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},B=d("Hue"),G=["id","value"],J=["for"],Q={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},V=d("Alpha"),Z=["id","value"],ee=d(" Copy color "),te={class:"vacp-color-inputs"},ne={class:"vacp-color-input-group"},re=["for"],oe=u("span",{class:"vacp-color-input-label-text"}," Hex ",-1),ae=["id","value"],le=["id","for","onInput"],se={class:"vacp-color-input-label-text"},ue=["id","value","onInput"],ie=d(" Switch format ");var ce={__name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:"#ffffffff"},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>R,validator:e=>e.length>0&&e.every((e=>R.includes(e)))},defaultFormat:{type:String,required:!1,default:"hsl",validator:e=>R.includes(e)},alphaChannel:{type:String,required:!1,default:"show",validator:e=>U.includes(e)}},emits:["color-change"],setup(d,{emit:g}){const m=d,y=e(null),w=e(null),x=e(null),$=e(!1),k=e(m.defaultFormat),C=t({hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}}),N=n((()=>{const e=Object.keys(C[k.value]);return"hex"!==k.value&&"hide"===m.alphaChannel?e.slice(0,3):e})),L=n((()=>"hide"===m.alphaChannel&&[5,9].includes(C.hex.length)?C.hex.substring(0,C.hex.length-(C.hex.length-1)/4):C.hex));function S(){const e=m.visibleFormats.findIndex((e=>e===k.value)),t=e===m.visibleFormats.length-1?0:e+1;k.value=m.visibleFormats[t]}function E(e){$.value=!0,I(e)}function M(e){$.value=!0,P(e)}function F(){$.value=!1}function I(e){1===e.buttons&&!1!==$.value&&w.value instanceof HTMLElement&&O(w.value,e.clientX,e.clientY)}function P(e){if(!1===$.value||!(w.value instanceof HTMLElement))return;e.preventDefault();const t=e.touches[0];O(w.value,t.clientX,t.clientY)}function O(e,t,n){const r=function(e,t,n){const r=e.getBoundingClientRect(),o=t-r.left,a=n-r.top;return{x:b(o/r.width,0,1),y:b(1-a/r.height,0,1)}}(e,t,n),o=H(C.hsv);o.s=r.x,o.v=r.y,ce("hsv",o)}function T(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key))return;e.preventDefault();const t=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,n=["ArrowLeft","ArrowRight"].includes(e.key)?"s":"v",r=e.shiftKey?10:1,o=C.hsv[n]+t*r*.01,a=H(C.hsv);a[n]=b(o,0,1),ce("hsv",a)}function q(e){const t=_(e);null!==t&&ce(t.format,t.color)}function W(e){const t=e.currentTarget,n=H(C.hsv);n.h=parseInt(t.value)/360,ce("hsv",n)}function R(e){const t=e.currentTarget,n=H(C.hsv);n.a=parseInt(t.value)/100,ce("hsv",n)}function U(e,t,n){const r=e.target,o=H(C[t]),a=A[t][n].from(r.value);Number.isNaN(a)||void 0===a||(o[n]=a,ce(t,o))}function ce(e,t){let n=t;if("hide"===m.alphaChannel)if("string"!=typeof t)t.a=1,n=t;else if([5,9].includes(t.length)){const e=(t.length-1)/4;n=t.substring(0,t.length-e)+"f".repeat(e)}else[4,7].includes(t.length)&&(n=t+"f".repeat((t.length-1)/3));if(!function(e,t){if("string"==typeof e||"string"==typeof t)return e===t;for(const n in e)if(e[n]!==t[n])return!1;return!0}(C[e],n)){C[e]=n;const t=function(e){for(const[t,n]of j[e])C[t]=n(C[e]);return function(e,t){const n="hide"===m.alphaChannel;return{colors:e,cssColor:D(e[t],t,n)}}(C,k.value)}(e);g("color-change",t)}y.value instanceof HTMLElement&&w.value instanceof HTMLElement&&x.value instanceof HTMLElement&&function(e,t,n,r){e.style.setProperty("--vacp-hsl-h",String(r.hsl.h)),e.style.setProperty("--vacp-hsl-s",String(r.hsl.s)),e.style.setProperty("--vacp-hsl-l",String(r.hsl.l)),e.style.setProperty("--vacp-hsl-a",String(r.hsl.a)),t.setAttribute("style","\n    position: relative;\n    background-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n    background-image:\n      linear-gradient(to top, #000, transparent),  /* 2. */\n      linear-gradient(to right, #fff, transparent) /* 2. */\n    ;\n  "),n.setAttribute("style",`\n    box-sizing: border-box;\n    position: absolute;\n    left: ${100*r.hsv.s}%;   /* 3. */\n    bottom: ${100*r.hsv.v}%; /* 3. */\n  `)}(y.value,w.value,x.value,C)}function he(){const e=C[k.value],t="hide"===m.alphaChannel;!function(e){if("function"!=typeof document.queryCommandSupported||!document.queryCommandSupported("copy"))return!1;const t=document.createElement("textarea");let n;t.textContent=e,t.style.position="fixed",document.body.appendChild(t),t.select();try{n=document.execCommand("copy")}catch{n=!1}finally{document.body.removeChild(t)}}(D(e,k.value,t))}function pe(e,t){return A[e][t].to(C[e][t])}function fe(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key)||!e.shiftKey)return;const t=e.currentTarget,n=parseFloat(t.step),r=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,o=b(parseFloat(t.value)+r*n*10,parseInt(t.min),parseInt(t.max));t.value=String(o-r*n)}return r((()=>m.color),(e=>{q(e)})),o((()=>{document.addEventListener("mousemove",I,{passive:!1}),document.addEventListener("touchmove",P,{passive:!1}),document.addEventListener("mouseup",F),document.addEventListener("touchend",F),q(m.color)})),a((()=>{document.removeEventListener("mousemove",I),document.removeEventListener("touchmove",P),document.removeEventListener("mouseup",F),document.removeEventListener("touchend",F)})),(e,t)=>(l(),s("div",{ref_key:"colorPicker",ref:y,class:"vacp-color-picker"},[u("div",{ref_key:"colorSpace",ref:w,class:"vacp-color-space",onMousedown:E,onTouchstart:M},[u("div",{ref_key:"thumb",ref:x,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:T},null,544)],544),u("div",X,[u("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${d.id}-hue-slider`},[u("span",z,[i(e.$slots,"hue-range-input-label",{},(()=>[B]))]),u("input",{id:`${d.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*C.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:fe,onInput:W},null,40,G)],8,Y),"show"===d.alphaChannel?(l(),s("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${d.id}-alpha-slider`},[u("span",Q,[i(e.$slots,"alpha-range-input-label",{},(()=>[V]))]),u("input",{id:`${d.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*C.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:fe,onInput:R},null,40,Z)],8,J)):c("",!0)]),u("button",{class:"vacp-copy-button",type:"button",onClick:he},[i(e.$slots,"copy-button",{},(()=>[ee]))]),u("div",te,[u("div",ne,["hex"===k.value?(l(),s("label",{key:0,class:"vacp-color-input-label",for:`${d.id}-color-hex`},[oe,u("input",{id:`${d.id}-color-hex`,class:"vacp-color-input",type:"text",value:h(L),onInput:t[0]||(t[0]=e=>function(e){const t=e.target;K(t.value)&&ce("hex",t.value)}(e))},null,40,ae)],8,re)):(l(!0),s(p,{key:1},f(h(N),(e=>(l(),s("label",{id:`${d.id}-color-${k.value}-${e}`,key:`${d.id}-color-${k.value}-${e}`,class:"vacp-color-input-label",for:`${d.id}-color-${k.value}`,onInput:t=>U(t,k.value,e)},[u("span",se,v(e.toUpperCase()),1),u("input",{id:`${d.id}-color-${k.value}`,class:"vacp-color-input",type:"text",value:pe(k.value,e),onInput:t=>U(t,k.value,e)},null,40,ue)],40,le)))),128))]),d.visibleFormats.length>1?(l(),s("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:S},[i(e.$slots,"format-switch-button",{},(()=>[ie]))])):c("",!0)])],512))}};const he={install(e){e.component("ColorPicker",ce)}};export{ce as ColorPicker,he as default};
+import{ref as t,reactive as e,computed as n,watch as r,onMounted as o,onBeforeUnmount as a,openBlock as l,createElementBlock as s,createElementVNode as u,renderSlot as i,createCommentVNode as c,unref as h,Fragment as p,renderList as f,toDisplayString as v,createTextVNode as d}from"vue";function g(t,e,n){return Math.max(e,Math.min(t,n))}function b(t,e=2){return t.toFixed(e).replace(/\.?0+$/,"")}function m(t){if(t.endsWith("."))return NaN;return(parseFloat(t)%360+360)%360/360}function y(t){return b(360*t)}function w(t){if(!t.endsWith("%"))return NaN;const e=t.substring(0,t.length-1);if(e.endsWith("."))return NaN;const n=parseFloat(e);return Number.isNaN(n)?NaN:g(n,0,100)/100}function x(t){return b(100*t)+"%"}function $(t){if(t.endsWith("%"))return w(t);if(t.endsWith("."))return NaN;const e=parseFloat(t);return Number.isNaN(e)?NaN:g(e,0,255)/255}function k(t){return b(255*t)}function N(t){return t.endsWith("%")?w(t):g(parseFloat(t),0,1)}function A(t){return String(t)}const C={hsl:{h:{to:y,from:m},s:{to:x,from:w},l:{to:x,from:w},a:{to:A,from:N}},hwb:{h:{to:y,from:m},w:{to:x,from:w},b:{to:x,from:w},a:{to:A,from:N}},rgb:{r:{to:k,from:$},g:{to:k,from:$},b:{to:k,from:$},a:{to:A,from:N}}};function L(t){const e=t.replace(/^#/,""),n=[],r=e.length>4?2:1;for(let t=0;t<e.length;t+=r){const o=e.slice(t,t+r);n.push(o.repeat(r%2+1))}3===n.length&&n.push("ff");const o=n.map((t=>parseInt(t,16)/255));return{r:o[0],g:o[1],b:o[2],a:o[3]}}function F(t){const e=t.l<.5?t.l*(1+t.s):t.l+t.s-t.l*t.s,n=2*t.l-e;return{r:M(n,e,t.h+1/3),g:M(n,e,t.h),b:M(n,e,t.h-1/3),a:t.a}}function M(t,e,n){return n<0?n+=1:n>1&&(n-=1),n<1/6?t+6*(e-t)*n:n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function E(t){return{r:S(5,t),g:S(3,t),b:S(1,t),a:t.a}}function S(t,e){const n=(t+6*e.h)%6;return e.v-e.v*e.s*Math.max(0,Math.min(n,4-n,1))}function I(t){return{h:t.h,s:1===t.b?0:1-t.w/(1-t.b),v:1-t.b,a:t.a}}function P(t){const e=Math.min(t.r,t.g,t.b),n=Math.max(t.r,t.g,t.b);let r;return r=n===e?0:n===t.r?(0+(t.g-t.b)/(n-e))/6:n===t.g?(2+(t.b-t.r)/(n-e))/6:(4+(t.r-t.g)/(n-e))/6,r<0&&(r+=1),{h:r,w:e,b:1-n,a:t.a}}function O(t){const e=P(t),n=e.w,r=1-e.b,o=(r+n)/2;let a;return a=0===r||1===n?0:(r-o)/Math.min(o,1-o),{h:e.h,s:a,l:o,a:t.a}}function T(t){return"#"+Object.values(t).map((t=>{const e=255*t,n=Math.round(e).toString(16);return 1===n.length?"0"+n:n})).join("")}const j={hex:[["hsl",t=>H(t,[L,O])],["hsv",t=>H(t,[L,P,I])],["hwb",t=>H(t,[L,P])],["rgb",L]],hsl:[["hex",t=>H(t,[F,T])],["hsv",function(t){const e=t.l+t.s*Math.min(t.l,1-t.l),n=0===e?0:2-2*t.l/e;return{h:t.h,s:n,v:e,a:t.a}}],["hwb",t=>H(t,[F,P])],["rgb",F]],hsv:[["hex",t=>H(t,[E,T])],["hsl",function(t){const e=t.v-t.v*t.s/2,n=Math.min(e,1-e),r=0===n?0:(t.v-e)/n;return{h:t.h,s:r,l:e,a:t.a}}],["hwb",function(t){return{h:t.h,w:(1-t.s)*t.v,b:1-t.v,a:t.a}}],["rgb",E]],hwb:[["hex",t=>H(t,[I,E,T])],["hsl",t=>H(t,[I,E,O])],["hsv",I],["rgb",t=>H(t,[I,E])]],rgb:[["hex",T],["hsl",O],["hsv",t=>H(t,[P,I])],["hwb",P]]};function H(t,e){return e.reduce(((t,e)=>e(t)),t)}function D(t){const e={};for(const n in t)e[n]=t[n];return e}const W={hex:(t,e)=>e&&[5,9].includes(t.length)?t.substring(0,t.length-(t.length-1)/4):t,hsl:(t,e)=>`hsl(${b(360*t.h)} ${b(100*t.s)}% ${b(100*t.l)}%`+(e?")":` / ${b(t.a)})`),hwb:(t,e)=>`hwb(${b(360*t.h)} ${b(100*t.w)}% ${b(100*t.b)}%`+(e?")":` / ${b(t.a)})`),rgb:(t,e)=>`rgb(${b(255*t.r)} ${b(255*t.g)} ${b(255*t.b)}`+(e?")":` / ${b(t.a)})`)};function q(t,e,n){return W[e](t,n)}function K(t){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(t)}function _(t){if("string"!=typeof t){const e=function(t){return Object.prototype.hasOwnProperty.call(t,"r")?"rgb":Object.prototype.hasOwnProperty.call(t,"w")?"hwb":Object.prototype.hasOwnProperty.call(t,"v")?"hsv":"hsl"}(t);return{format:e,color:t}}if(K(t))return{format:"hex",color:t};if(!t.includes("(")){const e=document.createElement("canvas").getContext("2d");e.fillStyle=t;const n=e.fillStyle;return"#000000"===n&&"black"!==t?null:{format:"hex",color:n}}const[e,n]=t.split("("),r=e.substring(0,3),o=n.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");3===o.length&&o.push("1");const a=r.split("").concat("a"),l=Object.fromEntries(a.map(((t,e)=>[t,C[r][t].from(o[e])])));return{format:r,color:l}}const R=["hex","hsl","hwb","rgb"],U=["show","hide"],X={class:"vacp-range-input-group"},Y=["for"],z={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},B=d("Hue"),G=["id","value"],J=["for"],Q={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},V=d("Alpha"),Z=["id","value"],tt=d(" Copy color "),et={class:"vacp-color-inputs"},nt={class:"vacp-color-input-group"},rt=["for"],ot=u("span",{class:"vacp-color-input-label-text"}," Hex ",-1),at=["id","value"],lt=["id","for","onInput"],st={class:"vacp-color-input-label-text"},ut=["id","value","onInput"],it=d(" Switch format ");var ct={__name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:"#ffffffff"},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>R,validator:t=>t.length>0&&t.every((t=>R.includes(t)))},defaultFormat:{type:String,required:!1,default:"hsl",validator:t=>R.includes(t)},alphaChannel:{type:String,required:!1,default:"show",validator:t=>U.includes(t)}},emits:["color-change"],setup(d,{emit:b}){const m=d,y=t(null),w=t(null),x=t(null),$=t(!1),k=t(m.defaultFormat),N=e({hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}}),A=n((function(){const t=Object.keys(N[k.value]);return"hex"!==k.value&&"hide"===m.alphaChannel?t.slice(0,3):t})),L=n((function(){return"hide"===m.alphaChannel&&[5,9].includes(N.hex.length)?N.hex.substring(0,N.hex.length-(N.hex.length-1)/4):N.hex}));function F(){const t=(m.visibleFormats.findIndex((t=>t===k.value))+1)%m.visibleFormats.length;k.value=m.visibleFormats[t]}function M(t){$.value=!0,I(t)}function E(t){$.value=!0,P(t)}function S(){$.value=!1}function I(t){1===t.buttons&&!1!==$.value&&w.value instanceof HTMLElement&&O(w.value,t.clientX,t.clientY)}function P(t){if(!1===$.value||!(w.value instanceof HTMLElement))return;t.preventDefault();const e=t.touches[0];O(w.value,e.clientX,e.clientY)}function O(t,e,n){const r=function(t,e,n){const r=t.getBoundingClientRect(),o=e-r.left,a=n-r.top;return{x:g(o/r.width,0,1),y:g(1-a/r.height,0,1)}}(t,e,n),o=D(N.hsv);o.s=r.x,o.v=r.y,ct("hsv",o)}function T(t){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key))return;t.preventDefault();const e=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,n=["ArrowLeft","ArrowRight"].includes(t.key)?"s":"v",r=t.shiftKey?10:1,o=N.hsv[n]+e*r*.01,a=D(N.hsv);a[n]=g(o,0,1),ct("hsv",a)}function H(t){const e=_(t);null!==e&&ct(e.format,e.color)}function W(t){const e=t.currentTarget,n=D(N.hsv);n.h=parseInt(e.value)/360,ct("hsv",n)}function R(t){const e=t.currentTarget,n=D(N.hsv);n.a=parseInt(e.value)/100,ct("hsv",n)}function U(t,e){const n=t.target,r=D(N[k.value]),o=C[k.value][e].from(n.value);Number.isNaN(o)||void 0===o||(r[e]=o,ct(k.value,r))}function ct(t,e){let n=e;if("hide"===m.alphaChannel)if("string"!=typeof e)e.a=1,n=e;else if([5,9].includes(e.length)){const t=(e.length-1)/4;n=e.substring(0,e.length-t)+"f".repeat(t)}else[4,7].includes(e.length)&&(n=e+"f".repeat((e.length-1)/3));if(!function(t,e){if("string"==typeof t||"string"==typeof e)return t===e;for(const n in t)if(t[n]!==e[n])return!1;return!0}(N[t],n)){!function(t,e){N[t]=e;for(const[e,n]of j[t])N[e]=n(N[t])}(t,n);const e=function(){const t="hide"===m.alphaChannel,e=q(N[k.value],k.value,t);return{colors:N,cssColor:e}}();b("color-change",e)}!function(){if(!(y.value instanceof HTMLElement&&w.value instanceof HTMLElement&&x.value instanceof HTMLElement))return;y.value.style.setProperty("--vacp-hsl-h",String(N.hsl.h)),y.value.style.setProperty("--vacp-hsl-s",String(N.hsl.s)),y.value.style.setProperty("--vacp-hsl-l",String(N.hsl.l)),y.value.style.setProperty("--vacp-hsl-a",String(N.hsl.a)),w.value.setAttribute("style","\n    position: relative;\n    background-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n    background-image:\n      linear-gradient(to top, #000, transparent),  /* 2. */\n      linear-gradient(to right, #fff, transparent) /* 2. */\n    ;\n  "),x.value.setAttribute("style",`\n    box-sizing: border-box;\n    position: absolute;\n    left: ${100*N.hsv.s}%;   /* 3. */\n    bottom: ${100*N.hsv.v}%; /* 3. */\n  `)}()}async function ht(){const t=N[k.value],e="hide"===m.alphaChannel,n=q(t,k.value,e);await window.navigator.clipboard.writeText(n)}function pt(t,e){return C[t][e].to(N[t][e])}function ft(t){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(t.key)||!t.shiftKey)return;const e=t.currentTarget,n=parseFloat(e.step),r=["ArrowLeft","ArrowDown"].includes(t.key)?-1:1,o=g(parseFloat(e.value)+r*n*10,parseInt(e.min),parseInt(e.max));e.value=String(o-r*n)}return r((()=>m.color),H),o((function(){document.addEventListener("mousemove",I,{passive:!1}),document.addEventListener("touchmove",P,{passive:!1}),document.addEventListener("mouseup",S),document.addEventListener("touchend",S),H(m.color)})),a((function(){document.removeEventListener("mousemove",I),document.removeEventListener("touchmove",P),document.removeEventListener("mouseup",S),document.removeEventListener("touchend",S)})),(t,e)=>(l(),s("div",{ref_key:"colorPicker",ref:y,class:"vacp-color-picker"},[u("div",{ref_key:"colorSpace",ref:w,class:"vacp-color-space",onMousedown:M,onTouchstart:E},[u("div",{ref_key:"thumb",ref:x,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:T},null,544)],544),u("div",X,[u("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${d.id}-hue-slider`},[u("span",z,[i(t.$slots,"hue-range-input-label",{},(()=>[B]))]),u("input",{id:`${d.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*N.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:ft,onInput:W},null,40,G)],8,Y),"show"===d.alphaChannel?(l(),s("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${d.id}-alpha-slider`},[u("span",Q,[i(t.$slots,"alpha-range-input-label",{},(()=>[V]))]),u("input",{id:`${d.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*N.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:ft,onInput:R},null,40,Z)],8,J)):c("",!0)]),u("button",{class:"vacp-copy-button",type:"button",onClick:ht},[i(t.$slots,"copy-button",{},(()=>[tt]))]),u("div",et,[u("div",nt,["hex"===k.value?(l(),s("label",{key:0,class:"vacp-color-input-label",for:`${d.id}-color-hex`},[ot,u("input",{id:`${d.id}-color-hex`,class:"vacp-color-input",type:"text",value:h(L),onInput:e[0]||(e[0]=t=>function(t){const e=t.target;K(e.value)&&ct("hex",e.value)}(t))},null,40,at)],8,rt)):(l(!0),s(p,{key:1},f(h(A),(t=>(l(),s("label",{id:`${d.id}-color-${k.value}-${t}`,key:`${d.id}-color-${k.value}-${t}`,class:"vacp-color-input-label",for:`${d.id}-color-${k.value}`,onInput:e=>U(e,t)},[u("span",st,v(t.toUpperCase()),1),u("input",{id:`${d.id}-color-${k.value}`,class:"vacp-color-input",type:"text",value:pt(k.value,t),onInput:e=>U(e,t)},null,40,ut)],40,lt)))),128))]),d.visibleFormats.length>1?(l(),s("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:F},[i(t.$slots,"format-switch-button",{},(()=>[it]))])):c("",!0)])],512))}};const ht={install(t){t.component("ColorPicker",ct)}};export{ct as ColorPicker,ht as default};

dist/vue-accessible-color-picker.js

@@ -1,1 +0,1 @@
-import{ref as n,reactive as e,computed as a,watch as t,onMounted as r,onBeforeUnmount as o,openBlock as c,createElementBlock as i,createElementVNode as l,renderSlot as s,createCommentVNode as p,unref as u,Fragment as v,renderList as h,toDisplayString as d,createTextVNode as f}from"vue";function g(n,e,a){return Math.max(e,Math.min(n,a))}function b(n,e=2){return n.toFixed(e).replace(/0+$/,"").replace(/\.$/,"")}function m(n){if(n.endsWith("."))return NaN;return(parseFloat(n)%360+360)%360/360}function y(n){return b(360*n)}function x(n){if(!n.endsWith("%"))return NaN;const e=n.substring(0,n.length-1);if(e.endsWith("."))return NaN;const a=parseFloat(e);return Number.isNaN(a)?NaN:g(a,0,100)/100}function w(n){return b(100*n)+"%"}function k(n){if(n.endsWith("%"))return x(n);if(n.endsWith("."))return NaN;const e=parseFloat(n);return Number.isNaN(e)?NaN:g(e,0,255)/255}function $(n){return b(255*n)}function C(n){return n.endsWith("%")?x(n):g(parseFloat(n),0,1)}function z(n){return String(n)}const S={hsl:{h:{to:y,from:m},s:{to:w,from:x},l:{to:w,from:x},a:{to:z,from:C}},hwb:{h:{to:y,from:m},w:{to:w,from:x},b:{to:w,from:x},a:{to:z,from:C}},rgb:{r:{to:$,from:k},g:{to:$,from:k},b:{to:$,from:k},a:{to:z,from:C}}};function N(n){const e=n.replace(/^#/,""),a=[],t=e.length>4?2:1;for(let n=0;n<e.length;n+=t){const r=e.slice(n,n+t);a.push(r.repeat(t%2+1))}3===a.length&&a.push("ff");const r=a.map((n=>parseInt(n,16)/255));return{r:r[0],g:r[1],b:r[2],a:r[3]}}function A(n){const e=n.l<.5?n.l*(1+n.s):n.l+n.s-n.l*n.s,a=2*n.l-e;return{r:E(a,e,n.h+1/3),g:E(a,e,n.h),b:E(a,e,n.h-1/3),a:n.a}}function E(n,e,a){return a<0?a+=1:a>1&&(a-=1),a<1/6?n+6*(e-n)*a:a<.5?e:a<2/3?n+(e-n)*(2/3-a)*6:n}function T(n){return{r:L(5,n),g:L(3,n),b:L(1,n),a:n.a}}function L(n,e){const a=(n+6*e.h)%6;return e.v-e.v*e.s*Math.max(0,Math.min(a,4-a,1))}function F(n){return{h:n.h,s:1===n.b?0:1-n.w/(1-n.b),v:1-n.b,a:n.a}}function M(n){const e=Math.min(n.r,n.g,n.b),a=Math.max(n.r,n.g,n.b);let t;return t=a===e?0:a===n.r?(0+(n.g-n.b)/(a-e))/6:a===n.g?(2+(n.b-n.r)/(a-e))/6:(4+(n.r-n.g)/(a-e))/6,t<0&&(t+=1),{h:t,w:e,b:1-a,a:n.a}}function I(n){const e=M(n),a=e.w,t=1-e.b,r=(t+a)/2;let o;return o=0===t||1===a?0:(t-r)/Math.min(r,1-r),{h:e.h,s:o,l:r,a:n.a}}function j(n){return"#"+Object.values(n).map((n=>{const e=255*n,a=Math.round(e).toString(16);return 1===a.length?"0"+a:a})).join("")}const P={hex:[["hsl",n=>O(n,[N,I])],["hsv",n=>O(n,[N,M,F])],["hwb",n=>O(n,[N,M])],["rgb",N]],hsl:[["hex",n=>O(n,[A,j])],["hsv",function(n){const e=n.l+n.s*Math.min(n.l,1-n.l),a=0===e?0:2-2*n.l/e;return{h:n.h,s:a,v:e,a:n.a}}],["hwb",n=>O(n,[A,M])],["rgb",A]],hsv:[["hex",n=>O(n,[T,j])],["hsl",function(n){const e=n.v-n.v*n.s/2,a=Math.min(e,1-e),t=0===a?0:(n.v-e)/a;return{h:n.h,s:t,l:e,a:n.a}}],["hwb",function(n){return{h:n.h,w:(1-n.s)*n.v,b:1-n.v,a:n.a}}],["rgb",T]],hwb:[["hex",n=>O(n,[F,T,j])],["hsl",n=>O(n,[F,T,I])],["hsv",F],["rgb",n=>O(n,[F,T])]],rgb:[["hex",j],["hsl",I],["hsv",n=>O(n,[M,F])],["hwb",M]]};function O(n,e){return e.reduce(((n,e)=>e(n)),n)}function W(n){const e={};for(const a in n)e[a]=n[a];return e}const q={hex:(n,e)=>e&&[5,9].includes(n.length)?n.substring(0,n.length-(n.length-1)/4):n,hsl:(n,e)=>`hsl(${b(360*n.h)} ${b(100*n.s)}% ${b(100*n.l)}%`+(e?")":` / ${b(n.a)})`),hwb:(n,e)=>`hwb(${b(360*n.h)} ${b(100*n.w)}% ${b(100*n.b)}%`+(e?")":` / ${b(n.a)})`),rgb:(n,e)=>`rgb(${b(255*n.r)} ${b(255*n.g)} ${b(255*n.b)}`+(e?")":` / ${b(n.a)})`)};function D(n,e,a){return q[e](n,a)}function H(n){return!!n.startsWith("#")&&(!![3,4,6,8].includes(n.length-1)&&/^#[0-9A-Fa-f]+$/.test(n))}function R(n){if("string"!=typeof n){const e=function(n){return Object.prototype.hasOwnProperty.call(n,"r")?"rgb":Object.prototype.hasOwnProperty.call(n,"w")?"hwb":Object.prototype.hasOwnProperty.call(n,"v")?"hsv":"hsl"}(n);return{format:e,color:n}}if(H(n))return{format:"hex",color:n};if(!n.includes("(")){const e=document.createElement("canvas").getContext("2d");e.fillStyle=n;const a=e.fillStyle;return"#000000"===a&&"black"!==n?null:{format:"hex",color:a}}const[e,a]=n.split("("),t=e.substring(0,3),r=a.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");3===r.length&&r.push("1");const o=t.split("").concat("a"),c=Object.fromEntries(o.map(((n,e)=>[n,S[t][n].from(r[e])])));return{format:t,color:c}}const U=["hex","hsl","hwb","rgb"],K=["show","hide"],_={class:"vacp-range-input-group"},B=["for"],X={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},Y=f("Hue"),J=["id","value"],G=["for"],Q={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},V=f("Alpha"),Z=["id","value"],nn=f(" Copy color "),en={class:"vacp-color-inputs"},an={class:"vacp-color-input-group"},tn=["for"],rn=l("span",{class:"vacp-color-input-label-text"}," Hex ",-1),on=["id","value"],cn=["id","for","onInput"],ln={class:"vacp-color-input-label-text"},sn=["id","value","onInput"],pn=f(" Switch format ");var un={__name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:"#ffffffff"},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>U,validator:n=>n.length>0&&n.every((n=>U.includes(n)))},defaultFormat:{type:String,required:!1,default:"hsl",validator:n=>U.includes(n)},alphaChannel:{type:String,required:!1,default:"show",validator:n=>K.includes(n)}},emits:["color-change"],setup(f,{emit:b}){const m=f,y=n(null),x=n(null),w=n(null),k=n(!1),$=n(m.defaultFormat),C=e({hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}}),z=a((()=>{const n=Object.keys(C[$.value]);return"hex"!==$.value&&"hide"===m.alphaChannel?n.slice(0,3):n})),N=a((()=>"hide"===m.alphaChannel&&[5,9].includes(C.hex.length)?C.hex.substring(0,C.hex.length-(C.hex.length-1)/4):C.hex));function A(){const n=m.visibleFormats.findIndex((n=>n===$.value)),e=n===m.visibleFormats.length-1?0:n+1;$.value=m.visibleFormats[e]}function E(n){k.value=!0,F(n)}function T(n){k.value=!0,M(n)}function L(){k.value=!1}function F(n){1===n.buttons&&!1!==k.value&&x.value instanceof HTMLElement&&I(x.value,n.clientX,n.clientY)}function M(n){if(!1===k.value||!(x.value instanceof HTMLElement))return;n.preventDefault();const e=n.touches[0];I(x.value,e.clientX,e.clientY)}function I(n,e,a){const t=function(n,e,a){const t=n.getBoundingClientRect(),r=e-t.left,o=a-t.top;return{x:g(r/t.width,0,1),y:g(1-o/t.height,0,1)}}(n,e,a),r=W(C.hsv);r.s=t.x,r.v=t.y,un("hsv",r)}function j(n){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(n.key))return;n.preventDefault();const e=["ArrowLeft","ArrowDown"].includes(n.key)?-1:1,a=["ArrowLeft","ArrowRight"].includes(n.key)?"s":"v",t=n.shiftKey?10:1,r=C.hsv[a]+e*t*.01,o=W(C.hsv);o[a]=g(r,0,1),un("hsv",o)}function O(n){const e=R(n);null!==e&&un(e.format,e.color)}function q(n){const e=n.currentTarget,a=W(C.hsv);a.h=parseInt(e.value)/360,un("hsv",a)}function U(n){const e=n.currentTarget,a=W(C.hsv);a.a=parseInt(e.value)/100,un("hsv",a)}function K(n,e,a){const t=n.target,r=W(C[e]),o=S[e][a].from(t.value);Number.isNaN(o)||void 0===o||(r[a]=o,un(e,r))}function un(n,e){let a=e;if("hide"===m.alphaChannel)if("string"!=typeof e)e.a=1,a=e;else if([5,9].includes(e.length)){const n=(e.length-1)/4;a=e.substring(0,e.length-n)+"f".repeat(n)}else[4,7].includes(e.length)&&(a=e+"f".repeat((e.length-1)/3));if(!function(n,e){if("string"==typeof n||"string"==typeof e)return n===e;for(const a in n)if(n[a]!==e[a])return!1;return!0}(C[n],a)){C[n]=a;const e=function(n){for(const[e,a]of P[n])C[e]=a(C[n]);return function(n,e){const a="hide"===m.alphaChannel;return{colors:n,cssColor:D(n[e],e,a)}}(C,$.value)}(n);b("color-change",e)}y.value instanceof HTMLElement&&x.value instanceof HTMLElement&&w.value instanceof HTMLElement&&function(n,e,a,t){n.style.setProperty("--vacp-hsl-h",String(t.hsl.h)),n.style.setProperty("--vacp-hsl-s",String(t.hsl.s)),n.style.setProperty("--vacp-hsl-l",String(t.hsl.l)),n.style.setProperty("--vacp-hsl-a",String(t.hsl.a)),e.setAttribute("style","\n    position: relative;\n    background-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n    background-image:\n      linear-gradient(to top, #000, transparent),  /* 2. */\n      linear-gradient(to right, #fff, transparent) /* 2. */\n    ;\n  "),a.setAttribute("style",`\n    box-sizing: border-box;\n    position: absolute;\n    left: ${100*t.hsv.s}%;   /* 3. */\n    bottom: ${100*t.hsv.v}%; /* 3. */\n  `)}(y.value,x.value,w.value,C)}function vn(){const n=C[$.value],e="hide"===m.alphaChannel;!function(n){if("function"!=typeof document.queryCommandSupported||!document.queryCommandSupported("copy"))return!1;const e=document.createElement("textarea");let a;e.textContent=n,e.style.position="fixed",document.body.appendChild(e),e.select();try{a=document.execCommand("copy")}catch{a=!1}finally{document.body.removeChild(e)}}(D(n,$.value,e))}function hn(n,e){return S[n][e].to(C[n][e])}function dn(n){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(n.key)||!n.shiftKey)return;const e=n.currentTarget,a=parseFloat(e.step),t=["ArrowLeft","ArrowDown"].includes(n.key)?-1:1,r=g(parseFloat(e.value)+t*a*10,parseInt(e.min),parseInt(e.max));e.value=String(r-t*a)}return t((()=>m.color),(n=>{O(n)})),r((()=>{document.addEventListener("mousemove",F,{passive:!1}),document.addEventListener("touchmove",M,{passive:!1}),document.addEventListener("mouseup",L),document.addEventListener("touchend",L),O(m.color)})),o((()=>{document.removeEventListener("mousemove",F),document.removeEventListener("touchmove",M),document.removeEventListener("mouseup",L),document.removeEventListener("touchend",L)})),(n,e)=>(c(),i("div",{ref_key:"colorPicker",ref:y,class:"vacp-color-picker"},[l("div",{ref_key:"colorSpace",ref:x,class:"vacp-color-space",onMousedown:E,onTouchstart:T},[l("div",{ref_key:"thumb",ref:w,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:j},null,544)],544),l("div",_,[l("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${f.id}-hue-slider`},[l("span",X,[s(n.$slots,"hue-range-input-label",{},(()=>[Y]))]),l("input",{id:`${f.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*C.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:dn,onInput:q},null,40,J)],8,B),"show"===f.alphaChannel?(c(),i("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${f.id}-alpha-slider`},[l("span",Q,[s(n.$slots,"alpha-range-input-label",{},(()=>[V]))]),l("input",{id:`${f.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*C.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:dn,onInput:U},null,40,Z)],8,G)):p("",!0)]),l("button",{class:"vacp-copy-button",type:"button",onClick:vn},[s(n.$slots,"copy-button",{},(()=>[nn]))]),l("div",en,[l("div",an,["hex"===$.value?(c(),i("label",{key:0,class:"vacp-color-input-label",for:`${f.id}-color-hex`},[rn,l("input",{id:`${f.id}-color-hex`,class:"vacp-color-input",type:"text",value:u(N),onInput:e[0]||(e[0]=n=>function(n){const e=n.target;H(e.value)&&un("hex",e.value)}(n))},null,40,on)],8,tn)):(c(!0),i(v,{key:1},h(u(z),(n=>(c(),i("label",{id:`${f.id}-color-${$.value}-${n}`,key:`${f.id}-color-${$.value}-${n}`,class:"vacp-color-input-label",for:`${f.id}-color-${$.value}`,onInput:e=>K(e,$.value,n)},[l("span",ln,d(n.toUpperCase()),1),l("input",{id:`${f.id}-color-${$.value}`,class:"vacp-color-input",type:"text",value:hn($.value,n),onInput:e=>K(e,$.value,n)},null,40,sn)],40,cn)))),128))]),f.visibleFormats.length>1?(c(),i("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:A},[s(n.$slots,"format-switch-button",{},(()=>[pn]))])):p("",!0)])],512))}};!function(n,e){void 0===e&&(e={});var a=e.insertAt;if(n&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===a&&t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}('\n/*\nThis style block is unscoped intentionally.\n\nThis is done to have a lower specificity for its selectors which in turn makes it easier to override their styles.\n\nThe specificity for `.vacp-color-space[data-v-76c97bd2]` is 20 while the specificity for `.vacp-color-space` is 10.\n*/\n.vacp-color-picker {\n  --vacp-color: hsl(\n    calc(var(--vacp-hsl-h) * 360)\n    calc(var(--vacp-hsl-s) * 100%)\n    calc(var(--vacp-hsl-l) * 100%)\n    / var(--vacp-hsl-a)\n  );\n  --vacp-focus-color: dodgerblue;\n  --vacp-color-space-width: 300px;\n  --vacp-spacing: 6px;\n  --vacp-tiled-background-image: linear-gradient(\n      45deg,\n      #eee 25%,\n      transparent 25%,\n      transparent 75%,\n      #eee 75%,\n      #eee\n    ),\n    linear-gradient(\n      45deg,\n      #eee 25%,\n      transparent 25%,\n      transparent 75%,\n      #eee 75%,\n      #eee\n    )\n  ;\n\n  max-width: var(--vacp-color-space-width);\n  padding: var(--vacp-spacing);\n  display: grid;\n  grid-gap: var(--vacp-spacing);\n  grid-template-columns: 1fr min-content;\n  grid-template-areas:\n    "color-space  color-space"\n    "range-inputs copy-button"\n    "color-inputs color-inputs"\n  ;\n  font-size: 0.8em;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  background-color: #fff;\n}\n.vacp-color-picker *,\n.vacp-color-picker *::before,\n.vacp-color-picker *::after {\n  box-sizing: border-box;\n}\n.vacp-color-picker button::-moz-focus-inner {\n  border: none;\n  padding: 0;\n}\n.vacp-color-picker :focus {\n  outline: 2px solid var(--vacp-focus-color);\n}\n.vacp-color-space {\n  grid-area: color-space;\n\n  overflow: hidden;\n  height: calc(var(--vacp-color-space-width) * 0.6);\n}\n.vacp-color-space-thumb {\n  --vacp-thumb-size: calc(var(--vacp-spacing) * 4);\n\n  width: var(--vacp-thumb-size);\n  height: var(--vacp-thumb-size);\n  margin-left: calc(-1 * var(--vacp-thumb-size) / 2);\n  margin-bottom: calc(-1 * var(--vacp-thumb-size) / 2);\n  border: 3px solid #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px #000;\n}\n\n/*\n1. Don’t fully remove a focus outline or border. This is important to maintain a focus style in Windows’ high contrast mode.\n*/\n.vacp-color-space-thumb:focus {\n  outline-color: transparent; /* 1. */\n  box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--vacp-focus-color);\n}\n.vacp-range-input-label {\n  --vacp-slider-track-width: 100%;\n  --vacp-slider-track-height: calc(var(--vacp-spacing) * 3);\n  --vacp-slider-thumb-size: calc(var(--vacp-slider-track-height) + var(--vacp-spacing));\n\n  display: block;\n}\n.vacp-range-input-group {\n  grid-area: range-inputs;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.vacp-range-input-group > :not(:first-child) {\n  margin-top: var(--vacp-spacing);\n}\n.vacp-range-input,\n.vacp-range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n}\n.vacp-range-input {\n  display: block;\n  width: var(--vacp-slider-track-width);\n  height: var(--vacp-slider-track-height);\n  margin-right: 0;\n  margin-left: 0;\n  margin-top: calc(var(--vacp-spacing) / 2);\n  margin-bottom: calc(var(--vacp-spacing) / 2);\n  padding: 0;\n  border: none;\n  background: none;\n}\n.vacp-range-input:focus {\n  outline: none;\n}\n\n/* Resets one of these annoying custom focus styles in Firefox. */\n.vacp-range-input::-moz-focus-outer {\n  border: none;\n}\n.vacp-range-input--alpha {\n  background-color: #fff;\n  background-image: var(--vacp-tiled-background-image);\n  background-size: calc(var(--vacp-spacing) * 2) calc(var(--vacp-spacing) * 2);\n  background-position: 0 0, var(--vacp-spacing) var(--vacp-spacing);\n}\n\n/*\nRange input: Tracks\n*/\n.vacp-range-input::-moz-range-track {\n  display: block;\n  box-sizing: border-box;\n  height: var(--vacp-slider-track-height);\n  border: none;\n}\n.vacp-range-input::-webkit-slider-runnable-track {\n  width: var(--vacp-slider-track-width);\n  height: var(--vacp-slider-track-height);\n  border: none;\n}\n.vacp-range-input::-ms-track {\n  width: var(--vacp-slider-track-width);\n  height: var(--vacp-slider-track-height);\n  border: none;\n}\n.vacp-range-input:focus::-moz-range-track {\n  border: 1px solid var(--vacp-focus-color);\n  outline: 2px solid var(--vacp-focus-color);\n}\n.vacp-range-input:focus::-webkit-slider-runnable-track {\n  border: 1px solid var(--vacp-focus-color);\n  outline: 2px solid var(--vacp-focus-color);\n}\n.vacp-range-input:focus::-ms-track {\n  border: 1px solid var(--vacp-focus-color);\n  outline: 2px solid var(--vacp-focus-color);\n}\n.vacp-range-input--alpha::-moz-range-track {\n  background-image: linear-gradient(to right, transparent, var(--vacp-color));\n}\n.vacp-range-input--alpha::-webkit-slider-runnable-track {\n  background-image: linear-gradient(to right, transparent, var(--vacp-color));\n}\n.vacp-range-input--alpha::-ms-track {\n  background-image: linear-gradient(to right, transparent, var(--vacp-color));\n}\n.vacp-range-input--hue::-moz-range-track {\n  background-image: linear-gradient(\n    to right,\n    /*   0° */ #f00 calc(100% *   0/360),\n    /*  60° */ #ff0 calc(100% *  60/360),\n    /* 120° */ #0f0 calc(100% * 120/360),\n    /* 180° */ #0ff calc(100% * 180/360),\n    /* 240° */ #00f calc(100% * 240/360),\n    /* 300° */ #f0f calc(100% * 300/360),\n    /* 360° */ #f00 calc(100% * 360/360)\n  );\n}\n.vacp-range-input--hue::-webkit-slider-runnable-track {\n  background-image: linear-gradient(\n    to right,\n    /*   0° */ #f00 calc(100% *   0/360),\n    /*  60° */ #ff0 calc(100% *  60/360),\n    /* 120° */ #0f0 calc(100% * 120/360),\n    /* 180° */ #0ff calc(100% * 180/360),\n    /* 240° */ #00f calc(100% * 240/360),\n    /* 300° */ #f0f calc(100% * 300/360),\n    /* 360° */ #f00 calc(100% * 360/360)\n  );\n}\n.vacp-range-input--hue::-ms-track {\n  background-image: linear-gradient(\n    to right,\n    /*   0° */ #f00 calc(100% *   0/360),\n    /*  60° */ #ff0 calc(100% *  60/360),\n    /* 120° */ #0f0 calc(100% * 120/360),\n    /* 180° */ #0ff calc(100% * 180/360),\n    /* 240° */ #00f calc(100% * 240/360),\n    /* 300° */ #f0f calc(100% * 300/360),\n    /* 360° */ #f00 calc(100% * 360/360)\n  );\n}\n\n/*\nRange input: thumbs\n*/\n.vacp-range-input::-moz-range-thumb {\n  box-sizing: border-box;\n  width: var(--vacp-slider-thumb-size);\n  height: var(--vacp-slider-thumb-size);\n  border: 3px solid #fff;\n  border-radius: 50%;\n  background-color: transparent;\n  box-shadow: 0 0 0 1px #000;\n  transform: rotate(0);\n}\n.vacp-range-input::-webkit-slider-thumb {\n  width: var(--vacp-slider-thumb-size);\n  height: var(--vacp-slider-thumb-size);\n  margin-top: calc((var(--vacp-slider-track-height) - var(--vacp-slider-thumb-size)) / 2);\n  border: 3px solid #fff;\n  border-radius: 50%;\n  background-color: transparent;\n  box-shadow: 0 0 0 1px #000;\n  transform: rotate(0);\n}\n.vacp-range-input::-ms-thumb {\n  width: var(--vacp-slider-thumb-size);\n  height: var(--vacp-slider-thumb-size);\n  margin-top: 0;\n  border: 3px solid #fff;\n  border-radius: 50%;\n  background-color: transparent;\n  box-shadow: 0 0 0 1px #000;\n  transform: rotate(0);\n}\n.vacp-copy-button {\n  grid-area: copy-button;\n  justify-self: center;\n  align-self: center;\n\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--vacp-spacing) * 6);\n  height: calc(var(--vacp-spacing) * 6);\n  border: 1px solid transparent;\n  border-radius: 50%;\n  color: #fff;\n\n  /* Tiled background */\n  background-color: #fff;\n  background-image:\n    linear-gradient(var(--vacp-color), var(--vacp-color)),\n    var(--vacp-tiled-background-image)\n  ;\n  background-size: calc(var(--vacp-spacing) * 2) calc(var(--vacp-spacing) * 2);\n  background-position: 0 0, var(--vacp-spacing) var(--vacp-spacing);\n}\n.vacp-copy-button:enabled:not(:hover) svg {\n  display: none;\n}\n\n/*\n1. Justification for removing the outline: The focus styles are maintained using a solid border style. This maintains a focus style in Windows’ high contrast mode which would be lost with a combination of `outline: none` and a box shadow because box shadows are removed in high contrast mode.\n*/\n.vacp-copy-button:enabled:focus {\n  outline: none; /* 1. */\n  box-shadow: 0 0 0 2px var(--vacp-focus-color);\n  border-color: var(--vacp-focus-color);\n}\n.vacp-copy-button:enabled:hover {\n  background-color: var(--vacp-color);\n  background-image: linear-gradient(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.25));\n}\n.vacp-color-inputs {\n  grid-area: color-inputs;\n  display: flex;\n  align-items: center;\n}\n.vacp-color-inputs > :not(:first-child) {\n  margin-left: var(--vacp-spacing);\n}\n.vacp-color-input-group {\n  flex-grow: 1;\n  display: flex;\n}\n.vacp-color-input-label {\n  flex-grow: 1;\n  text-align: center;\n}\n.vacp-color-input-label:not(:first-child) {\n  margin-left: var(--vacp-spacing);\n}\n.vacp-color-input {\n  width: 100%;\n  margin: 0;\n  margin-top: calc(var(--vacp-spacing) / 2);\n  padding: var(--vacp-spacing);\n  border: 1px solid #ccc;\n  font: inherit;\n  text-align: center;\n  color: inherit;\n  background-color: #fff;\n}\n.vacp-color-input:enabled:focus {\n  border-color: var(--vacp-focus-color);\n}\n.vacp-format-switch-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  padding: var(--vacp-spacing);\n  border: 1px solid transparent;\n  font: inherit;\n  color: inherit;\n  background-color: #fff;\n}\n.vacp-format-switch-button:enabled:focus {\n  border-color: var(--vacp-focus-color);\n}\n.vacp-format-switch-button:enabled:hover {\n  background-color: #eee;\n}\n');const vn={install(n){n.component("ColorPicker",un)}};export{un as ColorPicker,vn as default};
+import{ref as e,reactive as a,computed as r,watch as t,onMounted as n,onBeforeUnmount as o,openBlock as c,createElementBlock as i,createElementVNode as l,renderSlot as s,createCommentVNode as p,unref as u,Fragment as v,renderList as h,toDisplayString as d,createTextVNode as f}from"vue";function g(e,a,r){return Math.max(a,Math.min(e,r))}function b(e,a=2){return e.toFixed(a).replace(/\.?0+$/,"")}function m(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360}function x(e){return b(360*e)}function k(e){if(!e.endsWith("%"))return NaN;const a=e.substring(0,e.length-1);if(a.endsWith("."))return NaN;const r=parseFloat(a);return Number.isNaN(r)?NaN:g(r,0,100)/100}function w(e){return b(100*e)+"%"}function y(e){if(e.endsWith("%"))return k(e);if(e.endsWith("."))return NaN;const a=parseFloat(e);return Number.isNaN(a)?NaN:g(a,0,255)/255}function $(e){return b(255*e)}function z(e){return e.endsWith("%")?k(e):g(parseFloat(e),0,1)}function A(e){return String(e)}const C={hsl:{h:{to:x,from:m},s:{to:w,from:k},l:{to:w,from:k},a:{to:A,from:z}},hwb:{h:{to:x,from:m},w:{to:w,from:k},b:{to:w,from:k},a:{to:A,from:z}},rgb:{r:{to:$,from:y},g:{to:$,from:y},b:{to:$,from:y},a:{to:A,from:z}}};function N(e){const a=e.replace(/^#/,""),r=[],t=a.length>4?2:1;for(let e=0;e<a.length;e+=t){const n=a.slice(e,e+t);r.push(n.repeat(t%2+1))}3===r.length&&r.push("ff");const n=r.map((e=>parseInt(e,16)/255));return{r:n[0],g:n[1],b:n[2],a:n[3]}}function S(e){const a=e.l<.5?e.l*(1+e.s):e.l+e.s-e.l*e.s,r=2*e.l-a;return{r:E(r,a,e.h+1/3),g:E(r,a,e.h),b:E(r,a,e.h-1/3),a:e.a}}function E(e,a,r){return r<0?r+=1:r>1&&(r-=1),r<1/6?e+6*(a-e)*r:r<.5?a:r<2/3?e+(a-e)*(2/3-r)*6:e}function L(e){return{r:F(5,e),g:F(3,e),b:F(1,e),a:e.a}}function F(e,a){const r=(e+6*a.h)%6;return a.v-a.v*a.s*Math.max(0,Math.min(r,4-r,1))}function M(e){return{h:e.h,s:1===e.b?0:1-e.w/(1-e.b),v:1-e.b,a:e.a}}function I(e){const a=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b);let t;return t=r===a?0:r===e.r?(0+(e.g-e.b)/(r-a))/6:r===e.g?(2+(e.b-e.r)/(r-a))/6:(4+(e.r-e.g)/(r-a))/6,t<0&&(t+=1),{h:t,w:a,b:1-r,a:e.a}}function j(e){const a=I(e),r=a.w,t=1-a.b,n=(t+r)/2;let o;return o=0===t||1===r?0:(t-n)/Math.min(n,1-n),{h:a.h,s:o,l:n,a:e.a}}function P(e){return"#"+Object.values(e).map((e=>{const a=255*e,r=Math.round(a).toString(16);return 1===r.length?"0"+r:r})).join("")}const T={hex:[["hsl",e=>O(e,[N,j])],["hsv",e=>O(e,[N,I,M])],["hwb",e=>O(e,[N,I])],["rgb",N]],hsl:[["hex",e=>O(e,[S,P])],["hsv",function(e){const a=e.l+e.s*Math.min(e.l,1-e.l),r=0===a?0:2-2*e.l/a;return{h:e.h,s:r,v:a,a:e.a}}],["hwb",e=>O(e,[S,I])],["rgb",S]],hsv:[["hex",e=>O(e,[L,P])],["hsl",function(e){const a=e.v-e.v*e.s/2,r=Math.min(a,1-a),t=0===r?0:(e.v-a)/r;return{h:e.h,s:t,l:a,a:e.a}}],["hwb",function(e){return{h:e.h,w:(1-e.s)*e.v,b:1-e.v,a:e.a}}],["rgb",L]],hwb:[["hex",e=>O(e,[M,L,P])],["hsl",e=>O(e,[M,L,j])],["hsv",M],["rgb",e=>O(e,[M,L])]],rgb:[["hex",P],["hsl",j],["hsv",e=>O(e,[I,M])],["hwb",I]]};function O(e,a){return a.reduce(((e,a)=>a(e)),e)}function H(e){const a={};for(const r in e)a[r]=e[r];return a}const D={hex:(e,a)=>a&&[5,9].includes(e.length)?e.substring(0,e.length-(e.length-1)/4):e,hsl:(e,a)=>`hsl(${b(360*e.h)} ${b(100*e.s)}% ${b(100*e.l)}%`+(a?")":` / ${b(e.a)})`),hwb:(e,a)=>`hwb(${b(360*e.h)} ${b(100*e.w)}% ${b(100*e.b)}%`+(a?")":` / ${b(e.a)})`),rgb:(e,a)=>`rgb(${b(255*e.r)} ${b(255*e.g)} ${b(255*e.b)}`+(a?")":` / ${b(e.a)})`)};function U(e,a,r){return D[a](e,r)}function W(e){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e)}function q(e){if("string"!=typeof e){const a=function(e){return Object.prototype.hasOwnProperty.call(e,"r")?"rgb":Object.prototype.hasOwnProperty.call(e,"w")?"hwb":Object.prototype.hasOwnProperty.call(e,"v")?"hsv":"hsl"}(e);return{format:a,color:e}}if(W(e))return{format:"hex",color:e};if(!e.includes("(")){const a=document.createElement("canvas").getContext("2d");a.fillStyle=e;const r=a.fillStyle;return"#000000"===r&&"black"!==e?null:{format:"hex",color:r}}const[a,r]=e.split("("),t=a.substring(0,3),n=r.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");3===n.length&&n.push("1");const o=t.split("").concat("a"),c=Object.fromEntries(o.map(((e,a)=>[e,C[t][e].from(n[a])])));return{format:t,color:c}}const K=["hex","hsl","hwb","rgb"],_=["show","hide"],B={class:"vacp-range-input-group"},R=["for"],X={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},Y=f("Hue"),G=["id","value"],J=["for"],Q={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},V=f("Alpha"),Z=["id","value"],ee=f(" Copy color "),ae={class:"vacp-color-inputs"},re={class:"vacp-color-input-group"},te=["for"],ne=l("span",{class:"vacp-color-input-label-text"}," Hex ",-1),oe=["id","value"],ce=["id","for","onInput"],ie={class:"vacp-color-input-label-text"},le=["id","value","onInput"],se=f(" Switch format ");var pe={__name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:"#ffffffff"},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>K,validator:e=>e.length>0&&e.every((e=>K.includes(e)))},defaultFormat:{type:String,required:!1,default:"hsl",validator:e=>K.includes(e)},alphaChannel:{type:String,required:!1,default:"show",validator:e=>_.includes(e)}},emits:["color-change"],setup(f,{emit:b}){const m=f,x=e(null),k=e(null),w=e(null),y=e(!1),$=e(m.defaultFormat),z=a({hex:"#ffffffff",hsl:{h:0,s:0,l:1,a:1},hsv:{h:0,s:0,v:1,a:1},hwb:{h:0,w:1,b:0,a:1},rgb:{r:1,g:1,b:1,a:1}}),A=r((function(){const e=Object.keys(z[$.value]);return"hex"!==$.value&&"hide"===m.alphaChannel?e.slice(0,3):e})),N=r((function(){return"hide"===m.alphaChannel&&[5,9].includes(z.hex.length)?z.hex.substring(0,z.hex.length-(z.hex.length-1)/4):z.hex}));function S(){const e=(m.visibleFormats.findIndex((e=>e===$.value))+1)%m.visibleFormats.length;$.value=m.visibleFormats[e]}function E(e){y.value=!0,M(e)}function L(e){y.value=!0,I(e)}function F(){y.value=!1}function M(e){1===e.buttons&&!1!==y.value&&k.value instanceof HTMLElement&&j(k.value,e.clientX,e.clientY)}function I(e){if(!1===y.value||!(k.value instanceof HTMLElement))return;e.preventDefault();const a=e.touches[0];j(k.value,a.clientX,a.clientY)}function j(e,a,r){const t=function(e,a,r){const t=e.getBoundingClientRect(),n=a-t.left,o=r-t.top;return{x:g(n/t.width,0,1),y:g(1-o/t.height,0,1)}}(e,a,r),n=H(z.hsv);n.s=t.x,n.v=t.y,pe("hsv",n)}function P(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key))return;e.preventDefault();const a=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,r=["ArrowLeft","ArrowRight"].includes(e.key)?"s":"v",t=e.shiftKey?10:1,n=z.hsv[r]+a*t*.01,o=H(z.hsv);o[r]=g(n,0,1),pe("hsv",o)}function O(e){const a=q(e);null!==a&&pe(a.format,a.color)}function D(e){const a=e.currentTarget,r=H(z.hsv);r.h=parseInt(a.value)/360,pe("hsv",r)}function K(e){const a=e.currentTarget,r=H(z.hsv);r.a=parseInt(a.value)/100,pe("hsv",r)}function _(e,a){const r=e.target,t=H(z[$.value]),n=C[$.value][a].from(r.value);Number.isNaN(n)||void 0===n||(t[a]=n,pe($.value,t))}function pe(e,a){let r=a;if("hide"===m.alphaChannel)if("string"!=typeof a)a.a=1,r=a;else if([5,9].includes(a.length)){const e=(a.length-1)/4;r=a.substring(0,a.length-e)+"f".repeat(e)}else[4,7].includes(a.length)&&(r=a+"f".repeat((a.length-1)/3));if(!function(e,a){if("string"==typeof e||"string"==typeof a)return e===a;for(const r in e)if(e[r]!==a[r])return!1;return!0}(z[e],r)){!function(e,a){z[e]=a;for(const[a,r]of T[e])z[a]=r(z[e])}(e,r);const a=function(){const e="hide"===m.alphaChannel,a=U(z[$.value],$.value,e);return{colors:z,cssColor:a}}();b("color-change",a)}!function(){if(!(x.value instanceof HTMLElement&&k.value instanceof HTMLElement&&w.value instanceof HTMLElement))return;x.value.style.setProperty("--vacp-hsl-h",String(z.hsl.h)),x.value.style.setProperty("--vacp-hsl-s",String(z.hsl.s)),x.value.style.setProperty("--vacp-hsl-l",String(z.hsl.l)),x.value.style.setProperty("--vacp-hsl-a",String(z.hsl.a)),k.value.setAttribute("style","\n    position: relative;\n    background-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n    background-image:\n      linear-gradient(to top, #000, transparent),  /* 2. */\n      linear-gradient(to right, #fff, transparent) /* 2. */\n    ;\n  "),w.value.setAttribute("style",`\n    box-sizing: border-box;\n    position: absolute;\n    left: ${100*z.hsv.s}%;   /* 3. */\n    bottom: ${100*z.hsv.v}%; /* 3. */\n  `)}()}async function ue(){const e=z[$.value],a="hide"===m.alphaChannel,r=U(e,$.value,a);await window.navigator.clipboard.writeText(r)}function ve(e,a){return C[e][a].to(z[e][a])}function he(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key)||!e.shiftKey)return;const a=e.currentTarget,r=parseFloat(a.step),t=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,n=g(parseFloat(a.value)+t*r*10,parseInt(a.min),parseInt(a.max));a.value=String(n-t*r)}return t((()=>m.color),O),n((function(){document.addEventListener("mousemove",M,{passive:!1}),document.addEventListener("touchmove",I,{passive:!1}),document.addEventListener("mouseup",F),document.addEventListener("touchend",F),O(m.color)})),o((function(){document.removeEventListener("mousemove",M),document.removeEventListener("touchmove",I),document.removeEventListener("mouseup",F),document.removeEventListener("touchend",F)})),(e,a)=>(c(),i("div",{ref_key:"colorPicker",ref:x,class:"vacp-color-picker"},[l("div",{ref_key:"colorSpace",ref:k,class:"vacp-color-space",onMousedown:E,onTouchstart:L},[l("div",{ref_key:"thumb",ref:w,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:P},null,544)],544),l("div",B,[l("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${f.id}-hue-slider`},[l("span",X,[s(e.$slots,"hue-range-input-label",{},(()=>[Y]))]),l("input",{id:`${f.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*z.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:he,onInput:D},null,40,G)],8,R),"show"===f.alphaChannel?(c(),i("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${f.id}-alpha-slider`},[l("span",Q,[s(e.$slots,"alpha-range-input-label",{},(()=>[V]))]),l("input",{id:`${f.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*z.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:he,onInput:K},null,40,Z)],8,J)):p("",!0)]),l("button",{class:"vacp-copy-button",type:"button",onClick:ue},[s(e.$slots,"copy-button",{},(()=>[ee]))]),l("div",ae,[l("div",re,["hex"===$.value?(c(),i("label",{key:0,class:"vacp-color-input-label",for:`${f.id}-color-hex`},[ne,l("input",{id:`${f.id}-color-hex`,class:"vacp-color-input",type:"text",value:u(N),onInput:a[0]||(a[0]=e=>function(e){const a=e.target;W(a.value)&&pe("hex",a.value)}(e))},null,40,oe)],8,te)):(c(!0),i(v,{key:1},h(u(A),(e=>(c(),i("label",{id:`${f.id}-color-${$.value}-${e}`,key:`${f.id}-color-${$.value}-${e}`,class:"vacp-color-input-label",for:`${f.id}-color-${$.value}`,onInput:a=>_(a,e)},[l("span",ie,d(e.toUpperCase()),1),l("input",{id:`${f.id}-color-${$.value}`,class:"vacp-color-input",type:"text",value:ve($.value,e),onInput:a=>_(a,e)},null,40,le)],40,ce)))),128))]),f.visibleFormats.length>1?(c(),i("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:S},[s(e.$slots,"format-switch-button",{},(()=>[se]))])):p("",!0)])],512))}};!function(e,a){void 0===a&&(a={});var r=a.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('.vacp-color-picker{--vacp-color:hsl(calc(var(--vacp-hsl-h) * 360) calc(var(--vacp-hsl-s) * 100%) calc(var(--vacp-hsl-l) * 100%) / var(--vacp-hsl-a));--vacp-focus-color:dodgerblue;--vacp-color-space-width:300px;--vacp-spacing:6px;--vacp-tiled-background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);max-width:var(--vacp-color-space-width);padding:var(--vacp-spacing);display:grid;grid-gap:var(--vacp-spacing);grid-template-columns:1fr min-content;grid-template-areas:"color-space color-space" "range-inputs copy-button" "color-inputs color-inputs";font-size:.8em;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;background-color:#fff}.vacp-color-picker *,.vacp-color-picker ::after,.vacp-color-picker ::before{box-sizing:border-box}.vacp-color-picker button::-moz-focus-inner{border:none;padding:0}.vacp-color-picker :focus{outline:2px solid var(--vacp-focus-color)}.vacp-color-space{grid-area:color-space;overflow:hidden;height:calc(var(--vacp-color-space-width) * .6)}.vacp-color-space-thumb{--vacp-thumb-size:calc(var(--vacp-spacing) * 4);width:var(--vacp-thumb-size);height:var(--vacp-thumb-size);margin-left:calc(-1 * var(--vacp-thumb-size)/ 2);margin-bottom:calc(-1 * var(--vacp-thumb-size)/ 2);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000}.vacp-color-space-thumb:focus{outline-color:transparent;box-shadow:0 0 0 1px #000,0 0 0 3px var(--vacp-focus-color)}.vacp-range-input-label{--vacp-slider-track-width:100%;--vacp-slider-track-height:calc(var(--vacp-spacing) * 3);--vacp-slider-thumb-size:calc(var(--vacp-slider-track-height) + var(--vacp-spacing));display:block}.vacp-range-input-group{grid-area:range-inputs;display:flex;flex-direction:column;justify-content:center}.vacp-range-input-group>:not(:first-child){margin-top:var(--vacp-spacing)}.vacp-range-input,.vacp-range-input::-webkit-slider-thumb{-webkit-appearance:none}.vacp-range-input{display:block;width:var(--vacp-slider-track-width);height:var(--vacp-slider-track-height);margin-right:0;margin-left:0;margin-top:calc(var(--vacp-spacing)/ 2);margin-bottom:calc(var(--vacp-spacing)/ 2);padding:0;border:none;background:0 0}.vacp-range-input:focus{outline:0}.vacp-range-input::-moz-focus-outer{border:none}.vacp-range-input--alpha{background-color:#fff;background-image:var(--vacp-tiled-background-image);background-size:calc(var(--vacp-spacing) * 2) calc(var(--vacp-spacing) * 2);background-position:0 0,var(--vacp-spacing) var(--vacp-spacing)}.vacp-range-input::-moz-range-track{display:block;box-sizing:border-box;height:var(--vacp-slider-track-height);border:none}.vacp-range-input::-webkit-slider-runnable-track{width:var(--vacp-slider-track-width);height:var(--vacp-slider-track-height);border:none}.vacp-range-input::-ms-track{width:var(--vacp-slider-track-width);height:var(--vacp-slider-track-height);border:none}.vacp-range-input:focus::-moz-range-track{border:1px solid var(--vacp-focus-color);outline:2px solid var(--vacp-focus-color)}.vacp-range-input:focus::-webkit-slider-runnable-track{border:1px solid var(--vacp-focus-color);outline:2px solid var(--vacp-focus-color)}.vacp-range-input:focus::-ms-track{border:1px solid var(--vacp-focus-color);outline:2px solid var(--vacp-focus-color)}.vacp-range-input--alpha::-moz-range-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--alpha::-webkit-slider-runnable-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--alpha::-ms-track{background-image:linear-gradient(to right,transparent,var(--vacp-color))}.vacp-range-input--hue::-moz-range-track{background-image:linear-gradient(to right,red calc(100% * 0/360),#ff0 calc(100% * 60/360),#0f0 calc(100% * 120/360),#0ff calc(100% * 180/360),#00f calc(100% * 240/360),#f0f calc(100% * 300/360),red calc(100% * 360/360))}.vacp-range-input--hue::-webkit-slider-runnable-track{background-image:linear-gradient(to right,red calc(100% * 0/360),#ff0 calc(100% * 60/360),#0f0 calc(100% * 120/360),#0ff calc(100% * 180/360),#00f calc(100% * 240/360),#f0f calc(100% * 300/360),red calc(100% * 360/360))}.vacp-range-input--hue::-ms-track{background-image:linear-gradient(to right,red calc(100% * 0/360),#ff0 calc(100% * 60/360),#0f0 calc(100% * 120/360),#0ff calc(100% * 180/360),#00f calc(100% * 240/360),#f0f calc(100% * 300/360),red calc(100% * 360/360))}.vacp-range-input::-moz-range-thumb{box-sizing:border-box;width:var(--vacp-slider-thumb-size);height:var(--vacp-slider-thumb-size);border:3px solid #fff;border-radius:50%;background-color:transparent;box-shadow:0 0 0 1px #000;transform:rotate(0)}.vacp-range-input::-webkit-slider-thumb{width:var(--vacp-slider-thumb-size);height:var(--vacp-slider-thumb-size);margin-top:calc((var(--vacp-slider-track-height) - var(--vacp-slider-thumb-size))/ 2);border:3px solid #fff;border-radius:50%;background-color:transparent;box-shadow:0 0 0 1px #000;transform:rotate(0)}.vacp-range-input::-ms-thumb{width:var(--vacp-slider-thumb-size);height:var(--vacp-slider-thumb-size);margin-top:0;border:3px solid #fff;border-radius:50%;background-color:transparent;box-shadow:0 0 0 1px #000;transform:rotate(0)}.vacp-copy-button{grid-area:copy-button;justify-self:center;align-self:center;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:calc(var(--vacp-spacing) * 6);height:calc(var(--vacp-spacing) * 6);border:1px solid transparent;border-radius:50%;color:#fff;background-color:#fff;background-image:linear-gradient(var(--vacp-color),var(--vacp-color)),var(--vacp-tiled-background-image);background-size:calc(var(--vacp-spacing) * 2) calc(var(--vacp-spacing) * 2);background-position:0 0,var(--vacp-spacing) var(--vacp-spacing)}.vacp-copy-button:enabled:not(:hover) svg{display:none}.vacp-copy-button:enabled:focus{outline:0;box-shadow:0 0 0 2px var(--vacp-focus-color);border-color:var(--vacp-focus-color)}.vacp-copy-button:enabled:hover{background-color:var(--vacp-color);background-image:linear-gradient(rgb(0 0 0 / .25),rgb(0 0 0 / .25))}.vacp-color-inputs{grid-area:color-inputs;display:flex;align-items:center}.vacp-color-inputs>:not(:first-child){margin-left:var(--vacp-spacing)}.vacp-color-input-group{flex-grow:1;display:flex}.vacp-color-input-label{flex-grow:1;text-align:center}.vacp-color-input-label:not(:first-child){margin-left:var(--vacp-spacing)}.vacp-color-input{width:100%;margin:0;margin-top:calc(var(--vacp-spacing)/ 2);padding:var(--vacp-spacing);border:1px solid #ccc;font:inherit;text-align:center;color:inherit;background-color:#fff}.vacp-color-input:enabled:focus{border-color:var(--vacp-focus-color)}.vacp-format-switch-button{display:flex;justify-content:center;align-items:center;margin:0;padding:var(--vacp-spacing);border:1px solid transparent;font:inherit;color:inherit;background-color:#fff}.vacp-format-switch-button:enabled:focus{border-color:var(--vacp-focus-color)}.vacp-format-switch-button:enabled:hover{background-color:#eee}');const ue={install(e){e.component("ColorPicker",pe)}};export{pe as ColorPicker,ue as default};

package.json

 {
   "name": "vue-accessible-color-picker",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "license": "MIT",
@@ -55,3 +55,3 @@ "description": "Accessible color picker component for Vue.js",
   "devDependencies": {
-    "@commitlint/cli": "^17.1.1",
+    "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
@@ -66,6 +66,6 @@ "@semantic-release/changelog": "^6.0.1",
     "@vitest/coverage-c8": "^0.22.1",
-    "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
     "c8": "^7.12.0",
     "canvas": "^2.9.3",
+    "clean-css": "^5.3.1",
     "eslint": "^8.23.0",
@@ -78,3 +78,3 @@ "eslint-config-standard": "^17.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.78.1",
+    "rollup": "^2.79.0",
     "rollup-plugin-postcss": "^4.0.2",
@@ -81,0 +81,0 @@ "rollup-plugin-terser": "^7.0.2",

README.md

 # vue-accessible-color-picker
 
-[![Tests passing](https://github.com/kleinfreund/vue-accessible-color-picker/workflows/tests/badge.svg)](https://github.com/kleinfreund/vue-accessible-color-picker/actions)
+[![Tests passing](https://github.com/kleinfreund/vue-accessible-color-picker/workflows/main/badge.svg)](https://github.com/kleinfreund/vue-accessible-color-picker/actions)
 
@@ -36,3 +36,2 @@ A color picker component for Vue.js 3.
     - [format-switch-button](#format-switch-button)
-- [Browser support](#browser-support)
 - [Versioning](#versioning)
@@ -98,3 +97,3 @@ - [Design](#design)
 - **Required**: `false`
-- **Default**: `null`
+- **Default**: `#ffffffff`
 - **Usage**:
@@ -225,3 +224,3 @@
 
-- **Description**: Overrides the content of the hue range input’s `label` element. The slot content is placed inside a `span` element.
+- **Description**: Overrides the content of the hue range input’s `label` element.
 - **Default content**:
@@ -233,3 +232,3 @@
 
-- **Description**: Overrides the content of the alpha range input’s `label` element. The slot content is placed inside a `span` element.
+- **Description**: Overrides the content of the alpha range input’s `label` element.
 - **Default content**:
@@ -253,10 +252,2 @@
 
-## Browser support
-
-| Edge (Chromium) | Firefox | Chrome | Safari |
-|:---------------:|:-------:|:------:|:------:|
-| 79              | 63      | 73     | 12.2   |
-
-The browser support is derived from the use of [Object.fromEntries()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) and [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*).
-
 ## Versioning
@@ -274,3 +265,3 @@
 
-  The HSV cylinder is more convenient for this task as it shows a color at 100% saturation and 100% value in the top right corner (i.e. one can drag the color space thumb into the corner as a quasi shortcut). The HSL cylinder’s slice has this color at the halfway point of the Y axis (i.e. at 50% lightness) which isn’t easy to select.
+  The HSV cylinder is more convenient for this task than the HSL cylinder as it shows a color at 100% saturation and 100% value in the top right corner (i.e. one can drag the color space thumb into the corner as a quasi shortcut). The HSL cylinder’s slice has this color at the halfway point of the Y axis (i.e. at 50% lightness) which isn’t easy to select.
 
@@ -277,0 +268,0 @@ - **Hue slider**:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

42329

decreased by-8.11%

Lines of code

147

decreased by-5.77%

Number of lines in readme file

281

decreased by-3.1%

No dependency changes