@dialpad/dialtone-vue/dist/lib/combobox-with-popover/combobox-with-popover.js

Vue component library for Dialpad's design system Dialtone

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 "../combobox/combobox-loading-list.js";
import i from "../combobox/combobox-empty-list.js";
import { t as a } from "../../combobox-DgClbLOg.js";
import { COMBOBOX_LABEL_SIZES as o } from "../combobox/combobox-constants.js";
import { POPOVER_APPEND_TO_VALUES as s, POPOVER_CONTENT_WIDTHS as c } from "../popover/popover-constants.js";
import l from "../popover/popover.js";
import { DROPDOWN_PADDING_CLASSES as u } from "../dropdown/dropdown-constants.js";
import { createBlock as d, createElementVNode as f, createSlots as p, createVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, openBlock as v, renderSlot as y, resolveComponent as b, withCtx as x, withKeys as S } from "vue";
//#region components/combobox_with_popover/combobox_with_popover.vue
var C = {
	compatConfig: { MODE: 3 },
	name: "DtComboboxWithPopover",
	components: {
		DtCombobox: a,
		DtPopover: l,
		ComboboxLoadingList: r,
		ComboboxEmptyList: i
	},
	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: ""
		},
		showList: {
			type: Boolean,
			default: null
		},
		listId: {
			type: String,
			default() {
				return e();
			}
		},
		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(u).some((t) => t === e)
		},
		contentWidth: {
			type: String,
			default: null,
			validator: (e) => c.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: [HTMLElement, String],
			default: "body",
			validator: (e) => s.includes(e) || e instanceof HTMLElement
		},
		transition: {
			type: String,
			default: "fade"
		}
	},
	emits: [
		"select",
		"escape",
		"highlight",
		"opened"
	],
	data() {
		return {
			DROPDOWN_PADDING_CLASSES: u,
			isListShown: !1,
			isInputFocused: !1,
			isListFocused: !1,
			externalAnchor: e(),
			hasSlotContent: t
		};
	},
	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();
		}
	}
}, w = ["id"], T = { ref: "header" }, E = ["onMouseleave", "onFocusout"], D = { ref: "footer" };
function O(e, t, n, r, i, a) {
	let o = b("combobox-loading-list"), s = b("combobox-empty-list"), c = b("dt-popover"), l = b("dt-combobox");
	return v(), d(l, h({
		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: x(({ inputProps: n }) => [f("div", {
			id: i.externalAnchor,
			ref: "input",
			onFocusin: t[0] || (t[0] = (...e) => a.onFocusIn && a.onFocusIn(...e)),
			onKeydown: [t[1] || (t[1] = S((e) => a.openOnArrowKeyPress(e), ["up"])), t[2] || (t[2] = S((e) => a.openOnArrowKeyPress(e), ["down"]))]
		}, [y(e.$slots, "input", {
			inputProps: n,
			onInput: a.handleDisplayList
		})], 40, w)]),
		list: x(({ opened: r, listProps: a, clearHighlightIndex: l }) => [m(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
		}, p({
			content: x(() => [f("div", {
				ref: "listWrapper",
				class: g([
					"d-recipe-combobox-with-popover__list",
					i.DROPDOWN_PADDING_CLASSES[n.padding],
					n.listClass
				]),
				onMouseleave: l,
				onFocusout: l
			}, [n.loading ? (v(), d(o, _(h({ key: 0 }, a)), null, 16)) : n.emptyList && n.emptyStateMessage ? (v(), d(s, h({ key: 1 }, a, { message: n.emptyStateMessage }), null, 16, ["message"])) : y(e.$slots, "list", {
				key: 2,
				listProps: a
			})], 42, E)]),
			_: 2
		}, [i.hasSlotContent(e.$slots.header) ? {
			name: "headerContent",
			fn: x(() => [f("div", T, [y(e.$slots, "header")], 512)]),
			key: "0"
		} : void 0, i.hasSlotContent(e.$slots.footer) ? {
			name: "footerContent",
			fn: x(() => [f("div", D, [y(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 k = /* @__PURE__ */ n(C, [["render", O]]);
//#endregion
export { k as default };

//# sourceMappingURL=combobox-with-popover.js.map