@vue-interface/select-field 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/select-field.js

@@ -0,0 +1,130 @@
+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 C, Transition as T, withCtx as p, createBlock as k, 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.defaultControlClass}-plaintext` : this.defaultControlClass;
+    }
+  },
+  methods: {
+    shouldChangeOnFocus() {
+      return !1;
+    }
+  }
+});
+const O = (e, s) => {
+  const d = e.__vccOpts || e;
+  for (const [u, v] of s)
+    d[u] = v;
+  return d;
+}, P = ["for"], w = { class: "form-group-inner" }, j = {
+  invalid: "",
+  class: "invalid-feedback"
+}, G = /* @__PURE__ */ a("br", null, null, -1), I = {
+  valid: "",
+  class: "valid-feedback"
+};
+function M(e, s, d, u, v, R) {
+  const y = 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, P)) : n("", !0)
+    ]),
+    a("div", w, [
+      o(e.$slots, "control", c(f({ bindEvents: e.bindEvents, controlAttributes: e.controlAttributes })), () => [
+        e.$slots.icon ? (t(), l("div", {
+          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]
+        ])
+      ]),
+      o(e.$slots, "activity", {}, () => [
+        C(T, { name: "select-field-fade" }, {
+          default: p(() => [
+            e.activity ? (t(), k(y, {
+              key: "activity",
+              ref: "activity",
+              type: e.indicator,
+              size: e.indicatorSize || e.size
+            }, null, 8, ["type", "size"])) : n("", !0)
+          ]),
+          _: 1
+        })
+      ])
+    ]),
+    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(), k($, {
+        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 })), () => [
+      C(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__ */ O(D, [["render", M]]);
+export {
+  J 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 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\n        controlClass() {\n            return this.plaintext ?\n                `${this.defaultControlClass}-plaintext`\n                : this.defaultControlClass;\n        },\n    },\n\n    methods: {\n        shouldChangeOnFocus() {\n            return false;\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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"}

package/dist/select-field.umd.cjs

@@ -0,0 +1,2 @@
+(function(r,l){typeof exports=="object"&&typeof module<"u"?l(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"],l):(r=typeof globalThis<"u"?globalThis:r||self,l(r.SelectField={},r.ActivityIndicator,r.FormControl,r.Vue))})(this,function(r,l,d,e){"use strict";const c=e.defineComponent({name:"SelectField",components:{ActivityIndicator:l.ActivityIndicator},extends:d.FormControl,props:{formControlClass:{type:String,default:"form-select"}},computed:{controlClass(){return this.plaintext?`${this.defaultControlClass}-plaintext`:this.defaultControlClass}},methods:{shouldChangeOnFocus(){return!1}}}),F="",m=(o,n)=>{const i=o.__vccOpts||o;for(const[s,a]of n)i[s]=a;return i},f=["for"],p={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,i,s,a,V){const h=e.resolveComponent("activity-indicator"),$=e.resolveComponent("FormControlErrors"),g=e.resolveComponent("FormControlFeedback"),B=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,f)):e.createCommentVNode("",!0)]),e.createElementVNode("div",p,[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],[B]])]),e.renderSlot(o.$slots,"activity",{},()=>[e.createVNode(e.Transition,{name:"select-field-fade"},{default:e.withCtx(()=>[o.activity?(e.openBlock(),e.createBlock(h,{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($,{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(g,{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"})});
+//# 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 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\n        controlClass() {\n            return this.plaintext ?\n                `${this.defaultControlClass}-plaintext`\n                : this.defaultControlClass;\n        },\n    },\n\n    methods: {\n        shouldChangeOnFocus() {\n            return false;\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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"}

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

@@ -5,7 +5,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
      * @param {String}
      * @default 'form-select'
      */
-    defaultControlClass: {
+    formControlClass: {
         type: StringConstructor;
         default: string;
     };
@@ -13,41 +13,40 @@ declare const _sfc_main: import("vue").DefineComponent<{
     controlClass(): any;
 }, {
     shouldChangeOnFocus(): false;
-}, import("vue").DefineComponent<{
+}, 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'
-     */
-    nativeEvents: {
-        type: ArrayConstructor;
-        default(): string[];
-    };
-    defaultControlClass: {
-        type: StringConstructor;
-        default: () => any;
+        default: () => any; /**
+         * The default class name assigned to the control element
+         *
+         * @param {String}
+         * @default 'form-select'
+         */
+    };
+    controlClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
     };
     error: {
         type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
     errors: {
-        type: (BooleanConstructor | ArrayConstructor | ObjectConstructor)[];
-        default(): {};
+        type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
     };
     feedback: {
         type: (StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
+    formControlClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: () => any;
+    };
     group: {
         type: BooleanConstructor;
         default: () => any;
@@ -56,16 +55,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
-    hideLabel: BooleanConstructor;
     indicator: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
         default: () => any;
     };
     indicatorSize: {
         type: StringConstructor;
         default: undefined;
     };
-    inline: BooleanConstructor;
     invalid: BooleanConstructor;
     label: {
         type: (StringConstructor | NumberConstructor)[];
@@ -76,61 +73,56 @@ declare const _sfc_main: import("vue").DefineComponent<{
         default: () => any;
     };
     modelValue: {
-        default: undefined;
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
+        default: () => undefined;
     };
-    pill: BooleanConstructor;
     plaintext: BooleanConstructor;
     size: {
         type: StringConstructor;
         default: undefined;
     };
-    spacing: {
-        type: StringConstructor;
-        default: undefined;
-    };
     valid: BooleanConstructor;
 }, unknown, {
-    defaultEmpty: boolean;
+    currentValue: null;
     hasChanged: boolean;
     hasFocus: boolean;
-    isEmpty: boolean;
+    isDirty: boolean;
 }, {
-    id(): any;
+    model: {
+        get(): any;
+        set(value: any): void;
+    };
+    id(): string | undefined;
+    isEmpty(): boolean;
+    isInvalid(): boolean;
+    isValid(): boolean;
     componentName(): any;
-    controlAttributes(): {
-        [k: string]: unknown;
-    };
-    controlClass(): any;
+    controlAttributes(): any;
+    controlClasses(): any;
     controlSizeClass(): string;
     formGroupClasses(): {
         [x: number]: boolean;
         animated: any;
-        'default-empty': any;
         'form-group': any;
         'has-activity': any;
         'has-changed': any;
         'has-focus': any;
         'has-icon': boolean;
+        'is-dirty': any;
         'is-empty': any;
-        'is-invalid': boolean;
-        'is-valid': boolean;
+        'is-invalid': any;
+        'is-valid': any;
     } & (false | {
         [x: string]: boolean;
     });
-    controlClasses(): any;
-    hasDefaultSlot(): boolean;
-    invalidFeedback(): any;
-    pillClasses(): "rounded rounded-pill";
     plaintextClass(): "form-control-plaintext";
-    validFeedback(): any;
 }, {
-    bindEvents(el: HTMLOptionElement | HTMLSelectElement, fn: Function): void;
+    bindEvents(el: HTMLElement): void;
     blur(): void;
     focus(): void;
-    getInputField(): any;
     getFieldErrors(): any;
-    shouldChangeOnFocus(): boolean;
-    onInput(value: any): void;
+    getModelValue(): any;
+    setModelValue(value: any): void;
 }, import("vue").DefineComponent<{
     dropShadow: {
         type: (BooleanConstructor | StringConstructor)[];
@@ -174,7 +166,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     dropShadow: string | boolean;
     dropShadowableClassPrefix: string;
     shadowableClassPrefix: string;
-}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, 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;
@@ -183,26 +175,26 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: () => any;
     };
-    nativeEvents: {
-        type: ArrayConstructor;
-        default(): string[];
-    };
-    defaultControlClass: {
-        type: StringConstructor;
-        default: () => any;
+    controlClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
     };
     error: {
         type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
     errors: {
-        type: (BooleanConstructor | ArrayConstructor | ObjectConstructor)[];
-        default(): {};
+        type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: undefined;
     };
     feedback: {
         type: (StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
+    formControlClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: () => any;
+    };
     group: {
         type: BooleanConstructor;
         default: () => any;
@@ -211,16 +203,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
-    hideLabel: BooleanConstructor;
     indicator: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
         default: () => any;
     };
     indicatorSize: {
         type: StringConstructor;
         default: undefined;
     };
-    inline: BooleanConstructor;
     invalid: BooleanConstructor;
     label: {
         type: (StringConstructor | NumberConstructor)[];
@@ -231,54 +221,57 @@ declare const _sfc_main: import("vue").DefineComponent<{
         default: () => any;
     };
     modelValue: {
-        default: undefined;
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
+        default: () => undefined;
     };
-    pill: BooleanConstructor;
     plaintext: BooleanConstructor;
     size: {
         type: StringConstructor;
         default: undefined;
     };
-    spacing: {
-        type: StringConstructor;
-        default: undefined;
-    };
     valid: BooleanConstructor;
-}>>, {
-    activity: boolean;
-    animated: boolean;
-    nativeEvents: unknown[];
-    defaultControlClass: string;
+}>> & {
+    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;
+    controlClass: string | unknown[] | Record<string, any>;
+    formControlClass: string | unknown[] | Record<string, any>;
     group: boolean;
     helpText: string | number;
-    hideLabel: boolean;
-    indicator: string | boolean;
+    indicator: string | boolean | Record<string, any>;
     indicatorSize: string;
-    inline: boolean;
     invalid: boolean;
     label: string | number;
     labelClass: string | Record<string, any>;
-    modelValue: undefined;
-    pill: boolean;
+    modelValue: string | number | boolean | unknown[] | Record<string, any>;
     plaintext: boolean;
     size: string;
-    spacing: string;
     valid: boolean;
-}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, 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'
      */
-    defaultControlClass: {
+    formControlClass: {
         type: StringConstructor;
         default: string;
     };
 }>>, {
-    defaultControlClass: string;
+    formControlClass: string;
 }>;
 export default _sfc_main;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@vue-interface/select-field",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "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",
@@ -21,12 +22,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview",
-    "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
-    "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
-    "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
-    "release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
-    "release": "git add . -A; git commit; git push --tags origin; npm publish;"
+    "preview": "vite preview"
   },
   "repository": {
     "type": "git",
@@ -47,26 +43,23 @@
   },
   "homepage": "https://github.com/vue-interface/select-field/docs#readme",
   "dependencies": {
-    "@vue-interface/activity-indicator": "^2.0.0-beta.0",
-    "@vue-interface/form-control": "^1.0.0-beta.0"
+    "@vue-interface/activity-indicator": "^2.0.0-beta.11",
+    "@vue-interface/form-control": "^1.0.0-beta.15"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.3",
-    "@vitejs/plugin-vue": "^3.0.1",
-    "autoprefixer": "^10.4.2",
-    "babel-eslint": "^10.1.0",
-    "babel-preset-vue": "^2.0.2",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "autoprefixer": "^10.4.13",
     "change-case": "^4.1.2",
-    "eslint": "^8.29.0",
-    "eslint-plugin-vue": "^9.8.0",
+    "eslint": "^8.34.0",
+    "eslint-plugin-vue": "^9.9.0",
     "pascalcase": "^2.0.0",
-    "postcss": "^8.4.6",
-    "tailwindcss": "^3.0.18",
-    "vite": "^3.0.0",
-    "vite-plugin-dts": "^1.7.1",
-    "vue": "^3.2.37"
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
+    "vite": "^4.1.4",
+    "vite-plugin-dts": "^1.7.3",
+    "vue": "^3.2.47"
   }
 }