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

Comparing version 4.1.3 to 4.1.4

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 i,renderSlot as u,createTextVNode as c,createCommentVNode as h,Fragment as v,renderList as p,toDisplayString as f}from"vue";function d(e,t,n){return Math.max(t,Math.min(e,n))}function g(e,t=2){return e.toFixed(t).replace(/\.?0+$/,"")}function b(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360}function m(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:d(n,0,100)/100}function y(e){return g(100*e)+"%"}function x(e){if(e.endsWith("%"))return w(e);if(e.endsWith("."))return NaN;const t=parseFloat(e);return Number.isNaN(t)?NaN:d(t,0,255)/255}function $(e){return g(255*e)}function k(e){return e.endsWith("%")?w(e):d(parseFloat(e),0,1)}function C(e){return String(e)}const N={hsl:{h:{to:m,from:b},s:{to:y,from:w},l:{to:y,from:w},a:{to:C,from:k}},hwb:{h:{to:m,from:b},w:{to:y,from:w},b:{to:y,from:w},a:{to:C,from:k}},rgb:{r:{to:$,from:x},g:{to:$,from:x},b:{to:$,from:x},a:{to:C,from:k}}};function M(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 F(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:A(n,t,e.h+1/3),g:A(n,t,e.h),b:A(n,t,e.h-1/3),a:e.a}}function A(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 L(e){return{r:S(5,e),g:S(3,e),b:S(1,e),a:e.a}}function S(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 E(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 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 P(e){const t=I(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 O(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 T={hex:[["hsl",e=>j(e,[M,P])],["hsv",e=>j(e,[M,I,E])],["hwb",e=>j(e,[M,I])],["rgb",M]],hsl:[["hex",e=>j(e,[F,O])],["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=>j(e,[F,I])],["rgb",F]],hsv:[["hex",e=>j(e,[L,O])],["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",L]],hwb:[["hex",e=>j(e,[E,L,O])],["hsl",e=>j(e,[E,L,P])],["hsv",E],["rgb",e=>j(e,[E,L])]],rgb:[["hex",O],["hsl",P],["hsv",e=>j(e,[I,E])],["hwb",I]]};function j(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 _={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 z(e,t,n){return _[t](e,n)}function D(e){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e)}function W(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(D(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+"a").split(""),l=Object.fromEntries(a.map(((e,t)=>[e,N[r][e].from(o[t])])));return{format:r,color:l}}const K=["hex","hsl","hwb","rgb"],R=["show","hide"],U={class:"vacp-range-input-group"},B=["for"],X={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},Y=["id","value"],q=["for"],G={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},J=["id","value"],Q=i("span",{class:"vacp-visually-hidden"},"Copy color",-1),V=i("svg",{class:"vacp-icon",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"24",height:"24",viewBox:"0 0 32 32"},[i("path",{d:"M25.313 28v-18.688h-14.625v18.688h14.625zM25.313 6.688c1.438 0 2.688 1.188 2.688 2.625v18.688c0 1.438-1.25 2.688-2.688 2.688h-14.625c-1.438 0-2.688-1.25-2.688-2.688v-18.688c0-1.438 1.25-2.625 2.688-2.625h14.625zM21.313 1.313v2.688h-16v18.688h-2.625v-18.688c0-1.438 1.188-2.688 2.625-2.688h16z",fill:"currentColor"})],-1),Z={class:"vacp-color-inputs"},ee={class:"vacp-color-input-group"},te=["for"],ne=i("span",{class:"vacp-color-input-label-text"}," Hex ",-1),re=["id","value"],oe=["id","for","onInput"],ae={class:"vacp-color-input-label-text"},le=["id","value","onInput"],se=i("span",{class:"vacp-visually-hidden"},"Switch format",-1),ie=i("svg",{class:"vacp-icon","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"15"},[i("path",{d:"M8 15l5-5-1-1-4 2-4-2-1 1zm4-9l1-1-5-5-5 5 1 1 4-2z",fill:"currentColor"})],-1);var ue={__name:"ColorPicker",props:{color:{type:[String,Object],default:"#ffffffff"},id:{type:String,default:"color-picker"},visibleFormats:{type:Array,default:()=>K,validator:e=>e.length>0&&e.every((e=>K.includes(e)))},defaultFormat:{type:String,default:"hsl",validator:e=>K.includes(e)},alphaChannel:{type:String,default:"show",validator:e=>R.includes(e)}},emits:["color-change"],setup(g,{emit:b}){const m=g,w=e(null),y=e(null),x=e(null),$=e(!1),k=e(m.visibleFormats.includes(m.defaultFormat)?m.defaultFormat:m.visibleFormats[0]),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}}),M=n((function(){const e=Object.keys(C[k.value]);return"hex"!==k.value&&"hide"===m.alphaChannel?e.slice(0,3):e})),F=n((function(){return"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 e=(m.visibleFormats.findIndex((e=>e===k.value))+1)%m.visibleFormats.length;k.value=m.visibleFormats[e]}function L(e){$.value=!0,I(e)}function S(e){$.value=!0,P(e)}function E(){$.value=!1}function I(e){1===e.buttons&&!1!==$.value&&y.value instanceof HTMLElement&&O(y.value,e.clientX,e.clientY)}function P(e){if(!1===$.value||!(y.value instanceof HTMLElement))return;e.preventDefault();const t=e.touches[0];O(y.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:0===r.width?0:d(o/r.width,0,1),y:0===r.height?0:d(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 j(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]=d(o,0,1),ce("hsv",a)}function _(e){const t=W(e);null!==t&&ce(t.format,t.color)}function K(e,t){const n=e.currentTarget,r=H(C.hsv);r[t]=parseInt(n.value)/parseInt(n.max),ce("hsv",r)}function R(e){const t=e.target;D(t.value)&&ce("hex",t.value)}function ue(e,t){const n=e.target,r=H(C[k.value]),o=N[k.value][t].from(n.value);Number.isNaN(o)||void 0===o||(r[t]=o,ce(k.value,r))}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)){!function(e,t){C[e]=t;for(const[t,n]of T[e])C[t]=n(C[e])}(e,n);const t=function(){const e="hide"===m.alphaChannel,t=z(C[k.value],k.value,e);return{colors:C,cssColor:t}}();b("color-change",t)}!function(){if(!(w.value instanceof HTMLElement&&y.value instanceof HTMLElement&&x.value instanceof HTMLElement))return;w.value.style.setProperty("--vacp-hsl-h",String(C.hsl.h)),w.value.style.setProperty("--vacp-hsl-s",String(C.hsl.s)),w.value.style.setProperty("--vacp-hsl-l",String(C.hsl.l)),w.value.style.setProperty("--vacp-hsl-a",String(C.hsl.a)),y.value.style.position="relative",y.value.style.backgroundColor="hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%)",y.value.style.backgroundImage="linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",x.value.style.boxSizing="border-box",x.value.style.position="absolute",x.value.style.left=100*C.hsv.s+"%",x.value.style.bottom=100*C.hsv.v+"%"}()}async function he(){const e=C[k.value],t="hide"===m.alphaChannel,n=z(e,k.value,t);await window.navigator.clipboard.writeText(n)}function ve(e,t){return N[e][t].to(C[e][t])}function pe(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=d(parseFloat(t.value)+r*n*10,parseInt(t.min),parseInt(t.max));t.value=String(o-r*n)}return r((()=>m.color),_),o((function(){document.addEventListener("mousemove",I,{passive:!1}),document.addEventListener("touchmove",P,{passive:!1}),document.addEventListener("mouseup",E),document.addEventListener("touchend",E),_(m.color)})),a((function(){document.removeEventListener("mousemove",I),document.removeEventListener("touchmove",P),document.removeEventListener("mouseup",E),document.removeEventListener("touchend",E)})),(e,t)=>(l(),s("div",{ref_key:"colorPicker",ref:w,class:"vacp-color-picker"},[i("div",{ref_key:"colorSpace",ref:y,class:"vacp-color-space",onMousedown:L,onTouchstart:S},[i("div",{ref_key:"thumb",ref:x,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:j},null,544)],544),i("div",U,[i("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${g.id}-hue-slider`},[i("span",X,[u(e.$slots,"hue-range-input-label",{},(()=>[c("Hue")]))]),i("input",{id:`${g.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:pe,onInput:t[0]||(t[0]=e=>K(e,"h"))},null,40,Y)],8,B),"show"===g.alphaChannel?(l(),s("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${g.id}-alpha-slider`},[i("span",G,[u(e.$slots,"alpha-range-input-label",{},(()=>[c("Alpha")]))]),i("input",{id:`${g.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:pe,onInput:t[1]||(t[1]=e=>K(e,"a"))},null,40,J)],8,q)):h("v-if",!0)]),i("button",{class:"vacp-copy-button",type:"button",onClick:he},[u(e.$slots,"copy-button",{},(()=>[Q,V]))]),i("div",Z,[i("div",ee,["hex"===k.value?(l(),s("label",{key:0,class:"vacp-color-input-label",for:`${g.id}-color-hex`},[ne,i("input",{id:`${g.id}-color-hex`,class:"vacp-color-input",type:"text",value:F.value,onInput:R},null,40,re)],8,te)):(l(!0),s(v,{key:1},p(M.value,(e=>(l(),s("label",{id:`${g.id}-color-${k.value}-${e}-label`,key:`${g.id}-color-${k.value}-${e}-label`,class:"vacp-color-input-label",for:`${g.id}-color-${k.value}-${e}`,onInput:t=>ue(t,e)},[i("span",ae,f(e.toUpperCase()),1),i("input",{id:`${g.id}-color-${k.value}-${e}`,class:"vacp-color-input",type:"text",value:ve(k.value,e),onInput:t=>ue(t,e)},null,40,le)],40,oe)))),128))]),g.visibleFormats.length>1?(l(),s("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:A},[u(e.$slots,"format-switch-button",{},(()=>[se,ie]))])):h("v-if",!0)])],512))},__file:"src/ColorPicker.vue"};const ce={install(e){e.component("ColorPicker",ue)}};export{ue as ColorPicker,ce 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 i,renderSlot as u,createTextVNode as c,createCommentVNode as h,Fragment as p,renderList as v,toDisplayString as f}from"vue";function d(t,e,n){return Math.max(e,Math.min(t,n))}function g(t,e=2){return t.toFixed(e).replace(/\.?0+$/,"")}function b(t){if(t.endsWith("."))return NaN;return(parseFloat(t)%360+360)%360/360}function m(t){return g(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:d(n,0,100)/100}function y(t){return g(100*t)+"%"}function x(t){if(t.endsWith("%"))return w(t);if(t.endsWith("."))return NaN;const e=parseFloat(t);return Number.isNaN(e)?NaN:d(e,0,255)/255}function $(t){return g(255*t)}function k(t){return t.endsWith("%")?w(t):d(parseFloat(t),0,1)}function C(t){return String(t)}const N={hsl:{h:{to:m,from:b},s:{to:y,from:w},l:{to:y,from:w},a:{to:C,from:k}},hwb:{h:{to:m,from:b},w:{to:y,from:w},b:{to:y,from:w},a:{to:C,from:k}},rgb:{r:{to:$,from:x},g:{to:$,from:x},b:{to:$,from:x},a:{to:C,from:k}}};function M(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:A(n,e,t.h+1/3),g:A(n,e,t.h),b:A(n,e,t.h-1/3),a:t.a}}function A(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 L(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 E(t){return{h:t.h,s:1===t.b?0:1-t.w/(1-t.b),v:1-t.b,a:t.a}}function I(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 P(t){const e=I(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 O(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 T={hex:[["hsl",t=>j(t,[M,P])],["hsv",t=>j(t,[M,I,E])],["hwb",t=>j(t,[M,I])],["rgb",M]],hsl:[["hex",t=>j(t,[F,O])],["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=>j(t,[F,I])],["rgb",F]],hsv:[["hex",t=>j(t,[L,O])],["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",L]],hwb:[["hex",t=>j(t,[E,L,O])],["hsl",t=>j(t,[E,L,P])],["hsv",E],["rgb",t=>j(t,[E,L])]],rgb:[["hex",O],["hsl",P],["hsv",t=>j(t,[I,E])],["hwb",I]]};function j(t,e){return e.reduce(((t,e)=>e(t)),t)}function H(t){const e={};for(const n in t)e[n]=t[n];return e}const _={hex:(t,e)=>e&&[5,9].includes(t.length)?t.substring(0,t.length-(t.length-1)/4):t,hsl:(t,e)=>`hsl(${g(360*t.h)} ${g(100*t.s)}% ${g(100*t.l)}%`+(e?")":` / ${g(t.a)})`),hwb:(t,e)=>`hwb(${g(360*t.h)} ${g(100*t.w)}% ${g(100*t.b)}%`+(e?")":` / ${g(t.a)})`),rgb:(t,e)=>`rgb(${g(255*t.r)} ${g(255*t.g)} ${g(255*t.b)}`+(e?")":` / ${g(t.a)})`)};function z(t,e,n){return _[e](t,n)}function D(t){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(t)}function W(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(D(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+"a").split(""),l=Object.fromEntries(a.map(((t,e)=>[t,N[r][t].from(o[e])])));return{format:r,color:l}}const K=["hex","hsl","hwb","rgb"],R=["show","hide"],U={class:"vacp-range-input-group"},B=["for"],X={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},Y=["id","value"],q=["for"],G={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},J=["id","value"],Q=i("span",{class:"vacp-visually-hidden"},"Copy color",-1),V=i("svg",{class:"vacp-icon",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"24",height:"24",viewBox:"0 0 32 32"},[i("path",{d:"M25.313 28v-18.688h-14.625v18.688h14.625zM25.313 6.688c1.438 0 2.688 1.188 2.688 2.625v18.688c0 1.438-1.25 2.688-2.688 2.688h-14.625c-1.438 0-2.688-1.25-2.688-2.688v-18.688c0-1.438 1.25-2.625 2.688-2.625h14.625zM21.313 1.313v2.688h-16v18.688h-2.625v-18.688c0-1.438 1.188-2.688 2.625-2.688h16z",fill:"currentColor"})],-1),Z={class:"vacp-color-inputs"},tt={class:"vacp-color-input-group"},et=["for"],nt=i("span",{class:"vacp-color-input-label-text"}," Hex ",-1),rt=["id","value"],ot=["id","for","onInput"],at={class:"vacp-color-input-label-text"},lt=["id","value","onInput"],st=i("span",{class:"vacp-visually-hidden"},"Switch format",-1),it=i("svg",{class:"vacp-icon","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"15"},[i("path",{d:"M8 15l5-5-1-1-4 2-4-2-1 1zm4-9l1-1-5-5-5 5 1 1 4-2z",fill:"currentColor"})],-1);var ut={__name:"ColorPicker",props:{color:{type:[String,Object],default:"#ffffffff"},id:{type:String,default:"color-picker"},visibleFormats:{type:Array,default:()=>K,validator:t=>t.length>0&&t.every((t=>K.includes(t)))},defaultFormat:{type:String,default:"hsl",validator:t=>K.includes(t)},alphaChannel:{type:String,default:"show",validator:t=>R.includes(t)}},emits:["color-change"],setup(g,{emit:b}){const m=g,w=t(null),y=t(null),x=t(null);let $=!1;const k=t(m.visibleFormats.includes(m.defaultFormat)?m.defaultFormat:m.visibleFormats[0]),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}}),M=n((function(){const t=Object.keys(C[k.value]);return"hex"!==k.value&&"hide"===m.alphaChannel?t.slice(0,3):t})),F=n((function(){return"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 t=(m.visibleFormats.findIndex((t=>t===k.value))+1)%m.visibleFormats.length;k.value=m.visibleFormats[t]}function L(t){$=!0,I(t)}function S(t){$=!0,P(t)}function E(){$=!1}function I(t){1===t.buttons&&!1!==$&&y.value instanceof HTMLElement&&O(y.value,t.clientX,t.clientY)}function P(t){if(!1===$||!(y.value instanceof HTMLElement))return;t.preventDefault();const e=t.touches[0];O(y.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:0===r.width?0:d(o/r.width,0,1),y:0===r.height?0:d(1-a/r.height,0,1)}}(t,e,n),o=H(C.hsv);o.s=r.x,o.v=r.y,ct("hsv",o)}function j(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=C.hsv[n]+e*r*.01,a=H(C.hsv);a[n]=d(o,0,1),ct("hsv",a)}function _(t){const e=W(t);null!==e&&ct(e.format,e.color)}function K(t,e){const n=t.currentTarget,r=H(C.hsv);r[e]=parseInt(n.value)/parseInt(n.max),ct("hsv",r)}function R(t){const e=t.target;D(e.value)&&ct("hex",e.value)}function ut(t,e){const n=t.target,r=H(C[k.value]),o=N[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}(C[t],n)){!function(t,e){C[t]=e;for(const[e,n]of T[t])C[e]=n(C[t])}(t,n);const e=function(){const t="hide"===m.alphaChannel,e=z(C[k.value],k.value,t);return{colors:C,cssColor:e}}();b("color-change",e)}!function(){if(!(w.value instanceof HTMLElement&&y.value instanceof HTMLElement&&x.value instanceof HTMLElement))return;w.value.style.setProperty("--vacp-hsl-h",String(C.hsl.h)),w.value.style.setProperty("--vacp-hsl-s",String(C.hsl.s)),w.value.style.setProperty("--vacp-hsl-l",String(C.hsl.l)),w.value.style.setProperty("--vacp-hsl-a",String(C.hsl.a)),y.value.style.position="relative",y.value.style.backgroundColor="hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%)",y.value.style.backgroundImage="linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",x.value.style.boxSizing="border-box",x.value.style.position="absolute",x.value.style.left=100*C.hsv.s+"%",x.value.style.bottom=100*C.hsv.v+"%"}()}async function ht(){const t=C[k.value],e="hide"===m.alphaChannel,n=z(t,k.value,e);await window.navigator.clipboard.writeText(n)}function pt(t,e){return N[t][e].to(C[t][e])}function vt(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=d(parseFloat(e.value)+r*n*10,parseInt(e.min),parseInt(e.max));e.value=String(o-r*n)}return r((()=>m.color),_),o((function(){document.addEventListener("mousemove",I,{passive:!1}),document.addEventListener("touchmove",P,{passive:!1}),document.addEventListener("mouseup",E),document.addEventListener("touchend",E),_(m.color)})),a((function(){document.removeEventListener("mousemove",I),document.removeEventListener("touchmove",P),document.removeEventListener("mouseup",E),document.removeEventListener("touchend",E)})),(t,e)=>(l(),s("div",{ref_key:"colorPicker",ref:w,class:"vacp-color-picker"},[i("div",{ref_key:"colorSpace",ref:y,class:"vacp-color-space",onMousedown:L,onTouchstart:S},[i("div",{ref_key:"thumb",ref:x,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:j},null,544)],544),i("div",U,[i("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${g.id}-hue-slider`},[i("span",X,[u(t.$slots,"hue-range-input-label",{},(()=>[c("Hue")]))]),i("input",{id:`${g.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:vt,onInput:e[0]||(e[0]=t=>K(t,"h"))},null,40,Y)],8,B),"show"===g.alphaChannel?(l(),s("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${g.id}-alpha-slider`},[i("span",G,[u(t.$slots,"alpha-range-input-label",{},(()=>[c("Alpha")]))]),i("input",{id:`${g.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:vt,onInput:e[1]||(e[1]=t=>K(t,"a"))},null,40,J)],8,q)):h("v-if",!0)]),i("button",{class:"vacp-copy-button",type:"button",onClick:ht},[u(t.$slots,"copy-button",{},(()=>[Q,V]))]),i("div",Z,[i("div",tt,["hex"===k.value?(l(),s("label",{key:0,class:"vacp-color-input-label",for:`${g.id}-color-hex`},[nt,i("input",{id:`${g.id}-color-hex`,class:"vacp-color-input",type:"text",value:F.value,onInput:R},null,40,rt)],8,et)):(l(!0),s(p,{key:1},v(M.value,(t=>(l(),s("label",{id:`${g.id}-color-${k.value}-${t}-label`,key:`${g.id}-color-${k.value}-${t}-label`,class:"vacp-color-input-label",for:`${g.id}-color-${k.value}-${t}`,onInput:e=>ut(e,t)},[i("span",at,f(t.toUpperCase()),1),i("input",{id:`${g.id}-color-${k.value}-${t}`,class:"vacp-color-input",type:"text",value:pt(k.value,t),onInput:e=>ut(e,t)},null,40,lt)],40,ot)))),128))]),g.visibleFormats.length>1?(l(),s("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:A},[u(t.$slots,"format-switch-button",{},(()=>[st,it]))])):h("v-if",!0)])],512))},__file:"src/ColorPicker.vue"};const ct={install(t){t.component("ColorPicker",ut)}};export{ut as ColorPicker,ct as default};

dist/vue-accessible-color-picker.js

@@ -1,1 +0,1 @@
-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,createTextVNode as p,createCommentVNode as u,Fragment as v,renderList as h,toDisplayString as d}from"vue";function f(e,a,r){return Math.max(a,Math.min(e,r))}function g(e,a=2){return e.toFixed(a).replace(/\.?0+$/,"")}function b(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360}function m(e){return g(360*e)}function w(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:f(r,0,100)/100}function x(e){return g(100*e)+"%"}function y(e){if(e.endsWith("%"))return w(e);if(e.endsWith("."))return NaN;const a=parseFloat(e);return Number.isNaN(a)?NaN:f(a,0,255)/255}function k(e){return g(255*e)}function $(e){return e.endsWith("%")?w(e):f(parseFloat(e),0,1)}function z(e){return String(e)}const C={hsl:{h:{to:m,from:b},s:{to:x,from:w},l:{to:x,from:w},a:{to:z,from:$}},hwb:{h:{to:m,from:b},w:{to:x,from:w},b:{to:x,from:w},a:{to:z,from:$}},rgb:{r:{to:k,from:y},g:{to:k,from:y},b:{to:k,from:y},a:{to:z,from:$}}};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:A(r,a,e.h+1/3),g:A(r,a,e.h),b:A(r,a,e.h-1/3),a:e.a}}function A(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 M(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 E(e){return{h:e.h,s:1===e.b?0:1-e.w/(1-e.b),v:1-e.b,a:e.a}}function L(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 I(e){const a=L(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 j(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 P={hex:[["hsl",e=>T(e,[N,I])],["hsv",e=>T(e,[N,L,E])],["hwb",e=>T(e,[N,L])],["rgb",N]],hsl:[["hex",e=>T(e,[S,j])],["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=>T(e,[S,L])],["rgb",S]],hsv:[["hex",e=>T(e,[M,j])],["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",M]],hwb:[["hex",e=>T(e,[E,M,j])],["hsl",e=>T(e,[E,M,I])],["hsv",E],["rgb",e=>T(e,[E,M])]],rgb:[["hex",j],["hsl",I],["hsv",e=>T(e,[L,E])],["hwb",L]]};function T(e,a){return a.reduce(((e,a)=>a(e)),e)}function O(e){const a={};for(const r in e)a[r]=e[r];return a}const H={hex:(e,a)=>a&&[5,9].includes(e.length)?e.substring(0,e.length-(e.length-1)/4):e,hsl:(e,a)=>`hsl(${g(360*e.h)} ${g(100*e.s)}% ${g(100*e.l)}%`+(a?")":` / ${g(e.a)})`),hwb:(e,a)=>`hwb(${g(360*e.h)} ${g(100*e.w)}% ${g(100*e.b)}%`+(a?")":` / ${g(e.a)})`),rgb:(e,a)=>`rgb(${g(255*e.r)} ${g(255*e.g)} ${g(255*e.b)}`+(a?")":` / ${g(e.a)})`)};function _(e,a,r){return H[a](e,r)}function D(e){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e)}function U(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(D(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+"a").split(""),c=Object.fromEntries(o.map(((e,a)=>[e,C[t][e].from(n[a])])));return{format:t,color:c}}const W=["hex","hsl","hwb","rgb"],B=["show","hide"],K={class:"vacp-range-input-group"},R=["for"],X={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},Y=["id","value"],q=["for"],G={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},J=["id","value"],Q=l("span",{class:"vacp-visually-hidden"},"Copy color",-1),V=l("svg",{class:"vacp-icon",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"24",height:"24",viewBox:"0 0 32 32"},[l("path",{d:"M25.313 28v-18.688h-14.625v18.688h14.625zM25.313 6.688c1.438 0 2.688 1.188 2.688 2.625v18.688c0 1.438-1.25 2.688-2.688 2.688h-14.625c-1.438 0-2.688-1.25-2.688-2.688v-18.688c0-1.438 1.25-2.625 2.688-2.625h14.625zM21.313 1.313v2.688h-16v18.688h-2.625v-18.688c0-1.438 1.188-2.688 2.625-2.688h16z",fill:"currentColor"})],-1),Z={class:"vacp-color-inputs"},ee={class:"vacp-color-input-group"},ae=["for"],re=l("span",{class:"vacp-color-input-label-text"}," Hex ",-1),te=["id","value"],ne=["id","for","onInput"],oe={class:"vacp-color-input-label-text"},ce=["id","value","onInput"],ie=l("span",{class:"vacp-visually-hidden"},"Switch format",-1),le=l("svg",{class:"vacp-icon","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"15"},[l("path",{d:"M8 15l5-5-1-1-4 2-4-2-1 1zm4-9l1-1-5-5-5 5 1 1 4-2z",fill:"currentColor"})],-1);var se={__name:"ColorPicker",props:{color:{type:[String,Object],default:"#ffffffff"},id:{type:String,default:"color-picker"},visibleFormats:{type:Array,default:()=>W,validator:e=>e.length>0&&e.every((e=>W.includes(e)))},defaultFormat:{type:String,default:"hsl",validator:e=>W.includes(e)},alphaChannel:{type:String,default:"show",validator:e=>B.includes(e)}},emits:["color-change"],setup(g,{emit:b}){const m=g,w=e(null),x=e(null),y=e(null),k=e(!1),$=e(m.visibleFormats.includes(m.defaultFormat)?m.defaultFormat:m.visibleFormats[0]),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}}),N=r((function(){const e=Object.keys(z[$.value]);return"hex"!==$.value&&"hide"===m.alphaChannel?e.slice(0,3):e})),S=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 A(){const e=(m.visibleFormats.findIndex((e=>e===$.value))+1)%m.visibleFormats.length;$.value=m.visibleFormats[e]}function M(e){k.value=!0,L(e)}function F(e){k.value=!0,I(e)}function E(){k.value=!1}function L(e){1===e.buttons&&!1!==k.value&&x.value instanceof HTMLElement&&j(x.value,e.clientX,e.clientY)}function I(e){if(!1===k.value||!(x.value instanceof HTMLElement))return;e.preventDefault();const a=e.touches[0];j(x.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:0===t.width?0:f(n/t.width,0,1),y:0===t.height?0:f(1-o/t.height,0,1)}}(e,a,r),n=O(z.hsv);n.s=t.x,n.v=t.y,pe("hsv",n)}function T(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=O(z.hsv);o[r]=f(n,0,1),pe("hsv",o)}function H(e){const a=U(e);null!==a&&pe(a.format,a.color)}function W(e,a){const r=e.currentTarget,t=O(z.hsv);t[a]=parseInt(r.value)/parseInt(r.max),pe("hsv",t)}function B(e){const a=e.target;D(a.value)&&pe("hex",a.value)}function se(e,a){const r=e.target,t=O(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 P[e])z[a]=r(z[e])}(e,r);const a=function(){const e="hide"===m.alphaChannel,a=_(z[$.value],$.value,e);return{colors:z,cssColor:a}}();b("color-change",a)}!function(){if(!(w.value instanceof HTMLElement&&x.value instanceof HTMLElement&&y.value instanceof HTMLElement))return;w.value.style.setProperty("--vacp-hsl-h",String(z.hsl.h)),w.value.style.setProperty("--vacp-hsl-s",String(z.hsl.s)),w.value.style.setProperty("--vacp-hsl-l",String(z.hsl.l)),w.value.style.setProperty("--vacp-hsl-a",String(z.hsl.a)),x.value.style.position="relative",x.value.style.backgroundColor="hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%)",x.value.style.backgroundImage="linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",y.value.style.boxSizing="border-box",y.value.style.position="absolute",y.value.style.left=100*z.hsv.s+"%",y.value.style.bottom=100*z.hsv.v+"%"}()}async function ue(){const e=z[$.value],a="hide"===m.alphaChannel,r=_(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=f(parseFloat(a.value)+t*r*10,parseInt(a.min),parseInt(a.max));a.value=String(n-t*r)}return t((()=>m.color),H),n((function(){document.addEventListener("mousemove",L,{passive:!1}),document.addEventListener("touchmove",I,{passive:!1}),document.addEventListener("mouseup",E),document.addEventListener("touchend",E),H(m.color)})),o((function(){document.removeEventListener("mousemove",L),document.removeEventListener("touchmove",I),document.removeEventListener("mouseup",E),document.removeEventListener("touchend",E)})),(e,a)=>(c(),i("div",{ref_key:"colorPicker",ref:w,class:"vacp-color-picker"},[l("div",{ref_key:"colorSpace",ref:x,class:"vacp-color-space",onMousedown:M,onTouchstart:F},[l("div",{ref_key:"thumb",ref:y,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:T},null,544)],544),l("div",K,[l("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${g.id}-hue-slider`},[l("span",X,[s(e.$slots,"hue-range-input-label",{},(()=>[p("Hue")]))]),l("input",{id:`${g.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:a[0]||(a[0]=e=>W(e,"h"))},null,40,Y)],8,R),"show"===g.alphaChannel?(c(),i("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${g.id}-alpha-slider`},[l("span",G,[s(e.$slots,"alpha-range-input-label",{},(()=>[p("Alpha")]))]),l("input",{id:`${g.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:a[1]||(a[1]=e=>W(e,"a"))},null,40,J)],8,q)):u("v-if",!0)]),l("button",{class:"vacp-copy-button",type:"button",onClick:ue},[s(e.$slots,"copy-button",{},(()=>[Q,V]))]),l("div",Z,[l("div",ee,["hex"===$.value?(c(),i("label",{key:0,class:"vacp-color-input-label",for:`${g.id}-color-hex`},[re,l("input",{id:`${g.id}-color-hex`,class:"vacp-color-input",type:"text",value:S.value,onInput:B},null,40,te)],8,ae)):(c(!0),i(v,{key:1},h(N.value,(e=>(c(),i("label",{id:`${g.id}-color-${$.value}-${e}-label`,key:`${g.id}-color-${$.value}-${e}-label`,class:"vacp-color-input-label",for:`${g.id}-color-${$.value}-${e}`,onInput:a=>se(a,e)},[l("span",oe,d(e.toUpperCase()),1),l("input",{id:`${g.id}-color-${$.value}-${e}`,class:"vacp-color-input",type:"text",value:ve($.value,e),onInput:a=>se(a,e)},null,40,ce)],40,ne)))),128))]),g.visibleFormats.length>1?(c(),i("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:A},[s(e.$slots,"format-switch-button",{},(()=>[ie,le]))])):u("v-if",!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:#19f;--vacp-focus-outline:2px solid var(--vacp-focus-color);--vacp-border-width:1px;--vacp-border-color:#000;--vacp-border:var(--vacp-border-width) solid var(--vacp-border-color);--vacp-color-space-width:300px;--vacp-spacing:6px;grid-gap:var(--vacp-spacing);background-color:#fff;display:grid;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:.8em;grid-template-columns:1fr min-content;max-width:var(--vacp-color-space-width);padding:var(--vacp-spacing)}.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:var(--vacp-focus-outline)}.vacp-color-space{grid-column:1/-1;height:calc(var(--vacp-color-space-width)*.6);overflow:hidden}.vacp-color-space-thumb{--vacp-thumb-size:calc(var(--vacp-spacing)*4);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color);height:var(--vacp-thumb-size);margin-bottom:calc(var(--vacp-thumb-size)*-1/2);margin-left:calc(var(--vacp-thumb-size)*-1/2);transform:rotate(0);width:var(--vacp-thumb-size)}.vacp-color-space-thumb:focus{box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color),0 0 0 3px var(--vacp-focus-color);outline-color:transparent}.vacp-range-input-label{--vacp-slider-track-width:100%;--vacp-slider-track-height:calc(var(--vacp-spacing)*3);display:block}.vacp-range-input-group{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{background:none;border:none;display:block;height:var(--vacp-slider-track-height);margin-bottom:calc(var(--vacp-spacing)/2 + 1px);margin-left:0;margin-right:0;margin-top:calc(var(--vacp-spacing)/2 + 1px);padding:0;width:var(--vacp-slider-track-width)}.vacp-range-input:focus{outline:none}.vacp-range-input::-moz-focus-outer{border:none}.vacp-range-input--alpha{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee);background-position:0 0,var(--vacp-spacing) var(--vacp-spacing);background-size:calc(var(--vacp-spacing)*2) calc(var(--vacp-spacing)*2)}.vacp-range-input::-moz-range-track{border:var(--vacp-border);box-sizing:content-box;height:var(--vacp-slider-track-height);width:var(--vacp-slider-track-width)}.vacp-range-input::-webkit-slider-runnable-track{border:var(--vacp-border);box-sizing:content-box;height:var(--vacp-slider-track-height);width:var(--vacp-slider-track-width)}.vacp-range-input::-ms-track{border:var(--vacp-border);box-sizing:content-box;height:var(--vacp-slider-track-height);width:var(--vacp-slider-track-width)}.vacp-range-input:focus::-moz-range-track{outline:var(--vacp-focus-outline)}.vacp-range-input:focus::-webkit-slider-runnable-track{outline:var(--vacp-focus-outline)}.vacp-range-input:focus::-ms-track{outline:var(--vacp-focus-outline)}.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(90deg,red 0,#ff0 16.66667%,#0f0 33.33333%,#0ff 50%,#00f 66.66667%,#f0f 83.33333%,red 100%)}.vacp-range-input--hue::-webkit-slider-runnable-track{background-image:linear-gradient(90deg,red 0,#ff0 16.66667%,#0f0 33.33333%,#0ff 50%,#00f 66.66667%,#f0f 83.33333%,red 100%)}.vacp-range-input--hue::-ms-track{background-image:linear-gradient(90deg,red 0,#ff0 16.66667%,#0f0 33.33333%,#0ff 50%,#00f 66.66667%,#f0f 83.33333%,red 100%)}.vacp-range-input::-moz-range-thumb{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color);box-sizing:content-box;height:var(--vacp-slider-track-height);isolation:isolate;width:var(--vacp-slider-track-height)}.vacp-range-input::-webkit-slider-thumb{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color);box-sizing:content-box;height:var(--vacp-slider-track-height);isolation:isolate;margin-top:calc((var(--vacp-spacing)/2)*-1);width:var(--vacp-slider-track-height)}.vacp-range-input::-ms-thumb{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color);box-sizing:content-box;height:var(--vacp-slider-track-height);isolation:isolate;margin-top:calc((var(--vacp-spacing)/2)*-1);width:var(--vacp-slider-track-height)}.vacp-copy-button{align-items:center;align-self:center;background-color:#fff;border:var(--vacp-border-width) solid transparent;border-radius:50%;display:flex;height:calc(var(--vacp-spacing)*6);justify-content:center;justify-self:center;overflow:hidden;position:relative;width:calc(var(--vacp-spacing)*6)}.vacp-copy-button:enabled:focus{border-color:var(--vacp-border-color);box-shadow:0 0 0 2px var(--vacp-focus-color);outline:none}.vacp-copy-button:enabled:hover{background-color:#0002}.vacp-color-inputs{align-items:center;display:flex;grid-column:1/-1}.vacp-color-inputs>:not(:first-child){margin-left:var(--vacp-spacing)}.vacp-color-input-group{column-gap:var(--vacp-spacing);display:grid;flex-grow:1;grid-auto-flow:column}.vacp-color-input-label{text-align:center}.vacp-color-input{border:var(--vacp-border);margin:0;margin-top:calc(var(--vacp-spacing)/2);text-align:center;width:100%}.vacp-color-input,.vacp-format-switch-button{background-color:#fff;color:inherit;font:inherit;padding:var(--vacp-spacing)}.vacp-format-switch-button{align-items:center;border:var(--vacp-border-width) solid transparent;border-radius:50%;display:flex;justify-content:center;margin:0}.vacp-format-switch-button:enabled:focus{border-color:var(--vacp-border-color)}.vacp-format-switch-button:enabled:hover{background-color:#0002}.vacp-visually-hidden{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}"),se.__file="src/ColorPicker.vue";const pe={install(e){e.component("ColorPicker",se)}};export{se as ColorPicker,pe 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,createTextVNode as p,createCommentVNode as u,Fragment as v,renderList as h,toDisplayString as d}from"vue";function f(e,a,r){return Math.max(a,Math.min(e,r))}function g(e,a=2){return e.toFixed(a).replace(/\.?0+$/,"")}function b(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360}function m(e){return g(360*e)}function w(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:f(r,0,100)/100}function x(e){return g(100*e)+"%"}function y(e){if(e.endsWith("%"))return w(e);if(e.endsWith("."))return NaN;const a=parseFloat(e);return Number.isNaN(a)?NaN:f(a,0,255)/255}function k(e){return g(255*e)}function $(e){return e.endsWith("%")?w(e):f(parseFloat(e),0,1)}function z(e){return String(e)}const C={hsl:{h:{to:m,from:b},s:{to:x,from:w},l:{to:x,from:w},a:{to:z,from:$}},hwb:{h:{to:m,from:b},w:{to:x,from:w},b:{to:x,from:w},a:{to:z,from:$}},rgb:{r:{to:k,from:y},g:{to:k,from:y},b:{to:k,from:y},a:{to:z,from:$}}};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:A(r,a,e.h+1/3),g:A(r,a,e.h),b:A(r,a,e.h-1/3),a:e.a}}function A(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 M(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 E(e){return{h:e.h,s:1===e.b?0:1-e.w/(1-e.b),v:1-e.b,a:e.a}}function L(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 I(e){const a=L(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 j(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 P={hex:[["hsl",e=>T(e,[N,I])],["hsv",e=>T(e,[N,L,E])],["hwb",e=>T(e,[N,L])],["rgb",N]],hsl:[["hex",e=>T(e,[S,j])],["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=>T(e,[S,L])],["rgb",S]],hsv:[["hex",e=>T(e,[M,j])],["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",M]],hwb:[["hex",e=>T(e,[E,M,j])],["hsl",e=>T(e,[E,M,I])],["hsv",E],["rgb",e=>T(e,[E,M])]],rgb:[["hex",j],["hsl",I],["hsv",e=>T(e,[L,E])],["hwb",L]]};function T(e,a){return a.reduce(((e,a)=>a(e)),e)}function O(e){const a={};for(const r in e)a[r]=e[r];return a}const H={hex:(e,a)=>a&&[5,9].includes(e.length)?e.substring(0,e.length-(e.length-1)/4):e,hsl:(e,a)=>`hsl(${g(360*e.h)} ${g(100*e.s)}% ${g(100*e.l)}%`+(a?")":` / ${g(e.a)})`),hwb:(e,a)=>`hwb(${g(360*e.h)} ${g(100*e.w)}% ${g(100*e.b)}%`+(a?")":` / ${g(e.a)})`),rgb:(e,a)=>`rgb(${g(255*e.r)} ${g(255*e.g)} ${g(255*e.b)}`+(a?")":` / ${g(e.a)})`)};function _(e,a,r){return H[a](e,r)}function D(e){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e)}function U(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(D(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+"a").split(""),c=Object.fromEntries(o.map(((e,a)=>[e,C[t][e].from(n[a])])));return{format:t,color:c}}const W=["hex","hsl","hwb","rgb"],B=["show","hide"],K={class:"vacp-range-input-group"},R=["for"],X={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},Y=["id","value"],q=["for"],G={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},J=["id","value"],Q=l("span",{class:"vacp-visually-hidden"},"Copy color",-1),V=l("svg",{class:"vacp-icon",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",width:"24",height:"24",viewBox:"0 0 32 32"},[l("path",{d:"M25.313 28v-18.688h-14.625v18.688h14.625zM25.313 6.688c1.438 0 2.688 1.188 2.688 2.625v18.688c0 1.438-1.25 2.688-2.688 2.688h-14.625c-1.438 0-2.688-1.25-2.688-2.688v-18.688c0-1.438 1.25-2.625 2.688-2.625h14.625zM21.313 1.313v2.688h-16v18.688h-2.625v-18.688c0-1.438 1.188-2.688 2.625-2.688h16z",fill:"currentColor"})],-1),Z={class:"vacp-color-inputs"},ee={class:"vacp-color-input-group"},ae=["for"],re=l("span",{class:"vacp-color-input-label-text"}," Hex ",-1),te=["id","value"],ne=["id","for","onInput"],oe={class:"vacp-color-input-label-text"},ce=["id","value","onInput"],ie=l("span",{class:"vacp-visually-hidden"},"Switch format",-1),le=l("svg",{class:"vacp-icon","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"15"},[l("path",{d:"M8 15l5-5-1-1-4 2-4-2-1 1zm4-9l1-1-5-5-5 5 1 1 4-2z",fill:"currentColor"})],-1);var se={__name:"ColorPicker",props:{color:{type:[String,Object],default:"#ffffffff"},id:{type:String,default:"color-picker"},visibleFormats:{type:Array,default:()=>W,validator:e=>e.length>0&&e.every((e=>W.includes(e)))},defaultFormat:{type:String,default:"hsl",validator:e=>W.includes(e)},alphaChannel:{type:String,default:"show",validator:e=>B.includes(e)}},emits:["color-change"],setup(g,{emit:b}){const m=g,w=e(null),x=e(null),y=e(null);let k=!1;const $=e(m.visibleFormats.includes(m.defaultFormat)?m.defaultFormat:m.visibleFormats[0]),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}}),N=r((function(){const e=Object.keys(z[$.value]);return"hex"!==$.value&&"hide"===m.alphaChannel?e.slice(0,3):e})),S=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 A(){const e=(m.visibleFormats.findIndex((e=>e===$.value))+1)%m.visibleFormats.length;$.value=m.visibleFormats[e]}function M(e){k=!0,L(e)}function F(e){k=!0,I(e)}function E(){k=!1}function L(e){1===e.buttons&&!1!==k&&x.value instanceof HTMLElement&&j(x.value,e.clientX,e.clientY)}function I(e){if(!1===k||!(x.value instanceof HTMLElement))return;e.preventDefault();const a=e.touches[0];j(x.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:0===t.width?0:f(n/t.width,0,1),y:0===t.height?0:f(1-o/t.height,0,1)}}(e,a,r),n=O(z.hsv);n.s=t.x,n.v=t.y,pe("hsv",n)}function T(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=O(z.hsv);o[r]=f(n,0,1),pe("hsv",o)}function H(e){const a=U(e);null!==a&&pe(a.format,a.color)}function W(e,a){const r=e.currentTarget,t=O(z.hsv);t[a]=parseInt(r.value)/parseInt(r.max),pe("hsv",t)}function B(e){const a=e.target;D(a.value)&&pe("hex",a.value)}function se(e,a){const r=e.target,t=O(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 P[e])z[a]=r(z[e])}(e,r);const a=function(){const e="hide"===m.alphaChannel,a=_(z[$.value],$.value,e);return{colors:z,cssColor:a}}();b("color-change",a)}!function(){if(!(w.value instanceof HTMLElement&&x.value instanceof HTMLElement&&y.value instanceof HTMLElement))return;w.value.style.setProperty("--vacp-hsl-h",String(z.hsl.h)),w.value.style.setProperty("--vacp-hsl-s",String(z.hsl.s)),w.value.style.setProperty("--vacp-hsl-l",String(z.hsl.l)),w.value.style.setProperty("--vacp-hsl-a",String(z.hsl.a)),x.value.style.position="relative",x.value.style.backgroundColor="hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%)",x.value.style.backgroundImage="linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",y.value.style.boxSizing="border-box",y.value.style.position="absolute",y.value.style.left=100*z.hsv.s+"%",y.value.style.bottom=100*z.hsv.v+"%"}()}async function ue(){const e=z[$.value],a="hide"===m.alphaChannel,r=_(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=f(parseFloat(a.value)+t*r*10,parseInt(a.min),parseInt(a.max));a.value=String(n-t*r)}return t((()=>m.color),H),n((function(){document.addEventListener("mousemove",L,{passive:!1}),document.addEventListener("touchmove",I,{passive:!1}),document.addEventListener("mouseup",E),document.addEventListener("touchend",E),H(m.color)})),o((function(){document.removeEventListener("mousemove",L),document.removeEventListener("touchmove",I),document.removeEventListener("mouseup",E),document.removeEventListener("touchend",E)})),(e,a)=>(c(),i("div",{ref_key:"colorPicker",ref:w,class:"vacp-color-picker"},[l("div",{ref_key:"colorSpace",ref:x,class:"vacp-color-space",onMousedown:M,onTouchstart:F},[l("div",{ref_key:"thumb",ref:y,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:T},null,544)],544),l("div",K,[l("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${g.id}-hue-slider`},[l("span",X,[s(e.$slots,"hue-range-input-label",{},(()=>[p("Hue")]))]),l("input",{id:`${g.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:a[0]||(a[0]=e=>W(e,"h"))},null,40,Y)],8,R),"show"===g.alphaChannel?(c(),i("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${g.id}-alpha-slider`},[l("span",G,[s(e.$slots,"alpha-range-input-label",{},(()=>[p("Alpha")]))]),l("input",{id:`${g.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:a[1]||(a[1]=e=>W(e,"a"))},null,40,J)],8,q)):u("v-if",!0)]),l("button",{class:"vacp-copy-button",type:"button",onClick:ue},[s(e.$slots,"copy-button",{},(()=>[Q,V]))]),l("div",Z,[l("div",ee,["hex"===$.value?(c(),i("label",{key:0,class:"vacp-color-input-label",for:`${g.id}-color-hex`},[re,l("input",{id:`${g.id}-color-hex`,class:"vacp-color-input",type:"text",value:S.value,onInput:B},null,40,te)],8,ae)):(c(!0),i(v,{key:1},h(N.value,(e=>(c(),i("label",{id:`${g.id}-color-${$.value}-${e}-label`,key:`${g.id}-color-${$.value}-${e}-label`,class:"vacp-color-input-label",for:`${g.id}-color-${$.value}-${e}`,onInput:a=>se(a,e)},[l("span",oe,d(e.toUpperCase()),1),l("input",{id:`${g.id}-color-${$.value}-${e}`,class:"vacp-color-input",type:"text",value:ve($.value,e),onInput:a=>se(a,e)},null,40,ce)],40,ne)))),128))]),g.visibleFormats.length>1?(c(),i("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:A},[s(e.$slots,"format-switch-button",{},(()=>[ie,le]))])):u("v-if",!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:#19f;--vacp-focus-outline:2px solid var(--vacp-focus-color);--vacp-border-width:1px;--vacp-border-color:#000;--vacp-border:var(--vacp-border-width) solid var(--vacp-border-color);--vacp-color-space-width:300px;--vacp-spacing:6px;grid-gap:var(--vacp-spacing);background-color:#fff;display:grid;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:.8em;grid-template-columns:1fr min-content;max-width:var(--vacp-color-space-width);padding:var(--vacp-spacing)}.vacp-color-picker,.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:var(--vacp-focus-outline)}.vacp-color-space{grid-column:1/-1;height:calc(var(--vacp-color-space-width)*.6);overflow:hidden}.vacp-color-space-thumb{--vacp-thumb-size:calc(var(--vacp-spacing)*4);border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color);height:var(--vacp-thumb-size);margin-bottom:calc(var(--vacp-thumb-size)*-1/2);margin-left:calc(var(--vacp-thumb-size)*-1/2);transform:rotate(0);width:var(--vacp-thumb-size)}.vacp-color-space-thumb:focus{box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color),0 0 0 3px var(--vacp-focus-color);outline-color:transparent}.vacp-range-input-label{--vacp-slider-track-width:100%;--vacp-slider-track-height:calc(var(--vacp-spacing)*3);display:block}.vacp-range-input-group{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{background:none;border:none;display:block;height:var(--vacp-slider-track-height);margin-bottom:calc(var(--vacp-spacing)/2 + 1px);margin-left:0;margin-right:0;margin-top:calc(var(--vacp-spacing)/2 + 1px);padding:0;width:var(--vacp-slider-track-width)}.vacp-range-input:focus{outline:none}.vacp-range-input::-moz-focus-outer{border:none}.vacp-range-input--alpha{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee);background-position:0 0,var(--vacp-spacing) var(--vacp-spacing);background-size:calc(var(--vacp-spacing)*2) calc(var(--vacp-spacing)*2)}.vacp-range-input::-moz-range-track{border:var(--vacp-border);box-sizing:content-box;height:var(--vacp-slider-track-height);width:var(--vacp-slider-track-width)}.vacp-range-input::-webkit-slider-runnable-track{border:var(--vacp-border);box-sizing:content-box;height:var(--vacp-slider-track-height);width:var(--vacp-slider-track-width)}.vacp-range-input::-ms-track{border:var(--vacp-border);box-sizing:content-box;height:var(--vacp-slider-track-height);width:var(--vacp-slider-track-width)}.vacp-range-input:focus::-moz-range-track{outline:var(--vacp-focus-outline)}.vacp-range-input:focus::-webkit-slider-runnable-track{outline:var(--vacp-focus-outline)}.vacp-range-input:focus::-ms-track{outline:var(--vacp-focus-outline)}.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(90deg,red 0,#ff0 16.66667%,#0f0 33.33333%,#0ff 50%,#00f 66.66667%,#f0f 83.33333%,red 100%)}.vacp-range-input--hue::-webkit-slider-runnable-track{background-image:linear-gradient(90deg,red 0,#ff0 16.66667%,#0f0 33.33333%,#0ff 50%,#00f 66.66667%,#f0f 83.33333%,red 100%)}.vacp-range-input--hue::-ms-track{background-image:linear-gradient(90deg,red 0,#ff0 16.66667%,#0f0 33.33333%,#0ff 50%,#00f 66.66667%,#f0f 83.33333%,red 100%)}.vacp-range-input::-moz-range-thumb{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color);box-sizing:content-box;height:var(--vacp-slider-track-height);isolation:isolate;width:var(--vacp-slider-track-height)}.vacp-range-input::-webkit-slider-thumb{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color);box-sizing:content-box;height:var(--vacp-slider-track-height);isolation:isolate;margin-top:calc((var(--vacp-spacing)/2)*-1);width:var(--vacp-slider-track-height)}.vacp-range-input::-ms-thumb{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 var(--vacp-border-width) var(--vacp-border-color);box-sizing:content-box;height:var(--vacp-slider-track-height);isolation:isolate;margin-top:calc((var(--vacp-spacing)/2)*-1);width:var(--vacp-slider-track-height)}.vacp-copy-button{align-items:center;align-self:center;background-color:#fff;border:var(--vacp-border-width) solid transparent;border-radius:50%;display:flex;height:calc(var(--vacp-spacing)*6);justify-content:center;justify-self:center;overflow:hidden;position:relative;width:calc(var(--vacp-spacing)*6)}.vacp-copy-button:enabled:focus{border-color:var(--vacp-border-color);box-shadow:0 0 0 2px var(--vacp-focus-color);outline:none}.vacp-copy-button:enabled:hover{background-color:#0002}.vacp-color-inputs{align-items:center;display:flex;grid-column:1/-1}.vacp-color-inputs>:not(:first-child){margin-left:var(--vacp-spacing)}.vacp-color-input-group{column-gap:var(--vacp-spacing);display:grid;flex-grow:1;grid-auto-flow:column}.vacp-color-input-label{text-align:center}.vacp-color-input{border:var(--vacp-border);margin:0;margin-top:calc(var(--vacp-spacing)/2);text-align:center;width:100%}.vacp-color-input,.vacp-format-switch-button{background-color:#fff;color:inherit;font:inherit;padding:var(--vacp-spacing)}.vacp-format-switch-button{align-items:center;border:var(--vacp-border-width) solid transparent;border-radius:50%;display:flex;justify-content:center;margin:0}.vacp-format-switch-button:enabled:focus{border-color:var(--vacp-border-color)}.vacp-format-switch-button:enabled:hover{background-color:#0002}.vacp-visually-hidden{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}"),se.__file="src/ColorPicker.vue";const pe={install(e){e.component("ColorPicker",se)}};export{se as ColorPicker,pe as default};

package.json

 {
 	"name": "vue-accessible-color-picker",
-	"version": "4.1.3",
+	"version": "4.1.4",
 	"license": "MIT",
@@ -52,4 +52,7 @@ "description": "Color picker component for Vue.js",
 		"test": "vitest run --coverage",
-		"lint": "eslint --ext .js,.vue .",
-		"lint:fix": "npm run lint -- --fix",
+		"lint:code": "eslint --ext .js,.vue .",
+		"lint:code:fix": "npm run lint:code -- --fix",
+		"lint:lockfile": "lockfile-lint --path package-lock.json --validate-hosts --allowed-hosts npm",
+		"lint:package": "publint",
+		"release": "semantic-release",
 		"prepare": "husky install",
@@ -62,31 +65,32 @@ "prepublishOnly": "npm run build"
 	"devDependencies": {
-		"@commitlint/cli": "^17.6.3",
-		"@commitlint/config-conventional": "^17.6.3",
+		"@commitlint/cli": "^17.6.7",
+		"@commitlint/config-conventional": "^17.6.7",
 		"@rollup/plugin-terser": "^0.4.3",
 		"@semantic-release/changelog": "^6.0.3",
-		"@semantic-release/commit-analyzer": "^9.0.2",
+		"@semantic-release/commit-analyzer": "^10.0.1",
 		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/github": "^8.0.7",
-		"@semantic-release/npm": "^10.0.3",
-		"@semantic-release/release-notes-generator": "^11.0.1",
+		"@semantic-release/github": "^9.0.4",
+		"@semantic-release/npm": "^10.0.4",
+		"@semantic-release/release-notes-generator": "^11.0.4",
 		"@vitejs/plugin-vue": "^4.2.3",
-		"@vitest/coverage-c8": "^0.31.1",
-		"@vue/test-utils": "^2.3.2",
-		"c8": "^7.13.0",
+		"@vitest/coverage-v8": "^0.34.1",
+		"@vue/test-utils": "^2.4.1",
 		"canvas": "^2.11.2",
-		"eslint": "^8.40.0",
-		"eslint-config-standard": "^17.0.0",
-		"eslint-plugin-vue": "^9.13.0",
+		"eslint": "^8.46.0",
+		"eslint-config-standard": "^17.1.0",
+		"eslint-plugin-vue": "^9.16.1",
 		"husky": "^8.0.3",
-		"jsdom": "^22.0.0",
-		"postcss": "^8.4.23",
+		"jsdom": "^22.1.0",
+		"lockfile-lint": "^4.12.0",
+		"postcss": "^8.4.27",
+		"publint": "^0.2.0",
 		"rimraf": "^5.0.1",
-		"rollup": "^3.22.0",
+		"rollup": "^3.27.0",
 		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-vue": "^6.0.0",
-		"semantic-release": "^21.0.2",
-		"standard": "^17.0.0",
-		"vite": "^4.3.8",
-		"vitest": "^0.31.1"
+		"semantic-release": "^21.0.7",
+		"standard": "^17.1.0",
+		"vite": "^4.4.8",
+		"vitest": "^0.34.1"
 	}
 }

README.md

 # vue-accessible-color-picker
 
-[![Tests passing](https://github.com/kleinfreund/vue-accessible-color-picker/workflows/main/badge.svg)](https://github.com/kleinfreund/vue-accessible-color-picker/actions)
+[![Tests passing](https://github.com/kleinfreund/vue-accessible-color-picker/workflows/Tests/badge.svg)](https://github.com/kleinfreund/vue-accessible-color-picker/actions)
 
@@ -5,0 +5,0 @@ A color picker component for Vue.js 3.

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

Improved metrics

Total package byte prevSize

43545

increased by0.42%

Worsened metrics

Dev dependency count

29

increased by3.57%

No dependency changes