import { defineComponent as R, useSlots as $, useAttrs as E, useCssModule as T, ref as d, watchEffect as D, watch as f, openBlock as r, createBlock as M, mergeProps as z, createSlots as F, withCtx as b, createElementBlock as _, createElementVNode as L, toDisplayString as B, normalizeClass as g, unref as c, renderSlot as V, createVNode as w } from "vue";
import N from "./Input.js";
import U from "./Select.js";
import { _ as q } from "./Field.vue_vue_type_script_setup_true_lang-CJUQxQdh.js";
import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const P = {
  key: 0,
  class: "flex h-input items-center text-sm"
}, Y = ["id", "aria-labelledby"], j = /* @__PURE__ */ R({
  name: "ll-input-options",
  __name: "InputOptions",
  props: {
    modelValue: { default: () => ({ value: "", option: void 0 }) },
    type: { default: "text" },
    noTruncate: { type: Boolean, default: !1 },
    options: { default: () => [] },
    placeholder: { default: void 0 },
    displayBy: { default: void 0 },
    trackBy: { default: void 0 },
    addBottomSpace: { type: Boolean },
    errorText: {},
    hintText: {},
    id: {},
    errorId: {},
    isReadOnly: { type: Boolean },
    isRequired: { type: Boolean },
    label: {},
    showOptionalInLabel: { type: Boolean },
    isLabelSrOnly: { type: Boolean },
    fieldset: { type: Boolean },
    isDisabled: { type: Boolean },
    disabled: { type: Boolean }
  },
  emits: ["update:model-value", "change"],
  setup(s, { emit: C }) {
    const e = s, o = C, i = $(), m = E(), u = T(), a = d(), v = d(!1), t = d();
    function k(l) {
      a.value = String(l), o("update:model-value", {
        value: a.value,
        option: t.value,
        isValueChange: !0,
        type: "input"
      });
    }
    function x() {
      o("change", {
        value: a.value,
        option: t.value,
        isValueChange: !0,
        type: "input"
      });
    }
    function I(l) {
      t.value = l, o("change", {
        value: a.value,
        option: t.value,
        isValueChange: !1,
        type: "select"
      }), o("update:model-value", {
        value: a.value,
        option: t.value,
        isValueChange: !1,
        type: "select"
      });
    }
    if (D(() => {
      t.value || (t.value = e.options[0]);
    }), f(
      () => e.modelValue.value,
      () => {
        a.value = e.modelValue.value;
      },
      { immediate: !0 }
    ), f(
      () => e.modelValue.option,
      () => {
        t.value = e.modelValue.option;
      },
      { immediate: !0 }
    ), m.value)
      throw new Error("ll-input-options: use :model-value or v-model instead of :value.");
    if (m.onInput)
      throw new Error("ll-input-options: use the @update:model-value event instead of @input");
    return (l, n) => {
      var y;
      return r(), M(q, z(e, {
        class: "stash-input-options",
        "data-test": "stash-input-options"
      }), F({
        default: b(({ fieldId: p, labelId: S }) => {
          var h;
          return [
            e.isReadOnly ? (r(), _("div", P, [
              L("span", {
                id: p,
                "aria-labelledby": S,
                class: "h-min"
              }, B(a.value || 0) + " " + B((h = t.value) == null ? void 0 : h.name), 9, Y)
            ])) : (r(), _("div", {
              key: 1,
              class: g(["flex", [c(u)["input-wrapper"], { [c(u)["has-error"]]: !!e.errorText }]])
            }, [
              V(l.$slots, "default", { fieldId: p }, () => [
                w(N, {
                  id: p,
                  class: "stash-input-options__input",
                  "data-test": "stash-input-options|input",
                  type: e.type,
                  "model-value": a.value,
                  disabled: e.isDisabled || e.disabled,
                  placeholder: e.placeholder,
                  onChange: x,
                  "onUpdate:modelValue": k,
                  onBlur: n[0] || (n[0] = (O) => v.value = !1),
                  onFocus: n[1] || (n[1] = (O) => v.value = !0)
                }, null, 8, ["id", "type", "model-value", "disabled", "placeholder"])
              ]),
              w(U, {
                single: "",
                "hide-search": "",
                "prevent-empty": "",
                class: g(["stash-input-options__select min-w-20", c(u).select]),
                "data-test": "stash-input-options|select",
                "no-truncate": s.noTruncate,
                options: s.options,
                "model-value": t.value,
                "display-by": e.displayBy,
                "track-by": e.trackBy,
                disabled: e.isDisabled || e.disabled,
                "onUpdate:modelValue": I
              }, null, 8, ["class", "no-truncate", "options", "model-value", "display-by", "track-by", "disabled"])
            ], 2))
          ];
        }),
        _: 2
      }, [
        (y = i.hint) != null && y.call(i) ? {
          name: "hint",
          fn: b(() => [
            V(l.$slots, "hint")
          ]),
          key: "0"
        } : void 0
      ]), 1040);
    };
  }
}), G = "_select_1n5Ip", H = {
  "input-wrapper": "_input-wrapper_7V7RR",
  "has-error": "_has-error_zY5_R",
  select: G
}, J = {
  $style: H
}, ee = /* @__PURE__ */ A(j, [["__cssModules", J]]);
export {
  ee as default
};
//# sourceMappingURL=InputOptions.js.map
