@vizejs/ui 0.386.0 → 0.388.0

package/dist/popover-DeENBKXE.mjs

@@ -0,0 +1,714 @@
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { t as createDismissableLayer } from "./dismissable-layer-CpS07KUV.mjs";
+import { t as createFocusScope } from "./focus-scope-mEg8UoeE.mjs";
+import { t as createFocusGuards } from "./focus-guards-DSxiemx7.mjs";
+import { t as createInertOutside } from "./inert-outside-DOufBTyy.mjs";
+import { t as createScrollLock } from "./scroll-lock-BcmK0baN.mjs";
+import { t as portal_default } from "./portal-DeHaLxGL.mjs";
+import { p as positionerContext, t as positioner_default } from "./positioner-DaPo2YxM.mjs";
+import { t as presence_default } from "./presence-CTG1EV3w.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onMounted, onUnmounted, onUpdated, openBlock, renderSlot, shallowRef, unref, useTemplateRef, watch, watchEffect, withCtx } from "vue";
+//#region src/families/overlays/popover/popover-context.ts
+const popoverContext = createContext("Popover");
+//#endregion
+//#region src/families/overlays/popover/popover-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = [
+	"id",
+	"data-state",
+	"data-modal",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/overlays/popover/popover-root.vue
+var popover_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "popover-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		open: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		defaultOpen: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		modal: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	emits: ["update:open", "open-change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const openState = useControllableState({
+			value: () => __props.open,
+			defaultValue: () => __props.defaultOpen
+		});
+		const disabledState = computed(() => __props.disabled);
+		const isOpen = computed(() => openState.value.value && !disabledState.value);
+		const modalState = computed(() => __props.modal);
+		const state = computed(() => isOpen.value ? "open" : "closed");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "popover"
+		});
+		const triggerId = computed(() => deriveDeterministicId(baseId.value, "trigger"));
+		const contentId = computed(() => deriveDeterministicId(baseId.value, "content"));
+		const slotState = computed(() => ({
+			disabled: disabledState.value,
+			modal: modalState.value,
+			open: isOpen.value,
+			state: state.value
+		}));
+		const triggerElement = shallowRef(null);
+		const contentElement = shallowRef(null);
+		function commitOpen(value, nativeEvent = null) {
+			const previous = openState.value.value && !disabledState.value;
+			const next = value && !disabledState.value;
+			const changed = openState.set(next);
+			if (changed || previous !== next) {
+				emit("update:open", next);
+				emit("open-change", next, previous, nativeEvent);
+			}
+			return changed || previous !== next;
+		}
+		function setOpen(value, nativeEvent = null) {
+			return commitOpen(value, nativeEvent);
+		}
+		function openPopover(nativeEvent = null) {
+			return commitOpen(true, nativeEvent);
+		}
+		function close(nativeEvent = null) {
+			return commitOpen(false, nativeEvent);
+		}
+		function toggle(nativeEvent = null) {
+			return commitOpen(!isOpen.value, nativeEvent);
+		}
+		watch(disabledState, (next, previousDisabled) => {
+			if (next && openState.value.value) {
+				const previous = !previousDisabled && openState.value.value;
+				if (openState.set(false) || previous) {
+					emit("update:open", false);
+					emit("open-change", false, previous, null);
+				}
+			}
+		});
+		popoverContext.provide({
+			id: baseId,
+			triggerId,
+			contentId,
+			open: isOpen,
+			modal: modalState,
+			disabled: disabledState,
+			state,
+			triggerElement,
+			contentElement,
+			setOpen,
+			openPopover,
+			close,
+			toggle
+		});
+		__expose({
+			close,
+			contentId,
+			disabled: disabledState,
+			id: baseId,
+			modal: modalState,
+			open: isOpen,
+			openPopover,
+			setOpen,
+			state,
+			toggle,
+			triggerId
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				"data-vize-ui": "popover-root",
+				part: "root",
+				"data-state": state.value,
+				"data-modal": modalState.value ? "true" : "false",
+				"data-disabled": disabledState.value ? "true" : void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-68907a4e"]]);
+//#endregion
+//#region src/families/overlays/popover/popover-arrow.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"data-state",
+	"data-side",
+	"data-align"
+];
+//#endregion
+//#region src/families/overlays/popover/popover-arrow.vue
+var popover_arrow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "popover-arrow",
+	setup(__props, { expose: __expose }) {
+		const context = popoverContext.use();
+		const positioner = positionerContext.use();
+		const element = useTemplateRef("element");
+		onMounted(() => {
+			positioner.setArrow(element.value);
+		});
+		onUpdated(() => {
+			positioner.setArrow(element.value);
+		});
+		watchEffect(() => {
+			if (element.value) element.value.style.cssText = positioner.arrowStyle.value;
+		}, { flush: "sync" });
+		function sideFromPlacement(value) {
+			return value.split("-", 1)[0];
+		}
+		function alignFromPlacement(value) {
+			const [, align] = value.split("-");
+			return align ?? "center";
+		}
+		__expose({
+			element,
+			x: positioner.arrowX,
+			y: positioner.arrowY
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "popover-arrow",
+				part: "arrow",
+				"data-state": unref(context).state.value,
+				"data-side": sideFromPlacement(unref(positioner).resolvedPlacement.value),
+				"data-align": alignFromPlacement(unref(positioner).resolvedPlacement.value)
+			}, [renderSlot(_ctx.$slots, "default", {
+				x: unref(positioner).arrowX.value,
+				y: unref(positioner).arrowY.value
+			}, void 0, true)], 8, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-ee2301c8"]]);
+//#endregion
+//#region src/families/overlays/popover/popover-content-runtime.ts
+function usePopoverContentLifecycle(values) {
+	const { context, dismissableLayer, element, focusGuards, focusScope, inertOutside, ownerDocument, scrollLock } = values;
+	let mounted = false;
+	function activateControllers() {
+		scrollLock.activate();
+		inertOutside.activate();
+		dismissableLayer.activate();
+		focusGuards.activate();
+		focusScope.activate();
+	}
+	function deactivateControllers() {
+		dismissableLayer.deactivate();
+		focusGuards.deactivate();
+		inertOutside.deactivate();
+		scrollLock.deactivate();
+		focusScope.deactivate();
+	}
+	function syncControllers() {
+		ownerDocument.value = element.value?.ownerDocument ?? null;
+		if (!mounted || !context.open.value || !element.value) {
+			deactivateControllers();
+			return;
+		}
+		activateControllers();
+	}
+	watch(element, (next, previous) => {
+		if (previous && context.contentElement.value === previous) context.contentElement.value = null;
+		if (next) context.contentElement.value = next;
+		syncControllers();
+	}, { flush: "post" });
+	watch(() => context.open.value, syncControllers, { flush: "post" });
+	onMounted(() => {
+		mounted = true;
+		syncControllers();
+	});
+	onUnmounted(() => {
+		mounted = false;
+		deactivateControllers();
+		dismissableLayer.dispose();
+		focusGuards.dispose();
+		focusScope.dispose();
+		inertOutside.dispose();
+		scrollLock.dispose();
+		if (context.contentElement.value === element.value) context.contentElement.value = null;
+	});
+}
+function withViewport(options, viewport) {
+	return viewport === void 0 ? options : {
+		...options,
+		viewport
+	};
+}
+function resolvePopoverSlotPlacement(value, fallback) {
+	return typeof value === "string" ? value : fallback;
+}
+function popoverSideFromPlacement(value) {
+	return value.split("-", 1)[0];
+}
+function popoverAlignFromPlacement(value) {
+	const [, align] = value.split("-");
+	return align ?? "center";
+}
+function createPopoverSlotState(placement, context) {
+	return {
+		align: popoverAlignFromPlacement(placement),
+		disabled: context.disabled,
+		modal: context.modal,
+		open: context.open,
+		placement,
+		side: popoverSideFromPlacement(placement),
+		state: context.state
+	};
+}
+function existingPopoverElements(...values) {
+	return values.filter((value) => value != null);
+}
+//#endregion
+//#region src/families/overlays/popover/popover-content.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["hidden", "data-state"];
+const _hoisted_2 = [
+	"id",
+	"aria-modal",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"hidden",
+	"data-state",
+	"data-modal",
+	"data-placement",
+	"data-side",
+	"data-align",
+	"data-top-layer"
+];
+//#endregion
+//#region src/families/overlays/popover/popover-content.vue
+var popover_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "popover-content",
+	props: {
+		forceMount: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		to: {
+			type: null,
+			required: false,
+			default: "body"
+		},
+		portalDisabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		defer: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		placement: {
+			type: String,
+			required: false,
+			default: "bottom"
+		},
+		strategy: {
+			type: String,
+			required: false,
+			default: "fixed"
+		},
+		offset: {
+			type: Number,
+			required: false,
+			default: 8
+		},
+		collisionPadding: {
+			type: Number,
+			required: false,
+			default: 4
+		},
+		arrowPadding: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		flip: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		shift: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		size: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		safeArea: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		updateOnScroll: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		updateOnResize: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		viewport: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		trapFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		restoreFocus: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		inertOutside: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		lockScroll: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		closeOnEscape: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		closeOnPointerDownOutside: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		closeOnFocusOutside: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		initialFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"open-auto-focus",
+		"close-auto-focus",
+		"escape-key-down",
+		"pointer-down-outside",
+		"focus-outside",
+		"interact-outside",
+		"dismiss"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = popoverContext.use();
+		const element = useTemplateRef("element");
+		const beforeGuard = useTemplateRef("beforeGuard");
+		const afterGuard = useTemplateRef("afterGuard");
+		const ownerDocument = shallowRef(null);
+		const present = computed(() => context.open.value || __props.forceMount);
+		const guarded = computed(() => context.open.value && context.modal.value && __props.trapFocus);
+		const positionerProps = computed(() => withViewport({
+			arrowPadding: __props.arrowPadding,
+			collisionPadding: __props.collisionPadding,
+			direction: __props.direction,
+			flip: __props.flip,
+			hide: __props.hide,
+			offset: __props.offset,
+			placement: __props.placement,
+			reference: context.triggerElement.value,
+			safeArea: __props.safeArea,
+			shift: __props.shift,
+			size: __props.size,
+			strategy: __props.strategy,
+			updateOnResize: __props.updateOnResize,
+			updateOnScroll: __props.updateOnScroll
+		}, __props.viewport));
+		function slotState(value) {
+			return createPopoverSlotState(value, {
+				disabled: context.disabled.value,
+				modal: context.modal.value,
+				open: context.open.value,
+				state: context.state.value
+			});
+		}
+		function resolveContentPlacement(value) {
+			return resolvePopoverSlotPlacement(value, __props.placement);
+		}
+		const dismissableLayer = createDismissableLayer({
+			root: element,
+			branches: () => existingPopoverElements(context.triggerElement.value, beforeGuard.value, afterGuard.value),
+			enabled: () => context.open.value,
+			escapeKey: () => __props.closeOnEscape,
+			outsideFocus: () => __props.closeOnFocusOutside,
+			outsidePointerDown: () => __props.closeOnPointerDownOutside,
+			onEscapeKeyDown: (event) => emit("escape-key-down", event),
+			onFocusOutside: (event) => emit("focus-outside", event),
+			onInteractOutside: (event) => emit("interact-outside", event),
+			onPointerDownOutside: (event) => emit("pointer-down-outside", event),
+			onDismiss: (event) => {
+				emit("dismiss", event);
+				context.close(event.originalEvent);
+			}
+		});
+		const focusGuards = createFocusGuards({
+			root: element,
+			enabled: guarded,
+			fallbackFocus: () => element.value
+		});
+		const focusScope = createFocusScope({
+			root: element,
+			autoFocus: () => __props.autoFocus,
+			contain: guarded,
+			restoreFocus: () => __props.restoreFocus,
+			initialFocus: () => __props.initialFocus?.(),
+			restoreTarget: () => context.triggerElement.value,
+			fallbackFocus: () => element.value,
+			onMountAutoFocus: (event) => emit("open-auto-focus", event),
+			onUnmountAutoFocus: (event) => emit("close-auto-focus", event)
+		});
+		usePopoverContentLifecycle({
+			context,
+			dismissableLayer,
+			element,
+			focusGuards,
+			focusScope,
+			inertOutside: createInertOutside({
+				root: element,
+				enabled: () => context.open.value && context.modal.value && __props.inertOutside
+			}),
+			ownerDocument,
+			scrollLock: createScrollLock({
+				document: ownerDocument,
+				enabled: () => context.open.value && context.modal.value && __props.lockScroll
+			})
+		});
+		function focusContent(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			disabled: context.disabled,
+			element,
+			focusContent,
+			focusFirst: () => focusScope.focusFirst(),
+			modal: context.modal,
+			open: context.open,
+			state: context.state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-vize-ui": "popover-content-host",
+				part: "content-host",
+				hidden: present.value && unref(context).open.value ? void 0 : true,
+				"data-state": unref(context).state.value
+			}, [present.value ? (openBlock(), createBlock(portal_default, {
+				key: 0,
+				to: __props.to,
+				disabled: __props.portalDisabled,
+				defer: __props.defer
+			}, {
+				default: withCtx(() => [createVNode(presence_default, {
+					present: unref(context).open.value,
+					"force-mount": __props.forceMount
+				}, {
+					default: withCtx(() => [createVNode(positioner_default, normalizeProps(guardReactiveProps(positionerProps.value)), {
+						default: withCtx(({ placement: positionerPlacement }) => [
+							guarded.value ? (openBlock(), createElementBlock("span", mergeProps({
+								key: 0,
+								ref_key: "beforeGuard",
+								ref: beforeGuard
+							}, unref(focusGuards).beforeProps, {
+								"data-vize-ui": "popover-focus-guard",
+								part: "focus-guard"
+							}), null, 16)) : createCommentVNode("v-if", true),
+							createElementVNode("div", mergeProps({
+								id: unref(context).contentId.value,
+								ref_key: "element",
+								ref: element
+							}, unref(dismissableLayer).layerProps, {
+								role: "dialog",
+								tabindex: "-1",
+								"aria-modal": unref(context).modal.value ? "true" : void 0,
+								"aria-label": __props.ariaLabel,
+								"aria-labelledby": __props.ariaLabelledby,
+								"aria-describedby": __props.ariaDescribedby,
+								"data-vize-ui": "popover-content",
+								part: "content",
+								hidden: unref(context).open.value ? void 0 : true,
+								"data-state": unref(context).state.value,
+								"data-modal": unref(context).modal.value ? "true" : "false",
+								"data-placement": resolveContentPlacement(positionerPlacement),
+								"data-side": unref(popoverSideFromPlacement)(resolveContentPlacement(positionerPlacement)),
+								"data-align": unref(popoverAlignFromPlacement)(resolveContentPlacement(positionerPlacement)),
+								"data-top-layer": unref(dismissableLayer).isTopLayer.value ? "true" : "false"
+							}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState(resolveContentPlacement(positionerPlacement)))), void 0, true)], 16, _hoisted_2),
+							guarded.value ? (openBlock(), createElementBlock("span", mergeProps({
+								key: 1,
+								ref_key: "afterGuard",
+								ref: afterGuard
+							}, unref(focusGuards).afterProps, {
+								"data-vize-ui": "popover-focus-guard",
+								part: "focus-guard"
+							}), null, 16)) : createCommentVNode("v-if", true)
+						]),
+						_: 3
+					}, 16)]),
+					_: 3
+				}, 8, ["present", "force-mount"])]),
+				_: 3
+			}, 8, [
+				"to",
+				"disabled",
+				"defer"
+			])) : createCommentVNode("v-if", true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-9c0729b2"]]);
+//#endregion
+//#region src/families/overlays/popover/popover-trigger.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"type",
+	"disabled",
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"data-state",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/overlays/popover/popover-trigger.vue
+var popover_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "popover-trigger",
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = popoverContext.use();
+		const element = useTemplateRef("element");
+		const disabledState = computed(() => __props.disabled || context.disabled.value);
+		onMounted(() => {
+			context.triggerElement.value = element.value;
+		});
+		onUnmounted(() => {
+			if (context.triggerElement.value === element.value) context.triggerElement.value = null;
+		});
+		function onClick(event) {
+			if (disabledState.value) {
+				event.preventDefault();
+				return;
+			}
+			emit("click", event);
+			if (!event.defaultPrevented) context.toggle(event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			element,
+			focus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: unref(context).triggerId.value,
+				ref_key: "element",
+				ref: element,
+				type: __props.type,
+				disabled: disabledState.value,
+				"aria-label": __props.ariaLabel,
+				"aria-haspopup": "dialog",
+				"aria-expanded": unref(context).open.value ? "true" : "false",
+				"aria-controls": unref(context).contentId.value,
+				"data-vize-ui": "popover-trigger",
+				part: "trigger",
+				"data-state": unref(context).state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", {
+				disabled: disabledState.value,
+				modal: unref(context).modal.value,
+				open: unref(context).open.value,
+				state: unref(context).state.value
+			}, void 0, true)], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-9ab6c649"]]);
+//#endregion
+export { popover_root_default as i, popover_content_default as n, popover_arrow_default as r, popover_trigger_default as t };

package/dist/popover.d.mts

@@ -0,0 +1,2 @@
+import { Ai as PopoverContentSlotState, Bi as PopoverSlotState, Ci as _default$1, Di as PopoverArrowSlotState, Ei as PopoverArrowExpose, Fi as PopoverPlacement, Hi as PopoverTriggerExpose, Ii as PopoverPointerDownOutsideEvent, Li as PopoverPositionerStrategy, Mi as PopoverEscapeKeyDownEvent, Ni as PopoverFocusOutsideEvent, Oi as PopoverAutoFocusEvent, Pi as PopoverInteractOutsideEvent, Ri as PopoverRootExpose, Si as _default$2, Ti as PopoverAlign, Ui as PopoverViewport, Vi as PopoverState, ji as PopoverDismissEvent, ki as PopoverContentExpose, wi as _default, xi as _default$3, zi as PopoverSide } from "./announcer-DGr2Iz0i.mjs";
+export { _default as Popover, _default as PopoverRoot, type PopoverAlign, _default$1 as PopoverArrow, type PopoverArrowExpose, type PopoverArrowSlotState, type PopoverAutoFocusEvent, _default$2 as PopoverContent, type PopoverContentExpose, type PopoverContentSlotState, type PopoverDismissEvent, type PopoverEscapeKeyDownEvent, type PopoverFocusOutsideEvent, type PopoverInteractOutsideEvent, type PopoverPlacement, type PopoverPointerDownOutsideEvent, type PopoverPositionerStrategy, type PopoverRootExpose, type PopoverSide, type PopoverSlotState, type PopoverState, _default$3 as PopoverTrigger, type PopoverTriggerExpose, type PopoverViewport };