@leaflink/stash 48.5.0 → 48.6.1

package/dist/DataViewToolbar.js

@@ -1,7 +1,7 @@
-import { defineComponent as T, inject as A, ref as M, computed as x, onBeforeMount as $, openBlock as a, createElementBlock as n, normalizeClass as j, unref as e, createElementVNode as k, createBlock as z, createCommentVNode as r, renderSlot as U, toDisplayString as W, Fragment as F, createVNode as s, withCtx as S } from "vue";
-import { t as y } from "./locale.js";
+import { defineComponent as M, inject as $, ref as j, computed as x, onBeforeMount as z, openBlock as a, createElementBlock as n, normalizeClass as U, unref as e, createElementVNode as k, createBlock as W, createCommentVNode as s, renderSlot as F, toDisplayString as J, Fragment as K, createVNode as r, withCtx as y } from "vue";
+import { t as S } from "./locale.js";
 import _ from "./Button.js";
-import J from "./Checkbox.js";
+import L from "./Checkbox.js";
 import "lodash-es/cloneDeep";
 import C from "./Icon.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
@@ -14,13 +14,13 @@ import "lodash-es/uniqueId";
 import "./Checkbox.vue_used_vue_type_style_index_0_lang.module-fa8d9c06.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const K = { class: "tw-flex tw-place-items-center" }, O = { class: "tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6" }, q = {
+const O = { class: "tw-flex tw-place-items-center" }, q = { class: "tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6" }, G = {
   key: 0,
   class: "tw-flex tw-items-center"
-}, G = {
+}, H = {
   key: 0,
   class: "tw-mr-1.5 tw-text-xs"
-}, ce = /* @__PURE__ */ T({
+}, me = /* @__PURE__ */ M({
   __name: "DataViewToolbar",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
@@ -42,73 +42,76 @@ const K = { class: "tw-flex tw-place-items-center" }, O = { class: "tw-flex tw-i
       pageSize: f,
       totalDataCount: v,
       goPrevPage: R,
-      goNextPage: D
-    } = A(B.key, B.defaults), h = M(0), b = x(() => i.value ? "none" : u.value === "table" ? "rounded-top" : o.radius), I = x(() => {
+      goNextPage: D,
+      isEmpty: I,
+      isLoading: T
+    } = $(B.key, B.defaults), b = j(0), g = x(() => i.value ? "none" : u.value === "table" ? "rounded-top" : o.radius), A = x(() => {
       const d = f.value * (l.value - 1) + 1, t = Math.min(f.value * l.value, v.value), c = v.value;
-      return y("ll.pageStats", { from: d, to: t, total: c });
+      return S("ll.pageStats", { from: d, to: t, total: c });
     });
-    function g() {
-      P("select"), h.value++;
+    function h() {
+      P("select"), b.value++;
     }
-    return $(() => {
+    return z(() => {
       p && (p.value = !0);
     }), (d, t) => (a(), n("div", {
-      class: j(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5", {
+      class: U(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5", {
         "tw-border-t tw-border-ice-200": e(i),
-        "tw-rounded": b.value === "rounded",
-        "tw-rounded-t": b.value === "rounded-top",
+        "tw-rounded": g.value === "rounded",
+        "tw-rounded-t": g.value === "rounded-top",
         "tw-mb-3": e(u) !== "table" && !e(i),
         "tw-px-0": e(m) === "compact",
         "lg:tw-px-3": e(m) === "comfortable"
       }]),
       "data-test": "stash-data-view-toolbar"
     }, [
-      k("div", K, [
-        e(N) ? (a(), z(J, {
-          key: h.value,
+      k("div", O, [
+        e(N) && !e(I) ? (a(), W(L, {
+          key: b.value,
           checked: o.allRowsSelected,
           indeterminate: o.someRowsSelected && !o.allRowsSelected,
-          title: e(y)("ll.selectAll"),
-          "onUpdate:indeterminate": g,
-          "onUpdate:checked": g
-        }, null, 8, ["checked", "indeterminate", "title"])) : r("", !0),
-        k("div", O, [
-          U(d.$slots, "default")
+          title: e(S)("ll.selectAll"),
+          disabled: e(T),
+          "onUpdate:indeterminate": h,
+          "onUpdate:checked": h
+        }, null, 8, ["checked", "indeterminate", "title", "disabled"])) : s("", !0),
+        k("div", q, [
+          F(d.$slots, "default")
         ])
       ]),
-      e(V) ? (a(), n("div", q, [
-        o.hidePageStats ? r("", !0) : (a(), n("span", G, W(I.value), 1)),
-        e(w) > 1 ? (a(), n(F, { key: 1 }, [
-          s(_, {
+      e(V) ? (a(), n("div", G, [
+        o.hidePageStats ? s("", !0) : (a(), n("span", H, J(A.value), 1)),
+        e(w) > 1 ? (a(), n(K, { key: 1 }, [
+          r(_, {
             icon: "",
             class: "tw-h-9 tw-w-9 tw-p-1.5",
             "data-test": "button|prev-page",
             disabled: e(l) === 1,
             onClick: t[0] || (t[0] = (c) => e(R)({ shouldEmit: !0 }))
           }, {
-            default: S(() => [
-              s(C, { name: "chevron-left" })
+            default: y(() => [
+              r(C, { name: "chevron-left" })
             ]),
             _: 1
           }, 8, ["disabled"]),
-          s(_, {
+          r(_, {
             icon: "",
             class: "tw-h-9 tw-w-9 tw-p-1.5",
             "data-test": "button|next-page",
             disabled: e(l) === e(w),
             onClick: t[1] || (t[1] = (c) => e(D)({ shouldEmit: !0 }))
           }, {
-            default: S(() => [
-              s(C, { name: "chevron-right" })
+            default: y(() => [
+              r(C, { name: "chevron-right" })
             ]),
             _: 1
           }, 8, ["disabled"])
-        ], 64)) : r("", !0)
-      ])) : r("", !0)
+        ], 64)) : s("", !0)
+      ])) : s("", !0)
     ], 2));
   }
 });
 export {
-  ce as default
+  me as default
 };
 //# sourceMappingURL=DataViewToolbar.js.map

package/dist/DataViewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: 'rounded',\n    someRowsSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'select'): void;\n    }>();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-top';\n    }\n\n    return props.radius;\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <div class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6\">\n        <!-- @slot default -->\n        <slot></slot>\n      </div>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5 tw-text-xs\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginationEnabled","isSelectable","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","inject","DATA_VIEW_INJECTION","checkboxKey","ref","computedRadius","computed","props","pageStats","from","to","total","t","onSelect","emit","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+CQ;AAAA,MACJ,gBAAAA;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAcC,EAAI,CAAC,GAEnBC,IAAiBC,EAA0B,MAC3CjB,EAAe,QACV,SAGLC,EAAgB,UAAU,UACrB,gBAGFiB,EAAM,MACd,GAGKC,IAAYF,EAAS,MAAM;AAC/B,YAAMG,IAAOZ,EAAS,SAASL,EAAY,QAAQ,KAAK,GAClDkB,IAAK,KAAK,IAAIb,EAAS,QAAQL,EAAY,OAAOM,EAAe,KAAK,GACtEa,IAAQb,EAAe;AAE7B,aAAOc,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;AAGD,aAASE,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODX,EAAA;AAAA,IACd;AAEA,WAAAY,EAAc,MAAM;AAClB,MAAItB,MACFA,EAAW,QAAQ;AAAA,IACrB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: 'rounded',\n    someRowsSelected: false,\n  });\n\n  const emit =\n    defineEmits<{\n      (e: 'select'): void;\n    }>();\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-top';\n    }\n\n    return props.radius;\n  });\n\n  // #region pagination\n  const pageStats = computed(() => {\n    const from = pageSize.value * (currentPage.value - 1) + 1;\n    const to = Math.min(pageSize.value * currentPage.value, totalDataCount.value);\n    const total = totalDataCount.value;\n\n    return t('ll.pageStats', { from, to, total });\n  });\n  // #endregion pagination\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-0': density === 'compact',\n      'lg:tw-px-3': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <div class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-6\">\n        <!-- @slot default -->\n        <slot></slot>\n      </div>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5 tw-text-xs\">\n        {{ pageStats }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" />\n        </Button>\n        <Button\n          icon\n          class=\"tw-h-9 tw-w-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n"],"names":["isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginationEnabled","isSelectable","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isEmpty","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","ref","computedRadius","computed","props","pageStats","from","to","total","t","onSelect","emit","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+CQ;AAAA,MACJ,gBAAAA;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IACE,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAcC,EAAI,CAAC,GAEnBC,IAAiBC,EAA0B,MAC3CnB,EAAe,QACV,SAGLC,EAAgB,UAAU,UACrB,gBAGFmB,EAAM,MACd,GAGKC,IAAYF,EAAS,MAAM;AAC/B,YAAMG,IAAOd,EAAS,SAASL,EAAY,QAAQ,KAAK,GAClDoB,IAAK,KAAK,IAAIf,EAAS,QAAQL,EAAY,OAAOM,EAAe,KAAK,GACtEe,IAAQf,EAAe;AAE7B,aAAOgB,EAAE,gBAAgB,EAAE,MAAAH,GAAM,IAAAC,GAAI,OAAAC,GAAO;AAAA,IAAA,CAC7C;AAGD,aAASE,IAAW;AAClB,MAAAC,EAAK,QAAQ,GAODX,EAAA;AAAA,IACd;AAEA,WAAAY,EAAc,MAAM;AAClB,MAAIxB,MACFA,EAAW,QAAQ;AAAA,IACrB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/PlaidLink.js

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

package/dist/PlaidLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaidLink.js","sources":["../src/components/PlaidLink/PlaidLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { Plaid } from 'plaid-link';\n  import { computed, ref } from 'vue';\n\n  export interface LinkTokenResponse {\n    link_token: string;\n    /**\n     * expiration date in ISO-8601 format\n     */\n    expiration: string;\n    request_id: string;\n  }\n\n  export interface PlaidLinkProps {\n    /**\n     * Plaid initialization script url to be used\n     */\n    initScriptUrl?: string;\n\n    /**\n     * Key to be used in session storage for OAuth flow\n     */\n    storageKey?: string;\n\n    /**\n     * Url to be used to redirect the user from the OAuth flow\n     */\n    returnTo?: string;\n\n    /**\n     * Plaid link token\n     */\n    token?: string;\n\n    /**\n     * Plaid environment to connect\n     */\n    env?: Plaid.Environment;\n\n    /**\n     * Function that returns a link token object to be used with Plaid.\n     * `link_token` takes precedence over `token` if informed.\n     */\n    createToken?: () => Promise<LinkTokenResponse>;\n  }\n\n  const props = withDefaults(defineProps<PlaidLinkProps>(), {\n    initScriptUrl: 'https://cdn.plaid.com/link/v2/stable/link-initialize.js',\n    storageKey: undefined,\n    returnTo: window.location.href,\n    env: 'sandbox',\n    token: undefined,\n    createToken: undefined,\n  });\n\n  const internalStorageKey = computed(() => {\n    if (props.storageKey) {\n      return props.storageKey;\n    }\n\n    // returns up to the last 3 parts of the host. e.g. for `subdomain.my.domain.com` it will return `my.domain.com`\n    const host = window.location.host.split('.').splice(-3).join('.');\n\n    return `${host}-plaid`;\n  });\n\n  const internalToken = ref('');\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted whenever the exit event contains errors\n       */\n      (e: 'error', error: Plaid.Error | null | Error, metadata?: Plaid.OnExitMetaData): void;\n      /**\n       * Emitted whenever the user successfully links an item\n       */\n      (e: 'success', public_token: string, metadata: Plaid.OnSuccessMetaData): void;\n      /**\n       * Emitted whenever the user exits the Link flow\n       */\n      (e: 'exit', metadata: Plaid.OnExitMetaData): void;\n      /**\n       * Emitted when the Link is ready to be opened\n       */\n      (e: 'load'): void;\n      /**\n       * Emitted at specific points during the Link flow\n       */\n      (e: 'event', eventName: Plaid.EventName, metadata: Plaid.OnEventMetaData): void;\n    }>();\n\n  const isPlaidModalOpen = ref(false);\n\n  const onExit: Plaid.OnExit = (error: Plaid.Error | null, metadata: Plaid.OnExitMetaData) => {\n    isPlaidModalOpen.value = false;\n\n    if (error) {\n      logger.error(new Error('Plaid: Error trying to link an account'), {\n        tags: { plaid: true },\n        extra: { PlaidError: error },\n      });\n      emit('error', error, metadata);\n    }\n\n    sessionStorage.removeItem(internalStorageKey.value);\n\n    emit('exit', metadata);\n  };\n\n  const onSuccess: Plaid.OnSuccess = (public_token: string, metadata: Plaid.OnSuccessMetaData) => {\n    isPlaidModalOpen.value = false;\n\n    sessionStorage.removeItem(internalStorageKey.value);\n\n    emit('success', public_token, metadata);\n  };\n\n  const onLoad: Plaid.OnLoad = (...args) => emit('load', ...args);\n\n  const onEvent: Plaid.OnEvent = (...args) => emit('event', ...args);\n\n  async function handleClick() {\n    if (isPlaidModalOpen.value === true) {\n      return;\n    }\n\n    isPlaidModalOpen.value = true;\n\n    if (typeof props.createToken === 'function') {\n      try {\n        const { link_token } = await props.createToken();\n\n        internalToken.value = link_token;\n      } catch (err) {\n        const error = new Error('Plaid: Error trying to invoke createToken');\n\n        logger.error(error, {\n          tags: { plaid: true },\n          extra: { error: err },\n        });\n\n        emit('error', error);\n      }\n    } else if (props.token) {\n      internalToken.value = props.token;\n    }\n\n    if (!internalToken.value) {\n      const error = new Error('Plaid: link token not found');\n\n      logger.error(error, { tags: { plaid: true } });\n      emit('error', error);\n\n      isPlaidModalOpen.value = false;\n\n      return;\n    }\n\n    sessionStorage.setItem(\n      internalStorageKey.value,\n      JSON.stringify({ token: internalToken.value, returnTo: props.returnTo, env: props.env }),\n    );\n\n    // Retries Plaid's script initialization if not loaded yet\n    if (!window.Plaid) {\n      await loadPlaidScript();\n    }\n\n    window.Plaid.create({\n      token: internalToken.value,\n      env: props.env,\n      onExit,\n      onSuccess,\n      onEvent,\n      onLoad,\n    }).open();\n  }\n\n  function loadPlaidScript() {\n    return new Promise<void>(function (resolve, reject) {\n      const existingScript = document.querySelector('script[src=\"' + props.initScriptUrl + '\"]');\n\n      if (existingScript) {\n        existingScript.remove();\n      }\n\n      const el = document.createElement('script');\n\n      el.type = 'text/javascript';\n      el.async = true;\n      el.src = props.initScriptUrl;\n      el.addEventListener('load', () => resolve());\n      el.addEventListener('error', reject);\n      el.addEventListener('abort', reject);\n      document.head.appendChild(el);\n    });\n  }\n\n  loadPlaidScript();\n\n  defineExpose({\n    handleClick,\n  });\n</script>\n\n<template>\n  <span data-test=\"stash-plaid-link\" @click=\"handleClick\">\n    <!-- @slot Default slot to trigger Plaid's modal -->\n    <slot :open=\"isPlaidModalOpen\"></slot>\n  </span>\n</template>\n"],"names":["internalStorageKey","computed","props","internalToken","ref","isPlaidModalOpen","onExit","error","metadata","logger","emit","onSuccess","public_token","onLoad","args","onEvent","handleClick","link_token","err","loadPlaidScript","resolve","reject","existingScript","el","__expose"],"mappings":";;;;;;;;;;;;;;iBAwDQA,IAAqBC,EAAS,MAC9BC,EAAM,aACDA,EAAM,aAMR,GAFM,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,CAElD,QACf,GAEKC,IAAgBC,EAAI,EAAE,GA0BtBC,IAAmBD,EAAI,EAAK,GAE5BE,IAAuB,CAACC,GAA2BC,MAAmC;AAC1F,MAAAH,EAAiB,QAAQ,IAErBE,MACFE,EAAO,MAAM,IAAI,MAAM,wCAAwC,GAAG;AAAA,QAChE,MAAM,EAAE,OAAO,GAAK;AAAA,QACpB,OAAO,EAAE,YAAYF,EAAM;AAAA,MAAA,CAC5B,GACIG,EAAA,SAASH,GAAOC,CAAQ,IAGhB,eAAA,WAAWR,EAAmB,KAAK,GAElDU,EAAK,QAAQF,CAAQ;AAAA,IAAA,GAGjBG,IAA6B,CAACC,GAAsBJ,MAAsC;AAC9F,MAAAH,EAAiB,QAAQ,IAEV,eAAA,WAAWL,EAAmB,KAAK,GAE7CU,EAAA,WAAWE,GAAcJ,CAAQ;AAAA,IAAA,GAGlCK,IAAuB,IAAIC,MAASJ,EAAK,QAAQ,GAAGI,CAAI,GAExDC,IAAyB,IAAID,MAASJ,EAAK,SAAS,GAAGI,CAAI;AAEjE,mBAAeE,IAAc;AACvB,UAAAX,EAAiB,UAAU,IAM3B;AAAA,YAFJA,EAAiB,QAAQ,IAErB,OAAOH,EAAM,eAAgB;AAC3B,cAAA;AACF,kBAAM,EAAE,YAAAe,EAAe,IAAA,MAAMf,EAAM,YAAY;AAE/C,YAAAC,EAAc,QAAQc;AAAA,mBACfC,GAAK;AACN,kBAAAX,IAAQ,IAAI,MAAM,2CAA2C;AAEnE,YAAAE,EAAO,MAAMF,GAAO;AAAA,cAClB,MAAM,EAAE,OAAO,GAAK;AAAA,cACpB,OAAO,EAAE,OAAOW,EAAI;AAAA,YAAA,CACrB,GAEDR,EAAK,SAASH,CAAK;AAAA,UACrB;AAAA;AACF,UAAWL,EAAM,UACfC,EAAc,QAAQD,EAAM;AAG1B,YAAA,CAACC,EAAc,OAAO;AAClB,gBAAAI,IAAQ,IAAI,MAAM,6BAA6B;AAE9C,UAAAE,EAAA,MAAMF,GAAO,EAAE,MAAM,EAAE,OAAO,MAAQ,GAC7CG,EAAK,SAASH,CAAK,GAEnBF,EAAiB,QAAQ;AAEzB;AAAA,QACF;AAEe,uBAAA;AAAA,UACbL,EAAmB;AAAA,UACnB,KAAK,UAAU,EAAE,OAAOG,EAAc,OAAO,UAAUD,EAAM,UAAU,KAAKA,EAAM,IAAA,CAAK;AAAA,QAAA,GAIpF,OAAO,SACV,MAAMiB,EAAgB,GAGxB,OAAO,MAAM,OAAO;AAAA,UAClB,OAAOhB,EAAc;AAAA,UACrB,KAAKD,EAAM;AAAA,UACX,QAAAI;AAAA,UACA,WAAAK;AAAA,UACA,SAAAI;AAAA,UACA,QAAAF;AAAA,QAAA,CACD,EAAE,KAAK;AAAA;AAAA,IACV;AAEA,aAASM,IAAkB;AACzB,aAAO,IAAI,QAAc,SAAUC,GAASC,GAAQ;AAClD,cAAMC,IAAiB,SAAS,cAAc,iBAAiBpB,EAAM,gBAAgB,IAAI;AAEzF,QAAIoB,KACFA,EAAe,OAAO;AAGlB,cAAAC,IAAK,SAAS,cAAc,QAAQ;AAE1C,QAAAA,EAAG,OAAO,mBACVA,EAAG,QAAQ,IACXA,EAAG,MAAMrB,EAAM,eACfqB,EAAG,iBAAiB,QAAQ,MAAMH,EAAS,CAAA,GACxCG,EAAA,iBAAiB,SAASF,CAAM,GAChCE,EAAA,iBAAiB,SAASF,CAAM,GAC1B,SAAA,KAAK,YAAYE,CAAE;AAAA,MAAA,CAC7B;AAAA,IACH;AAEgB,WAAAJ,KAEHK,EAAA;AAAA,MACX,aAAAR;AAAA,IAAA,CACD;;;;;;;;"}
+{"version":3,"file":"PlaidLink.js","sources":["../src/components/PlaidLink/PlaidLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, ref } from 'vue';\n\n  import { LinkTokenResponse, Plaid } from '../../../types/plaid';\n  import usePlaidLink from '../../composables/usePlaidLink/usePlaidLink';\n\n  export interface PlaidLinkProps {\n    /**\n     * @deprecated Plaid does not support other URLs for loading its SDK\n     * Plaid initialization script url to be used\n     */\n    initScriptUrl?: string;\n\n    /**\n     * Key to be used in session storage for OAuth flow\n     */\n    storageKey?: string;\n\n    /**\n     * Url to be used to redirect the user from the OAuth flow\n     */\n    returnTo?: string;\n\n    /**\n     * Plaid link token\n     */\n    token?: string;\n\n    /**\n     * Plaid environment to connect\n     */\n    env?: Plaid.Environment;\n\n    /**\n     * Function that returns a link token object to be used with Plaid.\n     * `link_token` takes precedence over `token` if informed.\n     */\n    createToken?: () => Promise<LinkTokenResponse>;\n  }\n\n  const props = withDefaults(defineProps<PlaidLinkProps>(), {\n    initScriptUrl: 'https://cdn.plaid.com/link/v2/stable/link-initialize.js',\n    storageKey: undefined,\n    returnTo: window.location.href,\n    env: 'sandbox',\n    token: undefined,\n    createToken: undefined,\n  });\n\n  const internalStorageKey = computed(() => {\n    if (props.storageKey) {\n      return props.storageKey;\n    }\n\n    // returns up to the last 3 parts of the host. e.g. for `subdomain.my.domain.com` it will return `my.domain.com`\n    const host = window.location.host.split('.').splice(-3).join('.');\n\n    return `${host}-plaid`;\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted whenever the exit event contains errors\n       */\n      (e: 'error', error: Plaid.Error | null | Error, metadata?: Plaid.OnExitMetaData): void;\n      /**\n       * Emitted whenever the user successfully links an item\n       */\n      (e: 'success', public_token: string, metadata: Plaid.OnSuccessMetaData): void;\n      /**\n       * Emitted whenever the user exits the Link flow\n       */\n      (e: 'exit', metadata: Plaid.OnExitMetaData): void;\n      /**\n       * Emitted when the Link is ready to be opened\n       */\n      (e: 'load'): void;\n      /**\n       * Emitted at specific points during the Link flow\n       */\n      (e: 'event', eventName: Plaid.EventName, metadata: Plaid.OnEventMetaData): void;\n    }>();\n\n  const isPlaidModalOpen = ref(false);\n\n  const onExit: Plaid.OnExit = (error: Plaid.Error | null, metadata: Plaid.OnExitMetaData) => {\n    isPlaidModalOpen.value = false;\n\n    if (error) {\n      logger.error(new Error('Plaid: Error trying to link an account'), {\n        tags: { plaid: true },\n        extra: { PlaidError: error },\n      });\n      emit('error', error, metadata);\n    }\n\n    sessionStorage.removeItem(internalStorageKey.value);\n\n    emit('exit', metadata);\n  };\n\n  const onSuccess: Plaid.OnSuccess = (public_token: string, metadata: Plaid.OnSuccessMetaData) => {\n    isPlaidModalOpen.value = false;\n\n    sessionStorage.removeItem(internalStorageKey.value);\n\n    emit('success', public_token, metadata);\n  };\n\n  const onLoad: Plaid.OnLoad = (...args) => emit('load', ...args);\n\n  const onEvent: Plaid.OnEvent = (...args) => emit('event', ...args);\n\n  const plaidLinkOptions = ref<Plaid.CreateConfig>({\n    env: props.env,\n    onSuccess,\n    onEvent,\n    onLoad,\n    onExit,\n  });\n\n  const { open: openPlaidLink } = usePlaidLink(plaidLinkOptions);\n\n  async function handleClick() {\n    if (isPlaidModalOpen.value === true) {\n      return;\n    }\n\n    isPlaidModalOpen.value = true;\n\n    if (typeof props.createToken === 'function') {\n      try {\n        const { link_token } = await props.createToken();\n\n        plaidLinkOptions.value.token = link_token;\n      } catch (err) {\n        const error = new Error('Plaid: Error trying to invoke createToken');\n\n        logger.error(error, {\n          tags: { plaid: true },\n          extra: { error: err },\n        });\n\n        emit('error', error);\n      }\n    } else if (props.token) {\n      plaidLinkOptions.value.token = props.token;\n    }\n\n    if (!plaidLinkOptions.value.token) {\n      const error = new Error('Plaid: link token not found');\n\n      logger.error(error, { tags: { plaid: true } });\n      emit('error', error);\n\n      isPlaidModalOpen.value = false;\n\n      return;\n    }\n\n    sessionStorage.setItem(\n      internalStorageKey.value,\n      JSON.stringify({ token: plaidLinkOptions.value.token, returnTo: props.returnTo, env: props.env }),\n    );\n\n    openPlaidLink();\n  }\n\n  defineExpose({\n    handleClick,\n  });\n</script>\n\n<template>\n  <span data-test=\"stash-plaid-link\" @click=\"handleClick\">\n    <!-- @slot Default slot to trigger Plaid's modal -->\n    <slot :open=\"isPlaidModalOpen\"></slot>\n  </span>\n</template>\n"],"names":["internalStorageKey","computed","props","isPlaidModalOpen","ref","onExit","error","metadata","logger","emit","onSuccess","public_token","onLoad","args","onEvent","plaidLinkOptions","openPlaidLink","usePlaidLink","handleClick","link_token","err","__expose"],"mappings":";;;;;;;;;;;;;;;;iBAkDQA,IAAqBC,EAAS,MAC9BC,EAAM,aACDA,EAAM,aAMR,GAFM,OAAO,SAAS,KAAK,MAAM,GAAG,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,CAElD,QACf,GA0BKC,IAAmBC,EAAI,EAAK,GAE5BC,IAAuB,CAACC,GAA2BC,MAAmC;AAC1F,MAAAJ,EAAiB,QAAQ,IAErBG,MACFE,EAAO,MAAM,IAAI,MAAM,wCAAwC,GAAG;AAAA,QAChE,MAAM,EAAE,OAAO,GAAK;AAAA,QACpB,OAAO,EAAE,YAAYF,EAAM;AAAA,MAAA,CAC5B,GACIG,EAAA,SAASH,GAAOC,CAAQ,IAGhB,eAAA,WAAWP,EAAmB,KAAK,GAElDS,EAAK,QAAQF,CAAQ;AAAA,IAAA,GAGjBG,IAA6B,CAACC,GAAsBJ,MAAsC;AAC9F,MAAAJ,EAAiB,QAAQ,IAEV,eAAA,WAAWH,EAAmB,KAAK,GAE7CS,EAAA,WAAWE,GAAcJ,CAAQ;AAAA,IAAA,GAGlCK,IAAuB,IAAIC,MAASJ,EAAK,QAAQ,GAAGI,CAAI,GAExDC,IAAyB,IAAID,MAASJ,EAAK,SAAS,GAAGI,CAAI,GAE3DE,IAAmBX,EAAwB;AAAA,MAC/C,KAAKF,EAAM;AAAA,MACX,WAAAQ;AAAA,MACA,SAAAI;AAAA,MACA,QAAAF;AAAA,MACA,QAAAP;AAAA,IAAA,CACD,GAEK,EAAE,MAAMW,EAAc,IAAIC,EAAaF,CAAgB;AAE7D,mBAAeG,IAAc;AACvB,UAAAf,EAAiB,UAAU,IAM3B;AAAA,YAFJA,EAAiB,QAAQ,IAErB,OAAOD,EAAM,eAAgB;AAC3B,cAAA;AACF,kBAAM,EAAE,YAAAiB,EAAe,IAAA,MAAMjB,EAAM,YAAY;AAE/C,YAAAa,EAAiB,MAAM,QAAQI;AAAA,mBACxBC,GAAK;AACN,kBAAAd,IAAQ,IAAI,MAAM,2CAA2C;AAEnE,YAAAE,EAAO,MAAMF,GAAO;AAAA,cAClB,MAAM,EAAE,OAAO,GAAK;AAAA,cACpB,OAAO,EAAE,OAAOc,EAAI;AAAA,YAAA,CACrB,GAEDX,EAAK,SAASH,CAAK;AAAA,UACrB;AAAA;AACF,UAAWJ,EAAM,UACEa,EAAA,MAAM,QAAQb,EAAM;AAGnC,YAAA,CAACa,EAAiB,MAAM,OAAO;AAC3B,gBAAAT,IAAQ,IAAI,MAAM,6BAA6B;AAE9C,UAAAE,EAAA,MAAMF,GAAO,EAAE,MAAM,EAAE,OAAO,MAAQ,GAC7CG,EAAK,SAASH,CAAK,GAEnBH,EAAiB,QAAQ;AAEzB;AAAA,QACF;AAEe,uBAAA;AAAA,UACbH,EAAmB;AAAA,UACnB,KAAK,UAAU,EAAE,OAAOe,EAAiB,MAAM,OAAO,UAAUb,EAAM,UAAU,KAAKA,EAAM,KAAK;AAAA,QAAA,GAGpFc;;IAChB;AAEa,WAAAK,EAAA;AAAA,MACX,aAAAH;AAAA,IAAA,CACD;;;;;;;;"}

package/dist/PlaidLink.vue.d.ts

@@ -59,9 +59,9 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
 }>>> & {
     onLoad?: (() => any) | undefined;
     onError?: ((error: Error | Plaid.Error | null, metadata?: Plaid.OnExitMetaData | undefined) => any) | undefined;
-    onSuccess?: ((public_token: string, metadata: Plaid.OnSuccessMetaData) => any) | undefined;
     onEvent?: ((eventName: Plaid.EventName, metadata: Plaid.OnEventMetaData) => any) | undefined;
     onExit?: ((metadata: Plaid.OnExitMetaData) => any) | undefined;
+    onSuccess?: ((public_token: string, metadata: Plaid.OnSuccessMetaData) => any) | undefined;
 }, {
     initScriptUrl: string;
     storageKey: string;
@@ -78,17 +78,15 @@ export default _default;
 
 declare function handleClick(): Promise<void>;
 
-export declare interface LinkTokenResponse {
+declare interface LinkTokenResponse {
     link_token: string;
-    /**
-     * expiration date in ISO-8601 format
-     */
     expiration: string;
     request_id: string;
 }
 
 export declare interface PlaidLinkProps {
     /**
+     * @deprecated Plaid does not support other URLs for loading its SDK
      * Plaid initialization script url to be used
      */
     initScriptUrl?: string;

package/dist/Table.js

@@ -1,16 +1,16 @@
-import { defineComponent as C, inject as v, computed as o, provide as L, watchEffect as H, openBlock as u, createElementBlock as N, normalizeClass as s, unref as m, normalizeStyle as D, createElementVNode as p, renderSlot as c, createBlock as h, withCtx as r, createVNode as i } from "vue";
+import { defineComponent as C, inject as g, computed as o, provide as H, watchEffect as N, openBlock as p, createElementBlock as L, normalizeClass as i, unref as c, normalizeStyle as I, createElementVNode as f, renderSlot as y, createBlock as k, withCtx as d, createVNode as n } from "vue";
 import "lodash-es/cloneDeep";
-import { M as g } from "./Module.keys-2cc7d830.js";
+import { M as E } from "./Module.keys-2cc7d830.js";
 import "lodash-es/uniqueId";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "./Paginate.vue_used_vue_type_style_index_0_lang.module-18343da7.js";
-import { D as E } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
-import V from "./EmptyState.js";
-import I from "./Loading.js";
-import k from "./TableCell.js";
-import S from "./TableRow.js";
-import { T as A } from "./Table.keys-cf93df19.js";
-import { S as O } from "./misc-76697f61.js";
+import { D as S } from "./DataView.vue_used_vue_type_style_index_0_lang.module-5c180dba.js";
+import A from "./EmptyState.js";
+import D from "./Loading.js";
+import x from "./TableCell.js";
+import _ from "./TableRow.js";
+import { T as O } from "./Table.keys-cf93df19.js";
+import { S as V } from "./misc-76697f61.js";
 import "./locale.js";
 import "lodash-es/get";
 import "./Illustration.vue_vue_type_script_setup_true_lang-4b8944da.js";
@@ -44,74 +44,76 @@ const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
   },
   setup(e) {
     const t = e, {
-      density: x,
-      variant: f,
-      isEmpty: _,
-      isLoading: T,
-      isSelectable: y
-    } = v(E.key, E.defaults), { variant: d } = v(g.key, g.defaults), w = o(() => (d == null ? void 0 : d.value) === "table" || f.value === "table" ? "rounded-bottom" : t.radius), l = o(() => t.stickyHeader ? "scroll" : t.layout), b = o(() => {
-      var a, n;
+      density: T,
+      variant: w,
+      isEmpty: r,
+      isLoading: s,
+      isSelectable: b
+    } = g(S.key, S.defaults), { variant: u } = g(E.key, E.defaults), v = o(() => (u == null ? void 0 : u.value) === "table" || w.value === "table" ? "rounded-bottom" : t.radius), l = o(() => t.stickyHeader ? "scroll" : t.layout), h = o(() => {
+      var a, m;
       return !!((a = t.stickyHeader) != null && a.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table
-      ((n = t.stickyHeader) == null ? void 0 : n.listLength) > 3);
+      ((m = t.stickyHeader) == null ? void 0 : m.listLength) > 3);
     }), B = o(() => {
       var a;
       return {
-        maxHeight: b.value ? (a = t.stickyHeader) == null ? void 0 : a.maxHeight : ""
+        maxHeight: h.value ? (a = t.stickyHeader) == null ? void 0 : a.maxHeight : ""
       };
     });
-    return L(A.key, {
-      density: o(() => t.density || x.value || O.Comfortable),
+    return H(O.key, {
+      density: o(() => t.density || T.value || V.Comfortable),
       hasCustomExpandToggle: o(() => t.hasCustomExpandToggle),
       hasActions: o(() => t.hasActions),
       isExpandable: o(() => t.isExpandable),
-      isSelectable: o(() => t.isSelectable && !t.isLoading && !t.isEmpty),
+      isSelectable: o(
+        () => t.isSelectable && !t.isLoading && !(s != null && s.value) && !t.isEmpty && !(r != null && r.value)
+      ),
       layout: l
-    }), H(() => {
-      y && (y.value = t.isSelectable);
-    }), (a, n) => (u(), N("div", {
-      class: s(["stash-table tw-relative", [
-        { "tw-rounded": w.value === "rounded" },
-        { "tw-rounded-b": w.value === "rounded-bottom" },
-        { "tw-border-t tw-border-ice-200": m(f) === "table" },
+    }), N(() => {
+      b && (b.value = t.isSelectable);
+    }), (a, m) => (p(), L("div", {
+      class: i(["stash-table tw-relative", [
+        { "tw-rounded": v.value === "rounded" },
+        { "tw-rounded-b": v.value === "rounded-bottom" },
+        { "tw-border-t tw-border-ice-200": c(w) === "table" },
         { "tw-overflow-auto tw-shadow": l.value === "scroll" },
         { "tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow": l.value === "stack" },
-        { "tw-min-h-[300px]": b.value && !t.isLoading }
+        { "tw-min-h-[300px]": h.value && !t.isLoading }
         // prevent the table from collapsing on small screen heights when the max-height is dynamic
       ]]),
       "data-test": "stash-table",
-      style: D(B.value)
+      style: I(B.value)
     }, [
-      p("table", z, [
-        p("thead", {
-          class: s(["tw-border-b tw-border-ice-200", {
+      f("table", z, [
+        f("thead", {
+          class: i(["tw-border-b tw-border-ice-200", {
             "tw-hidden lg:tw-table-header-group": l.value === "stack"
           }])
         }, [
-          c(a.$slots, "head")
+          y(a.$slots, "head")
         ], 2),
-        p("tbody", null, [
-          t.isLoading || m(T) ? (u(), h(S, { key: 0 }, {
-            default: r(() => [
-              i(k, {
+        f("tbody", null, [
+          t.isLoading || c(s) ? (p(), k(_, { key: 0 }, {
+            default: d(() => [
+              n(x, {
                 colspan: "100%",
-                class: s({ "tw-col-span-12": l.value === "stack" })
+                class: i({ "tw-col-span-12": l.value === "stack" })
               }, {
-                default: r(() => [
-                  i(I)
+                default: d(() => [
+                  n(D)
                 ]),
                 _: 1
               }, 8, ["class"])
             ]),
             _: 1
-          })) : t.isEmpty || m(_) ? (u(), h(S, { key: 1 }, {
-            default: r(() => [
-              i(k, {
+          })) : t.isEmpty || c(r) ? (p(), k(_, { key: 1 }, {
+            default: d(() => [
+              n(x, {
                 colspan: "100%",
-                class: s({ "tw-col-span-12": l.value === "stack" })
+                class: i({ "tw-col-span-12": l.value === "stack" })
               }, {
-                default: r(() => [
-                  c(a.$slots, "empty", {}, () => [
-                    i(V, {
+                default: d(() => [
+                  y(a.$slots, "empty", {}, () => [
+                    n(A, {
                       class: "tw-w-full tw-bg-white",
                       text: t.emptyStateText
                     }, null, 8, ["text"])
@@ -121,7 +123,7 @@ const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
               }, 8, ["class"])
             ]),
             _: 3
-          })) : c(a.$slots, "body", { key: 2 })
+          })) : y(a.$slots, "body", { key: 2 })
         ])
       ])
     ], 6));
@@ -129,7 +131,7 @@ const z = { class: "tw-relative tw-min-w-full tw-max-w-initial tw-border-separat
 });
 export {
   J as Layout,
-  A as TABLE_INJECTION,
+  O as TABLE_INJECTION,
   $ as TableRadius,
   ft as default
 };

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(() => props.isSelectable && !props.isLoading && !props.isEmpty),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n      { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCkFJ;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFU,EAAM,MACd,GAEKC,IAAiBF,EAAkB,MACnCC,EAAM,eACD,WAGFA,EAAM,MACd,GAEKE,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAH,EAAM,iBAAN,QAAAG,EAAoB;AAAA,QACpBC,IAAAJ,EAAM,iBAAN,gBAAAI,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAH,EAAM,iBAAN,gBAAAG,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMC,EAAM,WAAWX,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMC,EAAM,qBAAqB;AAAA,MACjE,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,cAAcD,EAAS,MAAMC,EAAM,YAAY;AAAA,MAC/C,cAAcD,EAAS,MAAMC,EAAM,gBAAgB,CAACA,EAAM,aAAa,CAACA,EAAM,OAAO;AAAA,MACrF,QAAQC;AAAA,IAAA,CACT,GAEDQ,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQO,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/Table.types.ts","../src/components/Table/Table.vue"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nimport { SpacingDensities } from '../../../types/misc';\n\nexport enum Layout {\n  Scroll = 'scroll',\n  Stack = 'stack',\n}\n\nexport type Layouts = `${Layout}`;\n\nexport enum TableRadius {\n  None = 'none',\n  Rounded = 'rounded',\n  RoundedBottom = 'rounded-bottom',\n}\n\nexport type TableRadiuses = `${TableRadius}`;\n\n/**\n * Properties and utilities provided to children of a Table instance\n */\nexport interface TableInjection {\n  /**\n   * Controls the Table's padding; the default value is \"comfortable\". On small screens, the density will always be \"compact\".\n   */\n  density: ComputedRef<SpacingDensities>;\n\n  /**\n   * Styles the last column for \"row actions\"\n   */\n  hasActions: ComputedRef<boolean>;\n\n  /**\n   * If true, hides the default expansion toggle column\n   */\n  hasCustomExpandToggle: ComputedRef<boolean>;\n\n  /**\n   * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n   */\n  isExpandable: ComputedRef<boolean>;\n\n  /**\n   * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n   */\n  isSelectable: ComputedRef<boolean>;\n\n  /**\n   * Sets the table layout; the default value is \"scroll\".\n   */\n  layout: ComputedRef<Layouts>;\n}\n","<script lang=\"ts\">\n  import { SpacingDensities, SpacingDensity } from '../../../types/misc';\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { Layouts, TableRadiuses } from './Table.types';\n\n  export * from './Table.keys';\n  export * from './Table.types';\n\n  export interface TableProps {\n    /**\n     * Controls the Table's padding; the default value is \"comfortable\". On small screens, \"compact\" density is applied regardless of this prop's value.\n     */\n    density?: SpacingDensities;\n\n    /**\n     * Sets the text for the empty state; the default value is \"No Results\".\n     */\n    emptyStateText?: string;\n\n    /**\n     * Styles the last column for \"row actions\"\n     */\n    hasActions?: boolean;\n\n    /**\n     * If true, hides the default expansion toggle column\n     */\n    hasCustomExpandToggle?: boolean;\n\n    /**\n     * Shows the empty state\n     */\n    isEmpty?: boolean;\n\n    /**\n     * Shows the loading state\n     */\n    isLoading?: boolean;\n\n    /**\n     * Adds a toggle column for row expansion. This is primarily needed for ensuring the corresponding empty TableHeaderRow is included.\n     */\n    isExpandable?: boolean;\n\n    /**\n     * Adds a checkbox column for selecting rows; intended for use with the `useSelection` composable.\n     */\n    isSelectable?: boolean;\n\n    /**\n     * Sets the table layout; the default value is \"scroll\".\n     */\n    layout?: Layouts;\n\n    /**\n     * Controls the corners of the table with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: TableRadiuses;\n\n    /**\n     * Allows the table head to be sticky when scrolling inside the table body\n     */\n    stickyHeader?: {\n      listLength: number;\n      maxHeight: string;\n    };\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject, provide, watchEffect } from 'vue';\n\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import EmptyState from '../EmptyState/EmptyState.vue';\n  import Loading from '../Loading/Loading.vue';\n  import TableCell from '../TableCell/TableCell.vue';\n  import TableRow from '../TableRow/TableRow.vue';\n  import { TABLE_INJECTION } from './Table.keys';\n\n  const props = withDefaults(defineProps<TableProps>(), {\n    density: undefined,\n    emptyStateText: '',\n    hasActions: false,\n    hasCustomExpandToggle: false,\n    isEmpty: false,\n    isLoading: false,\n    isExpandable: false,\n    isSelectable: false,\n    layout: 'scroll',\n    radius: 'rounded',\n    stickyHeader: undefined,\n  });\n\n  const {\n    density: dataViewDensity,\n    variant: dataViewVariant,\n    isEmpty: isDataViewEmpty,\n    isLoading: isDataViewLoading,\n    isSelectable: isDataViewSelectable,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const { variant: moduleVariant } = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n\n  const computedRadius = computed<TableRadiuses>(() => {\n    // Will work for tables when rendered inside of a Module with OR without a DataView.\n    if (moduleVariant?.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      return 'rounded-bottom';\n    }\n\n    return props.radius;\n  });\n\n  const computedLayout = computed<Layouts>(() => {\n    if (props.stickyHeader) {\n      return 'scroll';\n    }\n\n    return props.layout;\n  });\n\n  const isStickyHeaderEnabled = computed<boolean>(() => {\n    return !!(\n      (\n        props.stickyHeader?.maxHeight && // table can't scroll without a max height; sticky headers only needed for a scrollable table\n        props.stickyHeader?.listLength > 3\n      ) // scrollable table and sticky headers not needed when list is small\n    );\n  });\n\n  const rootStyle = computed(() => ({\n    maxHeight: isStickyHeaderEnabled.value ? props.stickyHeader?.maxHeight : '',\n  }));\n\n  provide(TABLE_INJECTION.key, {\n    density: computed(() => props.density || dataViewDensity.value || SpacingDensity.Comfortable),\n    hasCustomExpandToggle: computed(() => props.hasCustomExpandToggle),\n    hasActions: computed(() => props.hasActions),\n    isExpandable: computed(() => props.isExpandable),\n    isSelectable: computed(\n      () =>\n        props.isSelectable &&\n        !props.isLoading &&\n        !isDataViewLoading?.value &&\n        !props.isEmpty &&\n        !isDataViewEmpty?.value,\n    ),\n    layout: computedLayout,\n  });\n\n  watchEffect(() => {\n    // Table can be both casted within a DataView or standalone. useSelection is still possible to be used on both cases,\n    // making it important to have Table to control selection props.\n    // To avoid breaking changes and developer experience, a DataView injection is passed down and updated whenever it exists,\n    // and move the information up into DataView, that sometimes aren't used.\n    if (isDataViewSelectable) {\n      isDataViewSelectable.value = props.isSelectable;\n    }\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-table tw-relative\"\n    :class=\"[\n      { 'tw-rounded': computedRadius === 'rounded' },\n      { 'tw-rounded-b': computedRadius === 'rounded-bottom' },\n      { 'tw-border-t tw-border-ice-200': dataViewVariant === 'table' },\n      { 'tw-overflow-auto tw-shadow': computedLayout === 'scroll' },\n      { 'tw-overflow-visble lg:tw-overflow-auto lg:tw-shadow': computedLayout === 'stack' },\n      { 'tw-min-h-[300px]': isStickyHeaderEnabled && !props.isLoading }, // prevent the table from collapsing on small screen heights when the max-height is dynamic\n    ]\"\n    data-test=\"stash-table\"\n    :style=\"rootStyle\"\n  >\n    <table class=\"tw-relative tw-min-w-full tw-max-w-initial tw-border-separate\">\n      <thead\n        class=\"tw-border-b tw-border-ice-200\"\n        :class=\"{\n          'tw-hidden lg:tw-table-header-group': computedLayout === 'stack',\n        }\"\n      >\n        <!-- @slot head -->\n        <slot name=\"head\"> </slot>\n      </thead>\n      <tbody>\n        <!-- \n          tw-col-span-12 makes the td span all columns only when layout === 'stack' and the viewport is below  lg (when table elements are using display: grid ).\n          The colspan attr does the same in all other cases when the table elements are using their native table styles.\n          These are necessary in order to properly horizontally center Loading, and EmptyState \n        -->\n        <TableRow v-if=\"props.isLoading || isDataViewLoading\">\n          <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n            <Loading />\n          </TableCell>\n        </TableRow>\n        <!-- @slot empty -->\n        <template v-else-if=\"props.isEmpty || isDataViewEmpty\">\n          <TableRow>\n            <TableCell colspan=\"100%\" :class=\"{ 'tw-col-span-12': computedLayout === 'stack' }\">\n              <slot name=\"empty\">\n                <EmptyState class=\"tw-w-full tw-bg-white\" :text=\"props.emptyStateText\" />\n              </slot>\n            </TableCell>\n          </TableRow>\n        </template>\n        <!-- @slot body -->\n        <slot v-else name=\"body\"></slot>\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"names":["Layout","TableRadius","dataViewDensity","dataViewVariant","isDataViewEmpty","isDataViewLoading","isDataViewSelectable","inject","DATA_VIEW_INJECTION","moduleVariant","MODULE_INJECTION","computedRadius","computed","props","computedLayout","isStickyHeaderEnabled","_a","_b","rootStyle","provide","TABLE_INJECTION","SpacingDensity","watchEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,gBAAgB,kBAHNA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;iBCkFJ;AAAA,MACJ,SAASC;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,cAAcC;AAAA,IACZ,IAAAC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1D,EAAE,SAASC,MAAkBF,EAAOG,EAAiB,KAAKA,EAAiB,QAAQ,GAEnFC,IAAiBC,EAAwB,OAEzCH,KAAA,gBAAAA,EAAe,WAAU,WAIzBN,EAAgB,UAAU,UACrB,mBAGFU,EAAM,MACd,GAEKC,IAAiBF,EAAkB,MACnCC,EAAM,eACD,WAGFA,EAAM,MACd,GAEKE,IAAwBH,EAAkB,MAAM;;AAC7C,aAAA,CAAC,GAEJI,IAAAH,EAAM,iBAAN,QAAAG,EAAoB;AAAA,QACpBC,IAAAJ,EAAM,iBAAN,gBAAAI,EAAoB,cAAa;AAAA,IAAA,CAGtC,GAEKC,IAAYN,EAAS,MAAO;;AAAA;AAAA,QAChC,WAAWG,EAAsB,SAAQC,IAAAH,EAAM,iBAAN,gBAAAG,EAAoB,YAAY;AAAA,MACzE;AAAA,KAAA;AAEF,WAAAG,EAAQC,EAAgB,KAAK;AAAA,MAC3B,SAASR,EAAS,MAAMC,EAAM,WAAWX,EAAgB,SAASmB,EAAe,WAAW;AAAA,MAC5F,uBAAuBT,EAAS,MAAMC,EAAM,qBAAqB;AAAA,MACjE,YAAYD,EAAS,MAAMC,EAAM,UAAU;AAAA,MAC3C,cAAcD,EAAS,MAAMC,EAAM,YAAY;AAAA,MAC/C,cAAcD;AAAA,QACZ,MACEC,EAAM,gBACN,CAACA,EAAM,aACP,EAACR,KAAA,QAAAA,EAAmB,UACpB,CAACQ,EAAM,WACP,EAACT,KAAA,QAAAA,EAAiB;AAAA,MACtB;AAAA,MACA,QAAQU;AAAA,IAAA,CACT,GAEDQ,EAAY,MAAM;AAKhB,MAAIhB,MACFA,EAAqB,QAAQO,EAAM;AAAA,IACrC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -80,6 +80,12 @@ export declare interface I18nPlugin {
     t: (key: string, value: string) => string;
 }
 
+export declare interface LinkTokenResponse {
+    link_token: string;
+    expiration: string;
+    request_id: string;
+}
+
 declare interface MenusPluginOptions {
     mountNodeClass?: string;
     mountNodeId?: string;
@@ -402,4 +408,7 @@ export declare interface UnifiedApiPaginationParams {
     pageSize?: number;
 }
 
+
+export * from "plaid-link";
+
 export { }

package/dist/usePlaidLink.d.ts

@@ -0,0 +1,19 @@
+import { ComputedRef } from 'vue';
+import { MaybeRef } from 'vue';
+import { Plaid } from 'plaid-link';
+import { Ref } from 'vue';
+
+declare function usePlaidLink(options: MaybeRef<Plaid.CreateConfig>): {
+    ready: ComputedRef<boolean>;
+    error: Ref<{
+        name: string;
+        message: string;
+        stack?: string | undefined;
+        cause?: unknown;
+    } | null>;
+    open: () => void | undefined;
+    exit: (options?: Plaid.ExitOptions) => void | undefined;
+};
+export default usePlaidLink;
+
+export { }

package/dist/usePlaidLink.js

@@ -0,0 +1,42 @@
+import { ref as l, watchSyncEffect as c, toValue as f, computed as s, onUnmounted as v } from "vue";
+import p from "./useScriptTag.js";
+const m = "https://cdn.plaid.com/link/v2/stable/link-initialize.js";
+function P(u) {
+  const { isLoaded: i, error: r } = p(m), a = l(null), t = l(!1);
+  c(() => {
+    const e = f(u);
+    if (i.value && !(!e.token && !e.receivedRedirectUri)) {
+      if (!window.Plaid)
+        throw new Error("Error loading Plaid SDK");
+      n(), a.value = window.Plaid.create({
+        ...e,
+        onLoad: () => {
+          var o;
+          t.value = !0, (o = e.onLoad) == null || o.call(e);
+        }
+      });
+    }
+  });
+  const d = s(
+    () => !r.value && a.value !== null && (i.value || t.value)
+  );
+  function n() {
+    a.value && (a.value.exit({ force: !0 }), a.value.destroy(), t.value = !1);
+  }
+  return v(n), {
+    ready: d,
+    error: r,
+    open: () => {
+      var e;
+      return (e = a.value) == null ? void 0 : e.open();
+    },
+    exit: (e) => {
+      var o;
+      return (o = a.value) == null ? void 0 : o.exit(e);
+    }
+  };
+}
+export {
+  P as default
+};
+//# sourceMappingURL=usePlaidLink.js.map

package/dist/usePlaidLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePlaidLink.js","sources":["../src/composables/usePlaidLink/usePlaidLink.ts"],"sourcesContent":["import { computed, MaybeRef, onUnmounted, ref, toValue, watchSyncEffect } from 'vue';\n\nimport { Plaid } from '../../../types/plaid';\nimport useScriptTag from '../useScriptTag/useScriptTag';\n\nconst PLAID_SDK_URL = 'https://cdn.plaid.com/link/v2/stable/link-initialize.js';\n\nexport default function usePlaidLink(options: MaybeRef<Plaid.CreateConfig>) {\n  const { isLoaded: isPlaidScriptLoaded, error } = useScriptTag(PLAID_SDK_URL);\n\n  const plaid = ref<Plaid.LinkHandler | null>(null);\n  const iframeLoaded = ref(false);\n\n  // We want to trigger this as soon as options ref changes\n  watchSyncEffect(() => {\n    const optionsVal = toValue(options);\n\n    if (!isPlaidScriptLoaded.value) {\n      return;\n    }\n\n    if (!optionsVal.token && !optionsVal.receivedRedirectUri) {\n      return;\n    }\n\n    if (!window.Plaid) {\n      throw new Error('Error loading Plaid SDK');\n    }\n\n    // destroy & exit existing instances so we don't\n    // have multiple Plaid link modals at the same time\n    teardown();\n\n    plaid.value = window.Plaid.create({\n      ...optionsVal,\n      onLoad: () => {\n        iframeLoaded.value = true;\n        optionsVal.onLoad?.();\n      },\n    });\n  });\n\n  const ready = computed(\n    () => !error.value && plaid.value !== null && (isPlaidScriptLoaded.value || iframeLoaded.value),\n  );\n\n  function teardown() {\n    if (plaid.value) {\n      plaid.value.exit({ force: true });\n      plaid.value.destroy();\n\n      iframeLoaded.value = false;\n    }\n  }\n\n  onUnmounted(teardown);\n\n  return {\n    ready,\n    error,\n    open: () => plaid.value?.open(),\n    exit: (options?: Plaid.ExitOptions) => plaid.value?.exit(options),\n  };\n}\n"],"names":["PLAID_SDK_URL","usePlaidLink","options","isPlaidScriptLoaded","error","useScriptTag","plaid","ref","iframeLoaded","watchSyncEffect","optionsVal","toValue","teardown","_a","ready","computed","onUnmounted"],"mappings":";;AAKA,MAAMA,IAAgB;AAEtB,SAAwBC,EAAaC,GAAuC;AAC1E,QAAM,EAAE,UAAUC,GAAqB,OAAAC,EAAM,IAAIC,EAAaL,CAAa,GAErEM,IAAQC,EAA8B,IAAI,GAC1CC,IAAeD,EAAI,EAAK;AAG9B,EAAAE,EAAgB,MAAM;AACd,UAAAC,IAAaC,EAAQT,CAAO;AAE9B,QAACC,EAAoB,SAIrB,GAACO,EAAW,SAAS,CAACA,EAAW,sBAIjC;AAAA,UAAA,CAAC,OAAO;AACJ,cAAA,IAAI,MAAM,yBAAyB;AAKlC,MAAAE,KAEHN,EAAA,QAAQ,OAAO,MAAM,OAAO;AAAA,QAChC,GAAGI;AAAA,QACH,QAAQ,MAAM;;AACZ,UAAAF,EAAa,QAAQ,KACrBK,IAAAH,EAAW,WAAX,QAAAG,EAAA,KAAAH;AAAA,QACF;AAAA,MAAA,CACD;AAAA;AAAA,EAAA,CACF;AAED,QAAMI,IAAQC;AAAA,IACZ,MAAM,CAACX,EAAM,SAASE,EAAM,UAAU,SAASH,EAAoB,SAASK,EAAa;AAAA,EAAA;AAG3F,WAASI,IAAW;AAClB,IAAIN,EAAM,UACRA,EAAM,MAAM,KAAK,EAAE,OAAO,GAAM,CAAA,GAChCA,EAAM,MAAM,WAEZE,EAAa,QAAQ;AAAA,EAEzB;AAEA,SAAAQ,EAAYJ,CAAQ,GAEb;AAAA,IACL,OAAAE;AAAA,IACA,OAAAV;AAAA,IACA,MAAM,MAAM;;AAAA,cAAAS,IAAAP,EAAM,UAAN,gBAAAO,EAAa;AAAA;AAAA,IACzB,MAAM,CAACX,MAAgC;;AAAA,cAAAW,IAAAP,EAAM,UAAN,gBAAAO,EAAa,KAAKX;AAAAA;AAAAA,EAAO;AAEpE;"}

package/dist/useScriptTag.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'vue';
+
+declare type UseScriptOptions = {
+    manual: boolean;
+};
+
+declare function useScriptTag(url: string, options?: UseScriptOptions): {
+    scriptTag: Ref<HTMLScriptElement | null>;
+    load: () => void;
+    unload: () => void;
+    isLoaded: Ref<boolean>;
+    error: Ref<{
+        name: string;
+        message: string;
+        stack?: string | undefined;
+        cause?: unknown;
+    } | null>;
+};
+export default useScriptTag;
+
+export { }

package/dist/useScriptTag.js

@@ -0,0 +1,19 @@
+import { ref as a, onMounted as i, onUnmounted as v } from "vue";
+function f(r, d = { manual: !1 }) {
+  const n = a(null), t = a(!1), o = a(null), l = () => t.value = !0, u = (e) => o.value = e.error;
+  function c() {
+    let e = document.querySelector(`script[src="${r}"]`);
+    e ? t.value = !0 : (t.value = !1, o.value = null, e = document.createElement("script"), e.type = "text/javascript", e.async = !0, e.src = r, e.addEventListener("load", l), e.addEventListener("error", u), document.head.appendChild(e)), n.value = e;
+  }
+  function s() {
+    if (!document)
+      return;
+    const e = document.querySelector(`script[src="${r}"]`);
+    e && (e.removeEventListener("load", l), e.removeEventListener("error", u), document.head.removeChild(e), n.value = null, t.value = !1);
+  }
+  return d.manual || (i(c), v(s)), { scriptTag: n, load: c, unload: s, isLoaded: t, error: o };
+}
+export {
+  f as default
+};
+//# sourceMappingURL=useScriptTag.js.map

package/dist/useScriptTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScriptTag.js","sources":["../src/composables/useScriptTag/useScriptTag.ts"],"sourcesContent":["import { onMounted, onUnmounted, ref } from 'vue';\n\ntype UseScriptOptions = {\n  manual: boolean;\n};\n\nexport default function useScriptTag(url: string, options: UseScriptOptions = { manual: false }) {\n  const scriptTag = ref<HTMLScriptElement | null>(null);\n  const isLoaded = ref(false);\n  const error = ref<Error | null>(null);\n\n  const setIsLoaded = () => (isLoaded.value = true);\n  const setError = (e: ErrorEvent) => (error.value = e.error);\n\n  function loadScript() {\n    let el = document.querySelector<HTMLScriptElement>(`script[src=\"${url}\"]`);\n\n    if (!el) {\n      isLoaded.value = false;\n      error.value = null;\n\n      el = document.createElement('script');\n\n      el.type = 'text/javascript';\n      el.async = true;\n      el.src = url;\n      el.addEventListener('load', setIsLoaded);\n      el.addEventListener('error', setError);\n      document.head.appendChild(el);\n    } else {\n      isLoaded.value = true;\n    }\n\n    scriptTag.value = el;\n  }\n\n  function unloadScript() {\n    if (!document) {\n      return;\n    }\n\n    const elToBeRemoved = document.querySelector<HTMLScriptElement>(`script[src=\"${url}\"]`);\n\n    if (elToBeRemoved) {\n      elToBeRemoved.removeEventListener('load', setIsLoaded);\n      elToBeRemoved.removeEventListener('error', setError);\n\n      document.head.removeChild(elToBeRemoved);\n\n      scriptTag.value = null;\n      isLoaded.value = false;\n    }\n  }\n\n  if (!options.manual) {\n    onMounted(loadScript);\n    onUnmounted(unloadScript);\n  }\n\n  return { scriptTag, load: loadScript, unload: unloadScript, isLoaded, error };\n}\n"],"names":["useScriptTag","url","options","scriptTag","ref","isLoaded","error","setIsLoaded","setError","loadScript","el","unloadScript","elToBeRemoved","onMounted","onUnmounted"],"mappings":";AAMA,SAAwBA,EAAaC,GAAaC,IAA4B,EAAE,QAAQ,MAAS;AACzF,QAAAC,IAAYC,EAA8B,IAAI,GAC9CC,IAAWD,EAAI,EAAK,GACpBE,IAAQF,EAAkB,IAAI,GAE9BG,IAAc,MAAOF,EAAS,QAAQ,IACtCG,IAAW,CAAC,MAAmBF,EAAM,QAAQ,EAAE;AAErD,WAASG,IAAa;AACpB,QAAIC,IAAK,SAAS,cAAiC,eAAeT,CAAG,IAAI;AAEzE,IAAKS,IAaHL,EAAS,QAAQ,MAZjBA,EAAS,QAAQ,IACjBC,EAAM,QAAQ,MAETI,IAAA,SAAS,cAAc,QAAQ,GAEpCA,EAAG,OAAO,mBACVA,EAAG,QAAQ,IACXA,EAAG,MAAMT,GACNS,EAAA,iBAAiB,QAAQH,CAAW,GACpCG,EAAA,iBAAiB,SAASF,CAAQ,GAC5B,SAAA,KAAK,YAAYE,CAAE,IAK9BP,EAAU,QAAQO;AAAA,EACpB;AAEA,WAASC,IAAe;AACtB,QAAI,CAAC;AACH;AAGF,UAAMC,IAAgB,SAAS,cAAiC,eAAeX,CAAG,IAAI;AAEtF,IAAIW,MACYA,EAAA,oBAAoB,QAAQL,CAAW,GACvCK,EAAA,oBAAoB,SAASJ,CAAQ,GAE1C,SAAA,KAAK,YAAYI,CAAa,GAEvCT,EAAU,QAAQ,MAClBE,EAAS,QAAQ;AAAA,EAErB;AAEI,SAACH,EAAQ,WACXW,EAAUJ,CAAU,GACpBK,EAAYH,CAAY,IAGnB,EAAE,WAAAR,GAAW,MAAMM,GAAY,QAAQE,GAAc,UAAAN,GAAU,OAAAC;AACxE;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "48.5.0",
+  "version": "48.6.1",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",

package/types/index.ts

@@ -1,5 +1,6 @@
 export * from './address';
 export * from './colors';
 export * from './misc';
+export * from './plaid';
 export * from './statusLevels';
 export * from './unifiedApi';

package/types/plaid.ts

@@ -0,0 +1,7 @@
+export interface LinkTokenResponse {
+  link_token: string;
+  expiration: string; // ISO-8601
+  request_id: string;
+}
+
+export type * from 'plaid-link';