vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 1.96 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),B=require("@vuux/utils"),o=require("../utils.cjs"),I=(u,G,b,x,m,$,k)=>{const z=B.Utils.snowflakeId(),w=e.ref(0),V=e.ref(0),O=e.computed(()=>b.value?b.value.offsetWidth:0),c=e.ref(0),i=e.ref(0),v=e.ref(0),d=e.ref(1),h=e.ref(!1),f=e.ref(!1),y=e.ref(!1),T=e.computed(()=>{const t=`${u.width}px`;return{width:t,height:`${u.height}px`,minWidth:t,minHeight:`${u.height}px`}}),C=e.computed(()=>Math.round(d.value*100)/100),q=()=>{const t=/^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6})/,s=/^(rgba?)\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/;t.test(u.modelValue)?h.value=!0:s.test(u.modelValue)?h.value=!1:h.value=!0},g=e.computed(()=>{const{r:t,g:s,b:a}=o.HSVtoRGB({h:c.value,s:i.value,v:v.value}),l=o.RGBtoHEX({r:t,g:s,b:a}),n=C.value===1,r=o.componentToHex(Math.round(C.value*255));return h.value?n?l:`${l}${r}`:n?`rgb(${t}, ${s}, ${a})`:`rgba(${t}, ${s}, ${a}, ${C.value})`}),M=()=>{!x.value||!$.value||!m.value||(x.value.setSizePoses(),$.value.setSizePoses(),m.value.setSizePoses())},U=()=>{x.value?.setCursor(),$.value?.setCursor(),m.value?.setCursor()},S=async()=>{await e.nextTick(),M(),U()},X=async()=>{if(await e.nextTick(),u.modelValue){const{hex:t,a:s}=o.parseColor(u.modelValue),{r:a,g:l,b:n}=o.HEXtoRGB(t),{h:r,s:H,v:P}=o.RGBtoHSV({r:a,g:l,b:n});c.value=r,i.value=H,v.value=P,d.value=s}S(),q()},A=(t,s=1)=>{y.value=!0;const{r:a,g:l,b:n}=o.HEXtoRGB(t),{h:r,s:H,v:P}=o.RGBtoHSV({r:a,g:l,b:n});c.value=r,i.value=H,v.value=P,d.value=s},E=(t,s)=>{w.value=t,V.value=s},F=()=>{f.value=!f.value,S()},W=()=>{f.value=!1};return B.Utils.useClickOutside(G,W),e.watch(g,async()=>{await e.nextTick(),k("update:modelValue",g.value),k("change",g.value),S()}),e.onMounted(()=>{X()}),{ckey:z,savedX:w,savedY:V,sliderWidth:O,hue:c,sat:i,val:v,alpha:d,isOpen:f,isPreset:y,colorPickerButStyle:T,currentColor:g,onSelect:A,onUpdateCursor:E,handleOpenPanel:F}};exports.useColorPicker=I;