@oneb/ui-vue 0.3.28 → 0.3.30

package/dist/entityPicker/index.js

@@ -1,5 +1,5 @@
-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 { defineComponent as M, openBlock as a, createBlock as F, unref as d, createSlots as R, withCtx as x, createElementBlock as o, renderSlot as c, createCommentVNode as C, computed as S, normalizeClass as m, toDisplayString as E, 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, normalizeProps as oe, guardReactiveProps as re, isRef as de } from "vue";
+import { O as ue, u as ce } from "../useModal-7fe9444b.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";
@@ -26,6 +26,7 @@ const fe = {
       required: !0
     },
     title: { type: String, default: "" },
+    subtitle: { type: String, default: "" },
     titleCenter: { type: Boolean, default: !1 },
     size: {
       type: String,
@@ -42,27 +43,36 @@ const fe = {
       key: 0,
       useModal: e.useModal,
       title: e.title,
+      subtitle: e.subtitle,
       size: e.size,
       classModal: e.mobileView,
       titleCenter: e.titleCenter
-    }, {
-      default: E(() => [
+    }, R({
+      default: x(() => [
         e.view === "create" ? (a(), o("div", fe, [
-          f(l.$slots, "create")
+          c(l.$slots, "create")
         ])) : e.view === "edit" ? (a(), o("div", ve, [
-          f(l.$slots, "edit")
+          c(l.$slots, "edit")
         ])) : (a(), o("div", me, [
           l.$slots.header ? (a(), o("div", ge, [
-            f(l.$slots, "header")
+            c(l.$slots, "header")
           ])) : C("", !0),
-          f(l.$slots, "search"),
-          f(l.$slots, "prepend"),
-          f(l.$slots, "createButton"),
-          f(l.$slots, "list")
+          c(l.$slots, "search"),
+          c(l.$slots, "prepend"),
+          c(l.$slots, "createButton"),
+          c(l.$slots, "list")
         ]))
       ]),
-      _: 3
-    }, 8, ["useModal", "title", "size", "classModal", "titleCenter"])) : C("", !0);
+      _: 2
+    }, [
+      l.$slots.subtitle ? {
+        name: "subtitle",
+        fn: x(() => [
+          c(l.$slots, "subtitle")
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["useModal", "title", "subtitle", "size", "classModal", "titleCenter"])) : C("", !0);
   }
 }), he = {
   key: 0,
@@ -81,10 +91,10 @@ const fe = {
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   "stroke-width": "2"
-}, Ee = { key: 0 }, Le = { class: "" }, we = {
+}, Ee = { key: 0 }, Le = { class: "" }, $e = {
   key: 0,
   class: "space-y-1 flex flex-col"
-}, $e = {
+}, we = {
   key: 0,
   class: "text-gray-400 text-xs font-light"
 }, Ve = {
@@ -113,40 +123,40 @@ const fe = {
   },
   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(
+    const t = e, n = l, g = () => n("open"), i = S(() => t.variant === "compact" || t.variant === "minimal"), b = S(() => t.variant === "compact"), y = S(() => t.variant === "pill"), f = 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", {
+      c(s.$slots, "button", {
         title: e.title,
         modelValue: e.modelValue,
-        openModal: m
+        openModal: g
       }, () => [
         e.title ? (a(), o("p", {
           key: 0,
-          class: v(["font-semibold text-black", e.labelClass])
-        }, x(e.title), 3)) : C("", !0),
+          class: m(["font-semibold text-black", e.labelClass])
+        }, E(e.title), 3)) : C("", !0),
         r("div", {
-          class: v([
+          class: m([
             "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
+          style: X(f.value),
+          onClick: g
         }, [
           e.icon ? (a(), F(H(e.icon), {
             key: 0,
-            class: v(["w-5 h-5 flex-shrink-0", e.iconClass]),
+            class: m(["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),
+          r("span", ke, E(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"]))
+            onClick: h[0] || (h[0] = Q(($) => e.modelValue != null ? s.$emit("clear") : g(), ["stop"]))
           }, [
             e.modelValue != null ? (a(), o("svg", Ce, [...h[2] || (h[2] = [
               r("path", {
@@ -166,37 +176,37 @@ const fe = {
       ])
     ])) : (a(), o("div", {
       key: 1,
-      class: v(["relative select-none", i.value ? "space-y-1.5" : "space-y-3"])
+      class: m(["relative select-none", i.value ? "space-y-1.5" : "space-y-3"])
     }, [
-      f(s.$slots, "button", {
+      c(s.$slots, "button", {
         title: e.title,
         modelValue: e.modelValue,
-        openModal: m
+        openModal: g
       }, () => [
         e.title ? (a(), o("p", {
           key: 0,
-          class: v(["font-semibold pb-0", e.labelClass])
-        }, x(e.title), 3)) : C("", !0),
+          class: m(["font-semibold pb-0", e.labelClass])
+        }, E(e.title), 3)) : C("", !0),
         r("div", {
-          class: v(["flex justify-between z-10 items-center", [
+          class: m(["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]" : ""
+            i.value ? ["rounded-full", b.value ? "bg-[#4089E01A]" : ""] : "border px-3 pr-3 py-3 rounded-lg h-[72px]",
+            y.value ? "border-none !py-0 h-max !rounded-full" : "",
+            y.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
+            class: m(["flex items-center w-full gap-x-3", [i.value ? "!gap-x-1 px-0.5 py-0.5" : "", y.value ? "h-9 p-0" : ""]]),
+            onClick: g
           }, [
-            !e.noIcon && (c.value || i.value || e.icon || e.modelValue) ? (a(), o("div", {
+            !e.noIcon && (y.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])
+              class: m(["w-10 h-10 flex items-center justify-center", e.iconClassBlock])
             }, [
-              c.value ? (a(), o("div", Ee, [
+              y.value ? (a(), o("div", Ee, [
                 e.modelValue == null ? (a(), o("svg", {
                   key: 0,
-                  class: v(["w-3 text-blue-600", e.iconClass]),
+                  class: m(["w-3 text-blue-600", e.iconClass]),
                   fill: "none",
                   viewBox: "0 0 24 24",
                   stroke: "currentColor",
@@ -209,14 +219,14 @@ const fe = {
                   }, null, -1)
                 ])], 2)) : (a(), F(H(e.icon), {
                   key: 1,
-                  class: v(["w-5", e.iconClass])
+                  class: m(["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")
+                class: m(i.value ? "" : "bg-gray-50 p-2.5 rounded-lg")
               }, [
                 (a(), F(H(e.icon), {
-                  class: v([["w-5", e.iconClass], "text-gray-600"])
+                  class: m([["w-5", e.iconClass], "text-gray-600"])
                 }, null, 8, ["class"]))
               ], 2)) : e.modelValue ? (a(), F(d(D), {
                 key: 2,
@@ -228,39 +238,39 @@ const fe = {
               }, null, 8, ["text", "src"])) : C("", !0)
             ], 2)) : C("", !0),
             r("div", Le, [
-              e.modelValue == null ? (a(), o("div", we, [
+              e.modelValue == null ? (a(), o("div", $e, [
                 r("div", {
-                  class: v(["font-medium text-gray-600 truncate overflow-hidden whitespace-nowrap", [
+                  class: m(["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]" : ""
+                    y.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)
+                }, E(e.labelSelect), 3),
+                e.labelSelectNote && !i.value && !y.value ? (a(), o("span", we, E(e.labelSelectNote), 1)) : C("", !0)
               ])) : (a(), o("div", {
                 key: 1,
-                class: v(["grid items-center pr-2", i.value ? "" : "py-1"])
+                class: m(["grid items-center pr-2", i.value ? "" : "py-1"])
               }, [
                 r("div", {
-                  class: v(["break-all leading-4 truncate !text-sm", {
+                  class: m(["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
+                    "truncate text-xs": y.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)
+                  G(E(e.resolvers.getEntityLabel(e.modelValue)) + " ", 1),
+                  !e.readonly && !i.value && !y.value ? (a(), o("span", Ve, E(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", {
+                  class: m(["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)
+                  c(s.$slots, "entityAdditional", { item: e.modelValue }, () => [
+                    G(E(e.resolvers.getEntityAdditional(e.modelValue)), 1)
                   ])
                 ], 2)) : C("", !0)
               ], 2))
@@ -269,8 +279,8 @@ const fe = {
           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"]))
+            class: m(["rounded-full hover:text-gray-900 text-gray-500", { "mr-2 text-[#525B66] p-0.5": i.value }]),
+            onClick: h[1] || (h[1] = Q(($) => s.$emit("clear"), ["stop"]))
           }, [...h[5] || (h[5] = [
             r("svg", {
               class: "w-4 h-4",
@@ -285,11 +295,11 @@ const fe = {
                 d: "M6 18L18 6M6 6l12 12"
               })
             ], -1)
-          ])], 2)) : !e.readonly && !i.value && !c.value ? (a(), o("button", {
+          ])], 2)) : !e.readonly && !i.value && !y.value ? (a(), o("button", {
             key: 1,
             type: "button",
             class: "py-2.5 text-gray-500",
-            onClick: m
+            onClick: g
           }, [...h[6] || (h[6] = [
             r("svg", {
               class: "w-5 h-5",
@@ -311,36 +321,36 @@ const fe = {
   }
 });
 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];
+  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] || ""), g = (s) => s ? s[e.entityKey] : "", i = (s) => s[e.entityListKey];
   return {
     getEntityLabel: l,
     getEntityAvatar: t,
     getEntityAdditional: n,
-    getEntityKey: m,
+    getEntityKey: g,
     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)
+    isSelected: (s) => g(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,
+  const t = e.listEntityUse ? e.listEntityUse() : null, n = t == null ? void 0 : t.nodes, g = t == null ? void 0 : t.load, i = t == null ? void 0 : t.searchTerm, b = t == null ? void 0 : t.isLoading, y = t == null ? void 0 : t.isLoad, f = t == null ? void 0 : t.group, L = I(null), s = S(() => (f == null ? void 0 : f.value) ?? L.value), h = (k) => {
+    f ? f.value = k : L.value = k;
+  }, $ = I(""), T = S({
+    get: () => (i == null ? void 0 : i.value) ?? $.value,
     set: (k) => {
-      i ? i.value = k : w.value = k;
+      i ? i.value = k : $.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(() => {
+    $.value = "", i && (i.value = "");
+  }, P = S(() => (b == null ? void 0 : b.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
+      (w) => l.getEntityListKey(w) === B
     ) ? k : [e.modelValue, ...k];
   }), j = S(() => {
     if (!T.value)
@@ -349,8 +359,8 @@ function Be(e, l) {
     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);
+      const w = l.getEntityListLabel(V).toLowerCase(), K = l.getEntityListAdditional(V).toLowerCase();
+      return w.includes(k) || K.includes(k);
     });
   }), W = S(() => {
     const k = j.value;
@@ -361,13 +371,13 @@ function Be(e, l) {
     );
     if (V <= 0)
       return k;
-    const $ = k.slice(), [K] = $.splice(V, 1);
-    return $.unshift(K), $;
+    const w = k.slice(), [K] = w.splice(V, 1);
+    return w.unshift(K), w;
   });
   return {
     // dynamic data hooks (exposed for modal lifecycle watchers)
-    load: m,
-    dynamicIsLoad: c,
+    load: g,
+    dynamicIsLoad: y,
     nodes: n,
     // search
     searchTerm: T,
@@ -385,7 +395,7 @@ function Be(e, l) {
   };
 }
 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);
+  const n = ce(), g = I(null), i = I(!1), b = I(null), y = I(!1), f = I(e.modalSize), L = I(!1);
   let s = null;
   ne(() => {
     s = window.matchMedia("(max-width: 767px)"), L.value = s.matches;
@@ -397,23 +407,23 @@ function Me(e, l, t) {
     });
   });
   const h = () => {
-    e.readonly || (l.clearSearchTerm(), i.value = !1, g.value = null, c.value = !1, y.value = e.modalSize, n.open(), ie(() => {
+    e.readonly || (l.clearSearchTerm(), i.value = !1, b.value = null, y.value = !1, f.value = e.modalSize, n.open(), ie(() => {
       var u;
-      (u = m.value) == null || u.focus();
+      (u = g.value) == null || u.focus();
     }));
-  }, w = (u) => {
+  }, $ = (u) => {
     t("update:modelValue", u), n.close();
   }, T = () => {
     t("update:modelValue", null);
   }, O = () => {
-    i.value = !0, y.value = e.sizeModalCreateEntity;
+    i.value = !0, f.value = e.sizeModalCreateEntity;
   }, P = (u) => {
-    g.value = u, y.value = e.sizeModalCreateEntity;
+    b.value = u, f.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();
+    i.value = !1, b.value = null, y.value = !1, f.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);
+    u && l.load && l.load(), u || (i.value = !1, f.value = e.modalSize);
   }), Y(
     () => {
       var u;
@@ -421,18 +431,18 @@ function Me(e, l, t) {
     },
     () => {
       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);
+      l.dynamicIsLoad && !l.loading.value && l.dynamicIsLoad.value && !l.searchTerm.value && ((u = l.nodes) == null ? void 0 : u.value.length) === 0 && (y.value = !0, f.value = e.sizeModalCreateEntity);
     }
   ), {
     modal: n,
-    searchInput: m,
+    searchInput: g,
     creatingEntity: i,
-    editEntity: g,
-    startCreate: c,
-    currentModalSize: y,
+    editEntity: b,
+    startCreate: y,
+    currentModalSize: f,
     isMobileView: L,
     openPicker: h,
-    selectItem: w,
+    selectItem: $,
     onClear: T,
     onCreateEntity: O,
     onEditEntity: P,
@@ -453,17 +463,17 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
   },
   emits: ["update:modelValue"],
   setup(e, { expose: l, emit: t }) {
-    const n = t, m = I(null), i = (g) => {
-      n("update:modelValue", g.target.value);
+    const n = t, g = I(null), i = (b) => {
+      n("update:modelValue", b.target.value);
     };
     return l({
       focus: () => {
-        var g;
-        return (g = m.value) == null ? void 0 : g.focus();
+        var b;
+        return (b = g.value) == null ? void 0 : b.focus();
       }
-    }), (g, c) => (a(), o("div", Te, [
+    }), (b, y) => (a(), o("div", Te, [
       r("div", ze, [
-        c[0] || (c[0] = r("svg", {
+        y[0] || (y[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",
@@ -478,7 +488,7 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
         ], -1)),
         r("input", {
           ref_key: "inputRef",
-          ref: m,
+          ref: g,
           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",
@@ -514,7 +524,7 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
             d: "M12 4.5v15m7.5-7.5h-15"
           })
         ], -1)),
-        r("span", Oe, x(e.label), 1)
+        r("span", Oe, E(e.label), 1)
       ])
     ]));
   }
@@ -591,13 +601,13 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
   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]]),
+      class: m(["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])
+        class: m(["flex-shrink-0", e.iconWrapperClass])
       }, [
-        f(l.$slots, "icon", {}, () => [
+        c(l.$slots, "icon", {}, () => [
           q(d(D), {
             text: e.avatarText,
             src: e.avatarSrc,
@@ -609,14 +619,14 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
       ], 2),
       r("div", Ge, [
         r("p", {
-          class: v(e.titleClass)
-        }, x(e.title), 3),
+          class: m(e.titleClass)
+        }, E(e.title), 3),
         e.subtitle ? (a(), o("div", {
           key: 0,
-          class: v(e.subtitleClass)
+          class: m(e.subtitleClass)
         }, [
-          f(l.$slots, "additional", {}, () => [
-            G(x(e.subtitle), 1)
+          c(l.$slots, "additional", {}, () => [
+            G(E(e.subtitle), 1)
           ])
         ], 2)) : C("", !0)
       ]),
@@ -625,7 +635,7 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
         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),
+      }, E(e.editLabel), 1)) : C("", !0),
       q(Re, {
         variant: e.indicator,
         selected: e.selected
@@ -673,25 +683,25 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
   emits: ["select", "edit", "create"],
   setup(e) {
     return (l, t) => (a(), o("div", {
-      class: v(["divide-y divide-[#E3ECF2] overflow-auto", e.scrollHeightClass])
+      class: m(["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)
+        c(l.$slots, "empty", {}, () => [
+          r("p", Je, E(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)
+          G(E(e.notFoundLabel) + " ", 1),
+          r("b", null, E(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)
+        }, E(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),
@@ -706,20 +716,20 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
         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))
+        onSelect: (g) => l.$emit("select", n),
+        onEdit: (g) => l.$emit("edit", e.resolvers.getEntityKey(n))
       }, R({ _: 2 }, [
         l.$slots.itemIcon ? {
           name: "icon",
-          fn: E(() => [
-            f(l.$slots, "itemIcon", { item: n })
+          fn: x(() => [
+            c(l.$slots, "itemIcon", { item: n })
           ]),
           key: "0"
         } : void 0,
         l.$slots.itemAdditional ? {
           name: "additional",
-          fn: E(() => [
-            f(l.$slots, "itemAdditional", { item: n })
+          fn: x(() => [
+            c(l.$slots, "itemAdditional", { item: n })
           ]),
           key: "1"
         } : void 0
@@ -872,6 +882,11 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
       type: String,
       default: ""
     },
+    modalSubtitle: {
+      required: !1,
+      type: String,
+      default: ""
+    },
     modalTitlePosition: {
       required: !1,
       type: String,
@@ -943,7 +958,7 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
   },
   emits: ["update:modelValue", "onSetEntity"],
   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, {
+    const t = ye(), n = e, g = l, i = S(() => n.t ?? t), b = Ie(n), y = Be(n, b), { searchTerm: f, selectedGroup: L, setSelectedGroup: s, sortedItems: h, loading: $ } = y, {
       modal: T,
       searchInput: O,
       creatingEntity: P,
@@ -954,10 +969,10 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
       openPicker: k,
       selectItem: B,
       onClear: V,
-      onCreateEntity: $,
+      onCreateEntity: w,
       onEditEntity: K,
       onCloseCreateEntity: N
-    } = Me(n, c, m), p = S(
+    } = Me(n, y, g), p = S(
       () => n.modalTitle || i.value("ui.entity_picker.Select")
     ), _ = S(
       () => n.listItemTitleClass || pe
@@ -966,12 +981,12 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
     ), 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 = [];
+      const v = [];
       return n.validation == null || n.validationIndex == null || Object.keys(n.validation).forEach((U) => {
-        U.startsWith(n.validationIndex) && b.push(...n.validation[U]);
-      }), b;
+        U.startsWith(n.validationIndex) && v.push(...n.validation[U]);
+      }), v;
     });
-    return (b, U) => (a(), o(Z, null, [
+    return (v, U) => (a(), o(Z, null, [
       q(Ae, {
         variant: e.variant,
         "model-value": e.modelValue,
@@ -986,21 +1001,21 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
         readonly: e.readonly,
         "tag-color": e.tagColor,
         "change-label": i.value("ui.entity_picker.Change"),
-        resolvers: d(g),
+        resolvers: d(b),
         onOpen: d(k),
         onClear: d(V)
       }, R({ _: 2 }, [
-        b.$slots.button ? {
+        v.$slots.button ? {
           name: "button",
-          fn: E((A) => [
-            f(b.$slots, "button", oe(re(A)))
+          fn: x((A) => [
+            c(v.$slots, "button", oe(re(A)))
           ]),
           key: "0"
         } : void 0,
-        b.$slots.entityAdditional ? {
+        v.$slots.entityAdditional ? {
           name: "entityAdditional",
-          fn: E(({ item: A }) => [
-            f(b.$slots, "entityAdditional", { item: A })
+          fn: x(({ item: A }) => [
+            c(v.$slots, "entityAdditional", { item: A })
           ]),
           key: "1"
         } : void 0
@@ -1008,66 +1023,67 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
       q(be, {
         useModal: d(T),
         title: p.value,
+        subtitle: e.modalSubtitle,
         "title-center": e.modalTitlePosition === "center",
         size: d(j),
         "mobile-view": d(W),
         view: le.value
       }, R({
-        create: E(() => [
-          f(b.$slots, "creating", {
+        create: x(() => [
+          c(v.$slots, "creating", {
             onCloseCreateEntity: d(N),
-            find: d(y)
+            find: d(f)
           })
         ]),
-        edit: E(() => [
-          f(b.$slots, "edit", {
+        edit: x(() => [
+          c(v.$slots, "edit", {
             onCloseCreateEntity: d(N),
             editId: d(z)
           })
         ]),
-        list: E(() => [
+        list: x(() => [
           q(Ze, {
-            loading: d(w),
+            loading: d($),
             items: d(h),
-            "search-term": d(y),
+            "search-term": d(f),
             "scroll-height-class": te.value,
-            resolvers: d(g),
+            resolvers: d(b),
             "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)}»`,
+            "create-with-query-label": `${e.labelCreateButton} «${d(f)}»`,
             "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,
+            "can-edit": !!v.$slots.edit && !e.noEdit,
             "edit-label": e.editButtonLabel || i.value("ui.entity_picker.Edit"),
             onSelect: d(B),
             onEdit: d(K),
-            onCreate: d($)
+            onCreate: d(w)
           }, R({ _: 2 }, [
-            b.$slots.creating ? {
+            v.$slots.creating ? {
               name: "empty",
-              fn: E(() => [
-                f(b.$slots, "creating", {
+              fn: x(() => [
+                c(v.$slots, "creating", {
                   onCloseCreateEntity: d(N),
-                  find: d(y)
+                  find: d(f)
                 })
               ]),
               key: "0"
             } : void 0,
-            b.$slots.entityListIcon ? {
+            v.$slots.entityListIcon ? {
               name: "itemIcon",
-              fn: E(({ item: A }) => [
-                f(b.$slots, "entityListIcon", { item: A })
+              fn: x(({ item: A }) => [
+                c(v.$slots, "entityListIcon", { item: A })
               ]),
               key: "1"
             } : void 0,
-            b.$slots.entityAdditional ? {
+            v.$slots.entityAdditional ? {
               name: "itemAdditional",
-              fn: E(({ item: A }) => [
-                f(b.$slots, "entityAdditional", { item: A })
+              fn: x(({ item: A }) => [
+                c(v.$slots, "entityAdditional", { item: A })
               ]),
               key: "2"
             } : void 0
@@ -1075,48 +1091,55 @@ const Te = { class: "relative px-4 pt-3 pb-2" }, ze = { class: "relative" }, qe
         ]),
         _: 2
       }, [
-        b.$slots.modalHeader ? {
-          name: "header",
-          fn: E(() => [
-            f(b.$slots, "modalHeader")
+        v.$slots.modalSubtitle ? {
+          name: "subtitle",
+          fn: x(() => [
+            c(v.$slots, "modalSubtitle")
           ]),
           key: "0"
         } : void 0,
+        v.$slots.modalHeader ? {
+          name: "header",
+          fn: x(() => [
+            c(v.$slots, "modalHeader")
+          ]),
+          key: "1"
+        } : void 0,
         e.noSearch ? void 0 : {
           name: "search",
-          fn: E(() => [
+          fn: x(() => [
             q(je, {
               ref_key: "searchInput",
               ref: O,
-              modelValue: d(y),
-              "onUpdate:modelValue": U[0] || (U[0] = (A) => de(y) ? y.value = A : null),
+              modelValue: d(f),
+              "onUpdate:modelValue": U[0] || (U[0] = (A) => de(f) ? f.value = A : null),
               placeholder: e.searchPlaceholder || i.value("ui.entity_picker.Search")
             }, null, 8, ["modelValue", "placeholder"])
           ]),
-          key: "1"
+          key: "2"
         },
-        b.$slots.prepend ? {
+        v.$slots.prepend ? {
           name: "prepend",
-          fn: E(() => [
-            f(b.$slots, "prepend", {
+          fn: x(() => [
+            c(v.$slots, "prepend", {
               selectedGroup: d(L),
               setSelectedGroup: d(s)
             })
           ]),
-          key: "2"
+          key: "3"
         } : void 0,
-        !d(w) && !e.noCreate && e.labelCreateButton ? {
+        !d($) && !e.noCreate && e.labelCreateButton ? {
           name: "createButton",
-          fn: E(() => [
+          fn: x(() => [
             q(Pe, {
               label: e.labelCreateButton,
-              onClick: d($)
+              onClick: d(w)
             }, null, 8, ["label", "onClick"])
           ]),
-          key: "3"
+          key: "4"
         } : 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)
+      ]), 1032, ["useModal", "title", "subtitle", "title-center", "size", "mobile-view", "view"]),
+      J.value.length > 0 ? (a(), o("div", De, E(J.value.join(" ")), 1)) : C("", !0)
     ], 64));
   }
 }), dt = {