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

Dialpad's Dialtone design system monorepo

{"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/vue3';\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  compatConfig: { MODE: 3 },\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     * 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        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      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\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","t","LIST_ITEM_NAVIGATION_TYPES","event","_openBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_withCtx","_component_dt_item_layout","_normalizeClass","_createSlots","_renderList","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}