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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"dropdown.cjs","sources":["../../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n  <dt-popover\n    ref=\"popover\"\n    :content-width=\"contentWidth\"\n    :open=\"open\"\n    :placement=\"placement\"\n    :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n    :fallback-placements=\"fallbackPlacements\"\n    padding=\"none\"\n    role=\"menu\"\n    :append-to=\"appendTo\"\n    :modal=\"modal\"\n    :max-height=\"maxHeight\"\n    :max-width=\"maxWidth\"\n    :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n    :open-on-context=\"openOnContext\"\n    v-bind=\"$attrs\"\n    :tether=\"tether\"\n    :transition=\"transition\"\n    v-on=\"dropdownListeners\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the dropdown -->\n      <slot\n        ref=\"anchor\"\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content=\"{ close }\">\n      <!-- eslint-disable-next-line max-len -->\n      <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions -->\n      <ul\n        :id=\"listId\"\n        ref=\"listWrapper\"\n        :class=\"listClasses\"\n        data-qa=\"dt-dropdown-list-wrapper\"\n        @mouseleave=\"clearHighlightIndex\"\n        @mousemove.capture=\"onMouseHighlight\"\n      >\n        <!-- @slot Slot for the list component -->\n        <slot\n          name=\"list\"\n          :close=\"close\"\n        />\n      </ul>\n    </template>\n    <template #footerContent=\"{ close }\">\n      <!-- @slot Slot for the footer content -->\n      <slot\n        name=\"footer\"\n        :close=\"close\"\n      />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      listItemRole: 'menuitem',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n      focusOnKeyboardNavigation: true,\n    }),\n  ],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Controls whether the dropdown is shown. Leaving this null will have the dropdown trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports v-model\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Opens the dropdown on right click (context menu). If you set this value to `true`,\n     * the default trigger behavior will be disabled.\n     */\n    openOnContext: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     * @values none, small, large\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n     * below it, but it is invisible.\n     */\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     * @values null, anchor\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"placement\",\n     * it will attempt to change it's direction to the \"fallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     */\n    placement: {\n      type: String,\n      default: 'bottom',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If set to false the dialog will display over top of the anchor when there is insufficient space.\n     * If set to true it will never move from its position relative to the anchor and will clip instead.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * @values true, false\n     */\n    tether: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      LIST_ITEM_NAVIGATION_TYPES,\n      DROPDOWN_PADDING_CLASSES,\n      EVENT_KEYNAMES,\n      openedWithKeyboard: false,\n      isOpen: null,\n    };\n  },\n\n  computed: {\n    dropdownListeners () {\n      return {\n        opened: isPopoverOpen => {\n          this.updateInitialHighlightIndex(isPopoverOpen);\n        },\n\n        keydown: event => {\n          const eventCode = event.code;\n\n          switch (eventCode) {\n            case EVENT_KEYNAMES.up:\n            case EVENT_KEYNAMES.arrowup:\n              this.onUpKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.down:\n            case EVENT_KEYNAMES.arrowdown:\n              this.onDownKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.space:\n            case EVENT_KEYNAMES.spacebar:\n              this.onSpaceKey();\n              break;\n            case EVENT_KEYNAMES.enter:\n              this.onEnterKey();\n              break;\n            case EVENT_KEYNAMES.home:\n              this.onHomeKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.end:\n              this.onEndKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            default:\n              this.onKeyPress(event);\n              break;\n          }\n\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemEl () {\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n\n    isArrowKeyNav () {\n      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n    },\n\n    listClasses () {\n      return [\n        'd-dropdown-list',\n        DROPDOWN_PADDING_CLASSES[this.padding],\n        this.listClass,\n        { 'd-context-menu-list': this.openOnContext },\n      ];\n    },\n\n    shouldOpenWithArrowKeys () {\n      return !this.openOnContext;\n    },\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      const liElement = e.target.closest('li');\n\n      if (liElement && liElement.role && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n        liElement.focus();\n      }\n    },\n\n    getListElement () {\n      return this.$refs.listWrapper;\n    },\n\n    clearHighlightIndex () {\n      this.setHighlightIndex(-1);\n    },\n\n    afterHighlight () {\n      if (this.highlightIndex === this._itemsLength() - 1) {\n        return;\n      }\n\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    updateInitialHighlightIndex (isPopoverOpen) {\n      this.isOpen = isPopoverOpen;\n\n      if (isPopoverOpen) {\n        if (this.openedWithKeyboard && this.isArrowKeyNav) {\n          this.setHighlightIndex(0);\n        }\n        this.$emit('opened', true);\n      } else {\n        this.clearHighlightIndex();\n        this.openedWithKeyboard = false;\n        this.$emit('opened', false);\n      }\n    },\n\n    onSpaceKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onEnterKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onUpKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onUpKey();\n      }\n    },\n\n    onDownKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onDownKey();\n      }\n    },\n\n    onHomeKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onHomeKey();\n    },\n\n    onEndKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onEndKey();\n    },\n\n    onKeyPress (e) {\n      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      return this.onNavigationKey(e.key);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","KeyboardNavigation","padding","DROPDOWN_PADDING_CLASSES","item","getUniqueString","LIST_ITEM_NAVIGATION_TYPES","t","appendTo","POPOVER_APPEND_TO_VALUES","EVENT_KEYNAMES","isPopoverOpen","event","liElement","_hoisted_1","_openBlock","_createBlock","_component_dt_popover","_mergeProps","$props","$data","$options","_ctx","_toHandlers","_withCtx","attrs","_renderSlot","close","_createElementVNode","_normalizeClass","args","_cache"],"mappings":"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"}