dk-plus/lib/dkcolorpicker_panel/src/index2.js

DK-PLUS

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),V=require("./index3.js"),_=require("./index4.js"),u=require("./index5.js"),d=(o,r,l)=>Math.min(l,Math.max(r,o)),y=o=>{var r,l;if("touches"in o){const s=o.touches[0]||o.changedTouches[0];return{x:(r=s==null?void 0:s.clientX)!=null?r:0,y:(l=s==null?void 0:s.clientY)!=null?l:0}}return{x:o.clientX,y:o.clientY}},A=a.defineComponent({name:"DkColorPickerPanel",props:V.dkColorPickerPanelProps,emits:_.colorPickerPanelEmits,setup(o,{emit:r}){const l=a.ref(null),s=a.ref(null),m=a.ref(null),n=a.reactive({hsva:{h:0,s:100,v:100,a:1},inputText:""}),g=a.computed(()=>u.hsvaToRgba(n.hsva)),$=a.computed(()=>({background:u.rgbaToCss(g.value)})),S=a.computed(()=>{const e=u.hsvaToRgba({h:n.hsva.h,s:100,v:100,a:1});return`rgb(${e.r}, ${e.g}, ${e.b})`}),R=a.computed(()=>({background:S.value})),C=a.computed(()=>{const e=u.hsvaToRgba({...n.hsva,a:1});return{background:`linear-gradient(to right, rgba(${e.r}, ${e.g}, ${e.b}, 0), rgba(${e.r}, ${e.g}, ${e.b}, 1))`}}),E=a.computed(()=>({left:`${d(n.hsva.s,0,100)}%`,top:`${100-d(n.hsva.v,0,100)}%`})),L=a.computed(()=>({left:`${d(n.hsva.h,0,360)/360*100}%`})),P=a.computed(()=>({left:`${d(n.hsva.a,0,1)*100}%`})),k=a.computed(()=>u.formatColor(g.value,o.format,o.showAlpha)),p=()=>{n.inputText=o.showAlpha?u.rgbaToCss(g.value):u.rgbaToHex(g.value)},h=(e=!1)=>{const t=k.value;r("update:modelValue",t),r("active-change",t),r("update:rgba",g.value),e&&r("change",t),p()},M=e=>{const t=u.parseToRgba(e);if(!t){p();return}n.hsva=u.rgbaToHsva(t),p()};a.watch(()=>o.modelValue,e=>{M(e)},{immediate:!0});const b=(e,t,v)=>{const f=e.getBoundingClientRect(),{x:i}=y(t),c=d((i-f.left)/f.width,0,1);v==="hue"?n.hsva.h=c*360:n.hsva.a=c,h(!1)},T=e=>{if(!l.value)return;const t=l.value.getBoundingClientRect(),{x:v,y:f}=y(e),i=d((v-t.left)/t.width,0,1),c=d((f-t.top)/t.height,0,1);n.hsva.s=i*100,n.hsva.v=(1-c)*100,h(!1)},w=(e,t,v)=>{if(o.disabled)return;e.preventDefault();const i=x=>{x.preventDefault(),t(x)},c=()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",c),window.removeEventListener("touchmove",i),window.removeEventListener("touchend",c),v==null||v()};window.addEventListener("mousemove",i),window.addEventListener("mouseup",c),window.addEventListener("touchmove",i,{passive:!1}),window.addEventListener("touchend",c)},D=e=>{o.disabled||(T(e),w(e,T,()=>h(!0)))},B=e=>{!s.value||o.disabled||(b(s.value,e,"hue"),w(e,t=>s.value&&b(s.value,t,"hue"),()=>h(!0)))},j=e=>{!m.value||o.disabled||(b(m.value,e,"alpha"),w(e,t=>m.value&&b(m.value,t,"alpha"),()=>h(!0)))},q=()=>{if(o.disabled)return;const e=u.parseToRgba(n.inputText);if(!e){p();return}n.hsva=u.rgbaToHsva(e),h(!0)},H=a.computed(()=>({width:o.width}));return{svRef:l,hueRef:s,alphaRef:m,state:n,rootStyle:H,svBgStyle:R,svThumbStyle:E,hueThumbStyle:L,alphaThumbStyle:P,alphaBgStyle:C,previewStyle:$,onSvDown:D,onHueDown:B,onAlphaDown:j,onInputBlur:q}}});exports.default=A;