Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-accessible-color-picker

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 3.3.1 to 4.0.0

2

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

@@ -1,1 +0,1 @@

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

2

dist/vue-accessible-color-picker.js

@@ -1,1 +0,1 @@

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

41

package.json
{
"name": "vue-accessible-color-picker",
"version": "3.3.1",
"version": "4.0.0",
"license": "MIT",

@@ -26,8 +26,6 @@ "description": "Accessible color picker component for Vue.js",

],
"type": "module",
"exports": {
".": "./dist/vue-accessible-color-picker.js",
"./unstyled": "./dist/vue-accessible-color-picker-unstyled.js",
"./esm": "./dist/vue-accessible-color-picker.esm.js",
"./esm/unstyled": "./dist/vue-accessible-color-picker-unstyled.esm.js",
"./dist/vue-accessible-color-picker-unstyled.js": "./dist/vue-accessible-color-picker-unstyled.js"
"./unstyled": "./dist/vue-accessible-color-picker-unstyled.js"
},

@@ -45,3 +43,3 @@ "main": "./dist/vue-accessible-color-picker.js",

"start": "NODE_ENV=development rollup --config --watch",
"test": "jest",
"test": "vitest run --coverage",
"lint": "eslint --ext .js,.vue src",

@@ -57,7 +55,4 @@ "lint:fix": "npm run lint -- --fix",

"devDependencies": {
"@babel/core": "^7.17.2",
"@babel/preset-env": "^7.16.11",
"@commitlint/cli": "^16.1.0",
"@commitlint/config-conventional": "^16.0.0",
"@rollup/plugin-babel": "^5.3.0",
"@commitlint/cli": "^16.2.3",
"@commitlint/config-conventional": "^16.2.1",
"@semantic-release/changelog": "^6.0.1",

@@ -67,16 +62,14 @@ "@semantic-release/commit-analyzer": "^9.0.2",

"@semantic-release/github": "^8.0.2",
"@semantic-release/npm": "^9.0.0",
"@semantic-release/npm": "^9.0.1",
"@semantic-release/release-notes-generator": "^10.0.3",
"@types/jest": "^27.4.0",
"@vitejs/plugin-vue": "^2.3.1",
"@vue/test-utils": "^2.0.0-rc.18",
"@vue/vue3-jest": "^27.0.0-alpha.4",
"babel-jest": "^27.5.1",
"canvas": "^2.9.0",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-vue": "^7.20.0",
"c8": "^7.11.0",
"canvas": "^2.9.1",
"eslint": "^8.12.0",
"eslint-plugin-vue": "^8.5.0",
"husky": "^7.0.4",
"jest": "^27.5.1",
"postcss": "^8.4.6",
"rollup": "^2.67.2",
"jsdom": "^19.0.0",
"postcss": "^8.4.12",
"rollup": "^2.70.1",
"rollup-plugin-postcss": "^4.0.2",

@@ -86,4 +79,6 @@ "rollup-plugin-terser": "^7.0.2",

"semantic-release": "^19.0.2",
"standard": "^16.0.4"
"standard": "^16.0.4",
"vite": "^2.9.1",
"vitest": "^0.8.4"
}
}

86

README.md

@@ -7,2 +7,4 @@ # vue-accessible-color-picker

This package’s files are distributed in the ES module format and have not been transpiled.
Links:

@@ -47,7 +49,7 @@

### Register component locally
In a Vue single file component, import the `ColorPicker` component.
In a Vue single file component (SFC), import the `ColorPicker` plugin and register the component via the `components` property on the Vue instance. You can then use it in the file’s `template` section.
When using [Vue’s composition API](https://vuejs.org/guide/extras/composition-api-faq.html), you can directly use it in the file’s `template` section.
```html
```vue
<template>

@@ -57,4 +59,16 @@ <ColorPicker />

<script setup>
import { ColorPicker } from 'vue-accessible-color-picker'
</script>
```
When using Vue’s options API, the component must also be registered using the `components` property on the Vue instance.
```vue
<template>
<ColorPicker />
</template>
<script>
import { ColorPicker } from 'vue-accessible-color-picker';
import { ColorPicker } from 'vue-accessible-color-picker'

@@ -71,46 +85,8 @@ export default {

If you want to use the unstyled variant of the component, you need to adjust the import statement slightly:
If you want to use the unstyled variant of the component, you need to adjust the import statement to use the module specifier “vue-accessible-color-picker/unstyled”:
```js
import { ColorPicker } from 'vue-accessible-color-picker/unstyled';
import { ColorPicker } from 'vue-accessible-color-picker/unstyled'
```
### Register component globally
Registering a component globally allows you to use it in all Vue templates without the need to register it via an SFC’s `components` property first.
In your Vue project’s `main.js` file (i.e. where you call `app.mount`), import the `ColorPicker` plugin and register the component using `app.component`.
```js
import { ColorPicker } from 'vue-accessible-color-picker';
app.component('ColorPicker', ColorPicker)
```
**Unstyled component**:
```js
import { ColorPicker } from 'vue-accessible-color-picker/unstyled';
app.component('ColorPicker', ColorPicker)
```
### Use untranspiled ES modules
The component is also available as an untranspiled ES module. Import them using the module specifier subpath “esm” as shown below.
```js
import { ColorPicker } from 'vue-accessible-color-picker/esm';
app.component('ColorPicker', ColorPicker)
```
**Unstyled component**:
```js
import { ColorPicker } from 'vue-accessible-color-picker/esm/unstyled';
app.component('ColorPicker', ColorPicker)
```
## Documentation

@@ -128,15 +104,15 @@

```html
```vue
<ColorPicker color="hsl(270 100% 50% / 0.8)" />
```
```html
```vue
<ColorPicker color="#f80b" />
```
```html
```vue
<ColorPicker :color="{ h: 0.75, s: 1, l: 0.5, a: 0.8 }" />
```
```html
```vue
<template>

@@ -171,3 +147,3 @@ <ColorPicker :color="color" @color-change="updateColor" />

```html
```vue
<ColorPicker :visible-formats="['hsl', 'hwb']" />

@@ -184,3 +160,3 @@ ```

```html
```vue
<ColorPicker default-format="hwb" />

@@ -197,3 +173,3 @@ ```

```html
```vue
<ColorPicker alpha-channel="hide" />

@@ -210,3 +186,3 @@ ```

```html
```vue
<ColorPicker id="color-picker-1" />

@@ -237,3 +213,3 @@ ```

```html
```vue
<template>

@@ -328,1 +304,5 @@ <ColorPicker

Cycles through the available color formats (currently HEX, HSL, HWB, and RGB).
## To do
- Updating eslint/eslint-plugin-vue to ^v8.x depends on the release of eslint-config-standard (see: https://github.com/standard/eslint-config-standard/issues/208) so for now standard and eslint-config-standard have been remove. Add them again once it’s possible.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc