vue-data-ui/dist/ColorPicker-DdX3Ab75.cjs

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

"use strict";const e=require("vue"),d=require("./BaseIcon-Dhgv4Qgl.cjs"),b=require("./index-CtzlfT2i.cjs"),h=require("./usePrinter-LlH3giBA.cjs"),B=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),_=["onClick"],x={style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -46%)"}},E=["value"],S={__name:"ColorPicker",props:{value:{type:String,default:"#ffffff"},size:{type:String,default:"50px"},backgroundColor:{type:String,default:"#FFFFFF"},buttonBorderColor:{type:String,default:"#FFFFFF"}},emits:["update:value"],setup(t,{emit:k}){const r=t,c=k,p=e.ref(null),v=e.computed(()=>({backgroundColor:r.value,width:"100%",height:"100%",cursor:"pointer"})),n=e.ref(null),l=e.ref(!1),f=()=>{var o;(o=n.value)==null||o.click()};function F(o){c("update:value",o),l.value=!1}function C(){l.value=!1}function u(){l.value&&C()}const m=o=>{const i=o.target.value;c("update:value",i)},a=e.computed(()=>b.adaptColorToBackground(r.value));async function y(){l.value=!l.value}e.watch(()=>r.value,o=>{n.value.value=o});const g=e.ref(["#000000","#FFFFFF","#FF5733","#33FF57","#3357FF","#FFC300","#800080","#FF1493","#00CED1"]);return(o,i)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{onKeydown:e.withKeys(u,["esc"]),style:{height:"100%",width:"100%",position:"relative"}},[e.createElementVNode("button",{class:"icon",onClick:y,style:e.normalizeStyle(v.value)},[e.createVNode(d.default,{name:"palette",stroke:a.value,size:22},null,8,["stroke"])],4),l.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"picker",ref:p,tabindex:"0",class:"vue-ui-color-picker",style:e.normalizeStyle({backgroundColor:t.backgroundColor})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(g.value,s=>(e.openBlock(),e.createElementBlock("button",{tabindex:"0",class:"vue-ui-color-picker-option",style:e.normalizeStyle({backgroundColor:s,outline:`1px solid ${t.buttonBorderColor}`}),onClick:()=>F(s)},null,12,_))),256)),e.createElementVNode("button",{class:"vue-ui-color-picker-option",onClick:f,style:e.normalizeStyle({backgroundColor:t.value,outline:`1px solid ${t.buttonBorderColor}`})},[e.createElementVNode("div",x,[e.createVNode(d.default,{name:"colorPicker",stroke:a.value,size:22},null,8,["stroke"])]),e.createElementVNode("input",{ref_key:"colorInput",ref:n,type:"color",value:t.value,class:"hidden-input",onInput:m},null,40,E)],4)],4)):e.createCommentVNode("",!0)],32)),[[e.unref(h.vClickOutside),u]])}},P=B._export_sfc(S,[["__scopeId","data-v-f6dd9192"]]);exports.ColorPicker=P;