import { defineComponent as V, ref as r, computed as c, createElementBlock as y, openBlock as d, normalizeClass as s, createVNode as v, withDirectives as b, createBlock as B, createCommentVNode as C, unref as i, createElementVNode as M, vModelText as E, withModifiers as N } from "vue";
import P from "../PlIcon16/PlIcon16.vue.js";
import w from "../PlIcon24/PlIcon24.vue.js";
const x = ["disabled", "placeholder"], g = /* @__PURE__ */ V({
  __name: "PlSearchField",
  props: {
    modelValue: {},
    clearable: { type: Boolean },
    placeholder: {},
    disabled: { type: Boolean }
  },
  emits: ["update:modelValue"],
  setup(e, { emit: m }) {
    const o = m, t = e, u = r(void 0), p = r(), a = c({
      get() {
        return t.modelValue ?? "";
      },
      set(l) {
        o("update:modelValue", l);
      }
    }), f = c(() => !!t.modelValue), h = () => o("update:modelValue", "");
    return (l, n) => (d(), y("div", {
      ref_key: "root",
      ref: u,
      class: s(["pl-search-field", [l.$style.component]])
    }, [
      v(i(w), { name: "search" }),
      b(M("input", {
        ref_key: "input",
        ref: p,
        "onUpdate:modelValue": n[0] || (n[0] = (k) => a.value = k),
        disabled: e.disabled,
        type: "text",
        placeholder: e.placeholder || "Find...",
        spellcheck: "false"
      }, null, 8, x), [
        [E, a.value]
      ]),
      e.clearable && f.value ? (d(), B(i(P), {
        key: 0,
        class: s(l.$style.clear),
        name: "delete-clear",
        onClick: N(h, ["stop"])
      }, null, 8, ["class"])) : C("", !0)
    ], 2));
  }
});
export {
  g as default
};
//# sourceMappingURL=PlSearchField.vue2.js.map
