@dialpad/dialtone/dist/vue3/lib/modal/modal.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"modal.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          disableRootScrolling(returnFirstEl(this.$el).getRootNode().host);\n        } else {\n          enableRootScrolling(returnFirstEl(this.$el).getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","props","getUniqueString","k","MODAL_KIND_MODIFIERS","s","MODAL_SIZE_MODIFIERS","kind","NOTICE_KINDS","initialFocusElement","MODAL_BANNER_KINDS","EVENT_KEYNAMES","hasSlotContent","event","isShowing","disableRootScrolling","returnFirstEl","enableRootScrolling","_a","e","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createBlock","_component_dt_lazy_show","_mergeProps","$props","$data","$options","_toHandlers","_withCtx","_ctx","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","_Transition","_createElementVNode","_hoisted_4","_component_dt_button","_component_dt_icon_close","_component_sr_only_close_button"],"mappings":"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"}