vue-amazing-ui/lib/colorpicker/ColorPicker.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),l=require("seemly"),Ye=require("../tooltip/index.cjs"),se=require("../input/index.cjs"),ce=require("../button/index.cjs"),ue=require("../utils/index.cjs"),Je={class:"color-picker-preview"},Ke={class:"color-picker-preview-sliders"},Qe={key:0,class:"color-picker-preview-circle"},_e=["value"],et={class:"color-picker-input"},tt={class:"color-picker-input-group"},lt={key:0,class:"color-picker-swatches"},rt=["onClick"],ot={key:0,class:"color-picker-actions"},at={key:1,class:"color-picker-footer"},nt={class:"color-picker-wrap"},it={class:"color-picker-fill"},b="12px",de=12,m="6px",ve=6,st=e.defineComponent({__name:"ColorPicker",props:{width:{default:"100%"},label:{type:Function,default:void 0},tooltipStyle:{default:()=>({})},inputProps:{default:()=>({})},showAlpha:{type:Boolean,default:!0},showPreview:{type:Boolean,default:!1},size:{default:"middle"},disabled:{type:Boolean,default:!1},value:{default:void 0},modes:{default:()=>["rgb","hex","hsl"]},swatches:{default:()=>[]},actions:{default:()=>[]},footer:{default:void 0}},emits:["update:value","complete","confirm","clear"],setup(p,{emit:he}){const s=p,W=e.ref(),P=e.ref(null),M=e.ref(null),U=e.ref(null),$=e.ref(0),Y=e.ref(1),X=e.ref([0,0]),L=e.ref(),u=e.ref(s.value),f=e.ref(j(u.value)||s.modes[0]||"rgb"),q=e.ref(),H=e.ref([]),{colorPalettes:te,shadowColor:pe}=ue.useInject("ColorPicker"),A=he,me=ue.useSlotsExist("footer"),fe=e.computed(()=>me.value||s.footer),ge=e.computed(()=>({width:b,height:b,borderRadius:m,left:`calc(${X.value[0]}% - ${m})`,bottom:`calc(${X.value[1]}% - ${m})`})),be=e.computed(()=>v.value?`rgb(${v.value[0]}, ${v.value[1]}, ${v.value[2]})`:""),ke=e.computed(()=>({backgroundColor:be.value,borderRadius:m,width:b,height:b})),le=e.computed(()=>({height:b,borderRadius:m})),ye=e.computed(()=>({position:"relative",boxShadow:"inset 0 0 2px 0 rgba(0, 0, 0, 0.24)",backgroundImage:"linear-gradient(90deg, red, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, red)",height:b,borderRadius:m,touchAction:"none"})),Se=e.computed(()=>({left:`calc((${$.value}%) / 359 * 100 - ${m})`,borderRadius:m,width:b,height:b})),we=e.computed(()=>({backgroundColor:`hsl(${$.value}, 100%, 50%)`,borderRadius:m,width:b,height:b})),Ee=e.computed(()=>v.value?`linear-gradient(to right, rgba(${v.value[0]}, ${v.value[1]}, ${v.value[2]}, 0) 0%, rgba(${v.value[0]}, ${v.value[1]}, ${v.value[2]}, 1) 100%)`:""),Ve=e.computed(()=>({left:`calc(${Y.value*100}% - ${m})`,borderRadius:m,width:b,height:b})),$e=e.computed(()=>({backgroundColor:v.value?l.toRgbaString(v.value):void 0,borderRadius:m,width:b,height:b})),re=e.computed(()=>v.value&&l.toHexString(v.value)),oe=e.computed(()=>typeof s.width=="number"?`${s.width}px`:s.width),J=e.computed(()=>`${{small:24,middle:32,large:40}[s.size]}px`),He=e.computed(()=>{const t={small:6,middle:8,large:10};return`calc((${J.value} - ${t[s.size]}px) / 3)`}),K=e.computed(()=>j(u.value)),I=e.computed(()=>f.value.toUpperCase()+(s.showAlpha?"A":"")),Ce=e.computed(()=>I.value.split(""));let k,y,z,B,C,x,N,S;const E=e.computed(()=>{if(!u.value)return null;switch(K.value){case"hsv":return l.hsva(u.value);case"hsl":return[k,y,z,S]=l.hsla(u.value),[...l.hsl2hsv(k,y,z),S];case"rgb":case"hex":return[C,x,N,S]=l.rgba(u.value),[...l.rgb2hsv(C,x,N),S]}}),v=e.computed(()=>{if(!u.value)return null;switch(K.value){case"rgb":case"hex":return l.rgba(u.value);case"hsv":return[k,y,B,S]=l.hsva(u.value),[...l.hsv2rgb(k,y,B),S];case"hsl":return[k,y,z,S]=l.hsla(u.value),[...l.hsl2rgb(k,y,z),S]}}),R=e.computed(()=>{if(!u.value)return null;switch(K.value){case"hsl":return l.hsla(u.value);case"hsv":return[k,y,B,S]=l.hsva(u.value),[...l.hsv2hsl(k,y,B),S];case"rgb":case"hex":return[C,x,N,S]=l.rgba(u.value),[...l.rgb2hsl(C,x,N),S]}}),V=e.computed(()=>{switch(f.value){case"rgb":case"hex":return v.value;case"hsv":return E.value;case"hsl":return R.value}}),ae=e.computed(()=>s.swatches.map(t=>{const r=j(t);return{value:t,mode:r,legalValue:Te(t,r)}}));e.watch(()=>s.value,t=>{u.value=t}),e.watch(()=>[f.value,V.value],()=>{f.value==="hex"?q.value=V.value===null?void 0:(s.showAlpha?l.toHexaString:l.toHexString)(V.value):V.value===null?H.value=new Array(s.showAlpha?4:3).fill(void 0):H.value=V.value.map((t,r)=>s.showAlpha&&r===3?`${Math.floor(t*100)}%`:`${Math.floor(t)}`)},{immediate:!0,deep:!0}),e.watchEffect(()=>{(L.value===void 0||L.value!==u.value)&&E.value&&($.value=E.value[0],Y.value=E.value[3],X.value=[E.value[1],E.value[2]]),L.value=void 0});function g(t,r){r==="cursor"?L.value=t:L.value=void 0,u.value=t,A("update:value",t),r==="input"&&A("complete",t)}function xe(t,r){const o=E.value?E.value[3]:1;switch(X.value=[t,r],f.value){case"hsv":g((s.showAlpha?l.toHsvaString:l.toHsvString)([$.value,t,r,o]),"cursor");break;case"hsl":g((s.showAlpha?l.toHslaString:l.toHslString)([...l.hsv2hsl($.value,t,r),o]),"cursor");break;case"rgb":g((s.showAlpha?l.toRgbaString:l.toRgbString)([...l.hsv2rgb($.value,t,r),o]),"cursor");break;case"hex":g((s.showAlpha?l.toHexaString:l.toHexString)([...l.hsv2rgb($.value,t,r),o]),"cursor");break}}function Ne(t){P.value&&(P.value.setPointerCapture(t.pointerId),document.addEventListener("pointermove",Q),document.addEventListener("pointerup",T),document.addEventListener("pointercancel",T),Q(t))}function Q(t){if(!P.value)return;const{width:r,height:o,left:n,bottom:w}=P.value.getBoundingClientRect(),a=(w-t.clientY)/o,i=(t.clientX-n)/r,c=100*(i>1?1:i<0?0:i),d=100*(a>1?1:a<0?0:a);xe(c,d)}function T(){document.removeEventListener("pointermove",Q),document.removeEventListener("pointerup",T),document.removeEventListener("pointercancel",T),A("complete",u.value)}function Ae(t){if($.value=t,!E.value)return;const[,r,o,n]=E.value;switch(f.value){case"hsv":g((s.showAlpha?l.toHsvaString:l.toHsvString)([t,r,o,n]),"cursor");break;case"rgb":g((s.showAlpha?l.toRgbaString:l.toRgbString)([...l.hsv2rgb(t,r,o),n]),"cursor");break;case"hex":g((s.showAlpha?l.toHexaString:l.toHexString)([...l.hsv2rgb(t,r,o),n]),"cursor");break;case"hsl":g((s.showAlpha?l.toHslaString:l.toHslString)([...l.hsv2hsl(t,r,o),n]),"cursor");break}}function Re(t){M.value&&(M.value.setPointerCapture(t.pointerId),document.addEventListener("pointermove",_),document.addEventListener("pointerup",O),document.addEventListener("pointercancel",O),_(t))}function ze(t){return t=Math.round(t),t>=360?359:t<0?0:t}function _(t){if(!M.value)return;const{width:r,left:o}=M.value.getBoundingClientRect(),n=ze((t.clientX-o-ve)/(r-de)*360);Ae(n)}function O(){document.removeEventListener("pointermove",_),document.removeEventListener("pointerup",O),document.removeEventListener("pointercancel",O),A("complete",u.value)}function Be(t){switch(f.value){case"hsv":[k,y,B]=E.value,g(l.toHsvaString([k,y,B,t]),"cursor");break;case"rgb":[C,x,N]=v.value,g(l.toRgbaString([C,x,N,t]),"cursor");break;case"hex":[C,x,N]=v.value,g(l.toHexaString([C,x,N,t]),"cursor");break;case"hsl":[k,y,z]=R.value,g(l.toHslaString([k,y,z,t]),"cursor");break}Y.value=t}function Pe(t){U.value&&(U.value.setPointerCapture(t.pointerId),document.addEventListener("pointermove",ee),document.addEventListener("pointerup",Z),document.addEventListener("pointercancel",Z),ee(t))}function Me(t){return t=Math.round(t*100)/100,t>1?1:t<0?0:t}function ee(t){if(!U.value)return;const{width:r,left:o}=U.value.getBoundingClientRect(),n=Me((t.clientX-o-ve)/(r-de));Be(n)}function Z(){document.removeEventListener("pointermove",ee),document.removeEventListener("pointerup",Z),document.removeEventListener("pointercancel",Z),A("complete",u.value)}function j(t){if(t!==void 0){if(/^ *#/.test(t))return"hex";if(t.includes("rgb"))return"rgb";if(t.includes("hsl"))return"hsl";if(t.includes("hsv"))return"hsv"}}function Ue(){const t=s.modes.findIndex(r=>r===f.value);t!==-1?f.value=s.modes[(t+1)%s.modes.length]:f.value="rgb"}function Le(t){const r=t.target,o=ie(r.value.toUpperCase(),f.value,"hex");g(o,"input")}function Ie(t){const r=t.trim();return/^#[0-9a-fA-F]+$/.test(r)?[4,5,7,9].includes(r.length):!1}function De(t){return/^\d{1,3}\.?\d*$/.test(t.trim())?Math.max(0,Math.min(Number.parseInt(t),360)):!1}function Fe(t){return/^\d{1,3}\.?\d*$/.test(t.trim())?Math.max(0,Math.min(Number.parseInt(t),100)):!1}function Xe(t){return/^\d{1,3}\.?\d*%$/.test(t.trim())?Math.max(0,Math.min(Number.parseInt(t)/100,100)):!1}function qe(t){return/^\d{1,3}\.?\d*$/.test(t.trim())?Math.max(0,Math.min(Number.parseInt(t),255)):!1}function D(t,r){return t===void 0?"":r==="HEX"||r==="HEXA"?t:r==="A"?`${Math.floor(Number(t)*100)}%`:String(Math.floor(Number(t)))}function G(t){g(t,"input")}function F(t,r){if(f.value==="hex"){G((s.showAlpha?l.toHexaString:l.toHexString)(r));return}let o;switch(V.value===null?o=[0,0,0,0]:o=[...V.value],f.value){case"hsv":o[t]=r,G((s.showAlpha?l.toHsvaString:l.toHsvString)(o));break;case"rgb":o[t]=r,G((s.showAlpha?l.toRgbaString:l.toRgbString)(o));break;case"hsl":o[t]=r,G((s.showAlpha?l.toHslaString:l.toHslString)(o));break}}function ne(t,r){const o=t.target;let n,w,a;const i=o.value;r===void 0?a=V.value===null?void 0:V.value:a=V.value?.[r]===void 0?void 0:V.value?.[r].toString();const c=r===void 0?I.value:I.value[r];switch(c){case"HEX":case"HEXA":w=Ie(i),w&&F(0,i),q.value=D(i,c);break;case"H":n=De(i),n===!1?H.value[r]=D(a,c):F(r,n);break;case"S":case"L":case"V":n=Fe(i),n===!1?H.value[r]=D(a,c):F(r,n);break;case"A":n=Xe(i),n===!1?H.value[r]=D(a,c):F(r,n);break;case"R":case"G":case"B":n=qe(i),n===!1?H.value[r]=D(a,c):F(r,n);break}}function Te(t,r){if(r==="hsv"){const[o,n,w,a]=l.hsva(t);return l.toRgbaString([...l.hsv2rgb(o,n,w),a])}return t}function Oe(t){const r=document.createElement("canvas").getContext("2d");return r?(r.fillStyle=t,r.fillStyle):"#000000"}function ie(t,r,o){return o=o||j(t),o?o===r?t:{rgb:{hex(a){return l.toHexaString(l.rgba(a))},hsl(a){const[i,c,d,h]=l.rgba(a);return l.toHslaString([...l.rgb2hsl(i,c,d),h])},hsv(a){const[i,c,d,h]=l.rgba(a);return l.toHsvaString([...l.rgb2hsv(i,c,d),h])}},hex:{rgb(a){return l.toRgbaString(l.rgba(a))},hsl(a){const[i,c,d,h]=l.rgba(a);return l.toHslaString([...l.rgb2hsl(i,c,d),h])},hsv(a){const[i,c,d,h]=l.rgba(a);return l.toHsvaString([...l.rgb2hsv(i,c,d),h])}},hsl:{hex(a){const[i,c,d,h]=l.hsla(a);return l.toHexaString([...l.hsl2rgb(i,c,d),h])},rgb(a){const[i,c,d,h]=l.hsla(a);return l.toRgbaString([...l.hsl2rgb(i,c,d),h])},hsv(a){const[i,c,d,h]=l.hsla(a);return l.toHsvaString([...l.hsl2hsv(i,c,d),h])}},hsv:{hex(a){const[i,c,d,h]=l.hsva(a);return l.toHexaString([...l.hsv2rgb(i,c,d),h])},rgb(a){const[i,c,d,h]=l.hsva(a);return l.toRgbaString([...l.hsv2rgb(i,c,d),h])},hsl(a){const[i,c,d,h]=l.hsva(a);return l.toHslaString([...l.hsv2hsl(i,c,d),h])}}}[o][r](t):void 0}function Ze(t){let{value:r,mode:o}=t;return o||(o="hex",/^[a-zA-Z]+$/.test(r)?r=Oe(r):(console.warn("color-picker",`color ${r} in swatches is invalid.`),r="#000000")),o===f.value?r:ie(r,f.value,o)}function je(t){g(Ze(t),"input")}function Ge(){A("confirm",u.value),W.value.hide()}function We(){g(void 0,"input"),A("clear"),W.value.hide()}return(t,r)=>(e.openBlock(),e.createBlock(e.unref(Ye.default),{ref_key:"tooltipRef",ref:W,style:e.normalizeStyle(`width: ${oe.value}; height: ${J.value};`),"max-width":"none",arrow:!1,placement:"bottom","bg-color":"#fff","tooltip-style":{width:"240px",padding:0,borderRadius:"4px",color:"rgba(0, 0, 0, 0.88)",...p.tooltipStyle},"content-style":{width:"100%",height:"100%"},trigger:"click","transition-duration":200},{tooltip:e.withCtx(()=>[p.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:e.normalizeClass(["color-picker-panel",{"panel-with-actions":p.actions.length}])},[e.createElementVNode("div",{ref_key:"palleteRef",ref:P,class:"color-picker-pallete",onPointerdown:Ne},[e.createElementVNode("div",{class:"color-picker-pallete-layer",style:e.normalizeStyle({backgroundImage:`linear-gradient(90deg, white, hsl(${$.value}, 100%, 50%))`})},null,4),r[1]||(r[1]=e.createElementVNode("div",{class:"color-picker-pallete-layer pallete-layer-shadowed",style:{"background-image":"linear-gradient(180deg, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%))"}},null,-1)),e.createElementVNode("div",{class:"color-picker-handle",style:e.normalizeStyle(ge.value)},[e.createElementVNode("div",{class:"color-picker-handle-fill",style:e.normalizeStyle(ke.value)},null,4)],4)],544),e.createElementVNode("div",Je,[e.createElementVNode("div",Ke,[e.createElementVNode("div",{class:"color-picker-slider",style:e.normalizeStyle(le.value)},[e.createElementVNode("div",{ref_key:"hueRailRef",ref:M,style:e.normalizeStyle(ye.value),onPointerdown:Re},[e.createElementVNode("div",{style:e.normalizeStyle(`position: absolute; top: 0px; bottom: 0; left: ${m}; right: ${m}`)},[e.createElementVNode("div",{class:"color-picker-handle",style:e.normalizeStyle(Se.value)},[e.createElementVNode("div",{class:"color-picker-handle-fill",style:e.normalizeStyle(we.value)},null,4)],4)],4)],36)],4),p.showAlpha?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"alphaRailRef",ref:U,class:"color-picker-slider",style:e.normalizeStyle(le.value),onPointerdown:Pe},[e.createElementVNode("div",{style:e.normalizeStyle(`
                    border-radius: ${m};
                    position: absolute;
                    top: 0px;
                    bottom: 0;
                    left: 0px;
                    right: 0px;
                    overflow: hidden;
                  `)},[r[2]||(r[2]=e.createElementVNode("div",{class:"color-picker-checkboard"},null,-1)),e.createElementVNode("div",{class:"color-picker-slider-image",style:e.normalizeStyle(`background-image: ${Ee.value}`)},null,4)],4),v.value?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(`position: absolute; top: 0px; bottom: 0; left: ${m}; right: ${m}`)},[e.createElementVNode("div",{class:"color-picker-handle",style:e.normalizeStyle(Ve.value)},[e.createElementVNode("div",{class:"color-picker-handle-fill",style:e.normalizeStyle($e.value)},null,4)],4)],4)):e.createCommentVNode("",!0)],36)):e.createCommentVNode("",!0)]),p.showPreview?(e.openBlock(),e.createElementBlock("div",Qe,[e.createElementVNode("span",{class:"color-picker-circle-fill",style:e.normalizeStyle(`background: ${re.value||"#000000"};`)},null,4),e.createElementVNode("input",{class:"color-picker-circle-input",type:"color",value:re.value,onChange:e.withModifiers(Le,["stop"])},null,40,_e)])):e.createCommentVNode("",!0)]),e.createElementVNode("div",et,[e.createElementVNode("div",{class:"color-picker-input-mode",style:e.normalizeStyle({cursor:p.modes.length===1?"":"pointer"}),onClick:Ue},e.toDisplayString(I.value),5),e.createElementVNode("div",tt,[f.value==="hex"?(e.openBlock(),e.createBlock(e.unref(se.default),e.mergeProps({key:0,size:"small",placeholder:I.value,value:q.value,"onUpdate:value":r[0]||(r[0]=o=>q.value=o),valueModifiers:{lazy:!0},onChange:ne},p.inputProps),null,16,["placeholder","value"])):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(Ce.value,(o,n)=>(e.openBlock(),e.createBlock(e.unref(se.default),e.mergeProps({size:"small",style:`${o==="A"?"flex-grow: 1.25":""}`,key:n,placeholder:o,value:H.value[n],"onUpdate:value":w=>H.value[n]=w,valueModifiers:{lazy:!0},onChange:w=>ne(w,n)},{ref_for:!0},p.inputProps),null,16,["style","placeholder","value","onUpdate:value","onChange"]))),128))])]),ae.value.length?(e.openBlock(),e.createElementBlock("div",lt,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(ae.value,(o,n)=>(e.openBlock(),e.createElementBlock("div",{tabindex:"0",class:"color-picker-swatch",key:n,onClick:w=>je(o)},[e.createElementVNode("div",{class:"color-picker-swatch-fill",style:e.normalizeStyle(`background: ${o.legalValue};`)},null,4)],8,rt))),128))])):e.createCommentVNode("",!0)],2),p.actions.length?(e.openBlock(),e.createElementBlock("div",ot,[p.actions.includes("confirm")?(e.openBlock(),e.createBlock(e.unref(ce.default),{key:0,type:"primary",size:"small",onClick:Ge},{default:e.withCtx(()=>[...r[3]||(r[3]=[e.createTextVNode("确认",-1)])]),_:1})):e.createCommentVNode("",!0),p.actions.includes("clear")?(e.openBlock(),e.createBlock(e.unref(ce.default),{key:1,size:"small",onClick:We},{default:e.withCtx(()=>[...r[4]||(r[4]=[e.createTextVNode("清除",-1)])]),_:1})):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),fe.value?(e.openBlock(),e.createElementBlock("div",at,[e.renderSlot(t.$slots,"footer",{},()=>[e.createTextVNode(e.toDisplayString(p.footer),1)],!0)])):e.createCommentVNode("",!0)],64))]),default:e.withCtx(()=>[e.createElementVNode("div",e.mergeProps({tabindex:"1",class:["color-picker-display",[`color-picker-${p.size}`,{"color-picker-disabled":p.disabled}]],style:`
        --color-picker-width: ${oe.value};
        --color-picker-height: ${J.value};
        --color-picker-block-size: ${He.value};
        --color-picker-primary-color-hover: ${e.unref(te)[4]};
        --color-picker-primary-color-focus: ${e.unref(te)[4]};
        --color-picker-primary-shadow-color: ${e.unref(pe)};
      `},t.$attrs),[e.createElementVNode("div",nt,[e.createElementVNode("div",it,[r[5]||(r[5]=e.createElementVNode("div",{class:"color-picker-checkboard"},null,-1)),e.createElementVNode("div",{style:e.normalizeStyle(`position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: ${R.value?e.unref(l.toHslaString)(R.value):""};`)},null,4),u.value&&R.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"color-picker-value",style:e.normalizeStyle({color:R.value[2]>50||R.value[3]<.5?"black":"white"})},[e.renderSlot(t.$slots,"label",{color:u.value},()=>[e.createTextVNode(e.toDisplayString(p.label?p.label(u.value):u.value),1)],!0)],4)):e.createCommentVNode("",!0)])])],16)]),_:3},8,["style","tooltip-style"]))}});exports.default=st;