@vue-interface/select-field
Version:
A Vue select field component.
3 lines (2 loc) • 4.69 kB
JavaScript
(function(l,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):(l=typeof globalThis<"u"?globalThis:l||self,e(l.SelectField={},l.Vue,l.VueInterfaceActivityIndicator,l.VueInterfaceFormControl))})(this,(function(l,e,p,c){"use strict";const b=["for"],h={class:"form-control-inner"},S={class:"form-control-activity-indicator"},V={invalid:"",class:"invalid-feedback"},C={valid:"",class:"valid-feedback"},B=e.defineComponent({inheritAttrs:!1,__name:"SelectField",props:e.mergeModels({activity:{type:Boolean},disabled:{type:Boolean},error:{},errors:{},feedback:{},formControlClass:{default:"form-select"},helpText:{},id:{},indicator:{},indicatorSize:{},invalid:{type:Boolean},label:{},labelClass:{default:"form-label"},modelValue:{},name:{},plaintext:{type:Boolean},size:{default:"form-select-md"},color:{},readonly:{type:Boolean},valid:{type:Boolean},value:{}},{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:T,emit:g}){const a=t,s=e.useModel(t,"modelValue"),N=g,{controlAttributes:d,formGroupClasses:z,listeners:f}=c.useFormControl({model:s,props:a,emit:N}),m=e.useTemplateRef("activity"),y=e.useTemplateRef("help"),k=e.useTemplateRef("label"),i=e.useTemplateRef("field"),u=e.useTemplateRef("wrapper");return T({activity:m,help:y,field:i,label:k,wrapper:u,focus:()=>i.value?.focus(),blur:()=>i.value?.blur()}),e.onMounted(()=>{const r=e.useSlots().default;if(r)for(const o of r()){if(!o.props)return;"selected"in o.props&&(o.props.value??o.children)&&(s.value=o.props.value??o.children)}}),(r,o)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:u,class:e.normalizeClass(["select-field",e.unref(z)])},[e.renderSlot(r.$slots,"label",{},()=>[a.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref_key:"label",ref:k,for:e.unref(d).id,class:e.normalizeClass(t.labelClass),onClick:o[0]||(o[0]=n=>i.value?.click())},e.toDisplayString(a.label),11,b)):e.createCommentVNode("",!0)]),e.createElementVNode("div",h,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(d),listeners:e.unref(f)})),()=>[r.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:o[1]||(o[1]=n=>i.value?.focus())},[e.renderSlot(r.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({ref_key:"field",ref:i,"onUpdate:modelValue":o[2]||(o[2]=n=>s.value=n)},{...e.unref(d),...e.unref(f)}),[e.renderSlot(r.$slots,"default")],16),[[e.vModelSelect,s.value]])]),e.createElementVNode("div",S,[e.renderSlot(r.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[a.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(p.ActivityIndicator),{key:"activity",ref_key:"activity",ref:m,type:t.indicator,size:t.indicatorSize},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])])]),e.renderSlot(r.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:t.error,errors:t.errors,id:t.id,name:t.name})),()=>[t.error||t.errors?(e.openBlock(),e.createBlock(e.unref(c.FormControlErrors),{key:0,id:t.id&&String(t.id),name:t.name&&String(t.name),error:t.error,errors:t.errors},{default:e.withCtx(({error:n})=>[e.createElementVNode("div",V,[e.createTextVNode(e.toDisplayString(n),1),o[3]||(o[3]=e.createElementVNode("br",null,null,-1))])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(r.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:t.feedback})),()=>[e.createVNode(e.unref(c.FormControlFeedback),{feedback:t.feedback},{default:e.withCtx(({feedback:n})=>[e.createElementVNode("div",C,e.toDisplayString(n),1)]),_:1},8,["feedback"])]),e.renderSlot(r.$slots,"help",e.normalizeProps(e.guardReactiveProps({helpText:t.helpText})),()=>[t.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref_key:"help",ref:y},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});l.SelectField=B,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
//# sourceMappingURL=select-field.umd.cjs.map