@leaflink/stash 48.16.1 → 48.16.2

package/dist/Dropdown.js

@@ -1,10 +1,10 @@
-import { defineComponent as P, ref as u, useCssModule as I, watch as C, onMounted as q, onBeforeUnmount as K, computed as R, withDirectives as _, openBlock as p, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as U, toDisplayString as V, createVNode as S, createBlock as W, Transition as Y, withCtx as F, unref as M, normalizeStyle as j, vShow as G, nextTick as A } from "vue";
+import { defineComponent as I, ref as u, useCssModule as q, watch as C, onMounted as K, onBeforeUnmount as R, computed as U, withDirectives as _, openBlock as p, createElementBlock as k, renderSlot as x, createElementVNode as E, normalizeClass as b, createTextVNode as V, toDisplayString as W, createVNode as S, createBlock as Y, Transition as F, withCtx as j, unref as M, normalizeStyle as G, vShow as H, nextTick as A } from "vue";
 import { KEY_CODES as d } from "./constants.js";
-import H from "./clickoutside.js";
-import J from "./utils/calculateElementOverflow.js";
-import { getMountPoint as Q } from "./utils/helpers.js";
+import J from "./clickoutside.js";
+import Q from "./utils/calculateElementOverflow.js";
+import { getMountPoint as X } from "./utils/helpers.js";
 import B from "./Icon.js";
-import { _ as X } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as Z } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/camelCase";
 import "lodash-es/get";
 import "lodash-es/isFinite";
@@ -12,10 +12,10 @@ import "lodash-es/isPlainObject";
 import "lodash-es/uniqueId";
 import "./index-9e1095ef.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const Z = ["aria-expanded"], ee = {
+const ee = ["aria-expanded"], te = {
   key: 0,
   class: "tw-flex tw-items-center tw-font-medium tw-text-blue-500 hover:tw-text-blue-700"
-}, te = /* @__PURE__ */ P({
+}, le = /* @__PURE__ */ I({
   name: "ll-dropdown",
   __name: "Dropdown",
   props: {
@@ -28,20 +28,20 @@ const Z = ["aria-expanded"], ee = {
     fluidContent: { type: Boolean, default: !1 }
   },
   emits: ["toggle", "dismiss"],
-  setup(D, { expose: $, emit: v }) {
-    const a = D, t = u(null), w = u(null), f = [], s = u(f), i = u(-1), l = u(!1), g = u({}), L = I();
+  setup(D, { expose: $, emit: L }) {
+    const a = D, v = L, t = u(null), w = u(null), f = [], s = u(f), i = u(-1), l = u(!1), g = u({}), T = q();
     C(l, (e) => {
       e || (i.value = -1), v("toggle", e);
     }), C(i, (e, o) => {
       e in s.value && s.value[e].classList.add("tw-bg-ice-200"), o in s.value && s.value[o].classList.remove("tw-bg-ice-200");
-    }), q(() => {
+    }), K(() => {
       var e, o, n;
       if (a.reattach) {
-        const c = Q();
+        const c = X();
         t.value && c.appendChild(t.value);
       }
       (e = t.value) != null && e.querySelector(".stash-menu") ? s.value = ((o = t.value) == null ? void 0 : o.querySelectorAll(".stash-menu-item")) ?? f : s.value = ((n = t.value) == null ? void 0 : n.querySelectorAll(".dropdown__item")) ?? f, window.addEventListener("resize", () => r());
-    }), K(() => {
+    }), R(() => {
       var e, o;
       window.removeEventListener("resize", () => r()), (o = (e = t == null ? void 0 : t.value) == null ? void 0 : e.parentNode) == null || o.removeChild(t.value);
     });
@@ -54,9 +54,9 @@ const Z = ["aria-expanded"], ee = {
     }
     async function m() {
       var e;
-      l.value ? l.value = !1 : (l.value = !0, await O(), (e = t.value) == null || e.focus());
+      l.value ? l.value = !1 : (l.value = !0, await z(), (e = t.value) == null || e.focus());
     }
-    function T(e) {
+    function N(e) {
       if (e.keyCode === d.ESCAPE)
         r();
       else if (e.keyCode === d.DOWN && i.value < s.value.length - 1)
@@ -69,11 +69,11 @@ const Z = ["aria-expanded"], ee = {
         return;
       e.preventDefault();
     }
-    function N() {
+    function O() {
       var e;
       (e = t.value) == null || e.style.setProperty("--offset", "0");
     }
-    async function O() {
+    async function z() {
       var y, h;
       await A();
       const e = ((y = w.value) == null ? void 0 : y.getBoundingClientRect()) || {}, o = e.top + e.height, n = {
@@ -86,14 +86,14 @@ const Z = ["aria-expanded"], ee = {
         right: a.align === "right" ? `${document.documentElement.clientWidth - Math.round(e.right) + n.x}px` : void 0,
         top: `${window.scrollY + o + n.y}px`
       }, await A());
-      const c = J(t == null ? void 0 : t.value);
+      const c = Q(t == null ? void 0 : t.value);
       if (c) {
-        const z = a.align === "left" ? "-" : "";
-        (h = t.value) == null || h.style.setProperty("--offset", `${z}${c.value}`);
+        const P = a.align === "left" ? "-" : "";
+        (h = t.value) == null || h.style.setProperty("--offset", `${P}${c.value}`);
       }
     }
     return $({
-      isActive: R(() => l.value),
+      isActive: U(() => l.value),
       toggle: m,
       dismiss: r
     }), (e, o) => _((p(), k("div", {
@@ -101,7 +101,7 @@ const Z = ["aria-expanded"], ee = {
       ref: w,
       class: "tw-relative tw-inline-block",
       "data-test": "ll-dropdown",
-      onKeydown: T
+      onKeydown: N
     }, [
       x(e.$slots, "toggle", {
         isActive: l.value,
@@ -113,26 +113,26 @@ const Z = ["aria-expanded"], ee = {
           class: b([e.label ? "tw-min-w-auto tw-outline-none" : "tw-rounded tw-p-3"]),
           onClick: m
         }, [
-          e.label ? (p(), k("span", ee, [
-            U(V(e.label) + " ", 1),
+          e.label ? (p(), k("span", te, [
+            V(W(e.label) + " ", 1),
             S(B, { name: "caret-down" })
-          ])) : (p(), W(B, {
+          ])) : (p(), Y(B, {
             key: 1,
             name: "ellipsis"
           }))
-        ], 10, Z)
+        ], 10, ee)
       ]),
-      S(Y, {
+      S(F, {
         name: "fade",
-        onAfterLeave: N
+        onAfterLeave: O
       }, {
-        default: F(() => [
+        default: j(() => [
           _(E("div", {
             ref_key: "contentRef",
             ref: t,
             "data-test": "ll-dropdown-content",
             class: b([
-              M(L).content,
+              M(T).content,
               e.contentClass,
               {
                 "tw-left-0 after:tw-left-6": a.align === "left",
@@ -140,28 +140,28 @@ const Z = ["aria-expanded"], ee = {
                 "tw-max-w-[360px]": !a.fluidContent
               }
             ]),
-            style: j(g.value)
+            style: G(g.value)
           }, [
             x(e.$slots, "default", {
               dismiss: r,
               isActive: l.value
             })
           ], 6), [
-            [G, l.value]
+            [H, l.value]
           ])
         ]),
         _: 3
       })
     ], 32)), [
-      [M(H), r]
+      [M(J), r]
     ]);
   }
-}), le = "_content_zbxyu_2", oe = {
-  content: le
-}, ae = {
-  $style: oe
-}, he = /* @__PURE__ */ X(te, [["__cssModules", ae]]);
+}), oe = "_content_zbxyu_2", ae = {
+  content: oe
+}, ne = {
+  $style: ae
+}, Ce = /* @__PURE__ */ Z(le, [["__cssModules", ne]]);
 export {
-  he as default
+  Ce as default
 };
 //# sourceMappingURL=Dropdown.js.map

package/dist/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit =\n    defineEmits<{\n      toggle: [isActive: boolean];\n      dismiss: [];\n    }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    next in items.value && items.value[next].classList.add('tw-bg-ice-200');\n    prev in items.value && items.value[prev].classList.remove('tw-bg-ice-200');\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      contentRef.value && target.appendChild(contentRef.value);\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    // avoid calling dismiss with ResizeEvent because it's target is the Window element and it's not a valid Node element to be passed to dismiss\n    window.addEventListener('resize', () => dismiss());\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', () => dismiss());\n    contentRef?.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1) {\n      isActive.value && itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1) {\n      isActive.value && itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1) {\n      isActive.value && items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"tw-relative tw-inline-block\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'tw-min-w-auto tw-outline-none' : 'tw-rounded tw-p-3']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"tw-flex tw-items-center tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'tw-left-0 after:tw-left-6': props.align === 'left',\n            'tw-right-0': props.align === 'right',\n            'tw-max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  .content {\n    --offset: 0;\n\n    @apply tw-shadow-2xl\n      tw-bg-white\n      tw-border\n      tw-border-solid\n      tw-border-blue-500\n      tw-rounded\n      tw-absolute\n      tw-z-[301]\n      tw-min-w-[200px];\n\n    transform: translateX(calc(var(--offset) * 1px));\n  }\n\n  /**\n  * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n  */\n  :global(.dropdown__list) {\n    @apply tw-bg-white tw-list-none tw-m-1.5 tw-p-0;\n  }\n\n  :global(.dropdown__item) {\n    @apply tw-block tw-mx-0 tw-mt-0 tw-mb-1.5 tw-w-full first:tw-mt-0 last:tw-mb-0;\n  }\n\n  :global(.dropdown__item) button {\n    @apply tw-border-none tw-text-left tw-p-1.5;\n  }\n\n  :global(.dropdown__item) :where(a, button) {\n    @apply tw-rounded\n    tw-text-ice-700\n      tw-block\n      tw-py-[10px]\n      tw-px-1.5\n      tw-w-full\n      disabled:tw-text-ice-500\n      disabled:tw-cursor-default\n      hover:tw-bg-ice-200\n      hover:tw-text-ice-700\n      hover:tw-no-underline\n      tw-transition-all\n      tw-duration-fast\n      tw-ease-swing;\n  }\n</style>\n"],"names":["contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","emit","next","prev","onMounted","props","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0EQA,IAAaC,EAAwB,IAAI,GACzCC,IAAcD,EAA2B,IAAI,GAE7CE,IAAqB,CAAA,GAErBC,IAAQH,EAAyBE,CAAkB,GACnDE,IAAYJ,EAAI,EAAE,GAClBK,IAAWL,EAAI,EAAK,GAEpBM,IAASN,EAAoB,CAAA,CAAE,GAC/BO,IAAUC;AAEV,IAAAC,EAAAJ,GAAU,CAACK,MAAQ;AACvB,MAAKA,MACHN,EAAU,QAAQ,KAGpBO,EAAK,UAAUD,CAAG;AAAA,IAAA,CACnB,GAEKD,EAAAL,GAAW,CAACQ,GAAMC,MAAS;AACvB,MAAAD,KAAAT,EAAM,SAASA,EAAM,MAAMS,CAAI,EAAE,UAAU,IAAI,eAAe,GAC9DC,KAAAV,EAAM,SAASA,EAAM,MAAMU,CAAI,EAAE,UAAU,OAAO,eAAe;AAAA,IAAA,CAC1E,GAEDC,EAAU,MAAM;;AACd,UAAIC,EAAM,UAAU;AAClB,cAAMC,IAASC;AAEf,QAAAlB,EAAW,SAASiB,EAAO,YAAYjB,EAAW,KAAK;AAAA;AAIzD,OAAImB,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,cAAc,iBAClCf,EAAM,UAAQgB,IAAApB,EAAW,UAAX,gBAAAoB,EAAkB,iBAAiB,wBAAuBjB,IAExEC,EAAM,UAAQiB,IAAArB,EAAW,UAAX,gBAAAqB,EAAkB,iBAAiB,uBAAsBlB,GAIzE,OAAO,iBAAiB,UAAU,MAAMmB,EAAS,CAAA;AAAA,IAAA,CAClD,GAEDC,EAAgB,MAAM;;AACpB,aAAO,oBAAoB,UAAU,MAAMD,EAAS,CAAA,IACpDF,KAAAD,IAAAnB,KAAA,gBAAAA,EAAY,UAAZ,gBAAAmB,EAAmB,eAAnB,QAAAC,EAA+B,YAAYpB,EAAW;AAAA,IAAK,CAC5D;AAKD,aAASsB,EAAQE,GAAe;;AAE5B,UAAAR,EAAM,mBACLG,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,SAASK,KAAA,gBAAAA,EAAO,WAA0BxB,EAAW,WAAUwB,KAAA,gBAAAA,EAAO;AAEzF;AAGF,YAAMC,IAAUnB,EAAS;AAEzB,MAAAA,EAAS,QAAQ,IAEbmB,KACFb,EAAK,SAAS;AAAA,IAElB;AAKA,mBAAec,IAAS;;AACtB,MAAIpB,EAAS,QACXA,EAAS,QAAQ,MAEjBA,EAAS,QAAQ,IACjB,MAAMqB,EAAgB,IACtBR,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB;AAAA,IAEtB;AAMA,aAASS,EAAU,GAAkB;AAC/B,UAAA,EAAE,YAAYC,EAAU;AAClB,QAAAP;eACC,EAAE,YAAYO,EAAU,QAAQxB,EAAU,QAAQD,EAAM,MAAM,SAAS;AAChF,QAAAE,EAAS,SAASD,EAAU;AAAA,eACnB,EAAE,YAAYwB,EAAU,MAAMxB,EAAU,QAAQ;AACzD,QAAAC,EAAS,SAASD,EAAU;AAAA,eACnB,EAAE,YAAYwB,EAAU,SAASxB,EAAU,UAAU;AAC9D,QAAAC,EAAS,SAASF,EAAMC,EAAU,KAAK,EAAE;;AAEzC;AAGF,QAAE,eAAe;AAAA,IACnB;AAKA,aAASyB,IAAc;;AACrB,OAAAX,IAAAnB,EAAW,UAAX,QAAAmB,EAAkB,MAAM,YAAY,YAAY;AAAA,IAClD;AAQA,mBAAeQ,IAAkB;;AAC/B,YAAMI,EAAS;AAEf,YAAMC,MAAYb,IAAAjB,EAAY,UAAZ,gBAAAiB,EAAmB,4BAA4B,CAAA,GAC3Dc,IAAMD,EAAU,MAAMA,EAAU,QAChCE,IAAS;AAAA,QACb,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAGlB,EAAM;AAAA,MAAA;AAGX,MAAIA,EAAM,aACRT,EAAO,QAAQ;AAAA,QACb,MAAMS,EAAM,UAAU,SAAS,GAAG,KAAK,MAAMgB,EAAU,IAAI,IAAIE,EAAO,QAAQ;AAAA,QAC9E,OACElB,EAAM,UAAU,UACZ,GAAG,SAAS,gBAAgB,cAAc,KAAK,MAAMgB,EAAU,KAAK,IAAIE,EAAO,QAC/E;AAAA,QACN,KAAK,GAAG,OAAO,UAAUD,IAAMC,EAAO;AAAA,MAAA,GAExC,MAAMH,EAAS;AAGX,YAAAI,IAAWC,EAAyBpC,KAAA,gBAAAA,EAAY,KAAK;AAE3D,UAAImC,GAAU;AACZ,cAAME,IAAYrB,EAAM,UAAU,SAAS,MAAM;AACjD,SAAAI,IAAApB,EAAW,UAAX,QAAAoB,EAAkB,MAAM,YAAY,YAAY,GAAGiB,IAAYF,EAAS;AAAA;AAAA,IAE5E;AAEa,WAAAG,EAAA;AAAA,MACX,UAAUC,EAAS,MAAMjC,EAAS,KAAK;AAAA,MACvC,QAAAoB;AAAA,MACA,SAAAJ;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Dropdown.js","sources":["../src/components/Dropdown/Dropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';\n\n  import { KEY_CODES } from '../../constants';\n  import vClickoutside from '../../directives/clickoutside/clickoutside';\n  import calculateElementOverflow from '../../utils/calculateElementOverflow';\n  import { getMountPoint } from '../../utils/helpers';\n  import Icon from '../Icon/Icon.vue';\n\n  export type DropdownOffset = {\n    x?: number;\n    y?: number;\n  };\n\n  export interface DropdownProps {\n    /**\n     * Used to position the dropdown relative to target\n     * Options: left, right\n     */\n    align?: 'left' | 'right';\n    /**\n     * When passed, text with caret is displayed instead of default kebab menu.\n     */\n    label?: string;\n    /**\n     * If true, dropdown will remain open when clicking on its content. Otherwise, it'll close automatically on click.\n     */\n    closeManually?: boolean;\n    /**\n     * Used to horizontally and vertically offset the dropdown in pixels\n     * Keep in mind, `x` value is relative to `align` value.\n     */\n    offset?: DropdownOffset;\n    /**\n     * If `reattach` is true, the contents will be mounted in the mount point container,\n     * so as to circumvent clipping issues from a parent's overflow property.\n     */\n    reattach?: boolean;\n    /**\n     * Custom class to apply to the default dropdown content element\n     */\n    contentClass?: string | string[];\n    /**\n     * Removes content container's max width\n     */\n    fluidContent?: boolean;\n  }\n\n  type DropdownStyles = {\n    left?: string;\n    right?: string;\n    top?: string;\n  };\n\n  defineOptions({\n    name: 'll-dropdown',\n  });\n\n  const props = withDefaults(defineProps<DropdownProps>(), {\n    align: 'right',\n    label: '',\n    closeManually: false,\n    offset: () => ({}),\n    reattach: true,\n    contentClass: '',\n    fluidContent: false,\n  });\n\n  const emit = defineEmits<{\n    toggle: [isActive: boolean];\n    dismiss: [];\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n  const dropdownRef = ref<HTMLDivElement | null>(null);\n\n  const DEFAULT_ITEMS_LIST = [] as unknown as NodeListOf<Element>;\n\n  const items = ref<NodeListOf<Element>>(DEFAULT_ITEMS_LIST);\n  const itemIndex = ref(-1);\n  const isActive = ref(false);\n\n  const styles = ref<DropdownStyles>({});\n  const classes = useCssModule();\n\n  watch(isActive, (val) => {\n    if (!val) {\n      itemIndex.value = -1;\n    }\n\n    emit('toggle', val);\n  });\n\n  watch(itemIndex, (next, prev) => {\n    next in items.value && items.value[next].classList.add('tw-bg-ice-200');\n    prev in items.value && items.value[prev].classList.remove('tw-bg-ice-200');\n  });\n\n  onMounted(() => {\n    if (props.reattach) {\n      const target = getMountPoint();\n\n      contentRef.value && target.appendChild(contentRef.value);\n    }\n\n    // if stash-menu exists, use it's items\n    if (contentRef.value?.querySelector('.stash-menu')) {\n      items.value = contentRef.value?.querySelectorAll('.stash-menu-item') ?? DEFAULT_ITEMS_LIST;\n    } else {\n      items.value = contentRef.value?.querySelectorAll('.dropdown__item') ?? DEFAULT_ITEMS_LIST;\n    }\n\n    // avoid calling dismiss with ResizeEvent because it's target is the Window element and it's not a valid Node element to be passed to dismiss\n    window.addEventListener('resize', () => dismiss());\n  });\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('resize', () => dismiss());\n    contentRef?.value?.parentNode?.removeChild(contentRef.value);\n  });\n\n  /**\n   * Dismisses the Dropdown.\n   */\n  function dismiss(event?: Event) {\n    if (\n      props.closeManually &&\n      (contentRef.value?.contains(event?.target as HTMLElement) || contentRef.value === event?.target)\n    ) {\n      return;\n    }\n\n    const wasOpen = isActive.value;\n\n    isActive.value = false;\n\n    if (wasOpen) {\n      emit('dismiss');\n    }\n  }\n\n  /**\n   * Opens or closes the Dropdown. If opening, positions and focuses its content.\n   */\n  async function toggle() {\n    if (isActive.value) {\n      isActive.value = false;\n    } else {\n      isActive.value = true;\n      await calculateOffset();\n      contentRef.value?.focus();\n    }\n  }\n\n  /**\n   * Handles all user keyboard input on the Dropdown.\n   * @param {KeyboardEvent} e The native keydown event.\n   */\n  function onKeyDown(e: KeyboardEvent) {\n    if (e.keyCode === KEY_CODES.ESCAPE) {\n      dismiss();\n    } else if (e.keyCode === KEY_CODES.DOWN && itemIndex.value < items.value.length - 1) {\n      isActive.value && itemIndex.value++;\n    } else if (e.keyCode === KEY_CODES.UP && itemIndex.value > -1) {\n      isActive.value && itemIndex.value--;\n    } else if (e.keyCode === KEY_CODES.ENTER && itemIndex.value !== -1) {\n      isActive.value && items[itemIndex.value].click();\n    } else {\n      return;\n    }\n\n    e.preventDefault(); // if keyDown did something / we didn't return\n  }\n\n  /**\n   * Reset any page overflow offset\n   */\n  function resetOffset() {\n    contentRef.value?.style.setProperty('--offset', '0');\n  }\n\n  /**\n   * Calculate the position for the Dropdown content element,\n   * relative to the viewport.\n   * Repositions the dropdown content element (& arrow)\n   * if it overflows the page (including gutter).\n   */\n  async function calculateOffset() {\n    await nextTick();\n\n    const toggleBCR = dropdownRef.value?.getBoundingClientRect() || ({} as DOMRect);\n    const top = toggleBCR.top + toggleBCR.height;\n    const offset = {\n      x: 0,\n      y: 0,\n      ...props.offset,\n    };\n\n    if (props.reattach) {\n      styles.value = {\n        left: props.align === 'left' ? `${Math.round(toggleBCR.left) + offset.x}px` : undefined,\n        right:\n          props.align === 'right'\n            ? `${document.documentElement.clientWidth - Math.round(toggleBCR.right) + offset.x}px`\n            : undefined,\n        top: `${window.scrollY + top + offset.y}px`,\n      };\n      await nextTick(); // wait for style updates to sync in the DOM\n    }\n\n    const overflow = calculateElementOverflow(contentRef?.value);\n\n    if (overflow) {\n      const direction = props.align === 'left' ? '-' : '';\n      contentRef.value?.style.setProperty('--offset', `${direction}${overflow.value}`);\n    }\n  }\n\n  defineExpose({\n    isActive: computed(() => isActive.value),\n    toggle,\n    dismiss,\n  });\n</script>\n\n<template>\n  <div\n    ref=\"dropdownRef\"\n    v-clickoutside=\"dismiss\"\n    class=\"tw-relative tw-inline-block\"\n    data-test=\"ll-dropdown\"\n    @keydown=\"onKeyDown\"\n  >\n    <!-- @slot Toggle component slot, receives `toggle` method to trigger Dropdown display -->\n    <slot name=\"toggle\" :is-active=\"isActive\" :toggle=\"toggle\">\n      <button\n        data-test=\"button|toggle\"\n        :aria-expanded=\"isActive\"\n        :class=\"[label ? 'tw-min-w-auto tw-outline-none' : 'tw-rounded tw-p-3']\"\n        @click=\"toggle\"\n      >\n        <span v-if=\"label\" class=\"tw-flex tw-items-center tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\">\n          {{ label }}\n          <Icon name=\"caret-down\" />\n        </span>\n        <Icon v-else name=\"ellipsis\" />\n      </button>\n    </slot>\n\n    <transition name=\"fade\" @after-leave=\"resetOffset\">\n      <div\n        v-show=\"isActive\"\n        ref=\"contentRef\"\n        data-test=\"ll-dropdown-content\"\n        :class=\"[\n          classes.content,\n          contentClass,\n          {\n            'tw-left-0 after:tw-left-6': props.align === 'left',\n            'tw-right-0': props.align === 'right',\n            'tw-max-w-[360px]': !props.fluidContent,\n          },\n        ]\"\n        :style=\"styles\"\n      >\n        <!-- @slot Dropdown content slot. Receives `dismiss` method, to trigger manual close. You must call dismiss with parentheses. Receives `is-active` prop.  -->\n        <slot :dismiss=\"dismiss\" :is-active=\"isActive\"></slot>\n      </div>\n    </transition>\n  </div>\n</template>\n\n<style module>\n  .content {\n    --offset: 0;\n\n    @apply tw-shadow-2xl\n      tw-bg-white\n      tw-border\n      tw-border-solid\n      tw-border-blue-500\n      tw-rounded\n      tw-absolute\n      tw-z-[301]\n      tw-min-w-[200px];\n\n    transform: translateX(calc(var(--offset) * 1px));\n  }\n\n  /**\n  * TODO: these global styles should be componentized in https://leaflink.atlassian.net/browse/STASH-566\n  */\n  :global(.dropdown__list) {\n    @apply tw-bg-white tw-list-none tw-m-1.5 tw-p-0;\n  }\n\n  :global(.dropdown__item) {\n    @apply tw-block tw-mx-0 tw-mt-0 tw-mb-1.5 tw-w-full first:tw-mt-0 last:tw-mb-0;\n  }\n\n  :global(.dropdown__item) button {\n    @apply tw-border-none tw-text-left tw-p-1.5;\n  }\n\n  :global(.dropdown__item) :where(a, button) {\n    @apply tw-rounded\n    tw-text-ice-700\n      tw-block\n      tw-py-[10px]\n      tw-px-1.5\n      tw-w-full\n      disabled:tw-text-ice-500\n      disabled:tw-cursor-default\n      hover:tw-bg-ice-200\n      hover:tw-text-ice-700\n      hover:tw-no-underline\n      tw-transition-all\n      tw-duration-fast\n      tw-ease-swing;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","contentRef","ref","dropdownRef","DEFAULT_ITEMS_LIST","items","itemIndex","isActive","styles","classes","useCssModule","watch","val","next","prev","onMounted","target","getMountPoint","_a","_b","_c","dismiss","onBeforeUnmount","event","wasOpen","toggle","calculateOffset","onKeyDown","KEY_CODES","resetOffset","nextTick","toggleBCR","top","offset","overflow","calculateElementOverflow","direction","__expose","computed"],"mappings":"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"}

package/dist/Dropdown.vue.d.ts

@@ -1,11 +1,10 @@
-import { AllowedComponentProps } from 'vue';
-import { ComponentCustomProps } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
 import { ComputedRef } 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;
 
@@ -34,7 +33,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DropdownProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DropdownProps>, {
     align: string;
     label: string;
     closeManually: boolean;
@@ -42,14 +41,14 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     reattach: boolean;
     contentClass: string;
     fluidContent: boolean;
-}>, {
+}>>, {
     isActive: ComputedRef<boolean>;
     toggle: typeof toggle;
     dismiss: typeof dismiss;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     toggle: (isActive: boolean) => void;
     dismiss: () => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DropdownProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DropdownProps>, {
     align: string;
     label: string;
     closeManually: boolean;
@@ -57,10 +56,10 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     reattach: boolean;
     contentClass: string;
     fluidContent: boolean;
-}>>> & {
+}>>> & Readonly<{
     onToggle?: ((isActive: boolean) => any) | undefined;
     onDismiss?: (() => any) | undefined;
-}, {
+}>, {
     label: string;
     align: "left" | "right";
     closeManually: boolean;
@@ -68,7 +67,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     reattach: boolean;
     contentClass: string | string[];
     fluidContent: boolean;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     toggle?(_: {
         isActive: boolean;
         toggle: typeof toggle;

package/dist/EmptyState.js

@@ -1,4 +1,4 @@
-import { defineComponent as d, useCssModule as f, useSlots as y, openBlock as l, createElementBlock as a, unref as e, createBlock as _, createCommentVNode as m, createElementVNode as u, renderSlot as i, toDisplayString as r, normalizeClass as n, createTextVNode as w } from "vue";
+import { defineComponent as d, useCssModule as f, useSlots as y, openBlock as s, createElementBlock as l, createBlock as _, createCommentVNode as i, createElementVNode as u, renderSlot as o, toDisplayString as m, normalizeClass as r, unref as n, createTextVNode as w } from "vue";
 import { t as g } from "./locale.js";
 import { _ as b } from "./Illustration.vue_vue_type_script_setup_true_lang-e26c3841.js";
 import { s as x } from "./EmptyState.vue_used_vue_type_style_index_0_lang.module-f5d89366.js";
@@ -27,43 +27,43 @@ const k = {
     vignette: { default: void 0 }
   },
   setup(p) {
-    const t = p, c = f(), s = y();
-    return (o, B) => (l(), a("div", k, [
-      t.title || e(s).title || t.subtitle || e(s).subtitle || t.vignette ? (l(), a("div", v, [
-        t.vignette ? (l(), _(b, {
+    const t = p, c = f(), e = y();
+    return (a, B) => (s(), l("div", k, [
+      t.title || e.title || t.subtitle || e.subtitle || t.vignette ? (s(), l("div", v, [
+        t.vignette ? (s(), _(b, {
           key: 0,
           "data-test": "stash-empty-state|illustration",
           type: "vignette",
           class: "tw-mx-3",
           name: t.vignette,
           size: 300
-        }, null, 8, ["name"])) : m("", !0),
+        }, null, 8, ["name"])) : i("", !0),
         u("section", null, [
-          i(o.$slots, "title", {}, () => [
-            u("h3", S, r(t.title), 1)
+          o(a.$slots, "title", {}, () => [
+            u("h3", S, m(t.title), 1)
           ]),
-          i(o.$slots, "subtitle", {}, () => [
-            t.subtitle || e(s).subtitle ? (l(), a("p", {
+          o(a.$slots, "subtitle", {}, () => [
+            t.subtitle || e.subtitle ? (s(), l("p", {
               key: 0,
-              class: n({ " tw-mb-8": e(s).button, "tw-mb-0": !e(s).button })
-            }, r(t.subtitle), 3)) : m("", !0)
+              class: r({ " tw-mb-8": e.button, "tw-mb-0": !e.button })
+            }, m(t.subtitle), 3)) : i("", !0)
           ]),
-          i(o.$slots, "button")
+          o(a.$slots, "button")
         ])
-      ])) : (l(), a("div", {
+      ])) : (s(), l("div", {
         key: 1,
-        class: n(["tw-mx-auto tw-my-0 tw-flex tw-items-center tw-justify-center tw-py-12", [e(c).root, { "tw-text-center": !t.image.src && !e(s).image }]])
+        class: r(["tw-mx-auto tw-my-0 tw-flex tw-items-center tw-justify-center tw-py-12", [n(c).root, { "tw-text-center": !t.image.src && !e.image }]])
       }, [
-        i(o.$slots, "image", {}, () => [
-          t.image.src ? (l(), a("img", {
+        o(a.$slots, "image", {}, () => [
+          t.image.src ? (s(), l("img", {
             key: 0,
-            class: n(["tw-mr-6", e(c).image]),
+            class: r(["tw-mr-6", n(c).image]),
             alt: t.image.alt,
             src: t.image.src,
             "data-test": "stash-empty-state__img"
-          }, null, 10, $)) : m("", !0)
+          }, null, 10, $)) : i("", !0)
         ]),
-        w(" " + r(t.text || e(g)("ll.emptyState.noResults")), 1)
+        w(" " + m(t.text || n(g)("ll.emptyState.noResults")), 1)
       ], 2))
     ]));
   }

package/dist/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import { VignetteNames } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n\n  export interface EmptyStateProps {\n    /**\n     * @deprecated Use illustration instead.\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n\n    /**\n     * @deprecated Use title instead.\n     */\n    text?: string;\n\n    /**\n     * the title text of the empty state\n     */\n    title?: string;\n\n    /**\n     * the subtitle text of the empty state\n     */\n    subtitle?: string;\n\n    /**\n     * The name of the vignette illustration to render\n     */\n    vignette?: VignetteNames;\n  }\n\n  export interface EmptyStateSlots {\n    title?: void;\n    subtitle?: void;\n    button?: void;\n    image?: void;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n\n    title: '',\n    subtitle: '',\n    vignette: undefined,\n  });\n\n  const classes = useCssModule();\n  const slots = defineSlots<EmptyStateSlots>();\n</script>\n\n<template>\n  <div key=\"empty\" class=\"stash-empty-state\" data-test=\"stash-empty-state\">\n    <template v-if=\"props.title || slots.title || props.subtitle || slots.subtitle || props.vignette\">\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-text-center md:tw-flex-row md:tw-text-left\">\n        <Illustration\n          v-if=\"props.vignette\"\n          data-test=\"stash-empty-state|illustration\"\n          type=\"vignette\"\n          class=\"tw-mx-3\"\n          :name=\"props.vignette\"\n          :size=\"300\"\n        />\n        <section>\n          <slot name=\"title\">\n            <h3 class=\"tw-mb-1.5\">\n              {{ props.title }}\n            </h3>\n          </slot>\n\n          <slot name=\"subtitle\">\n            <p v-if=\"props.subtitle || slots.subtitle\" :class=\"{ ' tw-mb-8': slots.button, 'tw-mb-0': !slots.button }\">\n              {{ props.subtitle }}\n            </p>\n          </slot>\n\n          <slot name=\"button\"></slot>\n        </section>\n      </div>\n    </template>\n\n    <template v-else>\n      <div\n        class=\"tw-mx-auto tw-my-0 tw-flex tw-items-center tw-justify-center tw-py-12\"\n        :class=\"[classes.root, { 'tw-text-center': !props.image.src && !slots.image }]\"\n      >\n        <slot name=\"image\">\n          <img\n            v-if=\"props.image.src\"\n            class=\"tw-mr-6\"\n            :alt=\"props.image.alt\"\n            :class=\"classes.image\"\n            :src=\"props.image.src\"\n            data-test=\"stash-empty-state__img\"\n          />\n        </slot>\n\n        {{ props.text || t('ll.emptyState.noResults') }}\n      </div>\n    </template>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: 600px;\n  }\n\n  .image {\n    max-width: 60px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","_useSlots"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmEQA,IAAUC,KACVC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"EmptyState.js","sources":["../src/components/EmptyState/EmptyState.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import { VignetteNames } from '../Illustration/Illustration.models';\n  import Illustration from '../Illustration/Illustration.vue';\n\n  export interface EmptyStateProps {\n    /**\n     * @deprecated Use illustration instead.\n     */\n    image?: {\n      alt?: string;\n      src: string;\n    };\n\n    /**\n     * @deprecated Use title instead.\n     */\n    text?: string;\n\n    /**\n     * the title text of the empty state\n     */\n    title?: string;\n\n    /**\n     * the subtitle text of the empty state\n     */\n    subtitle?: string;\n\n    /**\n     * The name of the vignette illustration to render\n     */\n    vignette?: VignetteNames;\n  }\n\n  export interface EmptyStateSlots {\n    title?: void;\n    subtitle?: void;\n    button?: void;\n    image?: void;\n  }\n\n  defineOptions({\n    name: 'll-empty-state',\n  });\n\n  const props = withDefaults(defineProps<EmptyStateProps>(), {\n    /**\n     * An optional image to render\n     */\n    image: () => ({\n      alt: '',\n      src: '',\n    }),\n\n    /**\n     * The custom message to render\n     */\n    text: '',\n\n    title: '',\n    subtitle: '',\n    vignette: undefined,\n  });\n\n  const classes = useCssModule();\n  const slots = defineSlots<EmptyStateSlots>();\n</script>\n\n<template>\n  <div key=\"empty\" class=\"stash-empty-state\" data-test=\"stash-empty-state\">\n    <template v-if=\"props.title || slots.title || props.subtitle || slots.subtitle || props.vignette\">\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-text-center md:tw-flex-row md:tw-text-left\">\n        <Illustration\n          v-if=\"props.vignette\"\n          data-test=\"stash-empty-state|illustration\"\n          type=\"vignette\"\n          class=\"tw-mx-3\"\n          :name=\"props.vignette\"\n          :size=\"300\"\n        />\n        <section>\n          <slot name=\"title\">\n            <h3 class=\"tw-mb-1.5\">\n              {{ props.title }}\n            </h3>\n          </slot>\n\n          <slot name=\"subtitle\">\n            <p v-if=\"props.subtitle || slots.subtitle\" :class=\"{ ' tw-mb-8': slots.button, 'tw-mb-0': !slots.button }\">\n              {{ props.subtitle }}\n            </p>\n          </slot>\n\n          <slot name=\"button\"></slot>\n        </section>\n      </div>\n    </template>\n\n    <template v-else>\n      <div\n        class=\"tw-mx-auto tw-my-0 tw-flex tw-items-center tw-justify-center tw-py-12\"\n        :class=\"[classes.root, { 'tw-text-center': !props.image.src && !slots.image }]\"\n      >\n        <slot name=\"image\">\n          <img\n            v-if=\"props.image.src\"\n            class=\"tw-mr-6\"\n            :alt=\"props.image.alt\"\n            :class=\"classes.image\"\n            :src=\"props.image.src\"\n            data-test=\"stash-empty-state__img\"\n          />\n        </slot>\n\n        {{ props.text || t('ll.emptyState.noResults') }}\n      </div>\n    </template>\n  </div>\n</template>\n\n<style module>\n  .root {\n    max-width: 600px;\n  }\n\n  .image {\n    max-width: 60px;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","slots","_useSlots"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDE,UAAMA,IAAQC,GAmBRC,IAAUC,KACVC,IAAQC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/EmptyState.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,7 +32,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EmptyStateProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EmptyStateProps>, {
     /**
      * An optional image to render
      */
@@ -48,7 +47,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     title: string;
     subtitle: string;
     vignette: undefined;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EmptyStateProps>, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EmptyStateProps>, {
     /**
      * An optional image to render
      */
@@ -63,7 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     title: string;
     subtitle: string;
     vignette: undefined;
-}>>>, {
+}>>> & Readonly<{}>, {
     title: string;
     image: {
         alt?: string | undefined;
@@ -72,7 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     text: string;
     subtitle: string;
     vignette: "map" | "search" | "calendar" | "dashboard" | "edit" | "megaphone" | "truck" | "warehouse" | "payments" | "light-bulb" | "pie-chart" | "api" | "bank" | "basket" | "brand-menu" | "deals" | "document-search" | "empty-tray" | "graph" | "integrations" | "messages" | "money-bank" | "notifications" | "orders-empty" | "product-cards" | "product-display" | "search-storefront" | "store" | "todo" | "users" | "warehouse-delivery";
-}, {}>, Readonly<EmptyStateSlots>>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, Readonly<EmptyStateSlots> & EmptyStateSlots>;
 export default _default;
 
 export declare interface EmptyStateProps {

package/dist/Expand.js

@@ -1,4 +1,4 @@
-import { _ as m } from "./Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js";
+import { _ as m } from "./Expand.vue_vue_type_script_setup_true_lang-0f236267.js";
 import "vue";
 export {
   m as default

package/dist/Expand.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,26 +32,26 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExpandProps>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExpandProps>, {
     is: string;
     isExpanded: boolean;
     isLazy: boolean;
     transitionName: string;
-}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "after-expand": () => void;
-}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExpandProps>, {
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ExpandProps>, {
     is: string;
     isExpanded: boolean;
     isLazy: boolean;
     transitionName: string;
-}>>> & {
+}>>> & Readonly<{
     "onAfter-expand"?: (() => any) | undefined;
-}, {
+}>, {
     is: ExpandOuterElement;
     isExpanded: boolean;
     isLazy: boolean;
     transitionName: string;
-}, {}>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/{Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js → Expand.vue_vue_type_script_setup_true_lang-0f236267.js}

@@ -1,5 +1,5 @@
-import { defineComponent as y, ref as c, onMounted as u, openBlock as s, createBlock as x, resolveDynamicComponent as v, normalizeClass as m, withCtx as i, createVNode as E, Transition as g, createElementBlock as n, Fragment as k, renderSlot as d, createCommentVNode as w, withDirectives as C, vShow as B } from "vue";
-const $ = /* @__PURE__ */ y({
+import { defineComponent as c, ref as u, onMounted as x, openBlock as s, createBlock as m, resolveDynamicComponent as v, normalizeClass as E, withCtx as i, createVNode as g, Transition as k, createElementBlock as n, Fragment as w, renderSlot as d, createCommentVNode as C, withDirectives as B, vShow as N } from "vue";
+const z = /* @__PURE__ */ c({
   name: "ll-expand",
   __name: "Expand",
   props: {
@@ -10,55 +10,55 @@ const $ = /* @__PURE__ */ y({
   },
   emits: ["after-expand"],
   setup(l, { emit: r }) {
-    const o = l, t = c(null);
-    u(() => {
+    const o = l, p = r, t = u(null);
+    x(() => {
       !o.isExpanded && t.value && (t.value.style.overflow = "hidden");
     });
-    const p = (e) => {
+    const f = (e) => {
       e.style.visibility = "hidden", e.style.height = "auto";
       const a = e.offsetHeight;
       e.style.visibility = "", e.style.display = "", e.style.height = 0, requestAnimationFrame(() => {
         e.style.height = `${a}px`;
       });
-    }, f = (e) => {
-      e.style.height = "", e.style.overflow = "", r("after-expand");
     }, h = (e) => {
+      e.style.height = "", e.style.overflow = "", p("after-expand");
+    }, y = (e) => {
       const a = e.offsetHeight;
       e.style.height = `${a}px`, e.style.overflow = "hidden", requestAnimationFrame(() => {
         e.style.height = 0;
       });
     };
-    return (e, a) => (s(), x(v(o.is), {
-      class: m(["stash-expand", {
+    return (e, a) => (s(), m(v(o.is), {
+      class: E(["stash-expand", {
         "stash-expand--expanded": e.isExpanded,
         "stash-expand--collapsed": !e.isExpanded
       }]),
       "data-test": "stash-expand"
     }, {
       default: i(() => [
-        E(g, {
+        g(k, {
           name: e.transitionName,
-          onAfterEnter: f,
-          onEnter: p,
-          onLeave: h
+          onAfterEnter: h,
+          onEnter: f,
+          onLeave: y
         }, {
           default: i(() => [
-            e.isLazy ? (s(), n(k, { key: 0 }, [
+            e.isLazy ? (s(), n(w, { key: 0 }, [
               e.isExpanded ? (s(), n("div", {
                 key: 0,
                 ref_key: "contentRef",
                 ref: t
               }, [
                 d(e.$slots, "default")
-              ], 512)) : w("", !0)
-            ], 64)) : C((s(), n("div", {
+              ], 512)) : C("", !0)
+            ], 64)) : B((s(), n("div", {
               key: 1,
               ref_key: "contentRef",
               ref: t
             }, [
               d(e.$slots, "default")
             ], 512)), [
-              [B, e.isExpanded]
+              [N, e.isExpanded]
             ])
           ]),
           _: 3
@@ -69,6 +69,6 @@ const $ = /* @__PURE__ */ y({
   }
 });
 export {
-  $ as _
+  z as _
 };
-//# sourceMappingURL=Expand.vue_vue_type_script_setup_true_lang-1751f4a6.js.map
+//# sourceMappingURL=Expand.vue_vue_type_script_setup_true_lang-0f236267.js.map

package/dist/Expand.vue_vue_type_script_setup_true_lang-0f236267.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Expand.vue_vue_type_script_setup_true_lang-0f236267.js","sources":["../src/components/Expand/Expand.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { onMounted, ref } from 'vue';\n\n  defineOptions({\n    name: 'll-expand',\n  });\n\n  export type ExpandOuterElement = 'div' | 'td' | 'li';\n\n  export interface ExpandProps {\n    /**\n     * The root element to use as the root element the expand transition gets applied to\n     */\n    is?: ExpandOuterElement;\n\n    /**\n     * Dictates whether the content is expanded or collapsed\n     */\n    isExpanded?: boolean;\n\n    /**\n     * Whether to only render content on expand\n     */\n    isLazy?: boolean;\n\n    /**\n     * The name of the transition to pass to the transition component\n     * @see: https://vuejs.org/guide/built-ins/transition.html#css-based-transitions\n     */\n    transitionName?: string;\n  }\n\n  const props = withDefaults(defineProps<ExpandProps>(), {\n    is: 'div',\n    isExpanded: false,\n    isLazy: false,\n    transitionName: 'expand',\n  });\n\n  const emit = defineEmits<{\n    (e: 'after-expand'): void;\n  }>();\n\n  const contentRef = ref<HTMLElement | null>(null);\n\n  onMounted(() => {\n    if (!props.isExpanded && contentRef.value) {\n      contentRef.value.style.overflow = 'hidden';\n    }\n  });\n\n  /**\n   * Expands the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onExpand = (element) => {\n    // Trick to calculate the height of the hidden element\n    element.style.visibility = 'hidden';\n    element.style.height = 'auto';\n\n    const height = element.offsetHeight;\n\n    // Restore default styling\n    element.style.visibility = '';\n    element.style.display = '';\n\n    // Set height on the element to zero\n    element.style.height = 0;\n\n    // Set expanded height after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = `${height}px`;\n    });\n  };\n\n  /**\n   * Resores default styling after the expand animation is completed\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const afterExpand = (element) => {\n    element.style.height = '';\n    element.style.overflow = '';\n    emit('after-expand');\n  };\n\n  /**\n   * Collapses the element\n   * @param {object} element - the element being expanded\n   * @returns {void}\n   */\n  const onCollapse = (element) => {\n    const height = element.offsetHeight;\n\n    // Set height to the expanded height\n    element.style.height = `${height}px`;\n    element.style.overflow = 'hidden';\n\n    // Set height to zero after the other height change takes affect\n    requestAnimationFrame(() => {\n      element.style.height = 0;\n    });\n  };\n</script>\n\n<template>\n  <component\n    :is=\"props.is\"\n    class=\"stash-expand\"\n    data-test=\"stash-expand\"\n    :class=\"{\n      'stash-expand--expanded': isExpanded,\n      'stash-expand--collapsed': !isExpanded,\n    }\"\n  >\n    <transition :name=\"transitionName\" @after-enter=\"afterExpand\" @enter=\"onExpand\" @leave=\"onCollapse\">\n      <template v-if=\"isLazy\">\n        <div v-if=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n      <template v-else>\n        <div v-show=\"isExpanded\" ref=\"contentRef\">\n          <slot></slot>\n        </div>\n      </template>\n    </transition>\n  </component>\n</template>\n"],"names":["props","__props","emit","__emit","contentRef","ref","onMounted","onExpand","element","height","afterExpand","onCollapse"],"mappings":";;;;;;;;;;;;AAgCE,UAAMA,IAAQC,GAORC,IAAOC,GAIPC,IAAaC,EAAwB,IAAI;AAE/C,IAAAC,EAAU,MAAM;AACd,MAAI,CAACN,EAAM,cAAcI,EAAW,UACvBA,EAAA,MAAM,MAAM,WAAW;AAAA,IACpC,CACD;AAOK,UAAAG,IAAW,CAACC,MAAY;AAE5B,MAAAA,EAAQ,MAAM,aAAa,UAC3BA,EAAQ,MAAM,SAAS;AAEvB,YAAMC,IAASD,EAAQ;AAGvB,MAAAA,EAAQ,MAAM,aAAa,IAC3BA,EAAQ,MAAM,UAAU,IAGxBA,EAAQ,MAAM,SAAS,GAGvB,sBAAsB,MAAM;AAClB,QAAAA,EAAA,MAAM,SAAS,GAAGC;AAAA,MAAA,CAC3B;AAAA,IAAA,GAQGC,IAAc,CAACF,MAAY;AAC/B,MAAAA,EAAQ,MAAM,SAAS,IACvBA,EAAQ,MAAM,WAAW,IACzBN,EAAK,cAAc;AAAA,IAAA,GAQfS,IAAa,CAACH,MAAY;AAC9B,YAAMC,IAASD,EAAQ;AAGf,MAAAA,EAAA,MAAM,SAAS,GAAGC,OAC1BD,EAAQ,MAAM,WAAW,UAGzB,sBAAsB,MAAM;AAC1B,QAAAA,EAAQ,MAAM,SAAS;AAAA,MAAA,CACxB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}