vue3-ts-picker/dist/vue3-ts-picker.global.prod.js

Vue3+ts的颜色选择器

/*!
  * vue3-ts-picker v2.2.4
  * (c) 2022 
  * @license MIT
  */
var Vue3TsPicker=function(e,l){"use strict";const t=(e,l,t)=>{const o=l/100,r=t/100,a=Math.floor(e/60)%6,n=e/60-a,c=r*(1-o),i=r*(1-n*o),u=r*(1-(1-n)*o);let d=0,s=0,v=0;switch(a){case 0:d=r,s=u,v=c;break;case 1:d=i,s=r,v=c;break;case 2:d=c,s=r,v=u;break;case 3:d=c,s=i,v=r;break;case 4:d=u,s=c,v=r;break;case 5:d=r,s=c,v=i}return[Math.round(255*d),Math.round(255*s),Math.round(255*v)]},o=e=>{const l=e.replace(/rgba?\(/,"").replace(/\)/,"").replace(/[\s+]/g,"").split(","),t=parseFloat(l[3]||1),o=Math.floor(t*parseInt(l[0])+255*(1-t)),r=Math.floor(t*parseInt(l[1])+255*(1-t)),a=Math.floor(t*parseInt(l[2])+255*(1-t));return"#"+("0"+o.toString(16)).slice(-2)+("0"+r.toString(16)).slice(-2)+("0"+a.toString(16)).slice(-2)};var r=l.defineComponent({name:"colorPicker",props:{color:{type:String,required:!0}},setup(e,{emit:r}){const a=l.ref({h:0,s:0,v:100,a:1}),n=l.ref(["#ff3b30","#ff9500","#ffcc00","#4cd964","#5ac8fa","#007aff","#5856d6","#bd10e0"]),c=l.ref(["#ffd8d6","#ffeacc","#fff5cc","#dbf7e0","#def4fe","#cce4ff","#deddf7","#f2cff9","#ffb1ac","#ffd599","#ffeb99","#bff1c7","#bde9fd","#99caff","#bcbbef","#e59ff3","#ff766f","#ffb54d","#ffdb4d","#82e493","#8cd9fc","#4da2ff","#8a89e2","#d158e9","#b22922","#b26800","#b28e00","#359746","#3f8caf","#0055b2","#3d3c95","#840b9c","#661813","#663c00","#665200","#1e5728","#245064","#003166","#232256","#4c065a"]),i=l.ref([0]),u=l.ref(!0),d=l.computed((()=>{let e=t(a.value.h,100,100);return`rgb(${e[0]},${e[1]},${e[2]})`})),s=l.computed((()=>{let e=t(a.value.h,a.value.s,a.value.v),l=`rgba(${e[0]},${e[1]},${e[2]},${a.value.a})`;return r("changePickerColorBen",u.value?l:o(l)),l})),v=l.computed((()=>{let e=t(a.value.h,a.value.s,a.value.v);return o(`rgba(${e[0]},${e[1]},${e[2]},${a.value.a})`)})),p=e=>{if(/rgba\(.*\)$/g.test(e)){let l=e.replace(/rgba?\(/,"").replace(/\)/,"").replace(/[\s+]/g,"").split(",");l.length&&4==l.length&&(a.value.a=Number(l[3]),e=`rgba(${l[0]},${l[1]},${l[2]})`),e=o(e)}if(!e)return;let l=((e,l=1)=>{let t=e.toLowerCase();if(t&&/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(t)){if(4===t.length){let e="#";for(let l=1;l<4;l+=1)e+=t.slice(l,l+1).concat(t.slice(l,l+1));t=e}const e=[];for(let l=1;l<7;l+=2)e.push(parseInt("0x"+t.slice(l,l+2)));return e}return[]})(e);l&&l.length&&(i.value=((e,l,t)=>{e/=255,l/=255,t/=255;let o=0,r=0,a=0;const n=Math.min(e,l,t),c=a=Math.max(e,l,t),i=c-n;if(c==n)o=0;else{switch(c){case e:o=(l-t)/i+(l<t?6:0);break;case l:o=2+(t-e)/i;break;case t:o=4+(e-l)/i}o=Math.round(60*o)}return r=0==c?0:1-n/c,r=Math.round(100*r),a=Math.round(100*a),[o,r,a]})(l[0],l[1],l[2]),a.value.h=i.value[0],a.value.s=i.value[1],a.value.v=i.value[2],i.value[3]=a.value.a)};l.onMounted((()=>{p(e.color)}));const f=l.computed((()=>i.value)),h=((e,t)=>{const o=l.ref(),r=l.ref({top:0,left:0}),a=l.computed((()=>t.value));return l.onMounted((()=>{l.watchEffect((()=>{if(!a.value.length&&a.value.length<=1)return r.value.top=0,void(r.value.left=0);if(!o.value)return r.value.top=0,void(r.value.left=0);const{width:e,height:l}=o.value.getBoundingClientRect();let t=(100-a.value[2])/100*l;r.value.left=Math.round(e/100*a.value[1]/e*100),r.value.top=Math.round(t/l*100)}))})),{handleChangePickerSvpanel:l=>{if(!o.value)return;const{width:t,height:a,x:n,y:c}=o.value.getBoundingClientRect();r.value.top=(l.clientY-c)/a*100,r.value.left=(l.clientX-n)/t*100,e.s=(l.clientX-n)/t*100,e.v=100*(1-(l.clientY-c)/a);let i=0,u=0;document.onmousemove=l=>{i=(l.clientX-n)/t*100,u=(l.clientY-c)/a*100,e.s=(l.clientX-n)/t*100,e.v=100*(1-(l.clientY-c)/a),l.clientX<=n&&(i=0,e.s=0),l.clientX-n>=t&&(i=100,e.s=100),l.clientY<=c&&(u=0,e.v=100),l.clientY>=c+a&&(u=100,e.v=0),r.value.top=u,r.value.left=i},document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null}},pickerColorSvpCursor:r,pickerColorSvpanel:o}})(a.value,f),k=((e,t)=>{const o=l.ref(),r=l.ref(0),a=l.computed((()=>t.value));return l.onMounted((()=>{l.watchEffect((()=>{if(!a.value.length&&a.value.length<=1)return void(r.value=0);if(!o.value)return void(r.value=0);const{width:e}=o.value.getBoundingClientRect();r.value=Math.round(e/360*a.value[0]/e*100)}))})),{pickerSliderBarEle:o,pickerColorBar:r,handleChangePickerBar:l=>{if(!o.value)return;const{width:t,x:a}=o.value.getBoundingClientRect();r.value=(l.clientX-a)/t*100,e.h=Math.round((l.clientX-a)/t*360),document.onmousemove=l=>{l.clientX<=a?(r.value=0,e.h=0):l.clientX-a>=t?(r.value=100,e.h=0):(r.value=(l.clientX-a)/t*100,e.h=Math.round((l.clientX-a)/t*360))},document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null}}}})(a.value,f),m=((e,o)=>{const r=l.ref(),a=l.ref(100),n=l.computed((()=>o.value));l.onMounted((()=>{l.watchEffect((()=>{!n.value.length&&n.value.length<=1?a.value=1:n.value.length>3&&(a.value=Math.round(100*n.value[3]))}))}));const c=l.computed((()=>{let l=t(e.h,e.s,e.v);return`linear-gradient(to right,rgba(${l[0]},${l[1]},${l[2]},0) 0%, rgb(${l[0]},${l[1]},${l[2]}) 100%)`}));return{handleChangePickerSlider:l=>{if(!r.value)return;const{width:t,x:o}=r.value.getBoundingClientRect();a.value=(l.clientX-o)/t*100,e.a=Math.round(a.value)/100,document.onmousemove=l=>{a.value=l.clientX<=o?0:l.clientX-o>=t?100:(l.clientX-o)/t*100,e.a=Math.round(a.value)/100},document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null}},pickerSliderSliderEle:r,pickerSliderSlider:a,pickerSliderBar:c}})(a.value,f);return{pickerColorSvpanelBg:d,adsorbentColor:s,pickerColorHsv:a,changePickerColor:e=>{a.value.h=e.h,a.value.s=e.s,a.value.v=e.v,a.value.a=e.a},titleColorDefault:n,colorPredefine:c,changePredeine:p,hsv:i,colorMode:v,isRgbMode:u,changeColorMode:()=>{u.value=!u.value},...h,...k,...m}}});const a=e=>(l.pushScopeId("data-v-0747681c"),e=e(),l.popScopeId(),e),n={class:"color-picker"},c={class:"svpanel"},i={class:"pickerSvpanel"},u=a((()=>l.createElementVNode("div",{class:"picker-color-svpanel__white picker-com"},null,-1))),d=a((()=>l.createElementVNode("div",{class:"picker-color-svpanel__black picker-com"},null,-1))),s=[a((()=>l.createElementVNode("div",{class:"pointer"},null,-1)))],v={class:"picker-color-bar"},p={class:"color-content"},f={class:"color-slider"},h={class:"picker-color-barWraper"},k={class:"colorBar"},m=a((()=>l.createElementVNode("div",{class:"content"},null,-1))),g={class:"colorSlider"},b={class:"picker-color-dropdown__btns"},C=[l.createStaticVNode('<svg width="18" height="18" viewBox="0 0 48 48" fill="none" data-v-0747681c><rect width="48" height="48" fill="white" fill-opacity="0.01" data-v-0747681c></rect><path d="M42 19H5.99998" stroke="#333" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" data-v-0747681c></path><path d="M30 7L42 19" stroke="#333" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" data-v-0747681c></path><path d="M6.79897 29H42.799" stroke="#333" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" data-v-0747681c></path><path d="M6.79895 29L18.799 41" stroke="#333" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" data-v-0747681c></path></svg>',1)],S={class:"picker-color-predefine"},M=["onClick"],E={class:"picker-color-predefine-box"},B=["onClick"];r.render=function(e,t,o,r,a,V){return l.openBlock(),l.createElementBlock("div",n,[l.createElementVNode("div",c,[l.createElementVNode("div",i,[l.createElementVNode("div",{class:"picker-color-svpanel",style:l.normalizeStyle({background:e.pickerColorSvpanelBg}),ref:"pickerColorSvpanel",onMousedown:t[0]||(t[0]=l.withModifiers((l=>e.handleChangePickerSvpanel(l)),["stop"]))},[u,d,l.createElementVNode("div",{class:"picker-color-svpanel__cursor",style:l.normalizeStyle({top:e.pickerColorSvpCursor.top+"%",left:e.pickerColorSvpCursor.left+"%"})},s,4)],36)])]),l.createElementVNode("div",v,[l.createElementVNode("div",p,[l.createElementVNode("div",{class:"picker-current-color",style:l.normalizeStyle({background:e.adsorbentColor})},null,4)]),l.createElementVNode("div",f,[l.createElementVNode("div",h,[l.createElementVNode("div",k,[m,l.createElementVNode("div",{class:"picker-color-content-bar",ref:"pickerSliderBarEle",onMousedown:t[1]||(t[1]=l=>e.handleChangePickerBar(l))},[l.createElementVNode("div",{class:"bar",style:l.normalizeStyle({left:e.pickerColorBar+"%"})},null,4)],544)])]),l.createElementVNode("div",g,[l.createElementVNode("div",{class:"picker-color-alpha-slider",ref:"pickerSliderSliderEle",onMousedown:t[2]||(t[2]=l=>e.handleChangePickerSlider(l))},[l.createElementVNode("div",{class:"picker-color-alpha-slider__bar",style:l.normalizeStyle({background:e.pickerSliderBar})},null,4),l.createElementVNode("div",{class:"picker-color-alpha-slider__thumb",style:l.normalizeStyle({left:e.pickerSliderSlider+"%"})},null,4)],544)])])]),l.createElementVNode("div",b,[l.createElementVNode("span",null,l.toDisplayString(e.isRgbMode?e.adsorbentColor:e.colorMode),1),l.createElementVNode("div",{class:"picker-color-mode",onClick:t[3]||(t[3]=(...l)=>e.changeColorMode&&e.changeColorMode(...l))},C)]),l.createElementVNode("div",S,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.titleColorDefault,((t,o)=>(l.openBlock(),l.createElementBlock("div",{class:"picker-color-title",key:o,style:l.normalizeStyle({background:t}),onClick:l=>e.changePredeine(t)},null,12,M)))),128))]),l.createElementVNode("div",E,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(e.colorPredefine,((t,o)=>(l.openBlock(),l.createElementBlock("div",{class:"picker-color-box",key:o,style:l.normalizeStyle({background:t}),onClick:l=>e.changePredeine(t)},null,12,B)))),128))])])},r.__scopeId="data-v-0747681c",r.__file="src/color/colorPicker.vue",r.install=e=>{e.component(r.name,r)};var V={install:function(e){e.component(r.name,r)}};return e.ColorPicker=r,e.default=V,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);