@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
229 lines (228 loc) • 6.9 kB
JavaScript
import { getUniqueString as e, hasSlotContent as t } from "./common/utils/index.js";
import { t as n } from "./_plugin-vue_export-helper-BTgDAbhb.js";
import r from "./common/mixins/keyboard-list-navigation.js";
import i from "./lib/combobox/combobox-loading-list.js";
import a from "./lib/combobox/combobox-empty-list.js";
import { COMBOBOX_LABEL_SIZES as o } from "./lib/combobox/combobox-constants.js";
import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, mergeProps as d, normalizeProps as f, openBlock as p, renderSlot as m, resolveComponent as h, withCtx as g, withKeys as _, withModifiers as v } from "vue";
//#region components/combobox/combobox.vue
var y = {
compatConfig: { MODE: 3 },
name: "DtCombobox",
components: {
ComboboxLoadingList: i,
ComboboxEmptyList: a
},
mixins: [r({
indexKey: "highlightIndex",
idKey: "highlightId",
listElementKey: "getListElement",
afterHighlightMethod: "afterHighlight",
beginningOfListMethod: "beginningOfListMethod",
endOfListMethod: "endOfListMethod",
activeItemKey: "activeItemEl"
})],
props: {
label: {
type: String,
required: !0
},
labelVisible: {
type: Boolean,
default: !0
},
size: {
type: String,
default: null,
validator: (e) => Object.values(o).includes(e)
},
description: {
type: String,
default: ""
},
listId: {
type: String,
default() {
return e();
}
},
onBeginningOfList: {
type: Function,
default: null
},
onEndOfList: {
type: Function,
default: null
},
showList: {
type: Boolean,
default: !1
},
listRenderedOutside: {
type: Boolean,
default: !1
},
loading: {
type: Boolean,
default: !1
},
emptyList: {
type: Boolean,
default: !1
},
emptyStateMessage: {
type: String,
default: ""
},
emptyStateClass: {
type: [
String,
Object,
Array
],
default: ""
},
clickOnSelect: {
type: Boolean,
default: !1
}
},
emits: [
"select",
"escape",
"highlight",
"opened"
],
data() {
return {
outsideRenderedListRef: null,
hasSlotContent: t
};
},
computed: {
inputProps() {
return {
label: this.label,
labelVisible: this.labelVisible,
size: this.size,
description: this.description,
role: "combobox",
"aria-label": this.label,
"aria-expanded": this.showList.toString(),
"aria-owns": this.listId,
"aria-haspopup": "listbox",
"aria-activedescendant": this.activeItemId,
"aria-controls": this.listId
};
},
listProps() {
return {
role: "listbox",
id: this.listId,
class: "d-ps-relative",
"aria-label": this.label
};
},
beginningOfListMethod() {
return this.onBeginningOfList || this.jumpToEnd;
},
endOfListMethod() {
return this.onEndOfList || this.jumpToBeginning;
},
activeItemId() {
if (!(!this.showList || this.highlightIndex < 0 || this.loading)) return this.highlightId;
},
activeItemEl() {
return this.highlightId ? this.getListElement().querySelector("#" + this.highlightId) : "";
}
},
watch: {
showList(e) {
this.listRenderedOutside || (this.setInitialHighlightIndex(), this.$emit("opened", e)), !e && this.outsideRenderedListRef && (this.outsideRenderedListRef.removeEventListener("mousemove", this.onMouseHighlight), this.outsideRenderedListRef = null);
},
loading() {
this.$nextTick(() => {
this.setInitialHighlightIndex();
});
},
$props: {
deep: !0,
immediate: !0,
handler() {
this.validateEmptyListProps();
}
}
},
created() {
this.validateEmptyListProps();
},
methods: {
onMouseHighlight(e) {
if (this.loading) return;
let t = e.target.closest("li");
t && this.highlightId !== t.id && this.setHighlightId(t.id);
},
getListElement() {
return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);
},
clearHighlightIndex() {
this.showList && this.setHighlightIndex(-1);
},
afterHighlight() {
this.loading || this.$emit("highlight", this.highlightIndex);
},
onEnterKey() {
this.loading || this.emptyList || this.highlightIndex >= 0 && (this.$emit("select", this.highlightIndex), this.clickOnSelect && this.activeItemEl?.click());
},
onEscapeKey() {
this.$emit("escape");
},
onOpen(e, t) {
this.outsideRenderedListRef = t, this.outsideRenderedListRef?.addEventListener("mousemove", this.onMouseHighlight), this.$emit("opened", e), e && this.setInitialHighlightIndex();
},
onKeyValidation(e, t) {
!this.showList || !this.getListElement() || this[t](e);
},
setInitialHighlightIndex() {
this.showList && this.$nextTick(() => {
this.setHighlightIndex(this.loading ? -1 : 0);
});
},
validateEmptyListProps() {
this.$slots.emptyListItem || this.emptyList && !this.emptyStateMessage && console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n empty message.");
}
}
}, b = { "data-qa": "dt-combobox-input-wrapper" };
function x(e, t, n, r, i, a) {
let o = h("combobox-loading-list"), y = h("combobox-empty-list");
return p(), l("div", { onKeydown: [
t[3] || (t[3] = _(v((e) => a.onKeyValidation(e, "onEscapeKey"), ["stop"]), ["esc"])),
t[4] || (t[4] = _(v((e) => a.onKeyValidation(e, "onEnterKey"), ["exact"]), ["enter"])),
t[5] || (t[5] = _(v((e) => a.onKeyValidation(e, "onUpKey"), ["stop", "prevent"]), ["up"])),
t[6] || (t[6] = _(v((e) => a.onKeyValidation(e, "onDownKey"), ["stop", "prevent"]), ["down"])),
t[7] || (t[7] = _(v((e) => a.onKeyValidation(e, "onHomeKey"), ["stop", "prevent"]), ["home"])),
t[8] || (t[8] = _(v((e) => a.onKeyValidation(e, "onEndKey"), ["stop", "prevent"]), ["end"]))
] }, [u("div", b, [m(e.$slots, "input", { inputProps: a.inputProps })]), n.showList ? (p(), l("div", {
key: 0,
ref: "listWrapper",
"data-qa": "dt-combobox-list-wrapper",
onMouseleave: t[0] || (t[0] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
onFocusout: t[1] || (t[1] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
onMousemoveCapture: t[2] || (t[2] = (...e) => a.onMouseHighlight && a.onMouseHighlight(...e))
}, [n.loading && !n.listRenderedOutside ? (p(), s(o, f(d({ key: 0 }, a.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || i.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (p(), s(y, d({ key: 1 }, a.listProps, {
message: n.emptyStateMessage,
"item-class": n.emptyStateClass
}), {
default: g(() => [m(e.$slots, "emptyListItem")]),
_: 3
}, 16, ["message", "item-class"])) : m(e.$slots, "list", {
key: 2,
listProps: a.listProps,
opened: a.onOpen,
clearHighlightIndex: a.clearHighlightIndex
})], 544)) : c("", !0)], 32);
}
var S = /* @__PURE__ */ n(y, [["render", x]]);
//#endregion
export { S as t };
//# sourceMappingURL=combobox-DgClbLOg.js.map