@vue-interface/select-field 2.0.16 → 2.0.18

package/dist/select-field.js

@@ -1,16 +1,16 @@
-import { defineComponent as z, mergeModels as h, useModel as F, useTemplateRef as w, onMounted as M, useSlots as A, createElementBlock as c, openBlock as a, normalizeClass as C, unref as o, renderSlot as r, createElementVNode as n, createCommentVNode as s, toDisplayString as u, normalizeProps as m, guardReactiveProps as f, withDirectives as N, mergeProps as E, vModelSelect as P, createVNode as $, Transition as x, withCtx as k, createBlock as S, createTextVNode as D } from "vue";
-import { ActivityIndicator as R } from "@vue-interface/activity-indicator";
-import { useFormControl as G, FormControlErrors as I, FormControlFeedback as U } from "@vue-interface/form-control";
-const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-control-activity-indicator" }, H = {
+import { defineComponent as N, mergeModels as V, useModel as x, useTemplateRef as d, onMounted as E, useSlots as P, createElementBlock as m, openBlock as s, normalizeClass as g, unref as t, renderSlot as r, createElementVNode as n, createCommentVNode as c, toDisplayString as v, normalizeProps as y, guardReactiveProps as b, withDirectives as D, mergeProps as R, vModelSelect as G, createVNode as w, Transition as I, withCtx as h, createBlock as T, createTextVNode as U } from "vue";
+import { ActivityIndicator as j } from "@vue-interface/activity-indicator";
+import { useFormControl as q, FormControlErrors as H, FormControlFeedback as J } from "@vue-interface/form-control";
+const K = ["for"], L = { class: "form-control-inner" }, O = { class: "form-control-activity-indicator" }, Q = {
   invalid: "",
   class: "invalid-feedback"
-}, J = {
+}, W = {
   valid: "",
   class: "valid-feedback"
-}, Q = /* @__PURE__ */ z({
+}, _ = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "SelectField",
-  props: /* @__PURE__ */ h({
+  props: /* @__PURE__ */ V({
     activity: { type: Boolean },
     disabled: { type: Boolean },
     error: {},
@@ -27,7 +27,7 @@ const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-contr
     modelValue: {},
     name: {},
     plaintext: { type: Boolean },
-    size: {},
+    size: { default: "form-select-md" },
     color: {},
     readonly: { type: Boolean },
     valid: { type: Boolean },
@@ -36,103 +36,116 @@ const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-contr
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ h(["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(e, { emit: B }) {
-    const V = e, d = F(e, "modelValue"), g = B, {
-      controlAttributes: v,
-      formGroupClasses: T,
-      listeners: y
-    } = G({ model: d, props: V, emit: g }), b = w("field");
-    return M(() => {
-      const t = A().default;
-      if (t)
-        for (const l of t()) {
+  emits: /* @__PURE__ */ V(["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(e, { expose: z, emit: F }) {
+    const u = e, f = x(e, "modelValue"), M = F, {
+      controlAttributes: k,
+      formGroupClasses: A,
+      listeners: p
+    } = q({ model: f, props: u, emit: M }), C = d("activity"), $ = d("help"), S = d("label"), a = d("field"), B = d("wrapper");
+    return z({
+      activity: C,
+      help: $,
+      field: a,
+      label: S,
+      wrapper: B,
+      focus: () => a.value?.focus(),
+      blur: () => a.value?.blur()
+    }), E(() => {
+      const o = P().default;
+      if (o)
+        for (const l of o()) {
           if (!l.props)
             return;
-          "selected" in l.props && (l.props.value ?? l.children) && (d.value = l.props.value ?? l.children);
+          "selected" in l.props && (l.props.value ?? l.children) && (f.value = l.props.value ?? l.children);
         }
-    }), (t, l) => (a(), c("div", {
-      class: C(["select-field", o(T)])
+    }), (o, l) => (s(), m("div", {
+      ref_key: "wrapper",
+      ref: B,
+      class: g(["select-field", t(A)])
     }, [
-      r(t.$slots, "label", {}, () => [
-        e.label ? (a(), c("label", {
+      r(o.$slots, "label", {}, () => [
+        u.label ? (s(), m("label", {
           key: 0,
-          ref: "label",
-          for: o(v).id,
-          class: C(e.labelClass),
-          onClick: l[0] || (l[0] = (i) => b.value?.click())
-        }, u(e.label), 11, j)) : s("", !0)
+          ref_key: "label",
+          ref: S,
+          for: t(k).id,
+          class: g(e.labelClass),
+          onClick: l[0] || (l[0] = (i) => a.value?.click())
+        }, v(u.label), 11, K)) : c("", !0)
       ]),
-      n("div", p, [
-        r(t.$slots, "control", m(f({ controlAttributes: o(v), listeners: o(y) })), () => [
-          t.$slots.icon ? (a(), c("div", {
+      n("div", L, [
+        r(o.$slots, "control", y(b({ controlAttributes: t(k), listeners: t(p) })), () => [
+          o.$slots.icon ? (s(), m("div", {
             key: 0,
             class: "form-control-inner-icon",
-            onClick: l[1] || (l[1] = (i) => b.value?.focus())
+            onClick: l[1] || (l[1] = (i) => a.value?.focus())
           }, [
-            r(t.$slots, "icon")
-          ])) : s("", !0),
-          N(n("select", E({
+            r(o.$slots, "icon")
+          ])) : c("", !0),
+          D(n("select", R({
             ref_key: "field",
-            ref: b,
-            "onUpdate:modelValue": l[2] || (l[2] = (i) => d.value = i)
-          }, { ...o(v), ...o(y) }), [
-            r(t.$slots, "default")
+            ref: a,
+            "onUpdate:modelValue": l[2] || (l[2] = (i) => f.value = i)
+          }, { ...t(k), ...t(p) }), [
+            r(o.$slots, "default")
           ], 16), [
-            [P, d.value]
+            [G, f.value]
           ])
         ]),
-        n("div", q, [
-          r(t.$slots, "activity", {}, () => [
-            $(x, { name: "select-field-fade" }, {
-              default: k(() => [
-                e.activity && e.indicator ? (a(), S(o(R), {
+        n("div", O, [
+          r(o.$slots, "activity", {}, () => [
+            w(I, { name: "select-field-fade" }, {
+              default: h(() => [
+                u.activity && e.indicator ? (s(), T(t(j), {
                   key: "activity",
-                  ref: "activity",
+                  ref_key: "activity",
+                  ref: C,
                   type: e.indicator,
                   size: e.indicatorSize
-                }, null, 8, ["type", "size"])) : s("", !0)
+                }, null, 8, ["type", "size"])) : c("", !0)
               ]),
               _: 1
             })
           ])
         ])
       ]),
-      r(t.$slots, "errors", m(f({ error: e.error, errors: e.errors, id: e.id, name: e.name })), () => [
-        e.error || e.errors ? (a(), S(o(I), {
+      r(o.$slots, "errors", y(b({ error: e.error, errors: e.errors, id: e.id, name: e.name })), () => [
+        e.error || e.errors ? (s(), T(t(H), {
           key: 0,
           id: e.id && String(e.id),
           name: e.name && String(e.name),
           error: e.error,
           errors: e.errors
         }, {
-          default: k(({ error: i }) => [
-            n("div", H, [
-              D(u(i), 1),
+          default: h(({ error: i }) => [
+            n("div", Q, [
+              U(v(i), 1),
               l[3] || (l[3] = n("br", null, null, -1))
             ])
           ]),
           _: 1
-        }, 8, ["id", "name", "error", "errors"])) : s("", !0)
+        }, 8, ["id", "name", "error", "errors"])) : c("", !0)
       ]),
-      r(t.$slots, "feedback", m(f({ feedback: e.feedback })), () => [
-        $(o(U), { feedback: e.feedback }, {
-          default: k(({ feedback: i }) => [
-            n("div", J, u(i), 1)
+      r(o.$slots, "feedback", y(b({ feedback: e.feedback })), () => [
+        w(t(J), { feedback: e.feedback }, {
+          default: h(({ feedback: i }) => [
+            n("div", W, v(i), 1)
           ]),
           _: 1
         }, 8, ["feedback"])
       ]),
-      r(t.$slots, "help", m(f({ helpText: e.helpText })), () => [
-        e.helpText ? (a(), c("small", {
+      r(o.$slots, "help", y(b({ helpText: e.helpText })), () => [
+        e.helpText ? (s(), m("small", {
           key: 0,
-          ref: "help"
-        }, u(e.helpText), 513)) : s("", !0)
+          ref_key: "help",
+          ref: $
+        }, v(e.helpText), 513)) : c("", !0)
       ])
     ], 2));
   }
 });
 export {
-  Q as SelectField
+  _ as SelectField
 };
 //# sourceMappingURL=select-field.js.map

package/dist/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, onMounted, SelectHTMLAttributes, useSlots, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {\n    formControlClass: 'form-select',\n    labelClass: 'form-label'\n});\n\ndefineOptions({\n    inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {\n    default: () => unknown\n}>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners,\n} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst field = useTemplateRef<HTMLSelectElement>('field');\n\n// Check the option slots for selected options. If the field has hardcoded\n// selected options, this will ensure the value of the field is always set to\n// the property. This will ensure the model is updated to the selected value.\nonMounted(() => {\n    const slot = useSlots().default;\n\n    if(!slot) {\n        return;\n    }\n\n    for(const child of slot()) {\n        if(!child.props) {\n            return;\n        }\n        \n        if('selected' in child.props && (child.props.value ?? child.children)) {\n            model.value = child.props.value ?? child.children;\n        }\n    }\n});\n</script>\n\n<script lang=\"ts\">\nexport type SelectFieldControlSizePrefix = 'form-select';\n\nexport type SelectFieldProps<ModelValue, Value> = FormControlProps<\n    SelectHTMLAttributes, \n    SelectFieldControlSizePrefix, \n    ModelValue, \n    Value\n>;\n</script>\n\n<template>\n    <div\n        class=\"select-field\"\n        :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :for=\"controlAttributes.id\"\n                :class=\"labelClass\"\n                @click=\"field?.click()\">\n                {{ label }}\n            </label>\n        </slot>\n\n        <div class=\"form-control-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ controlAttributes, listeners }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-control-inner-icon\"\n                    @click=\"field?.focus()\">\n                    <slot name=\"icon\" />\n                </div>\n                <select\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"{...controlAttributes, ...listeners}\">\n                    <slot />\n                </select>\n            </slot>\n            \n            <div class=\"form-control-activity-indicator\">\n                <slot name=\"activity\">\n                    <Transition name=\"select-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        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id, name }\">        \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"id && String(id)\"\n                v-slot=\"{ error }\"\n                :name=\"name && String(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":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","field","useTemplateRef","onMounted","slot","useSlots","child","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_cache","$event","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"select-field.js","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, onMounted, SelectHTMLAttributes, useSlots, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {\n    formControlClass: 'form-select',\n    labelClass: 'form-label',\n    size: 'form-select-md'\n});\n\ndefineOptions({\n    inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {\n    default: () => unknown\n}>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners,\n} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst activity = useTemplateRef<InstanceType<typeof ActivityIndicator>>('activity');\nconst help = useTemplateRef<HTMLElement>('help');\nconst label = useTemplateRef<HTMLLabelElement>('label');\nconst field = useTemplateRef<HTMLSelectElement>('field');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\ndefineExpose({\n    activity,\n    help,\n    field,\n    label,\n    wrapper,\n    focus: () => field.value?.focus(),\n    blur: () => field.value?.blur(),\n});\n\n// Check the option slots for selected options. If the field has hardcoded\n// selected options, this will ensure the value of the field is always set to\n// the property. This will ensure the model is updated to the selected value.\nonMounted(() => {\n    const slot = useSlots().default;\n\n    if(!slot) {\n        return;\n    }\n\n    for(const child of slot()) {\n        if(!child.props) {\n            return;\n        }\n        \n        if('selected' in child.props && (child.props.value ?? child.children)) {\n            model.value = child.props.value ?? child.children;\n        }\n    }\n});\n</script>\n\n<script lang=\"ts\">\nexport type SelectFieldControlSizePrefix = 'form-select';\n\nexport type SelectFieldProps<ModelValue, Value> = FormControlProps<\n    SelectHTMLAttributes, \n    SelectFieldControlSizePrefix, \n    ModelValue, \n    Value\n>;\n</script>\n\n<template>\n    <div\n        ref=\"wrapper\"\n        class=\"select-field\"\n        :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"props.label\"\n                ref=\"label\"\n                :for=\"controlAttributes.id\"\n                :class=\"labelClass\"\n                @click=\"field?.click()\">\n                {{ props.label }}\n            </label>\n        </slot>\n\n        <div class=\"form-control-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ controlAttributes, listeners }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-control-inner-icon\"\n                    @click=\"field?.focus()\">\n                    <slot name=\"icon\" />\n                </div>\n                <select\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"{...controlAttributes, ...listeners}\">\n                    <slot />\n                </select>\n            </slot>\n            \n            <div class=\"form-control-activity-indicator\">\n                <slot name=\"activity\">\n                    <Transition name=\"select-field-fade\">\n                        <ActivityIndicator\n                            v-if=\"props.activity && indicator\"\n                            key=\"activity\"\n                            ref=\"activity\"\n                            :type=\"indicator\"\n                            :size=\"indicatorSize\" />\n                    </Transition>\n                </slot>\n            </div>    \n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id, name }\">        \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"id && String(id)\"\n                v-slot=\"{ error }\"\n                :name=\"name && String(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":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","activity","useTemplateRef","help","label","field","wrapper","__expose","onMounted","slot","useSlots","child","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_cache","$event","_toDisplayString","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":"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"}

package/dist/select-field.umd.cjs

@@ -1,2 +1,2 @@
-(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,f,a){"use strict";const m=["for"],y={class:"form-control-inner"},k={class:"form-control-activity-indicator"},u={invalid:"",class:"invalid-feedback"},b={valid:"",class:"valid-feedback"},h=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:{},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,{emit:S}){const V=t,i=e.useModel(t,"modelValue"),C=S,{controlAttributes:c,formGroupClasses:B,listeners:s}=a.useFormControl({model:i,props:V,emit:C}),d=e.useTemplateRef("field");return 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)&&(i.value=o.props.value??o.children)}}),(r,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select-field",e.unref(B)])},[e.renderSlot(r.$slots,"label",{},()=>[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:e.unref(c).id,class:e.normalizeClass(t.labelClass),onClick:o[0]||(o[0]=n=>d.value?.click())},e.toDisplayString(t.label),11,m)):e.createCommentVNode("",!0)]),e.createElementVNode("div",y,[e.renderSlot(r.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(c),listeners:e.unref(s)})),()=>[r.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:o[1]||(o[1]=n=>d.value?.focus())},[e.renderSlot(r.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({ref_key:"field",ref:d,"onUpdate:modelValue":o[2]||(o[2]=n=>i.value=n)},{...e.unref(c),...e.unref(s)}),[e.renderSlot(r.$slots,"default")],16),[[e.vModelSelect,i.value]])]),e.createElementVNode("div",k,[e.renderSlot(r.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[t.activity&&t.indicator?(e.openBlock(),e.createBlock(e.unref(f.ActivityIndicator),{key:"activity",ref:"activity",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(a.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",u,[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(a.FormControlFeedback),{feedback:t.feedback},{default:e.withCtx(({feedback:n})=>[e.createElementVNode("div",b,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:"help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});l.SelectField=h,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+(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

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, onMounted, SelectHTMLAttributes, useSlots, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {\n    formControlClass: 'form-select',\n    labelClass: 'form-label'\n});\n\ndefineOptions({\n    inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {\n    default: () => unknown\n}>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners,\n} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst field = useTemplateRef<HTMLSelectElement>('field');\n\n// Check the option slots for selected options. If the field has hardcoded\n// selected options, this will ensure the value of the field is always set to\n// the property. This will ensure the model is updated to the selected value.\nonMounted(() => {\n    const slot = useSlots().default;\n\n    if(!slot) {\n        return;\n    }\n\n    for(const child of slot()) {\n        if(!child.props) {\n            return;\n        }\n        \n        if('selected' in child.props && (child.props.value ?? child.children)) {\n            model.value = child.props.value ?? child.children;\n        }\n    }\n});\n</script>\n\n<script lang=\"ts\">\nexport type SelectFieldControlSizePrefix = 'form-select';\n\nexport type SelectFieldProps<ModelValue, Value> = FormControlProps<\n    SelectHTMLAttributes, \n    SelectFieldControlSizePrefix, \n    ModelValue, \n    Value\n>;\n</script>\n\n<template>\n    <div\n        class=\"select-field\"\n        :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :for=\"controlAttributes.id\"\n                :class=\"labelClass\"\n                @click=\"field?.click()\">\n                {{ label }}\n            </label>\n        </slot>\n\n        <div class=\"form-control-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ controlAttributes, listeners }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-control-inner-icon\"\n                    @click=\"field?.focus()\">\n                    <slot name=\"icon\" />\n                </div>\n                <select\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"{...controlAttributes, ...listeners}\">\n                    <slot />\n                </select>\n            </slot>\n            \n            <div class=\"form-control-activity-indicator\">\n                <slot name=\"activity\">\n                    <Transition name=\"select-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        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id, name }\">        \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"id && String(id)\"\n                v-slot=\"{ error }\"\n                :name=\"name && String(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":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","field","useTemplateRef","onMounted","slot","useSlots","child","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_cache","$event","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"select-field.umd.cjs","sources":["../src/SelectField.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"ModelValue, Value\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';\nimport { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';\nimport { InputHTMLAttributes, onMounted, SelectHTMLAttributes, useSlots, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {\n    formControlClass: 'form-select',\n    labelClass: 'form-label',\n    size: 'form-select-md'\n});\n\ndefineOptions({\n    inheritAttrs: false\n});\n\nconst model = defineModel<ModelValue>();\n\ndefineSlots<FormControlSlots<SelectFieldControlSizePrefix,ModelValue> & {\n    default: () => unknown\n}>();\n\nconst emit = defineEmits<FormControlEvents>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners,\n} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });\n\nconst activity = useTemplateRef<InstanceType<typeof ActivityIndicator>>('activity');\nconst help = useTemplateRef<HTMLElement>('help');\nconst label = useTemplateRef<HTMLLabelElement>('label');\nconst field = useTemplateRef<HTMLSelectElement>('field');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\ndefineExpose({\n    activity,\n    help,\n    field,\n    label,\n    wrapper,\n    focus: () => field.value?.focus(),\n    blur: () => field.value?.blur(),\n});\n\n// Check the option slots for selected options. If the field has hardcoded\n// selected options, this will ensure the value of the field is always set to\n// the property. This will ensure the model is updated to the selected value.\nonMounted(() => {\n    const slot = useSlots().default;\n\n    if(!slot) {\n        return;\n    }\n\n    for(const child of slot()) {\n        if(!child.props) {\n            return;\n        }\n        \n        if('selected' in child.props && (child.props.value ?? child.children)) {\n            model.value = child.props.value ?? child.children;\n        }\n    }\n});\n</script>\n\n<script lang=\"ts\">\nexport type SelectFieldControlSizePrefix = 'form-select';\n\nexport type SelectFieldProps<ModelValue, Value> = FormControlProps<\n    SelectHTMLAttributes, \n    SelectFieldControlSizePrefix, \n    ModelValue, \n    Value\n>;\n</script>\n\n<template>\n    <div\n        ref=\"wrapper\"\n        class=\"select-field\"\n        :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"props.label\"\n                ref=\"label\"\n                :for=\"controlAttributes.id\"\n                :class=\"labelClass\"\n                @click=\"field?.click()\">\n                {{ props.label }}\n            </label>\n        </slot>\n\n        <div class=\"form-control-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ controlAttributes, listeners }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-control-inner-icon\"\n                    @click=\"field?.focus()\">\n                    <slot name=\"icon\" />\n                </div>\n                <select\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind=\"{...controlAttributes, ...listeners}\">\n                    <slot />\n                </select>\n            </slot>\n            \n            <div class=\"form-control-activity-indicator\">\n                <slot name=\"activity\">\n                    <Transition name=\"select-field-fade\">\n                        <ActivityIndicator\n                            v-if=\"props.activity && indicator\"\n                            key=\"activity\"\n                            ref=\"activity\"\n                            :type=\"indicator\"\n                            :size=\"indicatorSize\" />\n                    </Transition>\n                </slot>\n            </div>    \n        </div>\n\n        <slot\n            name=\"errors\"\n            v-bind=\"{ error, errors, id, name }\">        \n            <FormControlErrors\n                v-if=\"!!(error || errors)\"\n                :id=\"id && String(id)\"\n                v-slot=\"{ error }\"\n                :name=\"name && String(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":["props","__props","model","_useModel","emit","__emit","controlAttributes","formGroupClasses","listeners","useFormControl","activity","useTemplateRef","help","label","field","wrapper","__expose","onMounted","slot","useSlots","child","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_cache","$event","_toDisplayString","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5"],"mappings":"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"}

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

@@ -51,20 +51,45 @@ declare const _default: <ModelValue, Value>(__VLS_props: NonNullable<Awaited<typ
         helpText?: string;
         id?: string;
         indicator?: import('vue').Component;
-        indicatorSize?: import('@vue-interface/activity-indicator').ActivityIndicatorSize;
+        indicatorSize?: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
         invalid?: boolean;
         label?: string;
         labelClass?: string;
         modelValue?: ModelValue | undefined;
         name?: string;
         plaintext?: boolean;
-        size?: import('@vue-interface/form-control').FormControlSize<"form-select", import('@vue-interface/form-control').PredeterminedSize> | undefined;
+        size?: import('@vue-interface/form-control').FormControlSize<"form-select"> | undefined;
         color?: string;
         readonly?: boolean;
         valid?: boolean;
         value?: Value | undefined;
     } & Omit<SelectHTMLAttributes, "size">) & Partial<{}>> & import('vue').PublicProps;
-    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    expose(exposed: import('vue').ShallowUnwrapRef<{
+        activity: Readonly<import('vue').ShallowRef<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            size?: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
+            type: import('vue').Component;
+        }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            size: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            size?: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
+            type: import('vue').Component;
+        }> & Readonly<{}>, {}, {}, {}, {}, {
+            size: import('@vue-interface/sizeable').ComponentSize<import('@vue-interface/activity-indicator').ActivityIndicatorSizePrefix>;
+        }> | null>>;
+        help: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
+        field: Readonly<import('vue').ShallowRef<HTMLSelectElement | null>>;
+        label: Readonly<import('vue').ShallowRef<HTMLLabelElement | null>>;
+        wrapper: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+        focus: () => void | undefined;
+        blur: () => void | undefined;
+    }>): void;
     attrs: any;
     slots: Readonly<FormControlSlots<"form-select", ModelValue> & {
         default: () => unknown;

package/dist/vite.config.d.ts

@@ -0,0 +1,3 @@
+import { ConfigEnv } from 'vite';
+declare const _default: ({ command }: ConfigEnv) => import('vite').UserConfig;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/select-field",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "A Vue select field component.",
   "type": "module",
   "main": "./dist/select-field.umd.cjs",
@@ -45,8 +45,8 @@
   ],
   "peerDependencies": {
     "vue": "^3.3.4",
-    "@vue-interface/activity-indicator": "3.0.6",
-    "@vue-interface/form-control": "2.0.16"
+    "@vue-interface/activity-indicator": "3.0.7",
+    "@vue-interface/form-control": "2.0.18"
   },
   "scripts": {
     "dev": "vite",

package/src/SelectField.vue

@@ -6,7 +6,8 @@ import { InputHTMLAttributes, onMounted, SelectHTMLAttributes, useSlots, useTemp
 
 const props = withDefaults(defineProps<SelectFieldProps<ModelValue,Value>>(), {
     formControlClass: 'form-select',
-    labelClass: 'form-label'
+    labelClass: 'form-label',
+    size: 'form-select-md'
 });
 
 defineOptions({
@@ -27,7 +28,21 @@ const {
     listeners,
 } = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue|undefined, Value>({ model, props, emit });
 
+const activity = useTemplateRef<InstanceType<typeof ActivityIndicator>>('activity');
+const help = useTemplateRef<HTMLElement>('help');
+const label = useTemplateRef<HTMLLabelElement>('label');
 const field = useTemplateRef<HTMLSelectElement>('field');
+const wrapper = useTemplateRef<HTMLDivElement>('wrapper');
+
+defineExpose({
+    activity,
+    help,
+    field,
+    label,
+    wrapper,
+    focus: () => field.value?.focus(),
+    blur: () => field.value?.blur(),
+});
 
 // Check the option slots for selected options. If the field has hardcoded
 // selected options, this will ensure the value of the field is always set to
@@ -64,16 +79,17 @@ export type SelectFieldProps<ModelValue, Value> = FormControlProps<
 
 <template>
     <div
+        ref="wrapper"
         class="select-field"
         :class="formGroupClasses">
         <slot name="label">
             <label
-                v-if="label"
+                v-if="props.label"
                 ref="label"
                 :for="controlAttributes.id"
                 :class="labelClass"
                 @click="field?.click()">
-                {{ label }}
+                {{ props.label }}
             </label>
         </slot>
 
@@ -99,7 +115,7 @@ export type SelectFieldProps<ModelValue, Value> = FormControlProps<
                 <slot name="activity">
                     <Transition name="select-field-fade">
                         <ActivityIndicator
-                            v-if="activity && indicator"
+                            v-if="props.activity && indicator"
                             key="activity"
                             ref="activity"
                             :type="indicator"