vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 2.7 kB
JavaScript
"use strict";const e=require("vue"),S=require("./component/panel.vue.cjs"),U=require("./component/hue.vue.cjs"),b=require("./component/alpha.vue.cjs"),B=require("./component/preset.vue.cjs"),x=require("./hook/useColorPicker.cjs"),R={class:"controls-container"},z={class:"square-container"},O=e.defineComponent({name:"ColorPicker",__name:"index",props:{modelValue:{default:""},preset:{default:()=>["#db5048","#35a8df","#1573fa","#37abaf","#c9412e","#9d38d3","#f3474d","#07975c","#e36a26"]},shadow:{type:Boolean},width:{default:20},height:{default:20}},emits:["update:modelValue","change"],setup(v,{emit:k}){const u=v,m=k,i=e.useTemplateRef("colorPickerEl"),c=e.ref(null),d=e.ref(null),p=e.ref(null),f=e.ref(null),{ckey:y,savedX:E,savedY:C,sliderWidth:_,hue:l,sat:n,val:o,alpha:a,isOpen:V,isPreset:N,colorPickerButStyle:g,currentColor:s,onSelect:w,onUpdateCursor:P,handleOpenPanel:h}=x.useColorPicker(u,i,p,c,d,f,m);return(q,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"colorPickerEl",ref:i,key:e.unref(y),class:"app-color-picker"},[e.createElementVNode("div",{class:"color-picker-but",style:e.normalizeStyle(e.unref(g)),onClick:r[0]||(r[0]=(...t)=>e.unref(h)&&e.unref(h)(...t))},[e.createElementVNode("div",{class:"picker-but-color",style:e.normalizeStyle({backgroundColor:e.unref(s)})},null,4)],4),e.createVNode(e.Transition,{name:"ease"},{default:e.withCtx(()=>[e.unref(V)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["color-picker-data",{"is-shadow":u.shadow}])},[e.createVNode(S,{ref_key:"panelEl",ref:f,sat:e.unref(n),"onUpdate:sat":r[1]||(r[1]=t=>e.isRef(n)?n.value=t:null),val:e.unref(o),"onUpdate:val":r[2]||(r[2]=t=>e.isRef(o)?o.value=t:null),x:e.unref(E),y:e.unref(C),"is-preset":e.unref(N),width:240,height:170,"current-color":e.unref(s),hue:e.unref(l),onUpdateCursor:e.unref(P)},null,8,["sat","val","x","y","is-preset","current-color","hue","onUpdateCursor"]),e.createElementVNode("div",R,[e.createElementVNode("div",{ref_key:"sliderEl",ref:p,class:"slider-container"},[e.createVNode(U,{ref_key:"hueEl",ref:c,hue:e.unref(l),"onUpdate:hue":r[3]||(r[3]=t=>e.isRef(l)?l.value=t:null),width:e.unref(_)},null,8,["hue","width"]),e.createVNode(b,{ref_key:"alphaEl",ref:d,alpha:e.unref(a),"onUpdate:alpha":r[4]||(r[4]=t=>e.isRef(a)?a.value=t:null),width:e.unref(_),hue:e.unref(l),sat:e.unref(n),val:e.unref(o)},null,8,["alpha","width","hue","sat","val"])],512),e.createElementVNode("div",z,[e.createElementVNode("span",{style:e.normalizeStyle({backgroundColor:e.unref(s)})},null,4)])]),e.createVNode(B,e.mergeProps(q.$attrs,{preset:u.preset,onSelect:e.unref(w)}),null,16,["preset","onSelect"])],2)):e.createCommentVNode("",!0)]),_:1})]))}});module.exports=O;