vexip-ui/lib/components/color-picker/color-picker.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../button/index.cjs");require("../icon/index.cjs");require("../input/index.cjs");require("../popper/index.cjs");require("../renderer/index.cjs");require("../form/index.cjs");const Ke=require("./color-palette.vue.cjs"),De=require("./color-hue.vue.cjs"),Ie=require("./color-alpha.vue.cjs"),B=require("@vexip-ui/hooks"),d=require("@vexip-ui/config"),n=require("@vexip-ui/utils"),Me=require("./props.cjs"),te=require("./symbol.cjs"),Re=require("../form/helper.cjs"),z=require("../renderer/renderer.cjs"),y=require("../icon/icon.cjs"),_e=require("../popper/popper.vue.cjs"),Oe=require("../input/input.cjs"),oe=require("../button/button.cjs"),Ue=["id","aria-disabled","aria-expanded","aria-labelledby","onKeydown"],We=["aria-label"],je=["onClick"],Ge=e.defineComponent({name:"ColorPicker",__name:"color-picker",props:Me.colorPickerProps,emits:["update:value","update:visible"],setup(ne,{expose:ue,emit:se}){const{idFor:K,labelId:ie,state:ce,disabled:fe,loading:de,size:ve,validateField:pe,clearField:me,getFieldValue:be,setFieldValue:he}=Re.useFieldStore(()=>{var l;return(l=m.value)==null?void 0:l.focus()}),t=d.useNameHelper("color-picker"),ke=ne,a=d.useProps("colorPicker",ke,{size:d.createSizeProp(ve),state:d.createStateProp(ce),locale:null,value:{default:()=>be(),static:!0},visible:!1,format:{default:"rgb",validator:l=>["rgb","hsl","hsv","hex"].includes(l)},alpha:!1,disabled:()=>fe.value,transitionName:()=>t.ns("drop"),noInput:!1,shortcut:!1,placement:{default:"bottom",validator:l=>B.placementWhileList.includes(l)},transfer:!1,outsideClose:!0,clearable:!1,cancelText:null,confirmText:null,prefix:d.createIconProp(),prefixColor:"",suffix:d.createIconProp(),suffixColor:"",noSuffix:!1,staticSuffix:!1,loading:()=>de.value,loadingIcon:d.createIconProp(),loadingLock:!1,loadingEffect:null,popperAlive:null,showLabel:!1,labelFormat:null,slots:()=>({})}),N=se,ge=e.useSlots(),g=d.useIcons(),S=d.useLocale("colorPicker",e.toRef(a,"locale")),p=e.ref(!0),c=e.ref(a.visible),s=e.ref(null),i=e.ref(1),$=e.ref(!1),Ce=e.toRef(a,"placement"),ye=e.toRef(a,"transfer"),h=e.ref(0),T=e.ref(!1);A(a.value);const D=e.ref(null),I=e.ref(null),M=e.ref(null),R=e.ref(null),_=e.ref(null),O=e.ref(null),U=e.ref(null),P=B.useClickOutside(Ne),q=e.ref(),{reference:m,transferTo:W,updatePopper:xe}=B.usePopper({placement:Ce,transfer:ye,wrapper:P,popper:e.computed(()=>{var l;return(l=q.value)==null?void 0:l.wrapper}),isDrop:!0}),{isHover:we}=B.useHover(m),Ee=e.computed(()=>[D.value,I.value,M.value,R.value,_.value,O.value,U.value].filter(Boolean)),w=e.ref({...s.value,a:i.value,format:"hsva"}),Ve=e.computed(()=>({[t.b()]:!0,[t.ns("input-vars")]:!0,[t.bs("vars")]:!0,[t.bm("inherit")]:a.inherit,[t.bm("empty")]:p.value&&!c.value,[t.bm("focused")]:c.value,[t.bm("disabled")]:a.disabled,[t.bm("alpha")]:a.alpha,[t.bm(a.size)]:a.size!=="default",[t.bm(a.state)]:a.state!=="default"})),x=e.computed(()=>a.loading&&a.loadingLock),Be=e.computed(()=>{const l=t.be("selector");return{[l]:!0,[`${l}--disabled`]:a.disabled,[`${l}--readonly`]:x.value,[`${l}--loading`]:a.loading,[`${l}--${a.size}`]:a.size!=="default",[`${l}--focused`]:c.value,[`${l}--${a.state}`]:a.state!=="default"}}),v=e.computed(()=>{const{h:l,s:r,v:o}=s.value&&c.value?s.value:w.value??{h:0,s:0,v:0};return n.hsvToRgb(l,r,o)}),j=e.computed(()=>{const{r:l,g:r,b:o}=v.value;return a.alpha?n.rgbaToHex(l,r,o,i.value):n.rgbToHex(l,r,o)}),F=e.computed(()=>a.shortcut?Array.isArray(a.shortcut)?a.shortcut:te.defaultShortcuts:[]),ze=e.computed(()=>!!(ge.prefix||a.prefix||a.slots.prefix)),G=e.computed(()=>!a.disabled&&!x.value&&a.clearable&&we.value&&!p.value),H=e.computed(()=>J(a.format)),E=e.computed(()=>{var l;return(l=a.labelFormat?J(a.labelFormat):H.value)==null?void 0:l.toString()});e.watch(()=>a.visible,l=>{c.value=l}),e.watch(c,l=>{l&&xe()}),e.watch(()=>a.value,l=>{A(l),w.value={...s.value,a:i.value,format:"hsva"}}),e.watch(()=>a.disabled,l=>{l&&b(!1)}),ue({idFor:K,isEmpty:p,currentVisible:c,currentValue:s,currentAlpha:i,rgb:v,hex:j,labelColor:E,wrapper:P,reference:m,popper:q,toggleVisible:Q,focus:Ae,blur:Le});function A(l){if(l){const{r,g:o,b:u,a:f}=n.parseColorToRgba(l);p.value=!1,s.value=n.rgbToHsv(r,o,u),i.value=f}else p.value=!0,s.value=te.getDefaultHsv(),i.value=1}function b(l){c.value!==l&&(c.value=l,N("update:visible",l),d.emitEvent(a.onToggle,l))}function J(l){let r;if(l==="hex"){const{r:o,g:u,b:f}=v.value;a.alpha?r=n.rgbaToHex(o,u,f,i.value):r=n.rgbToHex(o,u,f)}else{switch(l){case"rgb":{r={...v.value},r.r=Math.round(r.r),r.g=Math.round(r.g),r.b=Math.round(r.b);break}case"hsl":{const{h:o,s:u,v:f}=s.value;r=n.hsvToHsl(o,u,f),r.h=Math.round(r.h),r.s=n.toFixed(r.s,3),r.l=n.toFixed(r.l,3);break}default:r={...s.value},r.h=Math.round(r.h),r.s=n.toFixed(r.s,3),r.v=n.toFixed(r.v,3)}r.a=n.toFixed(i.value,3)}return r}function Ne(){$.value||(d.emitEvent(a.onClickOutside),a.outsideClose&&c.value&&(b(!1),d.emitEvent(a.onOutsideClose)))}function Q(){a.disabled||x.value||b(!c.value)}function X(){a.disabled||x.value||a.clearable&&(b(!1),N("update:value",""),d.emitEvent(a.onChange,""),e.nextTick(()=>{A(null),me(),d.emitEvent(a.onClear)}))}function Y(){a.disabled||x.value||(w.value={...s.value,a:i.value,format:"hsva"},p.value=!1,b(!1),Se())}function Se(){const l=H.value;N("update:value",l),he(l),d.emitEvent(a.onChange,l),pe()}function $e({s:l,v:r}){s.value.s=l,s.value.v=r}function Te(l){s.value.h=l}function Pe(l){i.value=l}function qe(l){const{r,g:o,b:u,a:f}=n.parseColorToRgba(l);s.value=n.rgbToHsv(r,o,u),i.value=f}function Z(l){const{r,g:o,b:u,a:f}=n.parseColorToRgba(l);s.value=n.rgbToHsv(r,o,u),i.value=f,d.emitEvent(a.onShortcut,H.value)}function C(l){l?$.value=!0:setTimeout(()=>{$.value=!1},0)}function ee(l){var r;if(n.isClient&&c.value){const o=document&&document.activeElement;if(!o)return;l.preventDefault();const u=l.shiftKey,f=Array.from(Ee.value),V=f.findIndex(L=>{const re=n.isElement(L)?L:L.$el;return re===o||re.contains(o)});let k;~V?(u?!V:V===f.length-1)?k=m.value:k=f[V+(u?-1:1)]:k=u?n.getLast(f):f[0],k&&(typeof k.focus=="function"?k.focus():(r=k.$el)==null||r.focus())}}function Fe(){h.value=0,T.value=!0}function He(l){const r=l.code||l.key,o=F.value.length;switch(r){case"ArrowUp":case"ArrowLeft":{h.value--;break}case"ArrowDown":case"ArrowRight":{h.value++;break}case"Enter":case"Space":case" ":{const u=F.value[h.value];u&&Z(u);break}}h.value=(h.value+o)%o}function le(l){var r;a.disabled?b(!1):(l.preventDefault(),c.value?(Y(),(r=m.value)==null||r.focus()):b(!0))}function ae(){var l;b(!1),(l=m.value)==null||l.focus()}function Ae(l){var r;(r=m.value)==null||r.focus(l)}function Le(){var l;(l=m.value)==null||l.blur()}return(l,r)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(K),ref_key:"wrapper",ref:P,class:e.normalizeClass(Ve.value),role:"group","aria-disabled":e.unref(n.toAttrValue)(e.unref(a).disabled),"aria-expanded":e.unref(n.toAttrValue)(c.value),"aria-haspopup":"listbox","aria-labelledby":e.unref(ie),onClick:Q,onKeydown:[e.withKeys(e.withModifiers(ee,["stop"]),["tab"]),e.withKeys(le,["space"]),e.withKeys(ae,["escape"])]},[e.createElementVNode("div",{ref_key:"reference",ref:m,class:e.normalizeClass(Be.value),tabindex:"0"},[e.renderSlot(l.$slots,"control",{color:v.value,alpha:i.value,empty:p.value},()=>[e.createVNode(e.unref(z),{renderer:e.unref(a).slots.control,data:{color:v.value,alpha:i.value,empty:p.value}},{default:e.withCtx(()=>[ze.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(t).be("icon"),e.unref(t).be("prefix")]),style:e.normalizeStyle({color:e.unref(a).prefixColor})},[e.renderSlot(l.$slots,"prefix",{},()=>[e.createVNode(e.unref(z),{renderer:e.unref(a).slots.prefix},{default:e.withCtx(()=>[e.createVNode(e.unref(y),{icon:e.unref(a).prefix},null,8,["icon"])]),_:1},8,["renderer"])])],6)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).be("control"))},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(t).be("marker"),l.showLabel&&e.unref(t).bem("marker","with-label")])},[!c.value&&p.value?(e.openBlock(),e.createBlock(e.unref(y),e.normalizeProps(e.mergeProps({key:0},e.unref(g).close)),null,16)):(e.openBlock(),e.createElementBlock("div",{key:1,style:e.normalizeStyle({width:"100%",height:"100%",backgroundColor:`rgba(${v.value.r}, ${v.value.g}, ${v.value.b}, ${c.value?i.value:w.value.a})`})},null,4))],2),l.showLabel?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(e.unref(t).be("label"))},[e.renderSlot(l.$slots,"label",{color:v.value,alpha:i.value,empty:p.value,label:E.value},()=>[e.createVNode(e.unref(z),{renderer:e.unref(a).slots.label,data:{color:v.value,alpha:i.value,empty:p.value,label:E.value}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(E.value),1)]),_:1},8,["renderer","data"])])],2)):e.createCommentVNode("",!0)],2),e.unref(a).noSuffix?e.unref(a).clearable||e.unref(a).loading?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass([e.unref(t).be("icon"),e.unref(t).bem("icon","placeholder"),e.unref(t).be("suffix")])},null,2)):e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(t).be("icon"),e.unref(t).be("suffix")]),style:e.normalizeStyle({color:e.unref(a).suffixColor,opacity:G.value||e.unref(a).loading?"0%":""})},[e.renderSlot(l.$slots,"suffix",{},()=>[e.createVNode(e.unref(z),{renderer:e.unref(a).slots.suffix},{default:e.withCtx(()=>[e.unref(a).suffix?(e.openBlock(),e.createBlock(e.unref(y),{key:0,icon:e.unref(a).suffix,class:e.normalizeClass({[e.unref(t).be("arrow")]:!e.unref(a).staticSuffix})},null,8,["icon","class"])):(e.openBlock(),e.createBlock(e.unref(y),e.mergeProps({key:1},e.unref(g).angleDown,{class:e.unref(t).be("arrow")}),null,16,["class"]))]),_:1},8,["renderer"])])],6)),e.createVNode(e.Transition,{name:e.unref(t).ns("fade"),appear:""},{default:e.withCtx(()=>[G.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass([e.unref(t).be("icon"),e.unref(t).be("clear")]),type:"button",tabindex:"-1","aria-label":e.unref(S).ariaLabel.clear,onClick:e.withModifiers(X,["stop"])},[e.createVNode(e.unref(y),e.normalizeProps(e.guardReactiveProps(e.unref(g).clear)),null,16)],10,We)):e.unref(a).loading?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([e.unref(t).be("icon"),e.unref(t).be("loading")])},[e.createVNode(e.unref(y),e.mergeProps(e.unref(g).loading,{effect:e.unref(a).loadingEffect||e.unref(g).loading.effect,icon:e.unref(a).loadingIcon||e.unref(g).loading.icon}),null,16,["effect","icon"])],2)):e.createCommentVNode("",!0)]),_:1},8,["name"])]),_:3},8,["renderer","data"])])],2),e.createVNode(e.unref(_e),{ref_key:"popper",ref:q,class:e.normalizeClass([e.unref(t).be("popper"),e.unref(t).bs("vars")]),visible:c.value,to:e.unref(W),transition:e.unref(a).transitionName,alive:e.unref(a).popperAlive??!e.unref(W),onClick:r[7]||(r[7]=e.withModifiers(()=>{},["stop"])),onKeydown:[e.withKeys(e.withModifiers(ee,["stop"]),["tab"]),e.withKeys(le,["space"]),e.withKeys(ae,["escape"])]},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).be("panel"))},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).be("section"))},[e.createVNode(Ke,{ref_key:"palette",ref:D,hue:s.value.h,saturation:s.value.s,value:s.value.v,onEditStart:r[0]||(r[0]=o=>C(!0)),onEditEnd:r[1]||(r[1]=o=>C(!1)),onChange:$e},null,8,["hue","saturation","value"]),e.createVNode(De,{ref_key:"hue",ref:I,hue:s.value.h,onEditStart:r[2]||(r[2]=o=>C(!0)),onEditEnd:r[3]||(r[3]=o=>C(!1)),onChange:Te},null,8,["hue"]),e.unref(a).alpha?(e.openBlock(),e.createBlock(Ie,{key:0,ref_key:"alphaEl",ref:M,rgb:v.value,alpha:i.value,onEditStart:r[4]||(r[4]=o=>C(!0)),onEditEnd:r[5]||(r[5]=o=>C(!1)),onChange:Pe},null,8,["rgb","alpha"])):e.createCommentVNode("",!0),e.unref(a).shortcut?(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"shortcutEl",ref:R,class:e.normalizeClass(e.unref(t).be("shortcuts")),tabindex:"-1",onFocus:Fe,onBlur:r[6]||(r[6]=o=>T.value=!1),onKeydown:He},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(F.value,(o,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:e.normalizeClass({[e.unref(t).be("shortcut-item")]:!0,[e.unref(t).bem("shortcut-item","hitting")]:T.value&&h.value===u}),style:e.normalizeStyle({backgroundColor:o}),onClick:f=>Z(o)},null,14,je))),128))],34)):e.createCommentVNode("",!0)],2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).be("action"))},[e.unref(a).noInput?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(Oe),{key:0,ref_key:"input",ref:_,inherit:"",class:e.normalizeClass(e.unref(t).be("input")),size:"small",value:j.value.toUpperCase(),respond:!1,onChange:qe},null,8,["class","value"])),e.unref(a).clearable?(e.openBlock(),e.createBlock(e.unref(oe),{key:1,ref_key:"cancel",ref:O,inherit:"",text:"",size:"small",onClick:X},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(a).cancelText||e.unref(S).cancel),1)]),_:1},512)):e.createCommentVNode("",!0),e.createVNode(e.unref(oe),{ref_key:"confirm",ref:U,inherit:"",type:"primary",size:"small",onClick:Y},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(a).confirmText||e.unref(S).confirm),1)]),_:1},512)],2)],2)]),_:1},8,["class","visible","to","transition","alive","onKeydown"])],42,Ue))}});module.exports=Ge;
//# sourceMappingURL=color-picker.vue2.cjs.map