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

A Vue select field component.

import { defineComponent as N, useModel as x, useTemplateRef as d, onMounted as E, useSlots as P, openBlock as s, createElementBlock as m, normalizeClass as V, unref as t, renderSlot as r, toDisplayString as v, createCommentVNode as c, createElementVNode as n, normalizeProps as y, guardReactiveProps as b, withDirectives as D, mergeProps as R, vModelSelect as G, createVNode as g, Transition as I, withCtx as h, createBlock as w, createTextVNode as U, mergeModels as T } from "vue";
import { ActivityIndicator as j } from "@vue-interface/activity-indicator";
import { useFormControl as q, FormControlErrors as H, FormControlFeedback as J } from "@vue-interface/form-control";
const K = ["for"], L = { class: "form-control-inner" }, O = { class: "form-control-activity-indicator" }, Q = {
  invalid: "",
  class: "invalid-feedback"
}, W = {
  valid: "",
  class: "valid-feedback"
}, _ = /* @__PURE__ */ N({
  inheritAttrs: !1,
  __name: "SelectField",
  props: /* @__PURE__ */ T({
    activity: { type: Boolean },
    disabled: { type: Boolean },
    error: {},
    errors: {},
    feedback: {},
    formControlClass: { default: "form-select" },
    helpText: {},
    id: {},
    indicator: {},
    indicatorSize: {},
    invalid: { type: Boolean },
    label: {},
    labelClass: { default: "form-label" },
    modelValue: {},
    name: {},
    plaintext: { type: Boolean },
    size: { default: "form-select-md" },
    color: {},
    readonly: { type: Boolean },
    valid: { type: Boolean },
    value: {}
  }, {
    modelValue: {},
    modelModifiers: {}
  }),
  emits: /* @__PURE__ */ T(["blur", "focus", "focusin", "focusout", "click", "doubleclick", "contextmenu", "mousedown", "mouseup", "mouseover", "mouseout", "mouseenter", "mouseleave", "mousemove", "keydown", "keyup", "keypress", "select", "selectionchange", "invalid", "submit", "reset", "scroll", "wheel", "copy", "cut", "paste", "touchstart", "touchend", "touchmove", "touchcancel", "change", "input", "beforeinput"], ["update:modelValue"]),
  setup(e, { expose: z, emit: F }) {
    const u = e, f = x(e, "modelValue"), M = F, {
      controlAttributes: k,
      formGroupClasses: A,
      listeners: p
    } = q({ model: f, props: u, emit: M }), C = d("activity"), $ = d("help"), S = d("label"), a = d("field"), B = d("wrapper");
    return z({
      activity: C,
      help: $,
      field: a,
      label: S,
      wrapper: B,
      focus: () => a.value?.focus(),
      blur: () => a.value?.blur()
    }), E(() => {
      const o = P().default;
      if (o)
        for (const l of o()) {
          if (!l.props)
            return;
          "selected" in l.props && (l.props.value ?? l.children) && (f.value = l.props.value ?? l.children);
        }
    }), (o, l) => (s(), m("div", {
      ref_key: "wrapper",
      ref: B,
      class: V(["select-field", t(A)])
    }, [
      r(o.$slots, "label", {}, () => [
        u.label ? (s(), m("label", {
          key: 0,
          ref_key: "label",
          ref: S,
          for: t(k).id,
          class: V(e.labelClass),
          onClick: l[0] || (l[0] = (i) => a.value?.click())
        }, v(u.label), 11, K)) : c("", !0)
      ]),
      n("div", L, [
        r(o.$slots, "control", y(b({ controlAttributes: t(k), listeners: t(p) })), () => [
          o.$slots.icon ? (s(), m("div", {
            key: 0,
            class: "form-control-inner-icon",
            onClick: l[1] || (l[1] = (i) => a.value?.focus())
          }, [
            r(o.$slots, "icon")
          ])) : c("", !0),
          D(n("select", R({
            ref_key: "field",
            ref: a,
            "onUpdate:modelValue": l[2] || (l[2] = (i) => f.value = i)
          }, { ...t(k), ...t(p) }), [
            r(o.$slots, "default")
          ], 16), [
            [G, f.value]
          ])
        ]),
        n("div", O, [
          r(o.$slots, "activity", {}, () => [
            g(I, { name: "select-field-fade" }, {
              default: h(() => [
                u.activity && e.indicator ? (s(), w(t(j), {
                  key: "activity",
                  ref_key: "activity",
                  ref: C,
                  type: e.indicator,
                  size: e.indicatorSize
                }, null, 8, ["type", "size"])) : c("", !0)
              ]),
              _: 1
            })
          ])
        ])
      ]),
      r(o.$slots, "errors", y(b({ error: e.error, errors: e.errors, id: e.id, name: e.name })), () => [
        e.error || e.errors ? (s(), w(t(H), {
          key: 0,
          id: e.id && String(e.id),
          name: e.name && String(e.name),
          error: e.error,
          errors: e.errors
        }, {
          default: h(({ error: i }) => [
            n("div", Q, [
              U(v(i), 1),
              l[3] || (l[3] = n("br", null, null, -1))
            ])
          ]),
          _: 1
        }, 8, ["id", "name", "error", "errors"])) : c("", !0)
      ]),
      r(o.$slots, "feedback", y(b({ feedback: e.feedback })), () => [
        g(t(J), { feedback: e.feedback }, {
          default: h(({ feedback: i }) => [
            n("div", W, v(i), 1)
          ]),
          _: 1
        }, 8, ["feedback"])
      ]),
      r(o.$slots, "help", y(b({ helpText: e.helpText })), () => [
        e.helpText ? (s(), m("small", {
          key: 0,
          ref_key: "help",
          ref: $
        }, v(e.helpText), 513)) : c("", !0)
      ])
    ], 2));
  }
});
export {
  _ as SelectField
};
//# sourceMappingURL=select-field.js.map