slippers-ui 3.1.3 → 3.1.5-alpha

package/dist/slippers-ui.es.js

@@ -1,142 +1,142 @@
-import { defineComponent as y, computed as p, openBlock as a, createElementBlock as o, mergeProps as w, renderSlot as d, normalizeClass as u, createElementVNode as r, createBlock as B, resolveDynamicComponent as E, normalizeStyle as M, withCtx as V, createCommentVNode as O, ref as b, onMounted as q, onUnmounted as R, createVNode as D, unref as S, Fragment as C, renderList as I, withModifiers as N, toDisplayString as z } from "vue";
-import { _, C as T, a as j } from "./chunks/ChevronLgUp-BwtjsOWr.js";
-const x = ["href"], A = /* @__PURE__ */ y({
+import { defineComponent as m, computed as d, openBlock as n, createElementBlock as o, mergeProps as k, renderSlot as l, normalizeClass as r, createElementVNode as p, createBlock as S, resolveDynamicComponent as N, normalizeStyle as z, withCtx as I, createCommentVNode as w, ref as b, onMounted as C, onUnmounted as B, Fragment as M, renderList as q, withModifiers as A, toDisplayString as E } from "vue";
+import { _ } from "./chunks/_plugin-vue_export-helper-CHgC5LLL.js";
+const V = ["href"], x = /* @__PURE__ */ m({
   __name: "SlpButton",
   props: {
     disabled: { type: Boolean },
     variant: {},
     href: {}
   },
-  setup(c) {
-    const e = c, v = p(() => e.disabled ?? !1), n = p(() => e.variant ?? "primary");
-    p(() => e.href ?? "");
-    const s = p(() => {
-      let t = [`slp-btn-${n.value}`];
-      return v.value && t.push("slp-btn-disabled"), t.join(" ");
+  setup(i) {
+    const s = i, c = d(() => s.disabled ?? !1), a = d(() => s.variant ?? "primary");
+    d(() => s.href ?? "");
+    const e = d(() => {
+      let t = [`slp-btn-${a.value}`];
+      return c.value && t.push("slp-btn-disabled"), t.join(" ");
     });
-    return (t, i) => e.href ? (a(), o("a", w({ key: 0 }, t.$attrs, {
-      class: ["slp-btn", s.value],
-      href: e.href
+    return (t, f) => s.href ? (n(), o("a", k({ key: 0 }, t.$attrs, {
+      class: ["slp-btn", e.value],
+      href: s.href
     }), [
-      d(t.$slots, "default", {}, void 0, !0)
-    ], 16, x)) : (a(), o("button", w({ key: 1 }, t.$attrs, {
-      class: ["slp-btn", s.value],
+      l(t.$slots, "default", {}, void 0, !0)
+    ], 16, V)) : (n(), o("button", k({ key: 1 }, t.$attrs, {
+      class: ["slp-btn", e.value],
       type: "button"
     }), [
-      d(t.$slots, "default", {}, void 0, !0)
+      l(t.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), ve = /* @__PURE__ */ _(A, [["__scopeId", "data-v-56e2df5f"]]), H = /* @__PURE__ */ y({
+}), ne = /* @__PURE__ */ _(x, [["__scopeId", "data-v-56e2df5f"]]), O = /* @__PURE__ */ m({
   __name: "SlpColumn",
   props: {
     cols: {},
     size: {}
   },
-  setup(c) {
-    const e = c, v = p(() => e.cols ?? null), n = p(() => e.size ?? "md"), s = p(() => v.value ? `slp-col-${n.value}-${v.value}` : `slp-col-${n.value}`);
-    return (t, i) => (a(), o("div", {
-      class: u(s.value)
+  setup(i) {
+    const s = i, c = d(() => s.cols ?? null), a = d(() => s.size ?? "md"), e = d(() => c.value ? `slp-col-${a.value}-${c.value}` : `slp-col-${a.value}`);
+    return (t, f) => (n(), o("div", {
+      class: r(e.value)
     }, [
-      d(t.$slots, "default", {}, void 0, !0)
+      l(t.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), fe = /* @__PURE__ */ _(H, [["__scopeId", "data-v-00b68f22"]]), U = {
+}), oe = /* @__PURE__ */ _(O, [["__scopeId", "data-v-00b68f22"]]), T = {
   key: 0,
   class: "slp-full-light-purple-background"
-}, W = {
+}, j = {
   key: 1,
   class: "slp-charcoal-grey-background"
-}, F = {
+}, R = {
   key: 2,
   class: "slp-gradient-background"
-}, J = {
+}, D = {
   key: 3,
   class: "slp-full-gradient-background"
-}, P = {
+}, H = {
   key: 4,
   class: "slp-full-charcoal-background"
-}, G = {
+}, L = {
   key: 5,
   class: "slp-partial-charcoal-background"
-}, K = {
+}, U = {
   key: 6,
   class: "slp-half-grey-background"
-}, Q = {
+}, W = {
   key: 7,
   class: "slp-partial-white-background"
-}, X = {
+}, F = {
   key: 8,
   class: "slp-partial-grey-background"
-}, Y = /* @__PURE__ */ y({
+}, P = /* @__PURE__ */ m({
   __name: "SlpContainer",
   props: {
     fluid: { type: Boolean },
     variant: {}
   },
-  setup(c) {
-    const e = c, v = p(() => e.fluid ?? !1), n = p(() => e.variant ?? "white"), s = p(() => v.value ? "fluid" : "");
-    return (t, i) => n.value === "light-purple-100" ? (a(), o("div", U, [
-      r("div", {
-        class: u(["slp-container", s.value])
+  setup(i) {
+    const s = i, c = d(() => s.fluid ?? !1), a = d(() => s.variant ?? "white"), e = d(() => c.value ? "fluid" : "");
+    return (t, f) => a.value === "light-purple-100" ? (n(), o("div", T, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : n.value === "grey-100" ? (a(), o("div", W, [
-      r("div", {
-        class: u(["slp-container", s.value])
+    ])) : a.value === "grey-100" ? (n(), o("div", j, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : n.value === "gradient" ? (a(), o("div", F, [
-      r("div", {
-        class: u(["slp-container", s.value])
+    ])) : a.value === "gradient" ? (n(), o("div", R, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : n.value === "gradient-full" ? (a(), o("div", J, [
-      r("div", {
-        class: u(["slp-container", s.value])
+    ])) : a.value === "gradient-full" ? (n(), o("div", D, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : n.value === "charcoal-100" ? (a(), o("div", P, [
-      r("div", {
-        class: u(["slp-container", s.value])
+    ])) : a.value === "charcoal-100" ? (n(), o("div", H, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : n.value === "charcoal-75" ? (a(), o("div", G, [
-      r("div", {
-        class: u(["slp-container", s.value])
+    ])) : a.value === "charcoal-75" ? (n(), o("div", L, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : n.value === "grey-50" ? (a(), o("div", K, [
-      r("div", {
-        class: u(["slp-container", s.value])
+    ])) : a.value === "grey-50" ? (n(), o("div", U, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : n.value === "white-75" ? (a(), o("div", Q, [
-      r("div", {
-        class: u(["slp-container", s.value])
+    ])) : a.value === "white-75" ? (n(), o("div", W, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : n.value === "grey-75" ? (a(), o("div", X, [
-      r("div", {
-        class: u(["slp-container", s.value])
+    ])) : a.value === "grey-75" ? (n(), o("div", F, [
+      p("div", {
+        class: r(["slp-container", e.value])
       }, [
-        d(t.$slots, "default", {}, void 0, !0)
+        l(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : (a(), o("div", {
+    ])) : (n(), o("div", {
       key: 9,
-      class: u(["slp-container", s.value])
+      class: r(["slp-container", e.value])
     }, [
-      d(t.$slots, "default", {}, void 0, !0)
+      l(t.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), ge = /* @__PURE__ */ _(Y, [["__scopeId", "data-v-67a0761e"]]), Z = /* @__PURE__ */ y({
+}), le = /* @__PURE__ */ _(P, [["__scopeId", "data-v-67a0761e"]]), G = /* @__PURE__ */ m({
   __name: "SlpIcon",
   props: {
     size: {
@@ -155,47 +155,47 @@ const x = ["href"], A = /* @__PURE__ */ y({
       required: !0
     }
   },
-  setup(c) {
-    const e = c, v = p(() => {
-      const s = ["slp-icon"];
-      return typeof e.size == "string" && isNaN(Number(e.size)) && s.push(`slp-icon--size-${e.size}`), e.color && !e.color.startsWith("#") && s.push(`slp-icon--color-${e.color}`), s;
-    }), n = p(() => {
+  setup(i) {
+    const s = i, c = d(() => {
+      const e = ["slp-icon"];
+      return typeof s.size == "string" && isNaN(Number(s.size)) && e.push(`slp-icon--size-${s.size}`), s.color && !s.color.startsWith("#") && e.push(`slp-icon--color-${s.color}`), e;
+    }), a = d(() => {
       var t;
-      const s = {};
-      if ((t = e.color) != null && t.startsWith("#") && (s.color = e.color, s.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
-        const i = typeof e.size == "number" ? e.size : Number(e.size);
-        s.width = `${i}px`, s.height = `${i}px`;
+      const e = {};
+      if ((t = s.color) != null && t.startsWith("#") && (e.color = s.color, e.fill = s.color), typeof s.size == "number" || !isNaN(Number(s.size))) {
+        const f = typeof s.size == "number" ? s.size : Number(s.size);
+        e.width = `${f}px`, e.height = `${f}px`;
       }
-      return s;
+      return e;
     });
-    return (s, t) => {
-      var i, f;
-      return a(), B(E(c.icon), {
-        class: u(["slp-icon", v.value]),
-        style: M(n.value),
+    return (e, t) => {
+      var f, g;
+      return n(), S(N(i.icon), {
+        class: r(["slp-icon", c.value]),
+        style: z(a.value),
         role: "img",
         "aria-hidden": "true",
-        "data-icon-name": ((f = (i = c.icon) == null ? void 0 : i.__docgenInfo) == null ? void 0 : f.displayName) || ""
+        "data-icon-name": ((g = (f = i.icon) == null ? void 0 : f.__docgenInfo) == null ? void 0 : g.displayName) || ""
       }, null, 8, ["class", "style", "data-icon-name"]);
     };
   }
-}), ee = /* @__PURE__ */ _(Z, [["__scopeId", "data-v-b82aeda9"]]), se = {}, te = { class: "slp-row" };
-function ne(c, e) {
-  return a(), o("div", te, [
-    d(c.$slots, "default", {}, void 0, !0)
+}), ie = /* @__PURE__ */ _(G, [["__scopeId", "data-v-b82aeda9"]]), J = {}, K = { class: "slp-row" };
+function Q(i, s) {
+  return n(), o("div", K, [
+    l(i.$slots, "default", {}, void 0, !0)
   ]);
 }
-const he = /* @__PURE__ */ _(se, [["render", ne], ["__scopeId", "data-v-adc8d02f"]]), ae = {
+const re = /* @__PURE__ */ _(J, [["render", Q], ["__scopeId", "data-v-adc8d02f"]]), X = {
   key: 0,
   class: "arrow-symbol"
-}, oe = /* @__PURE__ */ y({
+}, Y = /* @__PURE__ */ m({
   __name: "SlpTypography",
   props: {
     variant: {},
     tag: {}
   },
-  setup(c) {
-    const e = [
+  setup(i) {
+    const s = [
       "display1",
       "heading1",
       "heading2",
@@ -217,21 +217,18 @@ const he = /* @__PURE__ */ _(se, [["render", ne], ["__scopeId", "data-v-adc8d02f
       "arrow",
       "quotes",
       "emphasis"
-    ], v = ["span", "h1", "h2", "h3", "h4", "p", "div"], n = c, s = p(() => e.includes(n.variant || "") ? n.variant : "body1"), t = p(() => v.includes(n.tag || "") ? n.tag : "span"), i = p(() => `slp-text-${s.value}`);
-    return (f, k) => (a(), B(E(t.value), {
-      class: u(i.value)
+    ], c = ["span", "h1", "h2", "h3", "h4", "p", "div"], a = i, e = d(() => s.includes(a.variant || "") ? a.variant : "body1"), t = d(() => c.includes(a.tag || "") ? a.tag : "span"), f = d(() => `slp-text-${e.value}`);
+    return (g, h) => (n(), S(N(t.value), {
+      class: r(f.value)
     }, {
-      default: V(() => [
-        d(f.$slots, "default", {}, void 0, !0),
-        s.value === "arrow" ? (a(), o("span", ae, "→")) : O("", !0)
+      default: I(() => [
+        l(g.$slots, "default", {}, void 0, !0),
+        e.value === "arrow" ? (n(), o("span", X, "→")) : w("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), _e = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-fba90f83"]]), le = {
-  key: 0,
-  class: "dropdown-menu"
-}, ie = ["onClick"], re = { class: "side-navigation" }, de = ["data-ga-name", "onClick"], ce = /* @__PURE__ */ y({
+}), de = /* @__PURE__ */ _(Y, [["__scopeId", "data-v-fba90f83"]]), Z = { class: "side-navigation" }, ee = ["data-ga-name", "onClick"], te = /* @__PURE__ */ m({
   __name: "SlpSideNavigation",
   props: {
     position: {
@@ -241,106 +238,79 @@ const he = /* @__PURE__ */ _(se, [["render", ne], ["__scopeId", "data-v-adc8d02f
     darkMode: {
       type: Boolean,
       default: !1
-    },
-    navigationItems: {
-      type: Array,
-      required: !0
     }
   },
-  setup(c) {
-    const e = c, v = b(null), n = (h) => {
-      v.value && !v.value.contains(h.target) && (f.value = !1);
-    }, s = b(null), t = b(null);
-    let i = null;
-    const f = b(!1), k = (h) => {
-      const g = document.getElementById(h);
-      g && g.scrollIntoView({ behavior: "smooth" }), f.value = !1;
-    }, L = () => {
-      if (!t.value) return;
-      const h = e.navigationItems.map((l) => document.getElementById(l.id)).filter((l) => l !== null), g = (window.innerHeight - 140 - 1) * -1;
-      i = new IntersectionObserver(
-        (l) => {
-          l.forEach((m) => {
-            if (m.isIntersecting) {
-              const $ = m.target.getAttribute("id");
-              $ && (s.value = $);
+  setup(i) {
+    const s = i, c = b(null), a = b([]), e = b(null);
+    let t = null;
+    const f = (h) => {
+      const y = document.getElementById(h);
+      y && y.scrollIntoView({ behavior: "smooth" });
+    }, g = () => {
+      if (!e.value) return;
+      const h = e.value.querySelectorAll("h1, h2, h3, h4, h5, h6");
+      a.value = Array.from(h).map((u) => {
+        var v;
+        return {
+          id: u.getAttribute("id") || "",
+          text: ((v = u.textContent) == null ? void 0 : v.trim()) || "Untitled"
+        };
+      });
+      const y = (window.innerHeight - 140 - 1) * -1;
+      t = new IntersectionObserver(
+        (u) => {
+          u.forEach((v) => {
+            if (v.isIntersecting) {
+              const $ = v.target.getAttribute("id");
+              $ && (c.value = $);
             }
           });
         },
         {
-          rootMargin: `-120px 0px ${g}px 0px`,
-          threshold: Array.from({ length: 99 }, (l, m) => (m + 2) / 100)
+          rootMargin: `-120px 0px ${y}px 0px`,
+          threshold: Array.from({ length: 99 }, (u, v) => (v + 2) / 100)
         }
-      ), h.forEach((l) => i == null ? void 0 : i.observe(l));
+      ), h.forEach((u) => t == null ? void 0 : t.observe(u));
     };
-    return q(() => {
-      L(), document.addEventListener("click", n);
-    }), R(() => {
-      i && i.disconnect(), document.removeEventListener("click", n);
-    }), (h, g) => (a(), o("div", {
-      class: u(["side-navigation-layout", `side-navigation-layout--${e.position}`, { "side-navigation--dark": e.darkMode }])
+    return C(() => {
+      g();
+    }), B(() => {
+      t && t.disconnect();
+    }), (h, y) => (n(), o("div", {
+      class: r(["side-navigation-layout", `side-navigation-layout--${s.position}`, { "side-navigation--dark": s.darkMode }])
     }, [
-      r("div", {
-        ref_key: "dropdownRef",
-        ref: v,
-        class: "side-navigation-dropdown"
-      }, [
-        r("button", {
-          class: "dropdown-toggle",
-          onClick: g[0] || (g[0] = (l) => f.value = !f.value)
-        }, [
-          g[1] || (g[1] = r("span", null, "Jump to a section", -1)),
-          D(ee, {
-            icon: f.value ? S(T) : S(j),
-            color: "black",
-            size: "sm"
-          }, null, 8, ["icon"])
-        ]),
-        f.value ? (a(), o("ul", le, [
-          (a(!0), o(C, null, I(e.navigationItems, (l) => (a(), o("li", {
-            key: l.id,
-            class: "dropdown-item"
-          }, [
-            r("a", {
-              href: "#",
-              class: "dropdown-link",
-              onClick: N((m) => k(l.id), ["prevent"])
-            }, z(l.text), 9, ie)
-          ]))), 128))
-        ])) : O("", !0)
-      ], 512),
-      r("nav", re, [
-        r("ul", null, [
-          (a(!0), o(C, null, I(e.navigationItems, (l) => (a(), o("li", {
-            key: l.id,
+      p("nav", Z, [
+        p("ul", null, [
+          (n(!0), o(M, null, q(a.value, (u) => (n(), o("li", {
+            key: u.id,
             class: "side-navigation__item"
           }, [
-            r("a", {
+            p("a", {
               href: "#",
-              class: u(["side-navigation__link", { "side-navigation__link--active": s.value === l.id }]),
-              "data-ga-name": l.text,
+              class: r(["side-navigation__link", { "side-navigation__link--active": c.value === u.id }]),
+              "data-ga-name": u.text,
               "data-ga-location": "side anchor",
-              onClick: N((m) => k(l.id), ["prevent"])
-            }, z(l.text), 11, de)
+              onClick: A((v) => f(u.id), ["prevent"])
+            }, E(u.text), 11, ee)
           ]))), 128))
         ])
       ]),
-      r("div", {
+      p("div", {
         ref_key: "slotContentRef",
-        ref: t,
+        ref: e,
         class: "side-navigation-content"
       }, [
-        d(h.$slots, "default", {}, void 0, !0)
+        l(h.$slots, "default", {}, void 0, !0)
       ], 512)
     ], 2));
   }
-}), me = /* @__PURE__ */ _(ce, [["__scopeId", "data-v-bb14a48b"]]);
+}), ce = /* @__PURE__ */ _(te, [["__scopeId", "data-v-c76509f9"]]);
 export {
-  ve as SlpButton,
-  fe as SlpColumn,
-  ge as SlpContainer,
-  ee as SlpIcon,
-  he as SlpRow,
-  me as SlpSideNavigation,
-  _e as SlpTypography
+  ne as SlpButton,
+  oe as SlpColumn,
+  le as SlpContainer,
+  ie as SlpIcon,
+  re as SlpRow,
+  ce as SlpSideNavigation,
+  de as SlpTypography
 };