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

Comparing version 4.0.7 to 4.1.0

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

@@ -1,1 +0,1 @@
-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,createCommentVNode as c,unref as h,Fragment as p,renderList as f,toDisplayString as v,createTextVNode as d}from"vue";function b(t,e,n){return Math.max(e,Math.min(t,n))}function g(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 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:b(n,0,100)/100}function x(t){return g(100*t)+"%"}function $(t){if(t.endsWith("%"))return w(t);if(t.endsWith("."))return NaN;const e=parseFloat(t);return Number.isNaN(e)?NaN:b(e,0,255)/255}function k(t){return g(255*t)}function N(t){return t.endsWith("%")?w(t):b(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 F(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 L(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 P(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 O(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 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,[F,O])],["hsv",t=>H(t,[F,I,P])],["hwb",t=>H(t,[F,I])],["rgb",F]],hsl:[["hex",t=>H(t,[L,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,[L,I])],["rgb",L]],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,[P,E,T])],["hsl",t=>H(t,[P,E,O])],["hsv",P],["rgb",t=>H(t,[P,E])]],rgb:[["hex",T],["hsl",O],["hsv",t=>H(t,[I,P])],["hwb",I]]};function H(t,e){return e.reduce(((t,e)=>e(t)),t)}function _(t){const e={};for(const n in t)e[n]=t[n];return e}const D={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 W(t,e,n){return D[e](t,n)}function q(t){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(t)}function K(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(q(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=i("span",{class:"vacp-color-input-label-text"}," Hex ",-1),at=["id","value"],lt=["id","for","onInput"],st={class:"vacp-color-input-label-text"},it=["id","value","onInput"],ut=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:g}){const m=d,y=t(null),w=t(null),x=t(null),$=t(!1),k=t(m.visibleFormats.includes(m.defaultFormat)?m.defaultFormat:m.visibleFormats[0]),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})),F=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 L(){const t=(m.visibleFormats.findIndex((t=>t===k.value))+1)%m.visibleFormats.length;k.value=m.visibleFormats[t]}function M(t){$.value=!0,P(t)}function E(t){$.value=!0,I(t)}function S(){$.value=!1}function P(t){1===t.buttons&&!1!==$.value&&w.value instanceof HTMLElement&&O(w.value,t.clientX,t.clientY)}function I(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:b(o/r.width,0,1),y:b(1-a/r.height,0,1)}}(t,e,n),o=_(N.hsv);o.s=r.x,o.v=r.y,U("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=_(N.hsv);a[n]=b(o,0,1),U("hsv",a)}function H(t){const e=K(t);null!==e&&U(e.format,e.color)}function D(t,e){const n=t.currentTarget,r=_(N.hsv);r[e]=parseInt(n.value)/parseInt(n.max),U("hsv",r)}function R(t,e){const n=t.target,r=_(N[k.value]),o=C[k.value][e].from(n.value);Number.isNaN(o)||void 0===o||(r[e]=o,U(k.value,r))}function U(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=W(N[k.value],k.value,t);return{colors:N,cssColor:e}}();g("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\t\tposition: relative;\n\t\tbackground-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n\t\tbackground-image:\n\t\t\tlinear-gradient(to top, #000, transparent),  /* 2. */\n\t\t\tlinear-gradient(to right, #fff, transparent) /* 2. */\n\t\t;\n\t"),x.value.setAttribute("style",`\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tleft: ${100*N.hsv.s}%;   /* 3. */\n\t\tbottom: ${100*N.hsv.v}%; /* 3. */\n\t`)}()}async function ct(){const t=N[k.value],e="hide"===m.alphaChannel,n=W(t,k.value,e);await window.navigator.clipboard.writeText(n)}function ht(t,e){return C[t][e].to(N[t][e])}function pt(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=b(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",P,{passive:!1}),document.addEventListener("touchmove",I,{passive:!1}),document.addEventListener("mouseup",S),document.addEventListener("touchend",S),H(m.color)})),a((function(){document.removeEventListener("mousemove",P),document.removeEventListener("touchmove",I),document.removeEventListener("mouseup",S),document.removeEventListener("touchend",S)})),(t,e)=>(l(),s("div",{ref_key:"colorPicker",ref:y,class:"vacp-color-picker"},[i("div",{ref_key:"colorSpace",ref:w,class:"vacp-color-space",onMousedown:M,onTouchstart:E},[i("div",{ref_key:"thumb",ref:x,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:T},null,544)],544),i("div",X,[i("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${d.id}-hue-slider`},[i("span",z,[u(t.$slots,"hue-range-input-label",{},(()=>[B]))]),i("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:pt,onInput:e[0]||(e[0]=t=>D(t,"h"))},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`},[i("span",Q,[u(t.$slots,"alpha-range-input-label",{},(()=>[V]))]),i("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:pt,onInput:e[1]||(e[1]=t=>D(t,"a"))},null,40,Z)],8,J)):c("v-if",!0)]),i("button",{class:"vacp-copy-button",type:"button",onClick:ct},[u(t.$slots,"copy-button",{},(()=>[tt]))]),i("div",et,[i("div",nt,["hex"===k.value?(l(),s("label",{key:0,class:"vacp-color-input-label",for:`${d.id}-color-hex`},[ot,i("input",{id:`${d.id}-color-hex`,class:"vacp-color-input",type:"text",value:h(F),onInput:e[2]||(e[2]=t=>function(t){const e=t.target;q(e.value)&&U("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=>R(e,t)},[i("span",st,v(t.toUpperCase()),1),i("input",{id:`${d.id}-color-${k.value}`,class:"vacp-color-input",type:"text",value:ht(k.value,t),onInput:e=>R(e,t)},null,40,it)],40,lt)))),128))]),d.visibleFormats.length>1?(l(),s("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:L},[u(t.$slots,"format-switch-button",{},(()=>[ut]))])):c("v-if",!0)])],512))},__file:"src/ColorPicker.vue"};const ht={install(t){t.component("ColorPicker",ct)}};export{ct as ColorPicker,ht 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,createCommentVNode as c,unref as h,Fragment as p,renderList as v,toDisplayString as f,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 w(t){return b(360*t)}function y(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 y(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 C(t){return t.endsWith("%")?y(t):g(parseFloat(t),0,1)}function N(t){return String(t)}const A={hsl:{h:{to:w,from:m},s:{to:x,from:y},l:{to:x,from:y},a:{to:N,from:C}},hwb:{h:{to:w,from:m},w:{to:x,from:y},b:{to:x,from:y},a:{to:N,from:C}},rgb:{r:{to:k,from:$},g:{to:k,from:$},b:{to:k,from:$},a:{to:N,from:C}}};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:L(n,e,t.h+1/3),g:L(n,e,t.h),b:L(n,e,t.h-1/3),a:t.a}}function L(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 P(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 O(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 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,[M,O])],["hsv",t=>H(t,[M,I,P])],["hwb",t=>H(t,[M,I])],["rgb",M]],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,I])],["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,[P,E,T])],["hsl",t=>H(t,[P,E,O])],["hsv",P],["rgb",t=>H(t,[P,E])]],rgb:[["hex",T],["hsl",O],["hsv",t=>H(t,[I,P])],["hwb",I]]};function H(t,e){return e.reduce(((t,e)=>e(t)),t)}function _(t){const e={};for(const n in t)e[n]=t[n];return e}const z={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 D(t,e,n){return z[e](t,n)}function W(t){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(t)}function q(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(W(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,A[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=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=i("span",{class:"vacp-visually-hidden"},"Copy color",-1),et=i("svg",{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),nt={class:"vacp-color-inputs"},rt={class:"vacp-color-input-group"},ot=["for"],at=i("span",{class:"vacp-color-input-label-text"}," Hex ",-1),lt=["id","value"],st=["id","for","onInput"],it={class:"vacp-color-input-label-text"},ut=["id","value","onInput"],ct=i("span",{class:"vacp-visually-hidden"},"Switch format",-1),ht=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 pt={__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:t=>t.length>0&&t.every((t=>K.includes(t)))},defaultFormat:{type:String,required:!1,default:"hsl",validator:t=>K.includes(t)},alphaChannel:{type:String,required:!1,default:"show",validator:t=>R.includes(t)}},emits:["color-change"],setup(d,{emit:b}){const m=d,w=t(null),y=t(null),x=t(null),$=t(!1),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}}),N=n((function(){const t=Object.keys(C[k.value]);return"hex"!==k.value&&"hide"===m.alphaChannel?t.slice(0,3):t})),M=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 F(){const t=(m.visibleFormats.findIndex((t=>t===k.value))+1)%m.visibleFormats.length;k.value=m.visibleFormats[t]}function L(t){$.value=!0,P(t)}function E(t){$.value=!0,I(t)}function S(){$.value=!1}function P(t){1===t.buttons&&!1!==$.value&&y.value instanceof HTMLElement&&O(y.value,t.clientX,t.clientY)}function I(t){if(!1===$.value||!(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:g(o/r.width,0,1),y:g(1-a/r.height,0,1)}}(t,e,n),o=_(C.hsv);o.s=r.x,o.v=r.y,R("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=C.hsv[n]+e*r*.01,a=_(C.hsv);a[n]=g(o,0,1),R("hsv",a)}function H(t){const e=q(t);null!==e&&R(e.format,e.color)}function z(t,e){const n=t.currentTarget,r=_(C.hsv);r[e]=parseInt(n.value)/parseInt(n.max),R("hsv",r)}function K(t,e){const n=t.target,r=_(C[k.value]),o=A[k.value][e].from(n.value);Number.isNaN(o)||void 0===o||(r[e]=o,R(k.value,r))}function R(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 j[t])C[e]=n(C[t])}(t,n);const e=function(){const t="hide"===m.alphaChannel,e=D(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.setAttribute("style","\n\t\tposition: relative;\n\t\tbackground-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n\t\tbackground-image:\n\t\t\tlinear-gradient(to top, #000, transparent),  /* 2. */\n\t\t\tlinear-gradient(to right, #fff, transparent) /* 2. */\n\t\t;\n\t"),x.value.setAttribute("style",`\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tleft: ${100*C.hsv.s}%;   /* 3. */\n\t\tbottom: ${100*C.hsv.v}%; /* 3. */\n\t`)}()}async function pt(){const t=C[k.value],e="hide"===m.alphaChannel,n=D(t,k.value,e);await window.navigator.clipboard.writeText(n)}function vt(t,e){return A[t][e].to(C[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",P,{passive:!1}),document.addEventListener("touchmove",I,{passive:!1}),document.addEventListener("mouseup",S),document.addEventListener("touchend",S),H(m.color)})),a((function(){document.removeEventListener("mousemove",P),document.removeEventListener("touchmove",I),document.removeEventListener("mouseup",S),document.removeEventListener("touchend",S)})),(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:E},[i("div",{ref_key:"thumb",ref:x,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:T},null,544)],544),i("div",U,[i("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${d.id}-hue-slider`},[i("span",X,[u(t.$slots,"hue-range-input-label",{},(()=>[Y]))]),i("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:ft,onInput:e[0]||(e[0]=t=>z(t,"h"))},null,40,G)],8,B),"show"===d.alphaChannel?(l(),s("label",{key:0,class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${d.id}-alpha-slider`},[i("span",Q,[u(t.$slots,"alpha-range-input-label",{},(()=>[V]))]),i("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:ft,onInput:e[1]||(e[1]=t=>z(t,"a"))},null,40,Z)],8,J)):c("v-if",!0)]),i("button",{class:"vacp-copy-button",type:"button",onClick:pt},[u(t.$slots,"copy-button",{},(()=>[tt,et]))]),i("div",nt,[i("div",rt,["hex"===k.value?(l(),s("label",{key:0,class:"vacp-color-input-label",for:`${d.id}-color-hex`},[at,i("input",{id:`${d.id}-color-hex`,class:"vacp-color-input",type:"text",value:h(M),onInput:e[2]||(e[2]=t=>function(t){const e=t.target;W(e.value)&&R("hex",e.value)}(t))},null,40,lt)],8,ot)):(l(!0),s(p,{key:1},v(h(N),(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=>K(e,t)},[i("span",it,f(t.toUpperCase()),1),i("input",{id:`${d.id}-color-${k.value}`,class:"vacp-color-input",type:"text",value:vt(k.value,t),onInput:e=>K(e,t)},null,40,ut)],40,st)))),128))]),d.visibleFormats.length>1?(l(),s("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:F},[u(t.$slots,"format-switch-button",{},(()=>[ct,ht]))])):c("v-if",!0)])],512))},__file:"src/ColorPicker.vue"};const vt={install(t){t.component("ColorPicker",pt)}};export{pt as ColorPicker,vt 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,createCommentVNode as p,unref as u,Fragment as v,renderList as d,toDisplayString as h,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 C(e){return String(e)}const A={hsl:{h:{to:x,from:m},s:{to:w,from:k},l:{to:w,from:k},a:{to:C,from:z}},hwb:{h:{to:x,from:m},w:{to:w,from:k},b:{to:w,from:k},a:{to:C,from:z}},rgb:{r:{to:$,from:y},g:{to:$,from:y},b:{to:$,from:y},a:{to:C,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:F(r,a,e.h+1/3),g:F(r,a,e.h),b:F(r,a,e.h-1/3),a:e.a}}function F(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 E(e){return{r:L(5,e),g:L(3,e),b:L(1,e),a:e.a}}function L(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,[E,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",E]],hwb:[["hex",e=>O(e,[M,E,P])],["hsl",e=>O(e,[M,E,j])],["hsv",M],["rgb",e=>O(e,[M,E])]],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 _={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 D(e,a,r){return _[a](e,r)}function U(e){return/^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e)}function W(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(U(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,A[t][e].from(n[a])])));return{format:t,color:c}}const q=["hex","hsl","hwb","rgb"],K=["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:()=>q,validator:e=>e.length>0&&e.every((e=>q.includes(e)))},defaultFormat:{type:String,required:!1,default:"hsl",validator:e=>q.includes(e)},alphaChannel:{type:String,required:!1,default:"show",validator:e=>K.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.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}}),C=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 F(e){y.value=!0,M(e)}function E(e){y.value=!0,I(e)}function L(){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,K("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),K("hsv",o)}function O(e){const a=W(e);null!==a&&K(a.format,a.color)}function _(e,a){const r=e.currentTarget,t=H(z.hsv);t[a]=parseInt(r.value)/parseInt(r.max),K("hsv",t)}function q(e,a){const r=e.target,t=H(z[$.value]),n=A[$.value][a].from(r.value);Number.isNaN(n)||void 0===n||(t[a]=n,K($.value,t))}function K(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=D(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\t\tposition: relative;\n\t\tbackground-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n\t\tbackground-image:\n\t\t\tlinear-gradient(to top, #000, transparent),  /* 2. */\n\t\t\tlinear-gradient(to right, #fff, transparent) /* 2. */\n\t\t;\n\t"),w.value.setAttribute("style",`\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tleft: ${100*z.hsv.s}%;   /* 3. */\n\t\tbottom: ${100*z.hsv.v}%; /* 3. */\n\t`)}()}async function pe(){const e=z[$.value],a="hide"===m.alphaChannel,r=D(e,$.value,a);await window.navigator.clipboard.writeText(r)}function ue(e,a){return A[e][a].to(z[e][a])}function ve(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",L),document.addEventListener("touchend",L),O(m.color)})),o((function(){document.removeEventListener("mousemove",M),document.removeEventListener("touchmove",I),document.removeEventListener("mouseup",L),document.removeEventListener("touchend",L)})),(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:F,onTouchstart:E},[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:ve,onInput:a[0]||(a[0]=e=>_(e,"h"))},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:ve,onInput:a[1]||(a[1]=e=>_(e,"a"))},null,40,Z)],8,J)):p("v-if",!0)]),l("button",{class:"vacp-copy-button",type:"button",onClick:pe},[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[2]||(a[2]=e=>function(e){const a=e.target;U(a.value)&&K("hex",a.value)}(e))},null,40,oe)],8,te)):(c(!0),i(v,{key:1},d(u(C),(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=>q(a,e)},[l("span",ie,h(e.toUpperCase()),1),l("input",{id:`${f.id}-color-${$.value}`,class:"vacp-color-input",type:"text",value:ue($.value,e),onInput:a=>q(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("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:#1e90ff;--vacp-color-space-width:300px;--vacp-spacing:6px;--vacp-tiled-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);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-areas:"color-space color-space" "range-inputs copy-button" "color-inputs color-inputs";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:2px solid var(--vacp-focus-color)}.vacp-color-space{grid-area:color-space;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 1px #000;height:var(--vacp-thumb-size);margin-bottom:calc(var(--vacp-thumb-size)*-1/2);margin-left:calc(var(--vacp-thumb-size)*-1/2);width:var(--vacp-thumb-size)}.vacp-color-space-thumb:focus{box-shadow:0 0 0 1px #000,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);--vacp-slider-thumb-size:calc(var(--vacp-slider-track-height) + var(--vacp-spacing));display:block}.vacp-range-input-group{display:flex;flex-direction:column;grid-area:range-inputs;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);margin-left:0;margin-right:0;margin-top:calc(var(--vacp-spacing)/2);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:var(--vacp-tiled-background-image);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:none;box-sizing:border-box;display:block;height:var(--vacp-slider-track-height)}.vacp-range-input::-webkit-slider-runnable-track{border:none;height:var(--vacp-slider-track-height);width:var(--vacp-slider-track-width)}.vacp-range-input::-ms-track{border:none;height:var(--vacp-slider-track-height);width:var(--vacp-slider-track-width)}.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(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 1px #000;box-sizing:border-box;height:var(--vacp-slider-thumb-size);transform:rotate(0);width:var(--vacp-slider-thumb-size)}.vacp-range-input::-webkit-slider-thumb{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;height:var(--vacp-slider-thumb-size);margin-top:calc((var(--vacp-slider-track-height) - var(--vacp-slider-thumb-size))/2);transform:rotate(0);width:var(--vacp-slider-thumb-size)}.vacp-range-input::-ms-thumb{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;height:var(--vacp-slider-thumb-size);margin-top:0;transform:rotate(0);width:var(--vacp-slider-thumb-size)}.vacp-copy-button{align-items:center;align-self:center;background-color:#fff;background-image:linear-gradient(var(--vacp-color),var(--vacp-color)),var(--vacp-tiled-background-image);background-position:0 0,var(--vacp-spacing) var(--vacp-spacing);background-size:calc(var(--vacp-spacing)*2) calc(var(--vacp-spacing)*2);border:1px solid transparent;border-radius:50%;color:#fff;display:flex;grid-area:copy-button;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:not(:hover) svg{display:none}.vacp-copy-button:enabled:focus{border-color:var(--vacp-focus-color);box-shadow:0 0 0 2px var(--vacp-focus-color);outline:none}.vacp-copy-button:enabled:hover{background-color:var(--vacp-color);background-image:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25))}.vacp-color-inputs{align-items:center;display:flex;grid-area:color-inputs}.vacp-color-inputs>:not(:first-child){margin-left:var(--vacp-spacing)}.vacp-color-input-group{display:flex;flex-grow:1}.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{background-color:#fff;border:1px solid #ccc;color:inherit;font:inherit;margin:0;margin-top:calc(var(--vacp-spacing)/2);padding:var(--vacp-spacing);text-align:center;width:100%}.vacp-color-input:enabled:focus{border-color:var(--vacp-focus-color)}.vacp-format-switch-button{align-items:center;background-color:#fff;border:1px solid transparent;color:inherit;display:flex;font:inherit;justify-content:center;margin:0;padding:var(--vacp-spacing)}.vacp-format-switch-button:enabled:focus{border-color:var(--vacp-focus-color)}.vacp-format-switch-button:enabled:hover{background-color:#eee}'),pe.__file="src/ColorPicker.vue";const ue={install(e){e.component("ColorPicker",pe)}};export{pe as ColorPicker,ue as default};
+import{ref as e,reactive as t,computed as r,watch as a,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,t,r){return Math.max(t,Math.min(e,r))}function b(e,t=2){return e.toFixed(t).replace(/\.?0+$/,"")}function m(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360}function w(e){return b(360*e)}function x(e){if(!e.endsWith("%"))return NaN;const t=e.substring(0,e.length-1);if(t.endsWith("."))return NaN;const r=parseFloat(t);return Number.isNaN(r)?NaN:g(r,0,100)/100}function k(e){return b(100*e)+"%"}function y(e){if(e.endsWith("%"))return x(e);if(e.endsWith("."))return NaN;const t=parseFloat(e);return Number.isNaN(t)?NaN:g(t,0,255)/255}function $(e){return b(255*e)}function z(e){return e.endsWith("%")?x(e):g(parseFloat(e),0,1)}function C(e){return String(e)}const A={hsl:{h:{to:w,from:m},s:{to:k,from:x},l:{to:k,from:x},a:{to:C,from:z}},hwb:{h:{to:w,from:m},w:{to:k,from:x},b:{to:k,from:x},a:{to:C,from:z}},rgb:{r:{to:$,from:y},g:{to:$,from:y},b:{to:$,from:y},a:{to:C,from:z}}};function N(e){const t=e.replace(/^#/,""),r=[],a=t.length>4?2:1;for(let e=0;e<t.length;e+=a){const n=t.slice(e,e+a);r.push(n.repeat(a%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 t=e.l<.5?e.l*(1+e.s):e.l+e.s-e.l*e.s,r=2*e.l-t;return{r:M(r,t,e.h+1/3),g:M(r,t,e.h),b:M(r,t,e.h-1/3),a:e.a}}function M(e,t,r){return r<0?r+=1:r>1&&(r-=1),r<1/6?e+6*(t-e)*r:r<.5?t:r<2/3?e+(t-e)*(2/3-r)*6:e}function F(e){return{r:E(5,e),g:E(3,e),b:E(1,e),a:e.a}}function E(e,t){const r=(e+6*t.h)%6;return t.v-t.v*t.s*Math.max(0,Math.min(r,4-r,1))}function L(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),r=Math.max(e.r,e.g,e.b);let a;return a=r===t?0:r===e.r?(0+(e.g-e.b)/(r-t))/6:r===e.g?(2+(e.b-e.r)/(r-t))/6:(4+(e.r-e.g)/(r-t))/6,a<0&&(a+=1),{h:a,w:t,b:1-r,a:e.a}}function j(e){const t=I(e),r=t.w,a=1-t.b,n=(a+r)/2;let o;return o=0===a||1===r?0:(a-n)/Math.min(n,1-n),{h:t.h,s:o,l:n,a:e.a}}function P(e){return"#"+Object.values(e).map((e=>{const t=255*e,r=Math.round(t).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,L])],["hwb",e=>O(e,[N,I])],["rgb",N]],hsl:[["hex",e=>O(e,[S,P])],["hsv",function(e){const t=e.l+e.s*Math.min(e.l,1-e.l),r=0===t?0:2-2*e.l/t;return{h:e.h,s:r,v:t,a:e.a}}],["hwb",e=>O(e,[S,I])],["rgb",S]],hsv:[["hex",e=>O(e,[F,P])],["hsl",function(e){const t=e.v-e.v*e.s/2,r=Math.min(t,1-t),a=0===r?0:(e.v-t)/r;return{h:e.h,s:a,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",F]],hwb:[["hex",e=>O(e,[L,F,P])],["hsl",e=>O(e,[L,F,j])],["hsv",L],["rgb",e=>O(e,[L,F])]],rgb:[["hex",P],["hsl",j],["hsv",e=>O(e,[I,L])],["hwb",I]]};function O(e,t){return t.reduce(((e,t)=>t(e)),e)}function H(e){const t={};for(const r in e)t[r]=e[r];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(${b(360*e.h)} ${b(100*e.s)}% ${b(100*e.l)}%`+(t?")":` / ${b(e.a)})`),hwb:(e,t)=>`hwb(${b(360*e.h)} ${b(100*e.w)}% ${b(100*e.b)}%`+(t?")":` / ${b(e.a)})`),rgb:(e,t)=>`rgb(${b(255*e.r)} ${b(255*e.g)} ${b(255*e.b)}`+(t?")":` / ${b(e.a)})`)};function D(e,t,r){return _[t](e,r)}function U(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(U(e))return{format:"hex",color:e};if(!e.includes("(")){const t=document.createElement("canvas").getContext("2d");t.fillStyle=e;const r=t.fillStyle;return"#000000"===r&&"black"!==e?null:{format:"hex",color:r}}const[t,r]=e.split("("),a=t.substring(0,3),n=r.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");3===n.length&&n.push("1");const o=a.split("").concat("a"),c=Object.fromEntries(o.map(((e,t)=>[e,A[a][e].from(n[t])])));return{format:a,color:c}}const q=["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=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=l("span",{class:"vacp-visually-hidden"},"Copy color",-1),te=l("svg",{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),re={class:"vacp-color-inputs"},ae={class:"vacp-color-input-group"},ne=["for"],oe=l("span",{class:"vacp-color-input-label-text"}," Hex ",-1),ce=["id","value"],ie=["id","for","onInput"],le={class:"vacp-color-input-label-text"},se=["id","value","onInput"],pe=l("span",{class:"vacp-visually-hidden"},"Switch format",-1),ue=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 ve={__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:()=>q,validator:e=>e.length>0&&e.every((e=>q.includes(e)))},defaultFormat:{type:String,required:!1,default:"hsl",validator:e=>q.includes(e)},alphaChannel:{type:String,required:!1,default:"show",validator:e=>B.includes(e)}},emits:["color-change"],setup(f,{emit:b}){const m=f,w=e(null),x=e(null),k=e(null),y=e(!1),$=e(m.visibleFormats.includes(m.defaultFormat)?m.defaultFormat:m.visibleFormats[0]),z=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}}),C=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 M(e){y.value=!0,L(e)}function F(e){y.value=!0,I(e)}function E(){y.value=!1}function L(e){1===e.buttons&&!1!==y.value&&x.value instanceof HTMLElement&&j(x.value,e.clientX,e.clientY)}function I(e){if(!1===y.value||!(x.value instanceof HTMLElement))return;e.preventDefault();const t=e.touches[0];j(x.value,t.clientX,t.clientY)}function j(e,t,r){const a=function(e,t,r){const a=e.getBoundingClientRect(),n=t-a.left,o=r-a.top;return{x:g(n/a.width,0,1),y:g(1-o/a.height,0,1)}}(e,t,r),n=H(z.hsv);n.s=a.x,n.v=a.y,B("hsv",n)}function P(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key))return;e.preventDefault();const t=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,r=["ArrowLeft","ArrowRight"].includes(e.key)?"s":"v",a=e.shiftKey?10:1,n=z.hsv[r]+t*a*.01,o=H(z.hsv);o[r]=g(n,0,1),B("hsv",o)}function O(e){const t=W(e);null!==t&&B(t.format,t.color)}function _(e,t){const r=e.currentTarget,a=H(z.hsv);a[t]=parseInt(r.value)/parseInt(r.max),B("hsv",a)}function q(e,t){const r=e.target,a=H(z[$.value]),n=A[$.value][t].from(r.value);Number.isNaN(n)||void 0===n||(a[t]=n,B($.value,a))}function B(e,t){let r=t;if("hide"===m.alphaChannel)if("string"!=typeof t)t.a=1,r=t;else if([5,9].includes(t.length)){const e=(t.length-1)/4;r=t.substring(0,t.length-e)+"f".repeat(e)}else[4,7].includes(t.length)&&(r=t+"f".repeat((t.length-1)/3));if(!function(e,t){if("string"==typeof e||"string"==typeof t)return e===t;for(const r in e)if(e[r]!==t[r])return!1;return!0}(z[e],r)){!function(e,t){z[e]=t;for(const[t,r]of T[e])z[t]=r(z[e])}(e,r);const t=function(){const e="hide"===m.alphaChannel,t=D(z[$.value],$.value,e);return{colors:z,cssColor:t}}();b("color-change",t)}!function(){if(!(w.value instanceof HTMLElement&&x.value instanceof HTMLElement&&k.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.setAttribute("style","\n\t\tposition: relative;\n\t\tbackground-color: hsl(calc(var(--vacp-hsl-h) * 360) 100% 50%); /* 1. */\n\t\tbackground-image:\n\t\t\tlinear-gradient(to top, #000, transparent),  /* 2. */\n\t\t\tlinear-gradient(to right, #fff, transparent) /* 2. */\n\t\t;\n\t"),k.value.setAttribute("style",`\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tleft: ${100*z.hsv.s}%;   /* 3. */\n\t\tbottom: ${100*z.hsv.v}%; /* 3. */\n\t`)}()}async function ve(){const e=z[$.value],t="hide"===m.alphaChannel,r=D(e,$.value,t);await window.navigator.clipboard.writeText(r)}function he(e,t){return A[e][t].to(z[e][t])}function de(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key)||!e.shiftKey)return;const t=e.currentTarget,r=parseFloat(t.step),a=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,n=g(parseFloat(t.value)+a*r*10,parseInt(t.min),parseInt(t.max));t.value=String(n-a*r)}return a((()=>m.color),O),n((function(){document.addEventListener("mousemove",L,{passive:!1}),document.addEventListener("touchmove",I,{passive:!1}),document.addEventListener("mouseup",E),document.addEventListener("touchend",E),O(m.color)})),o((function(){document.removeEventListener("mousemove",L),document.removeEventListener("touchmove",I),document.removeEventListener("mouseup",E),document.removeEventListener("touchend",E)})),(e,t)=>(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:k,class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:P},null,544)],544),l("div",K,[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:de,onInput:t[0]||(t[0]=e=>_(e,"h"))},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:de,onInput:t[1]||(t[1]=e=>_(e,"a"))},null,40,Z)],8,J)):p("v-if",!0)]),l("button",{class:"vacp-copy-button",type:"button",onClick:ve},[s(e.$slots,"copy-button",{},(()=>[ee,te]))]),l("div",re,[l("div",ae,["hex"===$.value?(c(),i("label",{key:0,class:"vacp-color-input-label",for:`${f.id}-color-hex`},[oe,l("input",{id:`${f.id}-color-hex`,class:"vacp-color-input",type:"text",value:u(N),onInput:t[2]||(t[2]=e=>function(e){const t=e.target;U(t.value)&&B("hex",t.value)}(e))},null,40,ce)],8,ne)):(c(!0),i(v,{key:1},h(u(C),(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:t=>q(t,e)},[l("span",le,d(e.toUpperCase()),1),l("input",{id:`${f.id}-color-${$.value}`,class:"vacp-color-input",type:"text",value:he($.value,e),onInput:t=>q(t,e)},null,40,se)],40,ie)))),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",{},(()=>[pe,ue]))])):p("v-if",!0)])],512))}};!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&a.firstChild?a.insertBefore(n,a.firstChild):a.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);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}"),ve.__file="src/ColorPicker.vue";const he={install(e){e.component("ColorPicker",ve)}};export{ve as ColorPicker,he as default};

package.json

 {
 	"name": "vue-accessible-color-picker",
-	"version": "4.0.7",
+	"version": "4.1.0",
 	"license": "MIT",
@@ -5,0 +5,0 @@ "description": "Accessible color picker component for Vue.js",

README.md

@@ -223,27 +223,19 @@ # vue-accessible-color-picker
 - **Description**: Overrides the content of the hue range input’s `label` element.
-- **Default content**:
+- **Default content**: Hue
 
-	> Hue
-
 #### alpha-range-input-label
 
 - **Description**: Overrides the content of the alpha range input’s `label` element.
-- **Default content**:
+- **Default content**: Alpha
 
-	> Alpha
-
 #### copy-button
 
 - **Description**: Overrides the content of the copy button element.
-- **Default content**:
+- **Default content**: Copy color (and SVG icon)
 
-	> Copy color
-
 #### format-switch-button
 
 - **Description**: Overrides the content of the format switch button element.
-- **Default content**:
+- **Default content**: Switch format (and SVG icon)
 
-	> Switch format
-
 ## Versioning
@@ -250,0 +242,0 @@

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

43196

increased by3%

Lines of code

162

increased by2.53%

Worsened metrics

Number of lines in readme file

273

decreased by-2.85%

No dependency changes