import { defineComponent as d, ref as s, createVNode as l, Fragment as f, resolveComponent as n } from "vue";
import { ElButton as C, ElInput as v, ElEmpty as E, ElIcon as y } from "element-plus";
import "@klweb/compose-app-engine";
import "@klweb/utils";
import { T as p, A as g } from "./main-DXvReGBc.js";
import { u as h } from "./basics.comp.data-CP4WPLqa.js";
import { e as x } from "./index-ClGUov3E.js";
import { C as u } from "./index-BsKljg-a.js";
const {
  IconSearch: k,
  IconSelected: A
} = x, H = /* @__PURE__ */ d({
  name: "KlBasicsCompRep",
  components: {
    ElButton: C,
    ElInput: v,
    ElEmpty: E,
    ElIcon: y,
    IconSelected: A
  },
  emits: ["handleNodeClick"],
  setup(N, {
    emit: i
  }) {
    const o = s(""), r = s(h()), t = s(r.value), a = s(""), c = () => {
      if (!o.value) {
        t.value = r.value;
        return;
      }
      t.value = r.value.filter((e) => e.name.includes(o.value));
    }, m = (e) => {
      if (a.value === e.component) {
        a.value = "", i("handleNodeClick", null);
        return;
      }
      a.value = e.component, i("handleNodeClick", e);
    };
    return () => l(f, null, [l("section", {
      class: u["filter-text"]
    }, [l(n("el-input"), {
      modelValue: o.value,
      "onUpdate:modelValue": (e) => o.value = e,
      "prefix-icon": k,
      placeholder: p.COMP_SEARCH_PLACEHOLDER,
      onKeydown: (e) => {
        e.key === "Enter" && c();
      },
      onClear: c,
      clearable: !0
    }, null), l(n("el-button"), {
      type: "primary",
      style: "margin-left: 10px",
      onClick: c
    }, {
      default: () => [g.SEARCH]
    })]), t.value.length ? l("ul", {
      class: u["comp-grid-container"]
    }, [t.value.map((e) => l("li", {
      class: a.value === e.component && "active",
      key: e.name,
      onClick: () => m(e)
    }, [l("img", {
      src: e.imgUrl,
      style: "object-fit: cover"
    }, null), l("span", {
      class: "label"
    }, [e.name]), l(n("el-icon"), null, {
      default: () => [l(n("icon-selected"), null, null)]
    })]))]) : l(n("el-empty"), {
      "image-size": 90,
      description: p.DATA_NULL,
      style: "--el-empty-padding: 50px 0; --el-font-size-base: 12px"
    }, null)]);
  }
});
export {
  H as default
};
