@vue-interface/select-field 1.0.0-beta.9 → 2.0.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Justin Kimbrell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,34 @@
+# Select Field
+
+The `select-field` component provides flexible and customizable select dropdown fields with customizable sizes and states.
+
+## Installation
+
+```bash
+pnpm i @vue-interface/select-field
+```
+
+```bash
+yarn add @vue-interface/select-field
+```
+
+```bash
+npm i @vue-interface/select-field
+```
+
+```bash
+bun i @vue-interface/select-field
+```
+
+## Basic Usage
+
+```vue
+<SelectField v-model="value" label="Regular Field" tabindex="1">
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+</SelectField>
+```
+
+For more comprehensive documentation and examples, please visit the [online documentation](https://vue-interface.github.io/packages/select-field/).
+

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import SelectField from './src/SelectField.vue';
+import { default as SelectField } from './src/SelectField.vue';
 export { SelectField };

package/dist/select-field.js

@@ -1,125 +1,141 @@
-import { ActivityIndicator as g } from "@vue-interface/activity-indicator";
-import { FormControl as S } from "@vue-interface/form-control";
-import { defineComponent as z, resolveComponent as m, resolveDirective as E, openBlock as t, createElementBlock as l, normalizeClass as b, renderSlot as o, toDisplayString as i, createCommentVNode as n, createElementVNode as a, normalizeProps as c, guardReactiveProps as f, withDirectives as V, mergeProps as A, vModelSelect as N, createVNode as k, Transition as T, withCtx as p, createBlock as y, createTextVNode as B } from "vue";
-const D = z({
-  name: "SelectField",
-  components: {
-    ActivityIndicator: g
-  },
-  extends: S,
-  props: {
-    /**
-     * The default class name assigned to the control element
-     *
-     * @param {String}
-     * @default 'form-select'
-     */
-    formControlClass: {
-      type: String,
-      default: "form-select"
-    }
-  },
-  computed: {
-    controlClass() {
-      return this.plaintext ? `${this.formControlClass}-plaintext` : this.formControlClass;
-    }
-  }
-});
-const P = (e, s) => {
-  const d = e.__vccOpts || e;
-  for (const [u, v] of s)
-    d[u] = v;
-  return d;
-}, w = ["for"], O = { class: "form-group-inner" }, j = {
+import { defineComponent as M, mergeModels as h, useModel as T, ref as F, onMounted as A, useSlots as N, createElementBlock as c, openBlock as n, normalizeClass as C, unref as t, renderSlot as r, createElementVNode as a, createCommentVNode as s, toDisplayString as u, normalizeProps as m, guardReactiveProps as f, withDirectives as E, mergeProps as P, vModelSelect as x, createVNode as S, Transition as D, withCtx as k, createBlock as V, createTextVNode as G } from "vue";
+import { ActivityIndicator as I } from "@vue-interface/activity-indicator";
+import { useFormControl as L, FormControlErrors as R, FormControlFeedback as U } from "@vue-interface/form-control";
+const j = ["for"], p = { class: "form-control-inner" }, q = { class: "form-control-activity-indicator" }, H = {
   invalid: "",
   class: "invalid-feedback"
-}, G = /* @__PURE__ */ a("br", null, null, -1), I = {
+}, J = {
   valid: "",
   class: "valid-feedback"
-};
-function M(e, s, d, u, v, R) {
-  const C = m("activity-indicator"), $ = m("FormControlErrors"), h = m("FormControlFeedback"), F = E("bind-events");
-  return t(), l("div", {
-    class: b(e.formGroupClasses)
-  }, [
-    o(e.$slots, "label", {}, () => [
-      e.label ? (t(), l("label", {
-        key: 0,
-        ref: "label",
-        for: e.id,
-        class: b(e.labelClass)
-      }, i(e.label), 11, w)) : n("", !0)
-    ]),
-    a("div", O, [
-      o(e.$slots, "control", c(f({ bindEvents: e.bindEvents, controlAttributes: e.controlAttributes })), () => [
-        e.$slots.icon ? (t(), l("div", {
+}, W = /* @__PURE__ */ M({
+  inheritAttrs: !1,
+  __name: "SelectField",
+  props: /* @__PURE__ */ h({
+    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: /* @__PURE__ */ h(["update:modelValue", "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: $ }) {
+    const B = e, d = T(e, "modelValue"), g = $, {
+      controlAttributes: v,
+      formGroupClasses: w,
+      listeners: b
+    } = L({ model: d, props: B, emit: g }), y = F();
+    function z(o) {
+      b.onClick(o), y.value?.focus();
+    }
+    return A(() => {
+      const o = N().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);
+        }
+    }), (o, l) => (n(), c("div", {
+      class: C(["select-field", t(w)])
+    }, [
+      r(o.$slots, "label", {}, () => [
+        e.label ? (n(), c("label", {
           key: 0,
-          class: "form-group-inner-icon",
-          onClick: s[0] || (s[0] = (...r) => e.focus && e.focus(...r))
-        }, [
-          o(e.$slots, "icon")
-        ])) : n("", !0),
-        V((t(), l("select", A({
-          ref: "field",
-          "onUpdate:modelValue": s[1] || (s[1] = (r) => e.model = r)
-        }, Object.assign({
-          disabled: e.$attrs.readonly
-        }, e.controlAttributes)), [
-          o(e.$slots, "default")
-        ], 16)), [
-          [N, e.model],
-          [F]
+          ref: "label",
+          for: t(v).id,
+          class: C(e.labelClass),
+          onMousedown: z
+        }, u(e.label), 43, j)) : s("", !0)
+      ]),
+      a("div", p, [
+        r(o.$slots, "control", m(f({ controlAttributes: t(v), listeners: t(b) })), () => [
+          o.$slots.icon ? (n(), c("div", {
+            key: 0,
+            class: "form-control-inner-icon",
+            onClick: l[0] || (l[0] = (i) => y.value?.focus())
+          }, [
+            r(o.$slots, "icon")
+          ])) : s("", !0),
+          E(a("select", P({
+            ref_key: "field",
+            ref: y,
+            "onUpdate:modelValue": l[1] || (l[1] = (i) => d.value = i)
+          }, { ...t(v), ...t(b) }), [
+            r(o.$slots, "default")
+          ], 16), [
+            [x, d.value]
+          ])
+        ]),
+        a("div", q, [
+          r(o.$slots, "activity", {}, () => [
+            S(D, { name: "select-field-fade" }, {
+              default: k(() => [
+                e.activity && e.indicator ? (n(), V(t(I), {
+                  key: "activity",
+                  ref: "activity",
+                  type: e.indicator,
+                  size: e.indicatorSize
+                }, null, 8, ["type", "size"])) : s("", !0)
+              ]),
+              _: 1
+            })
+          ])
         ])
       ]),
-      o(e.$slots, "activity", {}, () => [
-        k(T, { name: "select-field-fade" }, {
-          default: p(() => [
-            e.activity ? (t(), y(C, {
-              key: "activity",
-              ref: "activity",
-              type: e.indicator,
-              size: e.indicatorSize || e.size
-            }, null, 8, ["type", "size"])) : n("", !0)
+      r(o.$slots, "errors", m(f({ error: e.error, errors: e.errors, id: e.id, name: e.name })), () => [
+        e.error || e.errors ? (n(), V(t(R), {
+          key: 0,
+          id: e.id && String(e.id),
+          name: e.name && String(e.name),
+          error: e.error,
+          errors: e.errors
+        }, {
+          default: k(({ error: i }) => [
+            a("div", H, [
+              G(u(i), 1),
+              l[2] || (l[2] = a("br", null, null, -1))
+            ])
           ]),
           _: 1
-        })
+        }, 8, ["id", "name", "error", "errors"])) : s("", !0)
+      ]),
+      r(o.$slots, "feedback", m(f({ feedback: e.feedback })), () => [
+        S(t(U), { feedback: e.feedback }, {
+          default: k(({ feedback: i }) => [
+            a("div", J, u(i), 1)
+          ]),
+          _: 1
+        }, 8, ["feedback"])
+      ]),
+      r(o.$slots, "help", m(f({ helpText: e.helpText })), () => [
+        e.helpText ? (n(), c("small", {
+          key: 0,
+          ref: "help"
+        }, u(e.helpText), 513)) : s("", !0)
       ])
-    ]),
-    o(e.$slots, "errors", c(f({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
-      e.error || e.errors ? (t(), y($, {
-        key: 0,
-        id: e.$attrs.id,
-        name: e.$attrs.name,
-        error: e.error,
-        errors: e.errors
-      }, {
-        default: p(({ error: r }) => [
-          a("div", j, [
-            B(i(r), 1),
-            G
-          ])
-        ]),
-        _: 1
-      }, 8, ["id", "name", "error", "errors"])) : n("", !0)
-    ]),
-    o(e.$slots, "feedback", c(f({ feedback: e.feedback })), () => [
-      k(h, { feedback: e.feedback }, {
-        default: p(({ feedback: r }) => [
-          a("div", I, i(r), 1)
-        ]),
-        _: 1
-      }, 8, ["feedback"])
-    ]),
-    o(e.$slots, "help", {}, () => [
-      e.helpText ? (t(), l("small", {
-        key: 0,
-        ref: "help"
-      }, i(e.helpText), 513)) : n("", !0)
-    ])
-  ], 2);
-}
-const J = /* @__PURE__ */ P(D, [["render", M]]);
+    ], 2));
+  }
+});
 export {
-  J as SelectField
+  W 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 lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { FormControl } from '@vue-interface/form-control';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n    name: 'SelectField',\n\n    components: {\n        ActivityIndicator,\n    },\n\n    extends: FormControl,\n\n    props: {\n        /**\n         * The default class name assigned to the control element\n         *\n         * @param {String}\n         * @default 'form-select'\n         */\n        formControlClass: {\n            type: String,\n            default: 'form-select'\n        }   \n    },\n\n    computed: {\n        controlClass() {\n            return this.plaintext ?\n                `${this.formControlClass}-plaintext`\n                : this.formControlClass;\n        }\n    }\n\n});\n</script>\n\n<template>\n    <div :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :for=\"id\"\n                :class=\"labelClass\">\n                {{ label }}\n            </label>\n        </slot>\n\n        <div class=\"form-group-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ bindEvents, controlAttributes }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-group-inner-icon\"\n                    @click=\"focus\">\n                    <slot name=\"icon\" />\n                </div>\n                <select\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind-events\n                    v-bind=\"Object.assign({\n                        ['disabled']: $attrs.readonly\n                    }, controlAttributes)\">\n                    <slot />\n                </select>\n            </slot>\n\n            <slot name=\"activity\">\n                <transition name=\"select-field-fade\">\n                    <activity-indicator\n                        v-if=\"activity\"\n                        key=\"activity\"\n                        ref=\"activity\"\n                        :type=\"indicator\"\n                        :size=\"indicatorSize || size\" />\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\"\n                v-slot=\"{ error }\"\n                :name=\"$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 name=\"help\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>\n\n<style>\n.select-field,\n.select-field .form-group-inner {\n    position: relative;\n    transition: all .25s ease-in-out;\n}\n\n.select-field .activity-indicator {\n    position: absolute;\n    right: 1.25em;\n    top: 50%;\n    transform: translate(-1rem, -50%);\n    transition: all .15s ease-in;\n}\n\n.select-field .activity-indicator-xs {\n    font-size: .5em;\n    right: 2em;\n}\n\n.select-field.has-activity .form-control-xs {\n    padding-right: 3.75em;\n}\n\n.select-field .activity-indicator-sm {\n    font-size: .5em;\n    right: 2em;\n}\n\n.select-field.has-activity .form-control-sm {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-md {\n    font-size: .666em;\n}\n\n.select-field.has-activity .form-control-md {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-lg {\n    font-size: .75em;\n}\n\n.select-field.has-activity .form-control-lg {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-xl {\n    font-size: 1em;\n}\n\n.select-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n    padding-right: 3.75em;\n}\n\n.select-field .activity-indicator {\n    opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n    opacity: 0;\n}\n\n.select-field.is-valid .valid-feedback,\n.select-field.is-invalid .invalid-feedback {\n    display: flex;\n}\n\n.select-field .form-control-icon {\n    padding-left: 2em;\n}\n\n.select-field .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666em;\n    width: 1rem;\n    font-size: 1em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field-sm .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666rem;\n    width: .75em;\n    font-size: 1.5em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field-lg .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666rem;\n    width: 1.25em;\n    font-size: 1em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field .activity-indicator {\n    opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n    opacity: 0;\n}\n</style>\n\n"],"names":["_sfc_main","defineComponent","ActivityIndicator","FormControl","_hoisted_2","_hoisted_3","_hoisted_4","_createElementVNode","_hoisted_5","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_cache","args","_withDirectives","_mergeProps","$event","_createVNode","_Transition","_withCtx","_createBlock","_component_activity_indicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"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, ref, SelectHTMLAttributes, useSlots } 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<ModelValue>>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners,\n} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });\n\nconst field = ref<HTMLSelectElement>();\n\nfunction onMousedownLabel(e: MouseEvent) {\n    listeners.onClick(e);\n\n    field.value?.focus();\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        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                @mousedown=\"onMousedownLabel\">\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","ref","onMousedownLabel","e","onMounted","slot","useSlots","child","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_cache","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5","_toDisplayString"],"mappings":"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"}

package/dist/select-field.umd.cjs

@@ -1,2 +1,2 @@
-(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@vue-interface/activity-indicator"),require("@vue-interface/form-control"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@vue-interface/activity-indicator","@vue-interface/form-control","vue"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r.SelectField={},r.ActivityIndicator,r.FormControl,r.Vue))})(this,function(r,i,d,e){"use strict";const c=e.defineComponent({name:"SelectField",components:{ActivityIndicator:i.ActivityIndicator},extends:d.FormControl,props:{formControlClass:{type:String,default:"form-select"}},computed:{controlClass(){return this.plaintext?`${this.formControlClass}-plaintext`:this.formControlClass}}}),g="",m=(o,n)=>{const l=o.__vccOpts||o;for(const[s,a]of n)l[s]=a;return l},p=["for"],f={class:"form-group-inner"},k={invalid:"",class:"invalid-feedback"},y=e.createElementVNode("br",null,null,-1),C={valid:"",class:"valid-feedback"};function b(o,n,l,s,a,E){const $=e.resolveComponent("activity-indicator"),h=e.resolveComponent("FormControlErrors"),B=e.resolveComponent("FormControlFeedback"),V=e.resolveDirective("bind-events");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(o.formGroupClasses)},[e.renderSlot(o.$slots,"label",{},()=>[o.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:o.id,class:e.normalizeClass(o.labelClass)},e.toDisplayString(o.label),11,p)):e.createCommentVNode("",!0)]),e.createElementVNode("div",f,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({bindEvents:o.bindEvents,controlAttributes:o.controlAttributes})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:n[0]||(n[0]=(...t)=>o.focus&&o.focus(...t))},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createElementBlock("select",e.mergeProps({ref:"field","onUpdate:modelValue":n[1]||(n[1]=t=>o.model=t)},Object.assign({disabled:o.$attrs.readonly},o.controlAttributes)),[e.renderSlot(o.$slots,"default")],16)),[[e.vModelSelect,o.model],[V]])]),e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[o.activity?(e.openBlock(),e.createBlock($,{key:"activity",ref:"activity",type:o.indicator,size:o.indicatorSize||o.size},null,8,["type","size"])):e.createCommentVNode("",!0)]),_:1})])]),e.renderSlot(o.$slots,"errors",e.normalizeProps(e.guardReactiveProps({error:o.error,errors:o.errors,id:o.$attrs.id,name:o.$attrs.name})),()=>[o.error||o.errors?(e.openBlock(),e.createBlock(h,{key:0,id:o.$attrs.id,name:o.$attrs.name,error:o.error,errors:o.errors},{default:e.withCtx(({error:t})=>[e.createElementVNode("div",k,[e.createTextVNode(e.toDisplayString(t),1),y])]),_:1},8,["id","name","error","errors"])):e.createCommentVNode("",!0)]),e.renderSlot(o.$slots,"feedback",e.normalizeProps(e.guardReactiveProps({feedback:o.feedback})),()=>[e.createVNode(B,{feedback:o.feedback},{default:e.withCtx(({feedback:t})=>[e.createElementVNode("div",C,e.toDisplayString(t),1)]),_:1},8,["feedback"])]),e.renderSlot(o.$slots,"help",{},()=>[o.helpText?(e.openBlock(),e.createElementBlock("small",{key:0,ref:"help"},e.toDisplayString(o.helpText),513)):e.createCommentVNode("",!0)])],2)}const S=m(c,[["render",b]]);r.SelectField=S,Object.defineProperty(r,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,f,a){"use strict";const m=["for"],u={class:"form-control-inner"},y={class:"form-control-activity-indicator"},k={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(["update:modelValue","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:d}=a.useFormControl({model:i,props:V,emit:C}),s=e.ref();function p(o){d.onClick(o),s.value?.focus()}return e.onMounted(()=>{const o=e.useSlots().default;if(o)for(const r of o()){if(!r.props)return;"selected"in r.props&&(r.props.value??r.children)&&(i.value=r.props.value??r.children)}}),(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["select-field",e.unref(B)])},[e.renderSlot(o.$slots,"label",{},()=>[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,ref:"label",for:e.unref(c).id,class:e.normalizeClass(t.labelClass),onMousedown:p},e.toDisplayString(t.label),43,m)):e.createCommentVNode("",!0)]),e.createElementVNode("div",u,[e.renderSlot(o.$slots,"control",e.normalizeProps(e.guardReactiveProps({controlAttributes:e.unref(c),listeners:e.unref(d)})),()=>[o.$slots.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"form-control-inner-icon",onClick:r[0]||(r[0]=n=>s.value?.focus())},[e.renderSlot(o.$slots,"icon")])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({ref_key:"field",ref:s,"onUpdate:modelValue":r[1]||(r[1]=n=>i.value=n)},{...e.unref(c),...e.unref(d)}),[e.renderSlot(o.$slots,"default")],16),[[e.vModelSelect,i.value]])]),e.createElementVNode("div",y,[e.renderSlot(o.$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(o.$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",k,[e.createTextVNode(e.toDisplayString(n),1),r[2]||(r[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(a.FormControlFeedback),{feedback:t.feedback},{default:e.withCtx(({feedback:n})=>[e.createElementVNode("div",b,e.toDisplayString(n),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:"help"},e.toDisplayString(t.helpText),513)):e.createCommentVNode("",!0)])],2))}});l.SelectField=h,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 lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { FormControl } from '@vue-interface/form-control';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n    name: 'SelectField',\n\n    components: {\n        ActivityIndicator,\n    },\n\n    extends: FormControl,\n\n    props: {\n        /**\n         * The default class name assigned to the control element\n         *\n         * @param {String}\n         * @default 'form-select'\n         */\n        formControlClass: {\n            type: String,\n            default: 'form-select'\n        }   \n    },\n\n    computed: {\n        controlClass() {\n            return this.plaintext ?\n                `${this.formControlClass}-plaintext`\n                : this.formControlClass;\n        }\n    }\n\n});\n</script>\n\n<template>\n    <div :class=\"formGroupClasses\">\n        <slot name=\"label\">\n            <label\n                v-if=\"label\"\n                ref=\"label\"\n                :for=\"id\"\n                :class=\"labelClass\">\n                {{ label }}\n            </label>\n        </slot>\n\n        <div class=\"form-group-inner\">\n            <slot\n                name=\"control\"\n                v-bind=\"{ bindEvents, controlAttributes }\">\n                <div\n                    v-if=\"$slots.icon\"\n                    class=\"form-group-inner-icon\"\n                    @click=\"focus\">\n                    <slot name=\"icon\" />\n                </div>\n                <select\n                    ref=\"field\"\n                    v-model=\"model\"\n                    v-bind-events\n                    v-bind=\"Object.assign({\n                        ['disabled']: $attrs.readonly\n                    }, controlAttributes)\">\n                    <slot />\n                </select>\n            </slot>\n\n            <slot name=\"activity\">\n                <transition name=\"select-field-fade\">\n                    <activity-indicator\n                        v-if=\"activity\"\n                        key=\"activity\"\n                        ref=\"activity\"\n                        :type=\"indicator\"\n                        :size=\"indicatorSize || size\" />\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\"\n                v-slot=\"{ error }\"\n                :name=\"$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 name=\"help\">\n            <small\n                v-if=\"helpText\"\n                ref=\"help\">\n                {{ helpText }}\n            </small>\n        </slot>\n    </div>\n</template>\n\n<style>\n.select-field,\n.select-field .form-group-inner {\n    position: relative;\n    transition: all .25s ease-in-out;\n}\n\n.select-field .activity-indicator {\n    position: absolute;\n    right: 1.25em;\n    top: 50%;\n    transform: translate(-1rem, -50%);\n    transition: all .15s ease-in;\n}\n\n.select-field .activity-indicator-xs {\n    font-size: .5em;\n    right: 2em;\n}\n\n.select-field.has-activity .form-control-xs {\n    padding-right: 3.75em;\n}\n\n.select-field .activity-indicator-sm {\n    font-size: .5em;\n    right: 2em;\n}\n\n.select-field.has-activity .form-control-sm {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-md {\n    font-size: .666em;\n}\n\n.select-field.has-activity .form-control-md {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-lg {\n    font-size: .75em;\n}\n\n.select-field.has-activity .form-control-lg {\n    padding-right: 3em;\n}\n\n.select-field .activity-indicator-xl {\n    font-size: 1em;\n}\n\n.select-field.has-activity .activity-indicator-xl ~ .form-control-xl {\n    padding-right: 3.75em;\n}\n\n.select-field .activity-indicator {\n    opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n    opacity: 0;\n}\n\n.select-field.is-valid .valid-feedback,\n.select-field.is-invalid .invalid-feedback {\n    display: flex;\n}\n\n.select-field .form-control-icon {\n    padding-left: 2em;\n}\n\n.select-field .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666em;\n    width: 1rem;\n    font-size: 1em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field-sm .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666rem;\n    width: .75em;\n    font-size: 1.5em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field-lg .form-group-inner-icon {\n    position: absolute;\n    top: 50%;\n    left: .666rem;\n    width: 1.25em;\n    font-size: 1em;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.select-field .activity-indicator {\n    opacity: 1;\n}\n\n.select-field .select-field-fade-enter,\n.select-field .select-field-fade-leave-to {\n    opacity: 0;\n}\n</style>\n\n"],"names":["_sfc_main","defineComponent","ActivityIndicator","FormControl","_hoisted_2","_hoisted_3","_hoisted_4","_createElementVNode","_hoisted_5","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_toDisplayString","_hoisted_1","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_cache","args","_withDirectives","_mergeProps","$event","_createVNode","_Transition","_withCtx","_createBlock","_component_activity_indicator","_component_FormControlErrors","_createTextVNode","error","_component_FormControlFeedback","feedback"],"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, ref, SelectHTMLAttributes, useSlots } 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<ModelValue>>();\n\nconst {\n    controlAttributes,\n    formGroupClasses,\n    listeners,\n} = useFormControl<InputHTMLAttributes, SelectFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });\n\nconst field = ref<HTMLSelectElement>();\n\nfunction onMousedownLabel(e: MouseEvent) {\n    listeners.onClick(e);\n\n    field.value?.focus();\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        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                @mousedown=\"onMousedownLabel\">\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","ref","onMousedownLabel","e","onMounted","slot","useSlots","child","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_hoisted_1","_createElementVNode","_hoisted_2","_normalizeProps","_guardReactiveProps","$slots","_cache","$event","_withDirectives","_mergeProps","_hoisted_3","_createVNode","_Transition","_createBlock","ActivityIndicator","FormControlErrors","_withCtx","error","_hoisted_4","FormControlFeedback","feedback","_hoisted_5","_toDisplayString"],"mappings":"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"}

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

@@ -1,589 +1,81 @@
-declare const _sfc_main: import("vue").DefineComponent<{
-    /**
-     * The default class name assigned to the control element
-     *
-     * @param {String}
-     * @default 'form-select'
-     */
-    formControlClass: {
-        type: StringConstructor;
-        default: string;
-    };
-}, unknown, unknown, {
-    controlClass(): any;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
-    activity: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    animated: {
-        type: BooleanConstructor;
-        default: () => any; /**
-         * The default class name assigned to the control element
-         *
-         * @param {String}
-         * @default 'form-select'
-         */
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    errors: {
-        type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    feedback: {
-        type: (StringConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    formControlClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: () => any;
-    };
-    group: {
-        type: BooleanConstructor;
-        default: () => any;
-    };
-    helpText: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    indicator: {
-        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
-        default: () => any;
-    };
-    indicatorSize: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    invalid: BooleanConstructor;
-    label: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    labelClass: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: () => any;
-    };
-    modelValue: {
-        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
-        default: () => undefined;
-    };
-    plaintext: BooleanConstructor;
-    size: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    valid: BooleanConstructor;
-}, unknown, {
-    currentValue: undefined;
-    hasChanged: boolean;
-    hasFocus: boolean;
-    isDirty: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-        activity: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        animated: {
-            type: BooleanConstructor;
-            default: () => any;
-        };
-        error: {
-            type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        errors: {
-            type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        feedback: {
-            type: (StringConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        formControlClass: {
-            type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-            default: () => any;
-        };
-        group: {
-            type: BooleanConstructor;
-            default: () => any;
-        };
-        helpText: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: undefined;
-        };
-        indicator: {
-            type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
-            default: () => any;
-        };
-        indicatorSize: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        invalid: BooleanConstructor;
-        label: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: undefined;
-        };
-        labelClass: {
-            type: (StringConstructor | ObjectConstructor)[];
-            default: () => any;
-        };
-        modelValue: {
-            type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
-            default: () => undefined;
-        };
-        plaintext: BooleanConstructor;
-        size: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        valid: BooleanConstructor;
-    }>> & {
-        onFocus?: ((...args: any[]) => any) | undefined;
-        onBlur?: ((...args: any[]) => any) | undefined;
-        onChange?: ((...args: any[]) => any) | undefined;
-        onClick?: ((...args: any[]) => any) | undefined;
-        onKeypress?: ((...args: any[]) => any) | undefined;
-        onKeyup?: ((...args: any[]) => any) | undefined;
-        onKeydown?: ((...args: any[]) => any) | undefined;
-        onProgress?: ((...args: any[]) => any) | undefined;
-        onPaste?: ((...args: any[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    }, {}, {}, {}, import("vue").MethodOptions, 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, {}, Readonly<import("vue").ExtractPropTypes<{
-        activity: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        animated: {
-            type: BooleanConstructor;
-            default: () => any;
-        };
-        error: {
-            type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        errors: {
-            type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        feedback: {
-            type: (StringConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        formControlClass: {
-            type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-            default: () => any;
-        };
-        group: {
-            type: BooleanConstructor;
-            default: () => any;
-        };
-        helpText: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: undefined;
-        };
-        indicator: {
-            type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
-            default: () => any;
-        };
-        indicatorSize: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        invalid: BooleanConstructor;
-        label: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: undefined;
-        };
-        labelClass: {
-            type: (StringConstructor | ObjectConstructor)[];
-            default: () => any;
-        };
-        modelValue: {
-            type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
-            default: () => undefined;
-        };
-        plaintext: BooleanConstructor;
-        size: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        valid: BooleanConstructor;
-    }>> & {
-        onFocus?: ((...args: any[]) => any) | undefined;
-        onBlur?: ((...args: any[]) => any) | undefined;
-        onChange?: ((...args: any[]) => any) | undefined;
-        onClick?: ((...args: any[]) => any) | undefined;
-        onKeypress?: ((...args: any[]) => any) | undefined;
-        onKeyup?: ((...args: any[]) => any) | undefined;
-        onKeydown?: ((...args: any[]) => any) | undefined;
-        onProgress?: ((...args: any[]) => any) | undefined;
-        onPaste?: ((...args: any[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    }, {}, false, {}, {
-        P: 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;
-            };
-        }>>;
-        B: {};
-        D: {};
-        C: {
-            shadowableClass(): {
-                [x: string]: boolean;
-            };
-        };
-        M: {};
-        Defaults: {
-            shadow: string | boolean;
-            dropShadow: string | boolean;
-            dropShadowableClassPrefix: string;
-            shadowableClassPrefix: string;
-        };
+import { FormControlProps, FormControlSlots } from '@vue-interface/form-control';
+import { SelectHTMLAttributes } from 'vue';
+export type SelectFieldControlSizePrefix = 'form-select';
+export type SelectFieldProps<ModelValue, Value> = FormControlProps<SelectHTMLAttributes, SelectFieldControlSizePrefix, ModelValue, Value>;
+declare const _default: <ModelValue, Value>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onInput?: ((event: Event) => any) | undefined;
+        readonly onSelect?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
+        readonly onFocusin?: ((event: FocusEvent) => any) | undefined;
+        readonly onFocusout?: ((event: FocusEvent) => any) | undefined;
+        readonly onClick?: ((event: MouseEvent) => any) | undefined;
+        readonly onDoubleclick?: ((event: MouseEvent) => any) | undefined;
+        readonly onContextmenu?: ((event: MouseEvent) => any) | undefined;
+        readonly onMousedown?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseup?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseover?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseout?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseenter?: ((event: MouseEvent) => any) | undefined;
+        readonly onMouseleave?: ((event: MouseEvent) => any) | undefined;
+        readonly onMousemove?: ((event: MouseEvent) => any) | undefined;
+        readonly onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+        readonly onKeyup?: ((event: KeyboardEvent) => any) | undefined;
+        readonly onKeypress?: ((event: KeyboardEvent) => any) | undefined;
+        readonly onSelectionchange?: ((event: Event) => any) | undefined;
+        readonly onInvalid?: ((event: Event) => any) | undefined;
+        readonly onSubmit?: ((event: Event) => any) | undefined;
+        readonly onReset?: ((event: Event) => any) | undefined;
+        readonly onScroll?: ((event: Event) => any) | undefined;
+        readonly onWheel?: ((event: WheelEvent) => any) | undefined;
+        readonly onCopy?: ((event: ClipboardEvent) => any) | undefined;
+        readonly onCut?: ((event: ClipboardEvent) => any) | undefined;
+        readonly onPaste?: ((event: ClipboardEvent) => any) | undefined;
+        readonly onTouchstart?: ((event: TouchEvent) => any) | undefined;
+        readonly onTouchend?: ((event: TouchEvent) => any) | undefined;
+        readonly onTouchmove?: ((event: TouchEvent) => any) | undefined;
+        readonly onTouchcancel?: ((event: TouchEvent) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly onBeforeinput?: ((event: Event) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onCopy" | "onCut" | "onPaste" | "onFocus" | "onFocusin" | "onFocusout" | "onBlur" | "onChange" | "onBeforeinput" | "onInput" | "onReset" | "onSubmit" | "onInvalid" | "onKeydown" | "onKeypress" | "onKeyup" | "onMousedown" | "onMouseenter" | "onMouseleave" | "onMousemove" | "onMouseout" | "onMouseover" | "onMouseup" | "onSelect" | "onScroll" | "onTouchcancel" | "onTouchend" | "onTouchmove" | "onTouchstart" | "onClick" | "onContextmenu" | "onWheel" | "onDoubleclick" | "onSelectionchange" | "onUpdate:modelValue"> & ({
+        modelValue?: ModelValue;
     } & {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, 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;
-        };
-    }>> & Readonly<import("vue").ExtractPropTypes<{
-        activity: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        animated: {
-            type: BooleanConstructor;
-            default: () => any;
-        };
-        error: {
-            type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        errors: {
-            type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        feedback: {
-            type: (StringConstructor | ArrayConstructor)[];
-            default: undefined;
-        };
-        formControlClass: {
-            type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-            default: () => any;
-        };
-        group: {
-            type: BooleanConstructor;
-            default: () => any;
-        };
-        helpText: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: undefined;
-        };
-        indicator: {
-            type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
-            default: () => any;
-        };
-        indicatorSize: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        invalid: BooleanConstructor;
-        label: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: undefined;
-        };
-        labelClass: {
-            type: (StringConstructor | ObjectConstructor)[];
-            default: () => any;
-        };
-        modelValue: {
-            type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
-            default: () => undefined;
-        };
-        plaintext: BooleanConstructor;
-        size: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        valid: BooleanConstructor;
-    }>> & {
-        onFocus?: ((...args: any[]) => any) | undefined;
-        onBlur?: ((...args: any[]) => any) | undefined;
-        onChange?: ((...args: any[]) => any) | undefined;
-        onClick?: ((...args: any[]) => any) | undefined;
-        onKeypress?: ((...args: any[]) => any) | undefined;
-        onKeyup?: ((...args: any[]) => any) | undefined;
-        onKeydown?: ((...args: any[]) => any) | undefined;
-        onProgress?: ((...args: any[]) => any) | undefined;
-        onPaste?: ((...args: any[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    }, {}, {}, {
-        shadowableClass(): {
-            [x: string]: boolean;
-        };
-    }, import("vue").MethodOptions, {
-        shadow: string | boolean;
-        dropShadow: string | boolean;
-        dropShadowableClassPrefix: string;
-        shadowableClassPrefix: string;
-    }>;
-}, {
-    model: {
-        get(): any;
-        set(value: any): void;
-    };
-    id(): string | undefined;
-    isEmpty(): boolean;
-    isInvalid(): boolean;
-    isValid(): boolean;
-    componentName(): any;
-    controlClass(): any;
-    controlAttributes(): any;
-    controlClasses(): any;
-    controlSizeClass(): string;
-    formGroupClasses(): {
-        [x: number]: boolean;
-        animated: any;
-        'form-group': any;
-        'has-activity': any;
-        'has-changed': any;
-        'has-focus': any;
-        'has-icon': boolean;
-        'is-dirty': any;
-        'is-empty': any;
-        'is-invalid': any;
-        'is-valid': any;
-    } & (false | {
-        [x: string]: boolean;
-    });
-    plaintextClass(): "form-control-plaintext";
-}, {
-    bindEvents(el: HTMLElement): void;
-    blur(): void;
-    focus(): void;
-    getFieldErrors(): any;
-    getModelValue(): any;
-    setModelValue(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, ("focus" | "blur" | "change" | "click" | "keypress" | "keyup" | "keydown" | "progress" | "paste" | "update:modelValue")[], "focus" | "blur" | "change" | "click" | "keypress" | "keyup" | "keydown" | "progress" | "paste" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    activity: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    animated: {
-        type: BooleanConstructor;
-        default: () => any;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    errors: {
-        type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    feedback: {
-        type: (StringConstructor | ArrayConstructor)[];
-        default: undefined;
-    };
-    formControlClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: () => any;
-    };
-    group: {
-        type: BooleanConstructor;
-        default: () => any;
-    };
-    helpText: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    indicator: {
-        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
-        default: () => any;
-    };
-    indicatorSize: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    invalid: BooleanConstructor;
-    label: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    labelClass: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: () => any;
-    };
-    modelValue: {
-        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
-        default: () => undefined;
-    };
-    plaintext: BooleanConstructor;
-    size: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    valid: BooleanConstructor;
-}>> & {
-    onFocus?: ((...args: any[]) => any) | undefined;
-    onBlur?: ((...args: any[]) => any) | undefined;
-    onChange?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
-    onKeypress?: ((...args: any[]) => any) | undefined;
-    onKeyup?: ((...args: any[]) => any) | undefined;
-    onKeydown?: ((...args: any[]) => any) | undefined;
-    onProgress?: ((...args: any[]) => any) | undefined;
-    onPaste?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
-    error: string | boolean | unknown[];
-    errors: boolean | unknown[] | Record<string, any>;
-    feedback: string | unknown[];
-    activity: boolean;
-    animated: boolean;
-    formControlClass: string | unknown[] | Record<string, any>;
-    group: boolean;
-    helpText: string | number;
-    indicator: string | boolean | Record<string, any>;
-    indicatorSize: string;
-    invalid: boolean;
-    label: string | number;
-    labelClass: string | Record<string, any>;
-    modelValue: string | number | boolean | unknown[] | Record<string, any>;
-    plaintext: boolean;
-    size: string;
-    valid: boolean;
-}>, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * The default class name assigned to the control element
-     *
-     * @param {String}
-     * @default 'form-select'
-     */
-    formControlClass: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    formControlClass: string;
-}>;
-export default _sfc_main;
+        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?: import('@vue-interface/activity-indicator').ActivityIndicatorSize;
+        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;
+        color?: string;
+        readonly?: boolean;
+        valid?: boolean;
+        value?: Value | undefined;
+    } & SelectHTMLAttributes) & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<FormControlSlots<"form-select", ModelValue> & {
+        default: () => unknown;
+    }> & FormControlSlots<"form-select", ModelValue> & {
+        default: () => unknown;
+    };
+    emit: (((evt: "input", event: Event) => void) & ((evt: "select", event: Event) => void) & ((evt: "update:modelValue", value: ModelValue) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "focusin", event: FocusEvent) => void) & ((evt: "focusout", event: FocusEvent) => void) & ((evt: "click", event: MouseEvent) => void) & ((evt: "doubleclick", event: MouseEvent) => void) & ((evt: "contextmenu", event: MouseEvent) => void) & ((evt: "mousedown", event: MouseEvent) => void) & ((evt: "mouseup", event: MouseEvent) => void) & ((evt: "mouseover", event: MouseEvent) => void) & ((evt: "mouseout", event: MouseEvent) => void) & ((evt: "mouseenter", event: MouseEvent) => void) & ((evt: "mouseleave", event: MouseEvent) => void) & ((evt: "mousemove", event: MouseEvent) => void) & ((evt: "keydown", event: KeyboardEvent) => void) & ((evt: "keyup", event: KeyboardEvent) => void) & ((evt: "keypress", event: KeyboardEvent) => void) & ((evt: "selectionchange", event: Event) => void) & ((evt: "invalid", event: Event) => void) & ((evt: "submit", event: Event) => void) & ((evt: "reset", event: Event) => void) & ((evt: "scroll", event: Event) => void) & ((evt: "wheel", event: WheelEvent) => void) & ((evt: "copy", event: ClipboardEvent) => void) & ((evt: "cut", event: ClipboardEvent) => void) & ((evt: "paste", event: ClipboardEvent) => void) & ((evt: "touchstart", event: TouchEvent) => void) & ((evt: "touchend", event: TouchEvent) => void) & ((evt: "touchmove", event: TouchEvent) => void) & ((evt: "touchcancel", event: TouchEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "beforeinput", event: Event) => void)) & ((evt: "update:modelValue", value: ModelValue) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "@vue-interface/form-control/css";
+@import "@vue-interface/activity-indicator/css";

package/package.json

@@ -1,32 +1,23 @@
 {
   "name": "@vue-interface/select-field",
-  "version": "1.0.0-beta.9",
+  "version": "2.0.1",
   "description": "A Vue select field component.",
-  "files": [
-    "dist"
-  ],
   "type": "module",
   "main": "./dist/select-field.umd.js",
   "module": "./dist/select-field.js",
-  "style": "./dist/style.css",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "source": "./index.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/select-field.js",
-      "require": "./dist/select-field.umd.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./dist/style.css": "./dist/style.css"
+      "require": "./dist/select-field.umd.js"
+    }
   },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vue-interface/select-field.git"
+    "url": "git+https://github.com/vue-interface/vue-interface.github.io"
   },
   "keywords": [
     "Select",
@@ -37,29 +28,26 @@
     "Bootstrap"
   ],
   "author": "Justin Kimbrell",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vue-interface/select-field/issues"
-  },
-  "homepage": "https://github.com/vue-interface/select-field/docs#readme",
-  "dependencies": {
-    "@vue-interface/activity-indicator": "^2.0.0-beta.11",
-    "@vue-interface/form-control": "^1.0.0-beta.15"
+    "url": "https://github.com/vue-interface/vue-interface.github.io"
   },
+  "homepage": "https://github.com/vue-interface/vue-interface",
+  "readme": "README.md",
+  "files": [
+    "dist",
+    "index.css",
+    "README.md",
+    "LICENSE"
+  ],
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.3.4",
+    "@vue-interface/activity-indicator": "3.0.1",
+    "@vue-interface/form-control": "2.0.1"
   },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
-    "autoprefixer": "^10.4.13",
-    "change-case": "^4.1.2",
-    "eslint": "^8.34.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "pascalcase": "^2.0.0",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
-    "vite": "^4.1.4",
-    "vite-plugin-dts": "^1.7.3",
-    "vue": "^3.2.47"
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   }
-}
+}

package/dist/style.css

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