@leaflink/stash 43.1.0 → 43.3.0

package/dist/EmptyState.js

@@ -1,9 +1,9 @@
-import { defineComponent as n, useCssModule as i, useSlots as p, openBlock as a, createElementBlock as o, normalizeClass as l, unref as e, renderSlot as d, createCommentVNode as u, createTextVNode as y, toDisplayString as f } from "vue";
-import { t as g } from "./locale.js";
-import { s as _ } from "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
-import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as n, useCssModule as i, useSlots as p, openBlock as a, createElementBlock as o, normalizeClass as m, unref as e, renderSlot as u, createCommentVNode as y, createTextVNode as d, toDisplayString as _ } from "vue";
+import { t as f } from "./locale.js";
+import { s as g } from "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
+import { _ as w } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-const S = ["alt", "src"], k = /* @__PURE__ */ n({
+const x = ["alt", "src"], S = /* @__PURE__ */ n({
   name: "ll-empty-state",
   __name: "EmptyState",
   props: {
@@ -14,26 +14,27 @@ const S = ["alt", "src"], k = /* @__PURE__ */ n({
     text: { default: "" }
   },
   setup(r) {
-    const t = r, s = i(), m = p();
-    return (c, h) => (a(), o("div", {
+    const t = r, s = i(), l = p();
+    return (c, k) => (a(), o("div", {
       key: "empty",
-      class: l(["stash-empty-state flex align-center align-middle tw-py-12", [e(s).root, { "text-center": !t.image.src && !e(m).image }]]),
-      "data-test": "ll-empty-state"
+      class: m(["stash-empty-state tw-flex tw-justify-center tw-items-center tw-py-12 tw-my-0 tw-mx-auto", [e(s).root, { "tw-text-center": !t.image.src && !e(l).image }]]),
+      "data-test": "stash-empty-state"
     }, [
-      d(c.$slots, "image", {}, () => [
+      u(c.$slots, "image", {}, () => [
         t.image.src ? (a(), o("img", {
           key: 0,
-          class: l(["tw-mr-6", e(s).image]),
+          class: m(["tw-mr-6", e(s).image]),
           alt: t.image.alt,
-          src: t.image.src
-        }, null, 10, S)) : u("", !0)
+          src: t.image.src,
+          "data-test": "stash-empty-state__img"
+        }, null, 10, x)) : y("", !0)
       ]),
-      y(" " + f(t.text || e(g)("ll.emptyState.noResults")), 1)
+      d(" " + _(t.text || e(f)("ll.emptyState.noResults")), 1)
     ], 2));
   }
-}), C = {
-  $style: _
-}, V = /* @__PURE__ */ x(k, [["__cssModules", C]]);
+}), h = {
+  $style: g
+}, V = /* @__PURE__ */ w(S, [["__cssModules", h]]);
 export {
   V as default
 };

package/dist/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n\n  export interface EmptyStateProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n    text?: string;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n</script>\n\n<template>\n  <div\n    key=\"empty\"\n    class=\"stash-empty-state flex align-center align-middle tw-py-12\"\n    data-test=\"ll-empty-state\"\n    :class=\"[classes.root, { 'text-center': !props.image.src && !slots.image }]\"\n  >\n    <slot name=\"image\">\n      <img\n        v-if=\"props.image.src\"\n        class=\"tw-mr-6\"\n        :alt=\"props.image.alt\"\n        :class=\"classes.image\"\n        :src=\"props.image.src\"\n      />\n    </slot>\n\n    {{ props.text || t('ll.emptyState.noResults') }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    margin: 0 auto;\n    max-width: 600px;\n  }\n\n  .image {\n    max-width: 60px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBAmCQA,IAAUC,KACVC,IAAQC;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n\n  export interface EmptyStateProps {\n    /**\n     * Controls wether the sidebar is opened or not\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n    text?: string;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n</script>\n\n<template>\n  <div\n    key=\"empty\"\n    class=\"stash-empty-state tw-flex tw-justify-center tw-items-center tw-py-12 tw-my-0 tw-mx-auto\"\n    data-test=\"stash-empty-state\"\n    :class=\"[classes.root, { 'tw-text-center': !props.image.src && !slots.image }]\"\n  >\n    <slot name=\"image\">\n      <img\n        v-if=\"props.image.src\"\n        class=\"tw-mr-6\"\n        :alt=\"props.image.alt\"\n        :class=\"classes.image\"\n        :src=\"props.image.src\"\n        data-test=\"stash-empty-state__img\"\n      />\n    </slot>\n\n    {{ props.text || t('ll.emptyState.noResults') }}\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: 600px;\n  }\n\n  .image {\n    max-width: 60px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots"],"mappings":";;;;;;;;;;;;;;;;iBAmCQA,IAAUC,KACVC,IAAQC;;;;;;;;;;;;;;;;;;;;;"}

package/dist/EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js

@@ -0,0 +1,8 @@
+const o = "_root_hagg9_2", t = "_image_hagg9_6", g = {
+  root: o,
+  image: t
+};
+export {
+  g as s
+};
+//# sourceMappingURL=EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js.map

package/dist/EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/ListView.js

@@ -57,7 +57,7 @@ import "lodash-es/isNil";
 import "./utils/i18n.js";
 import "./Radio.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js";
-import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-2f171ae7.js";
+import "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
 import "./Loading.vue_vue_type_style_index_0_scoped_bb8d5f15_lang-4ed993c7.js";
 const de = "_checkbox_7isy5_185", he = "_actions_7isy5_189", ue = {
   "select-bar": "_select-bar_7isy5_177",

package/dist/PageNavigation.js

@@ -1,361 +1,104 @@
-import { t as N } from "./locale.js";
-import O from "./Dropdown.js";
-import A from "./Icon.js";
-import D from "lodash-es/isFunction";
-import B from "./Chip.js";
-import { resolveComponent as _, openBlock as r, createElementBlock as h, mergeProps as y, createElementVNode as n, normalizeClass as i, toDisplayString as c, Fragment as w, createBlock as m, withCtx as v, createTextVNode as u, createCommentVNode as k, normalizeStyle as S, renderList as I, createVNode as $ } from "vue";
-import { _ as C } from "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/get";
+import { defineComponent as b, ref as g, watch as m, onMounted as x, openBlock as p, createElementBlock as c, createVNode as _, withCtx as f, Fragment as I, renderList as V, createBlock as k, unref as T, createTextVNode as N, toDisplayString as B } from "vue";
+import C from "@leaflink/snitch";
+import d from "lodash-es/kebabCase";
+import { useRoute as U, useRouter as y } from "vue-router";
+import { _ as P } from "./Tab.vue_vue_type_script_setup_true_lang-b810bee8.js";
+import D from "./Tabs.js";
+import "./Badge.js";
+import "./_plugin-vue_export-helper-dad06003.js";
+import "./Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js";
+import "lodash-es/debounce";
+import "lodash-es/uniqueId";
 import "./constants.js";
+import "./locale.js";
+import "lodash-es/get";
+import "./Dropdown.js";
 import "./clickoutside.js";
 import "./utils/calculateElementOverflow.js";
 import "./utils/helpers.js";
 import "lodash-es/camelCase";
 import "lodash-es/isFinite";
 import "lodash-es/isPlainObject";
-import "lodash-es/uniqueId";
+import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./utils/colorScheme.js";
-const M = "_link_5hoi4_176", z = "_badge_5hoi4_225", E = {
-  link: M,
-  "is-active": "_is-active_5hoi4_192",
-  "is-disabled": "_is-disabled_5hoi4_202",
-  "dropdown-link": "_dropdown-link_5hoi4_207",
-  badge: z
-}, L = {
-  name: "nav-item",
-  components: {
-    Chip: B
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * Used to display the bubble count, i.e. orders, messages
-     */
-    badge: {
-      type: [Number, String],
-      default: 0
-    },
-    /**
-     * The background color of the badge.
-     * Currently limited to a subset of brand colors.
-     */
-    badgeColor: {
-      type: String,
-      default: "blue",
-      validator: (e) => ["blue", "red"].includes(e)
-    },
-    /**
-     * Private/inherited - Item index.
-     */
-    index: {
-      type: Number,
-      required: !0
-    },
-    /**
-     * Private/inherited - Whether the current tab `index` matches `activeIndex`
-     */
-    isActive: Boolean,
-    /**
-     * Private/inherited - Whether the item is inside the dropdown
-     */
-    isDropdown: Boolean,
-    /**
-     * Used to render an `<a>` tag. Denotes the target href of the link.
-     */
-    href: {
-      default: "",
-      type: String
-    },
-    /**
-     * The nav item label
-     */
-    label: {
-      default: "",
-      type: String
-    },
-    /**
-     * Used to render a `<router-link>`. Denotes the target route of the link.
-     * See: https://router.vuejs.org/api/#router-link
-     */
-    to: {
-      default: "",
-      type: [Object, String]
-    },
-    /**
-     * Will render a plain text item if true.
-     * Accepts a function to ensure the value is up-to-date, such as when it comes from vuex
-     */
-    disabled: {
-      default: !1,
-      type: [Boolean, Function]
-    }
-  },
-  computed: {
-    isDisabled() {
-      return D(this.disabled) ? this.disabled() : this.disabled;
-    }
-  },
-  methods: {
-    /**
-     * Customer Active Class matcher.
-     *
-     * This attempts to match the URL ignoring the path params.
-     */
-    hasActiveClass(e) {
-      if (e === this.$route.path)
-        return !0;
-      if (this.$route.path.includes(e)) {
-        const b = (this.$route.path.length - this.$route.path.lastIndexOf("/")) * -1, t = this.$route.path.slice(0, b);
-        return e === t;
-      }
-    }
-  }
-}, V = ["data-id"], F = ["data-id", "onClick"], P = ["href"], T = ["aria-selected", "data-id"], W = ["href"];
-function R(e, b, t, d, l, a) {
-  const f = _("Chip"), g = _("router-link");
-  return a.isDisabled ? (r(), h("li", y({
-    key: 0,
-    "aria-disabled": "true",
-    "data-id": t.index
-  }, e.$attrs), [
-    n("span", {
-      class: i([e.$style.link, { [e.$style["dropdown-link"]]: t.isDropdown }, e.$style["is-disabled"]])
-    }, c(t.label), 3)
-  ], 16, V)) : (r(), h(w, { key: 1 }, [
-    t.to ? (r(), m(g, {
-      key: 0,
-      custom: "",
-      to: t.to
-    }, {
-      default: v(({ route: p, navigate: s }) => {
-        var o;
-        return [
-          n("li", y({
-            role: "tab",
-            "data-id": t.index,
-            class: [{ [e.$style["is-active"]]: a.hasActiveClass(p.path) }, "cursor-pointer"]
-          }, e.$attrs, { onClick: s }), [
-            n("a", {
-              class: i([e.$style.link, { [e.$style["dropdown-link"]]: t.isDropdown }]),
-              href: ((o = t.to) == null ? void 0 : o.name) || t.to
-            }, [
-              u(c(t.label) + " ", 1),
-              t.badge ? (r(), m(f, {
-                key: 0,
-                radius: "pill",
-                shade: "main",
-                size: "small",
-                class: i(e.$style.badge),
-                "color-scheme": t.badgeColor
-              }, {
-                default: v(() => [
-                  u(c(t.badge), 1)
-                ]),
-                _: 1
-              }, 8, ["class", "color-scheme"])) : k("", !0)
-            ], 10, P)
-          ], 16, F)
-        ];
-      }),
-      _: 1
-    }, 8, ["to"])) : (r(), h("li", y({
-      key: 1,
-      role: "tab",
-      "aria-selected": t.isActive || null,
-      class: { [e.$style["is-active"]]: t.isActive },
-      "data-id": t.index
-    }, e.$attrs), [
-      n("a", {
-        class: i([e.$style.link, { [e.$style["dropdown-link"]]: t.isDropdown }]),
-        href: t.href
-      }, [
-        u(c(t.label) + " ", 1),
-        t.badge ? (r(), m(f, {
-          key: 0,
-          radius: "pill",
-          shade: "main",
-          size: "small",
-          class: i(e.$style.badge),
-          "color-scheme": t.badgeColor
-        }, {
-          default: v(() => [
-            u(c(t.badge), 1)
-          ]),
-          _: 1
-        }, 8, ["class", "color-scheme"])) : k("", !0)
-      ], 10, W)
-    ], 16, T))
-  ], 64));
-}
-const j = {
-  $style: E
-}, q = /* @__PURE__ */ C(L, [["render", R], ["__cssModules", j]]), U = "_link_f9rla_176", G = "_tabs_f9rla_203", H = "_list_f9rla_212", J = "_item_f9rla_220", K = "_dropdown_f9rla_236", Q = {
-  link: U,
-  "is-active": "_is-active_f9rla_192",
-  tabs: G,
-  "is-scrollable": "_is-scrollable_f9rla_206",
-  list: H,
-  item: J,
-  "is-invisible": "_is-invisible_f9rla_232",
-  dropdown: K,
-  "is-visible": "_is-visible_f9rla_244",
-  "dropdown-list": "_dropdown-list_f9rla_248",
-  "is-open": "_is-open_f9rla_263",
-  "dropdown-toggle": "_dropdown-toggle_f9rla_282",
-  "has-active": "_has-active_f9rla_293",
-  "dropdown-icon": "_dropdown-icon_f9rla_297"
-}, X = {
+const E = {
+  class: "root stash-page-navigation container",
+  "data-test": "stash-page-navigation"
+}, re = /* @__PURE__ */ b({
   name: "ll-page-navigation",
-  components: {
-    "ll-dropdown": O,
-    "ll-icon": A,
-    NavItem: q
-  },
+  __name: "PageNavigation",
   props: {
-    /**
-     * Index of active tab (zero-based)
-     */
-    activeIndex: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`
-     */
-    items: {
-      type: Array,
-      default: () => []
-    }
+    activeIndex: { default: void 0 },
+    modelValue: { default: "" },
+    items: {}
   },
-  data() {
-    return {
-      hasIntersectionObserver: "IntersectionObserver" in window,
-      observer: void 0,
-      overflowIds: [],
-      toggleWidth: 0,
-      moreText: N("ll.pageNavigation.more")
-    };
-  },
-  watch: {
-    items() {
-      this.destroyObserver(), this.observe();
+  emits: ["update:modelValue", "change"],
+  setup(v, { emit: i }) {
+    const r = v;
+    r.activeIndex && C.info("The `activeIndex` prop is deprecated. Use `v-model` instead.");
+    const o = U(), u = y(), s = g("");
+    function l(t) {
+      t !== s.value && (s.value = t, i("update:modelValue", t));
     }
-  },
-  mounted() {
-    this.observe();
-  },
-  activated() {
-    this.observe();
-  },
-  deactivated() {
-    this.destroyObserver();
-  },
-  beforeUnmount() {
-    this.destroyObserver();
-  },
-  methods: {
-    /**
-     * Event emitted when a tab is clicked, with the target tab index.
-     */
-    observe() {
-      var e;
-      if (this.hasIntersectionObserver) {
-        const b = Array.from(this.$refs.tabList.children), t = {
-          root: this.$refs.tabList,
-          rootMargin: "0px 0px 0px 0px",
-          threshold: Array.from({ length: 100 }).map((d, l) => (l + 1) / 100)
-        };
-        this.observer = new IntersectionObserver((d) => {
-          d.forEach((l) => {
-            const a = l.target.getAttribute("data-id");
-            l.intersectionRatio > 0.96 ? this.overflowIds.includes(a) && this.overflowIds.splice(this.overflowIds.indexOf(a), 1) : this.overflowIds.includes(a) || this.overflowIds.push(a);
-          });
-        }, t), b.forEach((d) => {
-          this.observer.observe(d);
-        }), this.toggleWidth = (e = this.$refs.toggle.$el) == null ? void 0 : e.getBoundingClientRect().width;
+    return m(() => r.modelValue, (t, e) => {
+      if (e === t)
+        return;
+      const a = r.items.findIndex((n) => d(n.label) === t);
+      i("change", a);
+    }), x(() => {
+      if (!r.items.length)
+        return;
+      if (r.activeIndex !== void 0) {
+        const e = r.items[r.activeIndex];
+        l(d(e.label));
+        return;
       }
-    },
-    destroyObserver() {
-      this.observer && (this.observer.disconnect(), this.observer = void 0);
-    }
-  }
-}, Y = { class: "container" }, Z = ["onClick"];
-function x(e, b, t, d, l, a) {
-  const f = _("NavItem"), g = _("ll-icon"), p = _("ll-dropdown");
-  return r(), h("div", Y, [
-    n("nav", {
-      class: i([e.$style.tabs, { [e.$style["is-scrollable"]]: !l.hasIntersectionObserver }])
-    }, [
-      n("ul", {
-        ref: "tabList",
-        class: i(e.$style.list),
-        style: S({
-          width: `calc(100% - ${l.toggleWidth}px)`
-        })
-      }, [
-        (r(!0), h(w, null, I(t.items, (s, o) => (r(), m(f, {
-          key: o,
-          class: i([e.$style.item, { [e.$style["is-invisible"]]: l.overflowIds.includes(`${o}`) }]),
-          badge: s.badge,
-          "badge-color": s.badgeColor,
-          "data-id": o,
-          href: s.href,
-          index: o,
-          "is-active": o === t.activeIndex,
-          label: s.label,
-          to: s.to,
-          disabled: s.disabled
-        }, null, 8, ["class", "badge", "badge-color", "data-id", "href", "index", "is-active", "label", "to", "disabled"]))), 128))
-      ], 6),
-      $(p, {
-        ref: "toggle",
-        class: i([e.$style.dropdown, { [e.$style["is-visible"]]: l.overflowIds.length }]),
-        offset: { x: -1 }
+      if (r.modelValue) {
+        l(r.modelValue);
+        return;
+      }
+      if (!u)
+        return;
+      const t = r.items.find((e) => {
+        if (e != null && e.disabled || !(e != null && e.to) && !(e != null && e.href))
+          return;
+        const { path: a } = u.resolve((e == null ? void 0 : e.to) || (e == null ? void 0 : e.href));
+        if (a === o.path)
+          return !0;
+        if (!o.path.includes(a))
+          return;
+        const n = (o.path.length - o.path.lastIndexOf("/")) * -1, h = o.path.slice(0, n);
+        return a === h;
+      });
+      t && l((t == null ? void 0 : t.value) || d(t.label));
+    }), (t, e) => (p(), c("nav", E, [
+      _(D, {
+        "active-tab": s.value,
+        "onUpdate:activeTab": l
       }, {
-        toggle: v(({ toggle: s }) => [
-          n("button", {
-            "aria-haspopup": "true",
-            class: i([e.$style.link, e.$style["dropdown-toggle"]]),
-            type: "button",
-            "aria-expanded": "false",
-            onClick: s
-          }, [
-            u(c(l.moreText) + " ", 1),
-            $(g, {
-              name: "caret-down",
-              class: i(e.$style["dropdown-icon"])
-            }, null, 8, ["class"])
-          ], 10, Z)
-        ]),
-        default: v(() => [
-          n("ul", {
-            class: i(e.$style["dropdown-list"])
-          }, [
-            (r(!0), h(w, null, I(t.items, (s, o) => (r(), m(f, {
-              key: o,
-              class: i({ hidden: !l.overflowIds.includes(`${o}`) }),
-              href: s.href,
-              index: o,
-              "is-active": o === t.activeIndex,
-              "is-dropdown": !0,
-              label: s.label,
-              to: s.to,
-              disabled: (s == null ? void 0 : s.disabled) ?? !1
-            }, null, 8, ["class", "href", "index", "is-active", "label", "to", "disabled"]))), 128))
-          ], 2)
+        default: f(() => [
+          (p(!0), c(I, null, V(r.items, (a, n) => (p(), k(P, {
+            key: a.label,
+            value: (a == null ? void 0 : a.value) || T(d)(a.label),
+            to: a.to,
+            href: a.href,
+            badge: a.badge,
+            disabled: a.disabled,
+            "data-id": n
+          }, {
+            default: f(() => [
+              N(B(a.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["value", "to", "href", "badge", "disabled", "data-id"]))), 128))
         ]),
         _: 1
-      }, 8, ["class"])
-    ], 2)
-  ]);
-}
-const ee = {
-  $style: Q
-}, ye = /* @__PURE__ */ C(X, [["render", x], ["__cssModules", ee]]);
+      }, 8, ["active-tab"])
+    ]));
+  }
+});
 export {
-  q as NavItem,
-  ye as default
+  re as default
 };
 //# sourceMappingURL=PageNavigation.js.map

package/dist/PageNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageNavigation.js","sources":["../src/components/PageNavigation/components/NavItem.vue","../src/components/PageNavigation/PageNavigation.vue"],"sourcesContent":["<script>\n  import isFunction from 'lodash-es/isFunction';\n\n  import Chip from '../../Chip/Chip.vue';\n\n  export default {\n    name: 'nav-item',\n\n    components: {\n      Chip,\n    },\n\n    inheritAttrs: false,\n\n    props: {\n      /**\n       * Used to display the bubble count, i.e. orders, messages\n       */\n      badge: {\n        type: [Number, String],\n        default: 0,\n      },\n\n      /**\n       * The background color of the badge.\n       * Currently limited to a subset of brand colors.\n       */\n      badgeColor: {\n        type: String,\n        default: 'blue',\n        validator: (value) => ['blue', 'red'].includes(value),\n      },\n\n      /**\n       * Private/inherited - Item index.\n       */\n      index: {\n        type: Number,\n        required: true,\n      },\n      /**\n       * Private/inherited - Whether the current tab `index` matches `activeIndex`\n       */\n      isActive: Boolean,\n      /**\n       * Private/inherited - Whether the item is inside the dropdown\n       */\n      isDropdown: Boolean,\n      /**\n       * Used to render an `<a>` tag. Denotes the target href of the link.\n       */\n      href: {\n        default: '',\n        type: String,\n      },\n      /**\n       * The nav item label\n       */\n      label: {\n        default: '',\n        type: String,\n      },\n      /**\n       * Used to render a `<router-link>`. Denotes the target route of the link.\n       * See: https://router.vuejs.org/api/#router-link\n       */\n      to: {\n        default: '',\n        type: [Object, String],\n      },\n      /**\n       * Will render a plain text item if true.\n       * Accepts a function to ensure the value is up-to-date, such as when it comes from vuex\n       */\n      disabled: {\n        default: false,\n        type: [Boolean, Function],\n      },\n    },\n\n    computed: {\n      isDisabled() {\n        if (isFunction(this.disabled)) {\n          return this.disabled();\n        }\n\n        return this.disabled;\n      },\n    },\n\n    methods: {\n      /**\n       * Customer Active Class matcher.\n       *\n       * This attempts to match the URL ignoring the path params.\n       */\n      hasActiveClass(path) {\n        if (path === this.$route.path) {\n          return true;\n        } else if (this.$route.path.includes(path)) {\n          const sliceIndex = (this.$route.path.length - this.$route.path.lastIndexOf('/')) * -1;\n          const parentPath = this.$route.path.slice(0, sliceIndex);\n\n          return path === parentPath;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <li v-if=\"isDisabled\" aria-disabled=\"true\" :data-id=\"index\" v-bind=\"$attrs\">\n    <span :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }, $style['is-disabled']]\">{{ label }}</span>\n  </li>\n  <template v-else>\n    <router-link v-if=\"to\" v-slot=\"{ route, navigate }\" custom :to=\"to\">\n      <li\n        role=\"tab\"\n        :data-id=\"index\"\n        :class=\"[{ [$style['is-active']]: hasActiveClass(route.path) }, 'cursor-pointer']\"\n        v-bind=\"$attrs\"\n        @click=\"navigate\"\n      >\n        <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"to?.name || to\">\n          {{ label }}\n          <Chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color-scheme=\"badgeColor\">\n            {{ badge }}\n          </Chip>\n        </a>\n      </li>\n    </router-link>\n    <li\n      v-else\n      role=\"tab\"\n      :aria-selected=\"isActive || null\"\n      :class=\"{ [$style['is-active']]: isActive }\"\n      :data-id=\"index\"\n      v-bind=\"$attrs\"\n    >\n      <a :class=\"[$style.link, { [$style['dropdown-link']]: isDropdown }]\" :href=\"href\">\n        {{ label }}\n        <Chip v-if=\"badge\" radius=\"pill\" shade=\"main\" size=\"small\" :class=\"$style.badge\" :color-scheme=\"badgeColor\">\n          {{ badge }}\n        </Chip>\n      </a>\n    </li>\n  </template>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $primary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n\n    &.is-disabled {\n      pointer-events: none;\n      color: var(--color-ice-500);\n    }\n  }\n\n  .dropdown-link {\n    border-bottom: 0;\n    border-radius: $border-radius;\n    font-size: typo('button', 'size');\n    height: space(4);\n    line-height: space(4);\n    padding: 0 space(1);\n    transition: none;\n\n    &:hover,\n    &:focus,\n    &:active {\n      background: var(--color-blue);\n      color: var(--color-white);\n      text-decoration: none;\n    }\n\n    .is-active &,\n    .is-active &:hover,\n    .is-active &:focus {\n      color: var(--color-blue);\n    }\n  }\n\n  .badge {\n    margin-left: 2px;\n  }\n</style>\n","<script>\n  import { t } from '../../locale';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import NavItem from './components/NavItem.vue';\n\n  export { default as NavItem } from './components/NavItem.vue';\n\n  export default {\n    name: 'll-page-navigation',\n\n    components: {\n      'll-dropdown': Dropdown,\n      'll-icon': Icon,\n      NavItem,\n    },\n\n    props: {\n      /**\n       * Index of active tab (zero-based)\n       */\n      activeIndex: {\n        type: Number,\n        default: 0,\n      },\n      /**\n       * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`\n       */\n      items: {\n        type: Array,\n        default: () => [],\n      },\n    },\n\n    data() {\n      return {\n        hasIntersectionObserver: 'IntersectionObserver' in window,\n        observer: undefined,\n        overflowIds: [],\n        toggleWidth: 0,\n        moreText: t('ll.pageNavigation.more'),\n      };\n    },\n\n    watch: {\n      items() {\n        this.destroyObserver();\n        this.observe();\n      },\n    },\n\n    mounted() {\n      this.observe();\n    },\n\n    activated() {\n      this.observe();\n    },\n\n    deactivated() {\n      this.destroyObserver();\n    },\n\n    beforeUnmount() {\n      this.destroyObserver();\n    },\n\n    methods: {\n      /**\n       * Event emitted when a tab is clicked, with the target tab index.\n       */\n      observe() {\n        if (this.hasIntersectionObserver) {\n          const tabs = Array.from(this.$refs.tabList.children);\n\n          const options = {\n            root: this.$refs.tabList,\n            rootMargin: '0px 0px 0px 0px',\n            threshold: Array.from({ length: 100 }).map((v, i) => (i + 1) / 100),\n          };\n\n          this.observer = new IntersectionObserver((entries) => {\n            entries.forEach((entry) => {\n              const dataId = entry.target.getAttribute('data-id');\n\n              /**\n               * Check for partial intersection.\n               * Zooming out can result in ratio of approx 0.984\n               * Anything higher will result in nav items disappearing\n               */\n              if (entry.intersectionRatio > 0.96) {\n                // show tab, hide in dropdown\n                if (this.overflowIds.includes(dataId)) {\n                  this.overflowIds.splice(this.overflowIds.indexOf(dataId), 1);\n                }\n              } else {\n                // hide tab, show in dropdown\n                if (!this.overflowIds.includes(dataId)) {\n                  this.overflowIds.push(dataId);\n                }\n              }\n            });\n          }, options);\n\n          tabs.forEach((element) => {\n            this.observer.observe(element);\n          });\n\n          this.toggleWidth = this.$refs.toggle.$el?.getBoundingClientRect().width;\n        }\n      },\n\n      destroyObserver() {\n        if (this.observer) {\n          this.observer.disconnect();\n          this.observer = undefined;\n        }\n      },\n    },\n  };\n</script>\n\n<template>\n  <div class=\"container\">\n    <nav :class=\"[$style.tabs, { [$style['is-scrollable']]: !hasIntersectionObserver }]\">\n      <ul\n        ref=\"tabList\"\n        :class=\"$style.list\"\n        :style=\"{\n          width: `calc(100% - ${toggleWidth}px)`,\n        }\"\n      >\n        <NavItem\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"[$style.item, { [$style['is-invisible']]: overflowIds.includes(`${index}`) }]\"\n          :badge=\"item.badge\"\n          :badge-color=\"item.badgeColor\"\n          :data-id=\"index\"\n          :href=\"item.href\"\n          :index=\"index\"\n          :is-active=\"index === activeIndex\"\n          :label=\"item.label\"\n          :to=\"item.to\"\n          :disabled=\"item.disabled\"\n        />\n      </ul>\n      <ll-dropdown\n        ref=\"toggle\"\n        :class=\"[$style.dropdown, { [$style['is-visible']]: overflowIds.length }]\"\n        :offset=\"{ x: -1 }\"\n      >\n        <template #toggle=\"{ toggle }\">\n          <button\n            aria-haspopup=\"true\"\n            :class=\"[$style.link, $style['dropdown-toggle']]\"\n            type=\"button\"\n            aria-expanded=\"false\"\n            @click=\"toggle\"\n          >\n            {{ moreText }}\n            <ll-icon name=\"caret-down\" :class=\"$style['dropdown-icon']\" />\n          </button>\n        </template>\n\n        <template #default>\n          <ul :class=\"$style['dropdown-list']\">\n            <NavItem\n              v-for=\"(item, index) in items\"\n              :key=\"index\"\n              :class=\"{ hidden: !overflowIds.includes(`${index}`) }\"\n              :href=\"item.href\"\n              :index=\"index\"\n              :is-active=\"index === activeIndex\"\n              :is-dropdown=\"true\"\n              :label=\"item.label\"\n              :to=\"item.to\"\n              :disabled=\"item?.disabled ?? false\"\n            />\n          </ul>\n        </template>\n      </ll-dropdown>\n    </nav>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n  .link {\n    border-bottom: border(medium, transparent);\n    color: var(--color-ice-700);\n    display: block;\n    font-family: $font-family-primary;\n    font-weight: typo('h3', 'weight');\n    line-height: 1.75em;\n    padding: space(1) 0;\n    transition: color $secondary-transition;\n    white-space: nowrap;\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue);\n      outline: 0;\n      text-decoration: none;\n    }\n\n    .is-active & {\n      color: var(--color-blue);\n\n      &,\n      &:hover,\n      &:focus {\n        background-color: transparent;\n        border-bottom-color: var(--color-blue);\n      }\n\n      &:focus {\n        color: var(--color-blue);\n      }\n    }\n  }\n\n  .tabs {\n    position: relative;\n\n    &.is-scrollable {\n      margin-right: 0;\n      max-width: 100%;\n      overflow: auto;\n    }\n  }\n\n  .list {\n    display: inline-flex;\n    list-style: none;\n    overflow: hidden;\n    padding: 0;\n    position: relative;\n  }\n\n  .item {\n    padding: 0 space(2) 0 0;\n\n    @include breakpoint('md') {\n      padding-right: space(3);\n    }\n\n    &.is-active {\n      transition: none !important;\n    }\n  }\n\n  .is-invisible {\n    visibility: hidden;\n  }\n\n  .tabs .dropdown {\n    display: inline-flex;\n    height: 100%;\n    position: absolute;\n    right: 0;\n    top: 0;\n    visibility: hidden;\n\n    &.is-visible {\n      visibility: visible;\n    }\n  }\n\n  .dropdown-list {\n    @include elevation('high');\n\n    background: var(--color-white);\n    border: none;\n    border-radius: $border-radius;\n    display: block;\n    list-style: none;\n    margin-top: 0;\n    min-width: 140px;\n    padding: space(1);\n    position: static;\n    right: -(space(1));\n    top: 100%;\n    z-index: z-index(control);\n\n    .is-open & {\n      display: block;\n    }\n\n    &::before {\n      @include corner;\n\n      border-left: border(thin, var(--color-blue));\n      border-top: border(thin, var(--color-blue));\n      content: '';\n      display: none;\n      right: space(2);\n    }\n  }\n\n  .dropdown-toggle {\n    background: transparent;\n    border: 0;\n    border-bottom: border(medium, transparent);\n    color: var(--color-blue);\n    display: flex;\n    padding-left: space(1);\n\n    &:hover,\n    &:focus {\n      color: var(--color-blue-hover);\n    }\n\n    .has-active & {\n      border-bottom-color: var(--color-blue);\n    }\n  }\n\n  .dropdown-icon {\n    height: icon('default', 'height');\n    position: relative;\n    top: 1px;\n    vertical-align: bottom;\n    width: icon('default', 'width');\n  }\n</style>\n"],"names":["_sfc_main","Chip","value","isFunction","path","sliceIndex","parentPath","$options","_openBlock","_createElementBlock","_mergeProps","$props","_ctx","_createElementVNode","_normalizeClass","_Fragment","_createBlock","_component_router_link","route","navigate","_a","_createTextVNode","_toDisplayString","_component_Chip","Dropdown","Icon","NavItem","t","tabs","options","v","i","entries","entry","dataId","element","_hoisted_1","$data","_normalizeStyle","_renderList","item","index","_component_NavItem","_createVNode","_component_ll_dropdown","_withCtx","toggle","_component_ll_icon"],"mappings":"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"}
+{"version":3,"file":"PageNavigation.js","sources":["../src/components/PageNavigation/PageNavigation.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import kebabCase from 'lodash-es/kebabCase';\n  import { onMounted, ref, watch } from 'vue';\n  import { RouteLocationRaw, useRoute, useRouter } from 'vue-router';\n\n  import Tab, { type TabProps } from '../Tab/Tab.vue';\n  import Tabs from '../Tabs/Tabs.vue';\n\n  defineOptions({\n    name: 'll-page-navigation',\n  });\n\n  export interface NavItem extends Omit<TabProps, 'value'> {\n    /**\n     * The tab's label\n     */\n    label: string;\n\n    /**\n     * The tab's label\n     */\n    value?: string;\n  }\n\n  export interface PageNavigationProps {\n    /**\n     * Index of active tab (zero-based)\n     * @deprecated Use v-model instead.\n     */\n    activeIndex?: number | string;\n\n    /**\n     * The currently active tab value\n     */\n    modelValue?: string;\n\n    /**\n     * Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`\n     */\n    items: NavItem[];\n  }\n\n  const props = withDefaults(defineProps<PageNavigationProps>(), {\n    activeIndex: undefined,\n    modelValue: '',\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emits the current active nav value\n       */\n      (e: 'update:modelValue', activeTab: string): void;\n\n      /**\n       * Emits the current active nav index\n       * @deprecated - Use v-model instead.\n       */\n      (e: 'change', activeNavIndex: number): void;\n    }>();\n\n  if (props.activeIndex) {\n    logger.info('The `activeIndex` prop is deprecated. Use `v-model` instead.');\n  }\n\n  const route = useRoute();\n  const router = useRouter();\n\n  // this ref is needed to keep track of the active tab even if v-model is not passed\n  const activeTab = ref('');\n\n  function onUpdateActiveTab(newActiveTab: string) {\n    if (newActiveTab === activeTab.value) return;\n\n    activeTab.value = newActiveTab;\n    emit('update:modelValue', newActiveTab);\n  }\n\n  // TODO: Remove this once activeIndex is removed\n  watch(() => props.modelValue, (newValue, oldValue) => {\n    if (oldValue === newValue) return;\n\n    const activeNavItemIndex = props.items.findIndex((item) => kebabCase(item.label) === newValue);\n\n    emit('change', activeNavItemIndex);\n  });\n\n  onMounted(() => {\n    if (!props.items.length) return;\n\n    // TODO: Remove this once activeIndex is removed\n    if (props.activeIndex !== undefined) {\n      const activeTabItem = props.items[props.activeIndex];\n\n      onUpdateActiveTab(kebabCase(activeTabItem.label));\n\n      return;\n    }\n\n    if (props.modelValue) {\n      onUpdateActiveTab(props.modelValue);\n      return;\n    }\n\n    if (!router) return;\n\n    const itemMatchingRoute = props.items.find(item => {\n      if (item?.disabled || (!item?.to && !item?.href)) return;\n\n      const { path } = router.resolve(item?.to as RouteLocationRaw || item?.href as string);\n\n      if (path === route.path) {\n        return true;\n      }\n\n      if (!route.path.includes(path)) return;\n\n      const sliceIndex = (route.path.length - route.path.lastIndexOf('/')) * -1;\n      const parentPath = route.path.slice(0, sliceIndex);\n\n      return path === parentPath;\n    });\n\n    if (!itemMatchingRoute) return;\n\n    onUpdateActiveTab(itemMatchingRoute?.value || kebabCase(itemMatchingRoute.label));\n  });\n</script>\n\n<template>\n  <nav class=\"root stash-page-navigation container\" data-test=\"stash-page-navigation\">\n    <Tabs :active-tab=\"activeTab\" @update:active-tab=\"onUpdateActiveTab\">\n      <Tab\n        v-for=\"(item, index) in props.items\"\n        :key=\"item.label\"\n        :value=\"item?.value || kebabCase(item.label)\"\n        :to=\"item.to\"\n        :href=\"item.href\"\n        :badge=\"item.badge\"\n        :disabled=\"item.disabled\"\n        :data-id=\"index\"\n      >\n        {{ item.label }}\n      </Tab>\n    </Tabs>\n  </nav>\n</template>\n"],"names":["props","logger","route","useRoute","router","useRouter","activeTab","ref","onUpdateActiveTab","newActiveTab","emit","watch","newValue","oldValue","activeNavItemIndex","item","kebabCase","onMounted","activeTabItem","itemMatchingRoute","path","sliceIndex","parentPath"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DE,IAAIA,EAAM,eACRC,EAAO,KAAK,8DAA8D;AAG5E,UAAMC,IAAQC,KACRC,IAASC,KAGTC,IAAYC,EAAI,EAAE;AAExB,aAASC,EAAkBC,GAAsB;AAC/C,MAAIA,MAAiBH,EAAU,UAE/BA,EAAU,QAAQG,GAClBC,EAAK,qBAAqBD,CAAY;AAAA,IACxC;AAGA,WAAAE,EAAM,MAAMX,EAAM,YAAY,CAACY,GAAUC,MAAa;AACpD,UAAIA,MAAaD;AAAU;AAErB,YAAAE,IAAqBd,EAAM,MAAM,UAAU,CAACe,MAASC,EAAUD,EAAK,KAAK,MAAMH,CAAQ;AAE7F,MAAAF,EAAK,UAAUI,CAAkB;AAAA,IAAA,CAClC,GAEDG,EAAU,MAAM;AACV,UAAA,CAACjB,EAAM,MAAM;AAAQ;AAGrB,UAAAA,EAAM,gBAAgB,QAAW;AACnC,cAAMkB,IAAgBlB,EAAM,MAAMA,EAAM,WAAW;AAEjC,QAAAQ,EAAAQ,EAAUE,EAAc,KAAK,CAAC;AAEhD;AAAA,MACF;AAEA,UAAIlB,EAAM,YAAY;AACpB,QAAAQ,EAAkBR,EAAM,UAAU;AAClC;AAAA,MACF;AAEA,UAAI,CAACI;AAAQ;AAEb,YAAMe,IAAoBnB,EAAM,MAAM,KAAK,CAAQe,MAAA;AACjD,YAAIA,KAAA,QAAAA,EAAM,YAAa,EAACA,KAAA,QAAAA,EAAM,OAAM,EAACA,KAAA,QAAAA,EAAM;AAAO;AAE5C,cAAA,EAAE,MAAAK,EAAS,IAAAhB,EAAO,SAAQW,KAAA,gBAAAA,EAAM,QAA0BA,KAAA,gBAAAA,EAAM,KAAc;AAEhF,YAAAK,MAASlB,EAAM;AACV,iBAAA;AAGT,YAAI,CAACA,EAAM,KAAK,SAASkB,CAAI;AAAG;AAE1B,cAAAC,KAAcnB,EAAM,KAAK,SAASA,EAAM,KAAK,YAAY,GAAG,KAAK,IACjEoB,IAAapB,EAAM,KAAK,MAAM,GAAGmB,CAAU;AAEjD,eAAOD,MAASE;AAAA,MAAA,CACjB;AAED,MAAKH,KAELX,GAAkBW,KAAA,gBAAAA,EAAmB,UAASH,EAAUG,EAAkB,KAAK,CAAC;AAAA,IAAA,CACjF;;;;;;;;;;;;;;;;;;;;;;;;;;"}