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

Comparing version 4.1.2 to 4.1.3

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

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

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

LICENSE.txt

@@ -1,2 +0,2 @@
-Copyright 2022 Philipp Rudloff
+Copyright 2023 Philipp Rudloff
 
@@ -3,0 +3,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

package.json

 {
 	"name": "vue-accessible-color-picker",
-	"version": "4.1.2",
+	"version": "4.1.3",
 	"license": "MIT",
@@ -28,4 +28,11 @@ "description": "Color picker component for Vue.js",
 	"exports": {
-		".": "./dist/vue-accessible-color-picker.js",
-		"./unstyled": "./dist/vue-accessible-color-picker-unstyled.js"
+		".": {
+			"types": "./types/index.d.ts",
+			"default": "./dist/vue-accessible-color-picker.js"
+		},
+		"./unstyled": {
+			"types": "./types/index.d.ts",
+			"default": "./dist/vue-accessible-color-picker-unstyled.js"
+		},
+		"./types/index.d.ts": "./types/index.d.ts"
 	},
@@ -48,3 +55,2 @@ "main": "./dist/vue-accessible-color-picker.js",
 		"lint:fix": "npm run lint -- --fix",
-		"semantic-release": "semantic-release",
 		"prepare": "husky install",
@@ -57,31 +63,31 @@ "prepublishOnly": "npm run build"
 	"devDependencies": {
-		"@commitlint/cli": "^17.2.0",
-		"@commitlint/config-conventional": "^17.2.0",
-		"@rollup/plugin-terser": "^0.1.0",
-		"@semantic-release/changelog": "^6.0.1",
+		"@commitlint/cli": "^17.6.3",
+		"@commitlint/config-conventional": "^17.6.3",
+		"@rollup/plugin-terser": "^0.4.3",
+		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/commit-analyzer": "^9.0.2",
 		"@semantic-release/git": "^10.0.1",
-		"@semantic-release/github": "^8.0.6",
-		"@semantic-release/npm": "^9.0.1",
-		"@semantic-release/release-notes-generator": "^10.0.3",
-		"@vitejs/plugin-vue": "^3.2.0",
-		"@vitest/coverage-c8": "^0.25.1",
-		"@vue/test-utils": "^2.2.2",
-		"c8": "^7.12.0",
-		"canvas": "^2.10.2",
-		"eslint": "^8.27.0",
+		"@semantic-release/github": "^8.0.7",
+		"@semantic-release/npm": "^10.0.3",
+		"@semantic-release/release-notes-generator": "^11.0.1",
+		"@vitejs/plugin-vue": "^4.2.3",
+		"@vitest/coverage-c8": "^0.31.1",
+		"@vue/test-utils": "^2.3.2",
+		"c8": "^7.13.0",
+		"canvas": "^2.11.2",
+		"eslint": "^8.40.0",
 		"eslint-config-standard": "^17.0.0",
-		"eslint-plugin-vue": "^9.7.0",
-		"husky": "^8.0.2",
-		"jsdom": "^20.0.2",
-		"postcss": "^8.4.19",
-		"rimraf": "^3.0.2",
-		"rollup": "^3.3.0",
+		"eslint-plugin-vue": "^9.13.0",
+		"husky": "^8.0.3",
+		"jsdom": "^22.0.0",
+		"postcss": "^8.4.23",
+		"rimraf": "^5.0.1",
+		"rollup": "^3.22.0",
 		"rollup-plugin-postcss": "^4.0.2",
 		"rollup-plugin-vue": "^6.0.0",
-		"semantic-release": "^19.0.5",
+		"semantic-release": "^21.0.2",
 		"standard": "^17.0.0",
-		"vite": "^3.2.3",
-		"vitest": "^0.25.1"
+		"vite": "^4.3.8",
+		"vitest": "^0.31.1"
 	}
 }

README.md

@@ -17,2 +17,3 @@ # vue-accessible-color-picker
 	- [contributing guidelines](https://github.com/kleinfreund/vue-accessible-color-picker/blob/main/CONTRIBUTING.md)
+- as a web component: [yet-another-color-picker](https://www.npmjs.com/package/yet-another-color-picker)
 
@@ -97,3 +98,3 @@ ## Contents
 - **Required**: `false`
-- **Default**: `#ffffffff`
+- **Default**: `'#ffffffff'`
 - **Usage**:
@@ -150,3 +151,3 @@
 - **Required**: `false`
-- **Default**: `'rgb'`
+- **Default**: `'hsl'`
 - **Usage**:
@@ -186,3 +187,3 @@
 
-- **Description**: An `input` event is emitted each time the internal colors object is updated.
+- **Description**: The event that is emitted each time the internal colors object is updated.
 - **Data**: The event emits an object containing both the internal colors object and a CSS color value as a string based on the currently active format. The `cssColor` property will respect `alphaChannel`.
@@ -194,6 +195,6 @@
 			hex: string
-			hsl: ColorHsl
-			hsv: ColorHsv
-			hwb: ColorHwb
-			rgb: ColorRgb
+			hsl: { h: number, s: number, l: number, a: number }
+			hsv: { h: number, s: number, v: number, a: number }
+			hwb: { h: number, w: number, b: number, a: number }
+			rgb: { r: number, g: number, b: number, a: number }
 		}
@@ -200,0 +201,0 @@ cssColor: string

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

43361

increased by1.02%

Number of downloads

4157

increased by63.15%

Lines of code

162

increased by0.62%

Number of lines in readme file

274

increased by0.37%

No dependency changes