@dialpad/dialtone/dist/vue3/lib/dropdown/dropdown.js

Dialpad's Dialtone design system monorepo

import { EVENT_KEYNAMES as e } from "../../common/constants/index.js";
import { getUniqueString 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 { LIST_ITEM_NAVIGATION_TYPES as i } from "../list-item/list-item-constants.js";
import { POPOVER_APPEND_TO_VALUES as a } from "../popover/popover-constants.js";
import o from "../popover/popover.js";
import { DROPDOWN_PADDING_CLASSES as s } from "./dropdown-constants.js";
import { createBlock as c, createElementVNode as l, mergeProps as u, normalizeClass as d, openBlock as f, renderSlot as p, resolveComponent as m, toHandlers as h, withCtx as g } from "vue";
//#region components/dropdown/dropdown.vue
var _ = {
	compatConfig: { MODE: 3 },
	name: "DtDropdown",
	components: { DtPopover: o },
	mixins: [r({
		indexKey: "highlightIndex",
		idKey: "highlightId",
		listElementKey: "getListElement",
		listItemRole: "menuitem",
		afterHighlightMethod: "afterHighlight",
		beginningOfListMethod: "beginningOfListMethod",
		endOfListMethod: "endOfListMethod",
		activeItemKey: "activeItemEl",
		focusOnKeyboardNavigation: !0
	})],
	inheritAttrs: !1,
	props: {
		open: {
			type: Boolean,
			default: null
		},
		openOnContext: {
			type: Boolean,
			default: !1
		},
		padding: {
			type: String,
			default: "small",
			validator: (e) => Object.keys(s).some((t) => t === e)
		},
		modal: {
			type: Boolean,
			default: !0
		},
		contentWidth: {
			type: String,
			default: null
		},
		maxHeight: {
			type: String,
			default: ""
		},
		maxWidth: {
			type: String,
			default: ""
		},
		listId: {
			type: String,
			default() {
				return t();
			}
		},
		navigationType: {
			type: String,
			default: i.ARROW_KEYS,
			validator: (e) => Object.values(i).includes(e)
		},
		fallbackPlacements: {
			type: Array,
			default: () => ["auto"]
		},
		placement: {
			type: String,
			default: "bottom"
		},
		onBeginningOfList: {
			type: Function,
			default: null
		},
		onEndOfList: {
			type: Function,
			default: null
		},
		listClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		appendTo: {
			type: [HTMLElement, String],
			default: "body",
			validator: (e) => a.includes(e) || e instanceof HTMLElement
		},
		tether: {
			type: Boolean,
			default: !0
		},
		transition: {
			type: String,
			default: "fade"
		}
	},
	emits: [
		"keydown",
		"highlight",
		"update:open",
		"opened"
	],
	data() {
		return {
			LIST_ITEM_NAVIGATION_TYPES: i,
			DROPDOWN_PADDING_CLASSES: s,
			EVENT_KEYNAMES: e,
			openedWithKeyboard: !1,
			isOpen: null
		};
	},
	computed: {
		dropdownListeners() {
			return {
				"update:open": (e) => {
					this.$emit("update:open", e);
				},
				opened: (e) => {
					this.updateInitialHighlightIndex(e);
				},
				keydown: (t) => {
					switch (t.code) {
						case e.up:
						case e.arrowup:
							this.onUpKeyPress(t), t.stopPropagation(), t.preventDefault();
							break;
						case e.down:
						case e.arrowdown:
							this.onDownKeyPress(t), t.stopPropagation(), t.preventDefault();
							break;
						case e.space:
						case e.spacebar:
							this.onSpaceKey();
							break;
						case e.enter:
							this.onEnterKey();
							break;
						case e.home:
							this.onHomeKeyPress(t), t.stopPropagation(), t.preventDefault();
							break;
						case e.end:
							this.onEndKeyPress(t), t.stopPropagation(), t.preventDefault();
							break;
						default:
							this.onKeyPress(t);
							break;
					}
					this.$emit("keydown", t);
				}
			};
		},
		beginningOfListMethod() {
			return this.onBeginningOfList || this.jumpToEnd;
		},
		endOfListMethod() {
			return this.onEndOfList || this.jumpToBeginning;
		},
		activeItemEl() {
			return this.getListElement().querySelector("#" + this.highlightId);
		},
		isArrowKeyNav() {
			return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;
		},
		listClasses() {
			return [
				"d-dropdown-list",
				s[this.padding],
				this.listClass,
				{ "d-context-menu-list": this.openOnContext }
			];
		},
		shouldOpenWithArrowKeys() {
			return !this.openOnContext;
		}
	},
	methods: {
		onMouseHighlight(e) {
			let t = e.target.closest("li");
			t && t.role && this.highlightId !== t.id && (this.setHighlightId(t.id), t.focus());
		},
		getListElement() {
			return this.$refs.listWrapper;
		},
		clearHighlightIndex() {
			this.setHighlightIndex(-1);
		},
		afterHighlight() {
			this.highlightIndex !== this._itemsLength() - 1 && this.$emit("highlight", this.highlightIndex);
		},
		updateInitialHighlightIndex(e) {
			this.isOpen = e, e ? (this.openedWithKeyboard && this.isArrowKeyNav && this.setHighlightIndex(0), this.$emit("opened", !0)) : (this.clearHighlightIndex(), this.openedWithKeyboard = !1, this.$emit("opened", !1));
		},
		onSpaceKey() {
			this.open || (this.openedWithKeyboard = !0);
		},
		onEnterKey() {
			this.open || (this.openedWithKeyboard = !0);
		},
		onUpKeyPress() {
			if (!this.isOpen) {
				this.openedWithKeyboard = !0;
				return;
			}
			if (this.isArrowKeyNav) return this.onUpKey();
		},
		onDownKeyPress() {
			if (!this.isOpen) {
				this.openedWithKeyboard = !0;
				return;
			}
			if (this.isArrowKeyNav) return this.onDownKey();
		},
		onHomeKeyPress() {
			if (!(!this.isOpen || !this.isArrowKeyNav)) return this.onHomeKey();
		},
		onEndKeyPress() {
			if (!(!this.isOpen || !this.isArrowKeyNav)) return this.onEndKey();
		},
		onKeyPress(e) {
			if (!(!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key))) return e.stopPropagation(), e.preventDefault(), this.onNavigationKey(e.key);
		}
	}
}, v = ["id"];
function y(e, t, n, r, i, a) {
	let o = m("dt-popover");
	return f(), c(o, u({
		ref: "popover",
		"content-width": n.contentWidth,
		open: n.open,
		placement: n.placement,
		"initial-focus-element": i.openedWithKeyboard ? "first" : "dialog",
		"fallback-placements": n.fallbackPlacements,
		padding: "none",
		role: "menu",
		"append-to": n.appendTo,
		modal: n.modal,
		"max-height": n.maxHeight,
		"max-width": n.maxWidth,
		"open-with-arrow-keys": a.shouldOpenWithArrowKeys,
		"open-on-context": n.openOnContext
	}, e.$attrs, {
		tether: n.tether,
		transition: n.transition
	}, h(a.dropdownListeners)), {
		anchor: g(({ attrs: t }) => [p(e.$slots, "anchor", u({ ref: "anchor" }, t))]),
		content: g(({ close: r }) => [l("ul", {
			id: n.listId,
			ref: "listWrapper",
			class: d(a.listClasses),
			"data-qa": "dt-dropdown-list-wrapper",
			onMouseleave: t[0] || (t[0] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
			onMousemoveCapture: t[1] || (t[1] = (...e) => a.onMouseHighlight && a.onMouseHighlight(...e))
		}, [p(e.$slots, "list", { close: r })], 42, v)]),
		footerContent: g(({ close: t }) => [p(e.$slots, "footer", { close: t })]),
		_: 3
	}, 16, [
		"content-width",
		"open",
		"placement",
		"initial-focus-element",
		"fallback-placements",
		"append-to",
		"modal",
		"max-height",
		"max-width",
		"open-with-arrow-keys",
		"open-on-context",
		"tether",
		"transition"
	]);
}
var b = /* @__PURE__ */ n(_, [["render", y]]);
//#endregion
export { b as default };

//# sourceMappingURL=dropdown.js.map