@vue-interface/input-field 1.0.0-beta.1 → 1.0.0-beta.11

package/dist/input-field.js

@@ -1,534 +1,271 @@
-import { defineComponent as S, inject as N, openBlock as r, createElementBlock as l, normalizeClass as k, normalizeStyle as I, createElementVNode as A, createBlock as O, resolveDynamicComponent as H, createCommentVNode as p, toDisplayString as B, resolveComponent as M, resolveDirective as T, renderSlot as f, withDirectives as P, mergeProps as Z, createVNode as x, Transition as R, withCtx as V } from "vue";
-function v(t, e = "px") {
-  return t != null && t !== !1 && isFinite(t) ? `${t}${e}` : t;
-}
-const W = S({
-  props: {
-    absolute: Boolean,
-    center: Boolean,
-    label: String,
-    size: {
-      type: String,
-      default: "md"
-    },
-    registry: {
-      type: String,
-      default: "indicators"
-    },
-    type: {
-      type: String,
-      required: !0
-    },
-    height: [String, Number],
-    maxHeight: [String, Number],
-    minHeight: [String, Number],
-    width: [String, Number],
-    maxWidth: [String, Number],
-    minWidth: [String, Number]
-  },
-  data: () => ({
-    is: null
-  }),
-  setup(t) {
-    return {
-      registryInstance: N(t.registry || "indicators")
-    };
-  },
-  computed: {
-    classes() {
-      return {
-        "activity-indicator-center": this.center,
-        "activity-indicator-absolute": this.absolute,
-        [this.size && `activity-indicator-${this.size}`]: !!this.size
-      };
-    },
-    style() {
-      return {
-        width: v(this.width),
-        maxWidth: v(this.maxWidth),
-        minWidth: v(this.minWidth),
-        height: v(this.height),
-        maxHeight: v(this.maxHeight),
-        minHeight: v(this.minHeight)
-      };
+import { defineComponent as j, inject as O, toRaw as R, openBlock as s, createElementBlock as c, normalizeClass as F, normalizeStyle as H, createElementVNode as u, createBlock as E, resolveDynamicComponent as W, toDisplayString as p, createCommentVNode as d, resolveComponent as C, resolveDirective as B, renderSlot as a, normalizeProps as w, guardReactiveProps as z, withDirectives as D, mergeProps as P, vModelDynamic as V, createVNode as A, Transition as I, withCtx as S, createTextVNode as T } from "vue";
+import { FormControl as Z } from "@vue-interface/form-control";
+var M = Object.defineProperty, G = (e, t, r) => t in e ? M(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, q = (e, t, r) => (G(e, typeof t != "symbol" ? t + "" : t, r), r), v = function() {
+  return v = Object.assign || function(e) {
+    for (var t, r = 1, i = arguments.length; r < i; r++) {
+      t = arguments[r];
+      for (var o in t)
+        Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
     }
-  },
-  async mounted() {
-    const t = await this.component();
-    this.is = () => t;
-  },
-  methods: {
-    async component() {
-      let t = this.registryInstance.get(this.type);
-      return t instanceof Promise ? t : (typeof t == "function" && (t = await t()), t.default ? t.default : t);
-    }
-  }
-}), D = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [n, s] of e)
-    i[n] = s;
-  return i;
-}, q = { class: "activity-indicator-content" }, G = {
-  key: 1,
-  class: "activity-indicator-label"
+    return e;
+  }, v.apply(this, arguments);
 };
-function _(t, e, i, n, s, d) {
-  return r(), l("div", {
-    class: k(["activity-indicator", t.classes]),
-    style: I(t.style)
-  }, [
-    A("div", q, [
-      t.is ? (r(), O(H(t.is()), {
-        key: 0,
-        class: "mx-auto"
-      })) : p("", !0),
-      t.label ? (r(), l("div", G, B(t.label), 1)) : p("", !0)
-    ])
-  ], 6);
+function L(e) {
+  return e.toLowerCase();
 }
-const J = /* @__PURE__ */ D(W, [["render", _]]);
-var K = Object.defineProperty, Q = (t, e, i) => e in t ? K(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, U = (t, e, i) => (Q(t, typeof e != "symbol" ? e + "" : e, i), i), $ = function() {
-  return $ = Object.assign || function(t) {
-    for (var e, i = 1, n = arguments.length; i < n; i++) {
-      e = arguments[i];
-      for (var s in e)
-        Object.prototype.hasOwnProperty.call(e, s) && (t[s] = e[s]);
-    }
-    return t;
-  }, $.apply(this, arguments);
-};
-function X(t) {
-  return t.toLowerCase();
-}
-var Y = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], tt = /[^A-Z0-9]+/gi;
-function et(t, e) {
-  e === void 0 && (e = {});
-  for (var i = e.splitRegexp, n = i === void 0 ? Y : i, s = e.stripRegexp, d = s === void 0 ? tt : s, u = e.transform, m = u === void 0 ? X : u, o = e.delimiter, w = o === void 0 ? " " : o, a = F(F(t, n, "$1\0$2"), d, "\0"), c = 0, h = a.length; a.charAt(c) === "\0"; )
-    c++;
-  for (; a.charAt(h - 1) === "\0"; )
-    h--;
-  return a.slice(c, h).split("\0").map(m).join(w);
+var U = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], J = /[^A-Z0-9]+/gi;
+function K(e, t) {
+  t === void 0 && (t = {});
+  for (var r = t.splitRegexp, i = r === void 0 ? U : r, o = t.stripRegexp, y = o === void 0 ? J : o, m = t.transform, b = m === void 0 ? L : m, f = t.delimiter, g = f === void 0 ? " " : f, n = N(N(e, i, "$1\0$2"), y, "\0"), $ = 0, k = n.length; n.charAt($) === "\0"; )
+    $++;
+  for (; n.charAt(k - 1) === "\0"; )
+    k--;
+  return n.slice($, k).split("\0").map(b).join(g);
 }
-function F(t, e, i) {
-  return e instanceof RegExp ? t.replace(e, i) : e.reduce(function(n, s) {
-    return n.replace(s, i);
-  }, t);
+function N(e, t, r) {
+  return t instanceof RegExp ? e.replace(t, r) : t.reduce(function(i, o) {
+    return i.replace(o, r);
+  }, e);
 }
-function it(t, e) {
-  return e === void 0 && (e = {}), et(t, $({ delimiter: "." }, e));
+function Q(e, t) {
+  return t === void 0 && (t = {}), K(e, v({ delimiter: "." }, t));
 }
-function b(t, e) {
-  return e === void 0 && (e = {}), it(t, $({ delimiter: "-" }, e));
+function h(e, t) {
+  return t === void 0 && (t = {}), Q(e, v({ delimiter: "-" }, t));
 }
-class st {
-  constructor(e = {}) {
-    U(this, "components"), this.components = /* @__PURE__ */ new Map(), Object.entries(e).forEach(([i, n]) => {
-      this.register(i, n);
+class X {
+  constructor(t = {}) {
+    q(this, "components"), this.components = /* @__PURE__ */ new Map(), Object.entries(t).forEach(([r, i]) => {
+      this.register(r, i);
     });
   }
-  get(e) {
-    const i = this.components.get(
-      e = b(e)
+  get(t) {
+    const r = this.components.get(
+      t = h(t)
     );
-    if (i)
-      return i;
-    throw new Error(`"${e}" has not been registered yet!`);
+    if (r)
+      return r;
+    throw new Error(`"${t}" has not been registered yet!`);
   }
-  register(e, i) {
-    return typeof e == "object" ? (Object.entries(e).forEach(([n, s]) => {
-      this.register(b(n), s);
-    }), this) : (this.components.set(b(e), i), this);
+  register(t, r) {
+    return typeof t == "object" ? (Object.entries(t).forEach(([i, o]) => {
+      this.register(h(i), o);
+    }), this) : (this.components.set(h(t), r), this);
   }
-  remove(e) {
-    return this.components.delete(b(e)), this;
+  remove(t) {
+    return this.components.delete(h(t)), this;
   }
   reset() {
     return this.components = /* @__PURE__ */ new Map(), this;
   }
 }
-function nt(t = {}) {
-  return new st(t);
+function Y(e = {}) {
+  return new X(e);
 }
-nt();
-const g = {};
-function y(...t) {
-  if (!t.length)
-    return g;
-  const [e, i] = t;
-  return typeof e == "string" ? typeof g[e] < "u" ? g[e] : i : Array.isArray(e) ? e.reduce((n, s) => Object.assign(n, {
-    [s]: g[s]
-  }), {}) : Object.assign(g, ...t);
+const _ = Y();
+function l(e, t = "px") {
+  return e != null && e !== !1 && isFinite(e) ? `${e}${t}` : e;
 }
-const rt = S({
+const x = j({
   props: {
-    dropShadow: {
-      type: [Boolean, String],
-      default: void 0
-    },
-    dropShadowableClassPrefix: {
+    absolute: Boolean,
+    center: Boolean,
+    label: {
       type: String,
-      default: "drop-shadow"
-    },
-    shadow: {
-      type: [Boolean, String],
       default: void 0
     },
-    shadowableClassPrefix: {
+    size: {
       type: String,
-      default: "shadow"
-    }
-  },
-  computed: {
-    shadowableClass() {
-      const t = this.dropShadow === !0 ? "" : this.dropShadow && `-${this.dropShadow}`, e = this.shadow === !0 ? "" : this.shadow && `-${this.shadow}`;
-      return {
-        [`${this.dropShadowableClassPrefix}${t}`]: !!this.dropShadow,
-        [`${this.shadowableClassPrefix}${e}`]: !!this.shadow
-      };
-    }
-  }
-});
-var C = function() {
-  return C = Object.assign || function(t) {
-    for (var e, i = 1, n = arguments.length; i < n; i++) {
-      e = arguments[i];
-      for (var s in e)
-        Object.prototype.hasOwnProperty.call(e, s) && (t[s] = e[s]);
-    }
-    return t;
-  }, C.apply(this, arguments);
-};
-function ot(t) {
-  return t.toLowerCase();
-}
-var at = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], lt = /[^A-Z0-9]+/gi;
-function dt(t, e) {
-  e === void 0 && (e = {});
-  for (var i = e.splitRegexp, n = i === void 0 ? at : i, s = e.stripRegexp, d = s === void 0 ? lt : s, u = e.transform, m = u === void 0 ? ot : u, o = e.delimiter, w = o === void 0 ? " " : o, a = z(z(t, n, "$1\0$2"), d, "\0"), c = 0, h = a.length; a.charAt(c) === "\0"; )
-    c++;
-  for (; a.charAt(h - 1) === "\0"; )
-    h--;
-  return a.slice(c, h).split("\0").map(m).join(w);
-}
-function z(t, e, i) {
-  return e instanceof RegExp ? t.replace(e, i) : e.reduce(function(n, s) {
-    return n.replace(s, i);
-  }, t);
-}
-function ut(t, e) {
-  return e === void 0 && (e = {}), dt(t, C({ delimiter: "." }, e));
-}
-function L(t, e) {
-  return e === void 0 && (e = {}), ut(t, C({ delimiter: "-" }, e));
-}
-function E(t, e, i = "-") {
-  const n = e.toString().replace(new RegExp(`^${t}${i}?`), "");
-  return [
-    L(n),
-    t
-  ].filter((s) => !!s).join(i);
-}
-function j(t) {
-  return !Array.isArray(t) && typeof t == "object";
-}
-function ct(t) {
-  return t === void 0;
-}
-const ht = S({
-  directives: {
-    bindEvents: {
-      beforeMount(t, e) {
-        var i, n;
-        (n = (i = e.instance) == null ? void 0 : i.bindEvents) == null || n.call(i, t);
-      }
-    }
-  },
-  mixins: [
-    rt
-  ],
-  inheritAttrs: !1,
-  props: {
-    activity: {
-      type: Boolean,
-      default: !1
-    },
-    animated: {
-      type: Boolean,
-      default: () => y("animated", !1)
-    },
-    nativeEvents: {
-      type: Array,
-      default() {
-        return ["focus", "blur", "change", "click", "keypress", "keyup", "keydown", "progress", "paste"];
-      }
+      default: "md"
     },
-    defaultControlClass: {
+    registry: {
       type: String,
-      default: () => y("defaultControlClass", "form-control")
-    },
-    error: {
-      type: [String, Array, Boolean],
-      default: void 0
+      default: "indicators"
     },
-    errors: {
-      type: [Array, Object, Boolean],
-      default() {
-        return {};
-      }
+    type: {
+      type: [Object, String],
+      required: !0
     },
-    feedback: {
-      type: [String, Array],
+    height: {
+      type: [String, Number],
       default: void 0
     },
-    group: {
-      type: Boolean,
-      default: () => y("group", !0)
-    },
-    helpText: {
-      type: [Number, String],
+    maxHeight: {
+      type: [String, Number],
       default: void 0
     },
-    hideLabel: Boolean,
-    indicator: {
-      type: String,
-      default: () => y("indicator", "spinner")
-    },
-    indicatorSize: {
-      type: String,
+    minHeight: {
+      type: [String, Number],
       default: void 0
     },
-    inline: Boolean,
-    invalid: Boolean,
-    label: {
-      type: [Number, String],
+    width: {
+      type: [String, Number],
       default: void 0
     },
-    labelClass: {
-      type: [Object, String],
-      default: () => y("labelClass", "form-label")
-    },
-    modelValue: {
+    maxWidth: {
+      type: [String, Number],
       default: void 0
     },
-    pill: Boolean,
-    plaintext: Boolean,
-    size: String,
-    spacing: String,
-    valid: Boolean
-  },
-  data() {
-    return {
-      defaultEmpty: !1,
-      hasChanged: !1,
-      hasFocus: !1,
-      isEmpty: !0
-    };
+    minWidth: {
+      type: [String, Number],
+      default: void 0
+    }
   },
+  data: () => ({
+    is: null
+  }),
   computed: {
-    id() {
-      return this.$attrs.id || this.$attrs.name || (Math.random() + 1).toString(36).substring(7);
-    },
-    componentName() {
-      return this.$options.name;
-    },
-    controlAttributes() {
-      return Object.fromEntries(
-        Object.entries(this.$attrs).concat([
-          ["id", this.id],
-          ["class", this.controlClasses]
-        ])
-      );
-    },
-    controlClass() {
-      return this.defaultControlClass;
-    },
-    controlSizeClass() {
-      return E(this.size, this.controlClass);
-    },
-    formGroupClasses() {
+    classes() {
       return {
-        [L(this.componentName)]: !!this.componentName,
-        [this.size && E(this.size, this.componentName)]: !!this.size,
-        animated: this.animated,
-        "default-empty": this.defaultEmpty,
-        "form-group": this.group,
-        [this.size && E(this.size, "form-group")]: !!this.size,
-        "has-activity": this.activity,
-        "has-changed": this.hasChanged,
-        "has-focus": this.hasFocus,
-        "has-icon": !!this.$slots.icon,
-        "is-empty": this.isEmpty,
-        "is-invalid": !!(this.invalid || this.invalidFeedback),
-        "is-valid": !!(this.valid || this.validFeedback),
-        [this.$attrs.class]: !!this.$attrs.class,
-        [this.$attrs.id]: !!this.$attrs.id
+        "activity-indicator-center": this.center,
+        "activity-indicator-absolute": this.absolute,
+        [this.size && `activity-indicator-${this.size}`]: !!this.size
       };
     },
-    controlClasses() {
-      return Object.assign({
-        [this.controlClass]: !!this.controlClass,
-        [this.controlSizeClass]: !!this.controlSizeClass,
-        "form-control-icon": !!this.$slots.icon,
-        "is-valid": !!(this.valid || this.validFeedback),
-        "is-invalid": !!(this.invalid || this.invalidFeedback),
-        [this.pillClasses]: this.pill,
-        [this.plaintextClass]: this.plaintext,
-        [this.spacing]: !!this.spacing
-      }, this.shadowableClass);
-    },
-    hasDefaultSlot() {
-      return !!this.$slots.default;
-    },
-    invalidFeedback() {
-      if (this.error === "")
-        return null;
-      if (this.error)
-        return this.error;
-      const t = this.getFieldErrors();
-      return Array.isArray(t) ? t.filter((e) => e && typeof e == "string").join("<br>") : t;
-    },
-    pillClasses() {
-      return "rounded rounded-pill";
-    },
-    plaintextClass() {
-      return "form-control-plaintext";
-    },
-    validFeedback() {
-      return Array.isArray(this.feedback) ? this.feedback.join("<br>") : this.feedback;
-    }
-  },
-  watch: {
-    hasFocus() {
-      this.shouldChangeOnFocus() && (this.hasChanged = !0);
-    },
-    defaultEmpty() {
-      this.hasChanged = !0;
+    style() {
+      return {
+        width: l(this.width),
+        maxWidth: l(this.maxWidth),
+        minWidth: l(this.minWidth),
+        height: l(this.height),
+        maxHeight: l(this.maxHeight),
+        minHeight: l(this.minHeight)
+      };
     }
   },
+  // async mounted() {
+  //     const component = await this.component();
+  //     this.is = () => component;
+  // },
   methods: {
-    bindEvents(t, e) {
-      var i;
-      e || (e = this.onInput);
-      const n = t instanceof HTMLSelectElement ? (i = t.querySelectorAll("option")) == null ? void 0 : i[t.selectedIndex] : null;
-      ct(this.modelValue) ? n && (t.value = n == null ? void 0 : n.value) : t.value = this.modelValue, t.value && e(t.value), this.hasChanged = !!t.value, this.isEmpty = !t.value, t.addEventListener("focus", () => {
-        this.hasFocus = !0;
-      }), t.addEventListener("blur", () => {
-        this.hasFocus = !1;
-      }), t.addEventListener("input", (s) => {
-        this.isEmpty = !1, this.hasChanged = !0;
-      }), t.addEventListener(
-        t.tagName === "SELECT" ? "change" : "input",
-        () => e(t.value)
-      ), this.nativeEvents.forEach((s) => {
-        t.addEventListener(s, (d) => {
-          this.$emit(s, d);
-        });
-      });
-    },
-    blur() {
-      this.getInputField() && this.getInputField().blur();
-    },
-    focus() {
-      this.getInputField() && this.getInputField().focus();
-    },
-    getInputField() {
-      return this.$el.querySelector(
-        ".form-control, input, select, textarea"
-      );
-    },
-    getFieldErrors() {
-      let t = this.error || this.errors;
-      return this.errors && j(this.errors) && (t = this.errors[this.$attrs.name || this.$attrs.id]), !t || Array.isArray(t) || j(t) ? t : [t];
-    },
-    shouldChangeOnFocus() {
-      return !this.getInputField().readOnly;
+    componentFromRegistry(e) {
+      var t;
+      try {
+        return (t = O(this.registry || "indicators", _)) == null ? void 0 : t.get(e);
+      } catch {
+      }
     },
-    onInput(t) {
-      this.$emit("update:modelValue", t);
+    component() {
+      return typeof this.type == "string" ? this.componentFromRegistry(this.type) : R(this.type);
     }
   }
-}), pt = S({
+}), ee = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [i, o] of t)
+    r[i] = o;
+  return r;
+}, te = { class: "activity-indicator-content" }, re = {
+  key: 0,
+  class: "activity-indicator-label"
+};
+function oe(e, t, r, i, o, y) {
+  return s(), c("div", {
+    class: F(["activity-indicator", e.classes]),
+    style: H(e.style)
+  }, [
+    u("div", te, [
+      (s(), E(W(e.component()), { class: "mx-auto" })),
+      e.label ? (s(), c("div", re, p(e.label), 1)) : d("", !0)
+    ])
+  ], 6);
+}
+const ie = /* @__PURE__ */ ee(x, [["render", oe]]), ne = j({
+  name: "InputField",
   components: {
-    ActivityIndicator: J
+    ActivityIndicator: ie
   },
-  mixins: [
-    ht
-  ]
+  extends: Z
 });
-const ft = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [n, s] of e)
-    i[n] = s;
-  return i;
-}, vt = ["for", "innerHTML"], mt = { class: "form-group-inner" }, gt = ["innerHTML"], yt = ["innerHTML"];
-function bt(t, e, i, n, s, d) {
-  const u = M("activity-indicator"), m = T("bind-events");
-  return r(), l("div", {
-    class: k(t.formGroupClasses)
+const se = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [i, o] of t)
+    r[i] = o;
+  return r;
+}, ae = ["for"], le = { class: "form-group-inner" }, de = {
+  invalid: "",
+  class: "invalid-feedback"
+}, ce = /* @__PURE__ */ u("br", null, null, -1), ue = {
+  valid: "",
+  class: "valid-feedback"
+};
+function pe(e, t, r, i, o, y) {
+  const m = C("activity-indicator"), b = C("FormControlErrors"), f = C("FormControlFeedback"), g = B("bind-events");
+  return s(), c("div", {
+    class: F(["input-field", e.formGroupClasses])
   }, [
-    f(t.$slots, "label", {}, () => [
-      t.label ? (r(), l("label", {
+    a(e.$slots, "label", {}, () => [
+      e.label ? (s(), c("label", {
         key: 0,
         ref: "label",
-        for: t.id,
-        class: k(t.labelClass),
-        onClick: e[0] || (e[0] = (...o) => t.focus && t.focus(...o)),
-        innerHTML: t.label
-      }, null, 10, vt)) : p("", !0)
+        class: F(e.labelClass),
+        for: e.id
+      }, p(e.label), 11, ae)) : d("", !0)
     ]),
-    A("div", mt, [
-      f(t.$slots, "control", {
-        bindEvents: t.bindEvents,
-        controlAttributes: t.controlAttributes,
-        focus: t.focus
-      }, () => [
-        t.$slots.icon ? (r(), l("div", {
+    u("div", le, [
+      a(e.$slots, "control", w(z({ bindEvents: e.bindEvents, controlAttributes: e.controlAttributes })), () => [
+        e.$slots.icon ? (s(), c("div", {
           key: 0,
           class: "form-group-inner-icon",
-          onClick: e[1] || (e[1] = (...o) => t.focus && t.focus(...o))
+          onClick: t[0] || (t[0] = (...n) => e.focus && e.focus(...n))
         }, [
-          f(t.$slots, "icon")
-        ])) : p("", !0),
-        P(A("input", Z({ ref: "field" }, t.controlAttributes), null, 16), [
-          [m]
+          a(e.$slots, "icon")
+        ])) : d("", !0),
+        D(u("input", P({
+          ref: "field",
+          "onUpdate:modelValue": t[1] || (t[1] = (n) => e.model = n)
+        }, e.controlAttributes), null, 16), [
+          [V, e.model],
+          [g]
         ])
       ]),
-      f(t.$slots, "activity", {}, () => [
-        x(R, { name: "input-field-fade" }, {
-          default: V(() => [
-            t.activity ? (r(), O(u, {
+      a(e.$slots, "activity", {}, () => [
+        A(I, { name: "input-field-fade" }, {
+          default: S(() => [
+            e.activity ? (s(), E(m, {
               key: "activity",
               ref: "activity",
-              type: t.indicator,
-              size: t.indicatorSize || t.size
-            }, null, 8, ["type", "size"])) : p("", !0)
+              type: e.indicator,
+              size: e.indicatorSize || e.size
+            }, null, 8, ["type", "size"])) : d("", !0)
           ]),
           _: 1
         })
       ])
     ]),
-    f(t.$slots, "feedback", {}, () => [
-      t.invalidFeedback ? (r(), l("div", {
+    a(e.$slots, "errors", w(z({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
+      e.error || e.errors ? (s(), E(b, {
         key: 0,
-        class: "invalid-feedback",
-        invalid: "",
-        innerHTML: t.invalidFeedback
-      }, null, 8, gt)) : t.validFeedback ? (r(), l("div", {
-        key: 1,
-        class: "valid-feedback",
-        valid: "",
-        innerHTML: t.validFeedback
-      }, null, 8, yt)) : p("", !0)
+        id: e.$attrs.id,
+        name: e.$attrs.name,
+        error: e.error,
+        errors: e.errors
+      }, {
+        default: S(({ error: n }) => [
+          u("div", de, [
+            T(p(n), 1),
+            ce
+          ])
+        ]),
+        _: 1
+      }, 8, ["id", "name", "error", "errors"])) : d("", !0)
+    ]),
+    a(e.$slots, "feedback", w(z({ feedback: e.feedback })), () => [
+      A(f, { feedback: e.feedback }, {
+        default: S(({ feedback: n }) => [
+          u("div", ue, p(n), 1)
+        ]),
+        _: 1
+      }, 8, ["feedback"])
     ]),
-    f(t.$slots, "help", {}, () => [
-      t.helpText ? (r(), l("small", {
+    a(e.$slots, "help", {}, () => [
+      e.helpText ? (s(), c("small", {
         key: 0,
         ref: "help"
-      }, B(t.helpText), 513)) : p("", !0)
+      }, p(e.helpText), 513)) : d("", !0)
     ])
   ], 2);
 }
-const Ct = /* @__PURE__ */ ft(pt, [["render", bt]]);
+const he = /* @__PURE__ */ se(ne, [["render", pe]]);
 export {
-  Ct as InputField
+  he as InputField
 };

package/dist/input-field.umd.cjs

@@ -1 +1 @@
-(function(l,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(l=typeof globalThis<"u"?globalThis:l||self,i(l.InputField={},l.Vue))})(this,function(l,i){"use strict";function p(e,t="px"){return e!=null&&e!==!1&&isFinite(e)?`${e}${t}`:e}const B=i.defineComponent({props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:String,default:"indicators"},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},data:()=>({is:null}),setup(e){return{registryInstance:i.inject(e.registry||"indicators")}},computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:p(this.width),maxWidth:p(this.maxWidth),minWidth:p(this.minWidth),height:p(this.height),maxHeight:p(this.maxHeight),minHeight:p(this.minHeight)}}},async mounted(){const e=await this.component();this.is=()=>e},methods:{async component(){let e=this.registryInstance.get(this.type);return e instanceof Promise?e:(typeof e=="function"&&(e=await e()),e.default?e.default:e)}}}),A=(e,t)=>{const n=e.__vccOpts||e;for(const[r,s]of t)n[r]=s;return n},F={class:"activity-indicator-content"},z={key:1,class:"activity-indicator-label"};function j(e,t,n,r,s,d){return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(["activity-indicator",e.classes]),style:i.normalizeStyle(e.style)},[i.createElementVNode("div",F,[e.is?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.is()),{key:0,class:"mx-auto"})):i.createCommentVNode("",!0),e.label?(i.openBlock(),i.createElementBlock("div",z,i.toDisplayString(e.label),1)):i.createCommentVNode("",!0)])],6)}const N=A(B,[["render",j]]);var O=Object.defineProperty,I=(e,t,n)=>t in e?O(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,V=(e,t,n)=>(I(e,typeof t!="symbol"?t+"":t,n),n),y=function(){return y=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s])}return e},y.apply(this,arguments)};function L(e){return e.toLowerCase()}var T=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],H=/[^A-Z0-9]+/gi;function M(e,t){t===void 0&&(t={});for(var n=t.splitRegexp,r=n===void 0?T:n,s=t.stripRegexp,d=s===void 0?H:s,c=t.transform,g=c===void 0?L:c,o=t.delimiter,S=o===void 0?" ":o,a=k(k(e,r,"$1\0$2"),d,"\0"),h=0,u=a.length;a.charAt(h)==="\0";)h++;for(;a.charAt(u-1)==="\0";)u--;return a.slice(h,u).split("\0").map(g).join(S)}function k(e,t,n){return t instanceof RegExp?e.replace(t,n):t.reduce(function(r,s){return r.replace(s,n)},e)}function P(e,t){return t===void 0&&(t={}),M(e,y({delimiter:"."},t))}function b(e,t){return t===void 0&&(t={}),P(e,y({delimiter:"-"},t))}class x{constructor(t={}){V(this,"components"),this.components=new Map,Object.entries(t).forEach(([n,r])=>{this.register(n,r)})}get(t){const n=this.components.get(t=b(t));if(n)return n;throw new Error(`"${t}" has not been registered yet!`)}register(t,n){return typeof t=="object"?(Object.entries(t).forEach(([r,s])=>{this.register(b(r),s)}),this):(this.components.set(b(t),n),this)}remove(t){return this.components.delete(b(t)),this}reset(){return this.components=new Map,this}}function Z(e={}){return new x(e)}Z();const f={};function m(...e){if(!e.length)return f;const[t,n]=e;return typeof t=="string"?typeof f[t]<"u"?f[t]:n:Array.isArray(t)?t.reduce((r,s)=>Object.assign(r,{[s]:f[s]}),{}):Object.assign(f,...e)}const R=i.defineComponent({props:{dropShadow:{type:[Boolean,String],default:void 0},dropShadowableClassPrefix:{type:String,default:"drop-shadow"},shadow:{type:[Boolean,String],default:void 0},shadowableClassPrefix:{type:String,default:"shadow"}},computed:{shadowableClass(){const e=this.dropShadow===!0?"":this.dropShadow&&`-${this.dropShadow}`,t=this.shadow===!0?"":this.shadow&&`-${this.shadow}`;return{[`${this.dropShadowableClassPrefix}${e}`]:!!this.dropShadow,[`${this.shadowableClassPrefix}${t}`]:!!this.shadow}}}});var v=function(){return v=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var s in t)Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s])}return e},v.apply(this,arguments)};function D(e){return e.toLowerCase()}var W=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],q=/[^A-Z0-9]+/gi;function G(e,t){t===void 0&&(t={});for(var n=t.splitRegexp,r=n===void 0?W:n,s=t.stripRegexp,d=s===void 0?q:s,c=t.transform,g=c===void 0?D:c,o=t.delimiter,S=o===void 0?" ":o,a=$($(e,r,"$1\0$2"),d,"\0"),h=0,u=a.length;a.charAt(h)==="\0";)h++;for(;a.charAt(u-1)==="\0";)u--;return a.slice(h,u).split("\0").map(g).join(S)}function $(e,t,n){return t instanceof RegExp?e.replace(t,n):t.reduce(function(r,s){return r.replace(s,n)},e)}function _(e,t){return t===void 0&&(t={}),G(e,v({delimiter:"."},t))}function E(e,t){return t===void 0&&(t={}),_(e,v({delimiter:"-"},t))}function C(e,t,n="-"){const r=t.toString().replace(new RegExp(`^${e}${n}?`),"");return[E(r),e].filter(s=>!!s).join(n)}function w(e){return!Array.isArray(e)&&typeof e=="object"}function J(e){return e===void 0}const K=i.defineComponent({directives:{bindEvents:{beforeMount(e,t){var n,r;(r=(n=t.instance)==null?void 0:n.bindEvents)==null||r.call(n,e)}}},mixins:[R],inheritAttrs:!1,props:{activity:{type:Boolean,default:!1},animated:{type:Boolean,default:()=>m("animated",!1)},nativeEvents:{type:Array,default(){return["focus","blur","change","click","keypress","keyup","keydown","progress","paste"]}},defaultControlClass:{type:String,default:()=>m("defaultControlClass","form-control")},error:{type:[String,Array,Boolean],default:void 0},errors:{type:[Array,Object,Boolean],default(){return{}}},feedback:{type:[String,Array],default:void 0},group:{type:Boolean,default:()=>m("group",!0)},helpText:{type:[Number,String],default:void 0},hideLabel:Boolean,indicator:{type:String,default:()=>m("indicator","spinner")},indicatorSize:{type:String,default:void 0},inline:Boolean,invalid:Boolean,label:{type:[Number,String],default:void 0},labelClass:{type:[Object,String],default:()=>m("labelClass","form-label")},modelValue:{default:void 0},pill:Boolean,plaintext:Boolean,size:String,spacing:String,valid:Boolean},data(){return{defaultEmpty:!1,hasChanged:!1,hasFocus:!1,isEmpty:!0}},computed:{id(){return this.$attrs.id||this.$attrs.name||(Math.random()+1).toString(36).substring(7)},componentName(){return this.$options.name},controlAttributes(){return Object.fromEntries(Object.entries(this.$attrs).concat([["id",this.id],["class",this.controlClasses]]))},controlClass(){return this.defaultControlClass},controlSizeClass(){return C(this.size,this.controlClass)},formGroupClasses(){return{[E(this.componentName)]:!!this.componentName,[this.size&&C(this.size,this.componentName)]:!!this.size,animated:this.animated,"default-empty":this.defaultEmpty,"form-group":this.group,[this.size&&C(this.size,"form-group")]:!!this.size,"has-activity":this.activity,"has-changed":this.hasChanged,"has-focus":this.hasFocus,"has-icon":!!this.$slots.icon,"is-empty":this.isEmpty,"is-invalid":!!(this.invalid||this.invalidFeedback),"is-valid":!!(this.valid||this.validFeedback),[this.$attrs.class]:!!this.$attrs.class,[this.$attrs.id]:!!this.$attrs.id}},controlClasses(){return Object.assign({[this.controlClass]:!!this.controlClass,[this.controlSizeClass]:!!this.controlSizeClass,"form-control-icon":!!this.$slots.icon,"is-valid":!!(this.valid||this.validFeedback),"is-invalid":!!(this.invalid||this.invalidFeedback),[this.pillClasses]:this.pill,[this.plaintextClass]:this.plaintext,[this.spacing]:!!this.spacing},this.shadowableClass)},hasDefaultSlot(){return!!this.$slots.default},invalidFeedback(){if(this.error==="")return null;if(this.error)return this.error;const e=this.getFieldErrors();return Array.isArray(e)?e.filter(t=>t&&typeof t=="string").join("<br>"):e},pillClasses(){return"rounded rounded-pill"},plaintextClass(){return"form-control-plaintext"},validFeedback(){return Array.isArray(this.feedback)?this.feedback.join("<br>"):this.feedback}},watch:{hasFocus(){this.shouldChangeOnFocus()&&(this.hasChanged=!0)},defaultEmpty(){this.hasChanged=!0}},methods:{bindEvents(e,t){var n;t||(t=this.onInput);const r=e instanceof HTMLSelectElement?(n=e.querySelectorAll("option"))==null?void 0:n[e.selectedIndex]:null;J(this.modelValue)?r&&(e.value=r==null?void 0:r.value):e.value=this.modelValue,e.value&&t(e.value),this.hasChanged=!!e.value,this.isEmpty=!e.value,e.addEventListener("focus",()=>{this.hasFocus=!0}),e.addEventListener("blur",()=>{this.hasFocus=!1}),e.addEventListener("input",s=>{this.isEmpty=!1,this.hasChanged=!0}),e.addEventListener(e.tagName==="SELECT"?"change":"input",()=>t(e.value)),this.nativeEvents.forEach(s=>{e.addEventListener(s,d=>{this.$emit(s,d)})})},blur(){this.getInputField()&&this.getInputField().blur()},focus(){this.getInputField()&&this.getInputField().focus()},getInputField(){return this.$el.querySelector(".form-control, input, select, textarea")},getFieldErrors(){let e=this.error||this.errors;return this.errors&&w(this.errors)&&(e=this.errors[this.$attrs.name||this.$attrs.id]),!e||Array.isArray(e)||w(e)?e:[e]},shouldChangeOnFocus(){return!this.getInputField().readOnly},onInput(e){this.$emit("update:modelValue",e)}}}),Q=i.defineComponent({components:{ActivityIndicator:N},mixins:[K]}),se="",U=(e,t)=>{const n=e.__vccOpts||e;for(const[r,s]of t)n[r]=s;return n},X=["for","innerHTML"],Y={class:"form-group-inner"},ee=["innerHTML"],te=["innerHTML"];function ie(e,t,n,r,s,d){const c=i.resolveComponent("activity-indicator"),g=i.resolveDirective("bind-events");return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(e.formGroupClasses)},[i.renderSlot(e.$slots,"label",{},()=>[e.label?(i.openBlock(),i.createElementBlock("label",{key:0,ref:"label",for:e.id,class:i.normalizeClass(e.labelClass),onClick:t[0]||(t[0]=(...o)=>e.focus&&e.focus(...o)),innerHTML:e.label},null,10,X)):i.createCommentVNode("",!0)]),i.createElementVNode("div",Y,[i.renderSlot(e.$slots,"control",{bindEvents:e.bindEvents,controlAttributes:e.controlAttributes,focus:e.focus},()=>[e.$slots.icon?(i.openBlock(),i.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:t[1]||(t[1]=(...o)=>e.focus&&e.focus(...o))},[i.renderSlot(e.$slots,"icon")])):i.createCommentVNode("",!0),i.withDirectives(i.createElementVNode("input",i.mergeProps({ref:"field"},e.controlAttributes),null,16),[[g]])]),i.renderSlot(e.$slots,"activity",{},()=>[i.createVNode(i.Transition,{name:"input-field-fade"},{default:i.withCtx(()=>[e.activity?(i.openBlock(),i.createBlock(c,{key:"activity",ref:"activity",type:e.indicator,size:e.indicatorSize||e.size},null,8,["type","size"])):i.createCommentVNode("",!0)]),_:1})])]),i.renderSlot(e.$slots,"feedback",{},()=>[e.invalidFeedback?(i.openBlock(),i.createElementBlock("div",{key:0,class:"invalid-feedback",invalid:"",innerHTML:e.invalidFeedback},null,8,ee)):e.validFeedback?(i.openBlock(),i.createElementBlock("div",{key:1,class:"valid-feedback",valid:"",innerHTML:e.validFeedback},null,8,te)):i.createCommentVNode("",!0)]),i.renderSlot(e.$slots,"help",{},()=>[e.helpText?(i.openBlock(),i.createElementBlock("small",{key:0,ref:"help"},i.toDisplayString(e.helpText),513)):i.createCommentVNode("",!0)])],2)}const ne=U(Q,[["render",ie]]);l.InputField=ne,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(l,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@vue-interface/form-control")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/form-control"],t):(l=typeof globalThis<"u"?globalThis:l||self,t(l.InputField={},l.Vue,l.formControl))})(this,function(l,t,k){"use strict";var C=Object.defineProperty,S=(e,r,o)=>r in e?C(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,$=(e,r,o)=>(S(e,typeof r!="symbol"?r+"":r,o),o),d=function(){return d=Object.assign||function(e){for(var r,o=1,i=arguments.length;o<i;o++){r=arguments[o];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},d.apply(this,arguments)};function B(e){return e.toLowerCase()}var E=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],N=/[^A-Z0-9]+/gi;function z(e,r){r===void 0&&(r={});for(var o=r.splitRegexp,i=o===void 0?E:o,n=r.stripRegexp,f=n===void 0?N:n,m=r.transform,h=m===void 0?B:m,p=r.delimiter,y=p===void 0?" ":p,s=u(u(e,i,"$1\0$2"),f,"\0"),g=0,b=s.length;s.charAt(g)==="\0";)g++;for(;s.charAt(b-1)==="\0";)b--;return s.slice(g,b).split("\0").map(h).join(y)}function u(e,r,o){return r instanceof RegExp?e.replace(r,o):r.reduce(function(i,n){return i.replace(n,o)},e)}function V(e,r){return r===void 0&&(r={}),z(e,d({delimiter:"."},r))}function c(e,r){return r===void 0&&(r={}),V(e,d({delimiter:"-"},r))}class w{constructor(r={}){$(this,"components"),this.components=new Map,Object.entries(r).forEach(([o,i])=>{this.register(o,i)})}get(r){const o=this.components.get(r=c(r));if(o)return o;throw new Error(`"${r}" has not been registered yet!`)}register(r,o){return typeof r=="object"?(Object.entries(r).forEach(([i,n])=>{this.register(c(i),n)}),this):(this.components.set(c(r),o),this)}remove(r){return this.components.delete(c(r)),this}reset(){return this.components=new Map,this}}function F(e={}){return new w(e)}const j=F();function a(e,r="px"){return e!=null&&e!==!1&&isFinite(e)?`${e}${r}`:e}const P=t.defineComponent({props:{absolute:Boolean,center:Boolean,label:{type:String,default:void 0},size:{type:String,default:"md"},registry:{type:String,default:"indicators"},type:{type:[Object,String],required:!0},height:{type:[String,Number],default:void 0},maxHeight:{type:[String,Number],default:void 0},minHeight:{type:[String,Number],default:void 0},width:{type:[String,Number],default:void 0},maxWidth:{type:[String,Number],default:void 0},minWidth:{type:[String,Number],default:void 0}},data:()=>({is:null}),computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:a(this.width),maxWidth:a(this.maxWidth),minWidth:a(this.minWidth),height:a(this.height),maxHeight:a(this.maxHeight),minHeight:a(this.minHeight)}}},methods:{componentFromRegistry(e){var r;try{return(r=t.inject(this.registry||"indicators",j))==null?void 0:r.get(e)}catch{}},component(){return typeof this.type=="string"?this.componentFromRegistry(this.type):t.toRaw(this.type)}}}),A=(e,r)=>{const o=e.__vccOpts||e;for(const[i,n]of r)o[i]=n;return o},D={class:"activity-indicator-content"},O={key:0,class:"activity-indicator-label"};function R(e,r,o,i,n,f){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["activity-indicator",e.classes]),style:t.normalizeStyle(e.style)},[t.createElementVNode("div",D,[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.component()),{class:"mx-auto"})),e.label?(t.openBlock(),t.createElementBlock("div",O,t.toDisplayString(e.label),1)):t.createCommentVNode("",!0)])],6)}const T=A(P,[["render",R]]),H=t.defineComponent({name:"InputField",components:{ActivityIndicator:T},extends:k.FormControl}),U="",I=(e,r)=>{const o=e.__vccOpts||e;for(const[i,n]of r)o[i]=n;return o},W=["for"],M={class:"form-group-inner"},Z={invalid:"",class:"invalid-feedback"},v=t.createElementVNode("br",null,null,-1),q={valid:"",class:"valid-feedback"};function G(e,r,o,i,n,f){const m=t.resolveComponent("activity-indicator"),h=t.resolveComponent("FormControlErrors"),p=t.resolveComponent("FormControlFeedback"),y=t.resolveDirective("bind-events");return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["input-field",e.formGroupClasses])},[t.renderSlot(e.$slots,"label",{},()=>[e.label?(t.openBlock(),t.createElementBlock("label",{key:0,ref:"label",class:t.normalizeClass(e.labelClass),for:e.id},t.toDisplayString(e.label),11,W)):t.createCommentVNode("",!0)]),t.createElementVNode("div",M,[t.renderSlot(e.$slots,"control",t.normalizeProps(t.guardReactiveProps({bindEvents:e.bindEvents,controlAttributes:e.controlAttributes})),()=>[e.$slots.icon?(t.openBlock(),t.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:r[0]||(r[0]=(...s)=>e.focus&&e.focus(...s))},[t.renderSlot(e.$slots,"icon")])):t.createCommentVNode("",!0),t.withDirectives(t.createElementVNode("input",t.mergeProps({ref:"field","onUpdate:modelValue":r[1]||(r[1]=s=>e.model=s)},e.controlAttributes),null,16),[[t.vModelDynamic,e.model],[y]])]),t.renderSlot(e.$slots,"activity",{},()=>[t.createVNode(t.Transition,{name:"input-field-fade"},{default:t.withCtx(()=>[e.activity?(t.openBlock(),t.createBlock(m,{key:"activity",ref:"activity",type:e.indicator,size:e.indicatorSize||e.size},null,8,["type","size"])):t.createCommentVNode("",!0)]),_:1})])]),t.renderSlot(e.$slots,"errors",t.normalizeProps(t.guardReactiveProps({error:e.error,errors:e.errors,id:e.$attrs.id,name:e.$attrs.name})),()=>[e.error||e.errors?(t.openBlock(),t.createBlock(h,{key:0,id:e.$attrs.id,name:e.$attrs.name,error:e.error,errors:e.errors},{default:t.withCtx(({error:s})=>[t.createElementVNode("div",Z,[t.createTextVNode(t.toDisplayString(s),1),v])]),_:1},8,["id","name","error","errors"])):t.createCommentVNode("",!0)]),t.renderSlot(e.$slots,"feedback",t.normalizeProps(t.guardReactiveProps({feedback:e.feedback})),()=>[t.createVNode(p,{feedback:e.feedback},{default:t.withCtx(({feedback:s})=>[t.createElementVNode("div",q,t.toDisplayString(s),1)]),_:1},8,["feedback"])]),t.renderSlot(e.$slots,"help",{},()=>[e.helpText?(t.openBlock(),t.createElementBlock("small",{key:0,ref:"help"},t.toDisplayString(e.helpText),513)):t.createCommentVNode("",!0)])],2)}const L=I(H,[["render",G]]);l.InputField=L,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

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

@@ -1,4 +1,4 @@
-declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").DefineComponent<{
+declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").DefineComponent<{
     activity: {
         type: BooleanConstructor;
         default: boolean;
@@ -7,26 +7,26 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, impor
         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)[];
+        type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
         default(): {};
     };
     feedback: {
         type: (StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
+    formControlClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: () => any;
+    };
     group: {
         type: BooleanConstructor;
         default: () => any;
@@ -35,16 +35,14 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, impor
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
-    hideLabel: BooleanConstructor;
     indicator: {
-        type: StringConstructor;
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
         default: () => any;
     };
     indicatorSize: {
         type: StringConstructor;
         default: undefined;
     };
-    inline: BooleanConstructor;
     invalid: BooleanConstructor;
     label: {
         type: (StringConstructor | NumberConstructor)[];
@@ -55,54 +53,56 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, impor
         default: () => any;
     };
     modelValue: {
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
         default: undefined;
     };
-    pill: BooleanConstructor;
     plaintext: BooleanConstructor;
-    size: StringConstructor;
-    spacing: StringConstructor;
+    size: {
+        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: string]: any;
         [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;
-    };
-    controlClasses(): any;
-    hasDefaultSlot(): boolean;
-    invalidFeedback(): any;
-    pillClasses(): "rounded rounded-pill";
+        'is-invalid': any;
+        'is-valid': any;
+    } & (false | {
+        [x: string]: boolean;
+    });
     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)[];
@@ -146,7 +146,7 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, impor
     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;
@@ -155,26 +155,26 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, impor
         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)[];
+        type: (BooleanConstructor | ObjectConstructor | ArrayConstructor)[];
         default(): {};
     };
     feedback: {
         type: (StringConstructor | ArrayConstructor)[];
         default: undefined;
     };
+    formControlClass: {
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
+        default: () => any;
+    };
     group: {
         type: BooleanConstructor;
         default: () => any;
@@ -183,16 +183,14 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, impor
         type: (StringConstructor | NumberConstructor)[];
         default: undefined;
     };
-    hideLabel: BooleanConstructor;
     indicator: {
-        type: StringConstructor;
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor)[];
         default: () => any;
     };
     indicatorSize: {
         type: StringConstructor;
         default: undefined;
     };
-    inline: BooleanConstructor;
     invalid: BooleanConstructor;
     label: {
         type: (StringConstructor | NumberConstructor)[];
@@ -203,33 +201,44 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, impor
         default: () => any;
     };
     modelValue: {
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor)[];
         default: undefined;
     };
-    pill: BooleanConstructor;
     plaintext: BooleanConstructor;
-    size: StringConstructor;
-    spacing: StringConstructor;
+    size: {
+        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;
+    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;
     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<{}>>, {}>;
 export default _sfc_main;

package/dist/style.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/input-field",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.11",
   "description": "A Vue input field component.",
   "files": [
     "dist"
@@ -8,24 +8,21 @@
   "type": "module",
   "main": "./dist/input-field.umd.cjs",
   "module": "./dist/input-field.js",
+  "style": "./dist/style.css",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/input-field.js",
       "require": "./dist/input-field.umd.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "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",
@@ -46,25 +43,25 @@
   },
   "homepage": "https://github.com/vue-interface/input-field/docs#readme",
   "dependencies": {
-    "@vue-interface/activity-indicator": "^2.0.0-beta.0",
-    "@vue-interface/form-control": "^1.0.0-beta.4"
+    "@vue-interface/activity-indicator": "^2.0.0-beta.10",
+    "@vue-interface/form-control": "^1.0.0-beta.10"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^5.3.0",
-    "@vitejs/plugin-vue": "^3.0.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "autoprefixer": "^10.4.2",
-    "babel-eslint": "^10.1.0",
-    "babel-preset-vue": "^2.0.2",
     "change-case": "^4.1.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint": "^8.28.0",
+    "eslint-plugin-vue": "^9.8.0",
     "pascalcase": "^2.0.0",
     "postcss": "^8.4.6",
     "tailwindcss": "^3.0.18",
-    "vite": "^3.0.0",
+    "tsup": "^6.6.2",
+    "typescript": "^4.0.0",
+    "vite": "^4.0.0",
     "vite-plugin-dts": "^1.7.1",
     "vue": "^3.2.37"
   }