diff --git a/CHANGELOG.md b/CHANGELOG.md index e9fa0ec..1931bd3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,11 @@ # Change Log All notable changes to the "vuetify-color-field" plugin will be documented in this file. +## v1.1.8 +2024-03-13 +[main] (@webdevnerdstuff) +* Change component to use `defineAsyncComponent` + ## v1.1.7 2024-02-27 [main] (@webdevnerdstuff) diff --git a/dist/vuetify-color-field.cjs.js b/dist/vuetify-color-field.cjs.js index 86b52d9..b143289 100644 --- a/dist/vuetify-color-field.cjs.js +++ b/dist/vuetify-color-field.cjs.js @@ -1,11 +1,11 @@ "use strict";/** * @name @wdns/vuetify-color-field - * @version 1.1.7 + * @version 1.1.8 * @description Vuetify Color Field is a Vuetify VTextField Color Picker Component * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! (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; + */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)},b="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},F=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:y})=>[e.createVNode(J.VIcon,e.mergeProps(y,{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(()=>({[`${b}--pip`]:!0})),h=e.computed(()=>(y=>{const{pipBorder:u,pipBorderRadius:C}=y,k={backgroundColor:u&&u!=="none"?"rgb(var(--v-theme-on-surface))":"transparent",overflow:"hidden"};return u&&u!=="none"&&(k.border=u,k.borderRadius=C),k})({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(y,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:y.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),y=e.ref({}),u=e.ref(!1),C=e.ref(null),k=e.ref(i.modelValue),I=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:I,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{[`${b}--text-field-${o}`]:o!=="",[`${b}--text-field-readonly`]:t??!1,[`${b}--text-field-readonly-input`]:!(!a||t),[`${b}--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{[`${b}--card`]:!0,[`${b}--card-full-width`]:o}})({fullWidth:n.cardFieldWidth}));function V(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(y.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",j=Number(n.cardOffsetY)??0;const L=Number(n.cardOffsetX)??0;(n.hint||m.messages)&&(j+=((X=v.value.VCard)==null?void 0:X.verticalOffset)??0),N+=j,(Z=n.open)!=null&&Z.includes("top")&&(K=window.innerHeight-N+Number(s.height)+2*j,N="initial");let E=Number(s.left)+L,_=s.right??0;n.cardFieldWidth?(E=s.left,_="initial"):(_="initial",(G=n.open)!=null&&G.includes("right")&&(E="initial",_=Number(s.right)+L));const le={bottom:w({value:K}),display:"block",left:w({value:E}),minWidth:w({value:s.width}),padding:w({value:n.cardPadding}),right:w({value:_}),top:w({value:N}),width:w({value:s.width})};y.value=le}()}function O(r){let o=r??"";if(o.length<7)return I.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&&(k.value=r),I.value=r,p("update:modelValue",r),p("update",r)}function re(r){R.value=r,I.value=k.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(I),"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=>V("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(F,{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=>V("textFieldIcon"))}),null,16)):e.unref(n).prependInnerIcon?(e.openBlock(),e.createBlock(F,{key:1,color:e.unref(z),icon:e.unref(n).prependInnerIcon,iconSize:e.unref(n).iconSize,onClick:o[1]||(o[1]=t=>V("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=>V("textFieldIcon"))}),null,16)):e.unref(n).appendInnerIcon?(e.openBlock(),e.createBlock(F,{key:1,color:e.unref(z),icon:e.unref(n).appendInnerIcon,iconSize:e.unref(n).iconSize,onClick:o[3]||(o[3]=t=>V("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(F,{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(y)),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(k),"onUpdate:modelValue":[o[7]||(o[7]=x=>e.isRef(k)?k.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"]]),he=Object.freeze(Object.defineProperty({__proto__:null,default:M},Symbol.toStringTag,{value:"Module"})),T=Symbol();exports.VColorField=M,exports.createVColorField=function(c={}){return{install:d=>{d.provide(T,c),d.component("VColorField",e.defineAsyncComponent(()=>Promise.resolve().then(()=>he)))}}},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)}})(); diff --git a/dist/vuetify-color-field.es.js b/dist/vuetify-color-field.es.js index 295de54..e83dccb 100644 --- a/dist/vuetify-color-field.es.js +++ b/dist/vuetify-color-field.es.js @@ -1,14 +1,14 @@ -import { defineComponent as Q, inject as ee, computed as V, openBlock as c, createBlock as v, withCtx as u, createVNode as O, mergeProps as F, unref as o, toRefs as Ie, normalizeClass as ce, normalizeStyle as ue, useAttrs as be, useSlots as we, reactive as se, watchEffect as Ve, ref as g, watch as ze, createElementBlock as J, Fragment as Be, createElementVNode as Pe, withKeys as xe, createSlots as Fe, renderList as $e, renderSlot as H, normalizeProps as N, createCommentVNode as P, guardReactiveProps as q, createTextVNode as He, toDisplayString as _e, Teleport as Re, isRef as Ne } from "vue"; -import { VHover as Oe } from "vuetify/lib/components/VHover/index.mjs"; +import { defineComponent as Q, inject as ee, computed as V, openBlock as c, createBlock as v, withCtx as u, createVNode as N, mergeProps as _, unref as o, toRefs as Ie, normalizeClass as ce, normalizeStyle as ue, useAttrs as be, useSlots as we, reactive as se, watchEffect as Ve, ref as g, watch as ze, createElementBlock as J, Fragment as Be, createElementVNode as Pe, withKeys as xe, createSlots as _e, renderList as Fe, renderSlot as $, normalizeProps as R, createCommentVNode as P, guardReactiveProps as T, createTextVNode as $e, toDisplayString as He, Teleport as Oe, isRef as Re, defineAsyncComponent as Ne } from "vue"; +import { VHover as We } from "vuetify/lib/components/VHover/index.mjs"; import { VIcon as fe } from "vuetify/lib/components/VIcon/index.mjs"; -import { onClickOutside as We } from "@vueuse/core"; +import { onClickOutside as Ae } from "@vueuse/core"; import { VCard as Ee } from "vuetify/lib/components/VCard/index.mjs"; -import { VColorPicker as Te } from "vuetify/lib/components/VColorPicker/index.mjs"; -import { VDefaultsProvider as Ue } from "vuetify/lib/components/VDefaultsProvider/index.mjs"; -import { VTextField as Ye } from "vuetify/lib/components/VTextField/index.mjs"; +import { VColorPicker as je } from "vuetify/lib/components/VColorPicker/index.mjs"; +import { VDefaultsProvider as Me } from "vuetify/lib/components/VDefaultsProvider/index.mjs"; +import { VTextField as Te } from "vuetify/lib/components/VTextField/index.mjs"; /** * @name @wdns/vuetify-color-field - * @version 1.1.7 + * @version 1.1.8 * @description Vuetify Color Field is a Vuetify VTextField Color Picker Component * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! (https://webdevnerdstuff.com) * @copyright Copyright 2024, WebDevNerdStuff @@ -20,27 +20,27 @@ const x = (s) => { const { unit: d = "px", value: a } = s; if (a != null && a !== "") return +a ? `${Number(a)}${d}` : String(a); -}, $ = "v-color-field", qe = { fa: { default: "fa-solid fa-palette", pip: "fa-solid fa-circle" }, mdi: { default: "mdi:mdi-palette", pip: "mdi:mdi-circle" } }, me = (s) => { +}, F = "v-color-field", Ye = { fa: { default: "fa-solid fa-palette", pip: "fa-solid fa-circle" }, mdi: { default: "mdi:mdi-palette", pip: "mdi:mdi-circle" } }, me = (s) => { const { icon: d, iconOptions: a, name: l } = s; if (d) return d; let p = ((a == null ? void 0 : a.defaultSet) ?? "").toLowerCase(); p = p === "fa" || p === "fasvg" ? "fa" : p; - const y = qe[p]; + const y = Ye[p]; if (!y) throw new Error(`[VColorField]: No default ${a == null ? void 0 : a.defaultSet} icon set found.`); const k = y[l]; if (!k) throw new Error(`[VColorField]: No ${l} icon found.`); return k; -}, A = Q({ __name: "ColorPickerIcon", props: { color: {}, icon: { type: [String, null, Boolean], default: "" }, iconSize: {} }, emits: ["click"], setup(s, { emit: d }) { +}, Y = Q({ __name: "ColorPickerIcon", props: { color: {}, icon: { type: [String, null, Boolean], default: "" }, iconSize: {} }, emits: ["click"], setup(s, { emit: d }) { const a = d, l = s, p = ee(Symbol.for("vuetify:icons")), y = V(() => me({ icon: l.icon !== "default" ? l.icon : "", iconOptions: p, name: "default" })); function k() { a("click"); } - return (e, S) => (c(), v(Oe, null, { default: u(({ isHovering: z, props: C }) => [O(fe, F(C, { color: z ? e.color : void 0, icon: o(y), size: e.iconSize, onClick: k }), null, 16, ["color", "icon", "size"])]), _: 1 })); -} }), K = Q({ __name: "PipComponent", props: { modelValue: {}, pip: { type: Boolean }, pipBorder: {}, pipIcon: { type: [String, null, Boolean] }, pipBorderRadius: {}, pipSize: {}, pipSlot: {} }, emits: ["click"], setup(s, { emit: d }) { - const a = d, l = s, { modelValue: p } = Ie(l), y = V(() => ({ [`${$}--pip`]: !0 })), k = V(() => ((C) => { + return (e, S) => (c(), v(We, null, { default: u(({ isHovering: z, props: C }) => [N(fe, _(C, { color: z ? e.color : void 0, icon: o(y), size: e.iconSize, onClick: k }), null, 16, ["color", "icon", "size"])]), _: 1 })); +} }), q = Q({ __name: "PipComponent", props: { modelValue: {}, pip: { type: Boolean }, pipBorder: {}, pipIcon: { type: [String, null, Boolean] }, pipBorderRadius: {}, pipSize: {}, pipSlot: {} }, emits: ["click"], setup(s, { emit: d }) { + const a = d, l = s, { modelValue: p } = Ie(l), y = V(() => ({ [`${F}--pip`]: !0 })), k = V(() => ((C) => { const { pipBorder: f, pipBorderRadius: w } = C, I = { backgroundColor: f && f !== "none" ? "rgb(var(--v-theme-on-surface))" : "transparent", overflow: "hidden" }; return f && f !== "none" && (I.border = f, I.borderRadius = w), I; })({ pipBorder: l.pipBorder, pipBorderRadius: l.pipBorderRadius })), e = ee(Symbol.for("vuetify:icons")), S = V(() => me({ icon: l.pipIcon !== "pip" ? l.pipIcon : "", iconOptions: e, name: "pip" })); @@ -48,7 +48,7 @@ const x = (s) => { a("click"); } return (C, f) => (c(), v(fe, { class: ce(o(y)), color: o(p) || "--v-theme-on-surface", icon: o(S), size: C.pipSize, style: ue(o(k)), tag: "div", onClick: z }, null, 8, ["class", "color", "icon", "size", "style"])); -} }), Ae = { key: 1 }, Ke = { key: 0, class: "text-error ms-1" }, Me = ((s, d) => { +} }), qe = { key: 1 }, Ke = { key: 0, class: "text-error ms-1" }, Le = ((s, d) => { const a = s.__vccOpts || s; for (const [l, p] of d) a[l] = p; @@ -59,79 +59,79 @@ const x = (s) => { Ve(() => { Object.assign(e, { ...y, ...k }); }); - const S = g({ VCard: { elevation: 5, hover: !1, loading: !1, verticalOffset: 28, ...e.cardProps }, VColorPicker: { canvasHeight: e.canvasHeight, dotSize: e.dotSize, elevation: 0, hideCanvas: e.hideCanvas, hideInputs: e.hideInputs, hideSliders: e.hideSliders, mode: e.mode, modes: e.modes, showSwatches: e.showSwatches, swatches: e.swatches, swatchesMaxHeight: e.swatchesMaxHeight, ...e.colorPickerProps } }), z = g(null), C = g({}), f = g(!1), w = g(null), I = g(a.modelValue), _ = g(a.modelValue), M = g((oe = S.value.VColorPicker) == null ? void 0 : oe.mode), j = g(e.theme ?? void 0); + const S = g({ VCard: { elevation: 5, hover: !1, loading: !1, verticalOffset: 28, ...e.cardProps }, VColorPicker: { canvasHeight: e.canvasHeight, dotSize: e.dotSize, elevation: 0, hideCanvas: e.hideCanvas, hideInputs: e.hideInputs, hideSliders: e.hideSliders, mode: e.mode, modes: e.modes, showSwatches: e.showSwatches, swatches: e.swatches, swatchesMaxHeight: e.swatchesMaxHeight, ...e.colorPickerProps } }), z = g(null), C = g({}), f = g(!1), w = g(null), I = g(a.modelValue), H = g(a.modelValue), K = g((oe = S.value.VColorPicker) == null ? void 0 : oe.mode), L = g(e.theme ?? void 0); let h = se({ bottom: 0, height: 150, left: 0, right: 0, top: 0, width: 300 }); - const W = g({ density: e.density, modelValue: _, pip: e.pip, pipBorder: e.pipBorder, pipBorderRadius: e.pipBorderRadius, pipIcon: e.pipIcon, pipSize: e.iconSize }); + const W = g({ density: e.density, modelValue: H, pip: e.pip, pipBorder: e.pipBorder, pipBorderRadius: e.pipBorderRadius, pipIcon: e.pipIcon, pipSize: e.iconSize }); ze(() => a.modelValue, (t) => { - D(t); + U(t); }); const ve = V(() => ((t) => { const { name: n = "", readonly: i, readonlyInput: r } = t; - return { [`${$}--text-field-${n}`]: n !== "", [`${$}--text-field-readonly`]: i ?? !1, [`${$}--text-field-readonly-input`]: !(!r || i), [`${$}--text-field`]: !0 }; - })({ name: e.name, readonly: e.readonly, readonlyInput: e.readonlyInput })), ye = V(() => e.readonly || e.readonlyInput), E = V(() => { + return { [`${F}--text-field-${n}`]: n !== "", [`${F}--text-field-readonly`]: i ?? !1, [`${F}--text-field-readonly-input`]: !(!r || i), [`${F}--text-field`]: !0 }; + })({ name: e.name, readonly: e.readonly, readonlyInput: e.readonlyInput })), ye = V(() => e.readonly || e.readonlyInput), A = V(() => { if (e.iconHoverColor !== !1) return typeof e.iconHoverColor == "string" ? e.iconHoverColor : e.color ?? void 0; }), ge = V(() => ((t) => { const { fullWidth: n } = t; - return { [`${$}--card`]: !0, [`${$}--card-full-width`]: n }; + return { [`${F}--card`]: !0, [`${F}--card-full-width`]: n }; })({ fullWidth: e.cardFieldWidth })); - function R(t) { + function O(t) { (t !== "textField" || e.readonlyInput || e.readonly) && (t === "textFieldIcon" && (e.readonlyInput || e.readonly) || m()); } function m(t) { var ie; const n = { left: 0, right: 0, top: 0, width: 0 }, i = w.value; if (!f.value && (t === "keyup" || t === "clear")) - return void (t === "clear" && L("")); + return void (t === "clear" && D("")); if (f.value = !f.value, !f.value) return void (C.value.display = "none"); const r = (i == null ? void 0 : i.getBoundingClientRect()) ?? n; - let B = (i == null ? void 0 : i.offsetHeight) ?? 0, T = 300, ne = (r == null ? void 0 : r.left) ?? 0, te = (r == null ? void 0 : r.right) ?? 0; + let B = (i == null ? void 0 : i.offsetHeight) ?? 0, E = 300, ne = (r == null ? void 0 : r.left) ?? 0, te = (r == null ? void 0 : r.right) ?? 0; const Se = (r == null ? void 0 : r.top) ?? 0, b = (ie = w == null ? void 0 : w.value) == null ? void 0 : ie.querySelector(".v-field__input"), X = (b == null ? void 0 : b.getBoundingClientRect()) ?? n; - B = b == null ? void 0 : b.offsetHeight, T = (b == null ? void 0 : b.offsetWidth) ?? 0, ne = X.left, te = X.right - X.width, h = { bottom: "initial", height: B, left: ne, right: te, top: window.scrollY + Se, width: e.cardFieldWidth ? T : "auto" }, function() { + B = b == null ? void 0 : b.offsetHeight, E = (b == null ? void 0 : b.offsetWidth) ?? 0, ne = X.left, te = X.right - X.width, h = { bottom: "initial", height: B, left: ne, right: te, top: window.scrollY + Se, width: e.cardFieldWidth ? E : "auto" }, function() { var re, de, pe; - let U = Number(h.top) + Number(h.height), le = "initial", Z = Number(e.cardOffsetY) ?? 0; + let j = Number(h.top) + Number(h.height), le = "initial", G = Number(e.cardOffsetY) ?? 0; const ae = Number(e.cardOffsetX) ?? 0; - (e.hint || y.messages) && (Z += ((re = S.value.VCard) == null ? void 0 : re.verticalOffset) ?? 0), U += Z, (de = e.open) != null && de.includes("top") && (le = window.innerHeight - U + Number(h.height) + 2 * Z, U = "initial"); - let G = Number(h.left) + ae, Y = h.right ?? 0; - e.cardFieldWidth ? (G = h.left, Y = "initial") : (Y = "initial", (pe = e.open) != null && pe.includes("right") && (G = "initial", Y = Number(h.right) + ae)); - const Ce = { bottom: x({ value: le }), display: "block", left: x({ value: G }), minWidth: x({ value: h.width }), padding: x({ value: e.cardPadding }), right: x({ value: Y }), top: x({ value: U }), width: x({ value: h.width }) }; + (e.hint || y.messages) && (G += ((re = S.value.VCard) == null ? void 0 : re.verticalOffset) ?? 0), j += G, (de = e.open) != null && de.includes("top") && (le = window.innerHeight - j + Number(h.height) + 2 * G, j = "initial"); + let Z = Number(h.left) + ae, M = h.right ?? 0; + e.cardFieldWidth ? (Z = h.left, M = "initial") : (M = "initial", (pe = e.open) != null && pe.includes("right") && (Z = "initial", M = Number(h.right) + ae)); + const Ce = { bottom: x({ value: le }), display: "block", left: x({ value: Z }), minWidth: x({ value: h.width }), padding: x({ value: e.cardPadding }), right: x({ value: M }), top: x({ value: j }), width: x({ value: h.width }) }; C.value = Ce; }(); } - function D(t) { + function U(t) { let n = t ?? ""; if (n.length < 7) - return _.value = n, void L(n); - M.value === "hex" && (t.length > 7 && (n = t.substr(0, 7)), n.toString().match(/#[a-zA-Z0-9]{7}/) && (n = t.substr(0, 7))), L(n); + return H.value = n, void D(n); + K.value === "hex" && (t.length > 7 && (n = t.substr(0, 7)), n.toString().match(/#[a-zA-Z0-9]{7}/) && (n = t.substr(0, 7))), D(n); } - function L(t, n = !0) { - n && (I.value = t), _.value = t, p("update:modelValue", t), p("update", t); + function D(t, n = !0) { + n && (I.value = t), H.value = t, p("update:modelValue", t), p("update", t); } function ke(t) { - M.value = t, _.value = I.value, p("update:mode", t); + K.value = t, H.value = I.value, p("update:mode", t); } - return We(w, (t) => { + return Ae(w, (t) => { var i; const n = o(z); t.target !== n && !((i = n == null ? void 0 : n.$el) != null && i.contains(t.target)) && f.value && m("outside"); - }, { ignore: [z] }), (t, n) => (c(), J(Be, null, [Pe("div", { ref_key: "fieldContainerRef", ref: w, class: "v-color-field" }, [O(Ye, F({ ref: "textFieldRef" }, t.$attrs, { class: o(ve), clearable: o(e).clearable, color: o(e).color, density: o(e).density, hint: o(e).hint, messages: o(e).messages, "model-value": o(_), "persistent-hint": o(e).persistentHint, "persistent-placeholder": o(e).persistentPlaceholder, placeholder: o(e).placeholder, readonly: o(ye), theme: o(j), variant: o(e).variant, "onClick:clear": n[4] || (n[4] = (i) => m("clear")), "onClick:control": n[5] || (n[5] = (i) => R("textField")), onKeyup: n[6] || (n[6] = xe((i) => m("keyup"), ["enter"])), "onUpdate:modelValue": D }), Fe({ _: 2 }, [$e(o(l), (i, r) => ({ name: r, fn: u((B) => [o(l).prepend || o(l)["prepend-inner"] || o(l)["append-inner"] || o(l).append ? P("", !0) : H(t.$slots, r, N(F({ key: 0 }, { ...B })), void 0, !0)]) })), o(l).prepend ? { name: "prepend", fn: u((i) => [H(t.$slots, "prepend", N(q({ ...i, toggleColorPicker: m })), void 0, !0)]), key: "0" } : void 0, (o(e).prependIcon || o(e).pipSlot === "prepend" && o(e).pip) && !o(l).prepend ? { name: "prepend", fn: u(() => [o(e).pip ? (c(), v(K, F({ key: 0 }, o(W), { onClick: m }), null, 16)) : o(e).prependIcon ? (c(), v(A, { key: 1, color: o(E), icon: o(e).prependIcon, iconSize: o(e).iconSize, onClick: m }, null, 8, ["color", "icon", "iconSize"])) : P("", !0)]), key: "1" } : void 0, o(l)["prepend-inner"] ? { name: "prepend-inner", fn: u((i) => [H(t.$slots, "prepend-inner", N(q({ ...i, toggleColorPicker: m })), void 0, !0)]), key: "2" } : void 0, (o(e).prependInnerIcon || o(e).pipSlot === "prepend-inner" && o(e).pip) && !o(l)["prepend-inner"] ? { name: "prepend-inner", fn: u(() => [o(e).pip ? (c(), v(K, F({ key: 0 }, o(W), { onClick: n[0] || (n[0] = (i) => R("textFieldIcon")) }), null, 16)) : o(e).prependInnerIcon ? (c(), v(A, { key: 1, color: o(E), icon: o(e).prependInnerIcon, iconSize: o(e).iconSize, onClick: n[1] || (n[1] = (i) => R("textFieldIcon")) }, null, 8, ["color", "icon", "iconSize"])) : P("", !0)]), key: "3" } : void 0, o(l)["append-inner"] ? { name: "append-inner", fn: u((i) => [H(t.$slots, "append-inner", N(q({ ...i, toggleColorPicker: m })), void 0, !0)]), key: "4" } : void 0, (o(e).appendInnerIcon || o(e).pipSlot === "append-inner" && o(e).pip) && !o(l)["append-inner"] ? { name: "append-inner", fn: u(() => [o(e).pip ? (c(), v(K, F({ key: 0 }, o(W), { onClick: n[2] || (n[2] = (i) => R("textFieldIcon")) }), null, 16)) : o(e).appendInnerIcon ? (c(), v(A, { key: 1, color: o(E), icon: o(e).appendInnerIcon, iconSize: o(e).iconSize, onClick: n[3] || (n[3] = (i) => R("textFieldIcon")) }, null, 8, ["color", "icon", "iconSize"])) : P("", !0)]), key: "5" } : void 0, o(l).append ? { name: "append", fn: u((i) => [H(t.$slots, "append", N(q({ ...i, toggleColorPicker: m })), void 0, !0)]), key: "6" } : void 0, (o(e).appendIcon || o(e).pipSlot === "append" && o(e).pip) && !o(l).append ? { name: "append", fn: u(() => [o(e).pip ? (c(), v(K, F({ key: 0 }, o(W), { onClick: m }), null, 16)) : o(e).appendIcon ? (c(), v(A, { key: 1, color: o(E), icon: o(e).appendIcon, iconSize: o(e).iconSize, onClick: m }, null, 8, ["color", "icon", "iconSize"])) : P("", !0)]), key: "7" } : void 0, o(l).label || o(e).label ? { name: "label", fn: u(() => [o(l).label ? H(t.$slots, "label", { key: 0 }, void 0, !0) : o(e).label ? (c(), J("div", Ae, [He(_e(o(e).label) + " ", 1), o(e).required ? (c(), J("span", Ke, "*")) : P("", !0)])) : P("", !0)]), key: "8" } : void 0]), 1040, ["class", "clearable", "color", "density", "hint", "messages", "model-value", "persistent-hint", "persistent-placeholder", "placeholder", "readonly", "theme", "variant"])], 512), (c(), v(Re, { to: "body" }, [O(Ue, { defaults: o(S) }, { default: u(() => { + }, { ignore: [z] }), (t, n) => (c(), J(Be, null, [Pe("div", { ref_key: "fieldContainerRef", ref: w, class: "v-color-field" }, [N(Te, _({ ref: "textFieldRef" }, t.$attrs, { class: o(ve), clearable: o(e).clearable, color: o(e).color, density: o(e).density, hint: o(e).hint, messages: o(e).messages, "model-value": o(H), "persistent-hint": o(e).persistentHint, "persistent-placeholder": o(e).persistentPlaceholder, placeholder: o(e).placeholder, readonly: o(ye), theme: o(L), variant: o(e).variant, "onClick:clear": n[4] || (n[4] = (i) => m("clear")), "onClick:control": n[5] || (n[5] = (i) => O("textField")), onKeyup: n[6] || (n[6] = xe((i) => m("keyup"), ["enter"])), "onUpdate:modelValue": U }), _e({ _: 2 }, [Fe(o(l), (i, r) => ({ name: r, fn: u((B) => [o(l).prepend || o(l)["prepend-inner"] || o(l)["append-inner"] || o(l).append ? P("", !0) : $(t.$slots, r, R(_({ key: 0 }, { ...B })), void 0, !0)]) })), o(l).prepend ? { name: "prepend", fn: u((i) => [$(t.$slots, "prepend", R(T({ ...i, toggleColorPicker: m })), void 0, !0)]), key: "0" } : void 0, (o(e).prependIcon || o(e).pipSlot === "prepend" && o(e).pip) && !o(l).prepend ? { name: "prepend", fn: u(() => [o(e).pip ? (c(), v(q, _({ key: 0 }, o(W), { onClick: m }), null, 16)) : o(e).prependIcon ? (c(), v(Y, { key: 1, color: o(A), icon: o(e).prependIcon, iconSize: o(e).iconSize, onClick: m }, null, 8, ["color", "icon", "iconSize"])) : P("", !0)]), key: "1" } : void 0, o(l)["prepend-inner"] ? { name: "prepend-inner", fn: u((i) => [$(t.$slots, "prepend-inner", R(T({ ...i, toggleColorPicker: m })), void 0, !0)]), key: "2" } : void 0, (o(e).prependInnerIcon || o(e).pipSlot === "prepend-inner" && o(e).pip) && !o(l)["prepend-inner"] ? { name: "prepend-inner", fn: u(() => [o(e).pip ? (c(), v(q, _({ key: 0 }, o(W), { onClick: n[0] || (n[0] = (i) => O("textFieldIcon")) }), null, 16)) : o(e).prependInnerIcon ? (c(), v(Y, { key: 1, color: o(A), icon: o(e).prependInnerIcon, iconSize: o(e).iconSize, onClick: n[1] || (n[1] = (i) => O("textFieldIcon")) }, null, 8, ["color", "icon", "iconSize"])) : P("", !0)]), key: "3" } : void 0, o(l)["append-inner"] ? { name: "append-inner", fn: u((i) => [$(t.$slots, "append-inner", R(T({ ...i, toggleColorPicker: m })), void 0, !0)]), key: "4" } : void 0, (o(e).appendInnerIcon || o(e).pipSlot === "append-inner" && o(e).pip) && !o(l)["append-inner"] ? { name: "append-inner", fn: u(() => [o(e).pip ? (c(), v(q, _({ key: 0 }, o(W), { onClick: n[2] || (n[2] = (i) => O("textFieldIcon")) }), null, 16)) : o(e).appendInnerIcon ? (c(), v(Y, { key: 1, color: o(A), icon: o(e).appendInnerIcon, iconSize: o(e).iconSize, onClick: n[3] || (n[3] = (i) => O("textFieldIcon")) }, null, 8, ["color", "icon", "iconSize"])) : P("", !0)]), key: "5" } : void 0, o(l).append ? { name: "append", fn: u((i) => [$(t.$slots, "append", R(T({ ...i, toggleColorPicker: m })), void 0, !0)]), key: "6" } : void 0, (o(e).appendIcon || o(e).pipSlot === "append" && o(e).pip) && !o(l).append ? { name: "append", fn: u(() => [o(e).pip ? (c(), v(q, _({ key: 0 }, o(W), { onClick: m }), null, 16)) : o(e).appendIcon ? (c(), v(Y, { key: 1, color: o(A), icon: o(e).appendIcon, iconSize: o(e).iconSize, onClick: m }, null, 8, ["color", "icon", "iconSize"])) : P("", !0)]), key: "7" } : void 0, o(l).label || o(e).label ? { name: "label", fn: u(() => [o(l).label ? $(t.$slots, "label", { key: 0 }, void 0, !0) : o(e).label ? (c(), J("div", qe, [$e(He(o(e).label) + " ", 1), o(e).required ? (c(), J("span", Ke, "*")) : P("", !0)])) : P("", !0)]), key: "8" } : void 0]), 1040, ["class", "clearable", "color", "density", "hint", "messages", "model-value", "persistent-hint", "persistent-placeholder", "placeholder", "readonly", "theme", "variant"])], 512), (c(), v(Oe, { to: "body" }, [N(Me, { defaults: o(S) }, { default: u(() => { var i; - return [O(Ee, { ref_key: "cardRef", ref: z, class: ce(o(ge)), style: ue(o(C)), theme: ((i = o(S).VCard) == null ? void 0 : i.theme) ?? o(j), width: o(h).width }, { default: u(() => { + return [N(Ee, { ref_key: "cardRef", ref: z, class: ce(o(ge)), style: ue(o(C)), theme: ((i = o(S).VCard) == null ? void 0 : i.theme) ?? o(L), width: o(h).width }, { default: u(() => { var r, B; - return [O(Te, { modelValue: o(I), "onUpdate:modelValue": [n[7] || (n[7] = (T) => Ne(I) ? I.value = T : null), D], class: "v-color-selection", disabled: o(e).readonly || ((r = o(S).VColorPicker) == null ? void 0 : r.disabled), mode: o(M), theme: ((B = o(S).VColorPicker) == null ? void 0 : B.theme) ?? o(j), "onUpdate:mode": ke }, null, 8, ["modelValue", "disabled", "mode", "theme"])]; + return [N(je, { modelValue: o(I), "onUpdate:modelValue": [n[7] || (n[7] = (E) => Re(I) ? I.value = E : null), U], class: "v-color-selection", disabled: o(e).readonly || ((r = o(S).VColorPicker) == null ? void 0 : r.disabled), mode: o(K), theme: ((B = o(S).VColorPicker) == null ? void 0 : B.theme) ?? o(L), "onUpdate:mode": ke }, null, 8, ["modelValue", "disabled", "mode", "theme"])]; }), _: 1 }, 8, ["class", "style", "theme", "width"])]; }), _: 1 }, 8, ["defaults"])]))], 64)); -} }), [["__scopeId", "data-v-bd364cff"]]), he = Symbol(); -function eo(s = {}) { +} }), [["__scopeId", "data-v-bd364cff"]]), Ue = Object.freeze(Object.defineProperty({ __proto__: null, default: Le }, Symbol.toStringTag, { value: "Module" })), he = Symbol(); +function no(s = {}) { return { install: (d) => { - d.provide(he, s), d.component("VColorField", Me); + d.provide(he, s), d.component("VColorField", Ne(() => Promise.resolve().then(() => Ue))); } }; } export { - Me as VColorField, - eo as createVColorField, - Me as default, + Le as VColorField, + no as createVColorField, + Le as default, he as globalOptions }; (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)}})(); diff --git a/package.json b/package.json index a4295b5..e9b6cc9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wdns/vuetify-color-field", - "version": "1.1.7", + "version": "1.1.8", "description": "Vuetify Color Field is a Vuetify VTextField Color Picker Component", "private": false, "publishConfig": { diff --git a/src/plugin/index.ts b/src/plugin/index.ts index dd5c657..f94b8b5 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -1,3 +1,4 @@ +import { defineAsyncComponent } from 'vue'; import type { App } from 'vue'; import type { GlobalOptions } from './types'; import './styles/main.scss'; @@ -10,7 +11,7 @@ export function createVColorField(options: GlobalOptions = {}) { const install = (app: App) => { app.provide(globalOptions, options); - app.component('VColorField', VColorField); + app.component('VColorField', defineAsyncComponent(() => import('./VColorField.vue'))); }; return {