slippers-ui 3.1.2 → 3.1.3

package/dist/slippers-ui.es.js

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