@leaflink/stash 48.16.1 → 48.16.2

package/dist/ObfuscateText.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -27,28 +26,28 @@ declare type __VLS_WithDefaults<P, D> = {
     }> : P[K];
 };
 
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ObfuscateTextProps>, {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ObfuscateTextProps>, {
     maskChar: string;
     maskCharCount: number;
     lengthToKeep: number;
     position: string;
     obfuscateAll: boolean;
     showToggle: boolean;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ObfuscateTextProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ObfuscateTextProps>, {
     maskChar: string;
     maskCharCount: number;
     lengthToKeep: number;
     position: string;
     obfuscateAll: boolean;
     showToggle: boolean;
-}>>>, {
+}>>> & Readonly<{}>, {
     position: "start" | "end";
     maskChar: string;
     maskCharCount: number;
     lengthToKeep: number;
     obfuscateAll: boolean;
     showToggle: boolean;
-}, {}>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export declare interface ObfuscateTextProps {

package/dist/PageContent.vue.d.ts

@@ -1,9 +1,7 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -11,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     sidebar?(_: {}): any;
 }>;

package/dist/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../src/components/PageHeader/PageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface PageHeaderProps {\n    /**\n     * The title of the page.\n     */\n    title: string;\n    /**\n     * The description of the page.\n     */\n    description?: string;\n  }\n\n  defineOptions({\n    name: 'll-page-header',\n  });\n\n  const props = withDefaults(defineProps<PageHeaderProps>(), {\n    description: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const hasActions = computed<boolean>(() => !!(slots['primary-action'] || slots['secondary-action']));\n</script>\n\n<template>\n  <header\n    class=\"stash-page-header\"\n    :class=\"[classes.root, { [classes.grid]: hasActions }]\"\n    data-test=\"stash-page-header\"\n  >\n    <div class=\"tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1\">\n      <div v-if=\"slots.media\" class=\"stash-page-header__media tw-mr-3 tw-self-center\" :class=\"classes.mediaTest\">\n        <!-- @slot Receives a custom media -->\n        <slot name=\"media\"></slot>\n      </div>\n\n      <div>\n        <!-- @slot Receives a custom title -->\n        <slot name=\"title\">\n          <h1 class=\"stash-page-header__title tw-my-0\">{{ props.title }}</h1>\n        </slot>\n\n        <!-- @slot Receives a custom description -->\n        <slot name=\"description\">\n          <p v-if=\"description\" class=\"stash-page-header__description tw-mb-0 tw-mt-1.5\">{{ props.description }}</p>\n        </slot>\n      </div>\n    </div>\n\n    <div\n      v-if=\"hasActions\"\n      class=\"stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1\"\n      :class=\"classes.actions\"\n    >\n      <!-- @slot Receives a custom secondary action -->\n      <slot name=\"secondary-action\"> </slot>\n      <!-- @slot Receives a custom primary action -->\n      <slot name=\"primary-action\"> </slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  .root {\n    border-bottom: 0;\n    display: grid;\n    gap: var(--grid-gutter);\n    margin: 0 auto;\n    max-width: theme('width.container');\n    padding: theme('spacing.6') var(--grid-gutter) theme('spacing.12');\n    width: 100%;\n  }\n\n  @media screen('lg') {\n    .root.grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .actions {\n    align-self: flex-end;\n    flex-direction: column-reverse;\n    row-gap: var(--grid-gutter);\n  }\n\n  @media screen('md') {\n    .actions {\n      column-gap: var(--grid-gutter);\n      flex-direction: row;\n      row-gap: 0;\n    }\n  }\n\n  @media screen('lg') {\n    .actions {\n      align-items: flex-end;\n      flex-direction: row;\n      justify-content: flex-end;\n    }\n  }\n\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media-test {\n    max-width: 58px;\n    max-height: 58px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","hasActions","computed"],"mappings":";;;;;;;;;;;;;iBAsBQA,IAAUC,KACVC,IAAQC,KAERC,IAAaC,EAAkB,MAAM,CAAC,EAAEH,EAAM,gBAAgB,KAAKA,EAAM,kBAAkB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PageHeader.js","sources":["../src/components/PageHeader/PageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface PageHeaderProps {\n    /**\n     * The title of the page.\n     */\n    title: string;\n    /**\n     * The description of the page.\n     */\n    description?: string;\n  }\n\n  defineOptions({\n    name: 'll-page-header',\n  });\n\n  const props = withDefaults(defineProps<PageHeaderProps>(), {\n    description: '',\n  });\n\n  const classes = useCssModule();\n  const slots = useSlots();\n\n  const hasActions = computed<boolean>(() => !!(slots['primary-action'] || slots['secondary-action']));\n</script>\n\n<template>\n  <header\n    class=\"stash-page-header\"\n    :class=\"[classes.root, { [classes.grid]: hasActions }]\"\n    data-test=\"stash-page-header\"\n  >\n    <div class=\"tw-col-span-full tw-flex tw-items-center lg:tw-col-span-1\">\n      <div v-if=\"slots.media\" class=\"stash-page-header__media tw-mr-3 tw-self-center\" :class=\"classes.mediaTest\">\n        <!-- @slot Receives a custom media -->\n        <slot name=\"media\"></slot>\n      </div>\n\n      <div>\n        <!-- @slot Receives a custom title -->\n        <slot name=\"title\">\n          <h1 class=\"stash-page-header__title tw-my-0\">{{ props.title }}</h1>\n        </slot>\n\n        <!-- @slot Receives a custom description -->\n        <slot name=\"description\">\n          <p v-if=\"description\" class=\"stash-page-header__description tw-mb-0 tw-mt-1.5\">{{ props.description }}</p>\n        </slot>\n      </div>\n    </div>\n\n    <div\n      v-if=\"hasActions\"\n      class=\"stash-page-header__actions tw-col-span-full tw-flex lg:tw-col-span-1\"\n      :class=\"classes.actions\"\n    >\n      <!-- @slot Receives a custom secondary action -->\n      <slot name=\"secondary-action\"> </slot>\n      <!-- @slot Receives a custom primary action -->\n      <slot name=\"primary-action\"> </slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  .root {\n    border-bottom: 0;\n    display: grid;\n    gap: var(--grid-gutter);\n    margin: 0 auto;\n    max-width: theme('width.container');\n    padding: theme('spacing.6') var(--grid-gutter) theme('spacing.12');\n    width: 100%;\n  }\n\n  @media screen('lg') {\n    .root.grid {\n      grid-template-columns: repeat(2, 1fr);\n    }\n  }\n\n  .actions {\n    align-self: flex-end;\n    flex-direction: column-reverse;\n    row-gap: var(--grid-gutter);\n  }\n\n  @media screen('md') {\n    .actions {\n      column-gap: var(--grid-gutter);\n      flex-direction: row;\n      row-gap: 0;\n    }\n  }\n\n  @media screen('lg') {\n    .actions {\n      align-items: flex-end;\n      flex-direction: row;\n      justify-content: flex-end;\n    }\n  }\n\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media-test {\n    max-width: 58px;\n    max-height: 58px;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","useSlots","hasActions","computed"],"mappings":";;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAIRC,IAAUC,KACVC,IAAQC,KAERC,IAAaC,EAAkB,MAAM,CAAC,EAAEH,EAAM,gBAAgB,KAAKA,EAAM,kBAAkB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageHeader.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -33,13 +32,13 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageHeaderProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageHeaderProps>, {
     description: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageHeaderProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageHeaderProps>, {
     description: string;
-}>>>, {
+}>>> & Readonly<{}>, {
     description: string;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     media?(_: {}): any;
     title?(_: {}): any;
     description?(_: {}): any;

package/dist/PageNavigation.js

@@ -1,12 +1,12 @@
-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 { defineComponent as m, ref as g, watch as x, onMounted as _, openBlock as i, createElementBlock as c, createVNode as I, withCtx as f, Fragment as V, renderList as k, createBlock as T, unref as N, createTextVNode as B, toDisplayString as C } from "vue";
+import U from "@leaflink/snitch";
 import s 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-69d1b046.js";
-import D from "./Tabs.js";
+import { useRoute as y, useRouter as P } from "vue-router";
+import { _ as D } from "./Tab.vue_vue_type_script_setup_true_lang-9aa53203.js";
+import E from "./Tabs.js";
 import "./Badge.js";
 import "./_plugin-vue_export-helper-dad06003.js";
-import "./Tabs.vue_used_vue_type_style_index_0_lang.module-2a131332.js";
+import "./Tabs.vue_used_vue_type_style_index_0_lang.module-3aa36673.js";
 import "lodash-es/debounce";
 import "lodash-es/uniqueId";
 import "./constants.js";
@@ -22,10 +22,10 @@ import "lodash-es/isPlainObject";
 import "./Icon.js";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const E = {
+const F = {
   class: "stash-page-navigation container",
   "data-test": "stash-page-navigation"
-}, re = /* @__PURE__ */ b({
+}, oe = /* @__PURE__ */ m({
   name: "ll-page-navigation",
   __name: "PageNavigation",
   props: {
@@ -34,19 +34,22 @@ const E = {
     items: {}
   },
   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(), d = g("");
+  setup(v, { emit: h }) {
+    const r = v, p = h;
+    r.activeIndex && U.info("The `activeIndex` prop is deprecated. Use `v-model` instead.");
+    const o = y(), u = P(), d = g("");
     function n(t) {
-      t !== d.value && (d.value = t, i("update:modelValue", t));
+      t !== d.value && (d.value = t, p("update:modelValue", t));
     }
-    return m(() => r.modelValue, (t, e) => {
-      if (e === t)
-        return;
-      const a = r.items.findIndex((l) => s(l.label) === t);
-      i("change", a), n(t);
-    }), x(() => {
+    return x(
+      () => r.modelValue,
+      (t, e) => {
+        if (e === t)
+          return;
+        const a = r.items.findIndex((l) => s(l.label) === t);
+        p("change", a), n(t);
+      }
+    ), _(() => {
       if (!r.items.length)
         return;
       if (r.activeIndex !== void 0) {
@@ -68,19 +71,19 @@ const E = {
           return !0;
         if (!o.path.includes(a))
           return;
-        const l = (o.path.length - o.path.lastIndexOf("/")) * -1, h = o.path.slice(0, l);
-        return a === h;
+        const l = (o.path.length - o.path.lastIndexOf("/")) * -1, b = o.path.slice(0, l);
+        return a === b;
       });
       t && n((t == null ? void 0 : t.value) || s(t.label));
-    }), (t, e) => (p(), c("nav", E, [
-      _(D, {
+    }), (t, e) => (i(), c("nav", F, [
+      I(E, {
         "active-tab": d.value,
         "onUpdate:activeTab": n
       }, {
         default: f(() => [
-          (p(!0), c(I, null, V(r.items, (a, l) => (p(), k(P, {
+          (i(!0), c(V, null, k(r.items, (a, l) => (i(), T(D, {
             key: a.label,
-            value: (a == null ? void 0 : a.value) || T(s)(a.label),
+            value: (a == null ? void 0 : a.value) || N(s)(a.label),
             to: a.to,
             href: a.href,
             badge: a.badge,
@@ -88,7 +91,7 @@ const E = {
             "data-id": l
           }, {
             default: f(() => [
-              N(B(a.label), 1)
+              B(C(a.label), 1)
             ]),
             _: 2
           }, 1032, ["value", "to", "href", "badge", "disabled", "data-id"]))), 128))
@@ -99,6 +102,6 @@ const E = {
   }
 });
 export {
-  re as default
+  oe as default
 };
 //# sourceMappingURL=PageNavigation.js.map

package/dist/PageNavigation.js.map

@@ -1 +1 @@
-{"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  watch(() => props.modelValue, (newValue, oldValue) => {\n    if (oldValue === newValue) return;\n\n    // TODO: Remove this once activeIndex is removed\n    const activeNavItemIndex = props.items.findIndex((item) => kebabCase(item.label) === newValue);\n    emit('change', activeNavItemIndex);\n\n    // Forcing updating activeTab when the component is in a keep alive state\n    onUpdateActiveTab(newValue);\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 !== activeTab.value) {\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=\"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;AAEA,WAAAE,EAAM,MAAMX,EAAM,YAAY,CAACY,GAAUC,MAAa;AACpD,UAAIA,MAAaD;AAAU;AAGrB,YAAAE,IAAqBd,EAAM,MAAM,UAAU,CAACe,MAASC,EAAUD,EAAK,KAAK,MAAMH,CAAQ;AAC7F,MAAAF,EAAK,UAAUI,CAAkB,GAGjCN,EAAkBI,CAAQ;AAAA,IAAA,CAC3B,GAEDK,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;AAGE,UAAAlB,EAAM,eAAeM,EAAU,OAAO;AACxC,QAAAE,EAAkBR,EAAM,UAAU;AAClC;AAAA;AAGF,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;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 = 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  watch(\n    () => props.modelValue,\n    (newValue, oldValue) => {\n      if (oldValue === newValue) return;\n\n      // TODO: Remove this once activeIndex is removed\n      const activeNavItemIndex = props.items.findIndex((item) => kebabCase(item.label) === newValue);\n      emit('change', activeNavItemIndex);\n\n      // Forcing updating activeTab when the component is in a keep alive state\n      onUpdateActiveTab(newValue);\n    },\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 !== activeTab.value) {\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=\"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","__props","emit","__emit","logger","route","useRoute","router","useRouter","activeTab","ref","onUpdateActiveTab","newActiveTab","watch","newValue","oldValue","activeNavItemIndex","item","kebabCase","onMounted","activeTabItem","itemMatchingRoute","path","sliceIndex","parentPath"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CE,UAAMA,IAAQC,GAKRC,IAAOC;AAab,IAAIH,EAAM,eACRI,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,GAClBV,EAAK,qBAAqBU,CAAY;AAAA,IACxC;AAEA,WAAAC;AAAA,MACE,MAAMb,EAAM;AAAA,MACZ,CAACc,GAAUC,MAAa;AACtB,YAAIA,MAAaD;AAAU;AAGrB,cAAAE,IAAqBhB,EAAM,MAAM,UAAU,CAACiB,MAASC,EAAUD,EAAK,KAAK,MAAMH,CAAQ;AAC7F,QAAAZ,EAAK,UAAUc,CAAkB,GAGjCL,EAAkBG,CAAQ;AAAA,MAC5B;AAAA,IAAA,GAGFK,EAAU,MAAM;AACV,UAAA,CAACnB,EAAM,MAAM;AAAQ;AAGrB,UAAAA,EAAM,gBAAgB,QAAW;AACnC,cAAMoB,IAAgBpB,EAAM,MAAMA,EAAM,WAAW;AAEjC,QAAAW,EAAAO,EAAUE,EAAc,KAAK,CAAC;AAEhD;AAAA;AAGE,UAAApB,EAAM,eAAeS,EAAU,OAAO;AACxC,QAAAE,EAAkBX,EAAM,UAAU;AAClC;AAAA;AAGF,UAAI,CAACO;AAAQ;AAEb,YAAMc,IAAoBrB,EAAM,MAAM,KAAK,CAACiB,MAAS;AACnD,YAAIA,KAAA,QAAAA,EAAM,YAAa,EAACA,KAAA,QAAAA,EAAM,OAAM,EAACA,KAAA,QAAAA,EAAM;AAAO;AAE5C,cAAA,EAAE,MAAAK,EAAS,IAAAf,EAAO,SAASU,KAAA,gBAAAA,EAAM,QAA4BA,KAAA,gBAAAA,EAAM,KAAe;AAEpF,YAAAK,MAASjB,EAAM;AACV,iBAAA;AAGT,YAAI,CAACA,EAAM,KAAK,SAASiB,CAAI;AAAG;AAE1B,cAAAC,KAAclB,EAAM,KAAK,SAASA,EAAM,KAAK,YAAY,GAAG,KAAK,IACjEmB,IAAanB,EAAM,KAAK,MAAM,GAAGkB,CAAU;AAEjD,eAAOD,MAASE;AAAA,MAAA,CACjB;AAED,MAAKH,KAELV,GAAkBU,KAAA,gBAAAA,EAAmB,UAASH,EAAUG,EAAkB,KAAK,CAAC;AAAA,IAAA,CACjF;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PageNavigation.vue.d.ts

@@ -1,12 +1,11 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
+import { PublicProps } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { RouterLinkProps } from 'vue-router';
-import { VNodeProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -34,22 +33,22 @@ declare type __VLS_WithDefaults<P, D> = {
  */
 declare type AnchorAttrs = HTMLAnchorElement['download'] | HTMLAnchorElement['hreflang'] | HTMLAnchorElement['ping'] | HTMLAnchorElement['referrerPolicy'] | HTMLAnchorElement['rel'] | HTMLAnchorElement['target'] | HTMLAnchorElement['type'];
 
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageNavigationProps>, {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageNavigationProps>, {
     activeIndex: undefined;
     modelValue: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:modelValue": (activeTab: string) => void;
     change: (activeNavIndex: number) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageNavigationProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageNavigationProps>, {
     activeIndex: undefined;
     modelValue: string;
-}>>> & {
+}>>> & Readonly<{
     onChange?: ((activeNavIndex: number) => any) | undefined;
     "onUpdate:modelValue"?: ((activeTab: string) => any) | undefined;
-}, {
+}>, {
     modelValue: string;
     activeIndex: string | number;
-}, {}>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export declare interface NavItem extends Omit<TabProps, 'value'> {

package/dist/Paginate.js

@@ -1,14 +1,14 @@
-import { defineComponent as w, useCssModule as y, computed as S, openBlock as r, createElementBlock as l, createElementVNode as c, normalizeClass as o, unref as i, createVNode as f, Fragment as g, renderList as x, createCommentVNode as p, toDisplayString as z } from "vue";
-import m from "./Icon.js";
-import { s as M } from "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as y, useCssModule as S, computed as x, openBlock as r, createElementBlock as i, createElementVNode as c, normalizeClass as o, unref as l, createVNode as f, Fragment as m, renderList as z, createCommentVNode as p, toDisplayString as M } from "vue";
+import g from "./Icon.js";
+import { s as E } from "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
+import { _ as L } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const L = {
+const $ = {
   class: "stash-paginate tw-flex tw-justify-center",
   "data-test": "stash-paginate"
-}, $ = ["onClick"], N = /* @__PURE__ */ w({
+}, N = ["onClick"], V = /* @__PURE__ */ y({
   name: "ll-paginate",
   __name: "Paginate",
   props: {
@@ -18,63 +18,63 @@ const L = {
   },
   emits: ["set-page"],
   setup(h, { emit: v }) {
-    const t = h, n = y(), s = S(() => Math.ceil(t.listLength / t.pageSize));
+    const t = h, P = v, n = S(), s = x(() => Math.ceil(t.listLength / t.pageSize));
     function u(e) {
-      v("set-page", e);
+      P("set-page", e);
     }
-    function P() {
+    function _() {
       t.currentPage < s.value && u(t.currentPage + 1);
     }
-    function _() {
+    function b() {
       t.currentPage > 1 && u(t.currentPage - 1);
     }
-    function b(e) {
+    function k(e) {
       const d = Math.abs(t.currentPage - e);
       return s.value < 10 || e === 1 || e === s.value || t.currentPage < 6 && e < 8 || s.value - t.currentPage < 5 && s.value - e < 7 || d < 3;
     }
-    function k(e) {
+    function C(e) {
       return s.value > 9 && t.currentPage > 5 && e === 2;
     }
-    function C(e) {
+    function w(e) {
       return s.value > 9 && s.value - t.currentPage > 4 && e === s.value - 1;
     }
-    return (e, d) => (r(), l("div", L, [
+    return (e, d) => (r(), i("div", $, [
       c("ul", {
-        class: o(["stash-paginate__list tw-flex", i(n).pagination]),
+        class: o(["stash-paginate__list tw-flex", l(n).pagination]),
         "data-test": "stash-paginate|list"
       }, [
         c("button", {
           "data-test": "stash-paginate|prev-page",
-          class: o([i(n).prev, { [i(n)["is-disabled"]]: e.currentPage === 1 }]),
-          onClick: _
+          class: o([l(n).prev, { [l(n)["is-disabled"]]: e.currentPage === 1 }]),
+          onClick: b
         }, [
-          f(m, {
+          f(g, {
             size: "small",
             name: "chevron-left"
           })
         ], 2),
-        (r(!0), l(g, null, x(s.value, (a) => (r(), l(g, null, [
-          k(a) ? (r(), l("button", {
+        (r(!0), i(m, null, z(s.value, (a) => (r(), i(m, null, [
+          C(a) ? (r(), i("button", {
             key: `${a}-ellipsis`,
             "data-test": "stash-paginate|first-ellipsis"
           }, " … ")) : p("", !0),
-          b(a) ? (r(), l("button", {
+          k(a) ? (r(), i("button", {
             key: a,
             "data-test": "stash-paginate|page-number",
-            class: o({ [i(n)["is-active"]]: e.currentPage === a }),
-            onClick: (B) => u(a)
-          }, z(a), 11, $)) : p("", !0),
-          C(a) ? (r(), l("button", {
+            class: o({ [l(n)["is-active"]]: e.currentPage === a }),
+            onClick: (D) => u(a)
+          }, M(a), 11, N)) : p("", !0),
+          w(a) ? (r(), i("button", {
             key: `${a}-ellipsis`,
             "data-test": "stash-paginate|last-ellipsis"
           }, " … ")) : p("", !0)
         ], 64))), 256)),
         c("button", {
           "data-test": "stash-paginate|next-page",
-          class: o([i(n).next, { [i(n)["is-disabled"]]: e.currentPage === s.value }]),
-          onClick: P
+          class: o([l(n).next, { [l(n)["is-disabled"]]: e.currentPage === s.value }]),
+          onClick: _
         }, [
-          f(m, {
+          f(g, {
             size: "small",
             class: "tw-rotate-180",
             name: "chevron-left"
@@ -83,10 +83,10 @@ const L = {
       ], 2)
     ]));
   }
-}), V = {
-  $style: M
-}, H = /* @__PURE__ */ E(N, [["__cssModules", V]]);
+}), B = {
+  $style: E
+}, J = /* @__PURE__ */ L(V, [["__cssModules", B]]);
 export {
-  H as default
+  J as default
 };
 //# sourceMappingURL=Paginate.js.map

package/dist/Paginate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the page number changes.\n       */\n      (e: 'set-page', pageNumber: number): void;\n    }>();\n\n  const classes = useCssModule();\n\n  const pages = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pages.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pages.value < 10 ||\n      page === 1 ||\n      page === pages.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pages.value - props.currentPage < 5 && pages.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pages.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pages.value > 9 && pages.value - props.currentPage > 4 && page === pages.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list tw-flex\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"[classes.prev, { [classes['is-disabled']]: currentPage === 1 }]\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <template v-for=\"page in pages\">\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          data-test=\"stash-paginate|first-ellipsis\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button v-if=\"shouldShowLastEllipsis(page)\" :key=\"`${page}-ellipsis`\" data-test=\"stash-paginate|last-ellipsis\">\n          &#x2026;\n        </button>\n      </template>\n      <button\n        data-test=\"stash-paginate|next-page\"\n        :class=\"[classes.next, { [classes['is-disabled']]: currentPage === pages }]\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:hover,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    }\n  }\n</style>\n"],"names":["classes","useCssModule","pages","computed","props","updatePage","currentPage","emit","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAsCQA,IAAUC,KAEVC,IAAQC,EAAS,MAAM,KAAK,KAAKC,EAAM,aAAaA,EAAM,QAAQ,CAAC;AAKzE,aAASC,EAAWC,GAAqB;AACvC,MAAAC,EAAK,YAAYD,CAAW;AAAA,IAC9B;AAKA,aAASE,IAAO;AACV,MAAAJ,EAAM,cAAcF,EAAM,SACjBG,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASK,IAAO;AACV,MAAAL,EAAM,cAAc,KACXC,EAAAD,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASM,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIR,EAAM,cAAcO,CAAI;AAGhD,aAAAT,EAAM,QAAQ,MACdS,MAAS,KACTA,MAAST,EAAM,SACdE,EAAM,cAAc,KAAKO,IAAO,KAChCT,EAAM,QAAQE,EAAM,cAAc,KAAKF,EAAM,QAAQS,IAAO,KAC7DC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOT,EAAM,QAAQ,KAAKE,EAAM,cAAc,KAAKO,MAAS;AAAA,IAC9D;AAMA,aAASG,EAAuBH,GAAuB;AAC9C,aAAAT,EAAM,QAAQ,KAAKA,EAAM,QAAQE,EAAM,cAAc,KAAKO,MAAST,EAAM,QAAQ;AAAA,IAC1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pages = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pages.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pages.value < 10 ||\n      page === 1 ||\n      page === pages.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pages.value - props.currentPage < 5 && pages.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pages.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pages.value > 9 && pages.value - props.currentPage > 4 && page === pages.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list tw-flex\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"[classes.prev, { [classes['is-disabled']]: currentPage === 1 }]\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <template v-for=\"page in pages\">\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          data-test=\"stash-paginate|first-ellipsis\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button v-if=\"shouldShowLastEllipsis(page)\" :key=\"`${page}-ellipsis`\" data-test=\"stash-paginate|last-ellipsis\">\n          &#x2026;\n        </button>\n      </template>\n      <button\n        data-test=\"stash-paginate|next-page\"\n        :class=\"[classes.next, { [classes['is-disabled']]: currentPage === pages }]\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:hover,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pages","computed","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBE,UAAMA,IAAQC,GAMRC,IAAOC,GAOPC,IAAUC,KAEVC,IAAQC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC;AAKzE,aAASQ,EAAWC,GAAqB;AACvC,MAAAP,EAAK,YAAYO,CAAW;AAAA,IAC9B;AAKA,aAASC,IAAO;AACV,MAAAV,EAAM,cAAcM,EAAM,SACjBE,EAAAR,EAAM,cAAc,CAAC;AAAA,IAEpC;AAKA,aAASW,IAAO;AACV,MAAAX,EAAM,cAAc,KACXQ,EAAAR,EAAM,cAAc,CAAC;AAAA,IAEpC;AAMA,aAASY,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAId,EAAM,cAAca,CAAI;AAGhD,aAAAP,EAAM,QAAQ,MACdO,MAAS,KACTA,MAASP,EAAM,SACdN,EAAM,cAAc,KAAKa,IAAO,KAChCP,EAAM,QAAQN,EAAM,cAAc,KAAKM,EAAM,QAAQO,IAAO,KAC7DC,IAAW;AAAA,IAMf;AAMA,aAASC,EAAwBF,GAAuB;AACtD,aAAOP,EAAM,QAAQ,KAAKN,EAAM,cAAc,KAAKa,MAAS;AAAA,IAC9D;AAMA,aAASG,EAAuBH,GAAuB;AAC9C,aAAAP,EAAM,QAAQ,KAAKA,EAAM,QAAQN,EAAM,cAAc,KAAKa,MAASP,EAAM,QAAQ;AAAA,IAC1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Paginate.vue.d.ts

@@ -1,10 +1,9 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PropType } from 'vue';
-import { VNodeProps } from 'vue';
+import { PublicProps } from 'vue';
 
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
@@ -27,23 +26,23 @@ declare type __VLS_WithDefaults<P, D> = {
     }> : P[K];
 };
 
-declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PaginateProps>, {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PaginateProps>, {
     currentPage: number;
     listLength: number;
     pageSize: number;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "set-page": (pageNumber: number) => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PaginateProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PaginateProps>, {
     currentPage: number;
     listLength: number;
     pageSize: number;
-}>>> & {
+}>>> & Readonly<{
     "onSet-page"?: ((pageNumber: number) => any) | undefined;
-}, {
+}>, {
     currentPage: number;
     listLength: number;
     pageSize: number;
-}, {}>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export declare interface PaginateProps {

package/dist/PlaidLink.js

@@ -1,8 +1,8 @@
-import { defineComponent as m, computed as y, ref as c, openBlock as h, createElementBlock as E, renderSlot as w } from "vue";
-import i from "@leaflink/snitch";
-import x from "./usePlaidLink.js";
+import { defineComponent as y, computed as h, ref as c, openBlock as E, createElementBlock as w, renderSlot as x } from "vue";
+import s from "@leaflink/snitch";
+import P from "./usePlaidLink.js";
 import "./useScriptTag.js";
-const L = /* @__PURE__ */ m({
+const K = /* @__PURE__ */ y({
   __name: "PlaidLink",
   props: {
     initScriptUrl: { default: "https://cdn.plaid.com/link/v2/stable/link-initialize.js" },
@@ -13,58 +13,58 @@ const L = /* @__PURE__ */ m({
     createToken: { type: Function, default: void 0 }
   },
   emits: ["error", "success", "exit", "load", "event"],
-  setup(u, { expose: d, emit: n }) {
-    const o = u, s = y(() => o.storageKey ? o.storageKey : `${window.location.host.split(".").splice(-3).join(".")}-plaid`), r = c(!1), p = (e, t) => {
-      r.value = !1, e && (i.error(new Error("Plaid: Error trying to link an account"), {
+  setup(u, { expose: d, emit: p }) {
+    const t = u, i = h(() => t.storageKey ? t.storageKey : `${window.location.host.split(".").splice(-3).join(".")}-plaid`), n = p, r = c(!1), f = (e, o) => {
+      r.value = !1, e && (s.error(new Error("Plaid: Error trying to link an account"), {
         tags: { plaid: !0 },
         extra: { PlaidError: e }
-      }), n("error", e, t)), sessionStorage.removeItem(s.value), n("exit", t);
-    }, f = (e, t) => {
-      r.value = !1, sessionStorage.removeItem(s.value), n("success", e, t);
-    }, k = (...e) => n("load", ...e), v = (...e) => n("event", ...e), a = c({
-      env: o.env,
-      onSuccess: f,
-      onEvent: v,
-      onLoad: k,
-      onExit: p
-    }), { open: g } = x(a);
+      }), n("error", e, o)), sessionStorage.removeItem(i.value), n("exit", o);
+    }, k = (e, o) => {
+      r.value = !1, sessionStorage.removeItem(i.value), n("success", e, o);
+    }, v = (...e) => n("load", ...e), m = (...e) => n("event", ...e), a = c({
+      env: t.env,
+      onSuccess: k,
+      onEvent: m,
+      onLoad: v,
+      onExit: f
+    }), { open: g } = P(a);
     async function l() {
       if (r.value !== !0) {
-        if (r.value = !0, typeof o.createToken == "function")
+        if (r.value = !0, typeof t.createToken == "function")
           try {
-            const { link_token: e } = await o.createToken();
+            const { link_token: e } = await t.createToken();
             a.value.token = e;
           } catch (e) {
-            const t = new Error("Plaid: Error trying to invoke createToken");
-            i.error(t, {
+            const o = new Error("Plaid: Error trying to invoke createToken");
+            s.error(o, {
               tags: { plaid: !0 },
               extra: { error: e }
-            }), n("error", t);
+            }), n("error", o);
           }
         else
-          o.token && (a.value.token = o.token);
+          t.token && (a.value.token = t.token);
         if (!a.value.token) {
           const e = new Error("Plaid: link token not found");
-          i.error(e, { tags: { plaid: !0 } }), n("error", e), r.value = !1;
+          s.error(e, { tags: { plaid: !0 } }), n("error", e), r.value = !1;
           return;
         }
         sessionStorage.setItem(
-          s.value,
-          JSON.stringify({ token: a.value.token, returnTo: o.returnTo, env: o.env })
+          i.value,
+          JSON.stringify({ token: a.value.token, returnTo: t.returnTo, env: t.env })
         ), g();
       }
     }
     return d({
       handleClick: l
-    }), (e, t) => (h(), E("span", {
+    }), (e, o) => (E(), w("span", {
       "data-test": "stash-plaid-link",
       onClick: l
     }, [
-      w(e.$slots, "default", { open: r.value })
+      x(e.$slots, "default", { open: r.value })
     ]));
   }
 });
 export {
-  L as default
+  K as default
 };
 //# sourceMappingURL=PlaidLink.js.map