https://ssseee.love/assets/TmlColorPicker.f6de1915.js

1import{d as Q,t as R,av as G,r as i,aw as x,c as q,ax as g,w as y,o as J,D as _,E as T,S as a,R as r,u as b,Q as j,W as K,U as L,f as Z,aa as ee,ab as te}from"./vue.00f7c436.js";import{t as u}from"./tinycolor.b47c1398.js";import ae from"./TmlInput.c5c24787.js";import{A as le,aq as h,_ as oe}from"./index.b39fe1b1.js";import{d as se}from"./debounce.41ca9a8b.js";import"./faCheck.dd6ba410.js";import"./faTimes.9e2515d7.js";import"./faPlus.b7ccafa3.js";import"./faMinus.5dd9ea58.js";import"./faArrowRight.97fd3c4b.js";import"./faUndo.a98f3c90.js";import"./sentry.09480738.js";const re=o=>(ee("data-v-f5ac9959"),o=o(),te(),o),ne=re(()=>a("div",{class:"saturation-brightness w-full h-full"},null,-1)),ie={class:"color-picker-body p-4"},ue={class:"color-picker-controls flex items-center gap-3"},ce={class:"slider-controls grow"},de=Q({__name:"TmlColorPicker",props:{defaultColor:{default:"#86b302"},showAlpha:{type:Boolean,default:!1},showHexField:{type:Boolean,default:!1},width:{default:225}},emits:["input"],setup(o,{expose:E,emit:U}){const n=o,e=R(u(n.defaultColor).toHsv());G(()=>n.defaultColor,l=>{if(d.value||c.value)return;const t=p(l);!t||u.equals(t,u(e))||Object.assign(e,t.toHsv())},{debounce:200});function p(l,t){const s=u(l);return!s||!s.isValid()?!1:t?(t==="hex"?s.getFormat().startsWith("hex"):s.getFormat()===t)?s:!1:s}const v=i(null),m=i(null),w=i(null),H={saturation:x({target:v}).pressed,hue:x({target:m}).pressed,alpha:n.showAlpha?x({target:w}).pressed:i(!1)},d=q(()=>Object.keys(H).find(l=>H[l].value)),C=se(()=>U("input",X()),50);function k(){F(),f.value=!0,C()}const{elementX:P,elementY:S,elementWidth:z,elementHeight:D}=g(v);function A(){e.s=h(P.value/z.value,0,1),e.v=h(1-S.value/D.value,0,1),(!n.showAlpha||e.a===0)&&(e.a=1),k()}y([P,S],()=>{d.value==="saturation"&&A()});const{elementX:I,elementWidth:M}=g(m);function $(){e.h=h(I.value/M.value*360,0,360),(!n.showAlpha||e.a===0)&&(e.a=1),k()}y(I,()=>{d.value==="hue"&&$()});const{elementX:B,elementWidth:N}=g(w);function W(){e.a=h(B.value/N.value,0,1),k()}y(B,()=>{d.value==="alpha"&&n.showAlpha&&W()});const V=i(""),c=i(!1),f=i(!0);function X(){const l=n.showAlpha||e.a!==1;return u(e).toString(l?"hex8":"hex6").toUpperCase()}function F(){V.value=X()}function O(l){if(!c.value)return;const t=p(l,"hex");if(!t){f.value=!1;return}f.value=!0,Object.assign(e,t.toHsv()),C()}J(()=>{F()});const Y=q(()=>e.s<.05&&e.v>.97&&e.a>.6);return E({validateColor:p}),(l,t)=>(_(),T("div",{class:"tml-color-picker grid overflow-hidden touch-none",style:r({width:`${o.width}px`})},[a("div",{ref_key:"saturationPicker",ref:v,class:"saturation relative overflow-hidden w-full select-none cursor-pointer",style:r({background:`linear-gradient(to right, #fff, hsl(${e.h}, 100%, 50%))`}),onClick:A},[ne,a("div",{class:"saturation-pointer absolute",style:r({top:`${(1-e.v)*100}%`,left:`${e.s*100}%`})},null,4)],4),a("div",ie,[a("div",ue,[a("div",{class:"color-preview background-chequered",style:r({"--color-preview-size":o.showAlpha?"30px":"18px",border:b(Y)?"1px solid var(--tml-form-border-color)":"0px"})},[a("div",{class:"h-full w-full",style:r({background:b(u)(e).toHex8String()})},null,4)],4),a("div",ce,[a("div",{ref_key:"huePicker",ref:m,class:"slider hue relative cursor-pointer select-none w-full",onClick:$},[a("div",{class:"hue-pointer absolute",style:r({left:`${e.h/360*100}%`})},null,4)],512),o.showAlpha?(_(),T("div",{key:0,ref_key:"alphaPicker",ref:w,class:"slider relative background-chequered adjusted-chequer cursor-pointer select-none w-full mt-2",onClick:W},[a("div",{class:"alpha h-full w-full",style:r({background:`linear-gradient(to right, #fff0, ${b(u)(e).toHexString()})`})},[a("div",{class:"alpha-pointer absolute",style:r({left:`${e.a*100}%`})},null,4)],4)],512)):j("",!0)])]),o.showHexField?(_(),K(le,{key:0,"form-name":"color-picker-text-input",class:"mt-2"},{default:L(()=>[Z(ae,{class:"!m-0",center:"",style:{fontSize:"1rem"},"max-height":"30px",type:"text","field-name":"hex-color",value:V.value,"auto-validate":c.value,"validation-rules":{hex:{test:()=>f.value,message:"Please enter a valid HEX color"}},onFocus:t[0]||(t[0]=s=>c.value=!0),onBlur:t[1]||(t[1]=s=>c.value=!1),onInput:O},null,8,["value","auto-validate","validation-rules"])]),_:1})):j("",!0)])],4))}});const Ce=oe(de,[["__scopeId","data-v-f5ac9959"]]);export{Ce as default};
2//# sourceMappingURL=TmlColorPicker.f6de1915.js.map