vuetify-color-field.cjs.js

"use strict";/**
 * @name @wdns/vuetify-color-field
 * @version 1.1.5
 * @description Vuetify Color Field is a Vuetify VTextField Color Picker Component
 * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)
 * @copyright Copyright 2024, WebDevNerdStuff
 * @homepage https://webdevnerdstuff.github.io/vuetify-color-field/
 * @repository https://github.com/webdevnerdstuff/vuetify-color-field
 * @license MIT License
 */Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),ie=require("vuetify/lib/components/VHover/index.mjs"),J=require("vuetify/lib/components/VIcon/index.mjs"),ae=require("@vueuse/core"),de=require("vuetify/lib/components/VCard/index.mjs"),pe=require("vuetify/lib/components/VColorPicker/index.mjs"),ce=require("vuetify/lib/components/VDefaultsProvider/index.mjs"),ue=require("vuetify/lib/components/VTextField/index.mjs"),I=a=>{const{unit:p="px",value:i}=a;if(i!=null&&i!=="")return+i?`${Number(i)}${p}`:String(i)},w="v-color-field",fe={fa:{default:"fa-solid fa-palette",pip:"fa-solid fa-circle"},mdi:{default:"mdi:mdi-palette",pip:"mdi:mdi-circle"}},Q=a=>{const{icon:p,iconOptions:i,name:t}=a;if(p)return p;let c=((i==null?void 0:i.defaultSet)??"").toLowerCase();c=c==="fa"||c==="fasvg"?"fa":c;const m=fe[c];if(!m)throw new Error(`[VColorField]: No default ${i==null?void 0:i.defaultSet} icon set found.`);const h=m[t];if(!h)throw new Error(`[VColorField]: No ${t} icon found.`);return h},_=e.defineComponent({__name:"ColorPickerIcon",props:{color:{},icon:{type:[String,null,Boolean],default:""},iconSize:{}},emits:["click"],setup(a,{emit:p}){const i=p,t=a,c=e.inject(Symbol.for("vuetify:icons")),m=e.computed(()=>Q({icon:t.icon!=="default"?t.icon:"",iconOptions:c,name:"default"}));function h(){i("click")}return(n,v)=>(e.openBlock(),e.createBlock(ie.VHover,null,{default:e.withCtx(({isHovering:S,props:k})=>[e.createVNode(J.VIcon,e.mergeProps(k,{color:S?n.color:void 0,icon:e.unref(m),size:n.iconSize,onClick:h}),null,16,["color","icon","size"])]),_:1}))}}),$=e.defineComponent({__name:"PipComponent",props:{modelValue:{},pip:{type:Boolean},pipBorder:{},pipIcon:{type:[String,null,Boolean]},pipBorderRadius:{},pipSize:{},pipSlot:{}},emits:["click"],setup(a,{emit:p}){const i=p,t=a,{modelValue:c}=e.toRefs(t),m=e.computed(()=>({[`${w}--pip`]:!0})),h=e.computed(()=>(k=>{const{pipBorder:f,pipBorderRadius:C}=k,y={backgroundColor:f&&f!=="none"?"rgb(var(--v-theme-on-surface))":"transparent",overflow:"hidden"};return f&&f!=="none"&&(y.border=f,y.borderRadius=C),y})({pipBorder:t.pipBorder,pipBorderRadius:t.pipBorderRadius})),n=e.inject(Symbol.for("vuetify:icons")),v=e.computed(()=>Q({icon:t.pipIcon!=="pip"?t.pipIcon:"",iconOptions:n,name:"pip"}));function S(){i("click")}return(k,f)=>(e.openBlock(),e.createBlock(J.VIcon,{class:e.normalizeClass(e.unref(m)),color:e.unref(c)||"--v-theme-on-surface",icon:e.unref(v),size:k.pipSize,style:e.normalizeStyle(e.unref(h)),tag:"div",onClick:S},null,8,["class","color","icon","size","style"]))}}),se={key:1},me={key:0,class:"text-error ms-1"},he=(a=>(e.pushScopeId("data-v-461a5893"),a=a(),e.popScopeId(),a))(()=>e.createElementVNode("div",{class:"position-elm-helper"},null,-1)),M=((a,p)=>{const i=a.__vccOpts||a;for(const[t,c]of p)i[t]=c;return i})(e.defineComponent({inheritAttrs:!1,__name:"VColorField",props:{appendIcon:{default:void 0},appendInnerIcon:{default:void 0},cardFieldWidth:{type:Boolean,default:!1},cardOffsetX:{default:0},cardOffsetY:{default:5},cardPadding:{default:4},cardProps:{default:()=>({})},clearable:{default:!1},color:{default:void 0},colorPickerProps:{default:()=>({})},density:{default:"default"},hint:{default:""},iconHoverColor:{type:Boolean,default:void 0},iconSize:{default:"default"},label:{default:void 0},messages:{default:void 0},name:{default:"color"},open:{default:"bottom left"},persistentHint:{type:Boolean,default:!1},persistentPlaceholder:{default:!1},placeholder:{default:void 0},prependIcon:{default:void 0},prependInnerIcon:{type:[String,null,Boolean],default:"default"},readonly:{default:!1},readonlyInput:{type:[Boolean,null],default:!1},required:{type:Boolean,default:!1},theme:{},canvasHeight:{},dotSize:{},hideCanvas:{},hideInputs:{},hideSliders:{},mode:{},modes:{},showSwatches:{},swatches:{},swatchesMaxHeight:{},variant:{default:"filled"},pip:{type:Boolean,default:!1},pipBorder:{default:"3px solid rgb(var(--v-theme-on-surface))"},pipIcon:{type:[String,null,Boolean],default:"pip"},pipBorderRadius:{default:"50%"},pipSize:{},pipSlot:{default:"prepend-inner"}},emits:["update","update:mode","update:modelValue"],setup(a,{emit:p}){var A;const i=e.useAttrs(),t=e.useSlots(),c=p,m=a,h=e.inject(T,{}),n=e.reactive({...m,...h});e.watchEffect(()=>{Object.assign(n,{...m,...h})});const v=e.ref({VCard:{elevation:5,hover:!1,loading:!1,verticalOffset:28,...n.cardProps},VColorPicker:{canvasHeight:n.canvasHeight,dotSize:n.dotSize,elevation:0,hideCanvas:n.hideCanvas,hideInputs:n.hideInputs,hideSliders:n.hideSliders,mode:n.mode,modes:n.modes,showSwatches:n.showSwatches,swatches:n.swatches,swatchesMaxHeight:n.swatchesMaxHeight,...n.colorPickerProps}}),S=e.ref(null),k=e.ref({}),f=e.ref(!1),C=e.ref(null),y=e.ref(i.modelValue),V=e.ref(i.modelValue),R=e.ref((A=v.value.VColorPicker)==null?void 0:A.mode),F=e.ref(n.theme??void 0);let s=e.reactive({bottom:0,height:150,left:0,right:0,top:0,width:300});const b=e.ref({density:n.density,modelValue:V,pip:n.pip,pipBorder:n.pipBorder,pipBorderRadius:n.pipBorderRadius,pipIcon:n.pipIcon,pipSize:n.iconSize});e.watch(()=>i.modelValue,o=>{O(o)});const ee=e.computed(()=>(o=>{const{name:r="",readonly:l,readonlyInput:d}=o;return{[`${w}--text-field-${r}`]:r!=="",[`${w}--text-field-readonly`]:l??!1,[`${w}--text-field-readonly-input`]:!(!d||l),[`${w}--text-field`]:!0}})({name:n.name,readonly:n.readonly,readonlyInput:n.readonlyInput})),ne=e.computed(()=>n.readonly||n.readonlyInput),P=e.computed(()=>{if(n.iconHoverColor!==!1)return typeof n.iconHoverColor=="string"?n.iconHoverColor:n.color??void 0}),oe=e.computed(()=>(o=>{const{fullWidth:r}=o;return{[`${w}--card`]:!0,[`${w}--card-full-width`]:r}})({fullWidth:n.cardFieldWidth}));function H(o){(o!=="textField"||n.readonlyInput||n.readonly)&&(o==="textFieldIcon"&&(n.readonlyInput||n.readonly)||u())}function u(o){var D;const r={left:0,right:0,top:0,width:0},l=C.value;if(!f.value&&(o==="keyup"||o==="clear"))return void(o==="clear"&&q(""));if(f.value=!f.value,!f.value)return void(k.value.display="none");const d=(l==null?void 0:l.getBoundingClientRect())??r;let B=(l==null?void 0:l.offsetHeight)??0,z=300,U=(d==null?void 0:d.left)??0,Y=(d==null?void 0:d.right)??0;const te=(d==null?void 0:d.top)??0,g=(D=C==null?void 0:C.value)==null?void 0:D.querySelector(".v-field__input"),E=(g==null?void 0:g.getBoundingClientRect())??r;B=g==null?void 0:g.offsetHeight,z=(g==null?void 0:g.offsetWidth)??0,U=E.left,Y=E.right-E.width,s={bottom:"initial",height:B,left:U,right:Y,top:window.scrollY+te,width:n.cardFieldWidth?z:"auto"},function(){var X,Z,G;let x=Number(s.top)+Number(s.height),K="initial",W=Number(n.cardOffsetY)??0;const L=Number(n.cardOffsetX)??0;(n.hint||m.messages)&&(W+=((X=v.value.VCard)==null?void 0:X.verticalOffset)??0),x+=W,(Z=n.open)!=null&&Z.includes("top")&&(K=window.innerHeight-x+Number(s.height)+2*W,x="initial");let j=Number(s.left)+L,N=s.right??0;n.cardFieldWidth?(j=s.left,N="initial"):(N="initial",(G=n.open)!=null&&G.includes("right")&&(j="initial",N=Number(s.right)+L));const le={bottom:I({value:K}),display:"block",left:I({value:j}),minWidth:I({value:s.width}),padding:I({value:n.cardPadding}),right:I({value:N}),top:I({value:x}),width:I({value:s.width})};k.value=le}()}function O(o){let r=o??"";if(r.length<7)return V.value=r,void q(r);R.value==="hex"&&(o.length>7&&(r=o.substr(0,7)),r.toString().match(/#[a-zA-Z0-9]{7}/)&&(r=o.substr(0,7))),q(r)}function q(o,r=!0){r&&(y.value=o),V.value=o,c("update:modelValue",o),c("update",o)}function re(o){R.value=o,V.value=y.value,c("update:mode",o)}return ae.onClickOutside(C,o=>{var l;const r=e.unref(S);o.target!==r&&!((l=r==null?void 0:r.$el)!=null&&l.contains(o.target))&&f.value&&u("outside")},{ignore:[S]}),(o,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"fieldContainerRef",ref:C,class:"v-color-field"},[e.createVNode(ue.VTextField,e.mergeProps({ref:"textFieldRef"},o.$attrs,{class:e.unref(ee),clearable:e.unref(n).clearable,color:e.unref(n).color,density:e.unref(n).density,hint:e.unref(n).hint,messages:e.unref(n).messages,"model-value":e.unref(V),"persistent-hint":e.unref(n).persistentHint,"persistent-placeholder":e.unref(n).persistentPlaceholder,placeholder:e.unref(n).placeholder,readonly:e.unref(ne),theme:e.unref(F),variant:e.unref(n).variant,"onClick:clear":r[2]||(r[2]=l=>u("clear")),"onClick:control":r[3]||(r[3]=l=>H("textField")),onKeyup:r[4]||(r[4]=e.withKeys(l=>u("keyup"),["enter"])),"onUpdate:modelValue":O}),e.createSlots({_:2},[e.renderList(e.unref(t),(l,d)=>({name:d,fn:e.withCtx(B=>[e.unref(t).prepend||e.unref(t)["prepend-inner"]||e.unref(t)["append-inner"]||e.unref(t).append?e.createCommentVNode("",!0):e.renderSlot(o.$slots,d,e.normalizeProps(e.mergeProps({key:0},{...B})),void 0,!0)])})),e.unref(t).prepend?{name:"prepend",fn:e.withCtx(l=>[e.renderSlot(o.$slots,"prepend",e.normalizeProps(e.guardReactiveProps({...l,toggleColorPicker:u})),void 0,!0)]),key:"0"}:void 0,(e.unref(n).prependIcon||e.unref(n).pipSlot==="prepend"&&e.unref(n).pip)&&!e.unref(t).prepend?{name:"prepend",fn:e.withCtx(()=>[e.unref(n).pip?(e.openBlock(),e.createBlock($,e.mergeProps({key:0},e.unref(b),{onClick:u}),null,16)):e.unref(n).prependIcon?(e.openBlock(),e.createBlock(_,{key:1,color:e.unref(P),icon:e.unref(n).prependIcon,iconSize:e.unref(n).iconSize,onClick:u},null,8,["color","icon","iconSize"])):e.createCommentVNode("",!0)]),key:"1"}:void 0,e.unref(t)["prepend-inner"]?{name:"prepend-inner",fn:e.withCtx(l=>[e.renderSlot(o.$slots,"prepend-inner",e.normalizeProps(e.guardReactiveProps({...l,toggleColorPicker:u})),void 0,!0)]),key:"2"}:void 0,(e.unref(n).prependInnerIcon||e.unref(n).pipSlot==="prepend-inner"&&e.unref(n).pip)&&!e.unref(t)["prepend-inner"]?{name:"prepend-inner",fn:e.withCtx(()=>[e.unref(n).pip?(e.openBlock(),e.createBlock($,e.mergeProps({key:0},e.unref(b),{onClick:u}),null,16)):e.unref(n).prependInnerIcon?(e.openBlock(),e.createBlock(_,{key:1,color:e.unref(P),icon:e.unref(n).prependInnerIcon,iconSize:e.unref(n).iconSize,onClick:r[0]||(r[0]=l=>H("textFieldIcon"))},null,8,["color","icon","iconSize"])):e.createCommentVNode("",!0)]),key:"3"}:void 0,e.unref(t)["append-inner"]?{name:"append-inner",fn:e.withCtx(l=>[e.renderSlot(o.$slots,"append-inner",e.normalizeProps(e.guardReactiveProps({...l,toggleColorPicker:u})),void 0,!0)]),key:"4"}:void 0,(e.unref(n).appendInnerIcon||e.unref(n).pipSlot==="append-inner"&&e.unref(n).pip)&&!e.unref(t)["append-inner"]?{name:"append-inner",fn:e.withCtx(()=>[e.unref(n).pip?(e.openBlock(),e.createBlock($,e.mergeProps({key:0},e.unref(b),{onClick:u}),null,16)):e.unref(n).appendInnerIcon?(e.openBlock(),e.createBlock(_,{key:1,color:e.unref(P),icon:e.unref(n).appendInnerIcon,iconSize:e.unref(n).iconSize,onClick:r[1]||(r[1]=l=>H("textFieldIcon"))},null,8,["color","icon","iconSize"])):e.createCommentVNode("",!0)]),key:"5"}:void 0,e.unref(t).append?{name:"append",fn:e.withCtx(l=>[e.renderSlot(o.$slots,"append",e.normalizeProps(e.guardReactiveProps({...l,toggleColorPicker:u})),void 0,!0)]),key:"6"}:void 0,(e.unref(n).appendIcon||e.unref(n).pipSlot==="append"&&e.unref(n).pip)&&!e.unref(t).append?{name:"append",fn:e.withCtx(()=>[e.unref(n).pip?(e.openBlock(),e.createBlock($,e.mergeProps({key:0},e.unref(b),{onClick:u}),null,16)):e.unref(n).appendIcon?(e.openBlock(),e.createBlock(_,{key:1,color:e.unref(P),icon:e.unref(n).appendIcon,iconSize:e.unref(n).iconSize,onClick:u},null,8,["color","icon","iconSize"])):e.createCommentVNode("",!0)]),key:"7"}:void 0,e.unref(t).label||e.unref(n).label?{name:"label",fn:e.withCtx(()=>[e.unref(t).label?e.renderSlot(o.$slots,"label",{key:0},void 0,!0):e.unref(n).label?(e.openBlock(),e.createElementBlock("div",se,[e.createTextVNode(e.toDisplayString(e.unref(n).label)+" ",1),e.unref(n).required?(e.openBlock(),e.createElementBlock("span",me,"*")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),key:"8"}:void 0]),1040,["class","clearable","color","density","hint","messages","model-value","persistent-hint","persistent-placeholder","placeholder","readonly","theme","variant"])],512),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[he,e.createVNode(ce.VDefaultsProvider,{defaults:e.unref(v)},{default:e.withCtx(()=>{var l;return[e.createVNode(de.VCard,{ref_key:"cardRef",ref:S,class:e.normalizeClass(e.unref(oe)),style:e.normalizeStyle(e.unref(k)),theme:((l=e.unref(v).VCard)==null?void 0:l.theme)??e.unref(F),width:e.unref(s).width},{default:e.withCtx(()=>{var d,B;return[e.createVNode(pe.VColorPicker,{modelValue:e.unref(y),"onUpdate:modelValue":[r[5]||(r[5]=z=>e.isRef(y)?y.value=z:null),O],class:"v-color-selection",disabled:e.unref(n).readonly||((d=e.unref(v).VColorPicker)==null?void 0:d.disabled),mode:e.unref(R),theme:((B=e.unref(v).VColorPicker)==null?void 0:B.theme)??e.unref(F),"onUpdate:mode":re},null,8,["modelValue","disabled","mode","theme"])]}),_:1},8,["class","style","theme","width"])]}),_:1},8,["defaults"])]))],64))}}),[["__scopeId","data-v-461a5893"]]),T=Symbol();exports.VColorField=M,exports.createVColorField=function(a={}){return{install:p=>{p.provide(T,a),p.component("VColorField",M)}}},exports.default=M,exports.globalOptions=T;
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".v-color-field--text-field-readonly .v-field *,.v-color-field--text-field-readonly-input .v-field *{cursor:pointer!important}.v-color-field--card{display:none;position:absolute!important;z-index:999999}.v-color-field--card .v-color-picker{width:100%!important}.v-color-field--card .v-color-picker-canvas canvas{width:100%}.v-color-field--card-full-width .v-color-picker{max-width:100%!important}.v-color-field--text-field-readonly .v-field *[data-v-461a5893],.v-color-field--text-field-readonly-input .v-field *[data-v-461a5893]{cursor:pointer!important}.v-color-field--card[data-v-461a5893]{display:none;position:absolute!important;z-index:999999}.v-color-field--card .v-color-picker[data-v-461a5893]{width:100%!important}.v-color-field--card .v-color-picker-canvas canvas[data-v-461a5893]{width:100%}.v-color-field--card-full-width .v-color-picker[data-v-461a5893]{max-width:100%!important}.position-elm-helper[data-v-461a5893]{background-color:red;border-radius:50%;display:none;height:10px;left:0;position:absolute;top:0;width:10px;z-index:99999999999}")),document.head.appendChild(o)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();