dxd-style-code 0.1.2 → 0.1.3

package/README.md

@@ -2,6 +2,14 @@
 
 Vue 3 UI Component Library с атомарной структурой и Tailwind CSS.
 
+## 📚 Документация
+
+Полная документация доступна в папке [`docs/`](./docs/README.md):
+
+- [Компоненты](./docs/components/) - Детальная документация по каждому компоненту
+- [Руководства](./docs/guides/) - Гайды по использованию
+- [Миграция](./docs/migration/) - Обновление версий
+
 ## Установка
 
 ```bash

package/dist/dxd-style-code.js

@@ -1,4 +1,4 @@
-import { computed as p, createBlock as $, openBlock as a, resolveDynamicComponent as O, normalizeClass as f, withCtx as T, renderSlot as V, createElementBlock as n, createCommentVNode as c, createTextVNode as j, createElementVNode as o, toDisplayString as h, normalizeStyle as G, ref as B, createVNode as A, unref as _, inject as Q, Fragment as M, renderList as L, watch as F, Transition as Y, provide as ee, onMounted as U, onBeforeUnmount as te, withDirectives as q, withKeys as E, withModifiers as P, vModelText as K, nextTick as J, vShow as ce, Teleport as ge } from "vue";
+import { computed as p, createBlock as C, openBlock as a, resolveDynamicComponent as O, normalizeClass as f, withCtx as T, renderSlot as V, createElementBlock as n, createCommentVNode as c, createTextVNode as j, createElementVNode as o, toDisplayString as h, normalizeStyle as G, ref as B, createVNode as A, unref as _, inject as Q, Fragment as M, renderList as L, watch as F, Transition as Y, provide as ee, onMounted as U, onBeforeUnmount as te, withDirectives as q, withKeys as E, withModifiers as P, vModelText as K, nextTick as J, vShow as ce, Teleport as ge } from "vue";
 const Os = {
   __name: "DXHeading",
   props: {
@@ -49,7 +49,7 @@ const Os = {
       "tracking-tight",
       t.truncate && "truncate"
     ]);
-    return (v, b) => (a(), $(O(l.value), {
+    return (v, b) => (a(), C(O(l.value), {
       class: f(u.value),
       "data-component": "DXHeading",
       "data-level": e.level
@@ -111,7 +111,7 @@ const Os = {
       t.truncate && "truncate",
       t.lines > 0 && `line-clamp-${t.lines}`
     ]);
-    return (u, v) => (a(), $(O(e.tag), {
+    return (u, v) => (a(), C(O(e.tag), {
       class: f(d.value),
       "data-component": "DXText"
     }, {
@@ -191,7 +191,7 @@ const Os = {
       l[t.size] || l.sm,
       "font-mono"
     ]);
-    return (r, i) => (a(), $(O(e.block ? "pre" : "code"), {
+    return (r, i) => (a(), C(O(e.block ? "pre" : "code"), {
       class: f(s.value),
       "data-component": "DXCode",
       "data-block": e.block
@@ -281,7 +281,7 @@ const Os = {
       t.marker ? r[t.marker] : t.ordered ? "list-decimal" : "list-disc",
       "pl-5 text-slate-700"
     ]);
-    return (d, u) => (a(), $(O(e.ordered ? "ol" : "ul"), {
+    return (d, u) => (a(), C(O(e.ordered ? "ol" : "ul"), {
       class: f(i.value),
       "data-component": "DXList"
     }, {
@@ -607,7 +607,7 @@ const Os = {
       t.shadow && (d[t.shadow] || `shadow-${t.shadow}`),
       t.border && "border border-slate-200"
     ]);
-    return (v, b) => (a(), $(O(e.tag), {
+    return (v, b) => (a(), C(O(e.tag), {
       class: f(u.value),
       "data-component": "DXBox"
     }, {
@@ -882,7 +882,7 @@ const N = (e, t) => {
       s[t.animation] || "",
       t.class
     ]);
-    return (i, d) => (a(), $(O(e.icon), {
+    return (i, d) => (a(), C(O(e.icon), {
       class: f(r.value),
       "data-component": "DXIcon",
       "data-size": e.size,
@@ -969,7 +969,7 @@ const N = (e, t) => {
       }, null, 40, Ne)) : e.initials ? (a(), n("span", {
         key: 1,
         class: f(["font-medium", b.value])
-      }, h(e.initials), 3)) : (a(), $(D, {
+      }, h(e.initials), 3)) : (a(), C(D, {
         key: 2,
         icon: g.value,
         size: y.value,
@@ -1008,14 +1008,14 @@ const N = (e, t) => {
       "data-component": "DXBadge",
       "data-variant": e.variant
     }, [
-      e.iconLeft ? (a(), $(D, {
+      e.iconLeft ? (a(), C(D, {
         key: 0,
         icon: e.iconLeft,
         size: "xs",
         animation: "none"
       }, null, 8, ["icon"])) : c("", !0),
       V(r.$slots, "default"),
-      e.iconRight ? (a(), $(D, {
+      e.iconRight ? (a(), C(D, {
         key: 1,
         icon: e.iconRight,
         size: "xs",
@@ -1060,7 +1060,7 @@ const N = (e, t) => {
           return "bg-slate-800 text-white hover:bg-slate-700";
       }
     });
-    return (i, d) => (a(), $(O(l.value), {
+    return (i, d) => (a(), C(O(l.value), {
       type: l.value === "button" ? e.type : void 0,
       disabled: e.disabled,
       to: e.to,
@@ -1781,7 +1781,7 @@ const yt = ["aria-label"], ve = {
       onClick: i,
       "data-component": "DXDropdownItem"
     }, [
-      e.icon ? (a(), $(O(e.icon), {
+      e.icon ? (a(), C(O(e.icon), {
         key: 0,
         class: "w-4 h-4 flex-shrink-0"
       })) : c("", !0),
@@ -1893,7 +1893,7 @@ const Bt = {
       e.label ? (a(), n("label", Xt, h(e.label), 1)) : c("", !0),
       o("div", It, [
         e.prefixIcon || s.$slots.prefix ? (a(), n("div", At, [
-          e.prefixIcon ? (a(), $(D, {
+          e.prefixIcon ? (a(), C(D, {
             key: 0,
             icon: e.prefixIcon,
             size: "sm",
@@ -1909,7 +1909,7 @@ const Bt = {
           onInput: r[0] || (r[0] = (i) => s.$emit("update:modelValue", i.target.value))
         }, null, 42, jt),
         e.suffixIcon || s.$slots.suffix ? (a(), n("div", Mt, [
-          e.suffixIcon ? (a(), $(D, {
+          e.suffixIcon ? (a(), C(D, {
             key: 0,
             icon: e.suffixIcon,
             size: "sm",
@@ -1938,7 +1938,7 @@ const Bt = {
       class: f(["flex items-center px-3 border border-r-0 bg-slate-50 text-slate-600 text-sm first:rounded-l-xl last:rounded-r-xl last:border-r", l.value]),
       "data-component": "DXInputGroupAddon"
     }, [
-      e.icon ? (a(), $(O(e.icon), {
+      e.icon ? (a(), C(O(e.icon), {
         key: 0,
         class: "w-4 h-4"
       })) : c("", !0),
@@ -2287,7 +2287,7 @@ const to = /* @__PURE__ */ N(Zt, [["render", Nt]]), Pt = {
           key: w,
           class: f(["flex flex-col items-center gap-0.5 transition-transform duration-200", { "scale-110": v(y) }])
         }, [
-          e.tickIcons && e.tickIcons[y] ? (a(), $(D, {
+          e.tickIcons && e.tickIcons[y] ? (a(), C(D, {
             key: 0,
             icon: e.tickIcons[y],
             size: "sm",
@@ -2350,7 +2350,7 @@ const to = /* @__PURE__ */ N(Zt, [["render", Nt]]), Pt = {
         key: i(g, w),
         class: f([u(g), "inline-flex items-center gap-1.5 transition-all duration-200"])
       }, [
-        g.icon ? (a(), $(D, {
+        g.icon ? (a(), C(D, {
           key: 0,
           icon: g.icon,
           size: e.variant === "large" ? "sm" : "xs",
@@ -2525,7 +2525,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       "data-component": "DXToast",
       "data-variant": e.variant
     }, [
-      r.value ? (a(), $(D, {
+      r.value ? (a(), C(D, {
         key: 0,
         icon: r.value,
         size: "md",
@@ -2624,7 +2624,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       "aria-label": e.ariaLabel,
       "data-component": "DXToggleButton"
     }, [
-      i.value ? (a(), $(D, {
+      i.value ? (a(), C(D, {
         key: 0,
         icon: i.value,
         size: u.value,
@@ -2727,7 +2727,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
         color: "text-blue-500"
       }
     }, s = p(() => l[t.state] || l.info), r = p(() => s.value.icon), i = p(() => s.value.color);
-    return (d, u) => r.value ? (a(), $(D, {
+    return (d, u) => r.value ? (a(), C(D, {
       key: 0,
       icon: r.value,
       size: e.size,
@@ -2888,7 +2888,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       "data-variant": e.variant
     }, [
       o("div", ql, [
-        v.value ? (a(), $(D, {
+        v.value ? (a(), C(D, {
           key: 0,
           icon: v.value,
           size: "md",
@@ -2906,7 +2906,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
             V(y.$slots, "default")
           ], 2)
         ]),
-        e.dismissible ? (a(), $(ve, {
+        e.dismissible ? (a(), C(ve, {
           key: 1,
           size: "sm",
           variant: "default",
@@ -2955,7 +2955,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
         }, [
           m > 0 ? (a(), n("span", Gl, [
             V(u.$slots, "separator", {}, () => [
-              e.separator === "chevron" ? (a(), $(D, {
+              e.separator === "chevron" ? (a(), C(D, {
                 key: 0,
                 icon: _(fe),
                 size: r.value,
@@ -2963,7 +2963,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
               }, null, 8, ["icon", "size"])) : (a(), n("span", Ul, "/"))
             ])
           ])) : c("", !0),
-          (a(), $(O(i(b)), {
+          (a(), C(O(i(b)), {
             href: b.href,
             to: b.to,
             class: f([
@@ -2973,7 +2973,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
             "aria-current": m === e.items.length - 1 ? "page" : void 0
           }, {
             default: T(() => [
-              b.icon ? (a(), $(D, {
+              b.icon ? (a(), C(D, {
                 key: 0,
                 icon: b.icon,
                 size: r.value,
@@ -3104,13 +3104,13 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
         const x = m.value[v.value];
         x && y(x);
       } else l.allowCustom && d.value && (s("update:modelValue", d.value), u.value = !1);
-    }, C = (x) => {
+    }, $ = (x) => {
       r.value && !r.value.contains(x.target) && (u.value = !1, !l.allowCustom && b.value && (d.value = b.value.label));
     };
     return F(() => l.modelValue, (x) => {
       const k = l.options.find((I) => I.value === x);
       d.value = k ? k.label : l.allowCustom ? String(x || "") : "";
-    }, { immediate: !0 }), U(() => document.addEventListener("click", C)), te(() => document.removeEventListener("click", C)), (x, k) => (a(), n("div", {
+    }, { immediate: !0 }), U(() => document.addEventListener("click", $)), te(() => document.removeEventListener("click", $)), (x, k) => (a(), n("div", {
       class: "relative",
       ref_key: "root",
       ref: r,
@@ -3160,7 +3160,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           onMouseenter: (R) => v.value = X
         }, [
           o("span", aa, [
-            I.icon ? (a(), $(O(I.icon), {
+            I.icon ? (a(), C(O(I.icon), {
               key: 0,
               class: "w-4 h-4 text-slate-500"
             })) : c("", !0),
@@ -3228,13 +3228,13 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           "aria-label": `Скопировать ${e.label || "значение"}`,
           onClick: i
         }, [
-          r.value ? (a(), $(D, {
+          r.value ? (a(), C(D, {
             key: 0,
             icon: _(Je),
             size: "sm",
             animation: e.copiedIconAnimation,
             class: "text-emerald-600"
-          }, null, 8, ["icon", "animation"])) : (a(), $(D, {
+          }, null, 8, ["icon", "animation"])) : (a(), C(D, {
             key: 1,
             icon: e.copyIcon,
             size: "sm",
@@ -3386,38 +3386,38 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
   emits: ["update:modelValue", "upload"],
   setup(e, { emit: t }) {
     const l = e, s = t, r = B(null), i = B(null), d = B(!1), u = B([]), v = B(""), b = (z) => {
-      const C = Array.from(z.target.files || []);
-      y(C);
+      const $ = Array.from(z.target.files || []);
+      y($);
     }, m = (z) => {
       var x;
       if (d.value = !1, l.disabled) return;
-      const C = Array.from(((x = z.dataTransfer) == null ? void 0 : x.files) || []);
-      y(C);
+      const $ = Array.from(((x = z.dataTransfer) == null ? void 0 : x.files) || []);
+      y($);
     }, g = () => {
       l.disabled || (d.value = !0);
     }, w = (z) => {
       z.target === i.value && (d.value = !1);
     }, y = (z) => {
       v.value = "";
-      const C = z.map((x) => {
+      const $ = z.map((x) => {
         if (x.type.startsWith("image/")) {
           const k = URL.createObjectURL(x);
           return Object.assign(x, { preview: k });
         }
         return x;
       });
-      l.multiple ? u.value = [...u.value, ...C] : u.value = C.slice(0, 1), s("update:modelValue", l.multiple ? u.value : u.value[0]);
+      l.multiple ? u.value = [...u.value, ...$] : u.value = $.slice(0, 1), s("update:modelValue", l.multiple ? u.value : u.value[0]);
     }, S = (z) => {
-      const C = u.value[z];
-      C.preview && URL.revokeObjectURL(C.preview), u.value.splice(z, 1), s("update:modelValue", l.multiple ? u.value : u.value[0] || null);
+      const $ = u.value[z];
+      $.preview && URL.revokeObjectURL($.preview), u.value.splice(z, 1), s("update:modelValue", l.multiple ? u.value : u.value[0] || null);
     }, Z = (z) => {
       if (z === 0) return "0 Bytes";
-      const C = 1024, x = ["Bytes", "KB", "MB", "GB"], k = Math.floor(Math.log(z) / Math.log(C));
-      return Math.round(z / Math.pow(C, k) * 100) / 100 + " " + x[k];
+      const $ = 1024, x = ["Bytes", "KB", "MB", "GB"], k = Math.floor(Math.log(z) / Math.log($));
+      return Math.round(z / Math.pow($, k) * 100) / 100 + " " + x[k];
     };
     return F(() => l.modelValue, (z) => {
       z || (u.value = []);
-    }), (z, C) => (a(), n("div", ka, [
+    }), (z, $) => (a(), n("div", ka, [
       e.label ? (a(), n("label", $a, h(e.label), 1)) : c("", !0),
       o("div", {
         ref_key: "dropZone",
@@ -3427,7 +3427,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           e.disabled && "opacity-60 cursor-not-allowed"
         ]]),
         onDragenter: P(g, ["prevent"]),
-        onDragover: C[2] || (C[2] = P(() => {
+        onDragover: $[2] || ($[2] = P(() => {
         }, ["prevent"])),
         onDragleave: P(w, ["prevent"]),
         onDrop: P(m, ["prevent"])
@@ -3455,7 +3455,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
                   alt: x.name,
                   class: "w-full h-full object-cover"
                 }, null, 8, Ia)
-              ])) : (a(), $(D, {
+              ])) : (a(), C(D, {
                 key: 1,
                 icon: _(st),
                 size: "lg",
@@ -3485,7 +3485,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
             type: "button",
             class: "w-full py-2 text-sm text-slate-600 hover:text-slate-900 border border-slate-200 rounded-lg hover:bg-slate-50",
             disabled: e.disabled,
-            onClick: C[1] || (C[1] = (x) => {
+            onClick: $[1] || ($[1] = (x) => {
               var k;
               return (k = r.value) == null ? void 0 : k.click();
             })
@@ -3496,7 +3496,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
               animation: "none",
               class: "inline mr-1"
             }, null, 8, ["icon"]),
-            C[4] || (C[4] = j(" Добавить ещё ", -1))
+            $[4] || ($[4] = j(" Добавить ещё ", -1))
           ], 8, _a)) : c("", !0)
         ])) : (a(), n("div", Sa, [
           A(D, {
@@ -3506,12 +3506,12 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
             class: "mx-auto text-slate-400 mb-3 w-12 h-12"
           }, null, 8, ["icon"]),
           o("p", Va, [
-            C[3] || (C[3] = j(" Перетащите файлы сюда или ", -1)),
+            $[3] || ($[3] = j(" Перетащите файлы сюда или ", -1)),
             o("button", {
               type: "button",
               class: "text-slate-900 underline hover:no-underline",
               disabled: e.disabled,
-              onClick: C[0] || (C[0] = (x) => {
+              onClick: $[0] || ($[0] = (x) => {
                 var k;
                 return (k = r.value) == null ? void 0 : k.click();
               })
@@ -3617,7 +3617,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       ]),
       o("div", Ua, [
         s.$slots.prefix || e.prefixIcon ? (a(), n("div", Ka, [
-          e.prefixIcon ? (a(), $(D, {
+          e.prefixIcon ? (a(), C(D, {
             key: 0,
             icon: e.prefixIcon,
             size: "sm",
@@ -3915,7 +3915,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
         ]])
       }, [
         o("div", kn, [
-          e.icon ? (a(), $(O(e.icon), {
+          e.icon ? (a(), C(O(e.icon), {
             key: 0,
             class: f(["w-6 h-6 flex-shrink-0", e.modelValue === e.value ? "text-slate-900" : "text-slate-400"])
           }, null, 8, ["class"])) : c("", !0),
@@ -4083,12 +4083,12 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       }
     }, z = () => {
       l.creatable && i.value && (s("create", i.value), i.value = "");
-    }, C = (x) => {
+    }, $ = (x) => {
       d.value && !d.value.contains(x.target) && (r.value = !1, i.value = "");
     };
     return F(r, (x) => {
       x || (i.value = "");
-    }), U(() => document.addEventListener("click", C)), te(() => document.removeEventListener("click", C)), (x, k) => {
+    }), U(() => document.addEventListener("click", $)), te(() => document.removeEventListener("click", $)), (x, k) => {
       var I;
       return a(), n("div", {
         class: "relative",
@@ -4102,7 +4102,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
             key: X.value,
             class: "inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-slate-100 text-slate-700 rounded-lg"
           }, [
-            X.icon ? (a(), $(O(X.icon), {
+            X.icon ? (a(), C(O(X.icon), {
               key: 0,
               class: "w-3 h-3"
             })) : c("", !0),
@@ -4137,7 +4137,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           onClick: y
         }, [
           o("span", Ln, [
-            !e.multiple && ((I = v.value) != null && I.icon) ? (a(), $(O(v.value.icon), {
+            !e.multiple && ((I = v.value) != null && I.icon) ? (a(), C(O(v.value.icon), {
               key: 0,
               class: "w-4 h-4 text-slate-500"
             })) : c("", !0),
@@ -4195,7 +4195,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
               onClick: (R) => S(X.value)
             }, [
               o("span", Pn, [
-                X.icon ? (a(), $(O(X.icon), {
+                X.icon ? (a(), C(O(X.icon), {
                   key: 0,
                   class: "w-4 h-4 text-slate-500"
                 })) : c("", !0),
@@ -4298,7 +4298,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           disabled: e.disabled,
           onClick: (S) => v(w.value)
         }, [
-          w.icon ? (a(), $(D, {
+          w.icon ? (a(), C(D, {
             key: 0,
             icon: w.icon,
             size: "xs",
@@ -4350,7 +4350,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           "aria-expanded": s(m)
         }, [
           o("span", Yn, [
-            b.icon ? (a(), $(D, {
+            b.icon ? (a(), C(D, {
               key: 0,
               icon: b.icon,
               size: "md",
@@ -4445,7 +4445,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
   },
   setup(e) {
     return (t, l) => (a(), n("div", ts, [
-      (a(), $(O(e.icon), {
+      (a(), C(O(e.icon), {
         class: f(["w-10 h-10 text-slate-500 mx-auto", e.animated && "animate-bounce-slow"])
       }, null, 8, ["class"])),
       o("p", ls, h(e.title), 1),
@@ -4528,7 +4528,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           return "max-w-xl";
       }
     });
-    return (g, w) => (a(), $(ge, { to: "body" }, [
+    return (g, w) => (a(), C(ge, { to: "body" }, [
       A(Y, {
         name: u.value,
         onAfterEnter: w[1] || (w[1] = (y) => g.$emit("opened")),
@@ -4559,10 +4559,10 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
                     title: y.label,
                     onClick: (S) => d(y.value)
                   }, [
-                    (a(), $(O(y.icon), { class: "h-4 w-4" }))
+                    (a(), C(O(y.icon), { class: "h-4 w-4" }))
                   ], 10, ds)), 64))
                 ])) : c("", !0),
-                e.closable ? (a(), $(ve, {
+                e.closable ? (a(), C(ve, {
                   key: 1,
                   size: "md",
                   variant: "default",
@@ -4636,7 +4636,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           onClick: d
         }, [
           o("div", bs, [
-            e.item.icon ? (a(), $(D, {
+            e.item.icon ? (a(), C(D, {
               key: 0,
               icon: e.item.icon,
               size: "md",
@@ -4645,7 +4645,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
             }, null, 8, ["icon", "class"])) : c("", !0),
             e.compact ? c("", !0) : (a(), n("span", gs, h(e.item.label), 1))
           ]),
-          e.compact ? c("", !0) : (a(), $(D, {
+          e.compact ? c("", !0) : (a(), C(D, {
             key: 0,
             icon: _(W),
             size: "sm",
@@ -4664,8 +4664,8 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           default: T(() => [
             q(o("div", xs, [
               o("div", ys, [
-                (a(!0), n(M, null, L(e.item.children, (z, C) => (a(), $(O(v(z)), {
-                  key: C,
+                (a(!0), n(M, null, L(e.item.children, (z, $) => (a(), C(O(v(z)), {
+                  key: $,
                   to: z.to,
                   href: z.href,
                   class: f(g(z)),
@@ -4673,7 +4673,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
                 }, {
                   default: T(() => [
                     j(h(z.label) + " ", 1),
-                    z.badge ? (a(), $(ie, {
+                    z.badge ? (a(), C(ie, {
                       key: 0,
                       variant: z.badgeVariant || "info",
                       size: "sm",
@@ -4694,7 +4694,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           ]),
           _: 1
         })
-      ])) : (a(), $(O(u.value), {
+      ])) : (a(), C(O(u.value), {
         key: 0,
         to: e.item.to,
         href: e.item.href,
@@ -4703,7 +4703,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       }, {
         default: T(() => [
           o("div", ps, [
-            e.item.icon ? (a(), $(D, {
+            e.item.icon ? (a(), C(D, {
               key: 0,
               icon: e.item.icon,
               size: "md",
@@ -4712,7 +4712,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
             }, null, 8, ["icon", "class"])) : c("", !0),
             e.compact ? c("", !0) : (a(), n("span", vs, h(e.item.label), 1))
           ]),
-          e.item.badge && !e.compact ? (a(), $(ie, {
+          e.item.badge && !e.compact ? (a(), C(ie, {
             key: 0,
             variant: e.item.badgeVariant || "info",
             size: "sm"
@@ -4780,6 +4780,12 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       type: Boolean,
       default: !1
     },
+    /** Вариант отображения: sidebar | embedded */
+    variant: {
+      type: String,
+      default: "sidebar",
+      validator: (e) => ["sidebar", "embedded"].includes(e)
+    },
     /** Показывать бордер справа */
     bordered: {
       type: Boolean,
@@ -4802,13 +4808,22 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       md: "w-80",
       lg: "w-96",
       full: "w-full"
-    }, b = p(() => [
-      "flex flex-col bg-white transition-all duration-300",
-      i.value ? "w-20" : v[l.width],
-      l.fixed && "fixed top-0 left-0 h-screen",
-      l.bordered && "border-r border-slate-200",
-      "shadow-sm"
-    ]), m = p(() => [
+    }, b = p(() => {
+      const $ = l.variant === "embedded";
+      return [
+        "flex flex-col bg-white transition-all duration-300",
+        // Ширина только для sidebar режима
+        !$ && (i.value ? "w-20" : v[l.width]),
+        // Фиксированная позиция только для sidebar
+        !$ && l.fixed && "fixed top-0 left-0 h-screen",
+        // Бордер
+        l.bordered && ($ ? "border border-slate-200 rounded-xl" : "border-r border-slate-200"),
+        // Тень только для sidebar
+        $ ? "" : "shadow-sm",
+        // Для embedded - полная ширина и высота
+        $ && "w-full h-full"
+      ];
+    }), m = p(() => [
       "flex items-center gap-2 border-b border-slate-200 flex-shrink-0",
       i.value ? "justify-center px-2 py-3" : "px-4 py-5"
     ]), g = p(() => [
@@ -4819,37 +4834,37 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
       i.value && "px-2"
     ]), y = p(() => {
       if (!r.value.trim()) return l.sections;
-      const C = r.value.toLowerCase();
+      const $ = r.value.toLowerCase();
       return l.sections.map((x) => ({
         ...x,
         items: x.items.filter((k) => {
           var R, oe;
-          const I = (R = k.label) == null ? void 0 : R.toLowerCase().includes(C), X = (oe = k.children) == null ? void 0 : oe.some(
+          const I = (R = k.label) == null ? void 0 : R.toLowerCase().includes($), X = (oe = k.children) == null ? void 0 : oe.some(
             (be) => {
               var re;
-              return (re = be.label) == null ? void 0 : re.toLowerCase().includes(C);
+              return (re = be.label) == null ? void 0 : re.toLowerCase().includes($);
             }
           );
           return I || X;
         })
       })).filter((x) => x.items.length > 0);
-    }), S = (C) => l.activeItem ? C.to === l.activeItem || C.id === l.activeItem ? !0 : C.children ? C.children.some(
+    }), S = ($) => l.activeItem ? $.to === l.activeItem || $.id === l.activeItem ? !0 : $.children ? $.children.some(
       (x) => x.to === l.activeItem || x.id === l.activeItem
     ) : !1 : !1, Z = () => {
       i.value = !i.value, s("update:compact", i.value);
-    }, z = (C, x) => {
-      s("item-click", C, x);
+    }, z = ($, x) => {
+      s("item-click", $, x);
     };
-    return (C, x) => (a(), n("aside", {
+    return ($, x) => (a(), n("aside", {
       class: f(b.value),
       "data-component": "DXSidebarMenu",
       "data-compact": d.value
     }, [
-      C.$slots.header || e.title || e.collapsible ? (a(), n("div", {
+      $.$slots.header || e.title || e.collapsible ? (a(), n("div", {
         key: 0,
         class: f(m.value)
       }, [
-        d.value ? c("", !0) : V(C.$slots, "header", { key: 0 }, () => [
+        d.value ? c("", !0) : V($.$slots, "header", { key: 0 }, () => [
           e.title ? (a(), n("h2", Cs, h(e.title), 1)) : c("", !0)
         ], !0),
         e.collapsible ? (a(), n("button", {
@@ -4892,11 +4907,11 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           class: "space-y-1"
         }, [
           k.title && !d.value ? (a(), n("div", Ds, h(k.title), 1)) : c("", !0),
-          k.title && d.value ? (a(), $(Ct, {
+          k.title && d.value ? (a(), C(Ct, {
             key: 1,
             spacing: "sm"
           })) : c("", !0),
-          (a(!0), n(M, null, L(k.items, (X, R) => (a(), $(ks, {
+          (a(!0), n(M, null, L(k.items, (X, R) => (a(), C(ks, {
             key: R,
             item: X,
             active: S(X),
@@ -4906,15 +4921,15 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
           }, null, 8, ["item", "active", "compact"]))), 128))
         ]))), 128))
       ], 2),
-      C.$slots.footer && !d.value ? (a(), n("div", {
+      $.$slots.footer && !d.value ? (a(), n("div", {
         key: 2,
         class: f(w.value)
       }, [
-        V(C.$slots, "footer", {}, void 0, !0)
+        V($.$slots, "footer", {}, void 0, !0)
       ], 2)) : c("", !0)
     ], 10, $s));
   }
-}, Zo = /* @__PURE__ */ N(zs, [["__scopeId", "data-v-0cacd444"]]), Bs = {
+}, Zo = /* @__PURE__ */ N(zs, [["__scopeId", "data-v-76f0ab96"]]), Bs = {
   class: "border border-slate-200 rounded-2xl overflow-hidden",
   "data-component": "DXTable"
 }, Xs = { class: "min-w-full divide-y divide-slate-200" }, Is = { class: "bg-slate-50" }, As = { class: "divide-y divide-slate-200 bg-white" }, To = {
@@ -4965,7 +4980,7 @@ const zl = ["data-variant"], Bl = { class: "flex-1" }, mo = {
         onClick: (d) => s.$emit("update:modelValue", i.value)
       }, [
         o("span", Ls, [
-          i.icon ? (a(), $(D, {
+          i.icon ? (a(), C(D, {
             key: 0,
             icon: i.icon,
             size: "sm",