@vue-interface/input-field/dist/input-field.js

A Vue input field component.

import { ActivityIndicator as g } from "@vue-interface/activity-indicator";
import { FormControl as z } from "@vue-interface/form-control";
import { defineComponent as A, resolveComponent as m, resolveDirective as E, openBlock as n, createElementBlock as l, normalizeClass as b, renderSlot as r, toDisplayString as a, createCommentVNode as s, createElementVNode as i, normalizeProps as p, guardReactiveProps as f, withDirectives as I, mergeProps as V, vModelDynamic as D, createVNode as k, Transition as N, withCtx as c, createBlock as y, createTextVNode as T } from "vue";
const B = A({
  name: "InputField",
  components: {
    ActivityIndicator: g
  },
  extends: z
});
const P = (e, t) => {
  const d = e.__vccOpts || e;
  for (const [u, v] of t)
    d[u] = v;
  return d;
}, S = ["for"], w = { class: "form-group-inner" }, G = {
  invalid: "",
  class: "invalid-feedback"
}, M = /* @__PURE__ */ i("br", null, null, -1), O = {
  valid: "",
  class: "valid-feedback"
};
function R(e, t, d, u, v, U) {
  const $ = m("ActivityIndicator"), C = m("FormControlErrors"), F = m("FormControlFeedback"), h = E("bind-events");
  return n(), l("div", {
    class: b(e.formGroupClasses)
  }, [
    r(e.$slots, "label", {}, () => [
      e.label ? (n(), l("label", {
        key: 0,
        ref: "label",
        class: b(e.labelClass),
        for: e.id
      }, a(e.label), 11, S)) : s("", !0)
    ]),
    i("div", w, [
      r(e.$slots, "control", p(f({ bindEvents: e.bindEvents, controlAttributes: e.controlAttributes })), () => [
        e.$slots.icon ? (n(), l("div", {
          key: 0,
          class: "form-group-inner-icon",
          onClick: t[0] || (t[0] = (...o) => e.focus && e.focus(...o))
        }, [
          r(e.$slots, "icon")
        ])) : s("", !0),
        I(i("input", V({
          ref: "field",
          "onUpdate:modelValue": t[1] || (t[1] = (o) => e.model = o)
        }, e.controlAttributes), null, 16), [
          [D, e.model],
          [h]
        ])
      ]),
      r(e.$slots, "activity", {}, () => [
        k(N, { name: "input-field-fade" }, {
          default: c(() => [
            e.activity ? (n(), y($, {
              key: "activity",
              ref: "activity",
              type: e.indicator,
              size: e.indicatorSize || e.size
            }, null, 8, ["type", "size"])) : s("", !0)
          ]),
          _: 1
        })
      ])
    ]),
    r(e.$slots, "errors", p(f({ error: e.error, errors: e.errors, id: e.$attrs.id, name: e.$attrs.name })), () => [
      e.error || e.errors ? (n(), y(C, {
        key: 0,
        id: e.$attrs.id,
        name: e.$attrs.name,
        error: e.error,
        errors: e.errors
      }, {
        default: c(({ error: o }) => [
          i("div", G, [
            T(a(o), 1),
            M
          ])
        ]),
        _: 1
      }, 8, ["id", "name", "error", "errors"])) : s("", !0)
    ]),
    r(e.$slots, "feedback", p(f({ feedback: e.feedback })), () => [
      k(F, { feedback: e.feedback }, {
        default: c(({ feedback: o }) => [
          i("div", O, a(o), 1)
        ]),
        _: 1
      }, 8, ["feedback"])
    ]),
    r(e.$slots, "help", {}, () => [
      e.helpText ? (n(), l("small", {
        key: 0,
        ref: "help"
      }, a(e.helpText), 513)) : s("", !0)
    ])
  ], 2);
}
const J = /* @__PURE__ */ P(B, [["render", R]]);
export {
  J as InputField
};
//# sourceMappingURL=input-field.js.map