mediacube-ui-v2 0.0.150 → 0.0.152

package/dist/mediacube-ui-v2.js

@@ -22666,7 +22666,7 @@ const Cg = {
     },
     width: {
       type: Number,
-      default: 300
+      default: 400
     }
   },
   emits: ["toggle", "open", "close", "update:modelValue"],
@@ -24203,41 +24203,59 @@ const dn = /* @__PURE__ */ ke({
       type: Object,
       default: () => ({})
     },
+    drawersCascadeIndent: {
+      type: Number,
+      default: 50
+    },
+    drawersMaxInCascade: {
+      type: Number,
+      default: 7
+    },
     reactiveProps: {
       type: Object,
       default: () => ({})
     }
   },
   setup(t) {
-    const e = t, a = g(() => ({
-      zIndex: e.reactiveProps.drawers.length ? 10004 : -1,
-      visibility: e.reactiveProps.drawers.length ? "visible" : "hidden"
-    })), n = (r) => {
-      var l;
-      r.close(), setTimeout(() => {
-        e.reactiveProps.drawers.every((s) => !s.modelValue) && e.drawerServiceState.closeServiceState();
-      }, ((l = r == null ? void 0 : r.drawerProps) == null ? void 0 : l.duration) || 300);
+    const e = t, a = g(() => e.reactiveProps.drawers.map((l, s) => {
+      const i = e.reactiveProps.drawers.length - 1 - s, o = Math.min(i, e.drawersMaxInCascade - 1);
+      return {
+        ...l,
+        indent_coefficient: i,
+        real_coefficient: o,
+        indent: o * e.drawersCascadeIndent
+      };
+    })), n = g(() => ({
+      zIndex: a.value.length ? 10004 : -1,
+      visibility: a.value.length ? "visible" : "hidden"
+    })), r = (l) => {
+      var s;
+      l.close(), setTimeout(() => {
+        a.value.every((i) => !i.modelValue) && e.drawerServiceState.closeServiceState();
+      }, ((s = l == null ? void 0 : l.drawerProps) == null ? void 0 : s.duration) || 300);
     };
-    return (r, l) => (f(), _("div", {
+    return (l, s) => (f(), _("div", {
       class: "mc-drawer-container",
-      style: $e(a.value)
+      style: $e(n.value)
     }, [
-      (f(!0), _(_e, null, De(e.reactiveProps.drawers, (s, i) => (f(), Z(c(Dy), Ee({
-        key: s.id,
-        modelValue: s.modelValue,
-        "onUpdate:modelValue": (o) => s.modelValue = o,
+      (f(!0), _(_e, null, De(a.value, (i, o) => (f(), Z(c(Dy), Ee({
+        key: i.id,
+        modelValue: i.modelValue,
+        "onUpdate:modelValue": (p) => i.modelValue = p,
         ref_for: !0
-      }, s.drawerProps, {
-        "show-overlay": i + 1 === e.reactiveProps.drawers.length,
-        onClose: () => n(s)
+      }, i.drawerProps, {
+        "show-overlay": o + 1 === a.value.length,
+        onClose: () => r(i),
+        class: ["mc-drawer-container__item", { "mc-drawer-container__item--blur": a.value.length - 1 !== o }],
+        style: { transform: `translateX(-${i.indent}px)` }
       }), {
         default: Y(() => [
-          (f(), Z(Gt(s.component), Ee({ ref_for: !0 }, s.componentProps, {
-            onCloseDrawer: () => n(s)
+          (f(), Z(Gt(i.component), Ee({ ref_for: !0 }, i.componentProps, {
+            onCloseDrawer: () => r(i)
           }), null, 16, ["onCloseDrawer"]))
         ]),
         _: 2
-      }, 1040, ["modelValue", "onUpdate:modelValue", "show-overlay", "onClose"]))), 128))
+      }, 1040, ["modelValue", "onUpdate:modelValue", "show-overlay", "onClose", "class", "style"]))), 128))
     ], 4));
   }
 }), w0 = () => {