2023-11-15 15:57:04 +08:00

2 lines
17 KiB
JavaScript

import{U as ee,C as Le,w as se,v as Fe,d as ie}from"./event-f85d77b0.js";import{E as ue}from"./index-c5914bde.js";import{i as Pe,b as Ve,_ as Te,d as He,s as G,r as Ie,v as Be,u as Oe,a6 as We,E as ce,J as De,a0 as ze}from"./index-cf9a2dd7.js";import{E as Ke}from"./index-4d8f36c6.js";import{E as Re}from"./index-e27c3bb0.js";import{d as I,b as D,s as he,r as b,w as E,o as X,_ as z,e as M,f as A,g as $,n as g,j as V,L as te,c as P,m as Z,W as de,I as je,a as qe,F as Ue,z as Xe,O as Ye,E as R,J as Je,v as j,x as T,M as fe,u as s,y as S,H as q,A as pe,B as ve,l as Ge}from"./plugin-vue_export-helper-85a4d40b.js";import{a as ne}from"./position-37364850.js";import{u as Ze}from"./index-1ad115d7.js";import{C as Qe}from"./index-bd04154b.js";import{d as xe}from"./debounce-6c3123a6.js";let Q=!1;function W(t,n){if(!Pe)return;const o=function(a){var r;(r=n.drag)==null||r.call(n,a)},e=function(a){var r;document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",e),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",e),document.onselectstart=null,document.ondragstart=null,Q=!1,(r=n.end)==null||r.call(n,a)},l=function(a){var r;Q||(a.preventDefault(),document.onselectstart=()=>!1,document.ondragstart=()=>!1,document.addEventListener("mousemove",o),document.addEventListener("mouseup",e),document.addEventListener("touchmove",o),document.addEventListener("touchend",e),Q=!0,(r=n.start)==null||r.call(n,a))};t.addEventListener("mousedown",l),t.addEventListener("touchstart",l)}const et=I({name:"ElColorAlphaSlider",props:{color:{type:Object,required:!0},vertical:{type:Boolean,default:!1}},setup(t){const n=D("color-alpha-slider"),o=te(),e=he(),l=he(),a=b(0),r=b(0),u=b();E(()=>t.color.get("alpha"),()=>{m()}),E(()=>t.color.value,()=>{m()});function d(){if(!e.value||t.vertical)return 0;const i=o.vnode.el,c=t.color.get("alpha");return i?Math.round(c*(i.offsetWidth-e.value.offsetWidth/2)/100):0}function p(){if(!e.value)return 0;const i=o.vnode.el;if(!t.vertical)return 0;const c=t.color.get("alpha");return i?Math.round(c*(i.offsetHeight-e.value.offsetHeight/2)/100):0}function _(){if(t.color&&t.color.value){const{r:i,g:c,b:v}=t.color.toRgb();return`linear-gradient(to right, rgba(${i}, ${c}, ${v}, 0) 0%, rgba(${i}, ${c}, ${v}, 1) 100%)`}return""}function k(i){i.target!==e.value&&w(i)}function w(i){if(!l.value||!e.value)return;const v=o.vnode.el.getBoundingClientRect(),{clientX:N,clientY:C}=ne(i);if(t.vertical){let f=C-v.top;f=Math.max(e.value.offsetHeight/2,f),f=Math.min(f,v.height-e.value.offsetHeight/2),t.color.set("alpha",Math.round((f-e.value.offsetHeight/2)/(v.height-e.value.offsetHeight)*100))}else{let f=N-v.left;f=Math.max(e.value.offsetWidth/2,f),f=Math.min(f,v.width-e.value.offsetWidth/2),t.color.set("alpha",Math.round((f-e.value.offsetWidth/2)/(v.width-e.value.offsetWidth)*100))}}function m(){a.value=d(),r.value=p(),u.value=_()}return X(()=>{if(!l.value||!e.value)return;const i={drag:c=>{w(c)},end:c=>{w(c)}};W(l.value,i),W(e.value,i),m()}),{thumb:e,bar:l,thumbLeft:a,thumbTop:r,background:u,handleClick:k,update:m,ns:n}}});function tt(t,n,o,e,l,a){return M(),A("div",{class:g([t.ns.b(),t.ns.is("vertical",t.vertical)])},[$("div",{ref:"bar",class:g(t.ns.e("bar")),style:V({background:t.background}),onClick:n[0]||(n[0]=(...r)=>t.handleClick&&t.handleClick(...r))},null,6),$("div",{ref:"thumb",class:g(t.ns.e("thumb")),style:V({left:t.thumbLeft+"px",top:t.thumbTop+"px"})},null,6)],2)}var nt=z(et,[["render",tt],["__file","/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/components/alpha-slider.vue"]]);const ot=I({name:"ElColorHueSlider",props:{color:{type:Object,required:!0},vertical:Boolean},setup(t){const n=D("color-hue-slider"),o=te(),e=b(),l=b(),a=b(0),r=b(0),u=P(()=>t.color.get("hue"));E(()=>u.value,()=>{w()});function d(m){m.target!==e.value&&p(m)}function p(m){if(!l.value||!e.value)return;const c=o.vnode.el.getBoundingClientRect(),{clientX:v,clientY:N}=ne(m);let C;if(t.vertical){let f=N-c.top;f=Math.min(f,c.height-e.value.offsetHeight/2),f=Math.max(e.value.offsetHeight/2,f),C=Math.round((f-e.value.offsetHeight/2)/(c.height-e.value.offsetHeight)*360)}else{let f=v-c.left;f=Math.min(f,c.width-e.value.offsetWidth/2),f=Math.max(e.value.offsetWidth/2,f),C=Math.round((f-e.value.offsetWidth/2)/(c.width-e.value.offsetWidth)*360)}t.color.set("hue",C)}function _(){if(!e.value)return 0;const m=o.vnode.el;if(t.vertical)return 0;const i=t.color.get("hue");return m?Math.round(i*(m.offsetWidth-e.value.offsetWidth/2)/360):0}function k(){if(!e.value)return 0;const m=o.vnode.el;if(!t.vertical)return 0;const i=t.color.get("hue");return m?Math.round(i*(m.offsetHeight-e.value.offsetHeight/2)/360):0}function w(){a.value=_(),r.value=k()}return X(()=>{if(!l.value||!e.value)return;const m={drag:i=>{p(i)},end:i=>{p(i)}};W(l.value,m),W(e.value,m),w()}),{bar:l,thumb:e,thumbLeft:a,thumbTop:r,hueValue:u,handleClick:d,update:w,ns:n}}});function at(t,n,o,e,l,a){return M(),A("div",{class:g([t.ns.b(),t.ns.is("vertical",t.vertical)])},[$("div",{ref:"bar",class:g(t.ns.e("bar")),onClick:n[0]||(n[0]=(...r)=>t.handleClick&&t.handleClick(...r))},null,2),$("div",{ref:"thumb",class:g(t.ns.e("thumb")),style:V({left:t.thumbLeft+"px",top:t.thumbTop+"px"})},null,6)],2)}var lt=z(ot,[["render",at],["__file","/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/components/hue-slider.vue"]]);const rt=Ve({modelValue:String,id:String,showAlpha:Boolean,colorFormat:String,disabled:Boolean,size:Te,popperClass:{type:String,default:""},label:{type:String,default:void 0},tabindex:{type:[String,Number],default:0},predefine:{type:He(Array)},validateEvent:{type:Boolean,default:!0}}),st={[ee]:t=>Z(t)||G(t),[Le]:t=>Z(t)||G(t),activeChange:t=>Z(t)||G(t)},$e=Symbol("colorPickerContextKey"),me=function(t,n,o){return[t,n*o/((t=(2-n)*o)<1?t:2-t)||0,t/2]},it=function(t){return typeof t=="string"&&t.includes(".")&&Number.parseFloat(t)===1},ut=function(t){return typeof t=="string"&&t.includes("%")},H=function(t,n){it(t)&&(t="100%");const o=ut(t);return t=Math.min(n,Math.max(0,Number.parseFloat(`${t}`))),o&&(t=Number.parseInt(`${t*n}`,10)/100),Math.abs(t-n)<1e-6?1:t%n/Number.parseFloat(n)},ge={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},U=t=>{t=Math.min(Math.round(t),255);const n=Math.floor(t/16),o=t%16;return`${ge[n]||n}${ge[o]||o}`},be=function({r:t,g:n,b:o}){return Number.isNaN(+t)||Number.isNaN(+n)||Number.isNaN(+o)?"":`#${U(t)}${U(n)}${U(o)}`},x={A:10,B:11,C:12,D:13,E:14,F:15},F=function(t){return t.length===2?(x[t[0].toUpperCase()]||+t[0])*16+(x[t[1].toUpperCase()]||+t[1]):x[t[1].toUpperCase()]||+t[1]},ct=function(t,n,o){n=n/100,o=o/100;let e=n;const l=Math.max(o,.01);o*=2,n*=o<=1?o:2-o,e*=l<=1?l:2-l;const a=(o+n)/2,r=o===0?2*e/(l+e):2*n/(o+n);return{h:t,s:r*100,v:a*100}},ke=(t,n,o)=>{t=H(t,255),n=H(n,255),o=H(o,255);const e=Math.max(t,n,o),l=Math.min(t,n,o);let a;const r=e,u=e-l,d=e===0?0:u/e;if(e===l)a=0;else{switch(e){case t:{a=(n-o)/u+(n<o?6:0);break}case n:{a=(o-t)/u+2;break}case o:{a=(t-n)/u+4;break}}a/=6}return{h:a*360,s:d*100,v:r*100}},B=function(t,n,o){t=H(t,360)*6,n=H(n,100),o=H(o,100);const e=Math.floor(t),l=t-e,a=o*(1-n),r=o*(1-l*n),u=o*(1-(1-l)*n),d=e%6,p=[o,r,a,a,u,o][d],_=[u,o,o,r,a,a][d],k=[a,a,u,o,o,r][d];return{r:Math.round(p*255),g:Math.round(_*255),b:Math.round(k*255)}};class O{constructor(n={}){this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="";for(const o in n)de(n,o)&&(this[o]=n[o]);n.value?this.fromString(n.value):this.doOnChange()}set(n,o){if(arguments.length===1&&typeof n=="object"){for(const e in n)de(n,e)&&this.set(e,n[e]);return}this[`_${n}`]=o,this.doOnChange()}get(n){return n==="alpha"?Math.floor(this[`_${n}`]):this[`_${n}`]}toRgb(){return B(this._hue,this._saturation,this._value)}fromString(n){if(!n){this._hue=0,this._saturation=100,this._value=100,this.doOnChange();return}const o=(e,l,a)=>{this._hue=Math.max(0,Math.min(360,e)),this._saturation=Math.max(0,Math.min(100,l)),this._value=Math.max(0,Math.min(100,a)),this.doOnChange()};if(n.includes("hsl")){const e=n.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(l=>l!=="").map((l,a)=>a>2?Number.parseFloat(l):Number.parseInt(l,10));if(e.length===4?this._alpha=Number.parseFloat(e[3])*100:e.length===3&&(this._alpha=100),e.length>=3){const{h:l,s:a,v:r}=ct(e[0],e[1],e[2]);o(l,a,r)}}else if(n.includes("hsv")){const e=n.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(l=>l!=="").map((l,a)=>a>2?Number.parseFloat(l):Number.parseInt(l,10));e.length===4?this._alpha=Number.parseFloat(e[3])*100:e.length===3&&(this._alpha=100),e.length>=3&&o(e[0],e[1],e[2])}else if(n.includes("rgb")){const e=n.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(l=>l!=="").map((l,a)=>a>2?Number.parseFloat(l):Number.parseInt(l,10));if(e.length===4?this._alpha=Number.parseFloat(e[3])*100:e.length===3&&(this._alpha=100),e.length>=3){const{h:l,s:a,v:r}=ke(e[0],e[1],e[2]);o(l,a,r)}}else if(n.includes("#")){const e=n.replace("#","").trim();if(!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(e))return;let l,a,r;e.length===3?(l=F(e[0]+e[0]),a=F(e[1]+e[1]),r=F(e[2]+e[2])):(e.length===6||e.length===8)&&(l=F(e.slice(0,2)),a=F(e.slice(2,4)),r=F(e.slice(4,6))),e.length===8?this._alpha=F(e.slice(6))/255*100:(e.length===3||e.length===6)&&(this._alpha=100);const{h:u,s:d,v:p}=ke(l,a,r);o(u,d,p)}}compare(n){return Math.abs(n._hue-this._hue)<2&&Math.abs(n._saturation-this._saturation)<1&&Math.abs(n._value-this._value)<1&&Math.abs(n._alpha-this._alpha)<1}doOnChange(){const{_hue:n,_saturation:o,_value:e,_alpha:l,format:a}=this;if(this.enableAlpha)switch(a){case"hsl":{const r=me(n,o/100,e/100);this.value=`hsla(${n}, ${Math.round(r[1]*100)}%, ${Math.round(r[2]*100)}%, ${this.get("alpha")/100})`;break}case"hsv":{this.value=`hsva(${n}, ${Math.round(o)}%, ${Math.round(e)}%, ${this.get("alpha")/100})`;break}case"hex":{this.value=`${be(B(n,o,e))}${U(l*255/100)}`;break}default:{const{r,g:u,b:d}=B(n,o,e);this.value=`rgba(${r}, ${u}, ${d}, ${this.get("alpha")/100})`}}else switch(a){case"hsl":{const r=me(n,o/100,e/100);this.value=`hsl(${n}, ${Math.round(r[1]*100)}%, ${Math.round(r[2]*100)}%)`;break}case"hsv":{this.value=`hsv(${n}, ${Math.round(o)}%, ${Math.round(e)}%)`;break}case"rgb":{const{r,g:u,b:d}=B(n,o,e);this.value=`rgb(${r}, ${u}, ${d})`;break}default:this.value=be(B(n,o,e))}}}const ht=I({props:{colors:{type:Array,required:!0},color:{type:Object,required:!0}},setup(t){const n=D("color-predefine"),{currentColor:o}=je($e),e=b(a(t.colors,t.color));E(()=>o.value,r=>{const u=new O;u.fromString(r),e.value.forEach(d=>{d.selected=u.compare(d)})}),qe(()=>{e.value=a(t.colors,t.color)});function l(r){t.color.fromString(t.colors[r])}function a(r,u){return r.map(d=>{const p=new O;return p.enableAlpha=!0,p.format="rgba",p.fromString(d),p.selected=p.value===u.value,p})}return{rgbaColors:e,handleSelect:l,ns:n}}}),dt=["onClick"];function ft(t,n,o,e,l,a){return M(),A("div",{class:g(t.ns.b())},[$("div",{class:g(t.ns.e("colors"))},[(M(!0),A(Ue,null,Xe(t.rgbaColors,(r,u)=>(M(),A("div",{key:t.colors[u],class:g([t.ns.e("color-selector"),t.ns.is("alpha",r._alpha<100),{selected:r.selected}]),onClick:d=>t.handleSelect(u)},[$("div",{style:V({backgroundColor:r.value})},null,4)],10,dt))),128))],2)],2)}var pt=z(ht,[["render",ft],["__file","/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/components/predefine.vue"]]);const vt=I({name:"ElSlPanel",props:{color:{type:Object,required:!0}},setup(t){const n=D("color-svpanel"),o=te(),e=b(0),l=b(0),a=b("hsl(0, 100%, 50%)"),r=P(()=>{const p=t.color.get("hue"),_=t.color.get("value");return{hue:p,value:_}});function u(){const p=t.color.get("saturation"),_=t.color.get("value"),k=o.vnode.el,{clientWidth:w,clientHeight:m}=k;l.value=p*w/100,e.value=(100-_)*m/100,a.value=`hsl(${t.color.get("hue")}, 100%, 50%)`}function d(p){const k=o.vnode.el.getBoundingClientRect(),{clientX:w,clientY:m}=ne(p);let i=w-k.left,c=m-k.top;i=Math.max(0,i),i=Math.min(i,k.width),c=Math.max(0,c),c=Math.min(c,k.height),l.value=i,e.value=c,t.color.set({saturation:i/k.width*100,value:100-c/k.height*100})}return E(()=>r.value,()=>{u()}),X(()=>{W(o.vnode.el,{drag:p=>{d(p)},end:p=>{d(p)}}),u()}),{cursorTop:e,cursorLeft:l,background:a,colorValue:r,handleDrag:d,update:u,ns:n}}}),mt=$("div",null,null,-1),gt=[mt];function bt(t,n,o,e,l,a){return M(),A("div",{class:g(t.ns.b()),style:V({backgroundColor:t.background})},[$("div",{class:g(t.ns.e("white"))},null,2),$("div",{class:g(t.ns.e("black"))},null,2),$("div",{class:g(t.ns.e("cursor")),style:V({top:t.cursorTop+"px",left:t.cursorLeft+"px"})},gt,6)],6)}var kt=z(vt,[["render",bt],["__file","/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/components/sv-panel.vue"]]);const $t=["id","aria-label","aria-labelledby","aria-description","tabindex","onKeydown"],Ct=I({name:"ElColorPicker"}),_t=I({...Ct,props:rt,emits:st,setup(t,{expose:n,emit:o}){const e=t,{t:l}=Ze(),a=D("color"),{formItem:r}=Ie(),u=Be(),d=Oe(),{inputId:p,isLabeledByFormItem:_}=We(e,{formItemContext:r}),k=b(),w=b(),m=b(),i=b();let c=!0;const v=Ye(new O({enableAlpha:e.showAlpha,format:e.colorFormat||"",value:e.modelValue})),N=b(!1),C=b(!1),f=b(""),Ce=P(()=>!e.modelValue&&!C.value?"transparent":ye(v,e.showAlpha)),Y=P(()=>!e.modelValue&&!C.value?"":v.value),_e=P(()=>_.value?void 0:e.label||l("el.colorpicker.defaultLabel")),we=P(()=>_.value?r==null?void 0:r.labelId:void 0),Me=P(()=>[a.b("picker"),a.is("disabled",d.value),a.bm("picker",u.value)]);function ye(h,y){if(!(h instanceof O))throw new TypeError("color should be instance of _color Class");const{r:L,g:le,b:re}=h.toRgb();return y?`rgba(${L}, ${le}, ${re}, ${h.get("alpha")/100})`:`rgb(${L}, ${le}, ${re})`}function Ee(h){N.value=h}const K=xe(Ee,100);function Ne(){K(!1),J()}function J(){R(()=>{e.modelValue?v.fromString(e.modelValue):(v.value="",R(()=>{C.value=!1}))})}function oe(){d.value||K(!N.value)}function ae(){v.fromString(f.value)}function Se(){const h=v.value;o(ee,h),o("change",h),e.validateEvent&&(r==null||r.validate("change").catch(y=>ie())),K(!1),R(()=>{const y=new O({enableAlpha:e.showAlpha,format:e.colorFormat||"",value:e.modelValue});v.compare(y)||J()})}function Ae(){K(!1),o(ee,null),o("change",null),e.modelValue!==null&&e.validateEvent&&(r==null||r.validate("change").catch(h=>ie())),J()}return X(()=>{e.modelValue&&(f.value=Y.value)}),E(()=>e.modelValue,h=>{h?h&&h!==v.value&&(c=!1,v.fromString(h)):C.value=!1}),E(()=>Y.value,h=>{f.value=h,c&&o("activeChange",h),c=!0}),E(()=>v.value,()=>{!e.modelValue&&!C.value&&(C.value=!0)}),E(()=>N.value,()=>{R(()=>{var h,y,L;(h=k.value)==null||h.update(),(y=w.value)==null||y.update(),(L=m.value)==null||L.update()})}),Je($e,{currentColor:Y}),n({color:v}),(h,y)=>(M(),j(s(Ke),{ref_key:"popper",ref:i,visible:N.value,"show-arrow":!1,"fallback-placements":["bottom","top","right","left"],offset:0,"gpu-acceleration":!1,"popper-class":[s(a).be("picker","panel"),s(a).b("dropdown"),h.popperClass],"stop-popper-mouse-event":!1,effect:"light",trigger:"click",transition:`${s(a).namespace.value}-zoom-in-top`,persistent:""},{content:T(()=>[fe((M(),A("div",null,[$("div",{class:g(s(a).be("dropdown","main-wrapper"))},[S(lt,{ref_key:"hue",ref:k,class:"hue-slider",color:s(v),vertical:""},null,8,["color"]),S(kt,{ref:"svPanel",color:s(v)},null,8,["color"])],2),h.showAlpha?(M(),j(nt,{key:0,ref_key:"alpha",ref:m,color:s(v)},null,8,["color"])):q("v-if",!0),h.predefine?(M(),j(pt,{key:1,ref:"predefine",color:s(v),colors:h.predefine},null,8,["color","colors"])):q("v-if",!0),$("div",{class:g(s(a).be("dropdown","btns"))},[$("span",{class:g(s(a).be("dropdown","value"))},[S(s(Re),{modelValue:f.value,"onUpdate:modelValue":y[0]||(y[0]=L=>f.value=L),"validate-event":!1,size:"small",onKeyup:se(ae,["enter"]),onBlur:ae},null,8,["modelValue","onKeyup"])],2),S(s(ue),{class:g(s(a).be("dropdown","link-btn")),text:"",size:"small",onClick:Ae},{default:T(()=>[pe(ve(s(l)("el.colorpicker.clear")),1)]),_:1},8,["class"]),S(s(ue),{plain:"",size:"small",class:g(s(a).be("dropdown","btn")),onClick:Se},{default:T(()=>[pe(ve(s(l)("el.colorpicker.confirm")),1)]),_:1},8,["class"])],2)])),[[s(Qe),Ne]])]),default:T(()=>[$("div",{id:s(p),class:g(s(Me)),role:"button","aria-label":s(_e),"aria-labelledby":s(we),"aria-description":s(l)("el.colorpicker.description",{color:h.modelValue||""}),tabindex:h.tabindex,onKeydown:se(oe,["enter"])},[s(d)?(M(),A("div",{key:0,class:g(s(a).be("picker","mask"))},null,2)):q("v-if",!0),$("div",{class:g(s(a).be("picker","trigger")),onClick:oe},[$("span",{class:g([s(a).be("picker","color"),s(a).is("alpha",h.showAlpha)])},[$("span",{class:g(s(a).be("picker","color-inner")),style:V({backgroundColor:s(Ce)})},[fe(S(s(ce),{class:g([s(a).be("picker","icon"),s(a).is("icon-arrow-down")])},{default:T(()=>[S(s(De))]),_:1},8,["class"]),[[Fe,h.modelValue||C.value]]),!h.modelValue&&!C.value?(M(),j(s(ce),{key:0,class:g([s(a).be("picker","empty"),s(a).is("icon-close")])},{default:T(()=>[S(s(ze))]),_:1},8,["class"])):q("v-if",!0)],6)],2)],2)],42,$t)]),_:1},8,["visible","popper-class","transition"]))}});var wt=z(_t,[["__file","/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/color-picker.vue"]]);const Tt=Ge(wt);export{Tt as E};