import { defineComponent as C, useSlots as S, ref as i, computed as V, openBlock as h, createBlock as m, withKeys as s, normalizeClass as p, createSlots as I, withCtx as r, createVNode as u, createCommentVNode as T, unref as K, renderSlot as L } from "vue";
import { t as f } from "./locale.js";
import b from "./Button.js";
import v from "./Icon.js";
import W from "./Input.js";
import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const M = /* @__PURE__ */ C({
  name: "ll-search-bar",
  __name: "SearchBar",
  props: {
    isLoading: { type: Boolean, default: !1 },
    isWorking: { type: Boolean, default: !1 },
    modelValue: { default: "" },
    placeholder: { default: f("ll.search") },
    label: { default: f("ll.search") },
    hintText: { default: void 0 }
  },
  emits: ["search", "update:model-value"],
  setup(_, { emit: y }) {
    const e = _, l = y, k = S(), a = i(e.modelValue), d = i(), g = V(() => a.value ? 0 : -1);
    function o() {
      e.isLoading || e.isWorking || l("search", a.value);
    }
    function c() {
      var n, t;
      a.value = "", l("search", ""), l("update:model-value", ""), (t = (n = d.value) == null ? void 0 : n.inputEl) == null || t.focus();
    }
    function x() {
      l("update:model-value", a.value);
    }
    return (n, t) => (h(), m(W, {
      ref_key: "stashInputRef",
      ref: d,
      modelValue: a.value,
      "onUpdate:modelValue": [
        t[0] || (t[0] = (B) => a.value = B),
        x
      ],
      class: p(["stash-search-bar", [{ "stash-search-bar--value": !!a.value }]]),
      label: e.label,
      placeholder: e.placeholder,
      "hint-text": e.hintText,
      "data-test": "stash-search-bar",
      onKeyup: s(o, ["enter"])
    }, I({
      append: r(() => [
        a.value ? (h(), m(b, {
          key: 0,
          class: "stash-search-bar__clear-button",
          disabled: e.isLoading,
          "data-test": "stash-search-bar|clear-button",
          onClick: c,
          onKeyup: [
            s(c, ["enter"]),
            s(c, ["space"])
          ]
        }, {
          default: r(() => [
            u(v, { name: "close" })
          ]),
          _: 1
        }, 8, ["disabled"])) : T("", !0),
        u(b, {
          tabindex: g.value,
          "data-test": "stash-search-bar|search-button",
          disabled: e.isLoading,
          class: "stash-search-bar__search-button",
          onClick: o,
          onKeyup: [
            s(o, ["enter"]),
            s(o, ["space"])
          ]
        }, {
          default: r(() => [
            u(v, {
              class: p({ "animate-spin": e.isWorking }),
              name: e.isWorking ? "loading-empty" : "search"
            }, null, 8, ["class", "name"])
          ]),
          _: 1
        }, 8, ["tabindex", "disabled"])
      ]),
      _: 2
    }, [
      K(k).hint ? {
        name: "hint",
        fn: r(() => [
          L(n.$slots, "hint")
        ]),
        key: "0"
      } : void 0
    ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
  }
}), N = {}, R = {
  $style: N
}, A = /* @__PURE__ */ w(M, [["__cssModules", R]]);
export {
  A as default
};
//# sourceMappingURL=SearchBar.js.map
