From f68cd807b7c62b9c401df53da2209caf01538d85 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Mon, 26 Feb 2024 10:59:06 -0800 Subject: [PATCH] Build --- dist/vuetify-color-field.cjs.js | 4 ++-- dist/vuetify-color-field.es.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/vuetify-color-field.cjs.js b/dist/vuetify-color-field.cjs.js index 7e11532..8a1a550 100644 --- a/dist/vuetify-color-field.cjs.js +++ b/dist/vuetify-color-field.cjs.js @@ -7,5 +7,5 @@ * @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:l}=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[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(a,{emit:p}){const i=p,l=a,c=e.inject(Symbol.for("vuetify:icons")),m=e.computed(()=>Q({icon:l.icon!=="default"?l.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,l=a,{modelValue:c}=e.toRefs(l),m=e.computed(()=>({[`${w}--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(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-10866cc1"),a=a(),e.popScopeId(),a))(()=>e.createElementVNode("div",{class:"position-elm-helper"},null,-1)),M=((a,p)=>{const i=a.__vccOpts||a;for(const[l,c]of p)i[l]=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(),l=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({}),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:d}=r;return{[`${w}--text-field-${o}`]:o!=="",[`${w}--text-field-readonly`]:t??!1,[`${w}--text-field-readonly-input`]:!(!d||t),[`${w}--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{[`${w}--card`]:!0,[`${w}--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 d=(t==null?void 0:t.getBoundingClientRect())??o;let B=(t==null?void 0:t.offsetHeight)??0,x=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())??o;B=g==null?void 0:g.offsetHeight,x=(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?x:"auto"},function(){var X,Z,G;let N=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),N+=W,(Z=n.open)!=null&&Z.includes("top")&&(K=window.innerHeight-N+Number(s.height)+2*W,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:I({value:K}),display:"block",left:I({value:j}),minWidth:I({value:s.width}),padding:I({value:n.cardPadding}),right:I({value:F}),top:I({value:N}),width:I({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,c("update:modelValue",r),c("update",r)}function re(r){R.value=r,V.value=y.value,c("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,d)=>({name:d,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,d,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"},[he,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 d,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||((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(H),"onUpdate:mode":re},null,8,["modelValue","disabled","mode","theme"])]}),_:1},8,["class","style","theme","width"])]}),_:1},8,["defaults"])]))],64))}}),[["__scopeId","data-v-10866cc1"]]),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-10866cc1],.v-color-field--text-field-readonly-input .v-field *[data-v-10866cc1]{cursor:pointer!important}.v-color-field--card[data-v-10866cc1]{display:none;position:absolute!important;z-index:999999}.v-color-field--card .v-color-picker[data-v-10866cc1]{width:100%!important}.v-color-field--card .v-color-picker-canvas canvas[data-v-10866cc1]{width:100%}.v-color-field--card-full-width .v-color-picker[data-v-10866cc1]{max-width:100%!important}.position-elm-helper[data-v-10866cc1]{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)}})(); + */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"),de=require("@vueuse/core"),ae=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=d=>{const{unit:p="px",value:i}=d;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=d=>{const{icon:p,iconOptions:i,name:l}=d;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[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(d,{emit:p}){const i=p,l=d,c=e.inject(Symbol.for("vuetify:icons")),m=e.computed(()=>Q({icon:l.icon!=="default"?l.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(d,{emit:p}){const i=p,l=d,{modelValue:c}=e.toRefs(l),m=e.computed(()=>({[`${w}--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(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=(d=>(e.pushScopeId("data-v-781d35c8"),d=d(),e.popScopeId(),d))(()=>e.createElementVNode("div",{class:"position-elm-helper"},null,-1)),M=((d,p)=>{const i=d.__vccOpts||d;for(const[l,c]of p)i[l]=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(d,{emit:p}){var A;const i=e.useAttrs(),l=e.useSlots(),c=p,m=d,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{[`${w}--text-field-${o}`]:o!=="",[`${w}--text-field-readonly`]:t??!1,[`${w}--text-field-readonly-input`]:!(!a||t),[`${w}--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{[`${w}--card`]:!0,[`${w}--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"),E=(g==null?void 0:g.getBoundingClientRect())??o;B=g==null?void 0:g.offsetHeight,x=(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?x:"auto"},function(){var X,Z,G;let N=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),N+=W,(Z=n.open)!=null&&Z.includes("top")&&(K=window.innerHeight-N+Number(s.height)+2*W,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:I({value:K}),display:"block",left:I({value:j}),minWidth:I({value:s.width}),padding:I({value:n.cardPadding}),right:I({value:F}),top:I({value:N}),width:I({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,c("update:modelValue",r),c("update",r)}function re(r){R.value=r,V.value=y.value,c("update:mode",r)}return de.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"},[he,e.createVNode(ce.VDefaultsProvider,{defaults:e.unref(v)},{default:e.withCtx(()=>{var t;return[e.createVNode(ae.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-781d35c8"]]),T=Symbol();exports.VColorField=M,exports.createVColorField=function(d={}){return{install:p=>{p.provide(T,d),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-781d35c8],.v-color-field--text-field-readonly-input .v-field *[data-v-781d35c8]{cursor:pointer!important}.v-color-field--card[data-v-781d35c8]{display:none;position:absolute!important;z-index:999999}.v-color-field--card .v-color-picker[data-v-781d35c8]{width:100%!important}.v-color-field--card .v-color-picker-canvas canvas[data-v-781d35c8]{width:100%}.v-color-field--card-full-width .v-color-picker[data-v-781d35c8]{max-width:100%!important}.position-elm-helper[data-v-781d35c8]{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(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 a5b3f0a..10b7dcc 100644 --- a/dist/vuetify-color-field.es.js +++ b/dist/vuetify-color-field.es.js @@ -48,7 +48,7 @@ const x = (r) => { a("click"); } return (C, f) => (c(), v(me, { class: ce(o(y)), color: o(s) || "--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"])); -} }), je = { key: 1 }, De = { key: 0, class: "text-error ms-1" }, Ke = ((r) => (Oe("data-v-10866cc1"), r = r(), We(), r))(() => fe("div", { class: "position-elm-helper" }, null, -1)), Le = ((r, p) => { +} }), je = { key: 1 }, De = { key: 0, class: "text-error ms-1" }, Ke = ((r) => (Oe("data-v-781d35c8"), r = r(), We(), r))(() => fe("div", { class: "position-elm-helper" }, null, -1)), Le = ((r, p) => { const a = r.__vccOpts || r; for (const [l, s] of p) a[l] = s; @@ -122,7 +122,7 @@ const x = (r) => { return [O(Me, { modelValue: o(I), "onUpdate:modelValue": [n[7] || (n[7] = (A) => Ne(I) ? I.value = A : null), K], class: "v-color-selection", disabled: o(e).readonly || ((d = o(S).VColorPicker) == null ? void 0 : d.disabled), mode: o(j), theme: ((B = o(S).VColorPicker) == null ? void 0 : B.theme) ?? o(D), "onUpdate:mode": Se }, null, 8, ["modelValue", "disabled", "mode", "theme"])]; }), _: 1 }, 8, ["class", "style", "theme", "width"])]; }), _: 1 }, 8, ["defaults"])]))], 64)); -} }), [["__scopeId", "data-v-10866cc1"]]), ve = Symbol(); +} }), [["__scopeId", "data-v-781d35c8"]]), ve = Symbol(); function to(r = {}) { return { install: (p) => { p.provide(ve, r), p.component("VColorField", Le); @@ -134,4 +134,4 @@ export { Le as default, ve 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--text-field-readonly .v-field *[data-v-10866cc1],.v-color-field--text-field-readonly-input .v-field *[data-v-10866cc1]{cursor:pointer!important}.v-color-field--card[data-v-10866cc1]{display:none;position:absolute!important;z-index:999999}.v-color-field--card .v-color-picker[data-v-10866cc1]{width:100%!important}.v-color-field--card .v-color-picker-canvas canvas[data-v-10866cc1]{width:100%}.v-color-field--card-full-width .v-color-picker[data-v-10866cc1]{max-width:100%!important}.position-elm-helper[data-v-10866cc1]{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)}})(); +(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-781d35c8],.v-color-field--text-field-readonly-input .v-field *[data-v-781d35c8]{cursor:pointer!important}.v-color-field--card[data-v-781d35c8]{display:none;position:absolute!important;z-index:999999}.v-color-field--card .v-color-picker[data-v-781d35c8]{width:100%!important}.v-color-field--card .v-color-picker-canvas canvas[data-v-781d35c8]{width:100%}.v-color-field--card-full-width .v-color-picker[data-v-781d35c8]{max-width:100%!important}.position-elm-helper[data-v-781d35c8]{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(d){console.error("vite-plugin-css-injected-by-js",d)}})();