@leaflink/stash 44.0.0-beta.1 → 44.0.0-beta.11

package/dist/Modal.js

@@ -1,4 +1,4 @@
-import { defineComponent as H, useSlots as I, ref as d, computed as x, watch as $, onBeforeUnmount as K, openBlock as a, createElementBlock as f, normalizeClass as s, withKeys as R, createVNode as C, withModifiers as j, createElementVNode as g, unref as w, renderSlot as m, toDisplayString as T, createCommentVNode as i, createBlock as F, withCtx as L } from "vue";
+import { defineComponent as H, useSlots as I, ref as d, computed as x, watch as $, onBeforeUnmount as K, openBlock as a, createElementBlock as w, normalizeClass as s, withKeys as R, createVNode as C, withModifiers as j, createElementVNode as g, unref as f, renderSlot as m, toDisplayString as T, createCommentVNode as i, createBlock as F, withCtx as L } from "vue";
 import V from "lodash-es/uniqueId";
 import { FOCUS_ELEMENTS_SELECTOR as A } from "./constants.js";
 import { t as M } from "./locale.js";
@@ -7,7 +7,7 @@ import N from "./Button.js";
 import D from "./Icon.js";
 import { _ as P } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 var U = /* @__PURE__ */ ((l) => (l.Narrow = "narrow", l.Medium = "medium", l.Wide = "wide", l))(U || {}), W = /* @__PURE__ */ ((l) => (l.Center = "center", l.Left = "left", l.Right = "right", l))(W || {});
@@ -65,14 +65,14 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
       var c, S;
       t.key === "Tab" && (t.shiftKey && document.activeElement === b.value ? ((c = k.value) == null || c.focus(), t.preventDefault()) : document.activeElement === k.value && ((S = b.value) == null || S.focus(), t.preventDefault()));
     }
-    return (t, c) => o.value ? (a(), f("div", {
+    return (t, c) => o.value ? (a(), w("div", {
       key: 0,
       ref_key: "rootRef",
       ref: r,
       class: s(["stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto", {
         "tw-invisible tw-z-behind": !o.value,
         "tw-visible tw-z-modal": o.value,
-        "lg:tw-flex lg:tw-flex-col lg:tw-justify-center lg:tw-items-center": e.position === "center"
+        "lg:tw-flex lg:tw-flex-col lg:tw-items-center lg:tw-justify-center": e.position === "center"
       }]),
       "data-test": "ll-modal",
       tabindex: "0",
@@ -85,8 +85,8 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
       g("div", {
         "aria-modal": "true",
         role: "dialog",
-        "aria-labelledby": w(B),
-        class: s(["stash-modal__dialog tw-flex tw-flex-col tw-h-screen tw-w-full lg:tw-shadow tw-relative", [
+        "aria-labelledby": f(B),
+        class: s(["stash-modal__dialog tw-relative tw-flex tw-h-screen tw-w-full tw-flex-col lg:tw-shadow", [
           `stash-modal__dialog--size-${e.size}`,
           `stash-modal__dialog--position-${e.position}`,
           {
@@ -97,8 +97,8 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
             "lg:tw-w-[360px]": e.size === "narrow",
             "lg:tw-w-[648px]": e.size === "medium",
             "lg:tw-w-[960px]": e.size === "wide",
-            "lg:tw-h-auto lg:tw-my-0 lg:tw-max-h-[90vh]": e.position === "center",
-            "lg:tw-h-screen lg:tw-absolute": n.value,
+            "lg:tw-my-0 lg:tw-h-auto lg:tw-max-h-[90vh]": e.position === "center",
+            "lg:tw-absolute lg:tw-h-screen": n.value,
             "lg:tw-left-0": e.position === "left",
             "lg:tw-right-0": e.position === "right"
           }
@@ -106,24 +106,24 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
         onClick: c[0] || (c[0] = j(() => {
         }, ["stop"]))
       }, [
-        e.hideHeader ? i("", !0) : (a(), f("header", {
+        e.hideHeader ? i("", !0) : (a(), w("header", {
           key: 0,
           "data-test": "stash-modal__header",
-          class: s(["stash-modal__header tw-bg-purple-500 tw-h-12 tw-grid tw-place-items-center", { "lg:tw-rounded-t": !n.value }])
+          class: s(["stash-modal__header tw-grid tw-h-12 tw-place-items-center tw-bg-purple-500", { "lg:tw-rounded-t": !n.value }])
         }, [
           g("div", Q, [
             m(t.$slots, "headerAction", {}, void 0, !0)
           ]),
-          e.title ? (a(), f("h3", {
+          e.title ? (a(), w("h3", {
             key: 0,
-            id: w(B),
-            class: "tw-text-white tw-flex-1 tw-leading-6 tw-m-0"
+            id: f(B),
+            class: "tw-m-0 tw-flex-1 tw-leading-6 tw-text-white"
           }, T(e.title), 9, X)) : i("", !0),
           e.hideClose ? i("", !0) : (a(), F(N, {
             key: 1,
             icon: "",
             "data-test": "ll-modal-close",
-            title: w(M)("ll.closeModal"),
+            title: f(M)("ll.closeModal"),
             type: "button",
             onClick: v
           }, {
@@ -142,7 +142,7 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
           icon: "",
           "data-test": "ll-modal-close",
           type: "button",
-          title: w(M)("ll.closeModal"),
+          title: f(M)("ll.closeModal"),
           onClick: v
         }, {
           default: L(() => [
@@ -153,9 +153,9 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
           ]),
           _: 1
         }, 8, ["title"])) : i("", !0),
-        w(y)["featured-content"] ? (a(), f("div", {
+        f(y)["featured-content"] ? (a(), w("div", {
           key: 2,
-          class: s(["tw-relative stash-modal__featured-content", {
+          class: s(["stash-modal__featured-content tw-relative", {
             "tw-rounded-t": e.hideHeader
           }])
         }, [
@@ -175,9 +175,9 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
         }, [
           m(t.$slots, "default", {}, void 0, !0)
         ], 2),
-        z.value ? (a(), f("footer", {
+        z.value ? (a(), w("footer", {
           key: 3,
-          class: s(["stash-modal__footer tw-bg-ice-100 tw-border-ice-500 tw-p-3 lg:tw-p-6", { "lg:tw-rounded-b": !n.value }])
+          class: s(["stash-modal__footer tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-p-6", { "lg:tw-rounded-b": !n.value }])
         }, [
           m(t.$slots, "footer", {}, () => [
             g("div", Y, [
@@ -189,10 +189,10 @@ const G = ["onKeydown"], J = ["aria-labelledby"], Q = { class: "tw-flex tw-place
     ], 42, G)) : i("", !0);
   }
 });
-const fe = /* @__PURE__ */ P(Z, [["__scopeId", "data-v-6f372886"]]);
+const we = /* @__PURE__ */ P(Z, [["__scopeId", "data-v-87b2b608"]]);
 export {
   W as ModalPosition,
   U as ModalSize,
-  fe as default
+  we as default
 };
 //# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n  Narrow = 'narrow',\n  Medium = 'medium',\n  Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n  import { ModalPositions, ModalSizes } from './Modal.types';\n\n  export * from './Modal.types';\n\n  export interface ModalProps {\n    /**\n     * Hides the \"close\" button\n     */\n    hideClose?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     * @deprecated Use `isOpen` instead\n     */\n    open?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     */\n    isOpen?: boolean;\n\n    /**\n     * Use v-model:is-open or :is-open instead of :model-value and v-model.\n     * @deprecated\n     */\n    modelValue?: boolean;\n\n    /**\n     * Sets a preset max-width on the modal.\n     * Options: default (648px), narrow (360px), wide (960px)\n     */\n    size?: ModalSizes;\n\n    /**\n     * Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n     */\n    scrollable?: boolean;\n\n    /**\n     * Gives the modal body have a light gray background\n     */\n    contrast?: boolean;\n\n    /**\n     * Text to display in the modal header\n     */\n    title?: string;\n\n    /**\n     * Disables the default padding in the modal body.\n     */\n    disableBodyPadding?: boolean;\n\n    /**\n     * The position on the screen to display the modal.\n     */\n    position?: ModalPositions;\n\n    /**\n     * Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n     */\n    hideHeader?: boolean;\n\n    /**\n     * Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n     * accommodate images with different color backgrounds.\n     */\n    closeButtonColorClass?: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n  import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n  import { t } from '../../locale';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-modal' });\n\n  const props = withDefaults(defineProps<ModalProps>(), {\n    hideClose: false,\n    open: false,\n    isOpen: false,\n    modelValue: false,\n    size: 'medium',\n    scrollable: false,\n    contrast: false,\n    title: '',\n    position: 'center',\n    hideHeader: false,\n    closeButtonColorClass: 'tw-text-white/50',\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'update:open', isOpen?: boolean): void;\n      (e: 'update:is-open', isOpen?: boolean): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const slots = useSlots();\n\n  const rootRef = ref<HTMLElement>();\n  const lastExternalFocusedElement = ref<HTMLElement>();\n  const focusElements = ref<HTMLElement[]>([]);\n  const firstFocusElement = ref<HTMLElement>();\n  const lastFocusElement = ref<HTMLElement>();\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const headerId = uniqueId('modal-header-');\n  const hasFooterContent = computed(() => !!slots.actions || !!slots.footer);\n  const isModalOpen = computed(() => props.open || props.isOpen);\n  const isDrawer = computed(() => props.position === 'left' || props.position === 'right');\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watch(\n    isModalOpen,\n    () => {\n      if (isModalOpen.value) {\n        Object.assign(initialPageScrollingElementStyle.value, {\n          height: getPageScrollingElement().style.height,\n          overflow: getPageScrollingElement().style.overflow,\n        });\n      }\n\n      Object.assign(getPageScrollingElement().style, {\n        overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n        height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n      });\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n    Object.assign(getPageScrollingElement().style, {\n      overflow: initialPageScrollingElementStyle.value.overflow,\n      height: initialPageScrollingElementStyle.value.height,\n    });\n\n    // Clear focus trap tab listener\n    document.removeEventListener('keydown', handleTab);\n    lastExternalFocusedElement.value?.focus();\n  });\n\n  function dismiss() {\n    emit('update:open', false);\n    emit('update:is-open', false);\n    emit('dismiss');\n  }\n\n  // This watcher ensures the Tab key cycles through focusable elements within the modal.\n  watch(rootRef, () => {\n    if (!rootRef.value) {\n      return;\n    }\n\n    lastExternalFocusedElement.value = document.activeElement as HTMLElement;\n    rootRef.value.focus();\n\n    focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n    firstFocusElement.value = focusElements.value[0];\n    lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n    document.addEventListener('keydown', handleTab);\n  });\n\n  function handleTab(e) {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n        lastFocusElement.value?.focus();\n        e.preventDefault();\n      } else if (document.activeElement === lastFocusElement.value) {\n        firstFocusElement.value?.focus();\n        e.preventDefault();\n      }\n    }\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto\"\n    :class=\"{\n      'tw-invisible tw-z-behind': !isModalOpen,\n      'tw-visible tw-z-modal': isModalOpen,\n      'lg:tw-flex lg:tw-flex-col lg:tw-justify-center lg:tw-items-center': props.position === 'center',\n    }\"\n    data-test=\"ll-modal\"\n    tabindex=\"0\"\n    @keydown.esc=\"dismiss\"\n  >\n    <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n    <div\n      aria-modal=\"true\"\n      role=\"dialog\"\n      :aria-labelledby=\"headerId\"\n      class=\"stash-modal__dialog tw-flex tw-flex-col tw-h-screen tw-w-full lg:tw-shadow tw-relative\"\n      :class=\"[\n        `stash-modal__dialog--size-${props.size}`,\n        `stash-modal__dialog--position-${props.position}`,\n        {\n          'stash-modal__dialog--is-open': isModalOpen,\n          'stash-modal__dialog--is-drawer': isDrawer,\n          'stash-modal__dialog--is-contrast': props.contrast,\n          'stash-modal__dialog--is-scrollable': props.scrollable,\n          'lg:tw-w-[360px]': props.size === 'narrow',\n          'lg:tw-w-[648px]': props.size === 'medium',\n          'lg:tw-w-[960px]': props.size === 'wide',\n          'lg:tw-h-auto lg:tw-my-0 lg:tw-max-h-[90vh]': props.position === 'center',\n          'lg:tw-h-screen lg:tw-absolute': isDrawer,\n          'lg:tw-left-0': props.position === 'left',\n          'lg:tw-right-0': props.position === 'right',\n        },\n      ]\"\n      @click.stop\n    >\n      <header\n        v-if=\"!props.hideHeader\"\n        data-test=\"stash-modal__header\"\n        class=\"stash-modal__header tw-bg-purple-500 tw-h-12 tw-grid tw-place-items-center\"\n        :class=\"{ 'lg:tw-rounded-t': !isDrawer }\"\n      >\n        <div class=\"tw-flex tw-place-items-center\">\n          <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n          <slot name=\"headerAction\"></slot>\n        </div>\n\n        <h3 v-if=\"props.title\" :id=\"headerId\" class=\"tw-text-white tw-flex-1 tw-leading-6 tw-m-0\">\n          {{ props.title }}\n        </h3>\n\n        <Button\n          v-if=\"!props.hideClose\"\n          icon\n          data-test=\"ll-modal-close\"\n          :title=\"t('ll.closeModal')\"\n          type=\"button\"\n          @click=\"dismiss\"\n        >\n          <Icon class=\"tw-text-white\" name=\"close\" />\n        </Button>\n      </header>\n\n      <Button\n        v-if=\"!props.hideClose && props.hideHeader\"\n        class=\"tw-absolute tw-right-0 tw-top-0 tw-z-10\"\n        icon\n        data-test=\"ll-modal-close\"\n        type=\"button\"\n        :title=\"t('ll.closeModal')\"\n        @click=\"dismiss\"\n      >\n        <Icon class=\"tw-drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n      </Button>\n\n      <div\n        v-if=\"!!slots['featured-content']\"\n        class=\"tw-relative stash-modal__featured-content\"\n        :class=\"{\n          'tw-rounded-t': props.hideHeader,\n        }\"\n      >\n        <slot name=\"featured-content\"></slot>\n      </div>\n\n      <div\n        class=\"stash-modal__body tw-flex-1 tw-overflow-y-auto\"\n        :class=\"[\n          {\n            'tw-p-3 lg:tw-p-6': !props.disableBodyPadding,\n            'lg:tw-overflow-y-visible': !props.scrollable && !isDrawer,\n            'lg:tw-rounded-b': !hasFooterContent && !isDrawer,\n            'tw-bg-white': !props.contrast,\n            'tw-bg-ice-200': props.contrast,\n          },\n        ]\"\n        data-test=\"stash-modal__body\"\n      >\n        <slot></slot>\n      </div>\n\n      <footer\n        v-if=\"hasFooterContent\"\n        class=\"stash-modal__footer tw-bg-ice-100 tw-border-ice-500 tw-p-3 lg:tw-p-6\"\n        :class=\"{ 'lg:tw-rounded-b': !isDrawer }\"\n      >\n        <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n        <slot name=\"footer\">\n          <div class=\"stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row\">\n            <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </footer>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .stash-modal__header {\n    grid-template-columns: 48px 1fr 48px;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n    order: 2;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n    margin-bottom: var(--ll-space-2);\n    order: 1;\n  }\n\n  @media screen and (width >= 961px) {\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n      order: 1;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n      margin-bottom: 0;\n      order: 2;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n      margin-left: var(--grid-gutter);\n    }\n  }\n\n  .stash-modal__featured-content > :deep(*) {\n    border-radius: inherit;\n  }\n</style>\n"],"names":["ModalSize","ModalPosition","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","props","isDrawer","getPageScrollingElement","watch","onBeforeUnmount","handleTab","_a","dismiss","emit","FOCUS_ELEMENTS_SELECTOR","e","_b"],"mappings":";;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoGJC,IAAQC,KAERC,IAAUC,KACVC,IAA6BD,KAC7BE,IAAgBF,EAAmB,CAAA,CAAE,GACrCG,IAAoBH,KACpBI,IAAmBJ,KACnBK,IAAmCL,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEM,IAAWC,EAAS,eAAe,GACnCC,IAAmBC,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAW,CAAC,CAACA,EAAM,MAAM,GACnEa,IAAcD,EAAS,MAAME,EAAM,QAAQA,EAAM,MAAM,GACvDC,IAAWH,EAAS,MAAME,EAAM,aAAa,UAAUA,EAAM,aAAa,OAAO;AAEvF,aAASE,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,IAAAC;AAAA,MACEJ;AAAA,MACA,MAAM;AACJ,QAAIA,EAAY,SACP,OAAA,OAAOL,EAAiC,OAAO;AAAA,UACpD,QAAQQ,IAA0B,MAAM;AAAA,UACxC,UAAUA,IAA0B,MAAM;AAAA,QAAA,CAC3C,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,UAC7C,UAAUH,EAAY,QAAQ,WAAWL,EAAiC,MAAM;AAAA;AAAA,UAChF,QAAQK,EAAY,QAAQ,SAASL,EAAiC,MAAM;AAAA;AAAA,QAAA,CAC7E;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBU,EAAgB,MAAM;;AAEb,aAAA,OAAOF,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAiC,MAAM;AAAA,QACjD,QAAQA,EAAiC,MAAM;AAAA,MAAA,CAChD,GAGQ,SAAA,oBAAoB,WAAWW,CAAS,IACjDC,IAAAhB,EAA2B,UAA3B,QAAAgB,EAAkC;AAAA,IAAM,CACzC;AAED,aAASC,IAAU;AACjB,MAAAC,EAAK,eAAe,EAAK,GACzBA,EAAK,kBAAkB,EAAK,GAC5BA,EAAK,SAAS;AAAA,IAChB;AAGA,IAAAL,EAAMf,GAAS,MAAM;AACf,MAACA,EAAQ,UAIbE,EAA2B,QAAQ,SAAS,eAC5CF,EAAQ,MAAM,SAEdG,EAAc,QAAQ,MAAM,KAAKH,EAAQ,MAAM,iBAA8BqB,CAAuB,CAAC,GACnFjB,EAAA,QAAQD,EAAc,MAAM,CAAC,GAC/CE,EAAiB,QAAQF,EAAc,MAAMA,EAAc,MAAM,SAAS,CAAC,GAClE,SAAA,iBAAiB,WAAWc,CAAS;AAAA,IAAA,CAC/C;AAED,aAASA,EAAUK,GAAG;;AAChB,MAAAA,EAAE,QAAQ,UACRA,EAAE,YAAY,SAAS,kBAAkBlB,EAAkB,UAC7Dc,IAAAb,EAAiB,UAAjB,QAAAa,EAAwB,SACxBI,EAAE,eAAe,KACR,SAAS,kBAAkBjB,EAAiB,WACrDkB,IAAAnB,EAAkB,UAAlB,QAAAmB,EAAyB,SACzBD,EAAE,eAAe;AAAA,IAGvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.types.ts","../src/components/Modal/Modal.vue"],"sourcesContent":["export enum ModalSize {\n  Narrow = 'narrow',\n  Medium = 'medium',\n  Wide = 'wide',\n}\n\nexport type ModalSizes = `${ModalSize}`;\n\nexport enum ModalPosition {\n  Center = 'center',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type ModalPositions = `${ModalPosition}`;\n","<script lang=\"ts\">\n  import { ModalPositions, ModalSizes } from './Modal.types';\n\n  export * from './Modal.types';\n\n  export interface ModalProps {\n    /**\n     * Hides the \"close\" button\n     */\n    hideClose?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     * @deprecated Use `isOpen` instead\n     */\n    open?: boolean;\n\n    /**\n     * Opens the modal when truthy; hides the modal when falsy.\n     */\n    isOpen?: boolean;\n\n    /**\n     * Use v-model:is-open or :is-open instead of :model-value and v-model.\n     * @deprecated\n     */\n    modelValue?: boolean;\n\n    /**\n     * Sets a preset max-width on the modal.\n     * Options: default (648px), narrow (360px), wide (960px)\n     */\n    size?: ModalSizes;\n\n    /**\n     * Should the modal be scrollable within the content area. This prop is treated as `true` when the `position` prop is set to \"left\" or \"right\".\n     */\n    scrollable?: boolean;\n\n    /**\n     * Gives the modal body have a light gray background\n     */\n    contrast?: boolean;\n\n    /**\n     * Text to display in the modal header\n     */\n    title?: string;\n\n    /**\n     * Disables the default padding in the modal body.\n     */\n    disableBodyPadding?: boolean;\n\n    /**\n     * The position on the screen to display the modal.\n     */\n    position?: ModalPositions;\n\n    /**\n     * Hide the header. Typically used with the featuredContent slot to display a graphic and create a \"promo\" modal.\n     */\n    hideHeader?: boolean;\n\n    /**\n     * Add classes to the close button. This can be used with the hideHeader prop and featuredContent slot to\n     * accommodate images with different color backgrounds.\n     */\n    closeButtonColorClass?: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue';\n\n  import { FOCUS_ELEMENTS_SELECTOR } from '../../constants';\n  import { t } from '../../locale';\n  import Backdrop from '../Backdrop/Backdrop.vue';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-modal' });\n\n  const props = withDefaults(defineProps<ModalProps>(), {\n    hideClose: false,\n    open: false,\n    isOpen: false,\n    modelValue: false,\n    size: 'medium',\n    scrollable: false,\n    contrast: false,\n    title: '',\n    position: 'center',\n    hideHeader: false,\n    closeButtonColorClass: 'tw-text-white/50',\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * @deprecated Use the `update:is-open` event instead\n       */\n      (e: 'update:open', isOpen?: boolean): void;\n      (e: 'update:is-open', isOpen?: boolean): void;\n      (e: 'dismiss'): void;\n    }>();\n\n  const slots = useSlots();\n\n  const rootRef = ref<HTMLElement>();\n  const lastExternalFocusedElement = ref<HTMLElement>();\n  const focusElements = ref<HTMLElement[]>([]);\n  const firstFocusElement = ref<HTMLElement>();\n  const lastFocusElement = ref<HTMLElement>();\n  const initialPageScrollingElementStyle = ref({ height: '', overflow: '' });\n  const headerId = uniqueId('modal-header-');\n  const hasFooterContent = computed(() => !!slots.actions || !!slots.footer);\n  const isModalOpen = computed(() => props.open || props.isOpen);\n  const isDrawer = computed(() => props.position === 'left' || props.position === 'right');\n\n  function getPageScrollingElement() {\n    return (document.scrollingElement || document.body) as HTMLElement;\n  }\n\n  watch(\n    isModalOpen,\n    () => {\n      if (isModalOpen.value) {\n        Object.assign(initialPageScrollingElementStyle.value, {\n          height: getPageScrollingElement().style.height,\n          overflow: getPageScrollingElement().style.overflow,\n        });\n      }\n\n      Object.assign(getPageScrollingElement().style, {\n        overflow: isModalOpen.value ? 'hidden' : initialPageScrollingElementStyle.value.overflow, // Prevents page from scrolling when modal is open\n        height: isModalOpen.value ? '100%' : initialPageScrollingElementStyle.value.height, // Ensures the backdrop covers the entire page when modal is open; see https://github.com/LeafLink/stash/pull/713#issuecomment-1184602535\n      });\n    },\n    { immediate: true },\n  );\n\n  onBeforeUnmount(() => {\n    // In cases where the watchEffect for isModalOpen isn't triggered while closing/nagivating away from modal, this ensures scrolling returns to normal\n    Object.assign(getPageScrollingElement().style, {\n      overflow: initialPageScrollingElementStyle.value.overflow,\n      height: initialPageScrollingElementStyle.value.height,\n    });\n\n    // Clear focus trap tab listener\n    document.removeEventListener('keydown', handleTab);\n    lastExternalFocusedElement.value?.focus();\n  });\n\n  function dismiss() {\n    emit('update:open', false);\n    emit('update:is-open', false);\n    emit('dismiss');\n  }\n\n  // This watcher ensures the Tab key cycles through focusable elements within the modal.\n  watch(rootRef, () => {\n    if (!rootRef.value) {\n      return;\n    }\n\n    lastExternalFocusedElement.value = document.activeElement as HTMLElement;\n    rootRef.value.focus();\n\n    focusElements.value = Array.from(rootRef.value.querySelectorAll<HTMLElement>(FOCUS_ELEMENTS_SELECTOR));\n    firstFocusElement.value = focusElements.value[0];\n    lastFocusElement.value = focusElements.value[focusElements.value.length - 1];\n    document.addEventListener('keydown', handleTab);\n  });\n\n  function handleTab(e) {\n    if (e.key === 'Tab') {\n      if (e.shiftKey && document.activeElement === firstFocusElement.value) {\n        lastFocusElement.value?.focus();\n        e.preventDefault();\n      } else if (document.activeElement === lastFocusElement.value) {\n        firstFocusElement.value?.focus();\n        e.preventDefault();\n      }\n    }\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal tw-fixed tw-inset-0 tw-overflow-y-auto\"\n    :class=\"{\n      'tw-invisible tw-z-behind': !isModalOpen,\n      'tw-visible tw-z-modal': isModalOpen,\n      'lg:tw-flex lg:tw-flex-col lg:tw-items-center lg:tw-justify-center': props.position === 'center',\n    }\"\n    data-test=\"ll-modal\"\n    tabindex=\"0\"\n    @keydown.esc=\"dismiss\"\n  >\n    <Backdrop class=\"stash-modal__backdrop\" @click.stop=\"dismiss\" />\n    <div\n      aria-modal=\"true\"\n      role=\"dialog\"\n      :aria-labelledby=\"headerId\"\n      class=\"stash-modal__dialog tw-relative tw-flex tw-h-screen tw-w-full tw-flex-col lg:tw-shadow\"\n      :class=\"[\n        `stash-modal__dialog--size-${props.size}`,\n        `stash-modal__dialog--position-${props.position}`,\n        {\n          'stash-modal__dialog--is-open': isModalOpen,\n          'stash-modal__dialog--is-drawer': isDrawer,\n          'stash-modal__dialog--is-contrast': props.contrast,\n          'stash-modal__dialog--is-scrollable': props.scrollable,\n          'lg:tw-w-[360px]': props.size === 'narrow',\n          'lg:tw-w-[648px]': props.size === 'medium',\n          'lg:tw-w-[960px]': props.size === 'wide',\n          'lg:tw-my-0 lg:tw-h-auto lg:tw-max-h-[90vh]': props.position === 'center',\n          'lg:tw-absolute lg:tw-h-screen': isDrawer,\n          'lg:tw-left-0': props.position === 'left',\n          'lg:tw-right-0': props.position === 'right',\n        },\n      ]\"\n      @click.stop\n    >\n      <header\n        v-if=\"!props.hideHeader\"\n        data-test=\"stash-modal__header\"\n        class=\"stash-modal__header tw-grid tw-h-12 tw-place-items-center tw-bg-purple-500\"\n        :class=\"{ 'lg:tw-rounded-t': !isDrawer }\"\n      >\n        <div class=\"tw-flex tw-place-items-center\">\n          <!-- @slot Adds an action to the left side of the header bar. An example usage is a modal with multiple pages and a back button can be inserted here -->\n          <slot name=\"headerAction\"></slot>\n        </div>\n\n        <h3 v-if=\"props.title\" :id=\"headerId\" class=\"tw-m-0 tw-flex-1 tw-leading-6 tw-text-white\">\n          {{ props.title }}\n        </h3>\n\n        <Button\n          v-if=\"!props.hideClose\"\n          icon\n          data-test=\"ll-modal-close\"\n          :title=\"t('ll.closeModal')\"\n          type=\"button\"\n          @click=\"dismiss\"\n        >\n          <Icon class=\"tw-text-white\" name=\"close\" />\n        </Button>\n      </header>\n\n      <Button\n        v-if=\"!props.hideClose && props.hideHeader\"\n        class=\"tw-absolute tw-right-0 tw-top-0 tw-z-10\"\n        icon\n        data-test=\"ll-modal-close\"\n        type=\"button\"\n        :title=\"t('ll.closeModal')\"\n        @click=\"dismiss\"\n      >\n        <Icon class=\"tw-drop-shadow-md\" name=\"close\" :class=\"[props.closeButtonColorClass]\" />\n      </Button>\n\n      <div\n        v-if=\"!!slots['featured-content']\"\n        class=\"stash-modal__featured-content tw-relative\"\n        :class=\"{\n          'tw-rounded-t': props.hideHeader,\n        }\"\n      >\n        <slot name=\"featured-content\"></slot>\n      </div>\n\n      <div\n        class=\"stash-modal__body tw-flex-1 tw-overflow-y-auto\"\n        :class=\"[\n          {\n            'tw-p-3 lg:tw-p-6': !props.disableBodyPadding,\n            'lg:tw-overflow-y-visible': !props.scrollable && !isDrawer,\n            'lg:tw-rounded-b': !hasFooterContent && !isDrawer,\n            'tw-bg-white': !props.contrast,\n            'tw-bg-ice-200': props.contrast,\n          },\n        ]\"\n        data-test=\"stash-modal__body\"\n      >\n        <slot></slot>\n      </div>\n\n      <footer\n        v-if=\"hasFooterContent\"\n        class=\"stash-modal__footer tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-p-6\"\n        :class=\"{ 'lg:tw-rounded-b': !isDrawer }\"\n      >\n        <!-- @slot Overrides the whole footer section. Used for rendering custom footers with more than 2 actions. If defined, \"actions\" slot will get ignored. -->\n        <slot name=\"footer\">\n          <div class=\"stash-modal__footer__actions tw-flex tw-flex-col tw-justify-end lg:tw-flex-row\">\n            <!-- @slot Modal footer actions, supports rendering up to 2 `<Button>` children -->\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </footer>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n  .stash-modal__header {\n    grid-template-columns: 48px 1fr 48px;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n    order: 2;\n  }\n\n  .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n    margin-bottom: theme('spacing.3');\n    order: 1;\n  }\n\n  @media screen('lg') {\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(1) {\n      order: 1;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button):nth-of-type(2) {\n      margin-bottom: 0;\n      order: 2;\n    }\n\n    .stash-modal__footer__actions > :deep(.stash-button + .stash-button) {\n      margin-left: var(--grid-gutter);\n    }\n  }\n\n  .stash-modal__featured-content > :deep(*) {\n    border-radius: inherit;\n  }\n</style>\n"],"names":["ModalSize","ModalPosition","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","props","isDrawer","getPageScrollingElement","watch","onBeforeUnmount","handleTab","_a","dismiss","emit","FOCUS_ELEMENTS_SELECTOR","e","_b"],"mappings":";;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,OAAO,QAHGA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAHEA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;iBCoGJC,IAAQC,KAERC,IAAUC,KACVC,IAA6BD,KAC7BE,IAAgBF,EAAmB,CAAA,CAAE,GACrCG,IAAoBH,KACpBI,IAAmBJ,KACnBK,IAAmCL,EAAI,EAAE,QAAQ,IAAI,UAAU,IAAI,GACnEM,IAAWC,EAAS,eAAe,GACnCC,IAAmBC,EAAS,MAAM,CAAC,CAACZ,EAAM,WAAW,CAAC,CAACA,EAAM,MAAM,GACnEa,IAAcD,EAAS,MAAME,EAAM,QAAQA,EAAM,MAAM,GACvDC,IAAWH,EAAS,MAAME,EAAM,aAAa,UAAUA,EAAM,aAAa,OAAO;AAEvF,aAASE,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,IAAAC;AAAA,MACEJ;AAAA,MACA,MAAM;AACJ,QAAIA,EAAY,SACP,OAAA,OAAOL,EAAiC,OAAO;AAAA,UACpD,QAAQQ,IAA0B,MAAM;AAAA,UACxC,UAAUA,IAA0B,MAAM;AAAA,QAAA,CAC3C,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,UAC7C,UAAUH,EAAY,QAAQ,WAAWL,EAAiC,MAAM;AAAA;AAAA,UAChF,QAAQK,EAAY,QAAQ,SAASL,EAAiC,MAAM;AAAA;AAAA,QAAA,CAC7E;AAAA,MACH;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBU,EAAgB,MAAM;;AAEb,aAAA,OAAOF,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUR,EAAiC,MAAM;AAAA,QACjD,QAAQA,EAAiC,MAAM;AAAA,MAAA,CAChD,GAGQ,SAAA,oBAAoB,WAAWW,CAAS,IACjDC,IAAAhB,EAA2B,UAA3B,QAAAgB,EAAkC;AAAA,IAAM,CACzC;AAED,aAASC,IAAU;AACjB,MAAAC,EAAK,eAAe,EAAK,GACzBA,EAAK,kBAAkB,EAAK,GAC5BA,EAAK,SAAS;AAAA,IAChB;AAGA,IAAAL,EAAMf,GAAS,MAAM;AACf,MAACA,EAAQ,UAIbE,EAA2B,QAAQ,SAAS,eAC5CF,EAAQ,MAAM,SAEdG,EAAc,QAAQ,MAAM,KAAKH,EAAQ,MAAM,iBAA8BqB,CAAuB,CAAC,GACnFjB,EAAA,QAAQD,EAAc,MAAM,CAAC,GAC/CE,EAAiB,QAAQF,EAAc,MAAMA,EAAc,MAAM,SAAS,CAAC,GAClE,SAAA,iBAAiB,WAAWc,CAAS;AAAA,IAAA,CAC/C;AAED,aAASA,EAAUK,GAAG;;AAChB,MAAAA,EAAE,QAAQ,UACRA,EAAE,YAAY,SAAS,kBAAkBlB,EAAkB,UAC7Dc,IAAAb,EAAiB,UAAjB,QAAAa,EAAwB,SACxBI,EAAE,eAAe,KACR,SAAS,kBAAkBjB,EAAiB,WACrDkB,IAAAnB,EAAkB,UAAlB,QAAAmB,EAAyB,SACzBD,EAAE,eAAe;AAAA,IAGvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Modals.js

@@ -1,11 +1,11 @@
-import { defineComponent as p, openBlock as s, createBlock as c, TransitionGroup as d, withCtx as a, createElementBlock as m, Fragment as f, renderList as l, unref as v, resolveDynamicComponent as M, mergeProps as L, toHandlers as g, createSlots as k, createElementVNode as y } from "vue";
-import h from "./useModals.js";
-import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as p, openBlock as s, createBlock as a, TransitionGroup as m, withCtx as c, createElementBlock as d, Fragment as f, renderList as l, unref as v, resolveDynamicComponent as M, mergeProps as L, toHandlers as b, createSlots as g, createElementVNode as k } from "vue";
+import y from "./useModals.js";
+import { _ as h } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/merge";
-const C = ["innerHTML"], H = /* @__PURE__ */ p({
+const B = ["innerHTML"], C = /* @__PURE__ */ p({
   __name: "Modals",
-  setup(T) {
-    const t = h();
+  setup(H) {
+    const t = y();
     function _(n, o) {
       var e;
       return (e = n.options) != null && e.disableDefaultListeners ? {} : {
@@ -14,15 +14,15 @@ const C = ["innerHTML"], H = /* @__PURE__ */ p({
         cancel: () => t.close({ index: o })
       };
     }
-    return (n, o) => (s(), c(d, { name: "modals" }, {
-      default: a(() => [
-        (s(!0), m(f, null, l(v(t).active, (e, r) => (s(), c(M(e.component), L({
+    return (n, o) => (s(), a(m, { name: "modals" }, {
+      default: c(() => [
+        (s(!0), d(f, null, l(v(t).active, (e, r) => (s(), a(M(e.component), L({
           key: `modal-${r}`
-        }, e.attributes, { "is-open": !0 }, g(_(e, r))), k({ _: 2 }, [
+        }, e.attributes, { "is-open": !0 }, b(_(e, r))), g({ _: 2 }, [
           l(e.slots, (i, u) => ({
             name: u,
-            fn: a(() => [
-              y("div", { innerHTML: i }, null, 8, C)
+            fn: c(() => [
+              k("div", { innerHTML: i }, null, 8, B)
             ])
           }))
         ]), 1040))), 128))
@@ -31,7 +31,7 @@ const C = ["innerHTML"], H = /* @__PURE__ */ p({
     }));
   }
 });
-const w = /* @__PURE__ */ B(H, [["__scopeId", "data-v-d5d094e6"]]);
+const w = /* @__PURE__ */ h(C, [["__scopeId", "data-v-370a72b6"]]);
 export {
   w as default
 };

package/dist/Modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  function getListeners(modal: DeepReadonly<Modal>, index: number) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index }),\n      close: () => modals.close({ index }),\n      cancel: () => modals.close({ index }),\n    };\n  }\n</script>\n\n<template>\n  <TransitionGroup name=\"modals\">\n    <component\n      :is=\"modal.component\"\n      v-for=\"(modal, index) in modals.active\"\n      :key=\"`modal-${index}`\"\n      v-bind=\"modal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(modal, index)\"\n    >\n      <template v-for=\"(value, name) in modal.slots\" :key=\"name\" #[name]>\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </TransitionGroup>\n</template>\n\n<style scoped>\n  .modals-enter-active,\n  .modals-leave-active {\n    --swing-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); /* \"swing\" from the $transition sass map */\n    transition: opacity 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from,\n  .modals-leave-to {\n    opacity: 0;\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--position-center),\n  .modals-leave-active :deep(.stash-modal__dialog--position-center) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-center),\n  .modals-leave-to :deep(.stash-modal__dialog--position-center) {\n    transform: translateY(20px);\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--is-drawer),\n  .modals-leave-active :deep(.stash-modal__dialog--is-drawer) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-left),\n  .modals-leave-to :deep(.stash-modal__dialog--position-left) {\n    transform: translateX(-50px);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-right),\n  .modals-leave-to :deep(.stash-modal__dialog--position-right) {\n    transform: translateX(50px);\n  }\n</style>\n"],"names":["modals","useModals","getListeners","modal","index","_a"],"mappings":";;;;;;;AAKE,UAAMA,IAASC;AAEN,aAAAC,EAAaC,GAA4BC,GAAe;;AAC3D,cAAAC,IAAAF,EAAM,YAAN,QAAAE,EAAe,0BACV,KAGF;AAAA,QACL,SAAS,MAAML,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,QACrC,OAAO,MAAMJ,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,QACnC,QAAQ,MAAMJ,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,MAAA;AAAA,IAExC;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  function getListeners(modal: DeepReadonly<Modal>, index: number) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index }),\n      close: () => modals.close({ index }),\n      cancel: () => modals.close({ index }),\n    };\n  }\n</script>\n\n<template>\n  <TransitionGroup name=\"modals\">\n    <component\n      :is=\"modal.component\"\n      v-for=\"(modal, index) in modals.active\"\n      :key=\"`modal-${index}`\"\n      v-bind=\"modal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(modal, index)\"\n    >\n      <template v-for=\"(value, name) in modal.slots\" :key=\"name\" #[name]>\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </TransitionGroup>\n</template>\n\n<style scoped>\n  .modals-enter-active,\n  .modals-leave-active {\n    --swing-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); /* \"swing\" from the $transition sass map */\n    transition: opacity 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from,\n  .modals-leave-to {\n    opacity: 0;\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--position-center),\n  .modals-leave-active :deep(.stash-modal__dialog--position-center) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-center),\n  .modals-leave-to :deep(.stash-modal__dialog--position-center) {\n    transform: translateY(20px);\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--is-drawer),\n  .modals-leave-active :deep(.stash-modal__dialog--is-drawer) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-left),\n  .modals-leave-to :deep(.stash-modal__dialog--position-left) {\n    transform: translateX(-50px);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-right),\n  .modals-leave-to :deep(.stash-modal__dialog--position-right) {\n    transform: translateX(50px);\n  }\n</style>\n"],"names":["modals","useModals","getListeners","modal","index","_a"],"mappings":";;;;;;;AAKE,UAAMA,IAASC;AAEN,aAAAC,EAAaC,GAA4BC,GAAe;;AAC3D,cAAAC,IAAAF,EAAM,YAAN,QAAAE,EAAe,0BACV,KAGF;AAAA,QACL,SAAS,MAAML,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,QACrC,OAAO,MAAMJ,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,QACnC,QAAQ,MAAMJ,EAAO,MAAM,EAAE,OAAAI,GAAO;AAAA,MAAA;AAAA,IAExC;;;;;;;;;;;;;;;;;;;"}

package/dist/Module.js

@@ -19,9 +19,9 @@ const y = /* @__PURE__ */ i({
       a.variant === "card" && o.warn('Card Modules are no longer a thing. You\'re probably looking for `<RadioGroup variant="card">`.'), a.variant === "list" && o.warn("Only used with deprecated ListView component. Use `table` variant with `Table` component instead.");
     }), s(w.key, { variant: d(() => a.variant) }), (n, f) => (p(), u(v, {
       class: b(["stash-module tw-flex tw-flex-col", {
-        "tw-shadow-none lg:tw-shadow tw-bg-transparent": a.variant === t(e).Table,
+        "tw-bg-transparent tw-shadow-none lg:tw-shadow": a.variant === t(e).Table,
         "tw-border tw-border-ice-500": a.variant === t(e).Card,
-        "tw-shadow-none lg:tw-shadow tw-bg-transparent tw-mb-6": a.variant === t(e).List
+        "tw-mb-6 tw-bg-transparent tw-shadow-none lg:tw-shadow": a.variant === t(e).List
       }]),
       "data-test": "stash-module",
       "disable-gutters": a.disableGutters,

package/dist/Module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Module.js","sources":["../src/components/Module/Module.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Box, { type BoxProps } from '../Box/Box.vue';\n  import { ModuleVariant, type ModuleVariants } from './Module.types';\n\n  export * from './Module.keys';\n  export * from './Module.types';\n\n  export interface ModuleProps extends BoxProps {\n    /**\n     * Variant applied.\n     *\n     * Options: `box`, `card`, `list`.\n     */\n    variant?: ModuleVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, onMounted, provide } from 'vue';\n\n  import { MODULE_INJECTION } from './Module.keys';\n\n  defineOptions({\n    name: 'll-module',\n  });\n\n  const props = withDefaults(defineProps<ModuleProps>(), {\n    variant: ModuleVariant.Box,\n  });\n\n  onMounted(() => {\n    if (props.variant === 'card') {\n      logger.warn('Card Modules are no longer a thing. You\\'re probably looking for `<RadioGroup variant=\"card\">`.');\n    }\n\n    if (props.variant === 'list') {\n      logger.warn('Only used with deprecated ListView component. Use `table` variant with `Table` component instead.');\n    }\n  });\n\n  provide(MODULE_INJECTION.key, { variant: computed(() => props.variant) });\n</script>\n\n<template>\n  <Box\n    class=\"stash-module tw-flex tw-flex-col\"\n    data-test=\"stash-module\"\n    :class=\"{\n      'tw-shadow-none lg:tw-shadow tw-bg-transparent': props.variant === ModuleVariant.Table,\n      'tw-border tw-border-ice-500': props.variant === ModuleVariant.Card,\n      'tw-shadow-none lg:tw-shadow tw-bg-transparent tw-mb-6': props.variant === ModuleVariant.List,\n    }\"\n    :disable-gutters=\"props.disableGutters\"\n    :disable-padding=\"props.disablePadding || ['card', 'list', 'table'].includes(props.variant)\"\n    :disable-elevation=\"\n      props.disableElevation ||\n      props.variant === ModuleVariant.Table ||\n      props.variant === ModuleVariant.Card ||\n      props.variant === ModuleVariant.List\n    \"\n  >\n    <slot></slot>\n  </Box>\n</template>\n"],"names":["onMounted","props","logger","provide","MODULE_INJECTION","computed"],"mappings":";;;;;;;;;;;;;;;;;AA+BE,WAAAA,EAAU,MAAM;AACV,MAAAC,EAAM,YAAY,UACpBC,EAAO,KAAK,iGAAiG,GAG3GD,EAAM,YAAY,UACpBC,EAAO,KAAK,mGAAmG;AAAA,IACjH,CACD,GAEOC,EAAAC,EAAiB,KAAK,EAAE,SAASC,EAAS,MAAMJ,EAAM,OAAO,EAAA,CAAG;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Module.js","sources":["../src/components/Module/Module.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Box, { type BoxProps } from '../Box/Box.vue';\n  import { ModuleVariant, type ModuleVariants } from './Module.types';\n\n  export * from './Module.keys';\n  export * from './Module.types';\n\n  export interface ModuleProps extends BoxProps {\n    /**\n     * Variant applied.\n     *\n     * Options: `box`, `card`, `list`.\n     */\n    variant?: ModuleVariants;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import logger from '@leaflink/snitch';\n  import { computed, onMounted, provide } from 'vue';\n\n  import { MODULE_INJECTION } from './Module.keys';\n\n  defineOptions({\n    name: 'll-module',\n  });\n\n  const props = withDefaults(defineProps<ModuleProps>(), {\n    variant: ModuleVariant.Box,\n  });\n\n  onMounted(() => {\n    if (props.variant === 'card') {\n      logger.warn('Card Modules are no longer a thing. You\\'re probably looking for `<RadioGroup variant=\"card\">`.');\n    }\n\n    if (props.variant === 'list') {\n      logger.warn('Only used with deprecated ListView component. Use `table` variant with `Table` component instead.');\n    }\n  });\n\n  provide(MODULE_INJECTION.key, { variant: computed(() => props.variant) });\n</script>\n\n<template>\n  <Box\n    class=\"stash-module tw-flex tw-flex-col\"\n    data-test=\"stash-module\"\n    :class=\"{\n      'tw-bg-transparent tw-shadow-none lg:tw-shadow': props.variant === ModuleVariant.Table,\n      'tw-border tw-border-ice-500': props.variant === ModuleVariant.Card,\n      'tw-mb-6 tw-bg-transparent tw-shadow-none lg:tw-shadow': props.variant === ModuleVariant.List,\n    }\"\n    :disable-gutters=\"props.disableGutters\"\n    :disable-padding=\"props.disablePadding || ['card', 'list', 'table'].includes(props.variant)\"\n    :disable-elevation=\"\n      props.disableElevation ||\n      props.variant === ModuleVariant.Table ||\n      props.variant === ModuleVariant.Card ||\n      props.variant === ModuleVariant.List\n    \"\n  >\n    <slot></slot>\n  </Box>\n</template>\n"],"names":["onMounted","props","logger","provide","MODULE_INJECTION","computed"],"mappings":";;;;;;;;;;;;;;;;;AA+BE,WAAAA,EAAU,MAAM;AACV,MAAAC,EAAM,YAAY,UACpBC,EAAO,KAAK,iGAAiG,GAG3GD,EAAM,YAAY,UACpBC,EAAO,KAAK,mGAAmG;AAAA,IACjH,CACD,GAEOC,EAAAC,EAAiB,KAAK,EAAE,SAASC,EAAS,MAAMJ,EAAM,OAAO,EAAA,CAAG;;;;;;;;;;;;;;;;;;"}

package/dist/ModuleContent.js

@@ -3,7 +3,7 @@ import { M as u } from "./Module.keys-2cc7d830.js";
 import { M as n } from "./Module.types-3f78f2a0.js";
 const _ = {
   key: 0,
-  class: "stash-module-content__top-slots tw-flex tw-flex-wrap tw-justify-between tw-items-center",
+  class: "stash-module-content__top-slots tw-flex tw-flex-wrap tw-items-center tw-justify-between",
   "data-test": "stash-module-content|top-slots"
 }, v = {
   class: "tw-mb-6 tw-mr-6",
@@ -23,7 +23,7 @@ const _ = {
       o.value = t.variant.value;
     }), (t, C) => (a(), r("div", {
       class: w(["stash-module-content tw-flex-1", {
-        "tw-px-3 lg:tw-px-6 tw-py-6": o.value === e(n).Card,
+        "tw-px-3 tw-py-6 lg:tw-px-6": o.value === e(n).Card,
         "tw-border-t tw-border-ice-200": o.value === e(n).Table || o.value === e(n).List
       }]),
       "data-test": "stash-module-content"

package/dist/ModuleContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleContent.js","sources":["../src/components/ModuleContent/ModuleContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, onBeforeMount, ref, useSlots } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  defineOptions({\n    name: 'll-module-content',\n  });\n\n  const slots = useSlots();\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleContent must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-module-content tw-flex-1\"\n    data-test=\"stash-module-content\"\n    :class=\"{\n      'tw-px-3 lg:tw-px-6 tw-py-6': moduleVariant === ModuleVariant.Card,\n      'tw-border-t tw-border-ice-200': moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n    }\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      class=\"stash-module-content__top-slots tw-flex tw-flex-wrap tw-justify-between tw-items-center\"\n      data-test=\"stash-module-content|top-slots\"\n    >\n      <!--\n        For styling purposes, we always render both slots. In the scenario where only a top-right is\n        provided, the div wrappers ensure space-between works and puts top-right on the right side.\n      -->\n      <div class=\"tw-mb-6 tw-mr-6\" data-test=\"stash-module-content|top-left-slot\"><slot name=\"top-left\"></slot></div>\n      <div class=\"tw-mb-6\" data-test=\"stash-module-content|top-right-slot\"><slot name=\"top-right\"></slot></div>\n    </div>\n\n    <slot></slot>\n  </div>\n</template>\n"],"names":["slots","useSlots","moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;AAUE,UAAMA,IAAQC,KACRC,IAAgBC;AAEtB,WAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,uDAAuD;AAE3D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ModuleContent.js","sources":["../src/components/ModuleContent/ModuleContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, onBeforeMount, ref, useSlots } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  defineOptions({\n    name: 'll-module-content',\n  });\n\n  const slots = useSlots();\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleContent must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-module-content tw-flex-1\"\n    data-test=\"stash-module-content\"\n    :class=\"{\n      'tw-px-3 tw-py-6 lg:tw-px-6': moduleVariant === ModuleVariant.Card,\n      'tw-border-t tw-border-ice-200': moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n    }\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      class=\"stash-module-content__top-slots tw-flex tw-flex-wrap tw-items-center tw-justify-between\"\n      data-test=\"stash-module-content|top-slots\"\n    >\n      <!--\n        For styling purposes, we always render both slots. In the scenario where only a top-right is\n        provided, the div wrappers ensure space-between works and puts top-right on the right side.\n      -->\n      <div class=\"tw-mb-6 tw-mr-6\" data-test=\"stash-module-content|top-left-slot\"><slot name=\"top-left\"></slot></div>\n      <div class=\"tw-mb-6\" data-test=\"stash-module-content|top-right-slot\"><slot name=\"top-right\"></slot></div>\n    </div>\n\n    <slot></slot>\n  </div>\n</template>\n"],"names":["slots","useSlots","moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;AAUE,UAAMA,IAAQC,KACRC,IAAgBC;AAEtB,WAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,uDAAuD;AAE3D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;;;;;;;;;;;;;;;;;;;"}

package/dist/ModuleFooter.js

@@ -1,24 +1,24 @@
-import { defineComponent as n, ref as l, onBeforeMount as u, inject as w, openBlock as d, createElementBlock as s, normalizeClass as p, unref as o, renderSlot as i } from "vue";
+import { defineComponent as n, ref as l, onBeforeMount as u, inject as d, openBlock as s, createElementBlock as w, normalizeClass as i, unref as o, renderSlot as p } from "vue";
 import { M as a } from "./Module.keys-2cc7d830.js";
 import { M as r } from "./Module.types-3f78f2a0.js";
 const h = /* @__PURE__ */ n({
   __name: "ModuleFooter",
   setup(m) {
-    const t = l();
+    const e = l();
     return u(() => {
-      const e = w(a.key, a.defaults);
-      if (!e.variant)
+      const t = d(a.key, a.defaults);
+      if (!t.variant)
         throw new Error("ModuleContent must be used within a Module component.");
-      t.value = e.variant.value;
-    }), (e, f) => (d(), s("div", {
-      class: p(["stash-module-footer tw-flex tw-flex-wrap tw-justify-between", {
-        "tw-px-3 lg:tw-px-6 tw-pb-6 tw-pt-0 tw-border-b tw-border-ice-500 tw-rounded-b": t.value === o(r).Card,
-        "tw-px-3 lg:tw-px-6 tw-py-3 tw-bg-white tw-rounded lg:tw-rounded-t-none tw-shadow lg:tw-shadow-none": t.value === o(r).Table || t.value === o(r).List,
-        "tw-pt-3 lg:tw-pt-6 tw-mb-0": t.value === o(r).Box
+      e.value = t.variant.value;
+    }), (t, f) => (s(), w("div", {
+      class: i(["stash-module-footer tw-flex tw-flex-wrap tw-justify-between", {
+        "tw-rounded-b tw-border-b tw-border-ice-500 tw-px-3 tw-pb-6 tw-pt-0 lg:tw-px-6": e.value === o(r).Card,
+        "tw-rounded tw-bg-white tw-p-3 tw-shadow lg:tw-rounded-t-none lg:tw-px-6 lg:tw-shadow-none": e.value === o(r).Table || e.value === o(r).List,
+        "tw-mb-0 tw-pt-3 lg:tw-pt-6": e.value === o(r).Box
       }]),
       "data-test": "stash-module-footer"
     }, [
-      i(e.$slots, "default")
+      p(t.$slots, "default")
     ], 2));
   }
 });

package/dist/ModuleFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleFooter.js","sources":["../src/components/ModuleFooter/ModuleFooter.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, onBeforeMount, ref } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleContent must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-module-footer tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-px-3 lg:tw-px-6 tw-pb-6 tw-pt-0 tw-border-b tw-border-ice-500 tw-rounded-b':\n        moduleVariant === ModuleVariant.Card,\n      'tw-px-3 lg:tw-px-6 tw-py-3 tw-bg-white tw-rounded lg:tw-rounded-t-none tw-shadow lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-pt-3 lg:tw-pt-6 tw-mb-0': moduleVariant === ModuleVariant.Box,\n    }\"\n    data-test=\"stash-module-footer\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION"],"mappings":";;;;;;AAME,UAAMA,IAAgBC;AAEtB,WAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,uDAAuD;AAE3D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;;;;;;;;;;;;"}
+{"version":3,"file":"ModuleFooter.js","sources":["../src/components/ModuleFooter/ModuleFooter.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, onBeforeMount, ref } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleContent must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n</script>\n\n<template>\n  <div\n    class=\"stash-module-footer tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-rounded-b tw-border-b tw-border-ice-500 tw-px-3 tw-pb-6 tw-pt-0 lg:tw-px-6':\n        moduleVariant === ModuleVariant.Card,\n      'tw-rounded tw-bg-white tw-p-3 tw-shadow lg:tw-rounded-t-none lg:tw-px-6 lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-mb-0 tw-pt-3 lg:tw-pt-6': moduleVariant === ModuleVariant.Box,\n    }\"\n    data-test=\"stash-module-footer\"\n  >\n    <slot></slot>\n  </div>\n</template>\n"],"names":["moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION"],"mappings":";;;;;;AAME,UAAMA,IAAgBC;AAEtB,WAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,uDAAuD;AAE3D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;;;;;;;;;;;;"}

package/dist/ModuleHeader.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, useCssModule as g, useSlots as y, ref as k, onBeforeMount as x, inject as M, computed as w, openBlock as l, createElementBlock as r, normalizeClass as n, unref as a, createElementVNode as u, renderSlot as d, createCommentVNode as i, createBlock as B, resolveDynamicComponent as C, withCtx as V, createTextVNode as E, toDisplayString as h } from "vue";
+import { defineComponent as v, useCssModule as g, useSlots as k, ref as y, onBeforeMount as x, inject as M, computed as w, openBlock as l, createElementBlock as r, normalizeClass as n, unref as a, createElementVNode as u, renderSlot as d, createCommentVNode as i, createBlock as B, resolveDynamicComponent as C, withCtx as V, createTextVNode as E, toDisplayString as h } from "vue";
 import { M as p } from "./Module.keys-2cc7d830.js";
 import { M as o } from "./Module.types-3f78f2a0.js";
 import { _ as N } from "./_plugin-vue_export-helper-dad06003.js";
@@ -7,7 +7,7 @@ const T = { class: "tw-flex tw-items-center" }, $ = {
   "data-test": "stash-module-header|content-text"
 }, z = {
   key: 0,
-  class: "tw-mt-3 tw-mb-0"
+  class: "tw-mb-0 tw-mt-3"
 }, L = /* @__PURE__ */ v({
   name: "ll-module-header",
   __name: "ModuleHeader",
@@ -19,7 +19,7 @@ const T = { class: "tw-flex tw-items-center" }, $ = {
     underline: { type: Boolean, default: !1 }
   },
   setup(f) {
-    const t = f, _ = g(), c = y(), s = k();
+    const t = f, _ = g(), c = k(), s = y();
     x(() => {
       const e = M(p.key, p.defaults);
       if (!e.variant)
@@ -49,9 +49,9 @@ const T = { class: "tw-flex tw-items-center" }, $ = {
     });
     return (e, H) => (l(), r("header", {
       class: n(["stash-module-header tw-flex tw-flex-wrap tw-justify-between", {
-        "tw-bg-ice-100 tw-px-3 lg:tw-px-6 tw-py-3 tw-border-b tw-border-ice-500 tw-rounded-t": s.value === a(o).Card,
-        "tw-px-3 lg:tw-px-6 tw-pt-3 lg:tw-pt-6 tw-bg-white tw-mb-6 lg:tw-mb-0 tw-rounded lg:tw-rounded-b-none tw-shadow lg:tw-shadow-none": s.value === a(o).Table || s.value === a(o).List,
-        "tw-border-b tw-border-ice-200 tw-mb-3 lg:tw-mb-6": t.underline
+        "tw-rounded-t tw-border-b tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-px-6": s.value === a(o).Card,
+        "tw-mb-6 tw-rounded tw-bg-white tw-px-3 tw-pt-3 tw-shadow lg:tw-mb-0 lg:tw-rounded-b-none lg:tw-px-6 lg:tw-pt-6 lg:tw-shadow-none": s.value === a(o).Table || s.value === a(o).List,
+        "tw-mb-3 tw-border-b tw-border-ice-200 lg:tw-mb-6": t.underline
       }]),
       "data-test": "stash-module-header"
     }, [

package/dist/ModuleHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleHeader.js","sources":["../src/components/ModuleHeader/ModuleHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule, useSlots } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  defineOptions({\n    name: 'll-module-header',\n  });\n\n  export interface ModuleHeaderProps {\n    /**\n     * Header title. Will get overridden by the `title` slot if provided.\n     */\n    title?: string;\n\n    /**\n     * Size of the header.\n     *\n     * - `small` = `h4`\n     * - `medium` = `h3`\n     * - `large` = `h2`\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * Header description, aka subtitle. Will get overridden by the `description` slot if provided.\n     */\n    description?: string;\n\n    /**\n     * Stop the actions slot from force-wrapping on medium and smalls screens.\n     */\n    preventActionsWrap?: boolean;\n\n    /**\n     * Displays a border at the bottom\n     */\n    underline?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ModuleHeaderProps>(), {\n    title: '',\n    size: 'medium',\n    description: '',\n    preventActionsWrap: false,\n    underline: false,\n  });\n  const classes = useCssModule();\n  const slots = useSlots();\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleHeader must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n\n  const is = computed(() => {\n    let component;\n\n    switch (props.size) {\n      case 'small':\n        component = 'h4';\n        break;\n\n      case 'medium':\n        component = 'h3';\n        break;\n\n      case 'large':\n        component = 'h2';\n        break;\n\n      default:\n        component = 'h3';\n        break;\n    }\n\n    return component;\n  });\n\n  const marginBottomClasses = computed(() => {\n    const isBoxOrTableOrList =\n      moduleVariant.value === ModuleVariant.Box ||\n      moduleVariant.value === ModuleVariant.Table ||\n      moduleVariant.value === ModuleVariant.List;\n\n    if (isBoxOrTableOrList && !props.underline) {\n      return 'tw-mb-3 lg:tw-mb-6';\n    } else if (isBoxOrTableOrList && props.underline) {\n      return 'tw-mb-3';\n    } else {\n      return '';\n    }\n  });\n</script>\n\n<template>\n  <header\n    class=\"stash-module-header tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-bg-ice-100 tw-px-3 lg:tw-px-6 tw-py-3 tw-border-b tw-border-ice-500 tw-rounded-t':\n        moduleVariant === ModuleVariant.Card,\n      'tw-px-3 lg:tw-px-6 tw-pt-3 lg:tw-pt-6 tw-bg-white tw-mb-6 lg:tw-mb-0 tw-rounded lg:tw-rounded-b-none tw-shadow lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-border-b tw-border-ice-200 tw-mb-3 lg:tw-mb-6': props.underline,\n    }\"\n    data-test=\"stash-module-header\"\n  >\n    <div\n      class=\"stash-module-header__content tw-mr-6\"\n      :class=\"marginBottomClasses\"\n      data-test=\"stash-module-header|content\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <div\n          v-if=\"slots.media && props.size === 'large'\"\n          class=\"stash-module-header__content__media tw-mr-3\"\n          :class=\"classes.media\"\n          data-test=\"stash-module-header|content-media\"\n        >\n          <slot name=\"media\"></slot>\n        </div>\n\n        <div class=\"stash-module-header__content__text\" data-test=\"stash-module-header|content-text\">\n          <!--\n            @slot Header title\n            @type String\n            @default HTML header element with the `title` prop as the text.\n            TODO: this doesn't work...\n          -->\n          <slot name=\"title\">\n            <component :is=\"is\" v-if=\"props.title\" class=\"tw-my-0\">{{ props.title }}</component>\n          </slot>\n\n          <!--\n            @slot Header title\n            @type String\n            @default HTML <p> element with the `description` prop as the text.\n          -->\n          <slot name=\"description\">\n            <p v-if=\"props.description\" class=\"tw-mt-3 tw-mb-0\">{{ props.description }}</p>\n          </slot>\n        </div>\n      </div>\n    </div>\n\n    <!-- todo: how can we pass a prop/class to actions in order to top align vs middle align? -->\n    <div\n      v-if=\"slots.actions\"\n      class=\"stash-module-header__actions tw-self-center\"\n      :class=\"[\n        marginBottomClasses,\n        {\n          'tw-w-full lg:tw-w-auto': !props.preventActionsWrap,\n        },\n      ]\"\n      data-test=\"stash-module-header|actions\"\n    >\n      <slot name=\"actions\"></slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media {\n    max-height: 58px;\n    max-width: 58px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION","is","computed","component","props","marginBottomClasses","isBoxOrTableOrList","ModuleVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAUC,KACVC,IAAQC,KACRC,IAAgBC;AAEtB,IAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,sDAAsD;AAE1D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;AAEK,UAAAG,IAAKC,EAAS,MAAM;AACpB,UAAAC;AAEJ,cAAQC,EAAM,MAAM;AAAA,QAClB,KAAK;AACS,UAAAD,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF;AACc,UAAAA,IAAA;AACZ;AAAA,MACJ;AAEO,aAAAA;AAAA,IAAA,CACR,GAEKE,IAAsBH,EAAS,MAAM;AACnC,YAAAI,IACJX,EAAc,UAAUY,EAAc,OACtCZ,EAAc,UAAUY,EAAc,SACtCZ,EAAc,UAAUY,EAAc;AAEpC,aAAAD,KAAsB,CAACF,EAAM,YACxB,uBACEE,KAAsBF,EAAM,YAC9B,YAEA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ModuleHeader.js","sources":["../src/components/ModuleHeader/ModuleHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule, useSlots } from 'vue';\n\n  import { MODULE_INJECTION } from '../Module/Module.keys';\n  import { ModuleVariant } from '../Module/Module.types';\n\n  defineOptions({\n    name: 'll-module-header',\n  });\n\n  export interface ModuleHeaderProps {\n    /**\n     * Header title. Will get overridden by the `title` slot if provided.\n     */\n    title?: string;\n\n    /**\n     * Size of the header.\n     *\n     * - `small` = `h4`\n     * - `medium` = `h3`\n     * - `large` = `h2`\n     */\n    size?: 'small' | 'medium' | 'large';\n\n    /**\n     * Header description, aka subtitle. Will get overridden by the `description` slot if provided.\n     */\n    description?: string;\n\n    /**\n     * Stop the actions slot from force-wrapping on medium and smalls screens.\n     */\n    preventActionsWrap?: boolean;\n\n    /**\n     * Displays a border at the bottom\n     */\n    underline?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ModuleHeaderProps>(), {\n    title: '',\n    size: 'medium',\n    description: '',\n    preventActionsWrap: false,\n    underline: false,\n  });\n  const classes = useCssModule();\n  const slots = useSlots();\n  const moduleVariant = ref();\n\n  onBeforeMount(() => {\n    const moduleInjectedValues = inject(MODULE_INJECTION.key, MODULE_INJECTION.defaults);\n    if (!moduleInjectedValues.variant) {\n      throw new Error('ModuleHeader must be used within a Module component.');\n    }\n    moduleVariant.value = moduleInjectedValues.variant.value;\n  });\n\n  const is = computed(() => {\n    let component;\n\n    switch (props.size) {\n      case 'small':\n        component = 'h4';\n        break;\n\n      case 'medium':\n        component = 'h3';\n        break;\n\n      case 'large':\n        component = 'h2';\n        break;\n\n      default:\n        component = 'h3';\n        break;\n    }\n\n    return component;\n  });\n\n  const marginBottomClasses = computed(() => {\n    const isBoxOrTableOrList =\n      moduleVariant.value === ModuleVariant.Box ||\n      moduleVariant.value === ModuleVariant.Table ||\n      moduleVariant.value === ModuleVariant.List;\n\n    if (isBoxOrTableOrList && !props.underline) {\n      return 'tw-mb-3 lg:tw-mb-6';\n    } else if (isBoxOrTableOrList && props.underline) {\n      return 'tw-mb-3';\n    } else {\n      return '';\n    }\n  });\n</script>\n\n<template>\n  <header\n    class=\"stash-module-header tw-flex tw-flex-wrap tw-justify-between\"\n    :class=\"{\n      'tw-rounded-t tw-border-b tw-border-ice-500 tw-bg-ice-100 tw-p-3 lg:tw-px-6':\n        moduleVariant === ModuleVariant.Card,\n      'tw-mb-6 tw-rounded tw-bg-white tw-px-3 tw-pt-3 tw-shadow lg:tw-mb-0 lg:tw-rounded-b-none lg:tw-px-6 lg:tw-pt-6 lg:tw-shadow-none':\n        moduleVariant === ModuleVariant.Table || moduleVariant === ModuleVariant.List,\n      'tw-mb-3 tw-border-b tw-border-ice-200 lg:tw-mb-6': props.underline,\n    }\"\n    data-test=\"stash-module-header\"\n  >\n    <div\n      class=\"stash-module-header__content tw-mr-6\"\n      :class=\"marginBottomClasses\"\n      data-test=\"stash-module-header|content\"\n    >\n      <div class=\"tw-flex tw-items-center\">\n        <div\n          v-if=\"slots.media && props.size === 'large'\"\n          class=\"stash-module-header__content__media tw-mr-3\"\n          :class=\"classes.media\"\n          data-test=\"stash-module-header|content-media\"\n        >\n          <slot name=\"media\"></slot>\n        </div>\n\n        <div class=\"stash-module-header__content__text\" data-test=\"stash-module-header|content-text\">\n          <!--\n            @slot Header title\n            @type String\n            @default HTML header element with the `title` prop as the text.\n            TODO: this doesn't work...\n          -->\n          <slot name=\"title\">\n            <component :is=\"is\" v-if=\"props.title\" class=\"tw-my-0\">{{ props.title }}</component>\n          </slot>\n\n          <!--\n            @slot Header title\n            @type String\n            @default HTML <p> element with the `description` prop as the text.\n          -->\n          <slot name=\"description\">\n            <p v-if=\"props.description\" class=\"tw-mb-0 tw-mt-3\">{{ props.description }}</p>\n          </slot>\n        </div>\n      </div>\n    </div>\n\n    <!-- todo: how can we pass a prop/class to actions in order to top align vs middle align? -->\n    <div\n      v-if=\"slots.actions\"\n      class=\"stash-module-header__actions tw-self-center\"\n      :class=\"[\n        marginBottomClasses,\n        {\n          'tw-w-full lg:tw-w-auto': !props.preventActionsWrap,\n        },\n      ]\"\n      data-test=\"stash-module-header|actions\"\n    >\n      <slot name=\"actions\"></slot>\n    </div>\n  </header>\n</template>\n\n<style module>\n  /* max size for media/marketing illustration icons we would be passing to the slot */\n  .media {\n    max-height: 58px;\n    max-width: 58px;\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","moduleVariant","ref","onBeforeMount","moduleInjectedValues","inject","MODULE_INJECTION","is","computed","component","props","marginBottomClasses","isBoxOrTableOrList","ModuleVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAUC,KACVC,IAAQC,KACRC,IAAgBC;AAEtB,IAAAC,EAAc,MAAM;AAClB,YAAMC,IAAuBC,EAAOC,EAAiB,KAAKA,EAAiB,QAAQ;AAC/E,UAAA,CAACF,EAAqB;AAClB,cAAA,IAAI,MAAM,sDAAsD;AAE1D,MAAAH,EAAA,QAAQG,EAAqB,QAAQ;AAAA,IAAA,CACpD;AAEK,UAAAG,IAAKC,EAAS,MAAM;AACpB,UAAAC;AAEJ,cAAQC,EAAM,MAAM;AAAA,QAClB,KAAK;AACS,UAAAD,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF,KAAK;AACS,UAAAA,IAAA;AACZ;AAAA,QAEF;AACc,UAAAA,IAAA;AACZ;AAAA,MACJ;AAEO,aAAAA;AAAA,IAAA,CACR,GAEKE,IAAsBH,EAAS,MAAM;AACnC,YAAAI,IACJX,EAAc,UAAUY,EAAc,OACtCZ,EAAc,UAAUY,EAAc,SACtCZ,EAAc,UAAUY,EAAc;AAEpC,aAAAD,KAAsB,CAACF,EAAM,YACxB,uBACEE,KAAsBF,EAAM,YAC9B,YAEA;AAAA,IACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ObfuscateText.js

@@ -1,12 +1,15 @@
-import { defineComponent as g, ref as d, useCssModule as b, computed as h, openBlock as u, createElementBlock as C, createTextVNode as _, toDisplayString as x, createBlock as T, normalizeClass as k, unref as v, withCtx as y, createVNode as w, createCommentVNode as B } from "vue";
-import V from "./Button.js";
-import K from "./Icon.js";
-import { _ as M } from "./_plugin-vue_export-helper-dad06003.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import { defineComponent as r, ref as u, computed as c, openBlock as s, createElementBlock as i, createTextVNode as p, toDisplayString as f, createBlock as h, withCtx as m, createVNode as d, normalizeClass as g, createCommentVNode as x } from "vue";
+import C from "./Button.js";
+import b from "./Icon.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
+import "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const N = /* @__PURE__ */ g({
+const k = {
+  class: "stash-obfuscate-text",
+  "data-test": "stash-obfuscate-text"
+}, A = /* @__PURE__ */ r({
   name: "ll-obfuscate-text",
   __name: "ObfuscateText",
   props: {
@@ -18,42 +21,37 @@ const N = /* @__PURE__ */ g({
     obfuscateAll: { type: Boolean, default: !1 },
     showToggle: { type: Boolean, default: !1 }
   },
-  setup(c) {
-    const i = c, t = d(!1), f = b(), p = h(() => {
-      const { showToggle: s, text: e, obfuscateAll: r, lengthToKeep: a, maskChar: l, maskCharCount: n, position: m } = i;
-      if (s && t.value)
-        return e;
-      if (r || !a)
-        return l.repeat(n);
+  setup(l) {
+    const t = l, e = u(!1), n = c(() => {
+      if (t.showToggle && e.value)
+        return t.text;
+      if (t.obfuscateAll || !t.lengthToKeep)
+        return t.maskChar.repeat(t.maskCharCount);
       let o;
-      return m === "end" ? (o = e.substring(0, a), o + l.repeat(n)) : (o = e.substring(e.length - a), l.repeat(n) + o);
+      return t.position === "end" ? (o = t.text.substring(0, t.lengthToKeep), o + t.maskChar.repeat(t.maskCharCount)) : (o = t.text.substring(t.text.length - t.lengthToKeep), t.maskChar.repeat(t.maskCharCount) + o);
     });
-    return (s, e) => (u(), C("span", null, [
-      _(x(p.value) + " ", 1),
-      s.showToggle ? (u(), T(V, {
+    return (o, a) => (s(), i("span", k, [
+      p(f(n.value) + " ", 1),
+      o.showToggle ? (s(), h(C, {
         key: 0,
-        class: k(v(f)["obfuscation-toggle-button"]),
+        class: "tw-ml-1 tw-h-auto tw-w-auto tw-p-0",
         icon: "",
         type: "button",
-        onClick: e[0] || (e[0] = (r) => t.value = !t.value)
+        onClick: a[0] || (a[0] = (w) => e.value = !e.value)
       }, {
-        default: y(() => [
-          w(K, {
-            name: t.value ? "hide" : "show",
-            class: "cursor-pointer",
-            "data-test": t.value ? "hide-toggle-icon" : "show-toggle-icon"
-          }, null, 8, ["name", "data-test"])
+        default: m(() => [
+          d(b, {
+            name: e.value ? "hide" : "show",
+            class: g(["tw-cursor-pointer", e.value ? "stash-obfuscate-text__hide-toggle-icon" : "stash-obfuscate-text__show-toggle-icon"]),
+            "data-test": e.value ? "stash-obfuscate-text|hide-toggle-icon" : "stash-obfuscate-text|show-toggle-icon"
+          }, null, 8, ["name", "class", "data-test"])
         ]),
         _: 1
-      }, 8, ["class"])) : B("", !0)
+      })) : x("", !0)
     ]));
   }
-}), A = {
-  "obfuscation-toggle-button": "_obfuscation-toggle-button_16egb_2"
-}, O = {
-  $style: A
-}, q = /* @__PURE__ */ M(N, [["__cssModules", O]]);
+});
 export {
-  q as default
+  A as default
 };
 //# sourceMappingURL=ObfuscateText.js.map

package/dist/ObfuscateText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref, useCssModule } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  export interface ObfuscateTextProps {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Character to obfuscate text with\n     */\n    maskChar?: string;\n\n    /**\n     * The number of masked characters to display\n     */\n    maskCharCount?: number;\n\n    /**\n     * Num of characters to keep revealed.\n     * Default will obfuscate entire string\n     * with length of maskCharCount.\n     */\n    lengthToKeep?: number;\n\n    /**\n     * Position to start obfuscating text\n     */\n    position?: 'start' | 'end';\n    /**\n     * Whether or not to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    const { showToggle, text, obfuscateAll, lengthToKeep, maskChar, maskCharCount, position } = props;\n\n    if (showToggle && isFullTextVisible.value) {\n      return text;\n    }\n\n    if (obfuscateAll || !lengthToKeep) {\n      return maskChar.repeat(maskCharCount);\n    }\n\n    let charsToKeep;\n\n    if (position === 'end') {\n      charsToKeep = text.substring(0, lengthToKeep);\n\n      return charsToKeep + maskChar.repeat(maskCharCount);\n    } else {\n      charsToKeep = text.substring(text.length - lengthToKeep);\n\n      return maskChar.repeat(maskCharCount) + charsToKeep;\n    }\n  });\n</script>\n\n<template>\n  <span\n    >{{ obfuscatedText }}\n    <Button\n      v-if=\"showToggle\"\n      :class=\"classes['obfuscation-toggle-button']\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"cursor-pointer\"\n        :data-test=\"isFullTextVisible ? 'hide-toggle-icon' : 'show-toggle-icon'\"\n      />\n    </Button>\n  </span>\n</template>\n\n<style module>\n  .obfuscation-toggle-button {\n    height: auto;\n    width: auto;\n    padding: 0;\n    margin-left: 4px;\n  }\n</style>\n"],"names":["isFullTextVisible","ref","classes","useCssModule","obfuscatedText","computed","showToggle","text","obfuscateAll","lengthToKeep","maskChar","maskCharCount","position","props","charsToKeep"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBA8CQA,IAAoBC,EAAI,EAAK,GAC7BC,IAAUC,KAWVC,IAAiBC,EAAS,MAAM;AAC9B,YAAA,EAAE,YAAAC,GAAY,MAAAC,GAAM,cAAAC,GAAc,cAAAC,GAAc,UAAAC,GAAU,eAAAC,GAAe,UAAAC,EAAa,IAAAC;AAExF,UAAAP,KAAcN,EAAkB;AAC3B,eAAAO;AAGL,UAAAC,KAAgB,CAACC;AACZ,eAAAC,EAAS,OAAOC,CAAa;AAGlC,UAAAG;AAEJ,aAAIF,MAAa,SACDE,IAAAP,EAAK,UAAU,GAAGE,CAAY,GAErCK,IAAcJ,EAAS,OAAOC,CAAa,MAElDG,IAAcP,EAAK,UAAUA,EAAK,SAASE,CAAY,GAEhDC,EAAS,OAAOC,CAAa,IAAIG;AAAA,IAC1C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ObfuscateText.js","sources":["../src/components/ObfuscateText/ObfuscateText.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, ref } from 'vue';\n\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({ name: 'll-obfuscate-text' });\n\n  export interface ObfuscateTextProps {\n    /**\n     * The full text\n     */\n    text: string;\n\n    /**\n     * Character to obfuscate text with\n     */\n    maskChar?: string;\n\n    /**\n     * The number of masked characters to display\n     */\n    maskCharCount?: number;\n\n    /**\n     * Num of characters to keep revealed.\n     * Default will obfuscate entire string\n     * with length of maskCharCount.\n     */\n    lengthToKeep?: number;\n\n    /**\n     * Position to start obfuscating text\n     */\n    position?: 'start' | 'end';\n\n    /**\n     * Whether to obfuscate all characters.\n     * @deprecated omit the lengthToKeep prop to achieve the same result\n     */\n    obfuscateAll?: boolean;\n\n    /**\n     * Displays a button for toggling text visibility\n     */\n    showToggle?: boolean;\n  }\n\n  const isFullTextVisible = ref(false);\n\n  const props = withDefaults(defineProps<ObfuscateTextProps>(), {\n    maskChar: '•',\n    maskCharCount: 10,\n    lengthToKeep: 0,\n    position: 'start',\n    obfuscateAll: false,\n    showToggle: false,\n  });\n\n  const obfuscatedText = computed(() => {\n    if (props.showToggle && isFullTextVisible.value) {\n      return props.text;\n    }\n\n    if (props.obfuscateAll || !props.lengthToKeep) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    let charsToKeep;\n\n    if (props.position === 'end') {\n      charsToKeep = props.text.substring(0, props.lengthToKeep);\n\n      return charsToKeep + props.maskChar.repeat(props.maskCharCount);\n    } else {\n      charsToKeep = props.text.substring(props.text.length - props.lengthToKeep);\n\n      return props.maskChar.repeat(props.maskCharCount) + charsToKeep;\n    }\n  });\n</script>\n\n<template>\n  <span class=\"stash-obfuscate-text\" data-test=\"stash-obfuscate-text\">\n    {{ obfuscatedText }}\n    <Button\n      v-if=\"showToggle\"\n      class=\"tw-ml-1 tw-h-auto tw-w-auto tw-p-0\"\n      icon\n      type=\"button\"\n      @click=\"isFullTextVisible = !isFullTextVisible\"\n    >\n      <Icon\n        :name=\"isFullTextVisible ? 'hide' : 'show'\"\n        class=\"tw-cursor-pointer\"\n        :class=\"isFullTextVisible ? 'stash-obfuscate-text__hide-toggle-icon' : 'stash-obfuscate-text__show-toggle-icon'\"\n        :data-test=\"\n          isFullTextVisible ? 'stash-obfuscate-text|hide-toggle-icon' : 'stash-obfuscate-text|show-toggle-icon'\n        \"\n      />\n    </Button>\n  </span>\n</template>\n"],"names":["isFullTextVisible","ref","obfuscatedText","computed","props","charsToKeep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;iBAgDQA,IAAoBC,EAAI,EAAK,GAW7BC,IAAiBC,EAAS,MAAM;AAChC,UAAAC,EAAM,cAAcJ,EAAkB;AACxC,eAAOI,EAAM;AAGf,UAAIA,EAAM,gBAAgB,CAACA,EAAM;AAC/B,eAAOA,EAAM,SAAS,OAAOA,EAAM,aAAa;AAG9C,UAAAC;AAEA,aAAAD,EAAM,aAAa,SACrBC,IAAcD,EAAM,KAAK,UAAU,GAAGA,EAAM,YAAY,GAEjDC,IAAcD,EAAM,SAAS,OAAOA,EAAM,aAAa,MAE9DC,IAAcD,EAAM,KAAK,UAAUA,EAAM,KAAK,SAASA,EAAM,YAAY,GAElEA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAAIC;AAAA,IACtD,CACD;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ObfuscateText.vue.d.ts

@@ -75,7 +75,7 @@ export declare interface ObfuscateTextProps {
      */
     position?: 'start' | 'end';
     /**
-     * Whether or not to obfuscate all characters.
+     * Whether to obfuscate all characters.
      * @deprecated omit the lengthToKeep prop to achieve the same result
      */
     obfuscateAll?: boolean;