@vue-interface/input-field/dist/input-field.umd.cjs

A Vue input field component.

(function(r,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/activity-indicator"),require("@vue-interface/form-control")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/activity-indicator","@vue-interface/form-control"],e):(r=typeof globalThis<"u"?globalThis:r||self,e(r.InputField={},r.Vue,r.VueInterfaceActivityIndicator,r.VueInterfaceFormControl))})(this,(function(r,e,C,s){"use strict";function V(t,p){return e.openBlock(),e.createElementBlock("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})])}const w=["for"],g={class:"form-control-inner"},N={class:"form-control-activity-indicator"},S={invalid:"",class:"invalid-feedback"},T={valid:"",class:"valid-feedback"},E=e.defineComponent({inheritAttrs:!1,__name:"InputField",props:e.mergeModels({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},size:{default:"form-control-md"},color:{},readonly:{type:Boolean},valid:{type:Boolean},value:{},clearable:{type:Boolean,default:!1}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["blur","focus","focusin","focusout","click","doubleclick","contextmenu","mousedown","mouseup","mouseover","mouseout","mouseenter","mouseleave","mousemove","keydown","keyup","keypress","select","selectionchange","invalid","submit","reset","scroll","wheel","copy","cut","paste","touchstart","touchend","touchmove","touchcancel","change","input","beforeinput"],["update:modelValue"]),setup(t,{expose:p,emit:z}){const l=t,P=e.ref(),i=e.useModel(t,"modelValue"),$=z,{controlAttributes:d,formGroupClasses:R,listeners:u}=s.useFormControl({model:i,props:l,emit:$}),f=e.computed(()=>!l.disabled&&!l.readonly),m=e.computed(()=>l.clearable&&(!!P.value||!!i.value)&&f.value);function k(){f.value&&(i.value=void 0)}const y=e.useTemplateRef("activity"),b=e.useTemplateRef("help"),h=e.useTemplateRef("label"),c=e.useTemplateRef("field"),B=e.useTemplateRef("wrapper");return p({activity:y,help:b,field:c,label:h,wrapper:B,focus:()=>c.value?.focus(),blur:()=>c.value?.blur()}),(o,n)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:B,class:e.normalizeClass(["input-field",[e.unref(R),{"has-clear-button":m.value}]])},[e.renderSlot(o.$slots,"label",{},()=>[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref_key:"label",ref:h,class:e.normalizeClass(t.labelClass),for:e.unref(d).id},e.toDisplayString(l.label),11,w)):e.createCommentVNode("",!0)]),e.createElementVNode("div",g,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(d),listeners:e.unref(u)})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:n[0]||(n[0]=a=>c.value?.focus())},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({ref_key:"field",ref:c,"onUpdate:modelValue":n[1]||(n[1]=a=>i.value=a)},{...e.unref(d),...e.unref(u)}),null,16),[[e.vModelDynamic,i.value]])]),e.createElementVNode("div",N,[e.renderSlot(o.$slots,"activity",e.normalizeProps(e.guardReactiveProps({canClear:m.value,clear:k,isInteractive:f.value})),()=>[m.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"input-field-close-button",onClick:e.withModifiers(k,["stop"])},[e.createVNode(e.unref(V),{class:"size-[1.25em]"})])):(e.openBlock(),e.createBlock(e.Transition,{key:1,name:"input-field-fade"},{default:e.withCtx(()=>[l.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(C.ActivityIndicator),{key:"activity",ref_key:"activity",ref:y,type:t.indicator,size:t.indicatorSize},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1}))])])]),e.renderSlot(o.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:t.error,errors:t.errors,id:o.$attrs.id,name:o.$attrs.name})),()=>[t.error||t.errors?(e.openBlock(),e.createBlock(e.unref(s.FormControlErrors),{key:0,id:t.id,name:t.name,error:t.error,errors:t.errors},{default:e.withCtx(({error:a})=>[e.createElementVNode("div",S,[e.createTextVNode(e.toDisplayString(a),1),n[2]||(n[2]=e.createElementVNode("br",null,null,-1))])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:t.feedback})),()=>[e.createVNode(e.unref(s.FormControlFeedback),{feedback:t.feedback},{default:e.withCtx(({feedback:a})=>[e.createElementVNode("div",T,e.toDisplayString(a),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:t.helpText})),()=>[t.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref_key:"help",ref:b,class:"form-help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});r.InputField=E,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));
//# sourceMappingURL=input-field.umd.cjs.map