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

Comparing version 2.1.0 to 3.0.0

CHANGELOG.md

@@ -0,1 +1,21 @@
+# [3.0.0](https://github.com/kleinfreund/vue-accessible-color-picker/compare/v2.1.0...v3.0.0) (2021-03-21)
+
+
+### chore
+
+* **types:** remove VueAccessibleColorPicker namespace ([696814f](https://github.com/kleinfreund/vue-accessible-color-picker/commit/696814f8d8f119499b535aba17808b0bd185215f))
+* change default format to HSL ([2d746bc](https://github.com/kleinfreund/vue-accessible-color-picker/commit/2d746bc7aa28a9f7cb4c3535999c26bac9741e7e))
+
+
+### Features
+
+* improve color prop parsing ([8b74dbd](https://github.com/kleinfreund/vue-accessible-color-picker/commit/8b74dbd0d3a6bd502d62e1c367c999c8bc8d54d6))
+
+
+### BREAKING CHANGES
+
+* **types:** Removes the `VueAccessibleColorPicker` namespace from types.
+* Changes the default color format from `'rgb'` to `'hsl'`. To upgrade without changing this in your application, you can pass `'rgb'` to the `defaultFormat` prop.
+* Updates browser support on account of using `Object.fromEntries`. Most notably, Edge using the EdgeHTML engine and Safari versions before 12.2 are no longer supported. Please refer to the README.md file for the complete list.
+
 # [2.1.0](https://github.com/kleinfreund/vue-accessible-color-picker/compare/v2.0.0...v2.1.0) (2021-03-21)
@@ -2,0 +22,0 @@

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 o(e,t,o){return Math.max(t,Math.min(e,o))}function r(e,t=2){return e.toFixed(t).replace(/0+$/,"").replace(/\.$/,"")}const n={fromHueAngle(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360},toHueAngle:e=>r(360*e),fromPercentage(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:o(r,0,100)/100},toPercentage:e=>r(100*e)+"%",from8BitDecimal(e){if(e.endsWith("%"))return n.fromPercentage(e);if(e.endsWith("."))return NaN;const t=parseFloat(e);return Number.isNaN(t)?NaN:o(t,0,255)/255},to8BitDecimal:e=>r(255*e),fromAlpha:e=>e.endsWith("%")?n.fromPercentage(e):o(parseFloat(e),0,1),toAlpha:e=>String(e)},a={hsl:{h:{to:n.toHueAngle,from:n.fromHueAngle},s:{to:n.toPercentage,from:n.fromPercentage},l:{to:n.toPercentage,from:n.fromPercentage},a:{to:n.toAlpha,from:n.fromAlpha}},hwb:{h:{to:n.toHueAngle,from:n.fromHueAngle},w:{to:n.toPercentage,from:n.fromPercentage},b:{to:n.toPercentage,from:n.fromPercentage},a:{to:n.toAlpha,from:n.fromAlpha}},rgb:{r:{to:n.to8BitDecimal,from:n.from8BitDecimal},g:{to:n.to8BitDecimal,from:n.from8BitDecimal},b:{to:n.to8BitDecimal,from:n.from8BitDecimal},a:{to:n.toAlpha,from:n.fromAlpha}}};function s(e){const t=e.replace(/^#/,""),o=[],r=t.length>4?2:1;for(let e=0;e<t.length;e+=r){const n=t.slice(e,e+r);o.push(n.repeat(r%2+1))}3===o.length&&o.push("ff");const n=o.map((e=>parseInt(e,16)/255));return{r:n[0],g:n[1],b:n[2],a:n[3]}}function l(e){const t=e.l<.5?e.l*(1+e.s):e.l+e.s-e.l*e.s,o=2*e.l-t;return{r:i(o,t,e.h+1/3),g:i(o,t,e.h),b:i(o,t,e.h-1/3),a:e.a}}function i(e,t,o){return o<0?o+=1:o>1&&(o-=1),o<1/6?e+6*(t-e)*o:o<.5?t:o<2/3?e+(t-e)*(2/3-o)*6:e}function c(e){return{r:u(5,e),g:u(3,e),b:u(1,e),a:e.a}}function u(e,t){const o=(e+6*t.h)%6;return t.v-t.v*t.s*Math.max(0,Math.min(o,4-o,1))}function h(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),o=Math.max(e.r,e.g,e.b);let r;r=o===t?0:o===e.r?(0+(e.g-e.b)/(o-t))/6:o===e.g?(2+(e.b-e.r)/(o-t))/6:(4+(e.r-e.g)/(o-t))/6,r<0&&(r+=1);const n=(o+t)/2;let a;return a=0===o||1===t?0:(o-n)/Math.min(n,1-n),{h:r,s:a,l:n,a:e.a}}function m(e){const t=Math.min(e.r,e.g,e.b),o=Math.max(e.r,e.g,e.b);let r,n;r=o===t?0:o===e.r?(0+(e.g-e.b)/(o-t))/6:o===e.g?(2+(e.b-e.r)/(o-t))/6:(4+(e.r-e.g)/(o-t))/6,r<0&&(r+=1),n=0===o?0:(o-t)/o;return{h:r,s:n,v:o,a:e.a}}function d(e){return"#"+Object.values(e).map((e=>{const t=255*e,o=Math.round(t).toString(16);return 1===o.length?"0"+o:o})).join("")}function v(e){const t=Math.min(e.r,e.g,e.b),o=Math.max(e.r,e.g,e.b);let r;return r=o===t?0:o===e.r?(0+(e.g-e.b)/(o-t))/6:o===e.g?(2+(e.b-e.r)/(o-t))/6:(4+(e.r-e.g)/(o-t))/6,r<0&&(r+=1),{h:r,w:t,b:1-o,a:e.a}}const f={hex:{hsl:function(e){return p(s(e))},hsv:function(e){return m(s(e))},hwb:function(e){return v(s(e))},rgb:s},hsl:{hex:function(e){return d(l(e))},hsv:function(e){const t=e.l+e.s*Math.min(e.l,1-e.l),o=0===t?0:2-2*e.l/t;return{h:e.h,s:o,v:t,a:e.a}},hwb:function(e){return v(l(e))},rgb:l},hsv:{hex:function(e){return d(c(e))},hsl:function(e){const t=e.v-e.v*e.s/2,o=Math.min(t,1-t),r=0===o?0:(e.v-t)/o;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:c},hwb:{hex:function(e){return d(g(e))},hsl:function(e){return p(g(e))},hsv:h,rgb:g},rgb:{hex:d,hsl:p,hsv:m,hwb:v}};function g(e){return c(h(e))}function b(e,t,o){return f[t][o](e)}const y={hex:e=>e,hsl:e=>`hsl(${r(360*e.h)} ${r(100*e.s)}% ${r(100*e.l)}% / ${r(e.a)})`,hwb:e=>`hwb(${r(360*e.h)} ${r(100*e.w)}% ${r(100*e.b)}% / ${r(e.a)})`,rgb:e=>`rgb(${r(255*e.r)} ${r(255*e.g)} ${r(255*e.b)} / ${r(e.a)})`};function C(e,t){return y[t](e)}function w(e){return!!e.startsWith("#")&&(!![3,4,6,8].includes(e.length-1)&&/^#[0-9A-Fa-f]+$/.test(e))}const x=["hex","hsl","hwb","rgb"];var V={name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:null},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>x,validator:e=>e.length>0&&e.every((e=>x.includes(e)))},defaultFormat:{type:String,required:!1,default:"rgb",validator:e=>x.includes(e)}},emits:["color-change"],data(){return{pointerOriginatedInColorSpace:!1,activeFormat:this.defaultFormat,colors:{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}}}},watch:{color(e){this.setColorValueFromProp(e)}},created(){this.supportedFormats=["hex","hsl","hsv","hwb","rgb"]},mounted(){this.initThumbPointerNavigation(),this.setColorValueFromProp(this.color)},beforeUnmount(){document.removeEventListener("mousemove",this.moveThumbWithMouse),document.removeEventListener("touchmove",this.moveThumbWithTouch),document.removeEventListener("mouseup",this.stopMovingThumb),document.removeEventListener("touchend",this.stopMovingThumb)},methods:{initThumbPointerNavigation(){document.addEventListener("mousemove",this.moveThumbWithMouse,{passive:!1}),document.addEventListener("touchmove",this.moveThumbWithTouch,{passive:!1}),document.addEventListener("mouseup",this.stopMovingThumb),document.addEventListener("touchend",this.stopMovingThumb)},startMovingThumb(){this.pointerOriginatedInColorSpace=!0},stopMovingThumb(){this.pointerOriginatedInColorSpace=!1},moveThumbWithMouse(e){1===e.buttons&&!1!==this.pointerOriginatedInColorSpace&&this.moveThumb(e.clientX,e.clientY)},moveThumbWithTouch(e){!1!==this.pointerOriginatedInColorSpace&&(e.preventDefault(),this.moveThumb(e.touches[0].clientX,e.touches[0].clientY))},moveThumb(e,t){const r=this.$refs.colorSpace.getBoundingClientRect(),n=e-r.left,a=t-r.top,s={...this.colors.hsv};s.s=o(n/r.width,0,1),s.v=o(1-a/r.height,0,1),this.setColorValue(s,"hsv")},moveThumbWithArrows(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",n=e.shiftKey?10:1,a=this.colors.hsv[r]+t*n*.01,s={...this.colors.hsv};s[r]=o(a,0,1),this.setColorValue(s,"hsv")},changeInputValue(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key)||!e.shiftKey)return;const t=e.currentTarget,r=parseFloat(t.step),n=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,a=o(parseFloat(t.value)+n*r*10,parseInt(t.min),parseInt(t.max));t.value=String(a-n*r)},setColorValue(e,t){if(!function(e,t){if("string"==typeof e||"string"==typeof t)return e===t;for(const o in e)if(e[o]!==t[o])return!1;return!0}({...this.colors[t]},e)){this.colors[t]=e;const o=this.applyColorUpdates(t);this.$emit("color-change",o)}},applyColorUpdates(e){return this.colors=this.reCalculateColors(this.colors,e),this.setCssProps(this.$refs.colorPicker,this.$refs.colorSpace,this.$refs.thumb,this.colors),this.getEventData(this.colors,this.activeFormat)},setColorValueFromProp(e){var t;if(null!==e)if("string"!=typeof e){const o=(t=e,Object.prototype.hasOwnProperty.call(t,"r")?"rgb":Object.prototype.hasOwnProperty.call(t,"w")?"hwb":Object.prototype.hasOwnProperty.call(t,"v")?"hsv":"hsl");this.setColorValue(e,o)}else if(w(e))this.setColorValue(e,"hex");else{const t=function(e){const t=document.createElement("span");if(t.style.display="none",t.style.color=e,""===t.style.color)return"";document.body.appendChild(t);const o=getComputedStyle(t).color;return t.remove(),o}(e);""!==t&&this.setColorValue(function(e){const t=e.substring(e.indexOf("(")+1,e.indexOf(")")).replace(/[,/]/g," ").replace(/\s+/g," ").split(" ");return{r:n.from8BitDecimal(t[0]),g:n.from8BitDecimal(t[1]),b:n.from8BitDecimal(t[2]),a:4===t.length?n.fromAlpha(t[3]):1}}(t),"rgb")}},reCalculateColors(e,t){const o=e[t],r=this.supportedFormats.filter((e=>e!==t)),n={...e};for(const e of r){const r=b(o,t,e);n[e]=r}return n},copyColor(){!function(e){if("function"!=typeof document.queryCommandSupported||!document.queryCommandSupported("copy"))return!1;const t=document.createElement("textarea");let o;t.textContent=e,t.style.position="fixed",document.body.appendChild(t),t.select();try{o=document.execCommand("copy")}catch{o=!1}finally{document.body.removeChild(t)}}(C(this.colors[this.activeFormat],this.activeFormat))},updateHue(e){const t=e.currentTarget,o={...this.colors.hsv};o.h=parseInt(t.value)/360,this.setColorValue(o,"hsv")},updateAlpha(e){const t=e.currentTarget,o={...this.colors.hsv};o.a=parseInt(t.value)/100,this.setColorValue(o,"hsv")},updateColorValue(e,t,o){const r=e.target,n={...this.colors[t]},s=a[t][o].from(r.value);Number.isNaN(s)||void 0===s||(n[o]=s,this.setColorValue(n,t))},updateHexColorValue(e){const t=e.target;w(t.value)&&this.setColorValue(t.value,"hex")},switchFormat(){const e=this.visibleFormats.findIndex((e=>e===this.activeFormat)),t=e===this.visibleFormats.length-1?0:e+1;this.activeFormat=this.visibleFormats[t]},getChannelAsCssValue(e,t){return a[e][t].to(this.colors[e][t])},getEventData:(e,t)=>({colors:{...e},cssColor:C(e[t],t)}),setCssProps(e,t,o,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      "),o.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      `)}}};const A={ref:"colorPicker",class:"vacp-color-picker"},N={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},$=t.createTextVNode("Hue"),F={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},T=t.createTextVNode("Alpha"),P=t.createTextVNode(" Copy color "),k={class:"vacp-color-inputs"},M={class:"vacp-color-input-group"},S=t.createVNode("span",{class:"vacp-color-input-label-text"}," Hex ",-1),I={class:"vacp-color-input-label-text"},B=t.createTextVNode(" Switch format ");V.render=function(e,o,r,n,a,s){return t.openBlock(),t.createBlock("div",A,[t.createVNode("div",{ref:"colorSpace",class:"vacp-color-space",onMousedown:o[2]||(o[2]=(...e)=>s.startMovingThumb&&s.startMovingThumb(...e)),onTouchstart:o[3]||(o[3]=(...e)=>s.startMovingThumb&&s.startMovingThumb(...e))},[t.createVNode("div",{ref:"thumb",class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:o[1]||(o[1]=(...e)=>s.moveThumbWithArrows&&s.moveThumbWithArrows(...e))},null,544)],544),t.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${r.id}-hue-slider`},[t.createVNode("span",N,[t.renderSlot(e.$slots,"hue-range-input-label",{},(()=>[$]))]),t.createVNode("input",{id:`${r.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*a.colors.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:o[4]||(o[4]=(...e)=>s.changeInputValue&&s.changeInputValue(...e)),onInput:o[5]||(o[5]=(...e)=>s.updateHue&&s.updateHue(...e))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${r.id}-alpha-slider`},[t.createVNode("span",F,[t.renderSlot(e.$slots,"alpha-range-input-label",{},(()=>[T]))]),t.createVNode("input",{id:`${r.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*a.colors.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:o[6]||(o[6]=(...e)=>s.changeInputValue&&s.changeInputValue(...e)),onInput:o[7]||(o[7]=(...e)=>s.updateAlpha&&s.updateAlpha(...e))},null,40,["id","value"])],8,["for"]),t.createVNode("button",{class:"vacp-copy-button",type:"button",onClick:o[8]||(o[8]=(...e)=>s.copyColor&&s.copyColor(...e))},[t.renderSlot(e.$slots,"copy-button",{},(()=>[P]))]),t.createVNode("div",k,[t.createVNode("div",M,["hex"===a.activeFormat?(t.openBlock(),t.createBlock("label",{key:0,class:"vacp-color-input-label",for:`${r.id}-color-hex`},[S,t.createVNode("input",{id:`${r.id}-color-hex`,class:"vacp-color-input",type:"text",value:a.colors.hex,onInput:o[9]||(o[9]=e=>s.updateHexColorValue(e))},null,40,["id","value"])],8,["for"])):(t.openBlock(!0),t.createBlock(t.Fragment,{key:1},t.renderList(Object.keys(a.colors[a.activeFormat]),(e=>(t.openBlock(),t.createBlock("label",{id:`${r.id}-color-${a.activeFormat}-${e}`,key:`${r.id}-color-${a.activeFormat}-${e}`,class:"vacp-color-input-label",value:s.getChannelAsCssValue(a.activeFormat,e),for:`${r.id}-color-${a.activeFormat}`,onInput:t=>s.updateColorValue(t,a.activeFormat,e)},[t.createVNode("span",I,t.toDisplayString(e.toUpperCase()),1),t.createVNode("input",{id:`${r.id}-color-${a.activeFormat}`,class:"vacp-color-input",type:"text",value:s.getChannelAsCssValue(a.activeFormat,e),onInput:t=>s.updateColorValue(t,a.activeFormat,e)},null,40,["id","value","onInput"])],40,["id","value","for","onInput"])))),128))]),r.visibleFormats.length>1?(t.openBlock(),t.createBlock("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:o[10]||(o[10]=(...e)=>s.switchFormat&&s.switchFormat(...e))},[t.renderSlot(e.$slots,"format-switch-button",{},(()=>[B]))])):t.createCommentVNode("",!0)])],512)};var D={install(e){e.component("ColorPicker",V)}};e.ColorPicker=V,e.default=D,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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 o(e,t=2){return e.toFixed(t).replace(/0+$/,"").replace(/\.$/,"")}function r(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360}function a(e){return o(360*e)}function l(e){if(!e.endsWith("%"))return NaN;const t=e.substring(0,e.length-1);if(t.endsWith("."))return NaN;const o=parseFloat(t);return Number.isNaN(o)?NaN:n(o,0,100)/100}function c(e){return o(100*e)+"%"}function u(e){if(e.endsWith("%"))return l(e);if(e.endsWith("."))return NaN;const t=parseFloat(e);return Number.isNaN(t)?NaN:n(t,0,255)/255}function s(e){return o(255*e)}function i(e){return e.endsWith("%")?l(e):n(parseFloat(e),0,1)}function p(e){return String(e)}const h={hsl:{h:{to:a,from:r},s:{to:c,from:l},l:{to:c,from:l},a:{to:p,from:i}},hwb:{h:{to:a,from:r},w:{to:c,from:l},b:{to:c,from:l},a:{to:p,from:i}},rgb:{r:{to:s,from:u},g:{to:s,from:u},b:{to:s,from:u},a:{to:p,from:i}}};function f(e){const t=e.replace(/^#/,""),n=[],o=t.length>4?2:1;for(let e=0;e<t.length;e+=o){const r=t.slice(e,e+o);n.push(r.repeat(o%2+1))}3===n.length&&n.push("ff");const r=n.map((e=>parseInt(e,16)/255));return{r:r[0],g:r[1],b:r[2],a:r[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 o;o=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,o<0&&(o+=1);const r=(n+t)/2;let a;return a=0===n||1===t?0:(n-r)/Math.min(r,1-r),{h:o,s:a,l:r,a:e.a}}function w(e){const t=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b);let o,r;o=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,o<0&&(o+=1),r=0===n?0:(n-t)/n;return{h:o,s:r,v:n,a:e.a}}function x(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("")}function N(e){const t=Math.min(e.r,e.g,e.b),n=Math.max(e.r,e.g,e.b);let o;return o=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,o<0&&(o+=1),{h:o,w:t,b:1-n,a:e.a}}const $={hex:[["hsl",function(e){return y(f(e))}],["hsv",function(e){return w(f(e))}],["hwb",function(e){return N(f(e))}],["rgb",f]],hsl:[["hex",function(e){return x(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 N(d(e))}],["rgb",d]],hsv:[["hex",function(e){return x(m(e))}],["hsl",function(e){const t=e.v-e.v*e.s/2,n=Math.min(t,1-t),o=0===n?0:(e.v-t)/n;return{h:e.h,s:o,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 x(C(e))}],["hsl",function(e){return y(C(e))}],["hsv",g],["rgb",C]],rgb:[["hex",x],["hsl",y],["hsv",w],["hwb",N]]};function C(e){return m(g(e))}const k={hex:e=>e,hsl:e=>`hsl(${o(360*e.h)} ${o(100*e.s)}% ${o(100*e.l)}% / ${o(e.a)})`,hwb:e=>`hwb(${o(360*e.h)} ${o(100*e.w)}% ${o(100*e.b)}% / ${o(e.a)})`,rgb:e=>`rgb(${o(255*e.r)} ${o(255*e.g)} ${o(255*e.b)} / ${o(e.a)})`};function V(e,t){return k[t](e)}function F(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){return{format: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),color:e}}if(F(e))return{format:"hex",color:e};if(!e.includes("(")){const t=document.createElement("span");if(t.style.display="none",t.style.color=e,""===t.style.color)return null;document.body.appendChild(t),e=getComputedStyle(t).color,t.remove()}const[t,n]=e.split("("),o=t.substring(0,3),r=n.replace(/[,/)]/g," ").replace(/\s+/g," ").trim().split(" ");3===r.length&&r.push("1");const a=o.split("").concat("a"),l=Object.fromEntries(a.map(((e,t)=>[e,h[o][e].from(r[t])])));return{format:o,color:l}}const M=["hex","hsl","hwb","rgb"];var T={name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:null},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>M,validator:e=>e.length>0&&e.every((e=>M.includes(e)))},defaultFormat:{type:String,required:!1,default:"hsl",validator:e=>M.includes(e)}},emits:["color-change"],setup(e,o){const r=t.ref(null),a=t.ref(null),l=t.ref(null),c=t.ref(!1),u=t.ref(e.defaultFormat),s=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}});function i(){c.value=!1}function p(e){1===e.buttons&&!1!==c.value&&a.value instanceof HTMLElement&&d(a.value,e.clientX,e.clientY)}function f(e){!1!==c.value&&a.value instanceof HTMLElement&&(e.preventDefault(),d(a.value,e.touches[0].clientX,e.touches[0].clientY))}function d(e,t,o){const r=function(e,t,o){const r=e.getBoundingClientRect(),a=t-r.left,l=o-r.top;return{x:n(a/r.width,0,1),y:n(1-l/r.height,0,1)}}(e,t,o),a={...s.hsv};a.s=r.x,a.v=r.y,m("hsv",a)}function v(e){if(null===e)return;const t=A(e);null!==t&&m(t.format,t.color)}function m(e,t){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}(s[e],t)){s[e]=t;const n=function(e){for(const[t,n]of $[e])s[t]=n(s[e]);r.value instanceof HTMLElement&&a.value instanceof HTMLElement&&l.value instanceof HTMLElement&&function(e,t,n,o){e.style.setProperty("--vacp-hsl-h",String(o.hsl.h)),e.style.setProperty("--vacp-hsl-s",String(o.hsl.s)),e.style.setProperty("--vacp-hsl-l",String(o.hsl.l)),e.style.setProperty("--vacp-hsl-a",String(o.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*o.hsv.s}%;   /* 3. */\n    bottom: ${100*o.hsv.v}%; /* 3. */\n  `)}(r.value,a.value,l.value,s);return function(e,t){return{colors:{...e},cssColor:V(e[t],t)}}(s,u.value)}(e);o.emit("color-change",n)}}return t.watch((()=>e.color),(e=>{v(e)})),t.onMounted((()=>{document.addEventListener("mousemove",p,{passive:!1}),document.addEventListener("touchmove",f,{passive:!1}),document.addEventListener("mouseup",i),document.addEventListener("touchend",i),v(e.color)})),t.onBeforeUnmount((()=>{document.removeEventListener("mousemove",p),document.removeEventListener("touchmove",f),document.removeEventListener("mouseup",i),document.removeEventListener("touchend",i)})),{colorPicker:r,colorSpace:a,thumb:l,activeFormat:u,colors:s,pointerOriginatedInColorSpace:c,supportedFormats:["hex","hsl","hsv","hwb","rgb"],startMovingThumb:function(){c.value=!0},moveThumbWithArrows:function(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key))return;e.preventDefault();const t=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,o=["ArrowLeft","ArrowRight"].includes(e.key)?"s":"v",r=e.shiftKey?10:1,a=s.hsv[o]+t*r*.01,l={...s.hsv};l[o]=n(a,0,1),m("hsv",l)},changeInputValue:S,copyColor:function(){!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)}}(V(s[u.value],u.value))},updateHue:function(e){const t=e.currentTarget,n={...s.hsv};n.h=parseInt(t.value)/360,m("hsv",n)},updateAlpha:function(e){const t=e.currentTarget,n={...s.hsv};n.a=parseInt(t.value)/100,m("hsv",n)},updateColorValue:function(e,t,n){const o=e.target,r={...s[t]},a=h[t][n].from(o.value);Number.isNaN(a)||void 0===a||(r[n]=a,m(t,r))},updateHexColorValue:function(e){const t=e.target;F(t.value)&&m("hex",t.value)},switchFormat:function(){const t=e.visibleFormats.findIndex((e=>e===u.value)),n=t===e.visibleFormats.length-1?0:t+1;u.value=e.visibleFormats[n]},getChannelAsCssValue:function(e,t){return h[e][t].to(s[e][t])}}}};function S(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key)||!e.shiftKey)return;const t=e.currentTarget,o=parseFloat(t.step),r=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,a=n(parseFloat(t.value)+r*o*10,parseInt(t.min),parseInt(t.max));t.value=String(a-r*o)}const I={ref:"colorPicker",class:"vacp-color-picker"},L={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},E=t.createTextVNode("Hue"),P={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},B=t.createTextVNode("Alpha"),H=t.createTextVNode(" Copy color "),O={class:"vacp-color-inputs"},j={class:"vacp-color-input-group"},W=t.createVNode("span",{class:"vacp-color-input-label-text"}," Hex ",-1),q={class:"vacp-color-input-label-text"},D=t.createTextVNode(" Switch format ");T.render=function(e,n,o,r,a,l){return t.openBlock(),t.createBlock("div",I,[t.createVNode("div",{ref:"colorSpace",class:"vacp-color-space",onMousedown:n[2]||(n[2]=(...e)=>r.startMovingThumb&&r.startMovingThumb(...e)),onTouchstart:n[3]||(n[3]=(...e)=>r.startMovingThumb&&r.startMovingThumb(...e))},[t.createVNode("div",{ref:"thumb",class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:n[1]||(n[1]=(...e)=>r.moveThumbWithArrows&&r.moveThumbWithArrows(...e))},null,544)],544),t.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${o.id}-hue-slider`},[t.createVNode("span",L,[t.renderSlot(e.$slots,"hue-range-input-label",{},(()=>[E]))]),t.createVNode("input",{id:`${o.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*r.colors.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:n[4]||(n[4]=(...e)=>r.changeInputValue&&r.changeInputValue(...e)),onInput:n[5]||(n[5]=(...e)=>r.updateHue&&r.updateHue(...e))},null,40,["id","value"])],8,["for"]),t.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${o.id}-alpha-slider`},[t.createVNode("span",P,[t.renderSlot(e.$slots,"alpha-range-input-label",{},(()=>[B]))]),t.createVNode("input",{id:`${o.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*r.colors.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:n[6]||(n[6]=(...e)=>r.changeInputValue&&r.changeInputValue(...e)),onInput:n[7]||(n[7]=(...e)=>r.updateAlpha&&r.updateAlpha(...e))},null,40,["id","value"])],8,["for"]),t.createVNode("button",{class:"vacp-copy-button",type:"button",onClick:n[8]||(n[8]=(...e)=>r.copyColor&&r.copyColor(...e))},[t.renderSlot(e.$slots,"copy-button",{},(()=>[H]))]),t.createVNode("div",O,[t.createVNode("div",j,["hex"===r.activeFormat?(t.openBlock(),t.createBlock("label",{key:0,class:"vacp-color-input-label",for:`${o.id}-color-hex`},[W,t.createVNode("input",{id:`${o.id}-color-hex`,class:"vacp-color-input",type:"text",value:r.colors.hex,onInput:n[9]||(n[9]=e=>r.updateHexColorValue(e))},null,40,["id","value"])],8,["for"])):(t.openBlock(!0),t.createBlock(t.Fragment,{key:1},t.renderList(Object.keys(r.colors[r.activeFormat]),(e=>(t.openBlock(),t.createBlock("label",{id:`${o.id}-color-${r.activeFormat}-${e}`,key:`${o.id}-color-${r.activeFormat}-${e}`,class:"vacp-color-input-label",for:`${o.id}-color-${r.activeFormat}`,onInput:t=>r.updateColorValue(t,r.activeFormat,e)},[t.createVNode("span",q,t.toDisplayString(e.toUpperCase()),1),t.createVNode("input",{id:`${o.id}-color-${r.activeFormat}`,class:"vacp-color-input",type:"text",value:r.getChannelAsCssValue(r.activeFormat,e),onInput:t=>r.updateColorValue(t,r.activeFormat,e)},null,40,["id","value","onInput"])],40,["id","for","onInput"])))),128))]),o.visibleFormats.length>1?(t.openBlock(),t.createBlock("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:n[10]||(n[10]=(...e)=>r.switchFormat&&r.switchFormat(...e))},[t.renderSlot(e.$slots,"format-switch-button",{},(()=>[D]))])):t.createCommentVNode("",!0)])],512)};var K={install(e){e.component("ColorPicker",T)}};e.ColorPicker=T,e.default=K,Object.defineProperty(e,"__esModule",{value:!0})}));

dist/vue-accessible-color-picker.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).AccessibleColorPicker={},e.vue)}(this,(function(e,n){"use strict";function t(e,n,t){return Math.max(n,Math.min(e,t))}function r(e,n=2){return e.toFixed(n).replace(/0+$/,"").replace(/\.$/,"")}const o={fromHueAngle(e){if(e.endsWith("."))return NaN;return(parseFloat(e)%360+360)%360/360},toHueAngle:e=>r(360*e),fromPercentage(e){if(!e.endsWith("%"))return NaN;const n=e.substring(0,e.length-1);if(n.endsWith("."))return NaN;const r=parseFloat(n);return Number.isNaN(r)?NaN:t(r,0,100)/100},toPercentage:e=>r(100*e)+"%",from8BitDecimal(e){if(e.endsWith("%"))return o.fromPercentage(e);if(e.endsWith("."))return NaN;const n=parseFloat(e);return Number.isNaN(n)?NaN:t(n,0,255)/255},to8BitDecimal:e=>r(255*e),fromAlpha:e=>e.endsWith("%")?o.fromPercentage(e):t(parseFloat(e),0,1),toAlpha:e=>String(e)},a={hsl:{h:{to:o.toHueAngle,from:o.fromHueAngle},s:{to:o.toPercentage,from:o.fromPercentage},l:{to:o.toPercentage,from:o.fromPercentage},a:{to:o.toAlpha,from:o.fromAlpha}},hwb:{h:{to:o.toHueAngle,from:o.fromHueAngle},w:{to:o.toPercentage,from:o.fromPercentage},b:{to:o.toPercentage,from:o.fromPercentage},a:{to:o.toAlpha,from:o.fromAlpha}},rgb:{r:{to:o.to8BitDecimal,from:o.from8BitDecimal},g:{to:o.to8BitDecimal,from:o.from8BitDecimal},b:{to:o.to8BitDecimal,from:o.from8BitDecimal},a:{to:o.toAlpha,from:o.fromAlpha}}};function c(e){const n=e.replace(/^#/,""),t=[],r=n.length>4?2:1;for(let e=0;e<n.length;e+=r){const o=n.slice(e,e+r);t.push(o.repeat(r%2+1))}3===t.length&&t.push("ff");const o=t.map((e=>parseInt(e,16)/255));return{r:o[0],g:o[1],b:o[2],a:o[3]}}function i(e){const n=e.l<.5?e.l*(1+e.s):e.l+e.s-e.l*e.s,t=2*e.l-n;return{r:s(t,n,e.h+1/3),g:s(t,n,e.h),b:s(t,n,e.h-1/3),a:e.a}}function s(e,n,t){return t<0?t+=1:t>1&&(t-=1),t<1/6?e+6*(n-e)*t:t<.5?n:t<2/3?e+(n-e)*(2/3-t)*6:e}function l(e){return{r:p(5,e),g:p(3,e),b:p(1,e),a:e.a}}function p(e,n){const t=(e+6*n.h)%6;return n.v-n.v*n.s*Math.max(0,Math.min(t,4-t,1))}function u(e){return{h:e.h,s:1===e.b?0:1-e.w/(1-e.b),v:1-e.b,a:e.a}}function h(e){const n=Math.min(e.r,e.g,e.b),t=Math.max(e.r,e.g,e.b);let r;r=t===n?0:t===e.r?(0+(e.g-e.b)/(t-n))/6:t===e.g?(2+(e.b-e.r)/(t-n))/6:(4+(e.r-e.g)/(t-n))/6,r<0&&(r+=1);const o=(t+n)/2;let a;return a=0===t||1===n?0:(t-o)/Math.min(o,1-o),{h:r,s:a,l:o,a:e.a}}function d(e){const n=Math.min(e.r,e.g,e.b),t=Math.max(e.r,e.g,e.b);let r,o;r=t===n?0:t===e.r?(0+(e.g-e.b)/(t-n))/6:t===e.g?(2+(e.b-e.r)/(t-n))/6:(4+(e.r-e.g)/(t-n))/6,r<0&&(r+=1),o=0===t?0:(t-n)/t;return{h:r,s:o,v:t,a:e.a}}function v(e){return"#"+Object.values(e).map((e=>{const n=255*e,t=Math.round(n).toString(16);return 1===t.length?"0"+t:t})).join("")}function g(e){const n=Math.min(e.r,e.g,e.b),t=Math.max(e.r,e.g,e.b);let r;return r=t===n?0:t===e.r?(0+(e.g-e.b)/(t-n))/6:t===e.g?(2+(e.b-e.r)/(t-n))/6:(4+(e.r-e.g)/(t-n))/6,r<0&&(r+=1),{h:r,w:n,b:1-t,a:e.a}}const f={hex:{hsl:function(e){return h(c(e))},hsv:function(e){return d(c(e))},hwb:function(e){return g(c(e))},rgb:c},hsl:{hex:function(e){return v(i(e))},hsv:function(e){const n=e.l+e.s*Math.min(e.l,1-e.l),t=0===n?0:2-2*e.l/n;return{h:e.h,s:t,v:n,a:e.a}},hwb:function(e){return g(i(e))},rgb:i},hsv:{hex:function(e){return v(l(e))},hsl:function(e){const n=e.v-e.v*e.s/2,t=Math.min(n,1-n),r=0===t?0:(e.v-n)/t;return{h:e.h,s:r,l:n,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:function(e){return v(m(e))},hsl:function(e){return h(m(e))},hsv:u,rgb:m},rgb:{hex:v,hsl:h,hsv:d,hwb:g}};function m(e){return l(u(e))}function b(e,n,t){return f[n][t](e)}const y={hex:e=>e,hsl:e=>`hsl(${r(360*e.h)} ${r(100*e.s)}% ${r(100*e.l)}% / ${r(e.a)})`,hwb:e=>`hwb(${r(360*e.h)} ${r(100*e.w)}% ${r(100*e.b)}% / ${r(e.a)})`,rgb:e=>`rgb(${r(255*e.r)} ${r(255*e.g)} ${r(255*e.b)} / ${r(e.a)})`};function k(e,n){return y[n](e)}function w(e){return!!e.startsWith("#")&&(!![3,4,6,8].includes(e.length-1)&&/^#[0-9A-Fa-f]+$/.test(e))}const x=["hex","hsl","hwb","rgb"];var C={name:"ColorPicker",props:{color:{type:[String,Object],required:!1,default:null},id:{type:String,required:!1,default:"color-picker"},visibleFormats:{type:Array,required:!1,default:()=>x,validator:e=>e.length>0&&e.every((e=>x.includes(e)))},defaultFormat:{type:String,required:!1,default:"rgb",validator:e=>x.includes(e)}},emits:["color-change"],data(){return{pointerOriginatedInColorSpace:!1,activeFormat:this.defaultFormat,colors:{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}}}},watch:{color(e){this.setColorValueFromProp(e)}},created(){this.supportedFormats=["hex","hsl","hsv","hwb","rgb"]},mounted(){this.initThumbPointerNavigation(),this.setColorValueFromProp(this.color)},beforeUnmount(){document.removeEventListener("mousemove",this.moveThumbWithMouse),document.removeEventListener("touchmove",this.moveThumbWithTouch),document.removeEventListener("mouseup",this.stopMovingThumb),document.removeEventListener("touchend",this.stopMovingThumb)},methods:{initThumbPointerNavigation(){document.addEventListener("mousemove",this.moveThumbWithMouse,{passive:!1}),document.addEventListener("touchmove",this.moveThumbWithTouch,{passive:!1}),document.addEventListener("mouseup",this.stopMovingThumb),document.addEventListener("touchend",this.stopMovingThumb)},startMovingThumb(){this.pointerOriginatedInColorSpace=!0},stopMovingThumb(){this.pointerOriginatedInColorSpace=!1},moveThumbWithMouse(e){1===e.buttons&&!1!==this.pointerOriginatedInColorSpace&&this.moveThumb(e.clientX,e.clientY)},moveThumbWithTouch(e){!1!==this.pointerOriginatedInColorSpace&&(e.preventDefault(),this.moveThumb(e.touches[0].clientX,e.touches[0].clientY))},moveThumb(e,n){const r=this.$refs.colorSpace.getBoundingClientRect(),o=e-r.left,a=n-r.top,c={...this.colors.hsv};c.s=t(o/r.width,0,1),c.v=t(1-a/r.height,0,1),this.setColorValue(c,"hsv")},moveThumbWithArrows(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key))return;e.preventDefault();const n=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,r=["ArrowLeft","ArrowRight"].includes(e.key)?"s":"v",o=e.shiftKey?10:1,a=this.colors.hsv[r]+n*o*.01,c={...this.colors.hsv};c[r]=t(a,0,1),this.setColorValue(c,"hsv")},changeInputValue(e){if(!["ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(e.key)||!e.shiftKey)return;const n=e.currentTarget,r=parseFloat(n.step),o=["ArrowLeft","ArrowDown"].includes(e.key)?-1:1,a=t(parseFloat(n.value)+o*r*10,parseInt(n.min),parseInt(n.max));n.value=String(a-o*r)},setColorValue(e,n){if(!function(e,n){if("string"==typeof e||"string"==typeof n)return e===n;for(const t in e)if(e[t]!==n[t])return!1;return!0}({...this.colors[n]},e)){this.colors[n]=e;const t=this.applyColorUpdates(n);this.$emit("color-change",t)}},applyColorUpdates(e){return this.colors=this.reCalculateColors(this.colors,e),this.setCssProps(this.$refs.colorPicker,this.$refs.colorSpace,this.$refs.thumb,this.colors),this.getEventData(this.colors,this.activeFormat)},setColorValueFromProp(e){var n;if(null!==e)if("string"!=typeof e){const t=(n=e,Object.prototype.hasOwnProperty.call(n,"r")?"rgb":Object.prototype.hasOwnProperty.call(n,"w")?"hwb":Object.prototype.hasOwnProperty.call(n,"v")?"hsv":"hsl");this.setColorValue(e,t)}else if(w(e))this.setColorValue(e,"hex");else{const n=function(e){const n=document.createElement("span");if(n.style.display="none",n.style.color=e,""===n.style.color)return"";document.body.appendChild(n);const t=getComputedStyle(n).color;return n.remove(),t}(e);""!==n&&this.setColorValue(function(e){const n=e.substring(e.indexOf("(")+1,e.indexOf(")")).replace(/[,/]/g," ").replace(/\s+/g," ").split(" ");return{r:o.from8BitDecimal(n[0]),g:o.from8BitDecimal(n[1]),b:o.from8BitDecimal(n[2]),a:4===n.length?o.fromAlpha(n[3]):1}}(n),"rgb")}},reCalculateColors(e,n){const t=e[n],r=this.supportedFormats.filter((e=>e!==n)),o={...e};for(const e of r){const r=b(t,n,e);o[e]=r}return o},copyColor(){!function(e){if("function"!=typeof document.queryCommandSupported||!document.queryCommandSupported("copy"))return!1;const n=document.createElement("textarea");let t;n.textContent=e,n.style.position="fixed",document.body.appendChild(n),n.select();try{t=document.execCommand("copy")}catch{t=!1}finally{document.body.removeChild(n)}}(k(this.colors[this.activeFormat],this.activeFormat))},updateHue(e){const n=e.currentTarget,t={...this.colors.hsv};t.h=parseInt(n.value)/360,this.setColorValue(t,"hsv")},updateAlpha(e){const n=e.currentTarget,t={...this.colors.hsv};t.a=parseInt(n.value)/100,this.setColorValue(t,"hsv")},updateColorValue(e,n,t){const r=e.target,o={...this.colors[n]},c=a[n][t].from(r.value);Number.isNaN(c)||void 0===c||(o[t]=c,this.setColorValue(o,n))},updateHexColorValue(e){const n=e.target;w(n.value)&&this.setColorValue(n.value,"hex")},switchFormat(){const e=this.visibleFormats.findIndex((e=>e===this.activeFormat)),n=e===this.visibleFormats.length-1?0:e+1;this.activeFormat=this.visibleFormats[n]},getChannelAsCssValue(e,n){return a[e][n].to(this.colors[e][n])},getEventData:(e,n)=>({colors:{...e},cssColor:k(e[n],n)}),setCssProps(e,n,t,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)),n.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      `)}}};const T={ref:"colorPicker",class:"vacp-color-picker"},A={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},V=n.createTextVNode("Hue"),N={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},F=n.createTextVNode("Alpha"),$=n.createTextVNode(" Copy color "),P={class:"vacp-color-inputs"},S={class:"vacp-color-input-group"},M=n.createVNode("span",{class:"vacp-color-input-label-text"}," Hex ",-1),z={class:"vacp-color-input-label-text"},I=n.createTextVNode(" Switch format ");!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('\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    "hue-input    copy-button"\n    "alpha-input  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-label--hue {\n  grid-area: hue-input;\n}\n.vacp-range-input-label--alpha {\n  grid-area: alpha-input;\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'),C.render=function(e,t,r,o,a,c){return n.openBlock(),n.createBlock("div",T,[n.createVNode("div",{ref:"colorSpace",class:"vacp-color-space",onMousedown:t[2]||(t[2]=(...e)=>c.startMovingThumb&&c.startMovingThumb(...e)),onTouchstart:t[3]||(t[3]=(...e)=>c.startMovingThumb&&c.startMovingThumb(...e))},[n.createVNode("div",{ref:"thumb",class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:t[1]||(t[1]=(...e)=>c.moveThumbWithArrows&&c.moveThumbWithArrows(...e))},null,544)],544),n.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${r.id}-hue-slider`},[n.createVNode("span",A,[n.renderSlot(e.$slots,"hue-range-input-label",{},(()=>[V]))]),n.createVNode("input",{id:`${r.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*a.colors.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:t[4]||(t[4]=(...e)=>c.changeInputValue&&c.changeInputValue(...e)),onInput:t[5]||(t[5]=(...e)=>c.updateHue&&c.updateHue(...e))},null,40,["id","value"])],8,["for"]),n.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${r.id}-alpha-slider`},[n.createVNode("span",N,[n.renderSlot(e.$slots,"alpha-range-input-label",{},(()=>[F]))]),n.createVNode("input",{id:`${r.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*a.colors.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:t[6]||(t[6]=(...e)=>c.changeInputValue&&c.changeInputValue(...e)),onInput:t[7]||(t[7]=(...e)=>c.updateAlpha&&c.updateAlpha(...e))},null,40,["id","value"])],8,["for"]),n.createVNode("button",{class:"vacp-copy-button",type:"button",onClick:t[8]||(t[8]=(...e)=>c.copyColor&&c.copyColor(...e))},[n.renderSlot(e.$slots,"copy-button",{},(()=>[$]))]),n.createVNode("div",P,[n.createVNode("div",S,["hex"===a.activeFormat?(n.openBlock(),n.createBlock("label",{key:0,class:"vacp-color-input-label",for:`${r.id}-color-hex`},[M,n.createVNode("input",{id:`${r.id}-color-hex`,class:"vacp-color-input",type:"text",value:a.colors.hex,onInput:t[9]||(t[9]=e=>c.updateHexColorValue(e))},null,40,["id","value"])],8,["for"])):(n.openBlock(!0),n.createBlock(n.Fragment,{key:1},n.renderList(Object.keys(a.colors[a.activeFormat]),(e=>(n.openBlock(),n.createBlock("label",{id:`${r.id}-color-${a.activeFormat}-${e}`,key:`${r.id}-color-${a.activeFormat}-${e}`,class:"vacp-color-input-label",value:c.getChannelAsCssValue(a.activeFormat,e),for:`${r.id}-color-${a.activeFormat}`,onInput:n=>c.updateColorValue(n,a.activeFormat,e)},[n.createVNode("span",z,n.toDisplayString(e.toUpperCase()),1),n.createVNode("input",{id:`${r.id}-color-${a.activeFormat}`,class:"vacp-color-input",type:"text",value:c.getChannelAsCssValue(a.activeFormat,e),onInput:n=>c.updateColorValue(n,a.activeFormat,e)},null,40,["id","value","onInput"])],40,["id","value","for","onInput"])))),128))]),r.visibleFormats.length>1?(n.openBlock(),n.createBlock("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:t[10]||(t[10]=(...e)=>c.switchFormat&&c.switchFormat(...e))},[n.renderSlot(e.$slots,"format-switch-button",{},(()=>[I]))])):n.createCommentVNode("",!0)])],512)};var B={install(e){e.component("ColorPicker",C)}};e.ColorPicker=C,e.default=B,Object.defineProperty(e,"__esModule",{value:!0})}));
+!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;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);const a=(t+e)/2;let o;return o=0===t||1===e?0:(t-a)/Math.min(a,1-a),{h:r,s:o,l:a,a:n.a}}function k(n){const e=Math.min(n.r,n.g,n.b),t=Math.max(n.r,n.g,n.b);let r,a;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),a=0===t?0:(t-e)/t;return{h:r,s:a,v:t,a:n.a}}function w(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("")}function x(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}}const N={hex:[["hsl",function(n){return y(v(n))}],["hsv",function(n){return k(v(n))}],["hwb",function(n){return x(v(n))}],["rgb",v]],hsl:[["hex",function(n){return w(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 x(h(n))}],["rgb",h]],hsv:[["hex",function(n){return w(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 w(C(n))}],["hsl",function(n){return y(C(n))}],["hsv",m],["rgb",C]],rgb:[["hex",w],["hsl",y],["hsv",k],["hwb",x]]};function C(n){return g(m(n))}const $={hex:n=>n,hsl:n=>`hsl(${r(360*n.h)} ${r(100*n.s)}% ${r(100*n.l)}% / ${r(n.a)})`,hwb:n=>`hwb(${r(360*n.h)} ${r(100*n.w)}% ${r(100*n.b)}% / ${r(n.a)})`,rgb:n=>`rgb(${r(255*n.r)} ${r(255*n.g)} ${r(255*n.b)} / ${r(n.a)})`};function T(n,e){return $[e](n)}function F(n){return!!n.startsWith("#")&&(!![3,4,6,8].includes(n.length-1)&&/^#[0-9A-Fa-f]+$/.test(n))}function V(n){if("string"!=typeof n){return{format: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),color:n}}if(F(n))return{format:"hex",color:n};if(!n.includes("(")){const e=document.createElement("span");if(e.style.display="none",e.style.color=n,""===e.style.color)return null;document.body.appendChild(e),n=getComputedStyle(e).color,e.remove()}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"];var S={name:"ColorPicker",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)}},emits:["color-change"],setup(n,r){const a=e.ref(null),o=e.ref(null),c=e.ref(null),i=e.ref(!1),l=e.ref(n.defaultFormat),s=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}});function u(){i.value=!1}function p(n){1===n.buttons&&!1!==i.value&&o.value instanceof HTMLElement&&h(o.value,n.clientX,n.clientY)}function v(n){!1!==i.value&&o.value instanceof HTMLElement&&(n.preventDefault(),h(o.value,n.touches[0].clientX,n.touches[0].clientY))}function h(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={...s.hsv};o.s=a.x,o.v=a.y,g("hsv",o)}function f(n){if(null===n)return;const e=V(n);null!==e&&g(e.format,e.color)}function g(n,e){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}(s[n],e)){s[n]=e;const t=function(n){for(const[e,t]of N[n])s[e]=t(s[n]);a.value instanceof HTMLElement&&o.value instanceof HTMLElement&&c.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  `)}(a.value,o.value,c.value,s);return function(n,e){return{colors:{...n},cssColor:T(n[e],e)}}(s,l.value)}(n);r.emit("color-change",t)}}return e.watch((()=>n.color),(n=>{f(n)})),e.onMounted((()=>{document.addEventListener("mousemove",p,{passive:!1}),document.addEventListener("touchmove",v,{passive:!1}),document.addEventListener("mouseup",u),document.addEventListener("touchend",u),f(n.color)})),e.onBeforeUnmount((()=>{document.removeEventListener("mousemove",p),document.removeEventListener("touchmove",v),document.removeEventListener("mouseup",u),document.removeEventListener("touchend",u)})),{colorPicker:a,colorSpace:o,thumb:c,activeFormat:l,colors:s,pointerOriginatedInColorSpace:i,supportedFormats:["hex","hsl","hsv","hwb","rgb"],startMovingThumb:function(){i.value=!0},moveThumbWithArrows:function(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=s.hsv[r]+e*a*.01,c={...s.hsv};c[r]=t(o,0,1),g("hsv",c)},changeInputValue:M,copyColor:function(){!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)}}(T(s[l.value],l.value))},updateHue:function(n){const e=n.currentTarget,t={...s.hsv};t.h=parseInt(e.value)/360,g("hsv",t)},updateAlpha:function(n){const e=n.currentTarget,t={...s.hsv};t.a=parseInt(e.value)/100,g("hsv",t)},updateColorValue:function(n,e,t){const r=n.target,a={...s[e]},o=d[e][t].from(r.value);Number.isNaN(o)||void 0===o||(a[t]=o,g(e,a))},updateHexColorValue:function(n){const e=n.target;F(e.value)&&g("hex",e.value)},switchFormat:function(){const e=n.visibleFormats.findIndex((n=>n===l.value)),t=e===n.visibleFormats.length-1?0:e+1;l.value=n.visibleFormats[t]},getChannelAsCssValue:function(n,e){return d[n][e].to(s[n][e])}}}};function M(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)}const z={ref:"colorPicker",class:"vacp-color-picker"},I={class:"vacp-range-input-label-text vacp-range-input-label-text--hue"},E=e.createTextVNode("Hue"),L={class:"vacp-range-input-label-text vacp-range-input-label-text--alpha"},P=e.createTextVNode("Alpha"),j=e.createTextVNode(" Copy color "),B={class:"vacp-color-inputs"},H={class:"vacp-color-input-group"},O=e.createVNode("span",{class:"vacp-color-input-label-text"}," Hex ",-1),W={class:"vacp-color-input-label-text"},D=e.createTextVNode(" Switch format ");!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    "hue-input    copy-button"\n    "alpha-input  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-label--hue {\n  grid-area: hue-input;\n}\n.vacp-range-input-label--alpha {\n  grid-area: alpha-input;\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'),S.render=function(n,t,r,a,o,c){return e.openBlock(),e.createBlock("div",z,[e.createVNode("div",{ref:"colorSpace",class:"vacp-color-space",onMousedown:t[2]||(t[2]=(...n)=>a.startMovingThumb&&a.startMovingThumb(...n)),onTouchstart:t[3]||(t[3]=(...n)=>a.startMovingThumb&&a.startMovingThumb(...n))},[e.createVNode("div",{ref:"thumb",class:"vacp-color-space-thumb",tabindex:"0","aria-label":"Color space thumb",onKeydown:t[1]||(t[1]=(...n)=>a.moveThumbWithArrows&&a.moveThumbWithArrows(...n))},null,544)],544),e.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--hue",for:`${r.id}-hue-slider`},[e.createVNode("span",I,[e.renderSlot(n.$slots,"hue-range-input-label",{},(()=>[E]))]),e.createVNode("input",{id:`${r.id}-hue-slider`,class:"vacp-range-input vacp-range-input--hue",value:360*a.colors.hsv.h,type:"range",min:"0",max:"360",step:"1",onKeydownPassive:t[4]||(t[4]=(...n)=>a.changeInputValue&&a.changeInputValue(...n)),onInput:t[5]||(t[5]=(...n)=>a.updateHue&&a.updateHue(...n))},null,40,["id","value"])],8,["for"]),e.createVNode("label",{class:"vacp-range-input-label vacp-range-input-label--alpha",for:`${r.id}-alpha-slider`},[e.createVNode("span",L,[e.renderSlot(n.$slots,"alpha-range-input-label",{},(()=>[P]))]),e.createVNode("input",{id:`${r.id}-alpha-slider`,class:"vacp-range-input vacp-range-input--alpha",value:100*a.colors.hsv.a,type:"range",min:"0",max:"100",step:"1",onKeydownPassive:t[6]||(t[6]=(...n)=>a.changeInputValue&&a.changeInputValue(...n)),onInput:t[7]||(t[7]=(...n)=>a.updateAlpha&&a.updateAlpha(...n))},null,40,["id","value"])],8,["for"]),e.createVNode("button",{class:"vacp-copy-button",type:"button",onClick:t[8]||(t[8]=(...n)=>a.copyColor&&a.copyColor(...n))},[e.renderSlot(n.$slots,"copy-button",{},(()=>[j]))]),e.createVNode("div",B,[e.createVNode("div",H,["hex"===a.activeFormat?(e.openBlock(),e.createBlock("label",{key:0,class:"vacp-color-input-label",for:`${r.id}-color-hex`},[O,e.createVNode("input",{id:`${r.id}-color-hex`,class:"vacp-color-input",type:"text",value:a.colors.hex,onInput:t[9]||(t[9]=n=>a.updateHexColorValue(n))},null,40,["id","value"])],8,["for"])):(e.openBlock(!0),e.createBlock(e.Fragment,{key:1},e.renderList(Object.keys(a.colors[a.activeFormat]),(n=>(e.openBlock(),e.createBlock("label",{id:`${r.id}-color-${a.activeFormat}-${n}`,key:`${r.id}-color-${a.activeFormat}-${n}`,class:"vacp-color-input-label",for:`${r.id}-color-${a.activeFormat}`,onInput:e=>a.updateColorValue(e,a.activeFormat,n)},[e.createVNode("span",W,e.toDisplayString(n.toUpperCase()),1),e.createVNode("input",{id:`${r.id}-color-${a.activeFormat}`,class:"vacp-color-input",type:"text",value:a.getChannelAsCssValue(a.activeFormat,n),onInput:e=>a.updateColorValue(e,a.activeFormat,n)},null,40,["id","value","onInput"])],40,["id","for","onInput"])))),128))]),r.visibleFormats.length>1?(e.openBlock(),e.createBlock("button",{key:0,class:"vacp-format-switch-button",type:"button",onClick:t[10]||(t[10]=(...n)=>a.switchFormat&&a.switchFormat(...n))},[e.renderSlot(n.$slots,"format-switch-button",{},(()=>[D]))])):e.createCommentVNode("",!0)])],512)};var q={install(n){n.component("ColorPicker",S)}};n.ColorPicker=S,n.default=q,Object.defineProperty(n,"__esModule",{value:!0})}));

package.json

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

README.md

@@ -24,2 +24,3 @@ # vue-accessible-color-picker
     - [`visibleFormats`](#visibleformats)
+    - [`defaultFormat`](#defaultformat)
     - [`id`](#id)
@@ -99,4 +100,4 @@ - [Events](#events)
 
-- **Description**: Sets the color of the color picker. You can pass any valid CSS color string or an object matching the internal color representation for an HSL, HWB, or RGB color.
-- **Type**: `string` or `object`
+- **Description**: Sets the color of the color picker. You can pass any valid CSS color string or an object matching the internal color representation for an HSL, HSV, HWB, or RGB color.
+- **Type**: `string`, `ColorHsl`, `ColorHsv`, `ColorHwb`, or `ColorRgb`
 - **Required**: `false`
@@ -107,11 +108,11 @@ - **Default**: `null`
   ```html
-  <color-picker color="hsl(270 100% 50% / 0.8)" />
+  <ColorPicker color="hsl(270 100% 50% / 0.8)" />
   ```
 
   ```html
-  <color-picker color="#f80b" />
+  <ColorPicker color="#f80b" />
   ```
 
   ```html
-  <color-picker :color="{ h: 0.75, s: 1, l: 0.5, a: 0.8 }" />
+  <ColorPicker :color="{ h: 0.75, s: 1, l: 0.5, a: 0.8 }" />
   ```
@@ -121,3 +122,3 @@
   <template>
-    <color-picker :color="color" @color-change="updateColor" />
+    <ColorPicker :color="color" @color-change="updateColor" />
   </template>
@@ -145,3 +146,3 @@
 - **Description**: A list of visible color formats. Controls for which formats the color `input` elements are shown and in which order the formats will be cycled through when activating the format switch button.
-- **Type**: `array`
+- **Type**: `VisibleColorFormat[]`
 - **Required**: `false`
@@ -152,6 +153,17 @@ - **Default**: `['hex', 'hsl', 'hwb', 'rgb']`
   ```html
-  <color-picker :visible-formats="['hsl', 'hwb']" />
+  <ColorPicker :visible-formats="['hsl', 'hwb']" />
   ```
 
+#### `defaultFormat`
 
+- **Description**: The color format to show by default when rendering the color picker. Must be one of the formats specified in `visibleFormats`.
+- **Type**: `VisibleColorFormat`
+- **Required**: `false`
+- **Default**: `'rgb'`
+- **Usage**:
+
+  ```html
+  <ColorPicker default-format="hwb" />
+  ```
+
 #### `id`
@@ -166,3 +178,3 @@
   ```html
-  <color-picker id="color-picker-1" />
+  <ColorPicker id="color-picker-1" />
   ```
@@ -177,12 +189,12 @@
 
-  ```js
+  ```ts
   {
     colors: {
-      hex: string,
-      hsl: object,
-      hsv: object,
-      hwb: object,
-      rgb: object,
-    },
-    cssColor: string,
+      hex: string
+      hsl: ColorHsl
+      hsv: ColorHsv
+      hwb: ColorHwb
+      rgb: ColorRgb
+    }
+    cssColor: string
   }
@@ -195,3 +207,3 @@ ```
   <template>
-    <color-picker color="hsl(270 100% 50% / 0.8)" @color-change="updateColor" />
+    <ColorPicker color="hsl(270 100% 50% / 0.8)" @color-change="updateColor" />
   </template>
@@ -252,5 +264,5 @@
 |:--:|:----:|:---------------:|:-------:|:------:|:------:|
-| no | 16   | 79              | 55      | 49     | 9.1    |
+| no | 79   | 79              | 63      | 73     | 12.2   |
 
-The component’s browser support is due to the use of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and [spread syntax in object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).
+The component’s browser support is due to the use of [Object.fromEntries()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries), [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), and [spread syntax in object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).
 
@@ -257,0 +269,0 @@ ## Design

types/index.d.ts

@@ -1,43 +0,31 @@
-export namespace VueAccessibleColorPicker {
-  export type VisibleColorFormat = 'hex' | 'hsl' | 'hwb' | 'rgb'
+export type VisibleColorFormat = 'hex' | 'hsl' | 'hwb' | 'rgb'
 
-  export type ColorFormat = 'hex' | 'hsl' | 'hsv' | 'hwb' | 'rgb'
+export type ColorFormat = 'hex' | 'hsl' | 'hsv' | 'hwb' | 'rgb'
 
-  export type ColorHex = string
+export type ColorHsl = {
+  h: number
+  s: number
+  l: number
+  a: number
+}
 
-  export type ColorHsl = {
-    h: number
-    s: number
-    l: number
-    a: number
-  }
+export type ColorHsv = {
+  h: number
+  s: number
+  v: number
+  a: number
+}
 
-  export type ColorHsv = {
-    h: number
-    s: number
-    v: number
-    a: number
-  }
+export type ColorHwb = {
+  h: number
+  w: number
+  b: number
+  a: number
+}
 
-  export type ColorHwb = {
-    h: number
-    w: number
-    b: number
-    a: number
-  }
-
-  export type ColorRgb = {
-    r: number
-    g: number
-    b: number
-    a: number
-  }
-
-  export type Colors = {
-    hex: ColorHex
-    hsl: ColorHsl
-    hsv: ColorHsv
-    hwb: ColorHwb
-    rgb: ColorRgb
-  }
+export type ColorRgb = {
+  r: number
+  g: number
+  b: number
+  a: number
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

288

increased by4.35%

Worsened metrics

Total package byte prevSize

53270

decreased by-0.91%

Lines of code

159

decreased by-9.66%

No dependency changes