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

Comparing version 4.1.1 to 4.1.2

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

package.json

 {
 	"name": "vue-accessible-color-picker",
-	"version": "4.1.1",
+	"version": "4.1.2",
 	"license": "MIT",
@@ -5,0 +5,0 @@ "description": "Color picker component for Vue.js",

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

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

Improved metrics

Total package byte prevSize

42925

increased by0.06%

Worsened metrics

Number of downloads

2548

decreased by-38.71%

No dependency changes