@oneb/ui-vue 0.3.27 → 0.3.28

package/dist/entityPicker/index.js

@@ -1,68 +1,735 @@
-import { defineComponent as ge, computed as f, ref as g, onMounted as me, onUnmounted as pe, watch as te, openBlock as l, createElementBlock as a, Fragment as le, createElementVNode as s, normalizeClass as u, renderSlot as m, unref as V, toDisplayString as d, createCommentVNode as c, createBlock as $, resolveDynamicComponent as ne, createTextVNode as z, withModifiers as ae, withCtx as ke, withDirectives as be, vModelText as Ce, renderList as we, createVNode as Se, nextTick as Ee } from "vue";
-import { u as Ve, O as Le } from "../useModal-85f57682.js";
-import { _ as se } from "../OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
+import { defineComponent as M, openBlock as a, createBlock as F, unref as d, withCtx as E, createElementBlock as o, renderSlot as f, createCommentVNode as C, computed as S, normalizeClass as v, toDisplayString as x, createElementVNode as r, normalizeStyle as X, resolveDynamicComponent as H, withModifiers as Q, createTextVNode as G, ref as I, onMounted as ne, onUnmounted as ae, watch as Y, nextTick as ie, createVNode as q, Fragment as Z, renderList as se, createSlots as R, normalizeProps as oe, guardReactiveProps as re, isRef as de } from "vue";
+import { O as ue, u as ce } from "../useModal-85f57682.js";
+import { _ as D } from "../OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
 import "vue-markdown-render";
 import "../OneMarkdown.vue_vue_type_style_index_0_lang-4ed993c7.js";
 import "../SpinnerIcon.vue_vue_type_style_index_0_lang-4ed993c7.js";
-import { useOnebI18n as Be } from "../i18n/index.js";
+import { useOnebI18n as ye } from "../i18n/index.js";
 import "../_plugin-vue_export-helper-dad06003.js";
-const Me = { key: 0 }, Ae = { class: "" }, qe = {
-  key: 0,
-  class: "space-y-1 flex flex-col"
-}, je = {
-  key: 0,
-  class: "text-gray-400 text-xs font-light"
-}, $e = {
-  key: 0,
-  class: "text-[10px] text-gray-500 ml-1 py-0.5 rounded-full font-semibold hover:text-info-base"
-}, ze = {
+const fe = {
   key: 0,
   class: "overflow-auto max-h-[85dvh] h-full"
-}, Oe = {
+}, ve = {
   key: 1,
   class: "overflow-auto max-h-[85dvh] h-full"
-}, Ie = {
+}, me = {
   key: 2,
   class: "pb-6"
-}, Ne = {
+}, ge = {
   key: 0,
   class: "px-2 pt-3"
-}, Te = {
-  key: 1,
-  class: "relative px-3 py-3"
-}, Ke = { class: "relative" }, Pe = ["placeholder"], Ue = {
-  key: 2,
-  class: "px-2 py-3 h-[62px]"
-}, Fe = {
+}, be = /* @__PURE__ */ M({
+  __name: "EntityPickerModal",
+  props: {
+    useModal: {
+      type: Object,
+      required: !0
+    },
+    title: { type: String, default: "" },
+    titleCenter: { type: Boolean, default: !1 },
+    size: {
+      type: String,
+      default: "sm"
+    },
+    mobileView: { type: Boolean, default: !1 },
+    view: {
+      type: String,
+      default: "browse"
+    }
+  },
+  setup(e) {
+    return (l, t) => e.useModal.isOpened.value ? (a(), F(d(ue), {
+      key: 0,
+      useModal: e.useModal,
+      title: e.title,
+      size: e.size,
+      classModal: e.mobileView,
+      titleCenter: e.titleCenter
+    }, {
+      default: E(() => [
+        e.view === "create" ? (a(), o("div", fe, [
+          f(l.$slots, "create")
+        ])) : e.view === "edit" ? (a(), o("div", ve, [
+          f(l.$slots, "edit")
+        ])) : (a(), o("div", me, [
+          l.$slots.header ? (a(), o("div", ge, [
+            f(l.$slots, "header")
+          ])) : C("", !0),
+          f(l.$slots, "search"),
+          f(l.$slots, "prepend"),
+          f(l.$slots, "createButton"),
+          f(l.$slots, "list")
+        ]))
+      ]),
+      _: 3
+    }, 8, ["useModal", "title", "size", "classModal", "titleCenter"])) : C("", !0);
+  }
+}), he = {
   key: 0,
-  class: "flex items-center justify-center py-8"
-}, Ge = {
-  key: 1,
-  class: "relative px-5 py-10 text-center"
-}, He = { class: "mb-4 text-sm text-gray-500" }, We = {
-  key: 2,
-  class: "p-3 text-center mt-6"
-}, Je = { class: "text-xs" }, Re = ["onClick"], Xe = { class: "mr-2" }, Ye = { class: "w-full" }, Ze = { class: "font-bold truncate overflow-hidden sm:max-w-[400px] max-w-[280px] text-xs" }, Qe = {
+  class: "relative select-none inline-flex items-center gap-3"
+}, ke = { class: "text-sm font-medium truncate text-inherit" }, Se = ["aria-label"], Ce = {
   key: 0,
-  class: "text-xs text-gray-600 divide-x font-thin"
-}, De = { class: "px-2 first:pl-0" }, _e = ["onClick"], et = {
+  class: "w-4 h-4",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, xe = {
   key: 1,
-  class: "w-5 h-5 text-green-500 flex-shrink-0",
+  class: "w-4 h-4",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "2"
-}, tt = {
-  key: 2,
-  class: "w-5 h-5 text-gray-400 flex-shrink-0",
+}, Ee = { key: 0 }, Le = { class: "" }, we = {
+  key: 0,
+  class: "space-y-1 flex flex-col"
+}, $e = {
+  key: 0,
+  class: "text-gray-400 text-xs font-light"
+}, Ve = {
+  key: 0,
+  class: "text-[10px] text-gray-500 ml-1 py-0.5 rounded-full font-semibold hover:text-info-base"
+}, Ae = /* @__PURE__ */ M({
+  __name: "EntityPickerTrigger",
+  props: {
+    variant: {
+      type: String,
+      default: "default"
+    },
+    modelValue: { type: [Object, null], default: null },
+    icon: { type: [Object, Function, null], default: null },
+    title: { type: String, default: "" },
+    labelSelect: { type: String, default: "" },
+    labelSelectNote: { type: String, default: "" },
+    labelClass: { type: String, default: "" },
+    iconClass: { type: String, default: "" },
+    iconClassBlock: { type: String, default: "" },
+    noIcon: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    tagColor: { type: String, default: "#525B66" },
+    changeLabel: { type: String, default: "" },
+    resolvers: { type: Object, required: !0 }
+  },
+  emits: ["open", "clear"],
+  setup(e, { emit: l }) {
+    const t = e, n = l, m = () => n("open"), i = S(() => t.variant === "compact" || t.variant === "minimal"), g = S(() => t.variant === "compact"), c = S(() => t.variant === "pill"), y = S(() => t.modelValue == null ? {} : { backgroundColor: `${t.tagColor}1A` }), L = S(
+      () => t.modelValue != null ? t.tagColor : "#979CA9"
+    );
+    return (s, h) => e.variant === "tag" ? (a(), o("div", he, [
+      f(s.$slots, "button", {
+        title: e.title,
+        modelValue: e.modelValue,
+        openModal: m
+      }, () => [
+        e.title ? (a(), o("p", {
+          key: 0,
+          class: v(["font-semibold text-black", e.labelClass])
+        }, x(e.title), 3)) : C("", !0),
+        r("div", {
+          class: v([
+            "flex items-center gap-2 h-10 px-3 rounded-xl transition-colors",
+            e.readonly ? "" : "cursor-pointer",
+            e.modelValue == null ? "bg-[#FAFAFA] hover:bg-gray-100 text-[#979CA9]" : "hover:opacity-90 text-black"
+          ]),
+          style: X(y.value),
+          onClick: m
+        }, [
+          e.icon ? (a(), F(H(e.icon), {
+            key: 0,
+            class: v(["w-5 h-5 flex-shrink-0", e.iconClass]),
+            style: X({ color: L.value })
+          }, null, 8, ["style", "class"])) : C("", !0),
+          r("span", ke, x(e.modelValue != null ? e.resolvers.getEntityLabel(e.modelValue) : e.labelSelect), 1),
+          e.readonly ? C("", !0) : (a(), o("button", {
+            key: 1,
+            type: "button",
+            class: "text-[#979CA9] hover:text-gray-700 flex-shrink-0 -mr-1",
+            "aria-label": e.changeLabel,
+            onClick: h[0] || (h[0] = Q((w) => e.modelValue != null ? s.$emit("clear") : m(), ["stop"]))
+          }, [
+            e.modelValue != null ? (a(), o("svg", Ce, [...h[2] || (h[2] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M6 18L18 6M6 6l12 12"
+              }, null, -1)
+            ])])) : (a(), o("svg", xe, [...h[3] || (h[3] = [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+              }, null, -1)
+            ])]))
+          ], 8, Se))
+        ], 6)
+      ])
+    ])) : (a(), o("div", {
+      key: 1,
+      class: v(["relative select-none", i.value ? "space-y-1.5" : "space-y-3"])
+    }, [
+      f(s.$slots, "button", {
+        title: e.title,
+        modelValue: e.modelValue,
+        openModal: m
+      }, () => [
+        e.title ? (a(), o("p", {
+          key: 0,
+          class: v(["font-semibold pb-0", e.labelClass])
+        }, x(e.title), 3)) : C("", !0),
+        r("div", {
+          class: v(["flex justify-between z-10 items-center", [
+            e.readonly ? "" : "cursor-pointer hover:bg-gray-50",
+            i.value ? ["rounded-full", g.value ? "bg-[#4089E01A]" : ""] : "border px-3 pr-3 py-3 rounded-lg h-[72px]",
+            c.value ? "border-none !py-0 h-max !rounded-full" : "",
+            c.value && e.modelValue !== null ? "bg-[#4089E01A]" : ""
+          ]])
+        }, [
+          r("div", {
+            class: v(["flex items-center w-full gap-x-3", [i.value ? "!gap-x-1 px-0.5 py-0.5" : "", c.value ? "h-9 p-0" : ""]]),
+            onClick: m
+          }, [
+            !e.noIcon && (c.value || i.value || e.icon || e.modelValue) ? (a(), o("div", {
+              key: 0,
+              class: v(["w-10 h-10 flex items-center justify-center", e.iconClassBlock])
+            }, [
+              c.value ? (a(), o("div", Ee, [
+                e.modelValue == null ? (a(), o("svg", {
+                  key: 0,
+                  class: v(["w-3 text-blue-600", e.iconClass]),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  "stroke-width": "2"
+                }, [...h[4] || (h[4] = [
+                  r("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M12 4.5v15m7.5-7.5h-15"
+                  }, null, -1)
+                ])], 2)) : (a(), F(H(e.icon), {
+                  key: 1,
+                  class: v(["w-5", e.iconClass])
+                }, null, 8, ["class"]))
+              ])) : e.icon != null && e.modelValue == null || i.value ? (a(), o("div", {
+                key: 1,
+                class: v(i.value ? "" : "bg-gray-50 p-2.5 rounded-lg")
+              }, [
+                (a(), F(H(e.icon), {
+                  class: v([["w-5", e.iconClass], "text-gray-600"])
+                }, null, 8, ["class"]))
+              ], 2)) : e.modelValue ? (a(), F(d(D), {
+                key: 2,
+                text: e.resolvers.getEntityLabel(e.modelValue),
+                src: e.resolvers.getEntityAvatar(e.modelValue),
+                rounded: !1,
+                size: "40",
+                class: "!rounded-lg"
+              }, null, 8, ["text", "src"])) : C("", !0)
+            ], 2)) : C("", !0),
+            r("div", Le, [
+              e.modelValue == null ? (a(), o("div", we, [
+                r("div", {
+                  class: v(["font-medium text-gray-600 truncate overflow-hidden whitespace-nowrap", [
+                    i.value ? "text-xs truncate max-w-[120px] text-[#525B66]" : "text-sm",
+                    c.value ? "!text-xs truncate max-w-[120px] text-[#4089E0]" : ""
+                  ]])
+                }, x(e.labelSelect), 3),
+                e.labelSelectNote && !i.value && !c.value ? (a(), o("span", $e, x(e.labelSelectNote), 1)) : C("", !0)
+              ])) : (a(), o("div", {
+                key: 1,
+                class: v(["grid items-center pr-2", i.value ? "" : "py-1"])
+              }, [
+                r("div", {
+                  class: v(["break-all leading-4 truncate !text-sm", {
+                    "text-sm font-medium": e.resolvers.getEntityLabel(e.modelValue).length < 20,
+                    "text-xs font-semibold": e.resolvers.getEntityLabel(e.modelValue).length > 20,
+                    "truncate text-[#525B66] text-xs": i.value,
+                    "truncate text-xs": c.value
+                  }])
+                }, [
+                  G(x(e.resolvers.getEntityLabel(e.modelValue)) + " ", 1),
+                  !e.readonly && !i.value && !c.value ? (a(), o("span", Ve, x(e.changeLabel), 1)) : C("", !0)
+                ], 2),
+                e.resolvers.getEntityAdditional(e.modelValue) ? (a(), o("div", {
+                  key: 0,
+                  class: v(["font-thin leading-3 break-all line-clamp-2 pt-1 truncate !text-xs", {
+                    "text-xs": e.resolvers.getEntityAdditional(e.modelValue).length < 20,
+                    "text-[10px]": e.resolvers.getEntityAdditional(e.modelValue).length > 20 && e.resolvers.getEntityAdditional(e.modelValue).length < 35,
+                    "text-[9px]": e.resolvers.getEntityAdditional(e.modelValue).length > 35
+                  }])
+                }, [
+                  f(s.$slots, "entityAdditional", { item: e.modelValue }, () => [
+                    G(x(e.resolvers.getEntityAdditional(e.modelValue)), 1)
+                  ])
+                ], 2)) : C("", !0)
+              ], 2))
+            ])
+          ], 2),
+          e.modelValue != null && !e.readonly ? (a(), o("button", {
+            key: 0,
+            type: "button",
+            class: v(["rounded-full hover:text-gray-900 text-gray-500", { "mr-2 text-[#525B66] p-0.5": i.value }]),
+            onClick: h[1] || (h[1] = Q((w) => s.$emit("clear"), ["stop"]))
+          }, [...h[5] || (h[5] = [
+            r("svg", {
+              class: "w-4 h-4",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M6 18L18 6M6 6l12 12"
+              })
+            ], -1)
+          ])], 2)) : !e.readonly && !i.value && !c.value ? (a(), o("button", {
+            key: 1,
+            type: "button",
+            class: "py-2.5 text-gray-500",
+            onClick: m
+          }, [...h[6] || (h[6] = [
+            r("svg", {
+              class: "w-5 h-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "stroke-width": "2"
+            }, [
+              r("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+              })
+            ], -1)
+          ])])) : C("", !0)
+        ], 2)
+      ])
+    ], 2));
+  }
+});
+function Ie(e) {
+  const l = (s) => s ? String(s[e.entityLabel] || "") : "", t = (s) => !s || !e.entityAvatar ? "" : String(s[e.entityAvatar] || ""), n = (s) => !s || !e.entityAdditional ? "" : String(s[e.entityAdditional] || ""), m = (s) => s ? s[e.entityKey] : "", i = (s) => s[e.entityListKey];
+  return {
+    getEntityLabel: l,
+    getEntityAvatar: t,
+    getEntityAdditional: n,
+    getEntityKey: m,
+    getEntityListKey: i,
+    getEntityListLabel: (s) => String(s[e.entityListLabel] || ""),
+    getEntityListAvatar: (s) => e.entityListAvatar ? String(s[e.entityListAvatar] || "") : "",
+    getEntityListAdditional: (s) => e.entityListAdditional ? String(s[e.entityListAdditional] || "") : "",
+    isSelected: (s) => m(e.modelValue) === i(s)
+  };
+}
+function Be(e, l) {
+  const t = e.listEntityUse ? e.listEntityUse() : null, n = t == null ? void 0 : t.nodes, m = t == null ? void 0 : t.load, i = t == null ? void 0 : t.searchTerm, g = t == null ? void 0 : t.isLoading, c = t == null ? void 0 : t.isLoad, y = t == null ? void 0 : t.group, L = I(null), s = S(() => (y == null ? void 0 : y.value) ?? L.value), h = (k) => {
+    y ? y.value = k : L.value = k;
+  }, w = I(""), T = S({
+    get: () => (i == null ? void 0 : i.value) ?? w.value,
+    set: (k) => {
+      i ? i.value = k : w.value = k;
+    }
+  }), O = () => {
+    w.value = "", i && (i.value = "");
+  }, P = S(() => (g == null ? void 0 : g.value) ?? e.isLoading), z = S(() => (n == null ? void 0 : n.value) ?? e.items), u = S(() => {
+    const k = z.value;
+    if (e.modelValue == null)
+      return k;
+    const B = l.getEntityKey(e.modelValue);
+    return k.some(
+      ($) => l.getEntityListKey($) === B
+    ) ? k : [e.modelValue, ...k];
+  }), j = S(() => {
+    if (!T.value)
+      return u.value;
+    const k = T.value.toLowerCase(), B = e.modelValue != null ? l.getEntityKey(e.modelValue) : null;
+    return u.value.filter((V) => {
+      if (B != null && l.getEntityListKey(V) === B)
+        return !0;
+      const $ = l.getEntityListLabel(V).toLowerCase(), K = l.getEntityListAdditional(V).toLowerCase();
+      return $.includes(k) || K.includes(k);
+    });
+  }), W = S(() => {
+    const k = j.value;
+    if (e.modelValue == null)
+      return k;
+    const B = l.getEntityKey(e.modelValue), V = k.findIndex(
+      (N) => l.getEntityListKey(N) === B
+    );
+    if (V <= 0)
+      return k;
+    const $ = k.slice(), [K] = $.splice(V, 1);
+    return $.unshift(K), $;
+  });
+  return {
+    // dynamic data hooks (exposed for modal lifecycle watchers)
+    load: m,
+    dynamicIsLoad: c,
+    nodes: n,
+    // search
+    searchTerm: T,
+    clearSearchTerm: O,
+    // group selection (for prepend slot)
+    selectedGroup: s,
+    setSelectedGroup: h,
+    // items pipeline
+    rawItems: z,
+    availableItems: u,
+    filteredItems: j,
+    sortedItems: W,
+    // state
+    loading: P
+  };
+}
+function Me(e, l, t) {
+  const n = ce(), m = I(null), i = I(!1), g = I(null), c = I(!1), y = I(e.modalSize), L = I(!1);
+  let s = null;
+  ne(() => {
+    s = window.matchMedia("(max-width: 767px)"), L.value = s.matches;
+    const u = (j) => {
+      L.value = j.matches;
+    };
+    s.addEventListener("change", u), ae(() => {
+      s == null || s.removeEventListener("change", u);
+    });
+  });
+  const h = () => {
+    e.readonly || (l.clearSearchTerm(), i.value = !1, g.value = null, c.value = !1, y.value = e.modalSize, n.open(), ie(() => {
+      var u;
+      (u = m.value) == null || u.focus();
+    }));
+  }, w = (u) => {
+    t("update:modelValue", u), n.close();
+  }, T = () => {
+    t("update:modelValue", null);
+  }, O = () => {
+    i.value = !0, y.value = e.sizeModalCreateEntity;
+  }, P = (u) => {
+    g.value = u, y.value = e.sizeModalCreateEntity;
+  }, z = (u) => {
+    i.value = !1, g.value = null, c.value = !1, y.value = e.modalSize, u ? (n.close(), t("update:modelValue", u)) : !l.loading.value && l.availableItems.value.length === 0 && !l.searchTerm.value && n.close();
+  };
+  return Y(n.isOpened, (u) => {
+    u && l.load && l.load(), u || (i.value = !1, y.value = e.modalSize);
+  }), Y(
+    () => {
+      var u;
+      return (u = l.dynamicIsLoad) == null ? void 0 : u.value;
+    },
+    () => {
+      var u;
+      l.dynamicIsLoad && !l.loading.value && l.dynamicIsLoad.value && !l.searchTerm.value && ((u = l.nodes) == null ? void 0 : u.value.length) === 0 && (c.value = !0, y.value = e.sizeModalCreateEntity);
+    }
+  ), {
+    modal: n,
+    searchInput: m,
+    creatingEntity: i,
+    editEntity: g,
+    startCreate: c,
+    currentModalSize: y,
+    isMobileView: L,
+    openPicker: h,
+    selectItem: w,
+    onClear: T,
+    onCreateEntity: O,
+    onEditEntity: P,
+    onCloseCreateEntity: z
+  };
+}
+const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe = ["value", "placeholder"], je = /* @__PURE__ */ M({
+  __name: "EntityPickerSearch",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: l, emit: t }) {
+    const n = t, m = I(null), i = (g) => {
+      n("update:modelValue", g.target.value);
+    };
+    return l({
+      focus: () => {
+        var g;
+        return (g = m.value) == null ? void 0 : g.focus();
+      }
+    }), (g, c) => (a(), o("div", Te, [
+      r("div", ze, [
+        c[0] || (c[0] = r("svg", {
+          class: "absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#979CA9]",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          "stroke-width": "2"
+        }, [
+          r("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          })
+        ], -1)),
+        r("input", {
+          ref_key: "inputRef",
+          ref: m,
+          value: e.modelValue,
+          type: "text",
+          class: "w-full h-10 pl-11 pr-3 border border-[#E2E7EF] rounded-[10px] text-sm placeholder:text-[#979CA9] focus:outline-none focus:ring-2 focus:ring-primary-base focus:border-transparent",
+          placeholder: e.placeholder,
+          onInput: i
+        }, null, 40, qe)
+      ])
+    ]));
+  }
+}), Fe = { class: "px-3 pb-2" }, Oe = { class: "text-xs font-semibold tracking-[0.4px]" }, Pe = /* @__PURE__ */ M({
+  __name: "EntityPickerCreateButton",
+  props: {
+    label: { type: String, required: !0 }
+  },
+  emits: ["click"],
+  setup(e) {
+    return (l, t) => (a(), o("div", Fe, [
+      r("button", {
+        type: "button",
+        class: "w-full h-10 flex items-center justify-center gap-2 bg-[#FAFAFA] border border-[#E3ECF2] rounded-[10px] text-[#4089E0] hover:bg-[#F2F4F8] hover:border-[#D6DDE7] transition-colors",
+        onClick: t[0] || (t[0] = (n) => l.$emit("click"))
+      }, [
+        t[1] || (t[1] = r("svg", {
+          class: "w-4 h-4",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          "stroke-width": "2"
+        }, [
+          r("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M12 4.5v15m7.5-7.5h-15"
+          })
+        ], -1)),
+        r("span", Oe, x(e.label), 1)
+      ])
+    ]));
+  }
+}), Ke = {
+  key: 0,
+  class: "flex items-center justify-center w-8 h-8 flex-shrink-0"
+}, Ne = {
+  key: 0,
+  class: "w-5 h-5 rounded-full bg-[#4089E0] flex items-center justify-center"
+}, Ue = {
+  key: 1,
+  class: "w-4 h-4 text-[#525B66]",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "2"
-}, lt = {
+}, Re = /* @__PURE__ */ M({
+  __name: "EntityPickerIndicator",
+  props: {
+    variant: {
+      type: String,
+      default: "check"
+    },
+    selected: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (l, t) => e.variant !== "none" ? (a(), o("div", Ke, [
+      e.selected ? (a(), o("span", Ne, [...t[0] || (t[0] = [
+        r("svg", {
+          class: "w-3 h-3 text-white",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          "stroke-width": "3"
+        }, [
+          r("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M4.5 12.75l6 6 9-13.5"
+          })
+        ], -1)
+      ])])) : e.variant === "navigation" ? (a(), o("svg", Ue, [...t[1] || (t[1] = [
+        r("path", {
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+        }, null, -1)
+      ])])) : C("", !0)
+    ])) : C("", !0);
+  }
+}), Ge = { class: "flex-1 min-w-0" }, We = /* @__PURE__ */ M({
+  __name: "EntityPickerListItem",
+  props: {
+    selected: { type: Boolean, default: !1 },
+    title: { type: String, default: "" },
+    subtitle: { type: String, default: "" },
+    avatarText: { type: String, default: "" },
+    avatarSrc: { type: String, default: "" },
+    avatarSize: { type: [String, Number], default: 40 },
+    iconWrapperClass: { type: String, default: "" },
+    itemClass: { type: String, default: "" },
+    titleClass: { type: String, default: "" },
+    subtitleClass: { type: String, default: "" },
+    indicator: {
+      type: String,
+      default: "check"
+    },
+    showEdit: { type: Boolean, default: !1 },
+    editLabel: { type: String, default: "" }
+  },
+  emits: ["select", "edit"],
+  setup(e) {
+    return (l, t) => (a(), o("div", {
+      class: v(["flex items-center gap-3 py-3 px-4 hover:bg-secondary-body-hover cursor-pointer", [{ "bg-gray-50": e.selected }, e.itemClass]]),
+      onClick: t[1] || (t[1] = (n) => l.$emit("select"))
+    }, [
+      r("div", {
+        class: v(["flex-shrink-0", e.iconWrapperClass])
+      }, [
+        f(l.$slots, "icon", {}, () => [
+          q(d(D), {
+            text: e.avatarText,
+            src: e.avatarSrc,
+            rounded: !1,
+            size: String(e.avatarSize),
+            class: "!rounded-[10px]"
+          }, null, 8, ["text", "src", "size"])
+        ])
+      ], 2),
+      r("div", Ge, [
+        r("p", {
+          class: v(e.titleClass)
+        }, x(e.title), 3),
+        e.subtitle ? (a(), o("div", {
+          key: 0,
+          class: v(e.subtitleClass)
+        }, [
+          f(l.$slots, "additional", {}, () => [
+            G(x(e.subtitle), 1)
+          ])
+        ], 2)) : C("", !0)
+      ]),
+      e.showEdit ? (a(), o("button", {
+        key: 0,
+        type: "button",
+        class: "text-xs font-semibold text-[#4089E0] hover:text-primary-active flex-shrink-0 tracking-[0.4px]",
+        onClick: t[0] || (t[0] = Q((n) => l.$emit("edit"), ["stop"]))
+      }, x(e.editLabel), 1)) : C("", !0),
+      q(Re, {
+        variant: e.indicator,
+        selected: e.selected
+      }, null, 8, ["variant", "selected"])
+    ], 2));
+  }
+}), He = {
+  key: 0,
+  class: "flex items-center justify-center py-8"
+}, Qe = {
   key: 1,
+  class: "relative px-5 py-10 text-center"
+}, Je = { class: "mb-4 text-sm text-gray-500" }, Xe = {
+  key: 2,
+  class: "p-3 text-center mt-6"
+}, Ye = { class: "text-xs" }, Ze = /* @__PURE__ */ M({
+  __name: "EntityPickerList",
+  props: {
+    loading: { type: Boolean, default: !1 },
+    items: { type: Array, default: () => [] },
+    searchTerm: { type: String, default: "" },
+    // scroll container height — applied as Tailwind class(es)
+    scrollHeightClass: {
+      type: [String, Object],
+      default: ""
+    },
+    resolvers: { type: Object, required: !0 },
+    // copy
+    emptyMessage: { type: String, default: "" },
+    notFoundLabel: { type: String, default: "" },
+    createWithQueryLabel: { type: String, default: "" },
+    canCreate: { type: Boolean, default: !1 },
+    // per-item appearance
+    itemSize: { type: [String, Number], default: 40 },
+    itemIconClass: { type: String, default: "" },
+    itemTitleClass: { type: String, default: "" },
+    itemSubtitleClass: { type: String, default: "" },
+    itemIndicator: {
+      type: String,
+      default: "check"
+    },
+    canEdit: { type: Boolean, default: !1 },
+    editLabel: { type: String, default: "" }
+  },
+  emits: ["select", "edit", "create"],
+  setup(e) {
+    return (l, t) => (a(), o("div", {
+      class: v(["divide-y divide-[#E3ECF2] overflow-auto", e.scrollHeightClass])
+    }, [
+      e.loading ? (a(), o("div", He, [...t[1] || (t[1] = [
+        r("div", { class: "animate-spin w-6 h-6 border-2 border-primary-base border-t-transparent rounded-full" }, null, -1)
+      ])])) : e.items.length === 0 && !e.searchTerm ? (a(), o("div", Qe, [
+        f(l.$slots, "empty", {}, () => [
+          r("p", Je, x(e.emptyMessage), 1)
+        ])
+      ])) : e.items.length === 0 && e.searchTerm ? (a(), o("div", Xe, [
+        r("p", Ye, [
+          G(x(e.notFoundLabel) + " ", 1),
+          r("b", null, x(e.searchTerm), 1)
+        ]),
+        e.canCreate ? (a(), o("button", {
+          key: 0,
+          type: "button",
+          class: "w-full text-xs text-blue-400 hover:text-blue-300 mt-2",
+          onClick: t[0] || (t[0] = (n) => l.$emit("create"))
+        }, x(e.createWithQueryLabel), 1)) : C("", !0)
+      ])) : (a(!0), o(Z, { key: 3 }, se(e.items, (n) => (a(), F(We, {
+        key: e.resolvers.getEntityListKey(n),
+        selected: e.resolvers.isSelected(n),
+        title: e.resolvers.getEntityListLabel(n),
+        subtitle: e.resolvers.getEntityListAdditional(n),
+        "avatar-text": e.resolvers.getEntityListLabel(n),
+        "avatar-src": e.resolvers.getEntityListAvatar(n),
+        "avatar-size": e.itemSize,
+        "icon-wrapper-class": e.itemIconClass,
+        "title-class": e.itemTitleClass,
+        "subtitle-class": e.itemSubtitleClass,
+        indicator: e.itemIndicator,
+        "show-edit": e.resolvers.isSelected(n) && e.canEdit,
+        "edit-label": e.editLabel,
+        onSelect: (m) => l.$emit("select", n),
+        onEdit: (m) => l.$emit("edit", e.resolvers.getEntityKey(n))
+      }, R({ _: 2 }, [
+        l.$slots.itemIcon ? {
+          name: "icon",
+          fn: E(() => [
+            f(l.$slots, "itemIcon", { item: n })
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.itemAdditional ? {
+          name: "additional",
+          fn: E(() => [
+            f(l.$slots, "itemAdditional", { item: n })
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["selected", "title", "subtitle", "avatar-text", "avatar-src", "avatar-size", "icon-wrapper-class", "title-class", "subtitle-class", "indicator", "show-edit", "edit-label", "onSelect", "onEdit"]))), 128))
+    ], 2));
+  }
+}), De = {
+  key: 0,
   class: "text-xs px-2 py-1 text-red-600"
-}, ct = /* @__PURE__ */ ge({
+}, pe = "text-sm font-semibold text-black truncate leading-5 tracking-[0.4px]", _e = "text-xs text-[#979CA9] font-normal leading-5 truncate tracking-[0.4px]", rt = /* @__PURE__ */ M({
   __name: "OneEntityPicker",
   props: {
     t: {
@@ -189,13 +856,66 @@ const Me = { key: 0 }, Ae = { class: "" }, qe = {
       type: Boolean,
       default: !1
     },
-    // Variant
+    // Trigger variant
     variant: {
       type: String,
       default: "default",
-      validator: (t) => ["default", "compact", "minimal", "pill"].includes(t)
+      validator: (e) => ["default", "compact", "minimal", "pill", "tag"].includes(e)
+    },
+    tagColor: {
+      type: String,
+      default: "#525B66"
+    },
+    // ───── Modal customization ─────
+    modalTitle: {
+      required: !1,
+      type: String,
+      default: ""
+    },
+    modalTitlePosition: {
+      required: !1,
+      type: String,
+      default: "left",
+      validator: (e) => ["left", "center"].includes(e)
     },
-    // Options
+    modalSize: {
+      required: !1,
+      type: String,
+      default: "sm"
+    },
+    searchPlaceholder: {
+      required: !1,
+      type: String,
+      default: ""
+    },
+    // ───── List item appearance ─────
+    listItemIndicator: {
+      required: !1,
+      type: String,
+      default: "check",
+      validator: (e) => ["check", "navigation", "none"].includes(e)
+    },
+    listItemSize: {
+      required: !1,
+      type: [String, Number],
+      default: 40
+    },
+    listItemIconClass: {
+      required: !1,
+      type: String,
+      default: ""
+    },
+    listItemTitleClass: {
+      required: !1,
+      type: String,
+      default: ""
+    },
+    listItemSubtitleClass: {
+      required: !1,
+      type: String,
+      default: ""
+    },
+    // ───── Misc ─────
     noCreate: {
       type: Boolean,
       default: !1
@@ -215,361 +935,191 @@ const Me = { key: 0 }, Ae = { class: "" }, qe = {
     listEmptyMessage: {
       type: String,
       default: ""
+    },
+    editButtonLabel: {
+      type: String,
+      default: ""
     }
   },
   emits: ["update:modelValue", "onSetEntity"],
-  setup(t, { emit: oe }) {
-    const ie = Be(), n = t, O = oe, b = f(() => n.t ?? ie), h = Ve(), Y = g(null), L = g(!1), B = g(null), q = g(!1), p = g("sm"), I = g(!1);
-    let C = null;
-    me(() => {
-      C = window.matchMedia("(max-width: 767px)"), I.value = C.matches;
-      const e = (o) => {
-        I.value = o.matches;
-      };
-      C.addEventListener("change", e), pe(() => {
-        C == null || C.removeEventListener("change", e);
-      });
+  setup(e, { emit: l }) {
+    const t = ye(), n = e, m = l, i = S(() => n.t ?? t), g = Ie(n), c = Be(n, g), { searchTerm: y, selectedGroup: L, setSelectedGroup: s, sortedItems: h, loading: w } = c, {
+      modal: T,
+      searchInput: O,
+      creatingEntity: P,
+      editEntity: z,
+      startCreate: u,
+      currentModalSize: j,
+      isMobileView: W,
+      openPicker: k,
+      selectItem: B,
+      onClear: V,
+      onCreateEntity: $,
+      onEditEntity: K,
+      onCloseCreateEntity: N
+    } = Me(n, c, m), p = S(
+      () => n.modalTitle || i.value("ui.entity_picker.Select")
+    ), _ = S(
+      () => n.listItemTitleClass || pe
+    ), ee = S(
+      () => n.listItemSubtitleClass || _e
+    ), te = S(
+      () => n.noSearch ? "sm:h-[52vh] h-[86dvh] min-h-[300px]" : "sm:h-[40vh] h-[60dvh]"
+    ), le = S(() => P.value || u.value ? "create" : z.value ? "edit" : "browse"), J = S(() => {
+      const b = [];
+      return n.validation == null || n.validationIndex == null || Object.keys(n.validation).forEach((U) => {
+        U.startsWith(n.validationIndex) && b.push(...n.validation[U]);
+      }), b;
     });
-    const i = n.listEntityUse ? n.listEntityUse() : null, w = i == null ? void 0 : i.nodes, Z = i == null ? void 0 : i.load, k = i == null ? void 0 : i.searchTerm, S = i == null ? void 0 : i.isLoading, M = i == null ? void 0 : i.isLoad, A = i == null ? void 0 : i.group, Q = g(null), re = f(() => (A == null ? void 0 : A.value) ?? Q.value), ue = (e) => {
-      A ? A.value = e : Q.value = e;
-    }, N = g(""), v = f({
-      get: () => (k == null ? void 0 : k.value) ?? N.value,
-      set: (e) => {
-        k ? k.value = e : N.value = e;
-      }
-    }), T = f(() => (S == null ? void 0 : S.value) ?? n.isLoading), K = f(() => (w == null ? void 0 : w.value) ?? n.items), P = f(() => n.icon), y = f(() => n.variant === "compact" || n.variant === "minimal"), de = f(() => n.variant === "compact"), x = f(() => n.variant === "pill"), D = f(() => {
-      const e = [];
-      return n.validation == null || n.validationIndex == null || Object.keys(n.validation).forEach((o) => {
-        o.startsWith(n.validationIndex) && e.push(...n.validation[o]);
-      }), e;
-    }), U = f(() => {
-      if (!v.value)
-        return K.value;
-      const e = v.value.toLowerCase();
-      return K.value.filter((o) => {
-        const r = H(o).toLowerCase(), X = W(o).toLowerCase();
-        return r.includes(e) || X.includes(e);
-      });
-    }), ce = f(() => [...U.value].sort((e) => G(e) === F(n.modelValue) ? -1 : 0)), j = (e) => e ? String(e[n.entityLabel] || "") : "", ve = (e) => !e || !n.entityAvatar ? "" : String(e[n.entityAvatar] || ""), E = (e) => !e || !n.entityAdditional ? "" : String(e[n.entityAdditional] || ""), F = (e) => e ? e[n.entityKey] : "", G = (e) => e[n.entityListKey], H = (e) => String(e[n.entityListLabel] || ""), ye = (e) => n.entityListAvatar ? String(e[n.entityListAvatar] || "") : "", W = (e) => n.entityListAdditional ? String(e[n.entityListAdditional] || "") : "", J = (e) => F(n.modelValue) === G(e), _ = () => {
-      n.readonly || (N.value = "", k && (k.value = ""), L.value = !1, B.value = null, q.value = !1, p.value = "sm", h.open(), Ee(() => {
-        var e;
-        (e = Y.value) == null || e.focus();
-      }));
-    }, fe = (e) => {
-      O("update:modelValue", e), h.close();
-    }, xe = () => {
-      O("update:modelValue", null);
-    }, ee = () => {
-      L.value = !0, p.value = n.sizeModalCreateEntity;
-    }, he = (e) => {
-      B.value = e, p.value = n.sizeModalCreateEntity;
-    }, R = (e) => {
-      L.value = !1, B.value = null, q.value = !1, p.value = "sm", e ? (h.close(), O("update:modelValue", e)) : !T.value && K.value.length === 0 && !v.value && h.close();
-    };
-    return te(h.isOpened, (e) => {
-      e && Z && Z(), e || (L.value = !1, p.value = "sm");
-    }), te(
-      () => M == null ? void 0 : M.value,
-      () => {
-        M && !(S != null && S.value) && M.value && !v.value && (w == null ? void 0 : w.value.length) === 0 && (q.value = !0, p.value = n.sizeModalCreateEntity);
-      }
-    ), (e, o) => (l(), a(le, null, [
-      s("div", {
-        class: u(["relative select-none", y.value ? "space-y-1.5" : "space-y-3"])
-      }, [
-        m(e.$slots, "button", {
-          title: t.title,
-          modelValue: t.modelValue,
-          openModal: () => V(h).open()
-        }, () => [
-          t.title ? (l(), a("p", {
-            key: 0,
-            class: u(["font-semibold pb-0", t.labelClass])
-          }, d(t.title), 3)) : c("", !0),
-          s("div", {
-            class: u(["flex justify-between z-10 items-center", [
-              t.readonly ? "" : "cursor-pointer hover:bg-gray-50",
-              y.value ? ["rounded-full", de.value ? "bg-[#4089E01A]" : ""] : "border px-3 pr-3 py-3 rounded-lg h-[72px]",
-              x.value ? "border-none !py-0 h-max !rounded-full" : "",
-              x.value && t.modelValue !== null ? "bg-[#4089E01A]" : ""
-            ]])
-          }, [
-            s("div", {
-              class: u(["flex items-center w-full gap-x-3", [y.value ? "!gap-x-1 px-0.5 py-0.5" : "", x.value ? "h-9 p-0" : ""]]),
-              onClick: _
-            }, [
-              t.noIcon ? c("", !0) : (l(), a("div", {
-                key: 0,
-                class: u(["w-10 h-10 flex items-center justify-center", t.iconClassBlock])
-              }, [
-                x.value ? (l(), a("div", Me, [
-                  t.modelValue == null ? (l(), a("svg", {
-                    key: 0,
-                    class: u(["w-3 text-blue-600", t.iconClass]),
-                    fill: "none",
-                    viewBox: "0 0 24 24",
-                    stroke: "currentColor",
-                    "stroke-width": "2"
-                  }, [...o[1] || (o[1] = [
-                    s("path", {
-                      "stroke-linecap": "round",
-                      "stroke-linejoin": "round",
-                      d: "M12 4.5v15m7.5-7.5h-15"
-                    }, null, -1)
-                  ])], 2)) : (l(), $(ne(P.value), {
-                    key: 1,
-                    class: u(["w-5", t.iconClass])
-                  }, null, 8, ["class"]))
-                ])) : P.value != null && t.modelValue == null || y.value ? (l(), a("div", {
-                  key: 1,
-                  class: u(y.value ? "" : "bg-gray-50 p-2.5 rounded-lg")
-                }, [
-                  (l(), $(ne(P.value), {
-                    class: u([["w-5", t.iconClass], "text-gray-600"])
-                  }, null, 8, ["class"]))
-                ], 2)) : t.modelValue ? (l(), $(V(se), {
-                  key: 2,
-                  text: j(t.modelValue),
-                  src: ve(t.modelValue),
-                  rounded: !1,
-                  size: "40",
-                  class: "!rounded-lg"
-                }, null, 8, ["text", "src"])) : c("", !0)
-              ], 2)),
-              s("div", Ae, [
-                t.modelValue == null ? (l(), a("div", qe, [
-                  s("div", {
-                    class: u(["font-medium text-gray-600 truncate overflow-hidden whitespace-nowrap", [
-                      y.value ? "text-xs truncate max-w-[120px] text-[#525B66]" : "text-sm",
-                      x.value ? "!text-xs truncate max-w-[120px] text-[#4089E0]" : ""
-                    ]])
-                  }, d(t.labelSelect), 3),
-                  t.labelSelectNote && !y.value && !x.value ? (l(), a("span", je, d(t.labelSelectNote), 1)) : c("", !0)
-                ])) : (l(), a("div", {
-                  key: 1,
-                  class: u(["grid items-center pr-2", y.value ? "" : "py-1"])
-                }, [
-                  s("div", {
-                    class: u(["break-all leading-4 truncate !text-sm", {
-                      "text-sm font-medium": j(t.modelValue).length < 20,
-                      "text-xs font-semibold": j(t.modelValue).length > 20,
-                      "truncate text-[#525B66] text-xs": y.value,
-                      "truncate text-xs": x.value
-                    }])
-                  }, [
-                    z(d(j(t.modelValue)) + " ", 1),
-                    !t.readonly && !y.value && !x.value ? (l(), a("span", $e, d(b.value("ui.entity_picker.Change")), 1)) : c("", !0)
-                  ], 2),
-                  E(t.modelValue) ? (l(), a("div", {
-                    key: 0,
-                    class: u(["font-thin leading-3 break-all line-clamp-2 pt-1 truncate !text-xs", {
-                      "text-xs": E(t.modelValue).length < 20,
-                      "text-[10px]": E(t.modelValue).length > 20 && E(t.modelValue).length < 35,
-                      "text-[9px]": E(t.modelValue).length > 35
-                    }])
-                  }, [
-                    m(e.$slots, "entityAdditional", { item: t.modelValue }, () => [
-                      z(d(E(t.modelValue)), 1)
-                    ])
-                  ], 2)) : c("", !0)
-                ], 2))
-              ])
-            ], 2),
-            t.modelValue != null && !t.readonly ? (l(), a("button", {
-              key: 0,
-              type: "button",
-              onClick: ae(xe, ["stop"]),
-              class: u(["rounded-full hover:text-gray-900 text-gray-500", { "mr-2 text-[#525B66] p-0.5": y.value }])
-            }, [...o[2] || (o[2] = [
-              s("svg", {
-                class: "w-4 h-4",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                "stroke-width": "2"
-              }, [
-                s("path", {
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  d: "M6 18L18 6M6 6l12 12"
-                })
-              ], -1)
-            ])], 2)) : !t.readonly && !y.value && !x.value ? (l(), a("button", {
-              key: 1,
-              type: "button",
-              class: "py-2.5 text-gray-500",
-              onClick: _
-            }, [...o[3] || (o[3] = [
-              s("svg", {
-                class: "w-5 h-5",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                "stroke-width": "2"
-              }, [
-                s("path", {
-                  "stroke-linecap": "round",
-                  "stroke-linejoin": "round",
-                  d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+    return (b, U) => (a(), o(Z, null, [
+      q(Ae, {
+        variant: e.variant,
+        "model-value": e.modelValue,
+        icon: e.icon,
+        title: e.title,
+        "label-select": e.labelSelect,
+        "label-select-note": e.labelSelectNote,
+        "label-class": e.labelClass,
+        "icon-class": e.iconClass,
+        "icon-class-block": e.iconClassBlock,
+        "no-icon": e.noIcon,
+        readonly: e.readonly,
+        "tag-color": e.tagColor,
+        "change-label": i.value("ui.entity_picker.Change"),
+        resolvers: d(g),
+        onOpen: d(k),
+        onClear: d(V)
+      }, R({ _: 2 }, [
+        b.$slots.button ? {
+          name: "button",
+          fn: E((A) => [
+            f(b.$slots, "button", oe(re(A)))
+          ]),
+          key: "0"
+        } : void 0,
+        b.$slots.entityAdditional ? {
+          name: "entityAdditional",
+          fn: E(({ item: A }) => [
+            f(b.$slots, "entityAdditional", { item: A })
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["variant", "model-value", "icon", "title", "label-select", "label-select-note", "label-class", "icon-class", "icon-class-block", "no-icon", "readonly", "tag-color", "change-label", "resolvers", "onOpen", "onClear"]),
+      q(be, {
+        useModal: d(T),
+        title: p.value,
+        "title-center": e.modalTitlePosition === "center",
+        size: d(j),
+        "mobile-view": d(W),
+        view: le.value
+      }, R({
+        create: E(() => [
+          f(b.$slots, "creating", {
+            onCloseCreateEntity: d(N),
+            find: d(y)
+          })
+        ]),
+        edit: E(() => [
+          f(b.$slots, "edit", {
+            onCloseCreateEntity: d(N),
+            editId: d(z)
+          })
+        ]),
+        list: E(() => [
+          q(Ze, {
+            loading: d(w),
+            items: d(h),
+            "search-term": d(y),
+            "scroll-height-class": te.value,
+            resolvers: d(g),
+            "empty-message": e.listEmptyMessage || i.value("ui.entity_picker.List empty"),
+            "not-found-label": i.value("ui.entity_picker.Nothing found for"),
+            "create-with-query-label": `${e.labelCreateButton} «${d(y)}»`,
+            "can-create": !e.noCreate && !!e.labelCreateButton,
+            "item-size": e.listItemSize,
+            "item-icon-class": e.listItemIconClass,
+            "item-title-class": _.value,
+            "item-subtitle-class": ee.value,
+            "item-indicator": e.listItemIndicator,
+            "can-edit": !!b.$slots.edit && !e.noEdit,
+            "edit-label": e.editButtonLabel || i.value("ui.entity_picker.Edit"),
+            onSelect: d(B),
+            onEdit: d(K),
+            onCreate: d($)
+          }, R({ _: 2 }, [
+            b.$slots.creating ? {
+              name: "empty",
+              fn: E(() => [
+                f(b.$slots, "creating", {
+                  onCloseCreateEntity: d(N),
+                  find: d(y)
                 })
-              ], -1)
-            ])])) : c("", !0)
-          ], 2)
-        ])
-      ], 2),
-      V(h).isOpened.value ? (l(), $(V(Le), {
-        key: 0,
-        useModal: V(h),
-        title: b.value("ui.entity_picker.Select"),
-        size: p.value,
-        classModal: I.value,
-        titleCenter: !0
-      }, {
-        default: ke(() => [
-          L.value || q.value ? (l(), a("div", ze, [
-            m(e.$slots, "creating", {
-              onCloseCreateEntity: R,
-              find: v.value
-            })
-          ])) : B.value ? (l(), a("div", Oe, [
-            m(e.$slots, "edit", {
-              onCloseCreateEntity: R,
-              editId: B.value
-            })
-          ])) : (l(), a("div", Ie, [
-            e.$slots.modalHeader ? (l(), a("div", Ne, [
-              m(e.$slots, "modalHeader")
-            ])) : c("", !0),
-            t.noSearch ? c("", !0) : (l(), a("div", Te, [
-              s("div", Ke, [
-                o[4] || (o[4] = s("svg", {
-                  class: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  "stroke-width": "2"
-                }, [
-                  s("path", {
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-                  })
-                ], -1)),
-                be(s("input", {
-                  "onUpdate:modelValue": o[0] || (o[0] = (r) => v.value = r),
-                  type: "text",
-                  class: "w-full pl-9 pr-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-base focus:border-transparent",
-                  placeholder: b.value("ui.entity_picker.Search"),
-                  ref_key: "searchInput",
-                  ref: Y
-                }, null, 8, Pe), [
-                  [Ce, v.value]
-                ])
-              ])
-            ])),
-            m(e.$slots, "prepend", {
-              selectedGroup: re.value,
-              setSelectedGroup: ue
-            }),
-            !T.value && !t.noCreate && t.labelCreateButton ? (l(), a("div", Ue, [
-              s("button", {
-                type: "button",
-                onClick: ee,
-                class: "w-full flex items-center justify-center gap-2 py-2 text-blue-400 hover:text-blue-300 text-sm"
-              }, [
-                o[5] || (o[5] = s("svg", {
-                  class: "w-4 h-4",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  "stroke-width": "2"
-                }, [
-                  s("path", {
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    d: "M12 4.5v15m7.5-7.5h-15"
-                  })
-                ], -1)),
-                z(" " + d(t.labelCreateButton), 1)
-              ])
-            ])) : c("", !0),
-            s("div", {
-              class: u(["divide-y overflow-auto", {
-                "sm:h-[40vh] h-[60dvh]": !t.noSearch,
-                "sm:h-[52vh] h-[86dvh] min-h-[300px]": t.noSearch
-              }])
-            }, [
-              T.value ? (l(), a("div", Fe, [...o[6] || (o[6] = [
-                s("div", { class: "animate-spin w-6 h-6 border-2 border-primary-base border-t-transparent rounded-full" }, null, -1)
-              ])])) : U.value.length === 0 && !v.value ? (l(), a("div", Ge, [
-                m(e.$slots, "creating", {
-                  onCloseCreateEntity: R,
-                  find: v.value
-                }, () => [
-                  s("p", He, d(t.listEmptyMessage || b.value("ui.entity_picker.List empty")), 1)
-                ])
-              ])) : U.value.length === 0 && v.value ? (l(), a("div", We, [
-                s("p", Je, [
-                  z(d(b.value("ui.entity_picker.Nothing found for")) + " ", 1),
-                  s("b", null, d(v.value), 1)
-                ]),
-                !t.noCreate && t.labelCreateButton ? (l(), a("button", {
-                  key: 0,
-                  type: "button",
-                  onClick: ee,
-                  class: "w-full text-xs text-blue-400 hover:text-blue-300 mt-2"
-                }, d(t.labelCreateButton) + " «" + d(v.value) + "» ", 1)) : c("", !0)
-              ])) : (l(!0), a(le, { key: 3 }, we(ce.value, (r) => (l(), a("div", {
-                key: G(r),
-                class: u(["flex items-center py-3 hover:bg-secondary-body-hover px-3 cursor-pointer", { "bg-gray-50 text-blue-900": J(r) }]),
-                onClick: (X) => fe(r)
-              }, [
-                s("div", Xe, [
-                  Se(V(se), {
-                    text: H(r),
-                    src: ye(r),
-                    rounded: !1,
-                    size: "30",
-                    class: "!rounded-lg"
-                  }, null, 8, ["text", "src"])
-                ]),
-                s("div", Ye, [
-                  s("p", Ze, d(H(r)), 1),
-                  W(r) ? (l(), a("div", Qe, [
-                    m(e.$slots, "entityAdditional", { item: r }, () => [
-                      s("span", De, d(W(r)), 1)
-                    ])
-                  ])) : c("", !0)
-                ]),
-                J(r) && e.$slots.edit && !t.noEdit ? (l(), a("button", {
-                  key: 0,
-                  type: "button",
-                  onClick: ae((X) => he(F(r)), ["stop"]),
-                  class: "text-xs text-blue-400 hover:text-blue-300 mr-2"
-                }, d(b.value("ui.entity_picker.Edit")), 9, _e)) : c("", !0),
-                J(r) ? (l(), a("svg", et, [...o[7] || (o[7] = [
-                  s("path", {
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    d: "M4.5 12.75l6 6 9-13.5"
-                  }, null, -1)
-                ])])) : (l(), a("svg", tt, [...o[8] || (o[8] = [
-                  s("path", {
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    d: "M8.25 4.5l7.5 7.5-7.5 7.5"
-                  }, null, -1)
-                ])]))
-              ], 10, Re))), 128))
-            ], 2)
-          ]))
+              ]),
+              key: "0"
+            } : void 0,
+            b.$slots.entityListIcon ? {
+              name: "itemIcon",
+              fn: E(({ item: A }) => [
+                f(b.$slots, "entityListIcon", { item: A })
+              ]),
+              key: "1"
+            } : void 0,
+            b.$slots.entityAdditional ? {
+              name: "itemAdditional",
+              fn: E(({ item: A }) => [
+                f(b.$slots, "entityAdditional", { item: A })
+              ]),
+              key: "2"
+            } : void 0
+          ]), 1032, ["loading", "items", "search-term", "scroll-height-class", "resolvers", "empty-message", "not-found-label", "create-with-query-label", "can-create", "item-size", "item-icon-class", "item-title-class", "item-subtitle-class", "item-indicator", "can-edit", "edit-label", "onSelect", "onEdit", "onCreate"])
         ]),
-        _: 3
-      }, 8, ["useModal", "title", "size", "classModal"])) : c("", !0),
-      D.value.length > 0 ? (l(), a("div", lt, d(D.value.join(" ")), 1)) : c("", !0)
+        _: 2
+      }, [
+        b.$slots.modalHeader ? {
+          name: "header",
+          fn: E(() => [
+            f(b.$slots, "modalHeader")
+          ]),
+          key: "0"
+        } : void 0,
+        e.noSearch ? void 0 : {
+          name: "search",
+          fn: E(() => [
+            q(je, {
+              ref_key: "searchInput",
+              ref: O,
+              modelValue: d(y),
+              "onUpdate:modelValue": U[0] || (U[0] = (A) => de(y) ? y.value = A : null),
+              placeholder: e.searchPlaceholder || i.value("ui.entity_picker.Search")
+            }, null, 8, ["modelValue", "placeholder"])
+          ]),
+          key: "1"
+        },
+        b.$slots.prepend ? {
+          name: "prepend",
+          fn: E(() => [
+            f(b.$slots, "prepend", {
+              selectedGroup: d(L),
+              setSelectedGroup: d(s)
+            })
+          ]),
+          key: "2"
+        } : void 0,
+        !d(w) && !e.noCreate && e.labelCreateButton ? {
+          name: "createButton",
+          fn: E(() => [
+            q(Pe, {
+              label: e.labelCreateButton,
+              onClick: d($)
+            }, null, 8, ["label", "onClick"])
+          ]),
+          key: "3"
+        } : void 0
+      ]), 1032, ["useModal", "title", "title-center", "size", "mobile-view", "view"]),
+      J.value.length > 0 ? (a(), o("div", De, x(J.value.join(" ")), 1)) : C("", !0)
     ], 64));
   }
-}), vt = {
+}), dt = {
   "entity_picker.Loading": "Завантаження...",
   "entity_picker.Select": "Вибір",
   "entity_picker.Search": "Пошук...",
@@ -579,6 +1129,6 @@ const Me = { key: 0 }, Ae = { class: "" }, qe = {
   "entity_picker.Nothing found for": "За запитом нічого не знайдено:"
 };
 export {
-  ct as OneEntityPicker,
-  vt as defaultEntityPickerTranslations
+  rt as OneEntityPicker,
+  dt as defaultEntityPickerTranslations
 };