@stachelock/ui 0.6.15 → 0.6.16

package/dist/layouts/DashboardLayout.js

@@ -1,4 +1,220 @@
-import { _ as f } from "../DashboardLayout.vue_vue_type_script_setup_true_lang-BAx4gKqh.js";
+import { defineComponent as N, ref as v, computed as h, onMounted as O, onUnmounted as S, createElementBlock as i, openBlock as a, normalizeStyle as t, createElementVNode as o, createVNode as f, normalizeClass as p, createCommentVNode as d, renderSlot as l, unref as c, Transition as W, withCtx as V, createBlock as z } from "vue";
+import { CubeIcon as E, Bars3Icon as R, ChevronDoubleLeftIcon as T, ChevronDoubleRightIcon as _ } from "@heroicons/vue/24/outline";
+import { _ as F } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const G = {
+  key: 0,
+  class: "sl-flex sl-items-center sl-gap-3 sl-w-full"
+}, U = { class: "sl-min-w-0" }, q = {
+  key: 1,
+  class: "sl-flex sl-items-center sl-justify-center"
+}, A = { class: "sl-flex-1 sl-px-3 sl-py-4 sl-overflow-y-auto sl-scrollbar-thin" }, H = { class: "sl-flex sl-items-center sl-justify-between sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-h-16" }, J = { class: "sl-flex sl-items-center sl-gap-4" }, K = { class: "sl-flex sl-items-center sl-gap-2" }, P = {
+  key: 0,
+  class: "sl-hidden sm:sl-block"
+}, Q = ["title"], X = {
+  key: 2,
+  class: "sl-flex sl-items-center sl-gap-1"
+}, Y = /* @__PURE__ */ N({
+  __name: "DashboardLayout",
+  props: {
+    startNarrow: { type: Boolean, default: !1 },
+    dark: { type: Boolean, default: !1 },
+    sidebarColor: { default: void 0 }
+  },
+  emits: ["sidebar-toggle", "width-toggle"],
+  setup(L, { expose: j, emit: I }) {
+    const u = L, b = I, n = v(!1), r = v(!u.startNarrow), m = v(!1), e = v(u.dark), y = () => {
+      e.value = u.dark || document.documentElement.classList.contains("dark");
+    }, M = h(() => u.sidebarColor ? u.sidebarColor : e.value ? "#0f172a" : "rgb(var(--sl-color-primary-700-rgb, 46 56 115))"), k = h(() => e.value ? "#1e293b" : "rgb(var(--sl-color-primary-800-rgb, 31 38 77))"), w = h(() => e.value ? "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)" : "linear-gradient(135deg, rgb(var(--sl-color-primary-400-rgb, 113 126 205)) 0%, rgb(var(--sl-color-primary-500-rgb, 77 94 192)) 100%)"), $ = () => {
+      n.value = !n.value, b("sidebar-toggle", n.value);
+    }, x = () => {
+      n.value = !1, b("sidebar-toggle", !1);
+    }, C = () => {
+      r.value = !r.value, b("width-toggle", r.value);
+    }, g = () => {
+      m.value = window.innerWidth < 1024, m.value || (n.value = !1);
+    }, D = new MutationObserver(() => {
+      y();
+    });
+    return O(() => {
+      g(), y(), window.addEventListener("resize", g), D.observe(document.documentElement, {
+        attributes: !0,
+        attributeFilter: ["class"]
+      });
+    }), S(() => {
+      window.removeEventListener("resize", g), D.disconnect();
+    }), j({
+      toggleSidebar: $,
+      closeSidebar: x,
+      toggleWidth: C,
+      isWide: r,
+      sidebarOpen: n
+    }), (s, B) => (a(), i("div", {
+      class: "sl-min-h-screen sl-flex sl-transition-colors sl-duration-200",
+      style: t({ backgroundColor: e.value ? "#0f172a" : "#f8fafc" })
+    }, [
+      o("aside", {
+        class: p(["sl-flex sl-flex-col sl-fixed sl-inset-y-0 sl-z-30 sl-transition-all sl-duration-300", [
+          n.value ? "sl-translate-x-0" : "-sl-translate-x-full lg:sl-translate-x-0",
+          r.value ? "sl-w-72" : "sl-w-72 lg:sl-w-16"
+        ]]),
+        style: t({ backgroundColor: M.value })
+      }, [
+        o("div", {
+          class: p(["sl-border-b sl-flex sl-items-center sl-justify-center", r.value ? "sl-px-5 sl-py-5" : "sl-px-2 sl-py-4"]),
+          style: t({ borderColor: k.value })
+        }, [
+          l(s.$slots, "logo", { isWide: r.value }, () => [
+            r.value ? (a(), i("div", G, [
+              o("div", {
+                class: "sl-h-10 sl-w-10 sl-flex-shrink-0 sl-rounded-xl sl-flex sl-items-center sl-justify-center sl-shadow-lg",
+                style: t({ background: w.value })
+              }, [
+                l(s.$slots, "logo-icon", {}, () => [
+                  f(c(E), { class: "sl-h-6 sl-w-6 sl-text-white" })
+                ], !0)
+              ], 4),
+              o("div", U, [
+                l(s.$slots, "logo-text", {}, () => [
+                  B[0] || (B[0] = o("h1", { class: "sl-text-lg sl-font-bold sl-text-white sl-tracking-tight sl-truncate" }, "Dashboard", -1))
+                ], !0)
+              ])
+            ])) : (a(), i("div", q, [
+              o("div", {
+                class: "sl-h-10 sl-w-10 sl-rounded-xl sl-flex sl-items-center sl-justify-center sl-shadow-lg",
+                style: t({ background: w.value })
+              }, [
+                l(s.$slots, "logo-icon", {}, () => [
+                  f(c(E), { class: "sl-h-6 sl-w-6 sl-text-white" })
+                ], !0)
+              ], 4)
+            ]))
+          ], !0)
+        ], 6),
+        o("nav", A, [
+          l(s.$slots, "navigation", {
+            iconOnly: !r.value
+          }, void 0, !0)
+        ]),
+        s.$slots["sidebar-footer"] ? (a(), i("div", {
+          key: 0,
+          class: "sl-px-5 sl-py-4",
+          style: t({ borderTop: `1px solid ${k.value}` })
+        }, [
+          l(s.$slots, "sidebar-footer", {
+            iconOnly: !r.value
+          }, void 0, !0)
+        ], 4)) : d("", !0)
+      ], 6),
+      f(W, {
+        "enter-active-class": "sl-transition-opacity sl-duration-300",
+        "enter-from-class": "sl-opacity-0",
+        "enter-to-class": "sl-opacity-100",
+        "leave-active-class": "sl-transition-opacity sl-duration-200",
+        "leave-from-class": "sl-opacity-100",
+        "leave-to-class": "sl-opacity-0"
+      }, {
+        default: V(() => [
+          n.value ? (a(), i("div", {
+            key: 0,
+            class: "sl-fixed sl-inset-0 sl-bg-black/50 sl-z-20 lg:sl-hidden",
+            onClick: x
+          })) : d("", !0)
+        ]),
+        _: 1
+      }),
+      o("main", {
+        class: p(["sl-flex-1 sl-transition-[margin] sl-duration-300", r.value ? "lg:sl-ml-72" : "lg:sl-ml-16"])
+      }, [
+        o("header", {
+          class: "sl-sticky sl-top-0 sl-z-10 sl-border-b sl-transition-colors sl-duration-200",
+          style: t({
+            backgroundColor: e.value ? "#1e293b" : "#ffffff",
+            borderColor: e.value ? "#334155" : "#e2e8f0"
+          })
+        }, [
+          o("div", H, [
+            o("div", J, [
+              o("button", {
+                onClick: $,
+                class: "lg:sl-hidden sl-p-2 sl-rounded-lg sl-transition-colors hover:sl-bg-slate-100 dark:hover:sl-bg-slate-700",
+                style: t({ color: e.value ? "#94a3b8" : "#64748b" })
+              }, [
+                f(c(R), { class: "sl-h-6 sl-w-6" })
+              ], 4),
+              l(s.$slots, "header-breadcrumb", { isDark: e.value }, () => [
+                l(s.$slots, "header-content", { isDark: e.value }, () => [
+                  l(s.$slots, "header-left", { isDark: e.value }, void 0, !0)
+                ], !0)
+              ], !0)
+            ]),
+            o("div", K, [
+              s.$slots["header-search"] ? (a(), i("div", P, [
+                l(s.$slots, "header-search", { isDark: e.value }, void 0, !0)
+              ])) : d("", !0),
+              o("button", {
+                onClick: C,
+                class: "sl-hidden lg:sl-flex sl-p-2 sl-rounded-lg sl-transition-colors hover:sl-bg-slate-100 dark:hover:sl-bg-slate-700",
+                style: t({ color: e.value ? "#94a3b8" : "#64748b" }),
+                title: r.value ? "Collapse sidebar" : "Expand sidebar"
+              }, [
+                r.value ? (a(), z(c(T), {
+                  key: 0,
+                  class: "sl-h-5 sl-w-5"
+                })) : (a(), z(c(_), {
+                  key: 1,
+                  class: "sl-h-5 sl-w-5"
+                }))
+              ], 12, Q),
+              s.$slots["header-actions"] || s.$slots["header-theme"] || s.$slots["header-notifications"] || s.$slots["header-user"] ? (a(), i("div", {
+                key: 1,
+                class: "sl-hidden lg:sl-block sl-h-6 sl-w-px sl-mx-2",
+                style: t({ backgroundColor: e.value ? "#334155" : "#e2e8f0" })
+              }, null, 4)) : d("", !0),
+              s.$slots["header-actions"] ? (a(), i("div", X, [
+                l(s.$slots, "header-actions", { isDark: e.value }, void 0, !0)
+              ])) : d("", !0),
+              l(s.$slots, "header-theme", { isDark: e.value }, void 0, !0),
+              l(s.$slots, "header-notifications", { isDark: e.value }, void 0, !0),
+              s.$slots["header-user"] ? (a(), i("div", {
+                key: 3,
+                class: "sl-h-6 sl-w-px sl-mx-2",
+                style: t({ backgroundColor: e.value ? "#334155" : "#e2e8f0" })
+              }, null, 4)) : d("", !0),
+              l(s.$slots, "header-user", { isDark: e.value }, void 0, !0),
+              l(s.$slots, "header-right", { isDark: e.value }, void 0, !0)
+            ])
+          ])
+        ], 4),
+        s.$slots["page-header"] ? (a(), i("div", {
+          key: 0,
+          class: "sl-border-b sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-py-6",
+          style: t({
+            backgroundColor: e.value ? "#1e293b" : "#ffffff",
+            borderColor: e.value ? "#334155" : "#e2e8f0"
+          })
+        }, [
+          l(s.$slots, "page-header", {}, void 0, !0)
+        ], 4)) : d("", !0),
+        o("div", {
+          class: "sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-py-6",
+          style: t({ color: e.value ? "#f1f5f9" : "#1e293b" })
+        }, [
+          l(s.$slots, "main", {}, void 0, !0)
+        ], 4),
+        s.$slots.footer ? (a(), i("footer", {
+          key: 1,
+          class: "sl-border-t sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-py-6",
+          style: t({
+            backgroundColor: e.value ? "#1e293b" : "#ffffff",
+            borderColor: e.value ? "#334155" : "#e2e8f0"
+          })
+        }, [
+          l(s.$slots, "footer", {}, void 0, !0)
+        ], 4)) : d("", !0)
+      ], 2)
+    ], 4));
+  }
+}), ls = /* @__PURE__ */ F(Y, [["__scopeId", "data-v-dfc4de03"]]);
 export {
-  f as default
+  ls as default
 };

package/dist/layouts/NavigationItem.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../NavigationItem.vue_vue_type_script_setup_true_lang-C8aX-84Q.js";
+import { _ as f } from "../NavigationItem.vue_vue_type_script_setup_true_lang-a6F3LQ_P.js";
 export {
   f as default
 };