@mobilon-dev/chotto 0.3.97 → 0.3.98

package/dist/components/3_compounds/SideBar/SideBar.vue.js

@@ -1,31 +1,10 @@
-import { toRef as R, computed as y, ref as m, onMounted as Q, nextTick as p, onUnmounted as X, watch as N, createElementBlock as s, openBlock as i, normalizeClass as r, createCommentVNode as l, createElementVNode as c, normalizeStyle as Z, Fragment as F, renderList as L, createBlock as _, withCtx as h, toDisplayString as V, createVNode as H } from "vue";
+import { createElementBlock as a, openBlock as n, normalizeClass as c, createCommentVNode as l, createElementVNode as u, normalizeStyle as Z, Fragment as V, renderList as H, createBlock as v, withCtx as y, toDisplayString as j, createVNode as P, toRef as q, computed as p, ref as m, onMounted as Y, nextTick as S, onUnmounted as D, watch as M } from "vue";
 import $ from "../../1_atoms/ButtonContextMenu/ButtonContextMenu.vue.js";
-import Y from "../../1_icons/SettingsIcon.vue.js";
-import I from "../../1_atoms/Tooltip/Tooltip.vue.js";
+import tt from "../../1_icons/SettingsIcon.vue.js";
+import et from "../../1_atoms/Tooltip/Tooltip.vue.js";
 /* empty css             */
-import tt from "../../../_virtual/_plugin-vue_export-helper.js";
-const et = ["onClick"], ot = ["src", "alt"], it = {
-  key: 1,
-  class: "sidebar__notification-count"
-}, nt = { class: "sidebar__scroll-container" }, st = ["onClick"], at = ["src", "alt"], rt = ["src"], lt = { key: 2 }, ct = {
-  key: 2,
-  class: "sidebar__settings-container"
-}, ut = {
-  class: "sidebar__settings-btn",
-  type: "button"
-}, dt = {
-  key: 0,
-  class: "sidebar__settings-indicator-anchor"
-}, ft = {
-  key: 1,
-  class: "sidebar__settings-indicator"
-}, mt = {
-  key: 0,
-  class: "sidebar__settings-indicator-anchor"
-}, gt = {
-  key: 1,
-  class: "sidebar__settings-indicator"
-}, _t = {
+import ot from "../../../_virtual/_plugin-vue_export-helper.js";
+const it = {
   __name: "SideBar",
   props: {
     sidebarItems: {
@@ -78,221 +57,319 @@ const et = ["onClick"], ot = ["src", "alt"], it = {
     }
   },
   emits: ["selectItem", "settingsClick"],
-  setup(n, { emit: j }) {
-    const u = n, v = R(u, "sidebarItems"), w = R(u, "menuActions"), B = j, k = y(
-      () => Array.isArray(u.settingsIndicatorTooltipItems) ? u.settingsIndicatorTooltipItems.map((t) => String(t ?? "").trim()).filter(Boolean) : []
-    ), x = y(
-      () => k.value.length > 0 || !!u.settingsIndicatorTooltip.trim()
-    ), A = y(
-      () => v.value.filter((t) => t.isFixedBottom).sort((t, e) => e.notificationCount - t.notificationCount)
-    ), D = y(
-      () => v.value.filter((t) => !t.isFixedBottom).sort((t, e) => e.notificationCount - t.notificationCount)
-    ), G = (t) => {
-      const e = v.value.find((o) => o.itemId === t);
-      B("selectItem", e);
-    }, q = (t, e) => {
-      K(t.currentTarget), G(e);
-    }, P = (t) => {
-      const e = t.split(" ");
-      return e.length > 2 ? e.slice(0, 2).join(" ") : t;
-    }, U = (t) => {
+  setup(E, { expose: d, emit: s }) {
+    d();
+    const e = E, g = q(e, "sidebarItems"), C = q(e, "menuActions"), i = s, h = p(
+      () => Array.isArray(e.settingsIndicatorTooltipItems) ? e.settingsIndicatorTooltipItems.map((t) => String(t ?? "").trim()).filter(Boolean) : []
+    ), b = p(
+      () => h.value.length > 0 || !!e.settingsIndicatorTooltip.trim()
+    ), G = p(
+      () => g.value.filter((t) => t.isFixedBottom).sort((t, o) => o.notificationCount - t.notificationCount)
+    ), O = p(
+      () => g.value.filter((t) => !t.isFixedBottom).sort((t, o) => o.notificationCount - t.notificationCount)
+    ), R = (t) => {
+      const o = g.value.find((r) => r.itemId === t);
+      i("selectItem", o);
+    }, U = (t, o) => {
+      F(t.currentTarget), R(o);
+    }, W = (t) => {
+      const o = t.split(" ");
+      return o.length > 2 ? o.slice(0, 2).join(" ") : t;
+    }, J = (t) => {
       console.log("Выбрано действие:", t), typeof t.action == "function" && t.action();
-    }, W = () => {
+    }, K = () => {
       console.log("Кнопка меню была нажата");
-    }, J = () => {
-      var e;
-      B("settingsClick");
-      const t = (e = w.value) == null ? void 0 : e[0];
+    }, Q = () => {
+      var o;
+      i("settingsClick");
+      const t = (o = C.value) == null ? void 0 : o[0];
       t && typeof t.action == "function" && !t.disabled && t.action();
-    }, d = m(null), C = m(null), S = m(!1), T = m(0), b = m(40), z = m(!1), E = (t) => {
-      const e = d.value;
-      if (!e || !t) return 0;
-      const o = e.getBoundingClientRect(), a = t.getBoundingClientRect(), O = a.top + a.height / 2 - o.top - b.value / 2;
-      return Math.max(0, O);
-    }, g = () => {
-      if (!d.value) return;
-      const e = d.value.querySelector(".sidebar__image--active");
-      e ? (T.value = E(e), S.value = !0) : S.value = !1;
-    }, K = (t) => {
+    }, _ = m(null), N = m(null), T = m(!1), x = m(0), k = m(40), z = m(!1), B = (t) => {
+      const o = _.value;
+      if (!o || !t) return 0;
+      const r = o.getBoundingClientRect(), f = t.getBoundingClientRect(), X = f.top + f.height / 2 - r.top - k.value / 2;
+      return Math.max(0, X);
+    }, I = () => {
+      if (!_.value) return;
+      const o = _.value.querySelector(".sidebar__image--active");
+      o ? (x.value = B(o), T.value = !0) : T.value = !1;
+    }, F = (t) => {
       try {
-        if (!t || !d.value) return;
-        const e = t.querySelector(".sidebar__image");
-        if (!e) return;
-        const o = E(e), a = 12, f = 160;
-        z.value = !0, b.value = a, setTimeout(() => {
-          T.value = o, requestAnimationFrame(() => {
-            b.value = 40, setTimeout(() => {
+        if (!t || !_.value) return;
+        const o = t.querySelector(".sidebar__image");
+        if (!o) return;
+        const r = B(o), f = 12, A = 160;
+        z.value = !0, k.value = f, setTimeout(() => {
+          x.value = r, requestAnimationFrame(() => {
+            k.value = 40, setTimeout(() => {
               z.value = !1;
-            }, f);
+            }, A);
           });
-        }, f);
+        }, A);
       } catch {
       }
-    }, M = () => g();
-    return Q(() => {
-      var e;
-      p(g), window.addEventListener("resize", M);
-      const t = (e = d.value) == null ? void 0 : e.querySelector(".sidebar__scroll-container");
-      t && t.addEventListener("scroll", g);
-    }), X(() => {
-      var e;
-      window.removeEventListener("resize", M);
-      const t = (e = d.value) == null ? void 0 : e.querySelector(".sidebar__scroll-container");
-      t && t.removeEventListener("scroll", g);
-    }), N(() => v.value.map((t) => t.selected), () => p(g)), N(
-      () => u.showSettings && u.showSettingsIndicator && x.value,
-      (t, e) => {
-        !t || e === !0 || p(() => {
-          p(() => {
-            var o, a;
-            (a = (o = C.value) == null ? void 0 : o.startAutoShow) == null || a.call(o);
+    }, w = () => I();
+    Y(() => {
+      var o;
+      S(I), window.addEventListener("resize", w);
+      const t = (o = _.value) == null ? void 0 : o.querySelector(".sidebar__scroll-container");
+      t && t.addEventListener("scroll", I);
+    }), D(() => {
+      var o;
+      window.removeEventListener("resize", w);
+      const t = (o = _.value) == null ? void 0 : o.querySelector(".sidebar__scroll-container");
+      t && t.removeEventListener("scroll", I);
+    }), M(() => g.value.map((t) => t.selected), () => S(I)), M(
+      () => e.showSettings && e.showSettingsIndicator && b.value,
+      (t, o) => {
+        !t || o === !0 || S(() => {
+          S(() => {
+            var r, f;
+            (f = (r = N.value) == null ? void 0 : r.startAutoShow) == null || f.call(r);
           });
         });
       },
       { flush: "post", immediate: !0 }
-    ), (t, e) => (i(), s("div", {
-      ref_key: "containerRef",
-      ref: d,
-      class: r(["sidebar__container", { "sidebar-horizontal__container": n.horizontal }])
-    }, [
-      !n.horizontal && S.value ? (i(), s("span", {
-        key: 0,
-        class: r(["sidebar__selected-bar", { "is-animating": z.value }]),
-        style: Z({ top: T.value + "px", height: b.value + "px" })
-      }, null, 6)) : l("", !0),
-      A.value.length > 0 ? (i(), s("ul", {
-        key: 1,
-        class: r(["sidebar__list-fixed", { "sidebar-horizontal__list-fixed": n.horizontal }])
-      }, [
-        (i(!0), s(F, null, L(A.value, (o, a) => (i(), s("li", {
-          key: a,
-          class: r(["sidebar__item-fixed", { "sidebar-horizontal__item": n.horizontal }]),
-          onClick: (f) => q(f, o.itemId)
-        }, [
-          o.name ? (i(), _(I, {
-            key: 0,
-            text: P(o.name),
-            position: "right",
-            offset: 8
-          }, {
-            default: h(() => [
-              c("img", {
-                src: o.icon,
-                alt: o.name,
-                class: r(["sidebar__image", {
-                  "sidebar__image--active": o.selected === !0,
-                  "sidebar-horizontal__image": n.horizontal
-                }])
-              }, null, 10, ot),
-              e[0] || (e[0] = c("p", null, "Мои", -1))
-            ]),
-            _: 2
-          }, 1032, ["text"])) : l("", !0),
-          o.notificationCount ? (i(), s("span", it, V(o.notificationCount > 99 ? "99+" : o.notificationCount), 1)) : l("", !0)
-        ], 10, et))), 128))
-      ], 2)) : l("", !0),
-      c("div", nt, [
-        c("ul", {
-          class: r(["sidebar__list", { "sidebar-horizontal__list": n.horizontal }])
-        }, [
-          (i(!0), s(F, null, L(D.value, (o, a) => (i(), s("li", {
-            key: a,
-            class: r(["sidebar__item", { "sidebar-horizontal__item": n.horizontal }]),
-            onClick: (f) => q(f, o.itemId)
-          }, [
-            o.name ? (i(), _(I, {
-              key: 0,
-              text: o.name,
-              position: "right",
-              offset: 8
-            }, {
-              default: h(() => [
-                c("img", {
-                  src: o.icon,
-                  alt: o.name,
-                  class: r(["sidebar__image", {
-                    "sidebar__image--active": o.selected === !0,
-                    "sidebar-horizontal__image": n.horizontal
+    );
+    const L = { props: e, items: g, menuActions: C, emit: i, normalizedSettingsIndicatorTooltipItems: h, hasSettingsIndicatorTooltipContent: b, fixedItems: G, regularItems: O, selectItem: R, onItemClick: U, getName: W, handleMenuAction: J, handleButtonClick: K, handleSettingsImmediateClick: Q, containerRef: _, settingsIndicatorTooltipRef: N, barVisible: T, barTop: x, barHeight: k, isAnimating: z, computeTopForAvatar: B, syncBarWithSelected: I, animateBarToTarget: F, handleResize: w, toRef: q, computed: p, ref: m, onMounted: Y, onUnmounted: D, nextTick: S, watch: M, ButtonContextMenu: $, SettingsIcon: tt, Tooltip: et };
+    return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
+  }
+}, nt = ["onClick"], st = ["src", "alt"], at = {
+  key: 1,
+  class: "sidebar__notification-count"
+}, rt = { class: "sidebar__scroll-container" }, lt = ["onClick"], ct = ["src", "alt"], dt = ["src"], ut = { key: 2 }, _t = {
+  key: 2,
+  class: "sidebar__settings-container"
+}, ft = {
+  class: "sidebar__settings-btn",
+  type: "button"
+}, mt = {
+  key: 0,
+  class: "sidebar__settings-indicator-anchor"
+}, gt = {
+  key: 1,
+  class: "sidebar__settings-indicator"
+}, ht = {
+  key: 0,
+  class: "sidebar__settings-indicator-anchor"
+}, bt = {
+  key: 1,
+  class: "sidebar__settings-indicator"
+};
+function It(E, d, s, e, g, C) {
+  return n(), a(
+    "div",
+    {
+      ref: "containerRef",
+      class: c(["sidebar__container", { "sidebar-horizontal__container": s.horizontal }])
+    },
+    [
+      !s.horizontal && e.barVisible ? (n(), a(
+        "span",
+        {
+          key: 0,
+          class: c(["sidebar__selected-bar", { "is-animating": e.isAnimating }]),
+          style: Z({ top: e.barTop + "px", height: e.barHeight + "px" })
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      )) : l("v-if", !0),
+      l(" Закреплённые элементы (вне скролла) "),
+      e.fixedItems.length > 0 ? (n(), a(
+        "ul",
+        {
+          key: 1,
+          class: c(["sidebar__list-fixed", { "sidebar-horizontal__list-fixed": s.horizontal }])
+        },
+        [
+          (n(!0), a(
+            V,
+            null,
+            H(e.fixedItems, (i, h) => (n(), a("li", {
+              key: h,
+              class: c(["sidebar__item-fixed", { "sidebar-horizontal__item": s.horizontal }]),
+              onClick: (b) => e.onItemClick(b, i.itemId)
+            }, [
+              i.name ? (n(), v(e.Tooltip, {
+                key: 0,
+                text: e.getName(i.name),
+                position: "right",
+                offset: 8
+              }, {
+                default: y(() => [
+                  u("img", {
+                    src: i.icon,
+                    alt: i.name,
+                    class: c(["sidebar__image", {
+                      "sidebar__image--active": i.selected === !0,
+                      "sidebar-horizontal__image": s.horizontal
+                    }])
+                  }, null, 10, st),
+                  d[0] || (d[0] = u(
+                    "p",
+                    null,
+                    "Мои",
+                    -1
+                    /* CACHED */
+                  ))
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["text"])) : l("v-if", !0),
+              i.notificationCount ? (n(), a(
+                "span",
+                at,
+                j(i.notificationCount > 99 ? "99+" : i.notificationCount),
+                1
+                /* TEXT */
+              )) : l("v-if", !0)
+            ], 10, nt))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        2
+        /* CLASS */
+      )) : l("v-if", !0),
+      l(" Скроллируемая область с обычными элементами "),
+      u("div", rt, [
+        u(
+          "ul",
+          {
+            class: c(["sidebar__list", { "sidebar-horizontal__list": s.horizontal }])
+          },
+          [
+            (n(!0), a(
+              V,
+              null,
+              H(e.regularItems, (i, h) => (n(), a("li", {
+                key: h,
+                class: c(["sidebar__item", { "sidebar-horizontal__item": s.horizontal }]),
+                onClick: (b) => e.onItemClick(b, i.itemId)
+              }, [
+                i.name ? (n(), v(e.Tooltip, {
+                  key: 0,
+                  text: i.name,
+                  position: "right",
+                  offset: 8
+                }, {
+                  default: y(() => [
+                    u("img", {
+                      src: i.icon,
+                      alt: i.name,
+                      class: c(["sidebar__image", {
+                        "sidebar__image--active": i.selected === !0,
+                        "sidebar-horizontal__image": s.horizontal
+                      }])
+                    }, null, 10, ct)
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["text"])) : (n(), a("img", {
+                  key: 1,
+                  src: i.icon,
+                  alt: "icon",
+                  class: c(["sidebar__image", {
+                    "sidebar__image--active": i.selected === !0,
+                    "sidebar-horizontal__image": s.horizontal
                   }])
-                }, null, 10, at)
-              ]),
-              _: 2
-            }, 1032, ["text"])) : (i(), s("img", {
-              key: 1,
-              src: o.icon,
-              alt: "icon",
-              class: r(["sidebar__image", {
-                "sidebar__image--active": o.selected === !0,
-                "sidebar-horizontal__image": n.horizontal
-              }])
-            }, null, 10, rt)),
-            o.notificationCount ? (i(), s("span", lt, V(o.notificationCount > 99 ? "99+" : o.notificationCount), 1)) : l("", !0)
-          ], 10, st))), 128))
-        ], 2)
+                }, null, 10, dt)),
+                i.notificationCount ? (n(), a(
+                  "span",
+                  ut,
+                  j(i.notificationCount > 99 ? "99+" : i.notificationCount),
+                  1
+                  /* TEXT */
+                )) : l("v-if", !0)
+              ], 10, lt))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          2
+          /* CLASS */
+        )
       ]),
-      n.showSettings ? (i(), s("div", ct, [
-        n.settingsButtonMode === "menu" ? (i(), _($, {
+      s.showSettings ? (n(), a("div", _t, [
+        s.settingsButtonMode === "menu" ? (n(), v(e.ButtonContextMenu, {
           key: 0,
-          actions: w.value,
+          actions: e.menuActions,
           mode: "click",
           "menu-side": "top-right",
-          onClick: U,
-          onButtonClick: W
+          onClick: e.handleMenuAction,
+          onButtonClick: e.handleButtonClick
         }, {
-          default: h(() => [
-            c("button", ut, [
-              H(Y),
-              n.showSettingsIndicator ? (i(), s("span", dt, [
-                x.value ? (i(), _(I, {
+          default: y(() => [
+            u("button", ft, [
+              P(e.SettingsIcon),
+              s.showSettingsIndicator ? (n(), a("span", mt, [
+                e.hasSettingsIndicatorTooltipContent ? (n(), v(e.Tooltip, {
                   key: 0,
-                  ref_key: "settingsIndicatorTooltipRef",
-                  ref: C,
-                  text: n.settingsIndicatorTooltip,
-                  texts: k.value,
+                  ref: "settingsIndicatorTooltipRef",
+                  text: s.settingsIndicatorTooltip,
+                  texts: e.normalizedSettingsIndicatorTooltipItems,
                   position: "top",
                   offset: 8,
                   "max-width": "460px",
-                  "auto-show-duration": n.settingsIndicatorTooltipAutoShowMs
+                  "auto-show-duration": s.settingsIndicatorTooltipAutoShowMs
                 }, {
-                  default: h(() => [...e[1] || (e[1] = [
-                    c("span", { class: "sidebar__settings-indicator" }, null, -1)
+                  default: y(() => [...d[1] || (d[1] = [
+                    u(
+                      "span",
+                      { class: "sidebar__settings-indicator" },
+                      null,
+                      -1
+                      /* CACHED */
+                    )
                   ])]),
                   _: 1
-                }, 8, ["text", "texts", "auto-show-duration"])) : (i(), s("span", ft))
-              ])) : l("", !0)
+                  /* STABLE */
+                }, 8, ["text", "texts", "auto-show-duration"])) : (n(), a("span", gt))
+              ])) : l("v-if", !0)
             ])
           ]),
           _: 1
-        }, 8, ["actions"])) : (i(), s("button", {
+          /* STABLE */
+        }, 8, ["actions"])) : (n(), a("button", {
           key: 1,
           class: "sidebar__settings-btn",
           type: "button",
-          onClick: J
+          onClick: e.handleSettingsImmediateClick
         }, [
-          H(Y),
-          n.showSettingsIndicator ? (i(), s("span", mt, [
-            x.value ? (i(), _(I, {
+          P(e.SettingsIcon),
+          s.showSettingsIndicator ? (n(), a("span", ht, [
+            e.hasSettingsIndicatorTooltipContent ? (n(), v(e.Tooltip, {
               key: 0,
-              ref_key: "settingsIndicatorTooltipRef",
-              ref: C,
-              text: n.settingsIndicatorTooltip,
-              texts: k.value,
+              ref: "settingsIndicatorTooltipRef",
+              text: s.settingsIndicatorTooltip,
+              texts: e.normalizedSettingsIndicatorTooltipItems,
               position: "top",
               offset: 8,
               "max-width": "460px",
-              "auto-show-duration": n.settingsIndicatorTooltipAutoShowMs
+              "auto-show-duration": s.settingsIndicatorTooltipAutoShowMs
             }, {
-              default: h(() => [...e[2] || (e[2] = [
-                c("span", { class: "sidebar__settings-indicator" }, null, -1)
+              default: y(() => [...d[2] || (d[2] = [
+                u(
+                  "span",
+                  { class: "sidebar__settings-indicator" },
+                  null,
+                  -1
+                  /* CACHED */
+                )
               ])]),
               _: 1
-            }, 8, ["text", "texts", "auto-show-duration"])) : (i(), s("span", gt))
-          ])) : l("", !0)
+              /* STABLE */
+            }, 8, ["text", "texts", "auto-show-duration"])) : (n(), a("span", bt))
+          ])) : l("v-if", !0)
         ]))
-      ])) : l("", !0)
-    ], 2));
-  }
-}, kt = /* @__PURE__ */ tt(_t, [["__scopeId", "data-v-f93a9b48"]]);
+      ])) : l("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const Tt = /* @__PURE__ */ ot(it, [["render", It], ["__scopeId", "data-v-49e8cce4"], ["__file", "/var/store/dev-space/repos-projects/chotto/chotto/src/components/3_compounds/SideBar/SideBar.vue"]]);
 export {
-  kt as default
+  Tt as default
 };

package/dist/components/4_layouts/AdaptiveExtendedLayout/AdaptiveExtendedLayout.vue.js

@@ -1,7 +1,7 @@
-import { watch as a, inject as y, onMounted as u, createElementBlock as p, openBlock as h, unref as d, createElementVNode as i, renderSlot as n } from "vue";
+import { createElementBlock as h, openBlock as _, createElementVNode as s, renderSlot as l, watch as a, inject as p, onMounted as y } from "vue";
 /* empty css                            */
 import x from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = ["id"], _ = ["id"], m = ["id"], v = ["id"], b = {
+const f = {
   __name: "AdaptiveExtendedLayout",
   props: {
     isSecondColVisible: {
@@ -13,51 +13,58 @@ const f = ["id"], _ = ["id"], m = ["id"], v = ["id"], b = {
       required: !0
     }
   },
-  setup(s) {
-    const o = s;
+  setup(d, { expose: c }) {
+    c();
+    const o = d;
     a(
       () => [o.isSecondColVisible, o.isThirdColVisible],
       () => {
-        o.isSecondColVisible && r(), o.isThirdColVisible && c();
+        o.isSecondColVisible && i(), o.isThirdColVisible && n();
       },
       { immediate: !0 }
     );
-    const t = y("chatAppId"), c = () => {
+    const t = p("chatAppId"), n = () => {
       const e = document.getElementById("extern-layout-container-" + t);
       e.style.setProperty("--chotto-adaptive-extended-layout-second-col-display", "none"), e.style.setProperty("--chotto-adaptive-extended-layout-third-col-display", "flex"), e.style.setProperty("--chotto-adaptive-extended-layout-second-col-width", "0%"), e.style.setProperty("--chotto-adaptive-extended-layout-third-col-width", "100%");
-    }, r = () => {
+    }, i = () => {
       const e = document.getElementById("extern-layout-container-" + t);
       e.style.setProperty("--chotto-adaptive-extended-layout-second-col-display", "flex"), e.style.setProperty("--chotto-adaptive-extended-layout-third-col-display", "none"), e.style.setProperty("--chotto-adaptive-extended-layout-second-col-width", "100%"), e.style.setProperty("--chotto-adaptive-extended-layout-third-col-width", "0%");
     };
-    return u(() => {
-      const e = document.getElementById("extern-layout-container-" + t), l = document.getElementById("extend-layout-first-col-" + t);
-      e.style.setProperty("--chotto-adaptive-extended-layout-first-col-width", l.offsetWidth + "px");
-    }), (e, l) => (h(), p("div", {
-      id: "extern-layout-container-" + d(t),
-      ref: "refContainer",
-      class: "extend-layout__container"
-    }, [
-      i("div", {
-        id: "extend-layout-first-col-" + d(t),
-        class: "extend-layout__first-col"
-      }, [
-        n(e.$slots, "first-col", {}, void 0, !0)
-      ], 8, _),
-      i("div", {
-        id: "extend-layout-second-col-" + d(t),
-        class: "extend-layout__second-col"
-      }, [
-        n(e.$slots, "second-col", {}, void 0, !0)
-      ], 8, m),
-      i("div", {
-        id: "extend-layout-third-col-" + d(t),
-        class: "extend-layout__third-col"
-      }, [
-        n(e.$slots, "third-col", {}, void 0, !0)
-      ], 8, v)
-    ], 8, f));
+    y(() => {
+      const e = document.getElementById("extern-layout-container-" + t), u = document.getElementById("extend-layout-first-col-" + t);
+      e.style.setProperty("--chotto-adaptive-extended-layout-first-col-width", u.offsetWidth + "px");
+    });
+    const r = { props: o, chatAppId: t, setThirdColVisible: n, setSecondColVisible: i, inject: p, watch: a, onMounted: y };
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
   }
-}, B = /* @__PURE__ */ x(b, [["__scopeId", "data-v-45cdbb05"]]);
+}, v = ["id"], m = ["id"], I = ["id"], b = ["id"];
+function A(d, c, o, t, n, i) {
+  return _(), h("div", {
+    id: "extern-layout-container-" + t.chatAppId,
+    ref: "refContainer",
+    class: "extend-layout__container"
+  }, [
+    s("div", {
+      id: "extend-layout-first-col-" + t.chatAppId,
+      class: "extend-layout__first-col"
+    }, [
+      l(d.$slots, "first-col", {}, void 0, !0)
+    ], 8, m),
+    s("div", {
+      id: "extend-layout-second-col-" + t.chatAppId,
+      class: "extend-layout__second-col"
+    }, [
+      l(d.$slots, "second-col", {}, void 0, !0)
+    ], 8, I),
+    s("div", {
+      id: "extend-layout-third-col-" + t.chatAppId,
+      class: "extend-layout__third-col"
+    }, [
+      l(d.$slots, "third-col", {}, void 0, !0)
+    ], 8, b)
+  ], 8, v);
+}
+const V = /* @__PURE__ */ x(f, [["render", A], ["__scopeId", "data-v-2399a1d0"], ["__file", "/var/store/dev-space/repos-projects/chotto/chotto/src/components/4_layouts/AdaptiveExtendedLayout/AdaptiveExtendedLayout.vue"]]);
 export {
-  B as default
+  V as default
 };