vuetify-color-field.cjs.js

"use strict";/**
 * @name @wdns/vuetify-color-field
 * @version 1.1.7
 * @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"),w=c=>{const{unit:d="px",value:i}=c;if(i!=null&&i!=="")return+i?`${Number(i)}${d}`:String(i)},I="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=c=>{const{icon:d,iconOptions:i,name:l}=c;if(d)return d;let p=((i==null?void 0:i.defaultSet)??"").toLowerCase();p=p==="fa"||p==="fasvg"?"fa":p;const m=fe[p];if(!m)throw new Error(`[VColorField]: No default ${i==null?void 0:i.defaultSet} icon set found.`);const h=m[l];if(!h)throw new Error(`[VColorField]: No ${l} icon found.`);return h},_=e.defineComponent({__name:"ColorPickerIcon",props:{color:{},icon:{type:[String,null,Boolean],default:""},iconSize:{}},emits:["click"],setup(c,{emit:d}){const i=d,l=c,p=e.inject(Symbol.for("vuetify:icons")),m=e.computed(()=>Q({icon:l.icon!=="default"?l.icon:"",iconOptions:p,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(c,{emit:d}){const i=d,l=c,{modelValue:p}=e.toRefs(l),m=e.computed(()=>({[`${I}--pip`]:!0})),h=e.computed(()=>(k=>{const{pipBorder:u,pipBorderRadius:C}=k,y={backgroundColor:u&&u!=="none"?"rgb(var(--v-theme-on-surface))":"transparent",overflow:"hidden"};return u&&u!=="none"&&(y.border=u,y.borderRadius=C),y})({pipBorder:l.pipBorder,pipBorderRadius:l.pipBorderRadius})),n=e.inject(Symbol.for("vuetify:icons")),v=e.computed(()=>Q({icon:l.pipIcon!=="pip"?l.pipIcon:"",iconOptions:n,name:"pip"}));function S(){i("click")}return(k,u)=>(e.openBlock(),e.createBlock(J.VIcon,{class:e.normalizeClass(e.unref(m)),color:e.unref(p)||"--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"},M=((c,d)=>{const i=c.__vccOpts||c;for(const[l,p]of d)i[l]=p;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(c,{emit:d}){var A;const i=e.useAttrs(),l=e.useSlots(),p=d,m=c,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({}),u=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),H=e.ref(n.theme??void 0);let s=e.reactive({bottom:0,height:150,left:0,right:0,top:0,width:300});const P=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,r=>{O(r)});const ee=e.computed(()=>(r=>{const{name:o="",readonly:t,readonlyInput:a}=r;return{[`${I}--text-field-${o}`]:o!=="",[`${I}--text-field-readonly`]:t??!1,[`${I}--text-field-readonly-input`]:!(!a||t),[`${I}--text-field`]:!0}})({name:n.name,readonly:n.readonly,readonlyInput:n.readonlyInput})),ne=e.computed(()=>n.readonly||n.readonlyInput),z=e.computed(()=>{if(n.iconHoverColor!==!1)return typeof n.iconHoverColor=="string"?n.iconHoverColor:n.color??void 0}),oe=e.computed(()=>(r=>{const{fullWidth:o}=r;return{[`${I}--card`]:!0,[`${I}--card-full-width`]:o}})({fullWidth:n.cardFieldWidth}));function b(r){(r!=="textField"||n.readonlyInput||n.readonly)&&(r==="textFieldIcon"&&(n.readonlyInput||n.readonly)||f())}function f(r){var D;const o={left:0,right:0,top:0,width:0},t=C.value;if(!u.value&&(r==="keyup"||r==="clear"))return void(r==="clear"&&q(""));if(u.value=!u.value,!u.value)return void(k.value.display="none");const a=(t==null?void 0:t.getBoundingClientRect())??o;let B=(t==null?void 0:t.offsetHeight)??0,x=300,U=(a==null?void 0:a.left)??0,Y=(a==null?void 0:a.right)??0;const te=(a==null?void 0:a.top)??0,g=(D=C==null?void 0:C.value)==null?void 0:D.querySelector(".v-field__input"),W=(g==null?void 0:g.getBoundingClientRect())??o;B=g==null?void 0:g.offsetHeight,x=(g==null?void 0:g.offsetWidth)??0,U=W.left,Y=W.right-W.width,s={bottom:"initial",height:B,left:U,right:Y,top:window.scrollY+te,width:n.cardFieldWidth?x:"auto"},function(){var X,Z,G;let N=Number(s.top)+Number(s.height),K="initial",E=Number(n.cardOffsetY)??0;const L=Number(n.cardOffsetX)??0;(n.hint||m.messages)&&(E+=((X=v.value.VCard)==null?void 0:X.verticalOffset)??0),N+=E,(Z=n.open)!=null&&Z.includes("top")&&(K=window.innerHeight-N+Number(s.height)+2*E,N="initial");let j=Number(s.left)+L,F=s.right??0;n.cardFieldWidth?(j=s.left,F="initial"):(F="initial",(G=n.open)!=null&&G.includes("right")&&(j="initial",F=Number(s.right)+L));const le={bottom:w({value:K}),display:"block",left:w({value:j}),minWidth:w({value:s.width}),padding:w({value:n.cardPadding}),right:w({value:F}),top:w({value:N}),width:w({value:s.width})};k.value=le}()}function O(r){let o=r??"";if(o.length<7)return V.value=o,void q(o);R.value==="hex"&&(r.length>7&&(o=r.substr(0,7)),o.toString().match(/#[a-zA-Z0-9]{7}/)&&(o=r.substr(0,7))),q(o)}function q(r,o=!0){o&&(y.value=r),V.value=r,p("update:modelValue",r),p("update",r)}function re(r){R.value=r,V.value=y.value,p("update:mode",r)}return ae.onClickOutside(C,r=>{var t;const o=e.unref(S);r.target!==o&&!((t=o==null?void 0:o.$el)!=null&&t.contains(r.target))&&u.value&&f("outside")},{ignore:[S]}),(r,o)=>(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"},r.$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(H),variant:e.unref(n).variant,"onClick:clear":o[4]||(o[4]=t=>f("clear")),"onClick:control":o[5]||(o[5]=t=>b("textField")),onKeyup:o[6]||(o[6]=e.withKeys(t=>f("keyup"),["enter"])),"onUpdate:modelValue":O}),e.createSlots({_:2},[e.renderList(e.unref(l),(t,a)=>({name:a,fn:e.withCtx(B=>[e.unref(l).prepend||e.unref(l)["prepend-inner"]||e.unref(l)["append-inner"]||e.unref(l).append?e.createCommentVNode("",!0):e.renderSlot(r.$slots,a,e.normalizeProps(e.mergeProps({key:0},{...B})),void 0,!0)])})),e.unref(l).prepend?{name:"prepend",fn:e.withCtx(t=>[e.renderSlot(r.$slots,"prepend",e.normalizeProps(e.guardReactiveProps({...t,toggleColorPicker:f})),void 0,!0)]),key:"0"}:void 0,(e.unref(n).prependIcon||e.unref(n).pipSlot==="prepend"&&e.unref(n).pip)&&!e.unref(l).prepend?{name:"prepend",fn:e.withCtx(()=>[e.unref(n).pip?(e.openBlock(),e.createBlock($,e.mergeProps({key:0},e.unref(P),{onClick:f}),null,16)):e.unref(n).prependIcon?(e.openBlock(),e.createBlock(_,{key:1,color:e.unref(z),icon:e.unref(n).prependIcon,iconSize:e.unref(n).iconSize,onClick:f},null,8,["color","icon","iconSize"])):e.createCommentVNode("",!0)]),key:"1"}:void 0,e.unref(l)["prepend-inner"]?{name:"prepend-inner",fn:e.withCtx(t=>[e.renderSlot(r.$slots,"prepend-inner",e.normalizeProps(e.guardReactiveProps({...t,toggleColorPicker:f})),void 0,!0)]),key:"2"}:void 0,(e.unref(n).prependInnerIcon||e.unref(n).pipSlot==="prepend-inner"&&e.unref(n).pip)&&!e.unref(l)["prepend-inner"]?{name:"prepend-inner",fn:e.withCtx(()=>[e.unref(n).pip?(e.openBlock(),e.createBlock($,e.mergeProps({key:0},e.unref(P),{onClick:o[0]||(o[0]=t=>b("textFieldIcon"))}),null,16)):e.unref(n).prependInnerIcon?(e.openBlock(),e.createBlock(_,{key:1,color:e.unref(z),icon:e.unref(n).prependInnerIcon,iconSize:e.unref(n).iconSize,onClick:o[1]||(o[1]=t=>b("textFieldIcon"))},null,8,["color","icon","iconSize"])):e.createCommentVNode("",!0)]),key:"3"}:void 0,e.unref(l)["append-inner"]?{name:"append-inner",fn:e.withCtx(t=>[e.renderSlot(r.$slots,"append-inner",e.normalizeProps(e.guardReactiveProps({...t,toggleColorPicker:f})),void 0,!0)]),key:"4"}:void 0,(e.unref(n).appendInnerIcon||e.unref(n).pipSlot==="append-inner"&&e.unref(n).pip)&&!e.unref(l)["append-inner"]?{name:"append-inner",fn:e.withCtx(()=>[e.unref(n).pip?(e.openBlock(),e.createBlock($,e.mergeProps({key:0},e.unref(P),{onClick:o[2]||(o[2]=t=>b("textFieldIcon"))}),null,16)):e.unref(n).appendInnerIcon?(e.openBlock(),e.createBlock(_,{key:1,color:e.unref(z),icon:e.unref(n).appendInnerIcon,iconSize:e.unref(n).iconSize,onClick:o[3]||(o[3]=t=>b("textFieldIcon"))},null,8,["color","icon","iconSize"])):e.createCommentVNode("",!0)]),key:"5"}:void 0,e.unref(l).append?{name:"append",fn:e.withCtx(t=>[e.renderSlot(r.$slots,"append",e.normalizeProps(e.guardReactiveProps({...t,toggleColorPicker:f})),void 0,!0)]),key:"6"}:void 0,(e.unref(n).appendIcon||e.unref(n).pipSlot==="append"&&e.unref(n).pip)&&!e.unref(l).append?{name:"append",fn:e.withCtx(()=>[e.unref(n).pip?(e.openBlock(),e.createBlock($,e.mergeProps({key:0},e.unref(P),{onClick:f}),null,16)):e.unref(n).appendIcon?(e.openBlock(),e.createBlock(_,{key:1,color:e.unref(z),icon:e.unref(n).appendIcon,iconSize:e.unref(n).iconSize,onClick:f},null,8,["color","icon","iconSize"])):e.createCommentVNode("",!0)]),key:"7"}:void 0,e.unref(l).label||e.unref(n).label?{name:"label",fn:e.withCtx(()=>[e.unref(l).label?e.renderSlot(r.$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"},[e.createVNode(ce.VDefaultsProvider,{defaults:e.unref(v)},{default:e.withCtx(()=>{var t;return[e.createVNode(de.VCard,{ref_key:"cardRef",ref:S,class:e.normalizeClass(e.unref(oe)),style:e.normalizeStyle(e.unref(k)),theme:((t=e.unref(v).VCard)==null?void 0:t.theme)??e.unref(H),width:e.unref(s).width},{default:e.withCtx(()=>{var a,B;return[e.createVNode(pe.VColorPicker,{modelValue:e.unref(y),"onUpdate:modelValue":[o[7]||(o[7]=x=>e.isRef(y)?y.value=x:null),O],class:"v-color-selection",disabled:e.unref(n).readonly||((a=e.unref(v).VColorPicker)==null?void 0:a.disabled),mode:e.unref(R),theme:((B=e.unref(v).VColorPicker)==null?void 0:B.theme)??e.unref(H),"onUpdate:mode":re},null,8,["modelValue","disabled","mode","theme"])]}),_:1},8,["class","style","theme","width"])]}),_:1},8,["defaults"])]))],64))}}),[["__scopeId","data-v-bd364cff"]]),T=Symbol();exports.VColorField=M,exports.createVColorField=function(c={}){return{install:d=>{d.provide(T,c),d.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--pip{opacity:1}.v-color-field--text-field-readonly .v-field *[data-v-bd364cff],.v-color-field--text-field-readonly-input .v-field *[data-v-bd364cff]{cursor:pointer!important}.v-color-field--card[data-v-bd364cff]{display:none;position:absolute!important;z-index:999999}.v-color-field--card .v-color-picker[data-v-bd364cff]{width:100%!important}.v-color-field--card .v-color-picker-canvas canvas[data-v-bd364cff]{width:100%}.v-color-field--card-full-width .v-color-picker[data-v-bd364cff]{max-width:100%!important}.v-color-field--pip[data-v-bd364cff]{opacity:1}")),document.head.appendChild(o)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();