@leaflink/stash 49.5.0 → 50.0.1

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    /**\n     * Prevents the modal from being dismissed by clicking the backdrop or pressing the escape key.\n     * Example: There are in-flight api requests and you do not want the modal to close until they are done.\n     */\n    preventDismiss?: boolean;\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    preventDismiss: false,\n  });\n\n  const emit = 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      toggleHelpWidgetLauncher(isModalOpen.value ? 'hide' : 'show');\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    toggleHelpWidgetLauncher('show');\n\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    if (props.preventDismiss) {\n      return;\n    }\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\n  /**\n   * The customer support \"help widget launcher\" covers the action buttons in the Modal when the Modal uses a position value of \"right\" (for drawers).\n   */\n  function toggleHelpWidgetLauncher(nextState: 'show' | 'hide') {\n    const launcherElement = document.getElementById('launcher');\n\n    if (!launcherElement || !launcherElement.parentElement) {\n      return;\n    }\n\n    launcherElement.parentElement.style.display = nextState === 'show' ? 'block' : 'none';\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal tw-fixed tw-inset-0\"\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      'tw-overflow-y-auto': !props.scrollable && !isDrawer,\n      'tw-overflow-y-hidden': isDrawer,\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-3xl\"\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          // tw-absolute causing this to break when items in bottom of container get focus\n          'lg:tw-fixed 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","props","__props","emit","__emit","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","isDrawer","getPageScrollingElement","watch","toggleHelpWidgetLauncher","onBeforeUnmount","handleTab","_a","dismiss","FOCUS_ELEMENTS_SELECTOR","e","_b","nextState","launcherElement"],"mappings":"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"}
+{"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    /**\n     * Prevents the modal from being dismissed by clicking the backdrop or pressing the escape key.\n     * Example: There are in-flight api requests and you do not want the modal to close until they are done.\n     */\n    preventDismiss?: boolean;\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    preventDismiss: false,\n  });\n\n  const emit = 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      toggleHelpWidgetLauncher(isModalOpen.value ? 'hide' : 'show');\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    toggleHelpWidgetLauncher('show');\n\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    if (props.preventDismiss) {\n      return;\n    }\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\n  /**\n   * The customer support \"help widget launcher\" covers the action buttons in the Modal when the Modal uses a position value of \"right\" (for drawers).\n   */\n  function toggleHelpWidgetLauncher(nextState: 'show' | 'hide') {\n    const launcherElement = document.getElementById('launcher');\n\n    if (!launcherElement || !launcherElement.parentElement) {\n      return;\n    }\n\n    launcherElement.parentElement.style.display = nextState === 'show' ? 'block' : 'none';\n  }\n</script>\n\n<template>\n  <div\n    v-if=\"isModalOpen\"\n    ref=\"rootRef\"\n    class=\"stash-modal tw-fixed tw-inset-0\"\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      'tw-overflow-y-auto': !props.scrollable && !isDrawer,\n      'tw-overflow-y-hidden': isDrawer,\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-3xl\"\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          // tw-absolute causing this to break when items in bottom of container get focus\n          'lg:tw-fixed 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","props","__props","emit","__emit","slots","useSlots","rootRef","ref","lastExternalFocusedElement","focusElements","firstFocusElement","lastFocusElement","initialPageScrollingElementStyle","headerId","uniqueId","hasFooterContent","computed","isModalOpen","isDrawer","getPageScrollingElement","watch","toggleHelpWidgetLauncher","onBeforeUnmount","handleTab","_a","dismiss","FOCUS_ELEMENTS_SELECTOR","e","_b","nextState","launcherElement"],"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;;;;;;;;;;;;;;;;;;;;;ACkFV,UAAMC,IAAQC,GAeRC,IAAOC,GASPC,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,MAAMhB,EAAM,QAAQA,EAAM,MAAM,GACvDkB,IAAWF,EAAS,MAAMhB,EAAM,aAAa,UAAUA,EAAM,aAAa,OAAO;AAEvF,aAASmB,IAA0B;AACzB,aAAA,SAAS,oBAAoB,SAAS;AAAA,IAChD;AAEA,IAAAC;AAAA,MACEH;AAAA,MACA,MAAM;AACqB,QAAAI,EAAAJ,EAAY,QAAQ,SAAS,MAAM,GAExDA,EAAY,SACP,OAAA,OAAOL,EAAiC,OAAO;AAAA,UACpD,QAAQO,IAA0B,MAAM;AAAA,UACxC,UAAUA,IAA0B,MAAM;AAAA,QAAA,CAC3C,GAGI,OAAA,OAAOA,EAAwB,EAAE,OAAO;AAAA,UAC7C,UAAUF,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;;AACpB,MAAAD,EAAyB,MAAM,GAGxB,OAAA,OAAOF,EAAwB,EAAE,OAAO;AAAA,QAC7C,UAAUP,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,MAAIzB,EAAM,mBAGVE,EAAK,eAAe,EAAK,GACzBA,EAAK,kBAAkB,EAAK,GAC5BA,EAAK,SAAS;AAAA,IAChB;AAGA,IAAAkB,EAAMd,GAAS,MAAM;AACf,MAACA,EAAQ,UAIbE,EAA2B,QAAQ,SAAS,eAC5CF,EAAQ,MAAM,SAEdG,EAAc,QAAQ,MAAM,KAAKH,EAAQ,MAAM,iBAA8BoB,CAAuB,CAAC,GACnFhB,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,EAAUI,GAAG;;AAChB,MAAAA,EAAE,QAAQ,UACRA,EAAE,YAAY,SAAS,kBAAkBjB,EAAkB,UAC7Dc,IAAAb,EAAiB,UAAjB,QAAAa,EAAwB,SACxBG,EAAE,eAAe,KACR,SAAS,kBAAkBhB,EAAiB,WACrDiB,IAAAlB,EAAkB,UAAlB,QAAAkB,EAAyB,SACzBD,EAAE,eAAe;AAAA,IAGvB;AAKA,aAASN,EAAyBQ,GAA4B;AACtD,YAAAC,IAAkB,SAAS,eAAe,UAAU;AAE1D,MAAI,CAACA,KAAmB,CAACA,EAAgB,kBAIzCA,EAAgB,cAAc,MAAM,UAAUD,MAAc,SAAS,UAAU;AAAA,IACjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Modal.vue.d.ts

@@ -33,52 +33,52 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ModalProps>, {
-    hideClose: boolean;
-    open: boolean;
-    isOpen: boolean;
-    modelValue: boolean;
-    size: string;
-    scrollable: boolean;
-    contrast: boolean;
-    title: string;
-    position: string;
-    hideHeader: boolean;
-    closeButtonColorClass: string;
-    preventDismiss: boolean;
+hideClose: boolean;
+open: boolean;
+isOpen: boolean;
+modelValue: boolean;
+size: string;
+scrollable: boolean;
+contrast: boolean;
+title: string;
+position: string;
+hideHeader: boolean;
+closeButtonColorClass: string;
+preventDismiss: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "update:open": (isOpen?: boolean | undefined) => void;
-    "update:is-open": (isOpen?: boolean | undefined) => void;
-    dismiss: () => void;
+"update:open": (isOpen?: boolean | undefined) => void;
+"update:is-open": (isOpen?: boolean | undefined) => void;
+dismiss: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ModalProps>, {
-    hideClose: boolean;
-    open: boolean;
-    isOpen: boolean;
-    modelValue: boolean;
-    size: string;
-    scrollable: boolean;
-    contrast: boolean;
-    title: string;
-    position: string;
-    hideHeader: boolean;
-    closeButtonColorClass: string;
-    preventDismiss: boolean;
+hideClose: boolean;
+open: boolean;
+isOpen: boolean;
+modelValue: boolean;
+size: string;
+scrollable: boolean;
+contrast: boolean;
+title: string;
+position: string;
+hideHeader: boolean;
+closeButtonColorClass: string;
+preventDismiss: boolean;
 }>>> & Readonly<{
-    onDismiss?: (() => any) | undefined;
-    "onUpdate:is-open"?: ((isOpen?: boolean | undefined) => any) | undefined;
-    "onUpdate:open"?: ((isOpen?: boolean | undefined) => any) | undefined;
+onDismiss?: (() => any) | undefined;
+"onUpdate:is-open"?: ((isOpen?: boolean | undefined) => any) | undefined;
+"onUpdate:open"?: ((isOpen?: boolean | undefined) => any) | undefined;
 }>, {
-    title: string;
-    size: "medium" | "narrow" | "wide";
-    open: boolean;
-    modelValue: boolean;
-    position: "center" | "left" | "right";
-    isOpen: boolean;
-    hideClose: boolean;
-    scrollable: boolean;
-    contrast: boolean;
-    hideHeader: boolean;
-    closeButtonColorClass: string;
-    preventDismiss: boolean;
+title: string;
+size: "medium" | "narrow" | "wide";
+open: boolean;
+modelValue: boolean;
+position: "center" | "left" | "right";
+isOpen: boolean;
+hideClose: boolean;
+scrollable: boolean;
+contrast: boolean;
+hideHeader: boolean;
+closeButtonColorClass: string;
+preventDismiss: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     headerAction?(_: {}): any;
     "featured-content"?(_: {}): any;

package/dist/Modals.js

@@ -1,12 +1,11 @@
-import { defineComponent as d, computed as u, openBlock as s, createBlock as r, Transition as _, withCtx as a, resolveDynamicComponent as m, mergeProps as p, toHandlers as f, createSlots as v, renderList as b, createElementVNode as x, createCommentVNode as M } from "vue";
-import L from "./useModals.js";
-import { _ as y } from "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/merge";
-const C = ["innerHTML"], g = /* @__PURE__ */ d({
+import { defineComponent as d, computed as u, openBlock as s, createBlock as r, Transition as m, withCtx as a, resolveDynamicComponent as p, mergeProps as _, toHandlers as f, createSlots as v, renderList as x, createElementVNode as M, createCommentVNode as L } from "vue";
+import b from "./useModals.js";
+import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const h = ["innerHTML"], k = /* @__PURE__ */ d({
   __name: "Modals",
-  setup(h) {
-    const t = L(), e = u(() => t.current);
-    function l(n) {
+  setup(H) {
+    const t = b(), e = u(() => t.current);
+    function c(n) {
       var o;
       return (o = n.options) != null && o.disableDefaultListeners ? {} : {
         dismiss: () => t.close({ index: 0 }),
@@ -14,26 +13,25 @@ const C = ["innerHTML"], g = /* @__PURE__ */ d({
         cancel: () => t.close({ index: 0 })
       };
     }
-    return (n, o) => (s(), r(_, {
+    return (n, o) => (s(), r(m, {
       name: "modals",
       mode: "out-in"
     }, {
       default: a(() => [
-        e.value ? (s(), r(m(e.value.component), p({ key: 0 }, e.value.attributes, { "is-open": !0 }, f(l(e.value))), v({ _: 2 }, [
-          b(e.value.slots, (c, i) => ({
+        e.value ? (s(), r(p(e.value.component), _({ key: 0 }, e.value.attributes, { "is-open": !0 }, f(c(e.value))), v({ _: 2 }, [
+          x(e.value.slots, (l, i) => ({
             name: i,
             fn: a(() => [
-              x("div", { innerHTML: c }, null, 8, C)
+              M("div", { innerHTML: l }, null, 8, h)
             ])
           }))
-        ]), 1040)) : M("", !0)
+        ]), 1040)) : L("", !0)
       ]),
       _: 1
     }));
   }
-});
-const D = /* @__PURE__ */ y(g, [["__scopeId", "data-v-bb296f1b"]]);
+}), B = /* @__PURE__ */ C(k, [["__scopeId", "data-v-122b3b15"]]);
 export {
-  D as default
+  B as default
 };
 //# sourceMappingURL=Modals.js.map

package/dist/Modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  /* @ts-ignore-file */\n  import { computed, DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  const currentModal = computed(() => modals.current);\n\n  // @ts-ignore - Stupid TS version issues. Todo: remove ` | any` when TS/vite/vue deps are updated.\n  function getListeners(modal: DeepReadonly<Modal> | any) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index: 0 }),\n      close: () => modals.close({ index: 0 }),\n      cancel: () => modals.close({ index: 0 }),\n    };\n  }\n</script>\n\n<template>\n  <Transition name=\"modals\" mode=\"out-in\">\n    <component\n      :is=\"currentModal.component\"\n      v-if=\"currentModal\"\n      v-bind=\"currentModal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(currentModal)\"\n    >\n      <template v-for=\"(value, name) in currentModal.slots\" :key=\"name\" #[name]>\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </Transition>\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","currentModal","computed","getListeners","modal","_a"],"mappings":";;;;;;;AAME,UAAMA,IAASC,KAETC,IAAeC,EAAS,MAAMH,EAAO,OAAO;AAGlD,aAASI,EAAaC,GAAkC;;AAClD,cAAAC,IAAAD,EAAM,YAAN,QAAAC,EAAe,0BACV,KAGF;AAAA,QACL,SAAS,MAAMN,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACxC,OAAO,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACtC,QAAQ,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,MAAA;AAAA,IAE3C;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  /* @ts-ignore-file */\n  import { computed, DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  const currentModal = computed(() => modals.current);\n\n  // Stupid TS version issues. Todo: remove ` | any` when TS/vite/vue deps are updated.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function getListeners(modal: DeepReadonly<Modal> | any) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index: 0 }),\n      close: () => modals.close({ index: 0 }),\n      cancel: () => modals.close({ index: 0 }),\n    };\n  }\n</script>\n\n<template>\n  <Transition name=\"modals\" mode=\"out-in\">\n    <component\n      :is=\"currentModal.component\"\n      v-if=\"currentModal\"\n      v-bind=\"currentModal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(currentModal)\"\n    >\n      <template v-for=\"(value, name) in currentModal.slots\" :key=\"name\" #[name]>\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </Transition>\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","currentModal","computed","getListeners","modal","_a"],"mappings":";;;;;;AAME,UAAMA,IAASC,KAETC,IAAeC,EAAS,MAAMH,EAAO,OAAO;AAIlD,aAASI,EAAaC,GAAkC;;AAClD,cAAAC,IAAAD,EAAM,YAAN,QAAAC,EAAe,0BACV,KAGF;AAAA,QACL,SAAS,MAAMN,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACxC,OAAO,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACtC,QAAQ,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,MAAA;AAAA,IAE3C;;;;;;;;;;;;;;;;;;;"}

package/dist/Modals.vue.d.ts

@@ -3,7 +3,7 @@ import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { PublicProps } from 'vue';
 
-declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export { }

package/dist/ModalsPlugin.js

@@ -1,19 +1,16 @@
-import { createVNode as o, h as s, render as n } from "vue";
-import c from "./Modals.js";
-import "./useModals.js";
-import "lodash-es/merge";
-import "./_plugin-vue_export-helper-dad06003.js";
-const m = "stash-modals-mount-node", I = {
+import { createVNode as s, h as n, render as c } from "vue";
+import o from "./Modals.js";
+const m = "stash-modals-mount-node", r = {
   install(l, e) {
-    const d = (e == null ? void 0 : e.mountNodeId) || m;
-    let t = document.getElementById(d);
-    t || (t = document.createElement("div"), t.id = d, t.dataset.test = m, document.body.appendChild(t)), e != null && e.mountNodeClass && !t.classList.contains(e.mountNodeClass) && t.classList.add(e.mountNodeClass);
-    const a = o(s(c));
-    a.appContext = l._context, n(a, t);
+    const t = (e == null ? void 0 : e.mountNodeId) || m;
+    let d = document.getElementById(t);
+    d || (d = document.createElement("div"), d.id = t, d.dataset.test = m, document.body.appendChild(d)), e != null && e.mountNodeClass && !d.classList.contains(e.mountNodeClass) && d.classList.add(e.mountNodeClass);
+    const a = s(n(o));
+    a.appContext = l._context, c(a, d);
   }
 };
 export {
   m as DEFAULT_MODALS_PLUGIN_NODE_ID,
-  I as default
+  r as default
 };
 //# sourceMappingURL=ModalsPlugin.js.map

package/dist/ModalsPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalsPlugin.js","sources":["../src/plugins/ModalsPlugin.ts"],"sourcesContent":["import { App, createVNode, h, Plugin, render } from 'vue';\n\nimport Modals from '../components/Modals/Modals.vue';\n\nexport interface ModalsPluginOptions {\n  mountNodeClass?: string;\n  mountNodeId?: string;\n}\n\nexport const DEFAULT_MODALS_PLUGIN_NODE_ID = 'stash-modals-mount-node';\n\nexport default <Plugin>{\n  install(app: App, options?: ModalsPluginOptions) {\n    const mountNodeId = options?.mountNodeId || DEFAULT_MODALS_PLUGIN_NODE_ID;\n    let mountNode = document.getElementById(mountNodeId);\n\n    if (!mountNode) {\n      mountNode = document.createElement('div');\n      mountNode.id = mountNodeId;\n      mountNode.dataset.test = DEFAULT_MODALS_PLUGIN_NODE_ID;\n      document.body.appendChild(mountNode);\n    }\n\n    if (options?.mountNodeClass && !mountNode.classList.contains(options.mountNodeClass)) {\n      mountNode.classList.add(options.mountNodeClass);\n    }\n\n    const vNode = createVNode(h(Modals));\n    vNode.appContext = app._context;\n\n    render(vNode, mountNode);\n  },\n};\n"],"names":["DEFAULT_MODALS_PLUGIN_NODE_ID","ModalsPlugin","app","options","mountNodeId","mountNode","vNode","createVNode","h","Modals","render"],"mappings":";;;;;AASO,MAAMA,IAAgC,2BAEtBC,IAAA;AAAA,EACrB,QAAQC,GAAUC,GAA+B;AACzC,UAAAC,KAAcD,KAAA,gBAAAA,EAAS,gBAAeH;AACxC,QAAAK,IAAY,SAAS,eAAeD,CAAW;AAEnD,IAAKC,MACSA,IAAA,SAAS,cAAc,KAAK,GACxCA,EAAU,KAAKD,GACfC,EAAU,QAAQ,OAAOL,GAChB,SAAA,KAAK,YAAYK,CAAS,IAGjCF,KAAA,QAAAA,EAAS,kBAAkB,CAACE,EAAU,UAAU,SAASF,EAAQ,cAAc,KACvEE,EAAA,UAAU,IAAIF,EAAQ,cAAc;AAGhD,UAAMG,IAAQC,EAAYC,EAAEC,CAAM,CAAC;AACnC,IAAAH,EAAM,aAAaJ,EAAI,UAEvBQ,EAAOJ,GAAOD,CAAS;AAAA,EACzB;AACF;"}
+{"version":3,"file":"ModalsPlugin.js","sources":["../src/plugins/ModalsPlugin.ts"],"sourcesContent":["import { App, createVNode, h, Plugin, render } from 'vue';\n\nimport Modals from '../components/Modals/Modals.vue';\n\nexport interface ModalsPluginOptions {\n  mountNodeClass?: string;\n  mountNodeId?: string;\n}\n\nexport const DEFAULT_MODALS_PLUGIN_NODE_ID = 'stash-modals-mount-node';\n\nexport default <Plugin>{\n  install(app: App, options?: ModalsPluginOptions) {\n    const mountNodeId = options?.mountNodeId || DEFAULT_MODALS_PLUGIN_NODE_ID;\n    let mountNode = document.getElementById(mountNodeId);\n\n    if (!mountNode) {\n      mountNode = document.createElement('div');\n      mountNode.id = mountNodeId;\n      mountNode.dataset.test = DEFAULT_MODALS_PLUGIN_NODE_ID;\n      document.body.appendChild(mountNode);\n    }\n\n    if (options?.mountNodeClass && !mountNode.classList.contains(options.mountNodeClass)) {\n      mountNode.classList.add(options.mountNodeClass);\n    }\n\n    const vNode = createVNode(h(Modals));\n    vNode.appContext = app._context;\n\n    render(vNode, mountNode);\n  },\n};\n"],"names":["DEFAULT_MODALS_PLUGIN_NODE_ID","ModalsPlugin","app","options","mountNodeId","mountNode","vNode","createVNode","h","Modals","render"],"mappings":";;AASO,MAAMA,IAAgC,2BAEtBC,IAAA;AAAA,EACrB,QAAQC,GAAUC,GAA+B;AACzC,UAAAC,KAAcD,KAAA,gBAAAA,EAAS,gBAAeH;AACxC,QAAAK,IAAY,SAAS,eAAeD,CAAW;AAEnD,IAAKC,MACSA,IAAA,SAAS,cAAc,KAAK,GACxCA,EAAU,KAAKD,GACfC,EAAU,QAAQ,OAAOL,GAChB,SAAA,KAAK,YAAYK,CAAS,IAGjCF,KAAA,QAAAA,EAAS,kBAAkB,CAACE,EAAU,UAAU,SAASF,EAAQ,cAAc,KACvEE,EAAA,UAAU,IAAIF,EAAQ,cAAc;AAGhD,UAAMG,IAAQC,EAAYC,EAAEC,CAAM,CAAC;AACnC,IAAAH,EAAM,aAAaJ,EAAI,UAEvBQ,EAAOJ,GAAOD,CAAS;AAAA,EACzB;AACF;"}

package/dist/Module.js

@@ -1,8 +1,8 @@
 import { defineComponent as n, onMounted as l, provide as s, computed as d, openBlock as p, createBlock as b, normalizeClass as u, unref as e, withCtx as m, renderSlot as c } from "vue";
 import r from "@leaflink/snitch";
-import { M as v } from "./Module.keys-2cc7d830.js";
-import { _ as w } from "./Box.vue_vue_type_script_setup_true_lang-69e5176b.js";
-import { M as t } from "./Module.types-3f78f2a0.js";
+import { M as v } from "./Module.keys-CEsrW2f0.js";
+import { _ as w } from "./Box.vue_vue_type_script_setup_true_lang-DgJHq-09.js";
+import { M as t } from "./Module.types-B1FfGGac.js";
 const y = /* @__PURE__ */ n({
   name: "ll-module",
   __name: "Module",

package/dist/{Module.keys-2cc7d830.js → Module.keys-CEsrW2f0.js}

@@ -7,4 +7,4 @@ const e = Object.freeze({
 export {
   e as M
 };
-//# sourceMappingURL=Module.keys-2cc7d830.js.map
+//# sourceMappingURL=Module.keys-CEsrW2f0.js.map

package/dist/{Module.keys-2cc7d830.js.map → Module.keys-CEsrW2f0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Module.keys-2cc7d830.js","sources":["../src/components/Module/Module.keys.ts"],"sourcesContent":["import { InjectionWithDefaults } from '../../../types/utils';\nimport { ModuleInjection } from './Module.types';\n\nexport const MODULE_INJECTION: InjectionWithDefaults<ModuleInjection> = Object.freeze({\n  key: Symbol('MODULE_INJECTION_KEY'),\n  defaults: {\n    variant: undefined,\n  },\n});\n"],"names":["MODULE_INJECTION"],"mappings":"AAGa,MAAAA,IAA2D,OAAO,OAAO;AAAA,EACpF,KAAK,OAAO,sBAAsB;AAAA,EAClC,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AACF,CAAC;"}
+{"version":3,"file":"Module.keys-CEsrW2f0.js","sources":["../src/components/Module/Module.keys.ts"],"sourcesContent":["import { InjectionWithDefaults } from '../../../types/utils';\nimport { ModuleInjection } from './Module.types';\n\nexport const MODULE_INJECTION: InjectionWithDefaults<ModuleInjection> = Object.freeze({\n  key: Symbol('MODULE_INJECTION_KEY'),\n  defaults: {\n    variant: undefined,\n  },\n});\n"],"names":["MODULE_INJECTION"],"mappings":"AAGa,MAAAA,IAA2D,OAAO,OAAO;AAAA,EACpF,KAAK,OAAO,sBAAsB;AAAA,EAClC,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AACF,CAAC;"}

package/dist/{Module.types-3f78f2a0.js → Module.types-B1FfGGac.js}

@@ -2,4 +2,4 @@ var r = /* @__PURE__ */ ((b) => (b.Box = "box", b.Table = "table", b.Card = "car
 export {
   r as M
 };
-//# sourceMappingURL=Module.types-3f78f2a0.js.map
+//# sourceMappingURL=Module.types-B1FfGGac.js.map

package/dist/{Module.types-3f78f2a0.js.map → Module.types-B1FfGGac.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Module.types-3f78f2a0.js","sources":["../src/components/Module/Module.types.ts"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nexport enum ModuleVariant {\n  Box = 'box',\n  Table = 'table',\n  /**\n   * @deprecated Card Modules are no longer a thing. You're probably looking for `<RadioGroup variant=\"card\">`.\n   */\n  Card = 'card',\n  /**\n   * @deprecated Only used with deprecated ListView component. Use `table` variant with `Table` component instead.\n   */\n  List = 'list',\n}\n\nexport type ModuleVariants = `${ModuleVariant}`;\n\nexport interface ModuleInjection {\n  /**\n   * Module variant applied.\n   */\n  variant?: ComputedRef<ModuleVariants>;\n}\n"],"names":["ModuleVariant"],"mappings":"AAEY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,QAAQ,SAIRA,EAAA,OAAO,QAIPA,EAAA,OAAO,QAVGA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"Module.types-B1FfGGac.js","sources":["../src/components/Module/Module.types.ts"],"sourcesContent":["import { ComputedRef } from 'vue';\n\nexport enum ModuleVariant {\n  Box = 'box',\n  Table = 'table',\n  /**\n   * @deprecated Card Modules are no longer a thing. You're probably looking for `<RadioGroup variant=\"card\">`.\n   */\n  Card = 'card',\n  /**\n   * @deprecated Only used with deprecated ListView component. Use `table` variant with `Table` component instead.\n   */\n  List = 'list',\n}\n\nexport type ModuleVariants = `${ModuleVariant}`;\n\nexport interface ModuleInjection {\n  /**\n   * Module variant applied.\n   */\n  variant?: ComputedRef<ModuleVariants>;\n}\n"],"names":["ModuleVariant"],"mappings":"AAEY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,QAAQ,SAIRA,EAAA,OAAO,QAIPA,EAAA,OAAO,QAVGA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/Module.vue.d.ts

@@ -54,11 +54,11 @@ declare interface BoxProps {
 }
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ModuleProps>, {
-    variant: string;
+variant: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ModuleProps>, {
-    variant: string;
+variant: string;
 }>>> & Readonly<{}>, {
-    variant: "table" | "box" | "card" | "list";
+variant: "table" | "box" | "card" | "list";
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/ModuleContent.js

@@ -1,6 +1,6 @@
 import { defineComponent as m, useSlots as c, ref as i, onBeforeMount as p, inject as f, openBlock as a, createElementBlock as r, normalizeClass as w, unref as e, createElementVNode as d, renderSlot as s, createCommentVNode as h } from "vue";
-import { M as u } from "./Module.keys-2cc7d830.js";
-import { M as n } from "./Module.types-3f78f2a0.js";
+import { M as u } from "./Module.keys-CEsrW2f0.js";
+import { M as n } from "./Module.types-B1FfGGac.js";
 const _ = {
   key: 0,
   class: "stash-module-content__top-slots tw-flex tw-flex-wrap tw-items-center tw-justify-between",

package/dist/ModuleContent.vue.d.ts

@@ -9,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     "top-left"?(_: {}): any;
     "top-right"?(_: {}): any;
     default?(_: {}): any;

package/dist/ModuleFooter.js

@@ -1,6 +1,6 @@
 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";
+import { M as a } from "./Module.keys-CEsrW2f0.js";
+import { M as r } from "./Module.types-B1FfGGac.js";
 const h = /* @__PURE__ */ n({
   __name: "ModuleFooter",
   setup(m) {

package/dist/ModuleFooter.vue.d.ts

@@ -9,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/ModuleHeader.js

@@ -1,7 +1,7 @@
 import { defineComponent as M, useCssModule as C, useSlots as S, ref as B, inject as $, computed as u, openBlock as l, createElementBlock as r, normalizeClass as n, unref as a, createElementVNode as i, renderSlot as o, createCommentVNode as m, createBlock as p, resolveDynamicComponent as _, withCtx as b, createTextVNode as V, toDisplayString as g } from "vue";
-import { M as v } from "./Module.keys-2cc7d830.js";
-import { M as c } from "./Module.types-3f78f2a0.js";
-import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
+import { M as v } from "./Module.keys-CEsrW2f0.js";
+import { M as c } from "./Module.types-B1FfGGac.js";
+import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const N = { class: "tw-flex tw-items-center" }, z = {
   class: "stash-module-header__content__text",
   "data-test": "stash-module-header|content-text"

package/dist/ModuleHeader.vue.d.ts

@@ -33,23 +33,23 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ModuleHeaderProps>, {
-    title: string;
-    size: string;
-    description: string;
-    preventActionsWrap: boolean;
-    underline: boolean;
+title: string;
+size: string;
+description: string;
+preventActionsWrap: boolean;
+underline: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ModuleHeaderProps>, {
-    title: string;
-    size: string;
-    description: string;
-    preventActionsWrap: boolean;
-    underline: boolean;
+title: string;
+size: string;
+description: string;
+preventActionsWrap: boolean;
+underline: boolean;
 }>>> & Readonly<{}>, {
-    title: string;
-    size: "small" | "large" | "medium";
-    description: string;
-    preventActionsWrap: boolean;
-    underline: boolean;
+title: string;
+size: "small" | "large" | "medium";
+description: string;
+preventActionsWrap: boolean;
+underline: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     media?(_: {}): any;
     title?(_: {}): any;

package/dist/ObfuscateText.js

@@ -1,16 +1,11 @@
-import { defineComponent as n, ref as r, computed as u, openBlock as a, createElementBlock as c, createTextVNode as i, toDisplayString as m, createBlock as f, withCtx as p, createVNode as h, normalizeClass as d, createCommentVNode as g } from "vue";
+import { defineComponent as n, ref as u, computed as r, openBlock as a, createElementBlock as c, createTextVNode as f, toDisplayString as i, createBlock as h, withCtx as m, createVNode as p, normalizeClass as d, createCommentVNode as g } from "vue";
 import x from "./Button.js";
 import C from "./Icon.js";
 import b from "./utils/obfuscateText.js";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-4dabc2a9.js";
-import "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/uniqueId";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 const k = {
   class: "stash-obfuscate-text",
   "data-test": "stash-obfuscate-text"
-}, D = /* @__PURE__ */ n({
+}, V = /* @__PURE__ */ n({
   name: "ll-obfuscate-text",
   __name: "ObfuscateText",
   props: {
@@ -23,23 +18,23 @@ const k = {
     position: { default: "start" }
   },
   setup(s) {
-    const e = r(!1), t = s, l = u(() => t.showToggle && e.value ? t.text : t.obfuscateAll ? t.maskChar.repeat(t.maskCharCount) : b(t.text, {
+    const e = u(!1), t = s, l = r(() => t.showToggle && e.value ? t.text : t.obfuscateAll ? t.maskChar.repeat(t.maskCharCount) : b(t.text, {
       maskChar: t.maskChar,
       maskCharCount: t.maskCharCount,
       lengthToKeep: t.lengthToKeep,
       position: t.position
     }));
     return (w, o) => (a(), c("span", k, [
-      i(m(l.value) + " ", 1),
-      t.showToggle ? (a(), f(x, {
+      f(i(l.value) + " ", 1),
+      t.showToggle ? (a(), h(x, {
         key: 0,
         class: "tw-ml-1 tw-h-auto tw-w-auto tw-p-0",
         icon: "",
         type: "button",
         onClick: o[0] || (o[0] = (T) => e.value = !e.value)
       }, {
-        default: p(() => [
-          h(C, {
+        default: m(() => [
+          p(C, {
             name: e.value ? "hide" : "show",
             class: d(["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"
@@ -51,6 +46,6 @@ const k = {
   }
 });
 export {
-  D as default
+  V 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 } 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  import obfuscateText, { ObfuscateTextOptions } from '../../utils/obfuscateText';\n\n  export interface ObfuscateTextProps extends ObfuscateTextOptions {\n    /**\n     * The full text\n     */\n    text: string;\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) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    return obfuscateText(props.text, {\n      maskChar: props.maskChar,\n      maskCharCount: props.maskCharCount,\n      lengthToKeep: props.lengthToKeep,\n      position: props.position,\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=\"props.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","props","__props","obfuscatedText","computed","obfuscateText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BQ,UAAAA,IAAoBC,EAAI,EAAK,GAE7BC,IAAQC,GASRC,IAAiBC,EAAS,MAC1BH,EAAM,cAAcF,EAAkB,QACjCE,EAAM,OAGXA,EAAM,eACDA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAG3CI,EAAcJ,EAAM,MAAM;AAAA,MAC/B,UAAUA,EAAM;AAAA,MAChB,eAAeA,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,UAAUA,EAAM;AAAA,IAAA,CACjB,CACF;;;;;;;;;;;;;;;;;;;;;;"}
+{"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  import obfuscateText, { ObfuscateTextOptions } from '../../utils/obfuscateText';\n\n  export interface ObfuscateTextProps extends ObfuscateTextOptions {\n    /**\n     * The full text\n     */\n    text: string;\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) {\n      return props.maskChar.repeat(props.maskCharCount);\n    }\n\n    return obfuscateText(props.text, {\n      maskChar: props.maskChar,\n      maskCharCount: props.maskCharCount,\n      lengthToKeep: props.lengthToKeep,\n      position: props.position,\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=\"props.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","props","__props","obfuscatedText","computed","obfuscateText"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4BQ,UAAAA,IAAoBC,EAAI,EAAK,GAE7BC,IAAQC,GASRC,IAAiBC,EAAS,MAC1BH,EAAM,cAAcF,EAAkB,QACjCE,EAAM,OAGXA,EAAM,eACDA,EAAM,SAAS,OAAOA,EAAM,aAAa,IAG3CI,EAAcJ,EAAM,MAAM;AAAA,MAC/B,UAAUA,EAAM;AAAA,MAChB,eAAeA,EAAM;AAAA,MACrB,cAAcA,EAAM;AAAA,MACpB,UAAUA,EAAM;AAAA,IAAA,CACjB,CACF;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ObfuscateText.vue.d.ts

@@ -27,26 +27,26 @@ declare type __VLS_WithDefaults<P, D> = {
 };
 
 declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ObfuscateTextProps>, {
-    maskChar: string;
-    maskCharCount: number;
-    lengthToKeep: number;
-    position: string;
-    obfuscateAll: boolean;
-    showToggle: boolean;
+maskChar: string;
+maskCharCount: number;
+lengthToKeep: number;
+position: string;
+obfuscateAll: boolean;
+showToggle: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ObfuscateTextProps>, {
-    maskChar: string;
-    maskCharCount: number;
-    lengthToKeep: number;
-    position: string;
-    obfuscateAll: boolean;
-    showToggle: boolean;
+maskChar: string;
+maskCharCount: number;
+lengthToKeep: number;
+position: string;
+obfuscateAll: boolean;
+showToggle: boolean;
 }>>> & Readonly<{}>, {
-    position: "start" | "end";
-    maskChar: string;
-    maskCharCount: number;
-    lengthToKeep: number;
-    obfuscateAll: boolean;
-    showToggle: boolean;
+position: "start" | "end";
+maskChar: string;
+maskCharCount: number;
+lengthToKeep: number;
+obfuscateAll: boolean;
+showToggle: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 

package/dist/PageContent.js

@@ -1,5 +1,5 @@
 import { defineComponent as r, useSlots as l, useCssModule as d, openBlock as o, createElementBlock as _, normalizeClass as t, unref as e, createElementVNode as p, renderSlot as c, createCommentVNode as i } from "vue";
-import { _ as m } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as m } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const u = /* @__PURE__ */ r({
   name: "ll-page-content",
   __name: "PageContent",

package/dist/PageContent.vue.d.ts

@@ -9,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     sidebar?(_: {}): any;
 }>;