@vue-interface/select-field 2.0.0 → 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

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

package/dist/select-field.js

@@ -0,0 +1,141 @@
+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"
+}, J = {
+  valid: "",
+  class: "valid-feedback"
+}, 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,
+          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
+            })
+          ])
+        ])
+      ]),
+      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)
+      ])
+    ], 2));
+  }
+});
+export {
+  W as SelectField
+};
+//# sourceMappingURL=select-field.js.map

package/dist/select-field.js.map

@@ -0,0 +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, 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

@@ -0,0 +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"],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

@@ -0,0 +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, 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

@@ -0,0 +1,81 @@
+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;
+    } & {
+        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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/select-field",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A Vue select field component.",
   "type": "module",
   "main": "./dist/select-field.umd.js",
@@ -17,7 +17,7 @@
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vue-interface/select-field"
+    "url": "git+https://github.com/vue-interface/vue-interface.github.io"
   },
   "keywords": [
     "Select",
@@ -28,15 +28,22 @@
     "Bootstrap"
   ],
   "author": "Justin Kimbrell",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vue-interface/select-field"
+    "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.3.4",
-    "@vue-interface/activity-indicator": "3.0.0",
-    "@vue-interface/form-control": "2.0.0"
+    "@vue-interface/activity-indicator": "3.0.1",
+    "@vue-interface/form-control": "2.0.1"
   },
   "scripts": {
     "dev": "vite",

package/CHANGELOG.md

@@ -1,12 +0,0 @@
-# @vue-interface/select-field
-
-## 2.0.0
-
-### Major Changes
-
-- 0da678a: Add support for TailwindCSS v4
-
-### Patch Changes
-
-- Updated dependencies [0da678a]
-  - @vue-interface/form-control@2.0.0

package/demo.css

@@ -1,12 +0,0 @@
-@import "tailwindcss";
-@import "./index.css";
-
-@source "../activity-indicator/src/**/*.vue";
-
-@variant dark {
-    body {
-        @apply text-white;
-    }
-}
-
-@custom-variant dark (&:where(.dark, .dark *));