import { defineComponent as c, ref as a, onMounted as d, onUnmounted as f, createVNode as t, Fragment as v, resolveComponent as p } from "vue";
import { ElInput as C, ElEmpty as g } from "element-plus";
import "@klweb/compose-app-engine";
import { am as L, T as r } from "./main-Blxobku2.js";
import { u as y } from "./basics.comp.data-D5b3884D.js";
import { e as E } from "./index-BbdVezoQ.js";
import { C as u } from "./index-CBaO8vm5.js";
const {
  IconSearch: T
} = E, U = /* @__PURE__ */ c({
  name: "KlBasicsCompList",
  components: {
    ElInput: C,
    ElEmpty: g
  },
  setup() {
    let n;
    const o = a(""), i = a(), s = a(y()), l = a(s.value), m = () => {
      if (!o.value) {
        l.value = s.value;
        return;
      }
      l.value = s.value.filter((e) => e.name.includes(o.value));
    };
    return d(() => {
      n = L(i.value);
    }), f(() => {
      n && n.destroy();
    }), () => t(v, null, [t("section", {
      class: u["filter-text"]
    }, [t(p("el-input"), {
      modelValue: o.value,
      "onUpdate:modelValue": (e) => o.value = e,
      "prefix-icon": T,
      placeholder: r.COMP_SEARCH_PLACEHOLDER,
      onKeydown: (e) => {
        e.key === "Enter" && m();
      },
      onClear: m,
      clearable: !0
    }, null)]), l.value.length ? t("ul", {
      class: u["comp-grid-container"],
      ref: i
    }, [l.value.map((e) => t("li", {
      class: "kl-drag-item",
      title: r.DRAG_LAYOUT_TIP_TEXT,
      "data-node": JSON.stringify(e),
      key: e.name
    }, [t("img", {
      src: e.imgUrl,
      style: "object-fit: cover"
    }, null), t("span", {
      class: "label"
    }, [e.name])]))]) : t(p("el-empty"), {
      "image-size": 90,
      description: r.DATA_NULL,
      style: "--el-empty-padding: 100px 0; --el-font-size-base: 12px"
    }, null)]);
  }
});
export {
  U as default
};
