Home Explore Help
Register Sign In
hrx
/
mky-vent-base
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: 94e38e1c2c
Branches Tags
mky-vent-base
/
public
/
mxcad
/
assets
/
VColorPicker-OJXTdtLi.js

VColorPicker-OJXTdtLi.js 15 KB
History Raw

1 
  1. import{c9 as p,ct as E,cW as S,bG as M,ag as A,aR as C,cX as x,cI as w,cY as Q,a$ as H,aS as G,cg as V,an as l,cZ as ee,c_ as U,c$ as _,d0 as I,d1 as $,d2 as z,d3 as te,d4 as W,b6 as T,d5 as ae,d6 as j,d7 as X,d8 as Y,d9 as ne,da as le,aO as ce,db as oe,cJ as re,dc as de,cd as D,cx as ie,cT as se,dd as L,bn as fe}from"./index-D68iA7pN.js";import{V as F}from"./VSlider-Bmvc6aBM.js";const ue=p({color:{type:Object},disabled:Boolean,dotSize:{type:[Number,String],default:10},height:{type:[Number,String],default:150},width:{type:[Number,String],default:300},...E()},"VColorPickerCanvas"),he=S({name:"VColorPickerCanvas",props:ue(),emits:{"update:color":e=>!0,"update:position":e=>!0},setup(e,t){let{emit:a}=t;const r=M(!1),s=A(),n=M(parseFloat(e.width)),o=M(parseFloat(e.height)),f=A({x:0,y:0}),d=C({get:()=>f.value,set(c){if(!s.value)return;const{x:i,y:u}=c;f.value=c,a("update:color",{h:e.color?.h??0,s:x(i,0,n.value)/n.value,v:1-x(u,0,o.value)/o.value,a:e.color?.a??1})}}),h=C(()=>{const{x:c,y:i}=d.value,u=parseInt(e.dotSize,10)/2;return{width:w(e.dotSize),height:w(e.dotSize),transform:`translate(${w(c-u)}, ${w(i-u)})`}}),{resizeRef:k}=Q(c=>{if(!k.el?.offsetParent)return;const{width:i,height:u}=c[0].contentRect;n.value=i,o.value=u});function R(c,i,u){const{left:y,top:J,width:Z,height:K}=u;d.value={x:x(c-y,0,Z),y:x(i-J,0,K)}}function v(c){c.type==="mousedown"&&c.preventDefault(),!e.disabled&&(m(c),window.addEventListener("mousemove",m),window.addEventListener("mouseup",P),window.addEventListener("touchmove",m),window.addEventListener("touchend",P))}function m(c){if(e.disabled||!s.value)return;r.value=!0;const i=ee(c);R(i.clientX,i.clientY,s.value.getBoundingClientRect())}function P(){window.removeEventListener("mousemove",m),window.removeEventListener("mouseup",P),window.removeEventListener("touchmove",m),window.removeEventListener("touchend",P)}function B(){if(!s.value)return;const c=s.value,i=c.getContext("2d");if(!i)return;const u=i.createLinearGradient(0,0,c.width,0);u.addColorStop(0,"hsla(0, 0%, 100%, 1)"),u.addColorStop(1,`hsla(${e.color?.h??0}, 100%, 50%, 1)`),i.fillStyle=u,i.fillRect(0,0,c.width,c.height);const y=i.createLinearGradient(0,0,0,c.height);y.addColorStop(0,"hsla(0, 0%, 0%, 0)"),y.addColorStop(1,"hsla(0, 0%, 0%, 1)"),i.fillStyle=y,i.fillRect(0,0,c.width,c.height)}return H(()=>e.color?.h,B,{immediate:!0}),H(()=>[n.value,o.value],(c,i)=>{B(),f.value={x:d.value.x*c[0]/i[0],y:d.value.y*c[1]/i[1]}},{flush:"post"}),H(()=>e.color,()=>{if(r.value){r.value=!1;return}f.value=e.color?{x:e.color.s*n.value,y:(1-e.color.v)*o.value}:{x:0,y:0}},{deep:!0,immediate:!0}),G(()=>B()),V(()=>l("div",{ref:k,class:["v-color-picker-canvas",e.class],style:e.style,onMousedown:v,onTouchstartPassive:v},[l("canvas",{ref:s,width:n.value,height:o.value},null),e.color&&l("div",{class:["v-color-picker-canvas__dot",{"v-color-picker-canvas__dot--disabled":e.disabled}],style:h.value},null)])),{}}});function be(e,t){if(t){const{a,...r}=e;return r}return e}function ge(e,t){if(t==null||typeof t=="string"){const a=U(e);return e.a===1?a.slice(0,7):a}if(typeof t=="object"){let a;return _(t,["r","g","b"])?a=I(e):_(t,["h","s","l"])?a=$(e):_(t,["h","s","v"])&&(a=e),be(a,!_(t,["a"])&&e.a===1)}return e}const g={h:0,s:0,v:0,a:1},O={inputProps:{type:"number",min:0},inputs:[{label:"R",max:255,step:1,getValue:e=>Math.round(e.r),getColor:(e,t)=>({...e,r:Number(t)})},{label:"G",max:255,step:1,getValue:e=>Math.round(e.g),getColor:(e,t)=>({...e,g:Number(t)})},{label:"B",max:255,step:1,getValue:e=>Math.round(e.b),getColor:(e,t)=>({...e,b:Number(t)})},{label:"A",max:1,step:.01,getValue:e=>{let{a:t}=e;return t!=null?Math.round(t*100)/100:1},getColor:(e,t)=>({...e,a:Number(t)})}],to:I,from:z},ke={...O,inputs:O.inputs?.slice(0,3)},N={inputProps:{type:"number",min:0},inputs:[{label:"H",max:360,step:1,getValue:e=>Math.round(e.h),getColor:(e,t)=>({...e,h:Number(t)})},{label:"S",max:1,step:.01,getValue:e=>Math.round(e.s*100)/100,getColor:(e,t)=>({...e,s:Number(t)})},{label:"L",max:1,step:.01,getValue:e=>Math.round(e.l*100)/100,getColor:(e,t)=>({...e,l:Number(t)})},{label:"A",max:1,step:.01,getValue:e=>{let{a:t}=e;return t!=null?Math.round(t*100)/100:1},getColor:(e,t)=>({...e,a:Number(t)})}],to:$,from:te},ve={...N,inputs:N.inputs.slice(0,3)},q={inputProps:{type:"text"},inputs:[{label:"HEXA",getValue:e=>e,getColor:(e,t)=>t}],to:U,from:W},me={...q,inputs:[{label:"HEX",getValue:e=>e.slice(0,7),getColor:(e,t)=>t}]},b={rgb:ke,rgba:O,hsl:ve,hsla:N,hex:me,hexa:q},ye=e=>{let{label:t,...a}=e;return l("div",{class:"v-color-picker-edit__input"},[l("input",a,null),l("span",null,[t])])},we=p({color:Object,disabled:Boolean,mode:{type:String,default:"rgba",validator:e=>Object.keys(b).includes(e)},modes:{type:Array,default:()=>Object.keys(b),validator:e=>Array.isArray(e)&&e.every(t=>Object.keys(b).includes(t))},...E()},"VColorPickerEdit"),Ce=S({name:"VColorPickerEdit",props:we(),emits:{"update:color":e=>!0,"update:mode":e=>!0},setup(e,t){let{emit:a}=t;const r=C(()=>e.modes.map(n=>({...b[n],name:n}))),s=C(()=>{const n=r.value.find(f=>f.name===e.mode);if(!n)return[];const o=e.color?n.to(e.color):null;return n.inputs?.map(f=>{let{getValue:d,getColor:h,...k}=f;return{...n.inputProps,...k,disabled:e.disabled,value:o&&d(o),onChange:R=>{const v=R.target;v&&a("update:color",n.from(h(o??n.to(g),v.value)))}}})});return V(()=>l("div",{class:["v-color-picker-edit",e.class],style:e.style},[s.value?.map(n=>l(ye,n,null)),r.value.length>1&&l(T,{icon:"$unfold",size:"x-small",variant:"plain",onClick:()=>{const n=r.value.findIndex(o=>o.name===e.mode);a("update:mode",r.value[(n+1)%r.value.length].name)}},null)])),{}}}),pe=p({color:{type:Object},disabled:Boolean,hideAlpha:Boolean,...E()},"VColorPickerPreview"),Se=S({name:"VColorPickerPreview",props:pe(),emits:{"update:color":e=>!0},setup(e,t){let{emit:a}=t;const r=new AbortController;ae(()=>r.abort());async function s(){if(!j)return;const n=new window.EyeDropper;try{const o=await n.open({signal:r.signal}),f=W(o.sRGBHex);a("update:color",{...e.color??g,...f})}catch{}}return V(()=>l("div",{class:["v-color-picker-preview",{"v-color-picker-preview--hide-alpha":e.hideAlpha},e.class],style:e.style},[j&&l("div",{class:"v-color-picker-preview__eye-dropper",key:"eyeDropper"},[l(T,{onClick:s,icon:"$eyeDropper",variant:"plain",density:"comfortable"},null)]),l("div",{class:"v-color-picker-preview__dot"},[l("div",{style:{background:X(e.color??g)}},null)]),l("div",{class:"v-color-picker-preview__sliders"},[l(F,{class:"v-color-picker-preview__track v-color-picker-preview__hue",modelValue:e.color?.h,"onUpdate:modelValue":n=>a("update:color",{...e.color??g,h:n}),step:0,min:0,max:360,disabled:e.disabled,thumbSize:14,trackSize:8,trackFillColor:"white",hideDetails:!0},null),!e.hideAlpha&&l(F,{class:"v-color-picker-preview__track v-color-picker-preview__alpha",modelValue:e.color?.a??1,"onUpdate:modelValue":n=>a("update:color",{...e.color??g,a:n}),step:1/256,min:0,max:1,disabled:e.disabled,thumbSize:14,trackSize:8,trackFillColor:"white",hideDetails:!0},null)])])),{}}}),Ve={base:"#f44336",lighten5:"#ffebee",lighten4:"#ffcdd2",lighten3:"#ef9a9a",lighten2:"#e57373",lighten1:"#ef5350",darken1:"#e53935",darken2:"#d32f2f",darken3:"#c62828",darken4:"#b71c1c",accent1:"#ff8a80",accent2:"#ff5252",accent3:"#ff1744",accent4:"#d50000"},Pe={base:"#e91e63",lighten5:"#fce4ec",lighten4:"#f8bbd0",lighten3:"#f48fb1",lighten2:"#f06292",lighten1:"#ec407a",darken1:"#d81b60",darken2:"#c2185b",darken3:"#ad1457",darken4:"#880e4f",accent1:"#ff80ab",accent2:"#ff4081",accent3:"#f50057",accent4:"#c51162"},xe={base:"#9c27b0",lighten5:"#f3e5f5",lighten4:"#e1bee7",lighten3:"#ce93d8",lighten2:"#ba68c8",lighten1:"#ab47bc",darken1:"#8e24aa",darken2:"#7b1fa2",darken3:"#6a1b9a",darken4:"#4a148c",accent1:"#ea80fc",accent2:"#e040fb",accent3:"#d500f9",accent4:"#aa00ff"},_e={base:"#673ab7",lighten5:"#ede7f6",lighten4:"#d1c4e9",lighten3:"#b39ddb",lighten2:"#9575cd",lighten1:"#7e57c2",darken1:"#5e35b1",darken2:"#512da8",darken3:"#4527a0",darken4:"#311b92",accent1:"#b388ff",accent2:"#7c4dff",accent3:"#651fff",accent4:"#6200ea"},He={base:"#3f51b5",lighten5:"#e8eaf6",lighten4:"#c5cae9",lighten3:"#9fa8da",lighten2:"#7986cb",lighten1:"#5c6bc0",darken1:"#3949ab",darken2:"#303f9f",darken3:"#283593",darken4:"#1a237e",accent1:"#8c9eff",accent2:"#536dfe",accent3:"#3d5afe",accent4:"#304ffe"},Ee={base:"#2196f3",lighten5:"#e3f2fd",lighten4:"#bbdefb",lighten3:"#90caf9",lighten2:"#64b5f6",lighten1:"#42a5f5",darken1:"#1e88e5",darken2:"#1976d2",darken3:"#1565c0",darken4:"#0d47a1",accent1:"#82b1ff",accent2:"#448aff",accent3:"#2979ff",accent4:"#2962ff"},Re={base:"#03a9f4",lighten5:"#e1f5fe",lighten4:"#b3e5fc",lighten3:"#81d4fa",lighten2:"#4fc3f7",lighten1:"#29b6f6",darken1:"#039be5",darken2:"#0288d1",darken3:"#0277bd",darken4:"#01579b",accent1:"#80d8ff",accent2:"#40c4ff",accent3:"#00b0ff",accent4:"#0091ea"},Be={base:"#00bcd4",lighten5:"#e0f7fa",lighten4:"#b2ebf2",lighten3:"#80deea",lighten2:"#4dd0e1",lighten1:"#26c6da",darken1:"#00acc1",darken2:"#0097a7",darken3:"#00838f",darken4:"#006064",accent1:"#84ffff",accent2:"#18ffff",accent3:"#00e5ff",accent4:"#00b8d4"},Me={base:"#009688",lighten5:"#e0f2f1",lighten4:"#b2dfdb",lighten3:"#80cbc4",lighten2:"#4db6ac",lighten1:"#26a69a",darken1:"#00897b",darken2:"#00796b",darken3:"#00695c",darken4:"#004d40",accent1:"#a7ffeb",accent2:"#64ffda",accent3:"#1de9b6",accent4:"#00bfa5"},Ae={base:"#4caf50",lighten5:"#e8f5e9",lighten4:"#c8e6c9",lighten3:"#a5d6a7",lighten2:"#81c784",lighten1:"#66bb6a",darken1:"#43a047",darken2:"#388e3c",darken3:"#2e7d32",darken4:"#1b5e20",accent1:"#b9f6ca",accent2:"#69f0ae",accent3:"#00e676",accent4:"#00c853"},Oe={base:"#8bc34a",lighten5:"#f1f8e9",lighten4:"#dcedc8",lighten3:"#c5e1a5",lighten2:"#aed581",lighten1:"#9ccc65",darken1:"#7cb342",darken2:"#689f38",darken3:"#558b2f",darken4:"#33691e",accent1:"#ccff90",accent2:"#b2ff59",accent3:"#76ff03",accent4:"#64dd17"},Ne={base:"#cddc39",lighten5:"#f9fbe7",lighten4:"#f0f4c3",lighten3:"#e6ee9c",lighten2:"#dce775",lighten1:"#d4e157",darken1:"#c0ca33",darken2:"#afb42b",darken3:"#9e9d24",darken4:"#827717",accent1:"#f4ff81",accent2:"#eeff41",accent3:"#c6ff00",accent4:"#aeea00"},ze={base:"#ffeb3b",lighten5:"#fffde7",lighten4:"#fff9c4",lighten3:"#fff59d",lighten2:"#fff176",lighten1:"#ffee58",darken1:"#fdd835",darken2:"#fbc02d",darken3:"#f9a825",darken4:"#f57f17",accent1:"#ffff8d",accent2:"#ffff00",accent3:"#ffea00",accent4:"#ffd600"},je={base:"#ffc107",lighten5:"#fff8e1",lighten4:"#ffecb3",lighten3:"#ffe082",lighten2:"#ffd54f",lighten1:"#ffca28",darken1:"#ffb300",darken2:"#ffa000",darken3:"#ff8f00",darken4:"#ff6f00",accent1:"#ffe57f",accent2:"#ffd740",accent3:"#ffc400",accent4:"#ffab00"},De={base:"#ff9800",lighten5:"#fff3e0",lighten4:"#ffe0b2",lighten3:"#ffcc80",lighten2:"#ffb74d",lighten1:"#ffa726",darken1:"#fb8c00",darken2:"#f57c00",darken3:"#ef6c00",darken4:"#e65100",accent1:"#ffd180",accent2:"#ffab40",accent3:"#ff9100",accent4:"#ff6d00"},Le={base:"#ff5722",lighten5:"#fbe9e7",lighten4:"#ffccbc",lighten3:"#ffab91",lighten2:"#ff8a65",lighten1:"#ff7043",darken1:"#f4511e",darken2:"#e64a19",darken3:"#d84315",darken4:"#bf360c",accent1:"#ff9e80",accent2:"#ff6e40",accent3:"#ff3d00",accent4:"#dd2c00"},Fe={base:"#795548",lighten5:"#efebe9",lighten4:"#d7ccc8",lighten3:"#bcaaa4",lighten2:"#a1887f",lighten1:"#8d6e63",darken1:"#6d4c41",darken2:"#5d4037",darken3:"#4e342e",darken4:"#3e2723"},Ge={base:"#607d8b",lighten5:"#eceff1",lighten4:"#cfd8dc",lighten3:"#b0bec5",lighten2:"#90a4ae",lighten1:"#78909c",darken1:"#546e7a",darken2:"#455a64",darken3:"#37474f",darken4:"#263238"},Ue={base:"#9e9e9e",lighten5:"#fafafa",lighten4:"#f5f5f5",lighten3:"#eeeeee",lighten2:"#e0e0e0",lighten1:"#bdbdbd",darken1:"#757575",darken2:"#616161",darken3:"#424242",darken4:"#212121"},Ie={black:"#000000",white:"#ffffff",transparent:"#ffffff00"},$e={red:Ve,pink:Pe,purple:xe,deepPurple:_e,indigo:He,blue:Ee,lightBlue:Re,cyan:Be,teal:Me,green:Ae,lightGreen:Oe,lime:Ne,yellow:ze,amber:je,orange:De,deepOrange:Le,brown:Fe,blueGrey:Ge,grey:Ue,shades:Ie},We=p({swatches:{type:Array,default:()=>Te($e)},disabled:Boolean,color:Object,maxHeight:[Number,String],...E()},"VColorPickerSwatches");function Te(e){return Object.keys(e).map(t=>{const a=e[t];return a.base?[a.base,a.darken4,a.darken3,a.darken2,a.darken1,a.lighten1,a.lighten2,a.lighten3,a.lighten4,a.lighten5]:[a.black,a.white,a.transparent]})}const Xe=S({name:"VColorPickerSwatches",props:We(),emits:{"update:color":e=>!0},setup(e,t){let{emit:a}=t;return V(()=>l("div",{class:["v-color-picker-swatches",e.class],style:[{maxHeight:w(e.maxHeight)},e.style]},[l("div",null,[e.swatches.map(r=>l("div",{class:"v-color-picker-swatches__swatch"},[r.map(s=>{const n=Y(s),o=z(n),f=ne(n);return l("div",{class:"v-color-picker-swatches__color",onClick:()=>o&&a("update:color",o)},[l("div",{style:{background:f}},[e.color&&le(e.color,o)?l(ce,{size:"x-small",icon:"$success",color:oe(s,"#FFFFFF")>2?"white":"black"},null):void 0])])})]))])])),{}}}),Ye=p({canvasHeight:{type:[String,Number],default:150},disabled:Boolean,dotSize:{type:[Number,String],default:10},hideCanvas:Boolean,hideSliders:Boolean,hideInputs:Boolean,mode:{type:String,default:"rgba",validator:e=>Object.keys(b).includes(e)},modes:{type:Array,default:()=>Object.keys(b),validator:e=>Array.isArray(e)&&e.every(t=>Object.keys(b).includes(t))},showSwatches:Boolean,swatches:Array,swatchesMaxHeight:{type:[Number,String],default:150},modelValue:{type:[Object,String]},...re(de({width:300}),["height","location","minHeight","maxHeight","minWidth","maxWidth"])},"VColorPicker"),Ze=S({name:"VColorPicker",props:Ye(),emits:{"update:modelValue":e=>!0,"update:mode":e=>!0},setup(e){const t=D(e,"mode"),a=A(null),r=D(e,"modelValue",void 0,d=>{if(d==null||d==="")return null;let h;try{h=z(Y(d))}catch{return null}return h},d=>d?ge(d,e.modelValue):null),s=C(()=>r.value?{...r.value,h:a.value??r.value.h}:null),{rtlClasses:n}=ie();let o=!0;H(r,d=>{if(!o){o=!0;return}d&&(a.value=d.h)},{immediate:!0});const f=d=>{o=!1,a.value=d.h,r.value=d};return G(()=>{e.modes.includes(t.value)||(t.value=e.modes[0])}),se({VSlider:{color:void 0,trackColor:void 0,trackFillColor:void 0}}),V(()=>{const d=L.filterProps(e);return l(L,fe({rounded:e.rounded,elevation:e.elevation,theme:e.theme,class:["v-color-picker",n.value,e.class],style:[{"--v-color-picker-color-hsv":X({...s.value??g,a:1})},e.style]},d,{maxWidth:e.width}),{default:()=>[!e.hideCanvas&&l(he,{key:"canvas",color:s.value,"onUpdate:color":f,disabled:e.disabled,dotSize:e.dotSize,width:e.width,height:e.canvasHeight},null),(!e.hideSliders||!e.hideInputs)&&l("div",{key:"controls",class:"v-color-picker__controls"},[!e.hideSliders&&l(Se,{key:"preview",color:s.value,"onUpdate:color":f,hideAlpha:!t.value.endsWith("a"),disabled:e.disabled},null),!e.hideInputs&&l(Ce,{key:"edit",modes:e.modes,mode:t.value,"onUpdate:mode":h=>t.value=h,color:s.value,"onUpdate:color":f,disabled:e.disabled},null)]),e.showSwatches&&l(Xe,{key:"swatches",color:s.value,"onUpdate:color":f,maxHeight:e.swatchesMaxHeight,swatches:e.swatches,disabled:e.disabled},null)]})}),{}}});export{Ze as V};
    2.