@vue-interface/form-control/dist/form-control.umd.cjs

An abstract form control Vue mixin.

(function(a,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("@vue-interface/shadowable"),require("lodash-es"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@vue-interface/shadowable","lodash-es","vue"],d):(a=typeof globalThis<"u"?globalThis:a||self,d(a.FormControl={},a.VueInterfaceShadowable,a.LodashEs,a.Vue))})(this,function(a,d,l,r){"use strict";const u={};function n(...t){if(!t.length)return u;const[e,s]=t;return typeof e=="string"?typeof u[e]<"u"?u[e]:s:Array.isArray(e)?e.reduce((i,o)=>Object.assign(i,{[o]:u[o]}),{}):Object.assign(u,...t)}const f=r.defineComponent({__name:"FormControlErrors",props:{error:null,errors:null,name:null,id:null},setup(t){const e=t,s=String((e==null?void 0:e.id)||(e==null?void 0:e.name)),i=r.computed(()=>e.error?new Map([[s,[e.error]]]):l.isPlainObject(e.errors)?new Map(Object.entries(e.errors)):Array.isArray(e.errors)?new Map([[s,e.errors]]):new Map);return(o,m)=>(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(r.unref(i).get(r.unref(s)),C=>r.renderSlot(o.$slots,"default",r.normalizeProps(r.guardReactiveProps({key:r.unref(s),error:C})))),256))}}),y=r.defineComponent({__name:"FormControlFeedback",props:{feedback:null},setup(t){return(e,s)=>(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList([].concat(t.feedback),i=>r.renderSlot(e.$slots,"default",r.normalizeProps(r.guardReactiveProps({feedback:i})))),256))}});function h(t,e,s="-"){const i=String(e).replace(new RegExp(`^${t}${s}?`),"");return[l.kebabCase(i),t].filter(o=>!!o).join(s)}const g=r.defineComponent({components:{FormControlErrors:f,FormControlFeedback:y},directives:{bindEvents:{created(t,e){var s,i;(i=(s=e.instance)==null?void 0:s.bindEvents)==null||i.call(s,t)}}},mixins:[d.Shadowable],inheritAttrs:!1,props:{activity:{type:Boolean,default:!1},animated:{type:Boolean,default:()=>n("animated",!1)},error:{type:[String,Array,Boolean],default:void 0},errors:{type:[Array,Object,Boolean],default:void 0},feedback:{type:[String,Array],default:void 0},formControlClass:{type:[Array,Object,String],default:()=>n("controlClass","form-control")},group:{type:Boolean,default:()=>n("group",!0)},helpText:{type:[Number,String],default:void 0},indicator:{type:[Object,String,Boolean],default:()=>n("indicator","spinner")},indicatorSize:{type:String,default:void 0},invalid:Boolean,label:{type:[Number,String],default:void 0},labelClass:{type:[Object,String],default:()=>n("labelClass","form-label")},modelValue:{type:[String,Number,Boolean,Array,Object],default:()=>{}},plaintext:Boolean,size:{type:String,default:void 0},valid:Boolean},emits:["focus","blur","change","click","keypress","keyup","keydown","progress","paste","update:modelValue"],data(){return{currentValue:void 0,hasChanged:!1,hasFocus:!1,isDirty:this}},computed:{model:{get(){return this.getModelValue()},set(t){this.setModelValue(t)}},id(){return this.$attrs.id||Math.random().toString(36).slice(2)},isEmpty(){return l.isNil(this.model)},isInvalid(){return!!(this.invalid||this.error||this.errors&&(Array.isArray(this.errors)?this.errors.length:this.errors[this.$attrs.id||this.$attrs.name]))},isValid(){return!!(this.valid||this.feedback)},componentName(){return this.$options.name},controlClass(){return this.formControlClass},controlAttributes(){const t=Object.assign({},this.$attrs,{id:this.id,class:this.controlClasses});return delete t.value,t},controlClasses(){return Object.assign({[this.controlClass]:!!this.controlClass,[this.controlSizeClass]:!!this.controlSizeClass,[this.plaintextClass]:this.plaintext,"form-control-icon":!!this.$slots.icon,"is-valid":this.isValid,"is-invalid":this.isInvalid},this.shadowableClass)},controlSizeClass(){return h(this.size,this.controlClass)},formGroupClasses(){return Object.assign({animated:this.animated,"form-group":this.group,"has-activity":this.activity,"has-changed":this.hasChanged,"has-focus":this.hasFocus,"has-icon":!!this.$slots.icon,"is-dirty":this.isDirty,"is-empty":this.isEmpty,"is-invalid":this.isInvalid,"is-valid":this.isValid,[this.$attrs.class]:!!this.$attrs.class,[this.size&&h(this.size,"form-group")]:!!this.size,[this.size&&h(this.size,this.componentName)]:!!this.size},!!this.componentName&&{[l.kebabCase(this.componentName)]:!0})},plaintextClass(){return"form-control-plaintext"}},created(){this.currentValue=this.$attrs.value,this.isDirty=!l.isNil(this.model)},methods:{bindEvents(t){for(const e of this.$options.emits)t.addEventListener(e,s=>{this.$emit(e,s)});t.addEventListener("focus",()=>{this.isDirty=!0,this.hasFocus=!0}),t.addEventListener("blur",()=>{this.hasFocus=!1})},blur(){var t;(t=this.$refs.field)==null||t.blur()},focus(){var t;(t=this.$refs.field)==null||t.focus()},getFieldErrors(){let t=this.error||this.errors;return this.errors&&!Array.isArray(this.errors)&&(t=this.errors[this.$attrs.name||this.$attrs.id]),!t||Array.isArray(t)||l.isObject(t)?t:[t]},getModelValue(){return this.modelValue===void 0?this.currentValue:this.modelValue},setModelValue(t){this.hasChanged=!0,this.currentValue=t,this.$emit("update:modelValue",t)}}});function c(t,e,s="-"){const i=String(e).replace(new RegExp(`^${t}${s}?`),"");return[l.kebabCase(i),t].filter(o=>!!o).join(s)}function p(t){return!Array.isArray(t)&&typeof t=="object"}const b=r.defineComponent({directives:{bindEvents:{beforeMount(t,e){var s,i;(i=(s=e.instance)==null?void 0:s.bindEvents)==null||i.call(s,t)}}},mixins:[d.Shadowable],inheritAttrs:!1,props:{modelValue:{default:void 0},activity:{type:Boolean,default:!1},animated:{type:Boolean,default:()=>n("animated",!1)},nativeEvents:{type:Array,default(){return["focus","blur","change","click","keypress","keyup","keydown","progress","paste"]}},defaultControlClass:{type:String,default:()=>n("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:()=>n("group",!0)},helpText:{type:[Number,String],default:void 0},hideLabel:Boolean,indicator:{type:[String,Boolean],default:()=>n("indicator","spinner")},indicatorSize:{type:String,default:void 0},inline:Boolean,invalid:Boolean,label:{type:[Number,String],default:void 0},labelClass:{type:[Object,String],default:()=>n("labelClass","form-label")},pill:Boolean,plaintext:Boolean,size:{type:String,default:void 0},spacing:{type:String,default:void 0},valid:Boolean},emits:["blur","change","click","focus","keydown","keypress","keyup","update:modelValue"],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],["value",this.modelValue]]))},controlClass(){return this.defaultControlClass},controlSizeClass(){return c(this.size,this.controlClass)},formGroupClasses(){return Object.assign({[this.size&&c(this.size,this.componentName)]:!!this.size,animated:this.animated,"default-empty":this.defaultEmpty,"form-group":this.group,[this.size&&c(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},!!this.componentName&&{[l.kebabCase(this.componentName)]:!0})},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 t=this.getFieldErrors();return Array.isArray(t)?t.filter(e=>e&&typeof e=="string").join("<br>"):t},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(t,e){var i;e||(e=this.onInput);const s=t instanceof HTMLSelectElement?(i=t.querySelectorAll("option"))==null?void 0:i[t.selectedIndex]:null;s&&(t.value=s==null?void 0:s.value),t.value&&e(t.value),this.hasChanged=!!t.value,this.isEmpty=!t.value,t.addEventListener("focus",()=>{this.hasFocus=!0}),t.addEventListener("blur",()=>{this.hasFocus=!1}),t.addEventListener("input",()=>{this.isEmpty=!1,this.hasChanged=!0}),t.addEventListener(t.tagName==="SELECT"?"change":"input",()=>e(t.value)),this.nativeEvents.forEach(o=>{t.addEventListener(o,m=>{this.$emit(o,m)})})},blur(){this.getInputField()&&this.getInputField().blur()},focus(){this.getInputField()&&this.getInputField().focus()},getInputField(){return this.$el.querySelector(".form-control, input, select, textarea")},getFieldErrors(){let t=this.error||this.errors;return this.errors&&p(this.errors)&&(t=this.errors[this.$attrs.name||this.$attrs.id]),!t||Array.isArray(t)||p(t)?t:[t]},shouldChangeOnFocus(){return!this.getInputField().readOnly},onInput(t){this.$emit("update:modelValue",t)}}});a.FormControl=g,a.FormControlErrors=f,a.FormControlLegacy=b,a.config=n,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=form-control.umd.cjs.map