@stachelock/ui 0.6.15 → 0.6.16

package/dist/NavigationItem.vue_vue_type_script_setup_true_lang-a6F3LQ_P.js

@@ -0,0 +1,56 @@
+import { defineComponent as d, computed as f, createElementBlock as s, openBlock as t, createElementVNode as g, normalizeStyle as a, normalizeClass as i, createBlock as h, createCommentVNode as o, resolveDynamicComponent as y, toDisplayString as c } from "vue";
+const u = ["href"], v = {
+  key: 0,
+  class: "sl-truncate"
+}, b = /* @__PURE__ */ d({
+  __name: "NavigationItem",
+  props: {
+    name: {},
+    href: {},
+    icon: {},
+    isActive: { type: Boolean },
+    iconOnly: { type: Boolean },
+    badge: {},
+    badgeTheme: {}
+  },
+  setup(e) {
+    const r = e, m = f(() => {
+      const n = r.badgeTheme || "primary", l = {
+        primary: "sl-bg-white/20 sl-text-white",
+        secondary: "sl-bg-slate-500/50 sl-text-white",
+        success: "sl-bg-green-500/80 sl-text-white",
+        warning: "sl-bg-yellow-500/80 sl-text-white",
+        danger: "sl-bg-red-500/80 sl-text-white"
+      };
+      return l[n] || l.primary;
+    });
+    return (n, l) => (t(), s("li", null, [
+      g("a", {
+        href: e.href,
+        class: i(["sl-group sl-flex sl-gap-x-3 sl-rounded-md sl-p-2 sl-text-sm sl-leading-6 sl-font-semibold sl-transition-colors", [
+          e.isActive ? "sl-bg-white/20" : "hover:sl-bg-white/10",
+          e.iconOnly ? "sl-justify-center" : ""
+        ]]),
+        style: a({
+          color: e.isActive ? "var(--sl-nav-active-text, #ffffff)" : "var(--sl-nav-text, rgba(255, 255, 255, 0.7))"
+        })
+      }, [
+        (t(), h(y(e.icon), {
+          class: "sl-h-6 sl-w-6 sl-shrink-0",
+          style: a({
+            color: e.isActive ? "var(--sl-nav-active-text, #ffffff)" : "var(--sl-nav-icon, rgba(255, 255, 255, 0.5))"
+          }),
+          "aria-hidden": "true"
+        }, null, 8, ["style"])),
+        e.iconOnly ? o("", !0) : (t(), s("span", v, c(e.name), 1)),
+        e.badge && !e.iconOnly ? (t(), s("span", {
+          key: 1,
+          class: i(["sl-ml-auto sl-inline-flex sl-items-center sl-rounded-md sl-px-2 sl-py-0.5 sl-text-xs sl-font-medium", m.value])
+        }, c(e.badge), 3)) : o("", !0)
+      ], 14, u)
+    ]));
+  }
+});
+export {
+  b as _
+};

package/dist/ScreenSizeSelector.vue_vue_type_script_setup_true_lang-FINxrVod.js

@@ -0,0 +1,183 @@
+import { defineComponent as h, ref as k, watch as v, provide as b, renderSlot as w, computed as p, createElementBlock as n, openBlock as a, createElementVNode as c, normalizeStyle as S, createVNode as z, withCtx as B, createCommentVNode as m, normalizeClass as f, Fragment as V, renderList as C, toDisplayString as $ } from "vue";
+import { S as A, b as H, u as W, s as j } from "./useScreenSize-Kr6cn5Zr.js";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const M = h({
+  name: "BreakpointWrapper",
+  props: {
+    /**
+     * The screen size to provide to child components
+     */
+    size: {
+      type: String,
+      required: !0,
+      validator: (r) => ["sm", "md", "lg", "xl"].includes(r)
+    }
+  },
+  setup(r) {
+    const s = k(r.size);
+    return v(
+      () => r.size,
+      (t) => {
+        s.value = t;
+      }
+    ), b(A, s), {};
+  }
+});
+function R(r, s, t, d, i, u) {
+  return w(r.$slots, "default");
+}
+const L = /* @__PURE__ */ x(M, [["render", R]]), F = { class: "sl-responsive-preview-wrapper" }, N = /* @__PURE__ */ h({
+  __name: "ResponsivePreviewWrapper",
+  props: {
+    size: {},
+    showBorder: { type: Boolean, default: !1 },
+    centered: { type: Boolean, default: !0 },
+    backgroundColor: { default: "transparent" },
+    animate: { type: Boolean, default: !0 },
+    minHeight: { default: "auto" }
+  },
+  setup(r) {
+    const s = r, t = k(s.size);
+    v(
+      () => s.size,
+      (i) => {
+        t.value = i;
+      }
+    ), H({
+      previewMode: !0,
+      initialSize: s.size
+    });
+    const d = p(() => ({
+      maxWidth: {
+        sm: "375px",
+        md: "768px",
+        lg: "1024px",
+        xl: "100%"
+      }[t.value],
+      width: "100%",
+      margin: s.centered ? "0 auto" : "0",
+      backgroundColor: s.backgroundColor,
+      minHeight: s.minHeight,
+      transition: s.animate ? "max-width 0.3s ease" : "none",
+      ...s.showBorder && {
+        border: "1px solid #e5e7eb",
+        borderRadius: "0.5rem",
+        padding: "1rem"
+      }
+    }));
+    return (i, u) => (a(), n("div", F, [
+      c("div", {
+        class: "sl-preview-container sl-mx-auto",
+        style: S(d.value)
+      }, [
+        z(L, { size: t.value }, {
+          default: B(() => [
+            w(i.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["size"])
+      ], 4)
+    ]));
+  }
+}), Q = /* @__PURE__ */ x(N, [["__scopeId", "data-v-7eff9c43"]]), P = ["title", "onClick"], E = {
+  key: 0,
+  class: "sl-h-5 sl-w-5",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor"
+}, q = {
+  key: 1,
+  class: "sl-h-5 sl-w-5",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor"
+}, D = {
+  key: 2,
+  class: "sl-h-5 sl-w-5",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor"
+}, I = {
+  key: 3,
+  class: "sl-h-5 sl-w-5",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor"
+}, K = {
+  key: 4,
+  class: "sl-ml-2 sl-text-sm sl-font-medium"
+}, U = /* @__PURE__ */ h({
+  __name: "ScreenSizeSelector",
+  props: {
+    modelValue: {},
+    sizes: { default: () => ["sm", "md", "lg", "xl"] },
+    theme: { default: "light" },
+    showLabels: { type: Boolean, default: !1 },
+    activeColor: { default: "primary-600" },
+    autoFilter: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { emit: s }) {
+    const t = r, d = s, { availablePreviewSizes: i } = W(), u = p(() => {
+      let l = t.sizes;
+      return t.autoFilter && (l = l.filter((e) => i.value.includes(e))), j.filter((e) => l.includes(e.id));
+    });
+    v(u, (l) => {
+      if (l.length > 0 && !l.some((e) => e.id === t.modelValue)) {
+        const e = l[l.length - 1];
+        d("update:modelValue", e.id);
+      }
+    }, { immediate: !0 });
+    const g = p(() => t.theme === "dark" ? "sl-bg-slate-700" : "sl-bg-gray-100"), _ = (l) => t.modelValue === l ? t.theme === "dark" ? "sl-bg-slate-600 sl-shadow sl-text-white" : `sl-bg-white sl-shadow sl-text-${t.activeColor}` : t.theme === "dark" ? "sl-text-slate-300 hover:sl-text-white" : "sl-text-gray-500 hover:sl-text-gray-700", y = (l) => {
+      d("update:modelValue", l);
+    };
+    return (l, e) => u.value.length > 0 ? (a(), n("div", {
+      key: 0,
+      class: f(["sl-inline-flex sl-items-center sl-gap-1 sl-rounded-lg sl-p-1", g.value])
+    }, [
+      (a(!0), n(V, null, C(u.value, (o) => (a(), n("button", {
+        key: o.id,
+        type: "button",
+        class: f(["sl-p-2 sl-rounded-md sl-transition-colors sl-flex sl-items-center sl-justify-center", _(o.id)]),
+        title: o.label,
+        onClick: (T) => y(o.id)
+      }, [
+        o.id === "sm" ? (a(), n("svg", E, [...e[0] || (e[0] = [
+          c("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
+          }, null, -1)
+        ])])) : o.id === "md" ? (a(), n("svg", q, [...e[1] || (e[1] = [
+          c("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M10.5 19.5h3m-6.75 2.25h10.5a2.25 2.25 0 002.25-2.25v-15a2.25 2.25 0 00-2.25-2.25H6.75A2.25 2.25 0 004.5 4.5v15a2.25 2.25 0 002.25 2.25z"
+          }, null, -1)
+        ])])) : o.id === "lg" ? (a(), n("svg", D, [...e[2] || (e[2] = [
+          c("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z"
+          }, null, -1)
+        ])])) : o.id === "xl" ? (a(), n("svg", I, [...e[3] || (e[3] = [
+          c("path", {
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            d: "M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
+          }, null, -1)
+        ])])) : m("", !0),
+        r.showLabels ? (a(), n("span", K, $(o.label), 1)) : m("", !0)
+      ], 10, P))), 128))
+    ], 2)) : m("", !0);
+  }
+});
+export {
+  L as B,
+  Q as R,
+  U as _
+};