@dialpad/dialtone-vue/dist/lib/list-item/list-item.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"list-item.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      left-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      bottom-class=\"d-list-item__bottom\"\n      right-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\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.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","event","e"],"mappings":"iVAyDAA,EAAA,CAAA,WAAA,WAAA,QAAA,EAMAC,EAAA,CACA,KAAA,aAEA,WAAA,CACA,aAAAC,EAAAA,QACA,YAAAC,EAAAA,WACA,EAKA,OAAA,CACA,YAAA,CAAA,QAAA,IAAA,CACA,EAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,EAAAA,QAAA,gBAAA,CAAA,CACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,WACA,UAAAC,GAAAL,EAAA,SAAAK,CAAA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,KAAA,CACA,KAAA,OACA,QAAAC,EAAAA,gBAAA,QACA,UAAA,GAAA,OAAA,OAAAA,iBAAA,EAAA,SAAA,CAAA,CACA,EASA,eAAA,CACA,KAAA,OACA,QAAAC,EAAAA,2BAAA,KACA,UAAA,GAAA,OAAA,OAAAA,4BAAA,EAAA,SAAA,CAAA,CACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAQA,aAAA,CACA,KAAA,CAAA,OAAA,OAAA,KAAA,EACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,UAQA,YAQA,YACA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,GACA,iBAAA,EACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,OAAA,KAAA,OAAAD,EAAAA,gBAAA,OACA,EAEA,mBAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,QAAAE,GAAA,CACA,CAAA,QAAA,OAAA,EAAA,SAAAA,EAAA,KAAA,YAAA,CAAA,GACA,KAAA,QAAAA,CAAA,EAEA,KAAA,MAAA,UAAAA,CAAA,CACA,EAEA,UAAAA,GAAA,CACA,KAAA,aAAAA,CAAA,EACA,KAAA,MAAA,YAAAA,CAAA,CACA,EAEA,WAAAA,GAAA,CACA,KAAA,aAAAA,CAAA,EACA,KAAA,MAAA,aAAAA,CAAA,CACA,CACA,CACA,EAMA,eAAA,CACA,OAAA,KAAA,YACA,KAAA,aAAA,KAAA,YAAA,EAAA,KAAA,KAAA,KAAA,YAAA,EAAA,KAAA,iBAEA,EACA,EAEA,aAAA,CAEA,OAAA,KAAA,iBAAAD,EAAAA,2BAAA,GACA,EAKA,aAAA,CACA,OAAA,KAAA,iBAAAA,EAAAA,2BAAA,IACA,CACA,EAEA,QAAA,CACA,QAAAE,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,cAAA,CACA,KAAA,iBAAA,EACA,EAEA,cAAA,CACA,KAAA,iBAAA,EACA,CACA,CACA"}