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

A Vue select field component.

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 A, 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 E, mergeProps as V, vModelSelect as N, createVNode as k, Transition as T, withCtx as p, createBlock as y, createTextVNode as B } from "vue";
const D = z({
  name: "SelectField",
  components: {
    ActivityIndicator: g
  },
  extends: S,
  props: {
    /**
     * The default class name assigned to the control element
     *
     * @param {String}
     * @default 'form-select'
     */
    formControlClass: {
      type: String,
      default: "form-select"
    }
  },
  computed: {
    controlClass() {
      return this.plaintext ? `${this.formControlClass}-plaintext` : this.formControlClass;
    }
  }
});
const I = (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" }, O = {
  invalid: "",
  class: "invalid-feedback"
}, j = /* @__PURE__ */ a("br", null, null, -1), G = {
  valid: "",
  class: "valid-feedback"
};
function M(e, s, d, u, v, R) {
  const C = m("ActivityIndicator"), $ = m("FormControlErrors"), h = m("FormControlFeedback"), F = A("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),
        E((t(), l("select", V({
          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", {}, () => [
        k(T, { name: "select-field-fade" }, {
          default: p(() => [
            e.activity ? (t(), y(C, {
              key: "activity",
              ref: "activity",
              type: e.indicator,
              size: e.indicatorSize || e.size
            }, null, 8, ["type", "size"])) : n("", !0)
          ]),
          _: 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(), y($, {
        key: 0,
        id: e.$attrs.id,
        name: e.$attrs.name,
        error: e.error,
        errors: e.errors
      }, {
        default: p(({ error: r }) => [
          a("div", O, [
            B(i(r), 1),
            j
          ])
        ]),
        _: 1
      }, 8, ["id", "name", "error", "errors"])) : n("", !0)
    ]),
    o(e.$slots, "feedback", c(f({ feedback: e.feedback })), () => [
      k(h, { feedback: e.feedback }, {
        default: p(({ feedback: r }) => [
          a("div", G, 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__ */ I(D, [["render", M]]);
export {
  J as SelectField
};
//# sourceMappingURL=select-field.js.map