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