import '@das-fed/ui/packages/components/select-input/style.css';
import { withInstall as F } from "@das-fed/utils/with-install/index";
import { setThemeRule as S } from "@das-fed/web/packages/theme/index";
import { computed as H, ref as b, defineComponent as D, createBlock as k, openBlock as L, unref as e, normalizeClass as x, isRef as v, createSlots as E, withCtx as y, createVNode as B } from "vue";
import { DasInput as W } from "@das-fed/ui/packages/components/input/index";
import { DasIconSearch as K } from "@das-fed/ui/packages/icons/search/index";
import { DasSelect as N } from "@das-fed/ui/packages/components/select/index";
import { useModelValue as C } from "@das-fed/utils/vue";
import "@das-fed/ui/packages/global/theme";
const P = (t, a) => {
  const u = C(t, "modelValue"), i = C(t, "optionValue"), l = C(t, "isExpandAtFocus"), s = H(() => typeof t.width == "number" ? t.width + "px" : t == null ? void 0 : t.width), h = () => {
    a("update:modelValue", u.value);
  }, m = (o) => {
    a("update:modelValue", o), a("inputChange", o);
  }, f = (o) => {
    a("update:modelValue", o), a("dasInput", o);
  }, V = (o) => {
    a("update:optionValue", o), a("selectChange", o);
  }, d = b(""), r = b(!1);
  return {
    innerValue: u,
    selectValue: i,
    inputChangeHandler: m,
    selectChangeHandler: V,
    inputInputHandler: f,
    searchHandler: h,
    inputWidth: d,
    isFocus: r,
    onFocus: () => {
      var p;
      if (!l.value) return;
      let o = (p = s.value) == null ? void 0 : p.replace("px", "");
      d.value = s.value && o * 1 > 400 ? s.value : "400px", r.value = !0;
    },
    onBlur: () => {
      l.value && (d.value = "", r.value = !1);
    },
    isExpandInput: l,
    selectInputWidth: s
  };
}, A = /* @__PURE__ */ D({
  __name: "Index",
  props: {
    options: { default: [] },
    optionValue: { default: "" },
    optionsLabelKey: { default: "label" },
    optionsValueKey: { default: "value" },
    getPopupContainer: {},
    modelValue: { default: "" },
    hasIcon: { type: Boolean, default: !0 },
    maxLength: {},
    disabled: { type: Boolean },
    isView: { type: Boolean },
    error: { type: Boolean },
    isSearch: { type: Boolean, default: !1 },
    isExpandAtFocus: { type: Boolean, default: !1 },
    width: { default: "268px" }
  },
  emits: ["update:modelValue", "update:optionValue", "inputChange", "dasInput", "selectChange"],
  setup(t, { emit: a }) {
    const u = t, i = a, {
      innerValue: l,
      selectValue: s,
      inputChangeHandler: h,
      selectChangeHandler: m,
      inputInputHandler: f,
      searchHandler: V,
      inputWidth: d,
      isFocus: r,
      onFocus: I,
      onBlur: w,
      isExpandInput: o,
      selectInputWidth: p
    } = P(u, i);
    return (n, c) => (L(), k(e(W), {
      class: x(["das-select-input", { "is-error": n.error, "is-search": n.isSearch, "is-disabled": n.disabled }]),
      modelValue: e(l),
      "onUpdate:modelValue": c[1] || (c[1] = (g) => v(l) ? l.value = g : null),
      width: e(o) && e(r) ? e(d) : e(p),
      disabled: n.disabled,
      isView: n.isView,
      maxLength: n.maxLength,
      filterSpace: !1,
      isTitle: !n.isExpandAtFocus,
      onInput: e(f),
      onChange: e(h),
      onFocus: e(I),
      onBlur: e(w)
    }, E({
      prepend: y(() => [
        B(e(N), {
          size: "mini",
          disabled: n.disabled,
          isView: n.isView,
          dropdownClassName: "das-select-input-select-container",
          modelValue: e(s),
          "onUpdate:modelValue": c[0] || (c[0] = (g) => v(s) ? s.value = g : null),
          width: "auto",
          dropdownMatchSelectWidth: !1,
          "border-type": "none",
          options: n.options,
          getPopupContainer: n.getPopupContainer,
          fieldNames: {
            value: n.optionsValueKey,
            label: n.optionsLabelKey
          },
          onChange: e(m)
        }, null, 8, ["disabled", "isView", "modelValue", "options", "getPopupContainer", "fieldNames", "onChange"])
      ]),
      _: 2
      /* DYNAMIC */
    }, [
      n.hasIcon ? {
        name: "suffix",
        fn: y(() => [
          B(e(K), {
            style: { cursor: "pointer" },
            onClick: e(V)
          }, null, 8, ["onClick"])
        ]),
        key: "0"
      } : void 0
    ]), 1032, ["class", "modelValue", "width", "disabled", "isView", "maxLength", "isTitle", "onInput", "onChange", "onFocus", "onBlur"]));
  }
}), T = (t, a) => {
  const u = t.__vccOpts || t;
  for (const [i, l] of a)
    u[i] = l;
  return u;
}, z = /* @__PURE__ */ T(A, [["__scopeId", "data-v-d2cb3159"]]), M = {
  "--das-ui-select-input-border-color": { light: "#999" },
  "--das-ui-select-input-border-color-search": { light: "#D9D9D9" }
}, X = F(z);
S(M);
export {
  X as DasSelectInput,
  X as default
};
