@vue-interface/input-field 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/input-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.js","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\nimport type { CheckedFormControlProps, FormControlEvents, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { ref, useSlots } from 'vue';\n\ndefineOptions({\n    inheritAttrs: false\n});\n\ndefineSlots<FormControlSlots<T>>();\n\nconst emit = defineEmits<FormControlEvents<T>>();\n\nconst props = withDefaults(defineProps<CheckedFormControlProps<T, V>>(), {\n    formControlClass: 'form-control',\n    labelClass: 'form-label'\n});\n\nconst { controlAttributes, formGroupClasses, model, onClick, onBlur, onFocus } = useFormControl({props, emit});\n\nconst field = ref<HTMLInputElement>();\n</script>\n\n<template>\n    <div\n        class=\"input-field\"\n        :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :class=\"labelClass\"\n                :for=\"controlAttributes.id\">\n                {{ label }}\n            </label>\n        </slot>\n        \n        <div class=\"form-group-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ onClick, onBlur, onFocus, controlAttributes }\">\n                <div\n                    v-if=\"useSlots().icon\"\n                    class=\"form-group-inner-icon\"\n                    @click=\"field.focus\">\n                    <slot name=\"icon\" />\n                </div>\n                <input\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"controlAttributes\"\n                    @click=\"onClick\"\n                    @blur=\"onBlur\"\n                    @focus=\"onFocus\">\n            </slot>\n\n            <slot name=\"activity\">\n                <Transition name=\"input-field-fade\">\n                    <ActivityIndicator\n                        v-if=\"activity && indicator\"\n                        key=\"activity\"\n                        ref=\"activity\"\n                        :type=\"indicator\"\n                        :size=\"indicatorSize\" />\n                </Transition>\n            </slot>\n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\">        \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"$attrs.id && String($attrs.id)\"\n                v-slot=\"{ error }\"\n                :name=\"$attrs.name && String($attrs.name)\"\n                :error=\"error\"\n                :errors=\"errors\">\n                <div\n                    invalid\n                    class=\"invalid-feedback\">\n                    {{ error }}<br>\n                </div>\n            </FormControlErrors>\n        </slot>\n        \n        <slot\n            name=\"feedback\"\n            v-bind=\"{ feedback }\">\n            <FormControlFeedback\n                v-slot=\"{ feedback }\"\n                :feedback=\"feedback\">\n                <div\n                    valid\n                    class=\"valid-feedback\">\n                    {{ feedback }}\n                </div>\n            </FormControlFeedback>\n        </slot>\n\n        <slot\n            name=\"help\"\n            v-bind=\"{ helpText }\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>"],"names":["controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","props","emit","field","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBM,EAAE,mBAAAA,GAAmB,kBAAAC,GAAkB,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,EAAQ,IAAIC,EAAe,EAAC,OAAAC,GAAO,MAAAC,EAAK,CAAA,GAEvGC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/input-field.umd.cjs

@@ -1 +1,2 @@
-(function(u,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(u=typeof globalThis<"u"?globalThis:u||self,i(u.InputField={},u.Vue))})(this,function(u,i){"use strict";function a(e,t="px"){return e!=null&&e!==!1&&isFinite(e)?`${e}${t}`:e}const Y=i.defineComponent({props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:String,default:"indicators"},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},data:()=>({is:null}),setup(e){return{registryInstance:i.inject(e.registry||"indicators")}},computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:a(this.width),maxWidth:a(this.maxWidth),minWidth:a(this.minWidth),height:a(this.height),maxHeight:a(this.maxHeight),minHeight:a(this.minHeight)}}},async mounted(){const e=await this.component();this.is=()=>e},methods:{async component(){let e=this.registryInstance.get(this.type);return e instanceof Promise?e:(typeof e=="function"&&(e=await e()),e.default?e.default:e)}}}),J=(e,t)=>{const n=e.__vccOpts||e;for(const[o,r]of t)n[o]=r;return n},K={class:"activity-indicator-content"},Q={key:1,class:"activity-indicator-label"};function X(e,t,n,o,r,s){return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(["activity-indicator",e.classes]),style:i.normalizeStyle(e.style)},[i.createElementVNode("div",K,[e.is?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.is()),{key:0,class:"mx-auto"})):i.createCommentVNode("",!0),e.label?(i.openBlock(),i.createElementBlock("div",Q,i.toDisplayString(e.label),1)):i.createCommentVNode("",!0)])],6)}const ee=J(Y,[["render",X]]);var te=Object.defineProperty,ie=(e,t,n)=>t in e?te(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,ne=(e,t,n)=>(ie(e,typeof t!="symbol"?t+"":t,n),n),m=function(){return m=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++){t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},m.apply(this,arguments)};function re(e){return e.toLowerCase()}var oe=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],se=/[^A-Z0-9]+/gi;function ue(e,t){t===void 0&&(t={});for(var n=t.splitRegexp,o=n===void 0?oe:n,r=t.stripRegexp,s=r===void 0?se:r,g=t.transform,C=g===void 0?re:g,c=t.delimiter,Nt=c===void 0?" ":c,b=$($(e,o,"$1\0$2"),s,"\0"),E=0,S=b.length;b.charAt(E)==="\0";)E++;for(;b.charAt(S-1)==="\0";)S--;return b.slice(E,S).split("\0").map(C).join(Nt)}function $(e,t,n){return t instanceof RegExp?e.replace(t,n):t.reduce(function(o,r){return o.replace(r,n)},e)}function ae(e,t){return t===void 0&&(t={}),ue(e,m({delimiter:"."},t))}function y(e,t){return t===void 0&&(t={}),ae(e,m({delimiter:"-"},t))}class le{constructor(t={}){ne(this,"components"),this.components=new Map,Object.entries(t).forEach(([n,o])=>{this.register(n,o)})}get(t){const n=this.components.get(t=y(t));if(n)return n;throw new Error(`"${t}" has not been registered yet!`)}register(t,n){return typeof t=="object"?(Object.entries(t).forEach(([o,r])=>{this.register(y(o),r)}),this):(this.components.set(y(t),n),this)}remove(t){return this.components.delete(y(t)),this}reset(){return this.components=new Map,this}}function de(e={}){return new le(e)}de();const h={};function f(...e){if(!e.length)return h;const[t,n]=e;return typeof t=="string"?typeof h[t]<"u"?h[t]:n:Array.isArray(t)?t.reduce((o,r)=>Object.assign(o,{[r]:h[r]}),{}):Object.assign(h,...e)}const ce=i.defineComponent({props:{dropShadow:{type:[Boolean,String],default:void 0},dropShadowableClassPrefix:{type:String,default:"drop-shadow"},shadow:{type:[Boolean,String],default:void 0},shadowableClassPrefix:{type:String,default:"shadow"}},computed:{shadowableClass(){const e=this.dropShadow===!0?"":this.dropShadow&&`-${this.dropShadow}`,t=this.shadow===!0?"":this.shadow&&`-${this.shadow}`;return{[`${this.dropShadowableClassPrefix}${e}`]:!!this.dropShadow,[`${this.shadowableClassPrefix}${t}`]:!!this.shadow}}}});var he=typeof global=="object"&&global&&global.Object===Object&&global;const fe=he;var pe=typeof self=="object"&&self&&self.Object===Object&&self,me=fe||pe||Function("return this")(),ye=me.Symbol;const l=ye;var A=Object.prototype,ge=A.hasOwnProperty,be=A.toString,p=l?l.toStringTag:void 0;function ve(e){var t=ge.call(e,p),n=e[p];try{e[p]=void 0;var o=!0}catch{}var r=be.call(e);return o&&(t?e[p]=n:delete e[p]),r}var Ce=Object.prototype,Ee=Ce.toString;function Se(e){return Ee.call(e)}var $e="[object Null]",Ae="[object Undefined]",F=l?l.toStringTag:void 0;function Fe(e){return e==null?e===void 0?Ae:$e:F&&F in Object(e)?ve(e):Se(e)}function ke(e){return e!=null&&typeof e=="object"}var Be="[object Symbol]";function xe(e){return typeof e=="symbol"||ke(e)&&Fe(e)==Be}function je(e,t){for(var n=-1,o=e==null?0:e.length,r=Array(o);++n<o;)r[n]=t(e[n],n,e);return r}var De=Array.isArray;const we=De;var ze=1/0,k=l?l.prototype:void 0,B=k?k.toString:void 0;function x(e){if(typeof e=="string")return e;if(we(e))return je(e,x)+"";if(xe(e))return B?B.call(e):"";var t=e+"";return t=="0"&&1/e==-ze?"-0":t}function j(e){return e==null?"":x(e)}function Oe(e,t,n,o){var r=-1,s=e==null?0:e.length;for(o&&s&&(n=e[++r]);++r<s;)n=t(n,e[r],r,e);return n}function Ne(e){return function(t){return e==null?void 0:e[t]}}var Ie={\u00C0:"A",\u00C1:"A",\u00C2:"A",\u00C3:"A",\u00C4:"A",\u00C5:"A",\u00E0:"a",\u00E1:"a",\u00E2:"a",\u00E3:"a",\u00E4:"a",\u00E5:"a",\u00C7:"C",\u00E7:"c",\u00D0:"D",\u00F0:"d",\u00C8:"E",\u00C9:"E",\u00CA:"E",\u00CB:"E",\u00E8:"e",\u00E9:"e",\u00EA:"e",\u00EB:"e",\u00CC:"I",\u00CD:"I",\u00CE:"I",\u00CF:"I",\u00EC:"i",\u00ED:"i",\u00EE:"i",\u00EF:"i",\u00D1:"N",\u00F1:"n",\u00D2:"O",\u00D3:"O",\u00D4:"O",\u00D5:"O",\u00D6:"O",\u00D8:"O",\u00F2:"o",\u00F3:"o",\u00F4:"o",\u00F5:"o",\u00F6:"o",\u00F8:"o",\u00D9:"U",\u00DA:"U",\u00DB:"U",\u00DC:"U",\u00F9:"u",\u00FA:"u",\u00FB:"u",\u00FC:"u",\u00DD:"Y",\u00FD:"y",\u00FF:"y",\u00C6:"Ae",\u00E6:"ae",\u00DE:"Th",\u00FE:"th",\u00DF:"ss",\u0100:"A",\u0102:"A",\u0104:"A",\u0101:"a",\u0103:"a",\u0105:"a",\u0106:"C",\u0108:"C",\u010A:"C",\u010C:"C",\u0107:"c",\u0109:"c",\u010B:"c",\u010D:"c",\u010E:"D",\u0110:"D",\u010F:"d",\u0111:"d",\u0112:"E",\u0114:"E",\u0116:"E",\u0118:"E",\u011A:"E",\u0113:"e",\u0115:"e",\u0117:"e",\u0119:"e",\u011B:"e",\u011C:"G",\u011E:"G",\u0120:"G",\u0122:"G",\u011D:"g",\u011F:"g",\u0121:"g",\u0123:"g",\u0124:"H",\u0126:"H",\u0125:"h",\u0127:"h",\u0128:"I",\u012A:"I",\u012C:"I",\u012E:"I",\u0130:"I",\u0129:"i",\u012B:"i",\u012D:"i",\u012F:"i",\u0131:"i",\u0134:"J",\u0135:"j",\u0136:"K",\u0137:"k",\u0138:"k",\u0139:"L",\u013B:"L",\u013D:"L",\u013F:"L",\u0141:"L",\u013A:"l",\u013C:"l",\u013E:"l",\u0140:"l",\u0142:"l",\u0143:"N",\u0145:"N",\u0147:"N",\u014A:"N",\u0144:"n",\u0146:"n",\u0148:"n",\u014B:"n",\u014C:"O",\u014E:"O",\u0150:"O",\u014D:"o",\u014F:"o",\u0151:"o",\u0154:"R",\u0156:"R",\u0158:"R",\u0155:"r",\u0157:"r",\u0159:"r",\u015A:"S",\u015C:"S",\u015E:"S",\u0160:"S",\u015B:"s",\u015D:"s",\u015F:"s",\u0161:"s",\u0162:"T",\u0164:"T",\u0166:"T",\u0163:"t",\u0165:"t",\u0167:"t",\u0168:"U",\u016A:"U",\u016C:"U",\u016E:"U",\u0170:"U",\u0172:"U",\u0169:"u",\u016B:"u",\u016D:"u",\u016F:"u",\u0171:"u",\u0173:"u",\u0174:"W",\u0175:"w",\u0176:"Y",\u0177:"y",\u0178:"Y",\u0179:"Z",\u017B:"Z",\u017D:"Z",\u017A:"z",\u017C:"z",\u017E:"z",\u0132:"IJ",\u0133:"ij",\u0152:"Oe",\u0153:"oe",\u0149:"'n",\u017F:"s"},Te=Ne(Ie);const Le=Te;var Ve=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,He="\\u0300-\\u036f",Me="\\ufe20-\\ufe2f",Ze="\\u20d0-\\u20ff",Re=He+Me+Ze,Pe="["+Re+"]",Ue=RegExp(Pe,"g");function Ge(e){return e=j(e),e&&e.replace(Ve,Le).replace(Ue,"")}var We=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;function _e(e){return e.match(We)||[]}var qe=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;function Ye(e){return qe.test(e)}var D="\\ud800-\\udfff",Je="\\u0300-\\u036f",Ke="\\ufe20-\\ufe2f",Qe="\\u20d0-\\u20ff",Xe=Je+Ke+Qe,w="\\u2700-\\u27bf",z="a-z\\xdf-\\xf6\\xf8-\\xff",et="\\xac\\xb1\\xd7\\xf7",tt="\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf",it="\\u2000-\\u206f",nt=" \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",O="A-Z\\xc0-\\xd6\\xd8-\\xde",rt="\\ufe0e\\ufe0f",N=et+tt+it+nt,I="['\u2019]",T="["+N+"]",ot="["+Xe+"]",L="\\d+",st="["+w+"]",V="["+z+"]",H="[^"+D+N+L+w+z+O+"]",ut="\\ud83c[\\udffb-\\udfff]",at="(?:"+ot+"|"+ut+")",lt="[^"+D+"]",M="(?:\\ud83c[\\udde6-\\uddff]){2}",Z="[\\ud800-\\udbff][\\udc00-\\udfff]",d="["+O+"]",dt="\\u200d",R="(?:"+V+"|"+H+")",ct="(?:"+d+"|"+H+")",P="(?:"+I+"(?:d|ll|m|re|s|t|ve))?",U="(?:"+I+"(?:D|LL|M|RE|S|T|VE))?",G=at+"?",W="["+rt+"]?",ht="(?:"+dt+"(?:"+[lt,M,Z].join("|")+")"+W+G+")*",ft="\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",pt="\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])",mt=W+G+ht,yt="(?:"+[st,M,Z].join("|")+")"+mt,gt=RegExp([d+"?"+V+"+"+P+"(?="+[T,d,"$"].join("|")+")",ct+"+"+U+"(?="+[T,d+R,"$"].join("|")+")",d+"?"+R+"+"+P,d+"+"+U,pt,ft,L,yt].join("|"),"g");function bt(e){return e.match(gt)||[]}function vt(e,t,n){return e=j(e),t=n?void 0:t,t===void 0?Ye(e)?bt(e):_e(e):e.match(t)||[]}var Ct="['\u2019]",Et=RegExp(Ct,"g");function St(e){return function(t){return Oe(vt(Ge(t).replace(Et,"")),e,"")}}var $t=St(function(e,t,n){return e+(n?"-":"")+t.toLowerCase()});const _=$t;function v(e,t,n="-"){const o=String(t).replace(new RegExp(`^${e}${n}?`),"");return[_(o),e].filter(r=>!!r).join(n)}function q(e){return!Array.isArray(e)&&typeof e=="object"}function At(e){return e===void 0}const Ft=i.defineComponent({directives:{bindEvents:{beforeMount(e,t){var n,o;(o=(n=t.instance)==null?void 0:n.bindEvents)==null||o.call(n,e)}}},mixins:[ce],inheritAttrs:!1,props:{activity:{type:Boolean,default:!1},animated:{type:Boolean,default:()=>f("animated",!1)},nativeEvents:{type:Array,default(){return["focus","blur","change","click","keypress","keyup","keydown","progress","paste"]}},defaultControlClass:{type:String,default:()=>f("defaultControlClass","form-control")},error:{type:[String,Array,Boolean],default:void 0},errors:{type:[Array,Object,Boolean],default(){return{}}},feedback:{type:[String,Array],default:void 0},group:{type:Boolean,default:()=>f("group",!0)},helpText:{type:[Number,String],default:void 0},hideLabel:Boolean,indicator:{type:[String,Boolean],default:()=>f("indicator","spinner")},indicatorSize:{type:String,default:void 0},inline:Boolean,invalid:Boolean,label:{type:[Number,String],default:void 0},labelClass:{type:[Object,String],default:()=>f("labelClass","form-label")},modelValue:{default:void 0},pill:Boolean,plaintext:Boolean,size:{type:String,default:void 0},spacing:{type:String,default:void 0},valid:Boolean},data(){return{defaultEmpty:!1,hasChanged:!1,hasFocus:!1,isEmpty:!0}},computed:{id(){return this.$attrs.id||this.$attrs.name||(Math.random()+1).toString(36).substring(7)},componentName(){return this.$options.name},controlAttributes(){return Object.fromEntries(Object.entries(this.$attrs).concat([["id",this.id],["class",this.controlClasses]]))},controlClass(){return this.defaultControlClass},controlSizeClass(){return v(this.size,this.controlClass)},formGroupClasses(){return{[_(this.componentName)]:!!this.componentName,[this.size&&v(this.size,this.componentName)]:!!this.size,animated:this.animated,"default-empty":this.defaultEmpty,"form-group":this.group,[this.size&&v(this.size,"form-group")]:!!this.size,"has-activity":this.activity,"has-changed":this.hasChanged,"has-focus":this.hasFocus,"has-icon":!!this.$slots.icon,"is-empty":this.isEmpty,"is-invalid":!!(this.invalid||this.invalidFeedback),"is-valid":!!(this.valid||this.validFeedback),[this.$attrs.class]:!!this.$attrs.class,[this.$attrs.id]:!!this.$attrs.id}},controlClasses(){return Object.assign({[this.controlClass]:!!this.controlClass,[this.controlSizeClass]:!!this.controlSizeClass,"form-control-icon":!!this.$slots.icon,"is-valid":!!(this.valid||this.validFeedback),"is-invalid":!!(this.invalid||this.invalidFeedback),[this.pillClasses]:this.pill,[this.plaintextClass]:this.plaintext,[this.spacing]:!!this.spacing},this.shadowableClass)},hasDefaultSlot(){return!!this.$slots.default},invalidFeedback(){if(this.error==="")return null;if(this.error)return this.error;const e=this.getFieldErrors();return Array.isArray(e)?e.filter(t=>t&&typeof t=="string").join("<br>"):e},pillClasses(){return"rounded rounded-pill"},plaintextClass(){return"form-control-plaintext"},validFeedback(){return Array.isArray(this.feedback)?this.feedback.join("<br>"):this.feedback}},watch:{hasFocus(){this.shouldChangeOnFocus()&&(this.hasChanged=!0)},defaultEmpty(){this.hasChanged=!0}},methods:{bindEvents(e,t){var n;t||(t=this.onInput);const o=e instanceof HTMLSelectElement?(n=e.querySelectorAll("option"))==null?void 0:n[e.selectedIndex]:null;At(this.modelValue)?o&&(e.value=o==null?void 0:o.value):e.value=this.modelValue,e.value&&t(e.value),this.hasChanged=!!e.value,this.isEmpty=!e.value,e.addEventListener("focus",()=>{this.hasFocus=!0}),e.addEventListener("blur",()=>{this.hasFocus=!1}),e.addEventListener("input",()=>{this.isEmpty=!1,this.hasChanged=!0}),e.addEventListener(e.tagName==="SELECT"?"change":"input",()=>t(e.value)),this.nativeEvents.forEach(r=>{e.addEventListener(r,s=>{this.$emit(r,s)})})},blur(){this.getInputField()&&this.getInputField().blur()},focus(){this.getInputField()&&this.getInputField().focus()},getInputField(){return this.$el.querySelector(".form-control, input, select, textarea")},getFieldErrors(){let e=this.error||this.errors;return this.errors&&q(this.errors)&&(e=this.errors[this.$attrs.name||this.$attrs.id]),!e||Array.isArray(e)||q(e)?e:[e]},shouldChangeOnFocus(){return!this.getInputField().readOnly},onInput(e){this.$emit("update:modelValue",e)}}}),kt=i.defineComponent({components:{ActivityIndicator:ee},mixins:[Ft]}),Tt="",Bt=(e,t)=>{const n=e.__vccOpts||e;for(const[o,r]of t)n[o]=r;return n},xt=["for","innerHTML"],jt={class:"form-group-inner"},Dt=["innerHTML"],wt=["innerHTML"];function zt(e,t,n,o,r,s){const g=i.resolveComponent("activity-indicator"),C=i.resolveDirective("bind-events");return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(e.formGroupClasses)},[i.renderSlot(e.$slots,"label",{},()=>[e.label?(i.openBlock(),i.createElementBlock("label",{key:0,ref:"label",for:e.id,class:i.normalizeClass(e.labelClass),onClick:t[0]||(t[0]=(...c)=>e.focus&&e.focus(...c)),innerHTML:e.label},null,10,xt)):i.createCommentVNode("",!0)]),i.createElementVNode("div",jt,[i.renderSlot(e.$slots,"control",{bindEvents:e.bindEvents,controlAttributes:e.controlAttributes,focus:e.focus},()=>[e.$slots.icon?(i.openBlock(),i.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:t[1]||(t[1]=(...c)=>e.focus&&e.focus(...c))},[i.renderSlot(e.$slots,"icon")])):i.createCommentVNode("",!0),i.withDirectives(i.createElementVNode("input",i.mergeProps({ref:"field"},e.controlAttributes),null,16),[[C]])]),i.renderSlot(e.$slots,"activity",{},()=>[i.createVNode(i.Transition,{name:"input-field-fade"},{default:i.withCtx(()=>[e.activity?(i.openBlock(),i.createBlock(g,{key:"activity",ref:"activity",type:e.indicator,size:e.indicatorSize||e.size},null,8,["type","size"])):i.createCommentVNode("",!0)]),_:1})])]),i.renderSlot(e.$slots,"feedback",{},()=>[e.invalidFeedback?(i.openBlock(),i.createElementBlock("div",{key:0,class:"invalid-feedback",invalid:"",innerHTML:e.invalidFeedback},null,8,Dt)):e.validFeedback?(i.openBlock(),i.createElementBlock("div",{key:1,class:"valid-feedback",valid:"",innerHTML:e.validFeedback},null,8,wt)):i.createCommentVNode("",!0)]),i.renderSlot(e.$slots,"help",{},()=>[e.helpText?(i.openBlock(),i.createElementBlock("small",{key:0,ref:"help"},i.toDisplayString(e.helpText),513)):i.createCommentVNode("",!0)])],2)}const Ot=Bt(kt,[["render",zt]]);u.InputField=Ot,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/form-control")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/form-control"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.InputField={},n.Vue,n.VueInterfaceFormControl))})(this,function(n,e,l){"use strict";const m=["for"],c={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},y=e.createElementVNode("br",null,null,-1),b={valid:"",class:"valid-feedback"},C=e.defineComponent({inheritAttrs:!1,__name:"InputField",props:{activity:{type:Boolean},disabled:{type:Boolean},error:{},errors:{},feedback:{},formControlClass:{default:"form-control"},helpText:{},id:{},indicator:{},indicatorSize:{},invalid:{type:Boolean},label:{},labelClass:{default:"form-label"},modelValue:{},name:{},plaintext:{type:Boolean},readonly:{type:Boolean},valid:{type:Boolean},value:{},checked:{type:Boolean}},emits:["update:modelValue"],setup(B,{emit:S}){const V=B,{controlAttributes:i,formGroupClasses:g,model:a,onClick:s,onBlur:d,onFocus:f}=l.useFormControl({props:V,emit:S}),p=e.ref();return(r,t)=>{const N=e.resolveComponent("ActivityIndicator");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-field",e.unref(g)])},[e.renderSlot(r.$slots,"label",{},()=>[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",class:e.normalizeClass(r.labelClass),for:e.unref(i).id},e.toDisplayString(r.label),11,m)):e.createCommentVNode("",!0)]),e.createElementVNode("div",c,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({onClick:e.unref(s),onBlur:e.unref(d),onFocus:e.unref(f),controlAttributes:e.unref(i)})),()=>[e.useSlots().icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:t[0]||(t[0]=(...o)=>p.value.focus&&p.value.focus(...o))},[e.renderSlot(r.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"field",ref:p,"onUpdate:modelValue":t[1]||(t[1]=o=>e.isRef(a)?a.value=o:null)},e.unref(i),{onClick:t[2]||(t[2]=(...o)=>e.unref(s)&&e.unref(s)(...o)),onBlur:t[3]||(t[3]=(...o)=>e.unref(d)&&e.unref(d)(...o)),onFocus:t[4]||(t[4]=(...o)=>e.unref(f)&&e.unref(f)(...o))}),null,16),[[e.vModelDynamic,e.unref(a)]])]),e.renderSlot(r.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"input-field-fade"},{default:e.withCtx(()=>[r.activity&&r.indicator?(e.openBlock(),e.createBlock(N,{key:"activity",ref:"activity",type:r.indicator,size:r.indicatorSize},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])]),e.renderSlot(r.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:r.error,errors:r.errors,id:r.$attrs.id,name:r.$attrs.name})),()=>[r.error||r.errors?(e.openBlock(),e.createBlock(e.unref(l.FormControlErrors),{key:0,id:r.$attrs.id&&String(r.$attrs.id),name:r.$attrs.name&&String(r.$attrs.name),error:r.error,errors:r.errors},{default:e.withCtx(({error:o})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(o),1),y])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(r.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:r.feedback})),()=>[e.createVNode(e.unref(l.FormControlFeedback),{feedback:r.feedback},{default:e.withCtx(({feedback:o})=>[e.createElementVNode("div",b,e.toDisplayString(o),1)]),_:1},8,["feedback"])]),e.renderSlot(r.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:r.helpText})),()=>[r.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(r.helpText),513)):e.createCommentVNode("",!0)])],2)}}});n.InputField=C,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=input-field.umd.cjs.map

package/dist/input-field.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.umd.cjs","sources":["../src/InputField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T, V\">\nimport type { CheckedFormControlProps, FormControlEvents, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { ref, useSlots } from 'vue';\n\ndefineOptions({\n    inheritAttrs: false\n});\n\ndefineSlots<FormControlSlots<T>>();\n\nconst emit = defineEmits<FormControlEvents<T>>();\n\nconst props = withDefaults(defineProps<CheckedFormControlProps<T, V>>(), {\n    formControlClass: 'form-control',\n    labelClass: 'form-label'\n});\n\nconst { controlAttributes, formGroupClasses, model, onClick, onBlur, onFocus } = useFormControl({props, emit});\n\nconst field = ref<HTMLInputElement>();\n</script>\n\n<template>\n    <div\n        class=\"input-field\"\n        :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :class=\"labelClass\"\n                :for=\"controlAttributes.id\">\n                {{ label }}\n            </label>\n        </slot>\n        \n        <div class=\"form-group-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ onClick, onBlur, onFocus, controlAttributes }\">\n                <div\n                    v-if=\"useSlots().icon\"\n                    class=\"form-group-inner-icon\"\n                    @click=\"field.focus\">\n                    <slot name=\"icon\" />\n                </div>\n                <input\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"controlAttributes\"\n                    @click=\"onClick\"\n                    @blur=\"onBlur\"\n                    @focus=\"onFocus\">\n            </slot>\n\n            <slot name=\"activity\">\n                <Transition name=\"input-field-fade\">\n                    <ActivityIndicator\n                        v-if=\"activity && indicator\"\n                        key=\"activity\"\n                        ref=\"activity\"\n                        :type=\"indicator\"\n                        :size=\"indicatorSize\" />\n                </Transition>\n            </slot>\n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id: $attrs.id, name: $attrs.name }\">        \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"$attrs.id && String($attrs.id)\"\n                v-slot=\"{ error }\"\n                :name=\"$attrs.name && String($attrs.name)\"\n                :error=\"error\"\n                :errors=\"errors\">\n                <div\n                    invalid\n                    class=\"invalid-feedback\">\n                    {{ error }}<br>\n                </div>\n            </FormControlErrors>\n        </slot>\n        \n        <slot\n            name=\"feedback\"\n            v-bind=\"{ feedback }\">\n            <FormControlFeedback\n                v-slot=\"{ feedback }\"\n                :feedback=\"feedback\">\n                <div\n                    valid\n                    class=\"valid-feedback\">\n                    {{ feedback }}\n                </div>\n            </FormControlFeedback>\n        </slot>\n\n        <slot\n            name=\"help\"\n            v-bind=\"{ helpText }\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>"],"names":["controlAttributes","formGroupClasses","model","onClick","onBlur","onFocus","useFormControl","props","emit","field","ref"],"mappings":"m+BAkBM,CAAE,kBAAAA,EAAmB,iBAAAC,EAAkB,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,CAAQ,EAAIC,EAAAA,eAAe,CAAC,MAAAC,EAAO,KAAAC,CAAK,CAAA,EAEvGC,EAAQC,EAAAA"}

package/dist/src/InputField.vue.d.ts

@@ -1,249 +1,89 @@
-declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").DefineComponent<{
-    activity: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    animated: {
-        type: BooleanConstructor;
-        default: () => any;
-    };
-    nativeEvents: {
-        type: ArrayConstructor;
-        default(): string[];
-    };
-    defaultControlClass: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    errors: {
-        type: (BooleanConstructor | ArrayConstructor | ObjectConstructor)[];
-        default(): {};
-    };
-    feedback: {
-        type: (StringConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    group: {
-        type: BooleanConstructor;
-        default: () => any;
-    };
-    helpText: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    hideLabel: BooleanConstructor;
-    indicator: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: () => any;
-    };
-    indicatorSize: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    inline: BooleanConstructor;
-    invalid: BooleanConstructor;
-    label: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    labelClass: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: () => any;
-    };
-    modelValue: {
-        default: undefined;
-    };
-    pill: BooleanConstructor;
-    plaintext: BooleanConstructor;
-    size: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    spacing: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    valid: BooleanConstructor;
-}, unknown, {
-    defaultEmpty: boolean;
-    hasChanged: boolean;
-    hasFocus: boolean;
-    isEmpty: boolean;
-}, {
-    id(): any;
-    componentName(): any;
-    controlAttributes(): {
-        [k: string]: unknown;
-    };
-    controlClass(): any;
-    controlSizeClass(): string;
-    formGroupClasses(): {
-        [x: string]: any;
-        [x: number]: boolean;
-        animated: any;
-        'default-empty': any;
-        'form-group': any;
-        'has-activity': any;
-        'has-changed': any;
-        'has-focus': any;
-        'has-icon': boolean;
-        'is-empty': any;
-        'is-invalid': boolean;
-        'is-valid': boolean;
-    };
-    controlClasses(): any;
-    hasDefaultSlot(): boolean;
-    invalidFeedback(): any;
-    pillClasses(): "rounded rounded-pill";
-    plaintextClass(): "form-control-plaintext";
-    validFeedback(): any;
-}, {
-    bindEvents(el: HTMLOptionElement | HTMLSelectElement, fn: Function): void;
-    blur(): void;
-    focus(): void;
-    getInputField(): any;
-    getFieldErrors(): any;
-    shouldChangeOnFocus(): boolean;
-    onInput(value: any): void;
-}, import("vue").DefineComponent<{
-    dropShadow: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    dropShadowableClassPrefix: {
-        type: StringConstructor;
-        default: string;
-    };
-    shadow: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    shadowableClassPrefix: {
-        type: StringConstructor;
-        default: string;
-    };
-}, unknown, unknown, {
-    shadowableClass(): {
-        [x: string]: boolean;
-    };
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    dropShadow: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    dropShadowableClassPrefix: {
-        type: StringConstructor;
-        default: string;
-    };
-    shadow: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    shadowableClassPrefix: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    shadow: string | boolean;
-    dropShadow: string | boolean;
-    dropShadowableClassPrefix: string;
-    shadowableClassPrefix: string;
-}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    activity: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    animated: {
-        type: BooleanConstructor;
-        default: () => any;
-    };
-    nativeEvents: {
-        type: ArrayConstructor;
-        default(): string[];
-    };
-    defaultControlClass: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    errors: {
-        type: (BooleanConstructor | ArrayConstructor | ObjectConstructor)[];
-        default(): {};
-    };
-    feedback: {
-        type: (StringConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    group: {
-        type: BooleanConstructor;
-        default: () => any;
-    };
-    helpText: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    hideLabel: BooleanConstructor;
-    indicator: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: () => any;
-    };
-    indicatorSize: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    inline: BooleanConstructor;
-    invalid: BooleanConstructor;
-    label: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    labelClass: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: () => any;
-    };
-    modelValue: {
-        default: undefined;
-    };
-    pill: BooleanConstructor;
-    plaintext: BooleanConstructor;
-    size: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    spacing: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    valid: BooleanConstructor;
-}>>, {
-    activity: boolean;
-    animated: boolean;
-    nativeEvents: unknown[];
-    defaultControlClass: string;
-    error: string | boolean | unknown[];
-    errors: boolean | unknown[] | Record<string, any>;
-    feedback: string | unknown[];
-    group: boolean;
-    helpText: string | number;
-    hideLabel: boolean;
-    indicator: string | boolean;
-    indicatorSize: string;
-    inline: boolean;
-    invalid: boolean;
-    label: string | number;
-    labelClass: string | Record<string, any>;
-    modelValue: undefined;
-    pill: boolean;
-    plaintext: boolean;
-    size: string;
-    spacing: string;
-    valid: boolean;
-}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _sfc_main;
+import type { FormControlSlots } from '@vue-interface/form-control';
+declare const _default: <T, V>(__VLS_props: {
+    value?: V;
+    name?: string;
+    "onUpdate:modelValue"?: (value: T) => any;
+    activity?: boolean;
+    disabled?: boolean;
+    error?: import("@vue-interface/form-control").FormControlErrorProp;
+    errors?: import("@vue-interface/form-control").FormControlErrorPropArray | import("@vue-interface/form-control").FormControlErrorPropRecord;
+    feedback?: import("@vue-interface/form-control").FormControlFeedbackProp;
+    formControlClass?: string;
+    helpText?: string;
+    id?: string;
+    indicator?: import("vue").Component;
+    indicatorSize?: string;
+    invalid?: boolean;
+    label?: string;
+    labelClass?: string;
+    modelValue?: T;
+    plaintext?: boolean;
+    readonly?: boolean;
+    valid?: boolean;
+    checked?: boolean;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    slots: Readonly<FormControlSlots<T>>;
+    attrs: any;
+    emit: any;
+}, __VLS_expose?: (exposed: {}) => void, __VLS_setup?: Promise<{
+    props: {
+        value?: V;
+        name?: string;
+        "onUpdate:modelValue"?: (value: T) => any;
+        activity?: boolean;
+        disabled?: boolean;
+        error?: import("@vue-interface/form-control").FormControlErrorProp;
+        errors?: import("@vue-interface/form-control").FormControlErrorPropArray | import("@vue-interface/form-control").FormControlErrorPropRecord;
+        feedback?: import("@vue-interface/form-control").FormControlFeedbackProp;
+        formControlClass?: string;
+        helpText?: string;
+        id?: string;
+        indicator?: import("vue").Component;
+        indicatorSize?: string;
+        invalid?: boolean;
+        label?: string;
+        labelClass?: string;
+        modelValue?: T;
+        plaintext?: boolean;
+        readonly?: boolean;
+        valid?: boolean;
+        checked?: boolean;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    expose(exposed: {}): void;
+    attrs: any;
+    slots: Readonly<FormControlSlots<T>>;
+    emit: any;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            value?: V;
+            name?: string;
+            "onUpdate:modelValue"?: (value: T) => any;
+            activity?: boolean;
+            disabled?: boolean;
+            error?: import("@vue-interface/form-control").FormControlErrorProp;
+            errors?: import("@vue-interface/form-control").FormControlErrorPropArray | import("@vue-interface/form-control").FormControlErrorPropRecord;
+            feedback?: import("@vue-interface/form-control").FormControlFeedbackProp;
+            formControlClass?: string;
+            helpText?: string;
+            id?: string;
+            indicator?: import("vue").Component;
+            indicatorSize?: string;
+            invalid?: boolean;
+            label?: string;
+            labelClass?: string;
+            modelValue?: T;
+            plaintext?: boolean;
+            readonly?: boolean;
+            valid?: boolean;
+            checked?: boolean;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        expose(exposed: {}): void;
+        attrs: any;
+        slots: Readonly<FormControlSlots<T>>;
+        emit: any;
+    };
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/input-field",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.21",
   "description": "A Vue input field component.",
   "files": [
     "dist"
@@ -19,13 +19,8 @@
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
-    "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
-    "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
-    "release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
-    "release": "git add . -A; git commit; git push --tags origin; npm publish;"
+    "build": "vite build && vue-tsc",
+    "preview": "vite preview"
   },
   "repository": {
     "type": "git",
@@ -46,26 +41,32 @@
   },
   "homepage": "https://github.com/vue-interface/input-field/docs#readme",
   "dependencies": {
-    "@vue-interface/activity-indicator": "^2.0.0-beta.0",
-    "@vue-interface/form-control": "^1.0.0-beta.8"
+    "@vue-interface/activity-indicator": "^2.0.0-beta.15",
+    "@vue-interface/form-control": "^1.0.0-beta.43"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^5.3.0",
-    "@vitejs/plugin-vue": "^3.0.1",
-    "autoprefixer": "^10.4.2",
-    "babel-eslint": "^10.1.0",
-    "babel-preset-vue": "^2.0.2",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^10.0.5",
+    "@vitejs/plugin-vue": "^4.3.3",
+    "@vue-interface/eslint-config": "1.0.0-beta.4",
+    "autoprefixer": "^10.4.15",
     "change-case": "^4.1.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "commitlint": "^17.7.1",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.47.0",
+    "husky": "^8.0.3",
     "pascalcase": "^2.0.0",
-    "postcss": "^8.4.6",
-    "tailwindcss": "^3.0.18",
-    "vite": "^3.0.0",
-    "vite-plugin-dts": "^1.7.1",
-    "vue": "^3.2.37"
+    "postcss": "^8.4.28",
+    "semantic-release": "^21.1.1",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.8"
   }
 }

package/dist/style.css

@@ -1 +0,0 @@
-.input-field,.input-field .form-group-inner{position:relative;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.input-field .activity-indicator{position:absolute;right:0;top:50%;-webkit-transform:translate(-1rem,-50%);transform:translate(-1rem,-50%);-webkit-transition:all .15s ease-in;transition:all .15s ease-in}.input-field .activity-indicator-xs{font-size:.5em}.input-field.has-activity .form-control-xs{padding-right:3.75em}.input-field .activity-indicator-sm{font-size:.5em}.input-field.has-activity .form-control-sm{padding-right:3em}.input-field .activity-indicator-md{font-size:.666em}.input-field.has-activity .form-control-md{padding-right:3em}.input-field .activity-indicator-lg{font-size:.75em}.input-field.has-activity .form-control-lg{padding-right:3em}.input-field .activity-indicator-xl{font-size:1em}.input-field.has-activity .activity-indicator-xl~.form-control-xl{padding-right:3.75em}.input-field .activity-indicator{opacity:1}.input-field .input-field-fade-enter,.input-field .input-field-fade-leave-to{opacity:0}.input-field.is-valid .valid-feedback,.input-field.is-invalid .invalid-feedback{display:-webkit-box;display:-ms-flexbox;display:flex}.input-field .form-control-icon{padding-left:2em}.input-field .form-group-inner-icon{position:absolute;top:50%;left:.666em;width:1rem;font-size:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.input-field-sm .form-group-inner-icon{position:absolute;top:50%;left:.666rem;width:.75em;font-size:1.5em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.input-field-lg .form-group-inner-icon{position:absolute;top:50%;left:.666rem;width:1.25em;font-size:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}