vue3-ts-picker/demo_dist/assets/index.317b2bfe.js

Vue3+ts的颜色选择器

import{d as R,r as b,a as E,o as D,b as m,c as _,e as g,n as w,u as h,w as V,f as M,g as F,t as ee,h as te,v as oe,i as ne,j as le,F as j,k as T,l as se,m as H,p as re,q as ae,s as z,x as ce,y as ie}from"./vendor.e7fd55b8.js";const ue=function(){const s=document.createElement("link").relList;if(s&&s.supports&&s.supports("modulepreload"))return;for(const l of document.querySelectorAll('link[rel="modulepreload"]'))o(l);new MutationObserver(l=>{for(const e of l)if(e.type==="childList")for(const a of e.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&o(a)}).observe(document,{childList:!0,subtree:!0});function n(l){const e={};return l.integrity&&(e.integrity=l.integrity),l.referrerpolicy&&(e.referrerPolicy=l.referrerpolicy),l.crossorigin==="use-credentials"?e.credentials="include":l.crossorigin==="anonymous"?e.credentials="omit":e.credentials="same-origin",e}function o(l){if(l.ep)return;l.ep=!0;const e=n(l);fetch(l.href,e)}};ue();function de(t){let s={r:0,g:0,b:0,a:1};/#/.test(t)?s=pe(t):/rgb/.test(t)?s=W(t):typeof t=="string"?s=W(`rgba(${t})`):Object.prototype.toString.call(t)==="[object Object]"&&(s=t);const{r:n,g:o,b:l,a:e}=s,{h:a,s:d,v:u}=ve(s);return{r:n,g:o,b:l,a:e===void 0?1:e,h:a,s:d,v:u}}function K(t){const s=document.createElement("canvas"),n=s.getContext("2d"),o=t*2;return s.width=o,s.height=o,n.fillStyle="#ffffff",n.fillRect(0,0,o,o),n.fillStyle="#ccd5db",n.fillRect(0,0,t,t),n.fillRect(t,t,t,t),s}function P(t,s,n,o,l,e){const a=t==="l",d=s.createLinearGradient(0,0,a?n:0,a?0:o);d.addColorStop(.01,l),d.addColorStop(.99,e),s.fillStyle=d,s.fillRect(0,0,n,o)}function he({r:t,g:s,b:n},o){const l=a=>("0"+Number(a).toString(16)).slice(-2),e=`#${l(t)}${l(s)}${l(n)}`;return o?e.toUpperCase():e}function pe(t){t=t.slice(1);const s=n=>parseInt(n,16)||0;return{r:s(t.slice(0,2)),g:s(t.slice(2,4)),b:s(t.slice(4,6))}}function W(t){return typeof t=="string"?(t=(/rgba?\((.*?)\)/.exec(t)||["","0,0,0,1"])[1].split(","),{r:Number(t[0])||0,g:Number(t[1])||0,b:Number(t[2])||0,a:Number(t[3]?t[3]:1)}):t}function ve({r:t,g:s,b:n}){t=t/255,s=s/255,n=n/255;const o=Math.max(t,s,n),l=Math.min(t,s,n),e=o-l;let a=0;o===l?a=0:o===t?s>=n?a=60*(s-n)/e:a=60*(s-n)/e+360:o===s?a=60*(n-t)/e+120:o===n&&(a=60*(t-s)/e+240),a=Math.floor(a);let d=parseFloat((o===0?0:1-l/o).toFixed(2)),u=parseFloat(o.toFixed(2));return{h:a,s:d,v:u}}const fe=["onMousedown"],ge=R({props:{color:{type:String,default:"#000000"},hsv:{type:Object,default:null},size:{type:Number,default:152}},emits:["selectSaturation"],setup(t,{expose:s,emit:n}){const o=t,l=b(),e=E({slideSaturationStyle:{}});D(()=>{a(),d()});const a=()=>{const c=l.value,r=o.size,p=c.getContext("2d");c.width=r,c.height=r,p.fillStyle=o.color,p.fillRect(0,0,r,r),P("l",p,r,r,"#FFFFFF","rgba(255,255,255,0)"),P("p",p,r,r,"rgba(0,0,0,0)","#000000")},d=()=>{e.slideSaturationStyle={left:o.hsv.s*o.size-5+"px",top:(1-o.hsv.v)*o.size-5+"px"}},u=c=>{const{top:r,left:p}=l.value.getBoundingClientRect(),f=c.target.getContext("2d"),i=y=>{let S=y.clientX-p,C=y.clientY-r;S<0&&(S=0),C<0&&(C=0),S>o.size&&(S=o.size),C>o.size&&(C=o.size),e.slideSaturationStyle={left:S-5+"px",top:C-5+"px"};const A=f.getImageData(Math.min(S,o.size-1),Math.min(C,o.size-1),1,1),[L,$,O]=A.data;n("selectSaturation",{r:L,g:$,b:O})};i(c);const x=()=>{document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",x)};document.addEventListener("mousemove",i),document.addEventListener("mouseup",x)};return s({renderColor:a,renderSlide:d}),(c,r)=>(m(),_("div",{class:"saturation",onMousedown:V(u,["prevent","stop"])},[g("canvas",{ref_key:"canvasSaturationRef",ref:l},null,512),g("div",{style:w(h(e).slideSaturationStyle),class:"slide"},null,4)],40,fe))}});var N=(t,s)=>{const n=t.__vccOpts||t;for(const[o,l]of s)n[o]=l;return n};const me=["onMousedown"],_e=R({props:{hsv:{type:Object,default:null},width:{type:Number,default:15},height:{type:Number,default:152}},emits:["selectHue"],setup(t,{expose:s,emit:n}){const o=t,l=b(),e=E({slideHueStyle:{}});D(()=>{a(),d()});const a=()=>{const c=l.value,r=o.width,p=o.height,f=c.getContext("2d");c.width=r,c.height=p;const i=f.createLinearGradient(0,0,0,p);i.addColorStop(0,"#FF0000"),i.addColorStop(.17*1,"#FF00FF"),i.addColorStop(.17*2,"#0000FF"),i.addColorStop(.17*3,"#00FFFF"),i.addColorStop(.17*4,"#00FF00"),i.addColorStop(.17*5,"#FFFF00"),i.addColorStop(1,"#FF0000"),f.fillStyle=i,f.fillRect(0,0,r,p)},d=()=>{e.slideHueStyle={top:(1-o.hsv.h/360)*o.height-2+"px"}},u=c=>{const{top:r}=l.value.getBoundingClientRect(),p=c.target.getContext("2d"),f=x=>{let y=x.clientY-r;y<0&&(y=0),y>o.height&&(y=o.height),e.slideHueStyle={top:y-2+"px"};const S=p.getImageData(0,Math.min(y,o.height-1),1,1),[C,A,L]=S.data;n("selectHue",{r:C,g:A,b:L})};f(c);const i=()=>{document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",i)};document.addEventListener("mousemove",f),document.addEventListener("mouseup",i)};return s({renderSlide:d}),(c,r)=>(m(),_("div",{class:"hue",onMousedown:V(u,["prevent","stop"])},[g("canvas",{ref_key:"canvasHueRef",ref:l},null,512),g("div",{style:w(h(e).slideHueStyle),class:"slide"},null,4)],40,me))}});var ye=N(_e,[["__scopeId","data-v-753cfb61"]]);const Se=["onMousedown"],Ce=R({props:{color:{type:String,default:"#000000"},rgba:{type:Object,default:null},width:{type:Number,default:15},height:{type:Number,default:152}},emits:["selectAlpha"],setup(t,{emit:s}){const n=t,o=b(),l=E({slideAlphaStyle:{},alphaSize:5});M([()=>n.color],(u,c)=>{e()}),M([()=>n.rgba.a],(u,c)=>{a()}),D(()=>{e(),a()});const e=()=>{const u=o.value,c=n.width,r=n.height,p=l.alphaSize,f=K(p),i=u.getContext("2d");u.width=c,u.height=r,i.fillStyle=i.createPattern(f,"repeat"),i.fillRect(0,0,c,r),P("p",i,c,r,"rgba(255,255,255,0)",n.color)},a=()=>{l.slideAlphaStyle={top:n.rgba.a*n.height-2+"px"}},d=u=>{const{top:c}=o.value.getBoundingClientRect(),r=f=>{let i=f.clientY-c;i<0&&(i=0),i>n.height&&(i=n.height);let x=parseFloat((i/n.height).toFixed(2));s("selectAlpha",x)};r(u);const p=()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",p)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",p)};return(u,c)=>(m(),_("div",{class:"color-alpha",onMousedown:V(d,["prevent","stop"])},[g("canvas",{ref_key:"canvasAlphaRef",ref:o},null,512),g("div",{style:w(h(l).slideAlphaStyle),class:"slide"},null,4)],40,Se))}});var Fe=N(Ce,[["__scopeId","data-v-4d587563"]]);const be=R({props:{color:{type:String,default:"#000000"},width:{type:Number,default:100},height:{type:Number,default:30}},setup(t){const s=t,n=E({alphaSize:5}),o=b();M([()=>s.color],(e,a)=>{l()}),D(()=>{l()});const l=()=>{const e=o.value,a=s.width,d=s.height,u=n.alphaSize,c=K(u),r=e.getContext("2d");e.width=a,e.height=d,r.fillStyle=r.createPattern(c,"repeat"),r.fillRect(0,0,a,d),r.fillStyle=s.color,r.fillRect(0,0,a,d)};return(e,a)=>(m(),_("canvas",{ref_key:"domRef",ref:o},null,512))}});const xe={class:"color-type"},we={class:"name"},He=R({props:{name:{type:String,default:""},color:{type:String,default:""}},emits:["inputColor"],setup(t,{emit:s}){const n=t,o=F({get(){return n.color||""},set(l){s("inputColor",l)}});return(l,e)=>(m(),_("div",xe,[g("span",we,ee(t.name),1),te(g("input",{"onUpdate:modelValue":e[0]||(e[0]=a=>ne(o)?o.value=a:null),class:"value"},null,512),[[oe,h(o)]])]))}});var q=N(He,[["__scopeId","data-v-846f0694"]]);const Re={class:"colors"},$e=["onClick"],ke={key:0,class:"colors history"},Ae=["onClick"],Le=R({props:{color:{type:String,default:"#000000"},colorsDefault:{type:Array,default:()=>[]},colorsHistoryKey:{type:String,default:""}},emits:["selectColor"],setup(t,{emit:s}){const n=t,o=b(),l=b([]),e=b();n.colorsHistoryKey&&localStorage&&(l.value=JSON.parse(localStorage.getItem(n.colorsHistoryKey))||[]),e.value=K(4).toDataURL();const a=u=>{if(!u)return;const c=l.value||[],r=c.indexOf(u);r>=0&&c.splice(r,1),c.length>=8&&(c.length=7),c.unshift(u),l.value=c||[],localStorage&&n.colorsHistoryKey&&localStorage.setItem(n.colorsHistoryKey,JSON.stringify(c))},d=u=>{s("selectColor",u)};return le(()=>{a(o.value)}),(u,c)=>(m(),_("div",null,[g("ul",Re,[(m(!0),_(j,null,T(t.colorsDefault,r=>(m(),_("li",{key:r,class:"item",onClick:p=>d(r)},[g("div",{style:w({background:`url(${e.value})`}),class:"alpha"},null,4),g("div",{style:w({background:r}),class:"color"},null,4)],8,$e))),128))]),l.value.length?(m(),_("ul",ke,[(m(!0),_(j,null,T(l.value,r=>(m(),_("li",{key:r,class:"item",onClick:p=>d(r)},[g("div",{style:w({background:`url(${e.value})`}),class:"alpha"},null,4),g("div",{style:w({background:r}),class:"color"},null,4)],8,Ae))),128))])):se("",!0)]))}});var Ee=N(Le,[["__scopeId","data-v-575f964a"]]);const Ne={class:"color-set"},B=R({props:{color:{type:String,default:"#000000"},theme:{type:String,default:"dark"},colorsDefault:{type:Array,default:()=>["#000000","#FFFFFF","#FF1900","#F47365","#FFB243","#FFE623","#6EFF2A","#1BC7B1","#00BEFF","#2E81FF","#5D61FF","#FF89CF","#FC3CAD","#BF3DCE","#8E00A7","rgba(0,0,0,0)"]},colorsHistoryKey:{type:String,default:"vue-colorpicker-history"}},emits:["changeColor"],setup(t,{emit:s}){const n=t,o=b(),l=b(),e=E({hueWidth:15,hueHeight:152,previewHeight:30,modelRgba:"",modelHex:"",r:0,g:0,b:0,a:1,h:0,s:0,v:0}),a=F(()=>n.theme==="light"),d=F(()=>e.hueHeight+(e.hueWidth+8)*2),u=F(()=>d.value),c=F(()=>({r:e.r,g:e.g,b:e.b,a:e.a})),r=F(()=>({h:e.h,s:e.s,v:e.v})),p=F(()=>`rgb(${e.r}, ${e.g}, ${e.b})`),f=F(()=>`${e.r}, ${e.g}, ${e.b}, ${e.a}`),i=F(()=>`rgba(${f.value})`),x=F(()=>he(c.value,!0)),y=v=>{k(v),$()},S=v=>{k(v),$(),z(()=>{o.value.renderColor(),o.value.renderSlide()})},C=v=>{e.a=v,$()},A=v=>{k(v),e.modelHex=v,e.modelRgba=f.value,z(()=>{o.value.renderColor(),o.value.renderSlide(),l.value.renderSlide()})},L=v=>{k(v),e.modelHex=x.value,e.modelRgba=v,z(()=>{o.value.renderColor(),o.value.renderSlide(),l.value.renderSlide()})},$=()=>{e.modelHex=x.value,e.modelRgba=f.value},O=v=>{k(v),$(),z(()=>{o.value.renderColor(),o.value.renderSlide(),l.value.renderSlide()})},G=()=>{s("changeColor",{rgba:c.value,hsv:r.value,hex:e.modelHex})};M([()=>c.value],(v,I)=>{G()});const k=v=>{const{r:I,g:U,b:Y,a:J,h:X,s:Q,v:Z}=de(v);e.r=I,e.g=U,e.b=Y,e.a=J,e.h=X,e.s=Q,e.v=Z};return k(n.color),$(),(v,I)=>(m(),_("div",{class:ae(["hu-color-picker",{light:h(a)}]),style:w({width:h(d)+"px"})},[g("div",Ne,[H(ge,{ref_key:"saturationRef",ref:o,color:h(p),hsv:h(r),size:h(e).hueHeight,onSelectSaturation:y},null,8,["color","hsv","size"]),H(ye,{ref_key:"hueRef",ref:l,hsv:h(r),width:h(e).hueWidth,height:h(e).hueHeight,onSelectHue:S},null,8,["hsv","width","height"]),H(Fe,{color:h(p),rgba:h(c),width:h(e).hueWidth,height:h(e).hueHeight,onSelectAlpha:C},null,8,["color","rgba","width","height"])]),g("div",{style:w({height:h(e).previewHeight+"px"}),class:"color-show"},[H(be,{color:h(i),width:h(u),height:h(e).previewHeight},null,8,["color","width","height"])],4),H(q,{name:"HEX",color:h(e).modelHex,onInputColor:A},null,8,["color"]),H(q,{name:"RGBA",color:h(e).modelRgba,onInputColor:L},null,8,["color"]),H(Ee,{color:h(i),"colors-default":t.colorsDefault,"colors-history-key":t.colorsHistoryKey,onSelectColor:O},null,8,["color","colors-default","colors-history-key"]),re(v.$slots,"default")],6))}});B.install=t=>{t.component(B.name,B)};const ze=R({components:{ColorPicker:B},setup(){const t=b("rgba(158,77,139,0.5)");return{changeFontSize:n=>{console.log("color",t),t.value=n},color:t}}}),Be={class:"page"};function Me(t,s,n,o,l,e){const a=ce("ColorPicker");return m(),_("div",Be,[H(a,{onChangePickerColorBen:t.changeFontSize,color:t.color},null,8,["onChangePickerColorBen","color"])])}var De=N(ze,[["render",Me]]);ie(De).mount("#app");