@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
117 lines (116 loc) • 3.35 kB
JavaScript
import normalizeComponent from "../../../../_virtual/_plugin-vue2_normalizer.js";
import DtListItem from "../../../list_item/list_item.vue.js";
const _sfc_main = {
name: "SuggestionList",
components: {
DtListItem
},
props: {
items: {
type: Array,
required: true
},
command: {
type: Function,
required: true
},
itemComponent: {
type: Object,
required: true
},
itemType: {
type: String,
required: true
}
},
data() {
return {
selectedIndex: 0
};
},
watch: {
items() {
this.selectedIndex = 0;
}
},
methods: {
onKeyDown({ event }) {
if (event.key === "ArrowUp") {
this.upHandler();
return true;
}
if (event.key === "ArrowDown") {
this.downHandler();
return true;
}
if (event.key === "Enter" || event.key === "Tab") {
this.selectHandler();
return true;
}
return false;
},
upHandler() {
this.selectedIndex = (this.selectedIndex + this.items.length - 1) % this.items.length;
this.scrollActiveElementIntoView();
},
downHandler() {
this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
this.scrollActiveElementIntoView();
},
async scrollActiveElementIntoView() {
await this.$nextTick();
const activeElement = this.$refs.suggestionList.querySelector(".d-list-item--highlighted");
if (activeElement) {
activeElement.scrollIntoView({
behaviour: "smooth",
block: "center"
});
}
},
selectHandler() {
this.selectItem(this.selectedIndex);
},
selectItem(index) {
const item = this.items[index];
switch (this.itemType) {
case "emoji":
this.command(item);
return;
case "mention":
this.command({ name: item.name, id: item.id, avatarSrc: item.avatarSrc });
break;
case "channel":
this.command({ name: item.name, id: item.id });
break;
case "slash-command":
this.command({ command: item.command });
break;
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "d-popover__dialog d-suggestion-list__container" }, [_c("ul", { directives: [{ name: "show", rawName: "v-show", value: _vm.items.length, expression: "items.length" }], ref: "suggestionList", staticClass: "d-suggestion-list" }, _vm._l(_vm.items, function(item, index) {
return _c("dt-list-item", { key: item.id, class: [
"d-suggestion-list__item",
{ "d-list-item--highlighted": index === _vm.selectedIndex }
], attrs: { "navigation-type": "arrow-keys" }, on: { "click": function($event) {
return _vm.selectItem(index);
}, "keydown": function($event) {
$event.preventDefault();
return _vm.onKeyDown.apply(null, arguments);
} } }, [_c(_vm.itemComponent, { tag: "component", attrs: { "item": item } })], 1);
}), 1)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const SuggestionList = __component__.exports;
export {
SuggestionList as default
};
//# sourceMappingURL=SuggestionList.vue.js.map