@packyoung98/vcolor 0.0.1 → 0.0.2

package/dist/vcolor.umd.cjs

@@ -1 +0,0 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VColor={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function n(e){return(e%360+360)%360}function r(e,t,n){return Math.min(n,Math.max(t,e))}function i({h:e,s:t,v:i,a}){e=n(e),t=r(t,0,100)/100,i=r(i,0,100)/100;let o=i*t,s=o*(1-Math.abs(e/60%2-1)),c=i-o,l=0,u=0,d=0;return e<60?[l,u,d]=[o,s,0]:e<120?[l,u,d]=[s,o,0]:e<180?[l,u,d]=[0,o,s]:e<240?[l,u,d]=[0,s,o]:e<300?[l,u,d]=[s,0,o]:[l,u,d]=[o,0,s],{r:Math.round((l+c)*255),g:Math.round((u+c)*255),b:Math.round((d+c)*255),a}}function a({r:e,g:t,b:r,a:i}){e/=255,t/=255,r/=255;let a=Math.max(e,t,r),o=a-Math.min(e,t,r),s=0;o!==0&&(s=a===e?(t-r)/o%6:a===t?(r-e)/o+2:(e-t)/o+4,s=n(s*60));let c=a===0?0:o/a,l=a;return{h:s,s:c*100,v:l*100,a:i}}function o({r:e,g:t,b:r,a:i}){e/=255,t/=255,r/=255;let a=Math.max(e,t,r),o=Math.min(e,t,r),s=a-o,c=0;s!==0&&(c=a===e?(t-r)/s%6:a===t?(r-e)/s+2:(e-t)/s+4,c=n(c*60));let l=(a+o)/2,u=s===0?0:s/(1-Math.abs(2*l-1));return{h:c,s:u*100,l:l*100,a:i}}function s({h:e,s:t,l:i,a}){e=n(e),t=r(t,0,100)/100,i=r(i,0,100)/100;let o=(1-Math.abs(2*i-1))*t,s=o*(1-Math.abs(e/60%2-1)),c=i-o/2,l=0,u=0,d=0;return e<60?[l,u,d]=[o,s,0]:e<120?[l,u,d]=[s,o,0]:e<180?[l,u,d]=[0,o,s]:e<240?[l,u,d]=[0,s,o]:e<300?[l,u,d]=[s,0,o]:[l,u,d]=[o,0,s],{r:Math.round((l+c)*255),g:Math.round((u+c)*255),b:Math.round((d+c)*255),a}}function c({r:e,g:t,b:n,a:i}){let a=e=>r(Math.round(e),0,255).toString(16).padStart(2,`0`),o=`#${a(e)}${a(t)}${a(n)}`;return i<1&&(o+=a(Math.round(i*255))),o.toUpperCase()}function l(e){let t=e.trim().replace(/^#/,``);(t.length===3||t.length===4)&&(t=t.split(``).map(e=>e+e).join(``));let n=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16),a=t.length===8?parseInt(t.slice(6,8),16)/255:1;return{r:Number.isNaN(n)?0:n,g:Number.isNaN(r)?0:r,b:Number.isNaN(i)?0:i,a:Number.isNaN(a)?1:a}}function u(e=`#000000`){let n=(0,t.ref)(a(l(e))),r=(0,t.computed)(()=>i(n.value)),u=(0,t.computed)(()=>o(r.value)),d=(0,t.computed)(()=>c(r.value));function f(e){n.value={...e}}function p(e){n.value=a(e)}function m(e){n.value=a(s(e))}function h(e){n.value=a(l(e))}function g(e){n.value={...n.value,h:e}}function _(e,t){n.value={...n.value,s:e,v:t}}function v(e){n.value={...n.value,a:e}}return{hsva:n,rgba:r,hsla:u,hex:d,setFromHsva:f,setFromRgba:p,setFromHsla:m,setFromHex:h,setHue:g,setSaturation:_,setAlpha:v}}function d(e,t,n=!1){let r=n?1:e.a,a=i({...e,a:r});if(t===`rgb`)return a;if(t===`hsl`){let e=o(a);return{h:Math.round(e.h),s:Math.round(e.s),l:Math.round(e.l),a:e.a}}return c(a)}function f(e,t){t!=null&&(typeof t==`string`?e.setFromHex(t):`v`in t?e.setFromHsva(t):`l`in t?e.setFromHsla(t):e.setFromRgba(t))}function p(e,n,r,i){let a=u(typeof e.value==`string`?e.value:`#FF5733`);f(a,e.value);function o(){return d(a.hsva.value,r(),i())}(0,t.watch)(e,e=>{JSON.stringify(e)!==JSON.stringify(o())&&f(a,e)});function s(){let t=o();e.value=t,n(`input`,t)}function c(){let t=o();e.value=t,n(`change`,t)}return{...a,output:o,input:s,change:c}}function m(){let e=(0,t.ref)(typeof window<`u`&&`EyeDropper`in window),n=(0,t.ref)(``);async function r(){if(!e.value||!window.EyeDropper)return null;try{let e=await new window.EyeDropper().open();return n.value=e.sRGBHex,e.sRGBHex}catch{return null}}return{isSupported:e,sRGBHex:n,open:r}}function h(e){return Math.min(1,Math.max(0,e))}function g(e,n){let r=(0,t.ref)(null);function i(t){let n=r.value;if(!n)return;let i=n.getBoundingClientRect();e(h((t.clientX-i.left)/i.width),h((t.clientY-i.top)/i.height))}function a(){window.removeEventListener(`pointermove`,i),window.removeEventListener(`pointerup`,a),n?.()}function o(e){e.preventDefault(),r.value?.focus?.(),i(e),window.addEventListener(`pointermove`,i),window.addEventListener(`pointerup`,a)}return(0,t.onBeforeUnmount)(a),{target:r,down:o}}var _=[`aria-valuetext`],v=(0,t.defineComponent)({__name:`Saturation`,props:{hue:{},saturation:{},value:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>`hsl(${r.hue}, 100%, 50%)`),o=(0,t.computed)(()=>`${r.saturation}%`),s=(0,t.computed)(()=>`${100-r.value}%`),{down:c}=g((e,t)=>i(`input`,{s:Math.round(e*100),v:Math.round((1-t)*100)}),()=>i(`change`));function l(e){let t=r.saturation,n=r.value;switch(e.key){case`ArrowLeft`:--t;break;case`ArrowRight`:t+=1;break;case`ArrowUp`:n+=1;break;case`ArrowDown`:--n;break;default:return}e.preventDefault(),i(`input`,{s:Math.min(100,Math.max(0,t)),v:Math.min(100,Math.max(0,n))}),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-saturation`,ref:`target`,style:(0,t.normalizeStyle)({background:a.value}),onPointerdown:r[0]||=(...e)=>(0,t.unref)(c)&&(0,t.unref)(c)(...e),onKeydown:l,tabindex:`0`,role:`slider`,"aria-label":`채도/명도 (saturation/value)`,"aria-valuetext":`S ${Math.round(e.saturation)}, V ${Math.round(e.value)}`},[r[1]||=(0,t.createElementVNode)(`div`,{class:`vc-saturation__white`},null,-1),r[2]||=(0,t.createElementVNode)(`div`,{class:`vc-saturation__black`},null,-1),(0,t.createElementVNode)(`div`,{class:`vc-saturation__pointer`,style:(0,t.normalizeStyle)({left:o.value,top:s.value})},null,4)],44,_))}}),y=[`aria-valuenow`],b=(0,t.defineComponent)({__name:`Hue`,props:{hue:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>`${r.hue/360*100}%`),{down:o}=g(e=>i(`input`,Math.round(e*360)),()=>i(`change`));function s(e){let t=r.hue;switch(e.key){case`ArrowLeft`:case`ArrowDown`:--t;break;case`ArrowRight`:case`ArrowUp`:t+=1;break;case`PageDown`:t-=10;break;case`PageUp`:t+=10;break;case`Home`:t=0;break;case`End`:t=360;break;default:return}e.preventDefault(),i(`input`,Math.min(360,Math.max(0,t))),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-hue`,ref:`target`,onPointerdown:r[0]||=(...e)=>(0,t.unref)(o)&&(0,t.unref)(o)(...e),onKeydown:s,tabindex:`0`,role:`slider`,"aria-label":`색조 (hue)`,"aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":Math.round(e.hue)},[(0,t.createElementVNode)(`div`,{class:`vc-hue__pointer`,style:(0,t.normalizeStyle)({left:a.value})},null,4)],40,y))}}),x=[`aria-valuenow`],S={class:`vc-alpha__track`},C=(0,t.defineComponent)({__name:`Alpha`,props:{rgba:{}},emits:[`input`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.computed)(()=>{let{r:e,g:t,b:n}=r.rgba;return`linear-gradient(to right, rgba(${e},${t},${n},0), rgba(${e},${t},${n},1))`}),o=(0,t.computed)(()=>`${r.rgba.a*100}%`),{down:s}=g(e=>i(`input`,Math.round(e*100)/100),()=>i(`change`));function c(e){let t=r.rgba.a;switch(e.key){case`ArrowLeft`:case`ArrowDown`:t-=.05;break;case`ArrowRight`:case`ArrowUp`:t+=.05;break;case`Home`:t=0;break;case`End`:t=1;break;default:return}e.preventDefault(),t=Math.min(1,Math.max(0,Math.round(t*100)/100)),i(`input`,t),i(`change`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-alpha`,ref:`target`,onPointerdown:r[0]||=(...e)=>(0,t.unref)(s)&&(0,t.unref)(s)(...e),onKeydown:c,tabindex:`0`,role:`slider`,"aria-label":`투명도 (alpha)`,"aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":e.rgba.a},[(0,t.createElementVNode)(`div`,S,[r[1]||=(0,t.createElementVNode)(`div`,{class:`vc-alpha__checker`},null,-1),(0,t.createElementVNode)(`div`,{class:`vc-alpha__grad`,style:(0,t.normalizeStyle)({background:a.value})},null,4)]),(0,t.createElementVNode)(`div`,{class:`vc-alpha__pointer`,style:(0,t.normalizeStyle)({left:o.value})},null,4)],40,x))}}),w={class:`vc-input`},T=[`value`],E={class:`vc-input__label`},D=(0,t.defineComponent)({__name:`EditableInput`,props:{label:{},modelValue:{}},emits:[`update:modelValue`,`change`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.ref)(String(r.modelValue)),o=(0,t.ref)(!1);(0,t.watch)(()=>r.modelValue,e=>{o.value||(a.value=String(e))});function s(e){a.value=e.target.value}function c(){o.value=!0}async function l(){o.value=!1,i(`update:modelValue`,a.value),i(`change`),await(0,t.nextTick)(),a.value=String(r.modelValue)}function u(e){e.target.blur()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,w,[(0,t.createElementVNode)(`input`,{class:`vc-input__field`,value:a.value,onInput:s,onFocus:c,onBlur:l,onKeyup:(0,t.withKeys)(u,[`enter`])},null,40,T),(0,t.createElementVNode)(`span`,E,(0,t.toDisplayString)(e.label),1)]))}}),O={class:`vc-chrome__body`},k={class:`vc-chrome__sliders`},A={class:`vc-chrome__fields`},j={class:`vc-input vc-input--wide`},M={key:3,class:`vc-chrome__switch`},ee={class:`vc-chrome__mode`},te=(0,t.defineComponent)({__name:`ChromePicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`},inputFormats:{default:()=>[`hex`,`rgb`,`hsl`]}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=m();async function s(){let e=await o.open();e&&(a.setFromHex(e),a.input(),a.change())}let c=(0,t.ref)(i.inputFormats.includes(i.format)?i.format:i.inputFormats[0]??`hex`),l=(0,t.computed)(()=>i.inputFormats.length>1);function u(e){let t=i.inputFormats;c.value=t[(t.indexOf(c.value)+e+t.length)%t.length]}let d=(0,t.ref)(a.hex.value),f=(0,t.ref)(!1);(0,t.watch)(()=>a.hex.value,e=>{f.value||(d.value=e)});function h(){f.value=!1;let e=d.value.trim().replace(/[^0-9a-fA-F]/g,``).slice(0,8);a.setFromHex(`#`+e),a.input(),d.value=a.hex.value}function g(e,t){return Math.max(0,Math.min(t,Math.round(+e||0)))}function _(e,t){a.setFromRgba({...a.rgba.value,[e]:g(t,255)}),a.input()}function y(e,t){a.setFromHsla({...a.hsla.value,[e]:g(t,e===`h`?360:100)}),a.input()}function x(e){a.setAlpha(Math.max(0,Math.min(1,+e||0))),a.input()}let S=(0,t.computed)(()=>Math.round(a.rgba.value.a*100)/100),w=(0,t.computed)(()=>({h:Math.round(a.hsla.value.h),s:Math.round(a.hsla.value.s),l:Math.round(a.hsla.value.l)})),T=(0,t.computed)(()=>({background:a.hex.value}));return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-chrome`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createVNode)(v,{hue:(0,t.unref)(a).hsva.value.h,saturation:(0,t.unref)(a).hsva.value.s,value:(0,t.unref)(a).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(a).setSaturation(e.s,e.v),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,O,[(0,t.createElementVNode)(`div`,{class:`vc-chrome__preview`,style:(0,t.normalizeStyle)(T.value)},null,4),(0,t.unref)(o).isSupported?((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{key:0,type:`button`,class:`vc-chrome__eyedropper`,"aria-label":`스포이드로 화면 색 추출`,title:`스포이드`,onClick:s},[...r[16]||=[(0,t.createElementVNode)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,"stroke-width":`2`,"stroke-linecap":`round`,"stroke-linejoin":`round`},[(0,t.createElementVNode)(`path`,{d:`M11 7l6 6`}),(0,t.createElementVNode)(`path`,{d:`M4 16l11.7 -11.7a2.41 2.41 0 0 1 3.4 3.4l-11.7 11.7l-4 1l1 -4z`})],-1)]])):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,k,[(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[3]||=e=>(0,t.unref)(a).change()},null,8,[`hue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(C,{key:0,rgba:(0,t.unref)(a).rgba.value,onInput:r[4]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[5]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`]))])]),(0,t.createElementVNode)(`div`,A,[c.value===`hex`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:0},[(0,t.createElementVNode)(`label`,j,[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{class:`vc-input__field`,"onUpdate:modelValue":r[6]||=e=>d.value=e,onFocus:r[7]||=e=>f.value=!0,onChange:h,onKeyup:(0,t.withKeys)(h,[`enter`])},null,544),[[t.vModelText,d.value]]),r[17]||=(0,t.createElementVNode)(`span`,{class:`vc-input__label`},`hex`,-1)]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)):c.value===`rgb`?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:1},[(0,t.createVNode)(D,{label:`r`,modelValue:(0,t.unref)(a).rgba.value.r,"onUpdate:modelValue":r[8]||=e=>_(`r`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`g`,modelValue:(0,t.unref)(a).rgba.value.g,"onUpdate:modelValue":r[9]||=e=>_(`g`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`b`,modelValue:(0,t.unref)(a).rgba.value.b,"onUpdate:modelValue":r[10]||=e=>_(`b`,e)},null,8,[`modelValue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)):((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:2},[(0,t.createVNode)(D,{label:`h`,modelValue:w.value.h,"onUpdate:modelValue":r[11]||=e=>y(`h`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`s`,modelValue:w.value.s,"onUpdate:modelValue":r[12]||=e=>y(`s`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`l`,modelValue:w.value.l,"onUpdate:modelValue":r[13]||=e=>y(`l`,e)},null,8,[`modelValue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(D,{key:0,label:`a`,modelValue:S.value,"onUpdate:modelValue":x},null,8,[`modelValue`]))],64)),l.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,M,[(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-chrome__chev`,"aria-label":`이전 포맷`,onClick:r[14]||=e=>u(-1)},` ▲ `),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-chrome__chev`,"aria-label":`다음 포맷`,onClick:r[15]||=e=>u(1)},` ▼ `)])):(0,t.createCommentVNode)(``,!0)]),(0,t.createElementVNode)(`div`,ee,(0,t.toDisplayString)(c.value.toUpperCase()),1)],4))}}),N=[`#D0021B`,`#F5A623`,`#F8E71C`,`#8B572A`,`#7ED321`,`#417505`,`#BD10E0`,`#9013FE`,`#4A90E2`,`#50E3C2`,`#B8E986`,`#000000`,`#4A4A4A`,`#9B9B9B`,`#FFFFFF`],P=[`#F44336`,`#E91E63`,`#9C27B0`,`#673AB7`,`#3F51B5`,`#2196F3`,`#03A9F4`,`#00BCD4`,`#009688`,`#4CAF50`,`#8BC34A`,`#CDDC39`,`#FFEB3B`,`#FFC107`,`#FF9800`,`#FF5722`,`#795548`,`#607D8B`],F=[`#4D4D4D`,`#999999`,`#FFFFFF`,`#F44E3B`,`#FE9200`,`#FCDC00`,`#DBDF00`,`#A4DD00`,`#68CCCA`,`#73D8FF`,`#AEA1FF`,`#FDA1FF`,`#333333`,`#808080`,`#CCCCCC`,`#D33115`,`#E27300`,`#FCC400`,`#B0BC00`,`#68BC00`,`#16A5A5`,`#009CE0`,`#7B64FF`,`#FA28FF`],I=[`#FF6900`,`#FCB900`,`#7BDCB5`,`#00D084`,`#8ED1FC`,`#0693E3`,`#ABB8C3`,`#EB144C`,`#F78DA7`,`#9900EF`],L=Array.from({length:15},(e,t)=>{let n=Math.round(t/14*255).toString(16).padStart(2,`0`);return`#${n}${n}${n}`.toUpperCase()}),R=[[`#FFEBEE`,`#FFCDD2`,`#E57373`,`#F44336`,`#D32F2F`,`#B71C1C`],[`#F3E5F5`,`#CE93D8`,`#AB47BC`,`#9C27B0`,`#7B1FA2`,`#4A148C`],[`#E3F2FD`,`#90CAF9`,`#42A5F5`,`#2196F3`,`#1976D2`,`#0D47A1`],[`#E0F2F1`,`#80CBC4`,`#26A69A`,`#009688`,`#00796B`,`#004D40`],[`#E8F5E9`,`#A5D6A7`,`#66BB6A`,`#4CAF50`,`#388E3C`,`#1B5E20`],[`#FFFDE7`,`#FFF59D`,`#FFEE58`,`#FFEB3B`,`#FBC02D`,`#F57F17`],[`#FFF3E0`,`#FFCC80`,`#FFA726`,`#FF9800`,`#F57C00`,`#E65100`],[`#EFEBE9`,`#BCAAA4`,`#8D6E63`,`#795548`,`#5D4037`,`#3E2723`]],z=[`aria-label`],B=(0,t.defineComponent)({__name:`Swatch`,props:{color:{},active:{type:Boolean}},emits:[`select`],setup(e,{emit:n}){let r=n;return(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{class:(0,t.normalizeClass)([`vc-swatch`,{"is-active":e.active}]),style:(0,t.normalizeStyle)({background:e.color}),type:`button`,"aria-label":e.color,onClick:i[0]||=t=>r(`select`,e.color)},null,14,z))}}),V={class:`vc-sketch__controls`},H={class:`vc-sketch__sliders`},U={class:`vc-sketch__field`},W={class:`vc-sketch__presets`},G=(0,t.defineComponent)({__name:`SketchPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},presetColors:{default:()=>N},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=(0,t.computed)(()=>({background:a.hex.value}));function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sketch`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createVNode)(v,{hue:(0,t.unref)(a).hsva.value.h,saturation:(0,t.unref)(a).hsva.value.s,value:(0,t.unref)(a).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(a).setSaturation(e.s,e.v),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,V,[(0,t.createElementVNode)(`div`,H,[(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[3]||=e=>(0,t.unref)(a).change()},null,8,[`hue`]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(C,{key:0,rgba:(0,t.unref)(a).rgba.value,onInput:r[4]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[5]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`]))]),(0,t.createElementVNode)(`div`,{class:`vc-sketch__preview`,style:(0,t.normalizeStyle)(o.value)},null,4)]),(0,t.createElementVNode)(`div`,U,[(0,t.createVNode)(D,{label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":c},null,8,[`modelValue`])]),(0,t.createElementVNode)(`div`,W,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.presetColors,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,onSelect:s},null,8,[`color`]))),128))])],4))}}),K={class:`vc-ps__main`},q={class:`vc-ps__hue`},J={class:`vc-ps__side`},Y={class:`vc-ps__compare`},X=(0,t.defineComponent)({__name:`PhotoshopPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 280px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`,`ok`,`cancel`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=n,o=p(r,a,()=>i.format,()=>i.disableAlpha),s=(0,t.ref)(c({...o.rgba.value,a:1})),l=(0,t.computed)(()=>o.hex.value);function u(){a(`ok`,o.output()),s.value=o.hex.value}function d(){o.setFromHex(s.value),o.input(),a(`cancel`)}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-ps`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,K,[(0,t.createVNode)(v,{class:`vc-ps__sat`,hue:(0,t.unref)(o).hsva.value.h,saturation:(0,t.unref)(o).hsva.value.s,value:(0,t.unref)(o).hsva.value.v,onInput:r[0]||=e=>{(0,t.unref)(o).setSaturation(e.s,e.v),(0,t.unref)(o).input()},onChange:r[1]||=e=>(0,t.unref)(o).change()},null,8,[`hue`,`saturation`,`value`]),(0,t.createElementVNode)(`div`,q,[(0,t.createVNode)(b,{hue:(0,t.unref)(o).hsva.value.h,onInput:r[2]||=e=>{(0,t.unref)(o).setHue(e),(0,t.unref)(o).input()},onChange:r[3]||=e=>(0,t.unref)(o).change()},null,8,[`hue`])])]),(0,t.createElementVNode)(`div`,J,[(0,t.createElementVNode)(`div`,Y,[(0,t.createElementVNode)(`div`,{class:`vc-ps__swatch`,style:(0,t.normalizeStyle)({background:l.value})},[...r[4]||=[(0,t.createElementVNode)(`span`,null,`new`,-1)]],4),(0,t.createElementVNode)(`div`,{class:`vc-ps__swatch`,style:(0,t.normalizeStyle)({background:s.value})},[...r[5]||=[(0,t.createElementVNode)(`span`,null,`current`,-1)]],4)]),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-ps__btn vc-ps__btn--ok`,onClick:u},` OK `),(0,t.createElementVNode)(`button`,{type:`button`,class:`vc-ps__btn`,onClick:d},`Cancel`)])],4))}}),Z={class:`vc-compact__grid`},Q={class:`vc-compact__field`},ne=(0,t.defineComponent)({__name:`CompactPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>F},columns:{},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-compact`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[(0,t.createElementVNode)(`div`,Z,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:e.toUpperCase()===(0,t.unref)(a).hex.value.toUpperCase(),onSelect:s},null,8,[`color`,`active`]))),128))]),(0,t.createElementVNode)(`div`,Q,[(0,t.createElementVNode)(`div`,{class:`vc-compact__preview`,style:(0,t.normalizeStyle)({background:(0,t.unref)(a).hex.value})},null,4),(0,t.createVNode)(D,{label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":c},null,8,[`modelValue`])])],4))}}),re=(0,t.defineComponent)({__name:`GrayscalePicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>L},columns:{},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-gray`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:e.toUpperCase()===(0,t.unref)(a).hex.value.toUpperCase(),onSelect:s},null,8,[`color`,`active`]))),128))],4))}}),ie={class:`vc-material__rgb`},ae=(0,t.defineComponent)({__name:`MaterialPicker`,props:(0,t.mergeModels)({format:{default:`hex`},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0);function o(e){a.setFromHex(e),a.input()}function s(e){return Math.max(0,Math.min(255,Math.round(+e||0)))}function c(e,t){a.setFromRgba({...a.rgba.value,[e]:s(t)}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-material`,style:(0,t.normalizeStyle)({width:e.width,borderTopColor:(0,t.unref)(a).hex.value})},[(0,t.createVNode)(D,{class:`vc-material__hex`,label:`hex`,modelValue:(0,t.unref)(a).hex.value,"onUpdate:modelValue":o},null,8,[`modelValue`]),(0,t.createElementVNode)(`div`,ie,[(0,t.createVNode)(D,{label:`r`,modelValue:(0,t.unref)(a).rgba.value.r,"onUpdate:modelValue":r[0]||=e=>c(`r`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`g`,modelValue:(0,t.unref)(a).rgba.value.g,"onUpdate:modelValue":r[1]||=e=>c(`g`,e)},null,8,[`modelValue`]),(0,t.createVNode)(D,{label:`b`,modelValue:(0,t.unref)(a).rgba.value.b,"onUpdate:modelValue":r[2]||=e=>c(`b`,e)},null,8,[`modelValue`])])],4))}}),oe={class:`vc-twitter__swatches`},se={class:`vc-twitter__field`},ce=(0,t.defineComponent)({__name:`TwitterPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>I},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])?i.presetColors.flat():i.presetColors);function s(e){a.setFromHex(e),a.input(),a.change()}function c(e){a.setFromHex(e),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-twitter`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,oe,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.value,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,onSelect:s},null,8,[`color`]))),128))]),(0,t.createElementVNode)(`div`,se,[r[1]||=(0,t.createElementVNode)(`span`,{class:`vc-twitter__hash`},`#`,-1),(0,t.createVNode)(D,{label:``,modelValue:(0,t.unref)(a).hex.value.replace(`#`,``),"onUpdate:modelValue":r[0]||=e=>c(`#`+e)},null,8,[`modelValue`])])],4))}}),le={key:1,class:`vc-swatches__grid`},ue=(0,t.defineComponent)({__name:`SwatchesPicker`,props:(0,t.mergeModels)({format:{default:`hex`},presetColors:{default:()=>R},columns:{},width:{default:`var(--vc-width, 260px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>!0),o=(0,t.computed)(()=>Array.isArray(i.presetColors[0])),s=(0,t.computed)(()=>o.value?i.presetColors:[]);function c(e){a.setFromHex(e),a.input(),a.change()}function l(e){return e.toUpperCase()===a.hex.value.toUpperCase()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-swatches`,style:(0,t.normalizeStyle)({width:e.width,...e.columns==null?{}:{"--vc-swatch-columns":e.columns}})},[o.value?((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,{key:0},(0,t.renderList)(s.value,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:`vc-swatches__row`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:l(e),onSelect:c},null,8,[`color`,`active`]))),128))]))),128)):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,le,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.presetColors,e=>((0,t.openBlock)(),(0,t.createBlock)(B,{key:e,color:e,active:l(e),onSelect:c},null,8,[`color`,`active`]))),128))]))],4))}}),de=(0,t.defineComponent)({__name:`HueSlider`,props:(0,t.mergeModels)({width:{default:`var(--vc-width, 240px)`}},{modelValue:{default:0},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=n;function o(e){r.value=e,a(`input`,e)}function s(){a(`change`,r.value??0)}return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-hue-slider`,style:(0,t.normalizeStyle)({width:i.width})},[(0,t.createVNode)(b,{hue:r.value??0,onInput:o,onChange:s},null,8,[`hue`])],4))}}),fe={class:`vc-slider__row`},pe={class:`vc-slider__row`},me=[`value`],he={key:0,class:`vc-slider__row`},ge=(0,t.defineComponent)({__name:`SliderPicker`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha);function o(e){let t=+e.target.value;a.setFromHsla({...a.hsla.value,l:t}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-slider`,style:(0,t.normalizeStyle)({width:e.width})},[(0,t.createElementVNode)(`div`,fe,[r[5]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`H`,-1),(0,t.createVNode)(b,{hue:(0,t.unref)(a).hsva.value.h,onInput:r[0]||=e=>{(0,t.unref)(a).setHue(e),(0,t.unref)(a).input()},onChange:r[1]||=e=>(0,t.unref)(a).change()},null,8,[`hue`])]),(0,t.createElementVNode)(`div`,pe,[r[6]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`L`,-1),(0,t.createElementVNode)(`input`,{class:`vc-slider__range`,type:`range`,min:`0`,max:`100`,value:(0,t.unref)(a).hsla.value.l,onInput:o,onChange:r[2]||=e=>(0,t.unref)(a).change()},null,40,me)]),e.disableAlpha?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,he,[r[7]||=(0,t.createElementVNode)(`span`,{class:`vc-slider__label`},`A`,-1),(0,t.createVNode)(C,{rgba:(0,t.unref)(a).rgba.value,onInput:r[3]||=e=>{(0,t.unref)(a).setAlpha(e),(0,t.unref)(a).input()},onChange:r[4]||=e=>(0,t.unref)(a).change()},null,8,[`rgba`])]))],4))}}),_e={class:`vc-sliders__label`},ve=[`max`,`step`,`value`,`onInput`],ye={class:`vc-sliders__value`},be=(0,t.defineComponent)({__name:`RGBASliders`,props:(0,t.mergeModels)({format:{default:`rgb`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`r`,max:255,step:1},{key:`g`,max:255,step:1},{key:`b`,max:255,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.rgba.value[e]}function c(e,t){let n=+t.target.value;a.setFromRgba({...a.rgba.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,_e,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,ve),(0,t.createElementVNode)(`span`,ye,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}}),$={class:`vc-sliders__label`},xe=[`max`,`step`,`value`,`onInput`],Se={class:`vc-sliders__value`},Ce=(0,t.defineComponent)({__name:`HSVSliders`,props:(0,t.mergeModels)({format:{default:`hex`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`h`,max:360,step:1},{key:`s`,max:100,step:1},{key:`v`,max:100,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.hsva.value[e]}function c(e,t){let n=+t.target.value;a.setFromHsva({...a.hsva.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,$,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,xe),(0,t.createElementVNode)(`span`,Se,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}}),we={class:`vc-sliders__label`},Te=[`max`,`step`,`value`,`onInput`],Ee={class:`vc-sliders__value`},De=(0,t.defineComponent)({__name:`HSLSliders`,props:(0,t.mergeModels)({format:{default:`hsl`},disableAlpha:{type:Boolean,default:!1},width:{default:`var(--vc-width, 240px)`}},{modelValue:{},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`,`input`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,t.useModel)(e,`modelValue`),i=e,a=p(r,n,()=>i.format,()=>i.disableAlpha),o=[{key:`h`,max:360,step:1},{key:`s`,max:100,step:1},{key:`l`,max:100,step:1},{key:`a`,max:1,step:.01}];function s(e){return a.hsla.value[e]}function c(e,t){let n=+t.target.value;a.setFromHsla({...a.hsla.value,[e]:n}),a.input()}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`vc-sliders`,style:(0,t.normalizeStyle)({width:e.width})},[((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o,n=>(0,t.withDirectives)((0,t.createElementVNode)(`div`,{class:`vc-sliders__row`,key:n.key},[(0,t.createElementVNode)(`span`,we,(0,t.toDisplayString)(n.key.toUpperCase()),1),(0,t.createElementVNode)(`input`,{class:`vc-sliders__range`,type:`range`,min:0,max:n.max,step:n.step,value:s(n.key),onInput:e=>c(n.key,e),onChange:r[0]||=e=>(0,t.unref)(a).change()},null,40,Te),(0,t.createElementVNode)(`span`,Ee,(0,t.toDisplayString)(n.key===`a`?s(n.key).toFixed(2):Math.round(s(n.key))),1)]),[[t.vShow,n.key!==`a`||!e.disableAlpha]])),64))],4))}});function Oe(e=8){let n=(0,t.ref)([]);function r(t){let r=t.toUpperCase();n.value=[r,...n.value.filter(e=>e!==r)].slice(0,e)}function i(){n.value=[]}return{history:(0,t.readonly)(n),add:r,clear:i}}e.Alpha=C,e.COMPACT_PRESETS=F,e.ChromePicker=te,e.CompactPicker=ne,e.DEFAULT_PRESETS=N,e.EditableInput=D,e.GRAYSCALE_PRESETS=L,e.GrayscalePicker=re,e.HSLSliders=De,e.HSVSliders=Ce,e.Hue=b,e.HueSlider=de,e.MATERIAL_GRID=R,e.MATERIAL_PRESETS=P,e.MaterialPicker=ae,e.PhotoshopPicker=X,e.RGBASliders=be,e.Saturation=v,e.SketchPicker=G,e.SliderPicker=ge,e.Swatch=B,e.SwatchesPicker=ue,e.TWITTER_PRESETS=I,e.TwitterPicker=ce,e.hexToRgb=l,e.hslToRgb=s,e.hsvToRgb=i,e.rgbToHex=c,e.rgbToHsl=o,e.rgbToHsv=a,e.useColor=u,e.useColorHistory=Oe,e.useDrag=g,e.useEyeDropper=m});