@dialpad/dialtone-vue/dist/components/rich_text_editor/extensions/suggestion/SuggestionList.vue.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"SuggestionList.vue.cjs","sources":["../../../../../components/rich_text_editor/extensions/suggestion/SuggestionList.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div class=\"d-popover__dialog d-suggestion-list__container\">\n    <ul\n      v-show=\"items.length\"\n      ref=\"suggestionList\"\n      class=\"d-suggestion-list\"\n    >\n      <dt-list-item\n        v-for=\"(item, index) in items\"\n        :key=\"item.id\"\n        :class=\"[\n          'd-suggestion-list__item',\n          { 'd-list-item--highlighted': index === selectedIndex },\n        ]\"\n        navigation-type=\"arrow-keys\"\n        @click=\"selectItem(index)\"\n        @keydown.prevent=\"onKeyDown\"\n      >\n        <component\n          :is=\"itemComponent\"\n          :item=\"item\"\n        />\n      </dt-list-item>\n    </ul>\n  </div>\n</template>\n\n<script>\nimport { DtListItem } from '@/components/list_item';\n\nexport default {\n  name: 'SuggestionList',\n  components: {\n    DtListItem,\n  },\n\n  props: {\n    items: {\n      type: Array,\n      required: true,\n    },\n\n    command: {\n      type: Function,\n      required: true,\n    },\n\n    itemComponent: {\n      type: Object,\n      required: true,\n    },\n\n    itemType: {\n      type: String,\n      required: true,\n    },\n  },\n\n  data () {\n    return {\n      selectedIndex: 0,\n    };\n  },\n\n  watch: {\n    items () {\n      this.selectedIndex = 0;\n    },\n  },\n\n  methods: {\n    onKeyDown ({ event }) {\n      if (event.key === 'ArrowUp') {\n        this.upHandler();\n        return true;\n      }\n\n      if (event.key === 'ArrowDown') {\n        this.downHandler();\n        return true;\n      }\n\n      if (event.key === 'Enter' || event.key === 'Tab') {\n        this.selectHandler();\n        return true;\n      }\n\n      return false;\n    },\n\n    upHandler () {\n      this.selectedIndex = ((this.selectedIndex + this.items.length) - 1) % this.items.length;\n\n      this.scrollActiveElementIntoView();\n    },\n\n    downHandler () {\n      this.selectedIndex = (this.selectedIndex + 1) % this.items.length;\n\n      this.scrollActiveElementIntoView();\n    },\n\n    async scrollActiveElementIntoView () {\n      await this.$nextTick();\n      const activeElement = this.$refs.suggestionList.querySelector('.d-list-item--highlighted');\n      if (activeElement) {\n        activeElement.scrollIntoView({\n          behaviour: 'smooth',\n          block: 'center',\n        });\n      }\n    },\n\n    selectHandler () {\n      this.selectItem(this.selectedIndex);\n    },\n\n    selectItem (index) {\n      const item = this.items[index];\n\n      switch (this.itemType) {\n        case 'emoji':\n          this.command(item);\n          return;\n        case 'mention':\n          this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc });\n          break;\n        case 'channel':\n          this.command({ name: item.name, id: item.id });\n          break;\n        case 'slash-command':\n          this.command({ command: item.command });\n          break;\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtListItem"],"mappings":";;;;AA+BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,YAAAA,UAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,EAAA,SAAA;AACA,UAAA,MAAA,QAAA,WAAA;AACA,aAAA,UAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,MAAA,QAAA,aAAA;AACA,aAAA,YAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,MAAA,QAAA,WAAA,MAAA,QAAA,OAAA;AACA,aAAA,cAAA;AACA,eAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,WAAA,iBAAA,KAAA,gBAAA,KAAA,MAAA,SAAA,KAAA,KAAA,MAAA;AAEA,WAAA,4BAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,iBAAA,KAAA,gBAAA,KAAA,KAAA,MAAA;AAEA,WAAA,4BAAA;AAAA,IACA;AAAA,IAEA,MAAA,8BAAA;AACA,YAAA,KAAA;AACA,YAAA,gBAAA,KAAA,MAAA,eAAA,cAAA,2BAAA;AACA,UAAA,eAAA;AACA,sBAAA,eAAA;AAAA,UACA,WAAA;AAAA,UACA,OAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,WAAA,KAAA,aAAA;AAAA,IACA;AAAA,IAEA,WAAA,OAAA;AACA,YAAA,OAAA,KAAA,MAAA,KAAA;AAEA,cAAA,KAAA,UAAA;AAAA,QACA,KAAA;AACA,eAAA,QAAA,IAAA;AACA;AAAA,QACA,KAAA;AACA,eAAA,QAAA,EAAA,MAAA,KAAA,MAAA,IAAA,KAAA,IAAA,WAAA,KAAA,UAAA,CAAA;AACA;AAAA,QACA,KAAA;AACA,eAAA,QAAA,EAAA,MAAA,KAAA,MAAA,IAAA,KAAA,GAAA,CAAA;AACA;AAAA,QACA,KAAA;AACA,eAAA,QAAA,EAAA,SAAA,KAAA,QAAA,CAAA;AACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}