@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
304 lines (303 loc) • 7.67 kB
JavaScript
import { HTML_ELEMENT_TYPE as e } from "../../common/constants/index.js";
import { getUniqueString as t, hasSlotContent as n } from "../../common/utils/index.js";
import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import i from "../combobox/combobox-loading-list.js";
import a from "../combobox/combobox-empty-list.js";
import { t as o } from "../../combobox-DYdjapa4.js";
import { COMBOBOX_LABEL_SIZES as s } from "../combobox/combobox-constants.js";
import { POPOVER_APPEND_TO_VALUES as c, POPOVER_CONTENT_WIDTHS as l } from "../popover/popover-constants.js";
import u from "../popover/popover.js";
import { DROPDOWN_PADDING_CLASSES as d } from "../dropdown/dropdown-constants.js";
import { createBlock as f, createElementVNode as p, createSlots as m, createVNode as h, mergeProps as g, normalizeClass as _, normalizeProps as v, openBlock as y, renderSlot as b, resolveComponent as x, withCtx as S, withKeys as C } from "vue";
//#region components/combobox_with_popover/combobox_with_popover.vue
var w = {
compatConfig: { MODE: 3 },
name: "DtComboboxWithPopover",
components: {
DtCombobox: o,
DtPopover: u,
ComboboxLoadingList: i,
ComboboxEmptyList: a
},
props: {
label: {
type: String,
required: !0
},
labelVisible: {
type: Boolean,
default: !0
},
size: {
type: String,
default: null,
validator: (e) => Object.values(s).includes(e)
},
description: {
type: String,
default: ""
},
showList: {
type: Boolean,
default: null
},
listId: {
type: String,
default() {
return t();
}
},
listClass: {
type: [
String,
Array,
Object
],
default: ""
},
dialogClass: {
type: [
String,
Array,
Object
],
default: ""
},
onBeginningOfList: {
type: Function,
default: null
},
onEndOfList: {
type: Function,
default: null
},
maxHeight: {
type: String,
default: ""
},
maxWidth: {
type: String,
default: ""
},
padding: {
type: String,
default: "small",
validator: (e) => Object.keys(d).some((t) => t === e)
},
contentWidth: {
type: String,
default: null,
validator: (e) => l.includes(e)
},
openWithArrowKeys: {
type: Boolean,
default: !1
},
popoverOffset: {
type: Array,
default: () => [0, 4]
},
popoverSticky: {
type: [Boolean, String],
default: !1
},
hasSuggestionList: {
type: Boolean,
default: !0
},
loading: {
type: Boolean,
default: !1
},
emptyList: {
type: Boolean,
default: !1
},
emptyStateMessage: {
type: String,
default: ""
},
appendTo: {
type: [e, String],
default: "body",
validator: (e) => c.includes(e) || e instanceof HTMLElement
},
transition: {
type: String,
default: "fade"
}
},
emits: [
"select",
"escape",
"highlight",
"opened"
],
data() {
return {
DROPDOWN_PADDING_CLASSES: d,
isListShown: !1,
isInputFocused: !1,
isListFocused: !1,
externalAnchor: t(),
hasSlotContent: n
};
},
computed: { comboboxListeners() {
return {
...this.$attrs,
onSelect: this.onSelect,
onEscape: this.onEscape,
onHighlight: this.onHighlight
};
} },
watch: {
showList: {
handler: function(e) {
e !== null && (this.isListShown = e);
},
immediate: !0
},
isListShown(e) {
e ? window.addEventListener("mousedown", this.onFocusOut) : window.removeEventListener("mousedown", this.onFocusOut), this.onOpened(e);
}
},
methods: {
handleDisplayList(e) {
!this.hasSuggestionList && e && this.showComboboxList(), !this.hasSuggestionList && !e && this.closeComboboxList();
},
showComboboxList() {
this.showList ?? (this.isListShown = !0);
},
closeComboboxList() {
this.showList ?? (this.isListShown = !1);
},
onSelect(e) {
this.loading || (this.$emit("select", e), this.hasSuggestionList || this.closeComboboxList());
},
onEscape() {
this.$emit("escape"), this.closeComboboxList();
},
onHighlight(e) {
this.loading || this.$emit("highlight", e);
},
onOpened(e) {
this.$emit("opened", e);
},
onFocusIn(e) {
this.hasSuggestionList && e && this.$refs.input?.querySelector("input") === e.target && this.showComboboxList();
},
onFocusOut(e) {
let t = this.$refs.popover?.tip?.popper, n = this.$refs.input;
e.composedPath()?.some((e) => [t, n].includes(e)) || this.closeComboboxList();
},
openOnArrowKeyPress() {
this.showList !== null || this.isListShown || !this.openWithArrowKeys || this.showComboboxList();
}
}
}, T = ["id"], E = { ref: "header" }, D = ["onMouseleave", "onFocusout"], O = { ref: "footer" };
function k(e, t, n, r, i, a) {
let o = x("combobox-loading-list"), s = x("combobox-empty-list"), c = x("dt-popover"), l = x("dt-combobox");
return y(), f(l, g({
ref: "combobox",
loading: n.loading,
label: n.label,
"label-visible": n.labelVisible,
size: n.size,
description: n.description,
"empty-list": n.emptyList,
"empty-state-message": n.emptyStateMessage,
"show-list": i.isListShown,
"on-beginning-of-list": n.onBeginningOfList,
"on-end-of-list": n.onEndOfList,
"list-rendered-outside": !0,
"list-id": n.listId,
"data-qa": "dt-combobox"
}, a.comboboxListeners), {
input: S(({ inputProps: n }) => [p("div", {
id: i.externalAnchor,
ref: "input",
onFocusin: t[0] || (t[0] = (...e) => a.onFocusIn && a.onFocusIn(...e)),
onKeydown: [t[1] || (t[1] = C((e) => a.openOnArrowKeyPress(e), ["up"])), t[2] || (t[2] = C((e) => a.openOnArrowKeyPress(e), ["down"]))]
}, [b(e.$slots, "input", {
inputProps: n,
onInput: a.handleDisplayList
})], 40, T)]),
list: S(({ opened: r, listProps: a, clearHighlightIndex: l }) => [h(c, {
ref: "popover",
open: i.isListShown,
"onUpdate:open": t[3] || (t[3] = (e) => i.isListShown = e),
"hide-on-click": !1,
"max-height": n.maxHeight,
"max-width": n.maxWidth,
offset: n.popoverOffset,
sticky: n.popoverSticky,
placement: "bottom-start",
"initial-focus-element": "none",
padding: "none",
role: "listbox",
"external-anchor": i.externalAnchor,
"content-width": n.contentWidth,
"content-appear": !0,
"content-tabindex": null,
modal: !1,
"auto-focus": !1,
"append-to": n.appendTo,
"dialog-class": n.dialogClass,
transition: n.transition,
onOpened: r
}, m({
content: S(() => [p("div", {
ref: "listWrapper",
class: _([
"d-recipe-combobox-with-popover__list",
i.DROPDOWN_PADDING_CLASSES[n.padding],
n.listClass
]),
onMouseleave: l,
onFocusout: l
}, [n.loading ? (y(), f(o, v(g({ key: 0 }, a)), null, 16)) : n.emptyList && n.emptyStateMessage ? (y(), f(s, g({ key: 1 }, a, { message: n.emptyStateMessage }), null, 16, ["message"])) : b(e.$slots, "list", {
key: 2,
listProps: a
})], 42, D)]),
_: 2
}, [i.hasSlotContent(e.$slots.header) ? {
name: "headerContent",
fn: S(() => [p("div", E, [b(e.$slots, "header")], 512)]),
key: "0"
} : void 0, i.hasSlotContent(e.$slots.footer) ? {
name: "footerContent",
fn: S(() => [p("div", O, [b(e.$slots, "footer")], 512)]),
key: "1"
} : void 0]), 1032, [
"open",
"max-height",
"max-width",
"offset",
"sticky",
"external-anchor",
"content-width",
"append-to",
"dialog-class",
"transition",
"onOpened"
])]),
_: 3
}, 16, [
"loading",
"label",
"label-visible",
"size",
"description",
"empty-list",
"empty-state-message",
"show-list",
"on-beginning-of-list",
"on-end-of-list",
"list-id"
]);
}
var A = /* @__PURE__ */ r(w, [["render", k]]);
//#endregion
export { A as default };
//# sourceMappingURL=combobox-with-popover.js.map