@vizejs/ui 0.386.0 → 0.388.0

package/dist/dialog-trigger-ppGKikEP.mjs

@@ -0,0 +1,717 @@
+import { a as useDeterministicId, i as toDeterministicId, 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 { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onMounted, onUnmounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region src/families/overlays/dialog/dialog-context.ts
+const dialogContext = createContext("Dialog");
+//#endregion
+//#region src/families/overlays/dialog/dialog-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$5 = [
+	"id",
+	"data-state",
+	"data-modal"
+];
+//#endregion
+//#region src/families/overlays/dialog/dialog-root.vue
+var dialog_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "dialog-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: true
+		}
+	},
+	emits: ["update:open", "open-change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const openState = useControllableState({
+			value: () => __props.open,
+			defaultValue: () => __props.defaultOpen
+		});
+		const isOpen = openState.value;
+		const modalState = computed(() => __props.modal);
+		const state = computed(() => isOpen.value ? "open" : "closed");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "dialog"
+		});
+		const contentId = computed(() => deriveDeterministicId(baseId.value, "content"));
+		const titleId = computed(() => deriveDeterministicId(baseId.value, "title"));
+		const descriptionId = computed(() => deriveDeterministicId(baseId.value, "description"));
+		const slotState = computed(() => ({
+			modal: modalState.value,
+			open: isOpen.value,
+			state: state.value
+		}));
+		const triggerElement = shallowRef(null);
+		const overlayElement = shallowRef(null);
+		const contentElement = shallowRef(null);
+		function setOpen(value, nativeEvent = null) {
+			const previous = isOpen.value;
+			const changed = openState.set(value);
+			if (changed) {
+				emit("update:open", value);
+				emit("open-change", value, previous, nativeEvent);
+			}
+			return changed;
+		}
+		const context = dialogContext.provide({
+			id: baseId,
+			contentId,
+			titleId,
+			descriptionId,
+			open: isOpen,
+			modal: modalState,
+			state,
+			triggerElement,
+			overlayElement,
+			contentElement,
+			setOpen,
+			openDialog: (nativeEvent = null) => setOpen(true, nativeEvent),
+			close: (nativeEvent = null) => setOpen(false, nativeEvent),
+			toggle: (nativeEvent = null) => setOpen(!isOpen.value, nativeEvent)
+		});
+		__expose({
+			close: context.close,
+			contentId,
+			descriptionId,
+			id: baseId,
+			modal: modalState,
+			open: isOpen,
+			openDialog: context.openDialog,
+			setOpen,
+			state,
+			titleId,
+			toggle: context.toggle
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				"data-vize-ui": "dialog-root",
+				part: "root",
+				"data-state": state.value,
+				"data-modal": __props.modal ? "true" : "false"
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$5);
+		};
+	}
+}), [["__scopeId", "data-v-80143516"]]);
+//#endregion
+//#region src/families/overlays/dialog/dialog-close.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$4 = [
+	"type",
+	"disabled",
+	"aria-label",
+	"data-state",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/overlays/dialog/dialog-close.vue
+var dialog_close_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "dialog-close",
+	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 = dialogContext.use();
+		const element = useTemplateRef("element");
+		function onClick(event) {
+			if (__props.disabled) {
+				event.preventDefault();
+				return;
+			}
+			emit("click", event);
+			if (!event.defaultPrevented) context.close(event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			element,
+			focus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				ref_key: "element",
+				ref: element,
+				type: __props.type,
+				disabled: __props.disabled,
+				"aria-label": __props.ariaLabel,
+				"data-vize-ui": "dialog-close",
+				part: "close",
+				"data-state": unref(context).state.value,
+				"data-disabled": __props.disabled ? "true" : void 0,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", {
+				disabled: __props.disabled,
+				modal: unref(context).modal.value,
+				open: unref(context).open.value,
+				state: unref(context).state.value
+			}, void 0, true)], 8, _hoisted_1$4);
+		};
+	}
+}), [["__scopeId", "data-v-911db0ed"]]);
+//#endregion
+//#region src/families/overlays/dialog/dialog-content.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = ["hidden", "data-state"];
+const _hoisted_2$1 = [
+	"id",
+	"role",
+	"aria-modal",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-state",
+	"data-modal",
+	"data-top-layer"
+];
+//#endregion
+//#region src/families/overlays/dialog/dialog-content.vue
+var dialog_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "dialog-content",
+	props: {
+		role: {
+			type: String,
+			required: false,
+			default: "dialog"
+		},
+		forceMount: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		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
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: [String, null],
+			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 = dialogContext.use();
+		const host = useTemplateRef("host");
+		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 ariaLabelledbyValue = computed(() => __props.ariaLabel ? void 0 : __props.ariaLabelledby ?? context.titleId.value);
+		const ariaDescribedbyValue = computed(() => __props.ariaDescribedby ?? context.descriptionId.value);
+		const slotState = computed(() => ({
+			modal: context.modal.value,
+			open: context.open.value,
+			state: context.state.value
+		}));
+		const dismissableLayer = createDismissableLayer({
+			root: element,
+			branches: () => [beforeGuard.value, afterGuard.value].filter((value) => !!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,
+			restoreTarget: () => context.triggerElement.value,
+			fallbackFocus: () => element.value,
+			onMountAutoFocus: (event) => emit("open-auto-focus", event),
+			onUnmountAutoFocus: (event) => emit("close-auto-focus", event)
+		});
+		const isolation = createInertOutside({
+			root: element,
+			branches: () => [context.overlayElement.value].filter((value) => !!value),
+			enabled: () => context.open.value && context.modal.value && __props.inertOutside
+		});
+		const scrollLock = createScrollLock({
+			document: ownerDocument,
+			enabled: () => context.open.value && context.modal.value && __props.lockScroll
+		});
+		let mounted = false;
+		function activateControllers() {
+			scrollLock.activate();
+			isolation.activate();
+			dismissableLayer.activate();
+			focusGuards.activate();
+			focusScope.activate();
+		}
+		function deactivateControllers() {
+			dismissableLayer.deactivate();
+			focusGuards.deactivate();
+			isolation.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();
+			isolation.dispose();
+			scrollLock.dispose();
+			if (context.contentElement.value === element.value) context.contentElement.value = null;
+		});
+		function focusContent(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			element,
+			focusContent,
+			focusFirst: () => focusScope.focusFirst(),
+			modal: context.modal,
+			open: context.open,
+			state: context.state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "host",
+				ref: host,
+				"data-vize-ui": "dialog-content-host",
+				part: "content-host",
+				hidden: present.value && unref(context).open.value ? void 0 : true,
+				"data-state": unref(context).state.value
+			}, [
+				guarded.value ? (openBlock(), createElementBlock("span", mergeProps({
+					key: 0,
+					ref_key: "beforeGuard",
+					ref: beforeGuard
+				}, unref(focusGuards).beforeProps, {
+					"data-vize-ui": "dialog-focus-guard",
+					part: "focus-guard"
+				}), null, 16)) : createCommentVNode("v-if", true),
+				present.value ? (openBlock(), createElementBlock("div", mergeProps({
+					key: 1,
+					id: unref(context).contentId.value,
+					ref_key: "element",
+					ref: element
+				}, unref(dismissableLayer).layerProps, {
+					role: __props.role,
+					tabindex: "-1",
+					"aria-modal": unref(context).modal.value ? "true" : void 0,
+					"aria-label": __props.ariaLabel,
+					"aria-labelledby": ariaLabelledbyValue.value,
+					"aria-describedby": ariaDescribedbyValue.value,
+					"data-vize-ui": "dialog-content",
+					part: "content",
+					"data-state": unref(context).state.value,
+					"data-modal": unref(context).modal.value ? "true" : "false",
+					"data-top-layer": unref(dismissableLayer).isTopLayer.value ? "true" : "false"
+				}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_2$1)) : createCommentVNode("v-if", true),
+				guarded.value ? (openBlock(), createElementBlock("span", mergeProps({
+					key: 2,
+					ref_key: "afterGuard",
+					ref: afterGuard
+				}, unref(focusGuards).afterProps, {
+					"data-vize-ui": "dialog-focus-guard",
+					part: "focus-guard"
+				}), null, 16)) : createCommentVNode("v-if", true)
+			], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-6d824b44"]]);
+//#endregion
+//#region src/families/overlays/dialog/dialog-description.vue
+var dialog_description_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "dialog-description",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "p"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = dialogContext.use();
+		const element = useTemplateRef("element");
+		const descriptionId = computed(() => __props.id == null ? context.descriptionId.value : toDeterministicId(__props.id));
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				id: descriptionId.value,
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "dialog-description",
+				part: "description"
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, ["id"]);
+		};
+	}
+}), [["__scopeId", "data-v-e5fcee72"]]);
+//#endregion
+//#region src/families/overlays/dialog/dialog-overlay.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = ["data-state"];
+const _hoisted_2 = ["hidden", "data-state"];
+//#endregion
+//#region src/families/overlays/dialog/dialog-overlay.vue
+var dialog_overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "dialog-overlay",
+	props: { forceMount: {
+		type: Boolean,
+		required: false,
+		default: false
+	} },
+	setup(__props, { expose: __expose }) {
+		const context = dialogContext.use();
+		const element = useTemplateRef("element");
+		const present = computed(() => context.open.value || __props.forceMount);
+		const slotState = computed(() => ({
+			modal: context.modal.value,
+			open: context.open.value,
+			state: context.state.value
+		}));
+		watch(element, (next, previous) => {
+			if (previous && context.overlayElement.value === previous) context.overlayElement.value = null;
+			if (next) context.overlayElement.value = next;
+		}, { flush: "post" });
+		onUnmounted(() => {
+			if (context.overlayElement.value === element.value) context.overlayElement.value = null;
+		});
+		__expose({
+			element,
+			modal: context.modal,
+			open: context.open,
+			state: context.state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-vize-ui": "dialog-overlay-host",
+				part: "overlay-host",
+				"data-state": unref(context).state.value
+			}, [present.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "element",
+				ref: element,
+				"aria-hidden": "true",
+				"data-vize-ui": "dialog-overlay",
+				part: "overlay",
+				hidden: unref(context).open.value ? void 0 : true,
+				"data-state": unref(context).state.value
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_2)) : createCommentVNode("v-if", true)], 8, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-3a1905dd"]]);
+//#endregion
+//#region src/families/overlays/dialog/dialog-portal.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["hidden", "data-state"];
+//#endregion
+//#region src/families/overlays/dialog/dialog-portal.vue
+var dialog_portal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "dialog-portal",
+	props: {
+		to: {
+			type: null,
+			required: false,
+			default: "body"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		defer: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		forceMount: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = dialogContext.use();
+		const present = computed(() => context.open.value || __props.forceMount);
+		const slotState = computed(() => ({
+			modal: context.modal.value,
+			open: context.open.value,
+			state: context.state.value
+		}));
+		__expose({
+			modal: context.modal,
+			open: context.open,
+			present,
+			state: context.state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-vize-ui": "dialog-portal",
+				part: "portal",
+				hidden: present.value ? void 0 : true,
+				"data-state": unref(context).state.value
+			}, [present.value ? (openBlock(), createBlock(portal_default, {
+				key: 0,
+				to: __props.to,
+				disabled: __props.disabled,
+				defer: __props.defer
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"to",
+				"disabled",
+				"defer"
+			])) : createCommentVNode("v-if", true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-8f19217d"]]);
+//#endregion
+//#region src/families/overlays/dialog/dialog-title.vue
+var dialog_title_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "dialog-title",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "h2"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = dialogContext.use();
+		const element = useTemplateRef("element");
+		const titleId = computed(() => __props.id == null ? context.titleId.value : toDeterministicId(__props.id));
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				id: titleId.value,
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "dialog-title",
+				part: "title"
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, ["id"]);
+		};
+	}
+}), [["__scopeId", "data-v-c8b1c835"]]);
+//#endregion
+//#region src/families/overlays/dialog/dialog-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/dialog/dialog-trigger.vue
+var dialog_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "dialog-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 = dialogContext.use();
+		const element = useTemplateRef("element");
+		onMounted(() => {
+			context.triggerElement.value = element.value;
+		});
+		onUnmounted(() => {
+			if (context.triggerElement.value === element.value) context.triggerElement.value = null;
+		});
+		function onClick(event) {
+			if (__props.disabled) {
+				event.preventDefault();
+				return;
+			}
+			emit("click", event);
+			if (!event.defaultPrevented) context.openDialog(event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			element,
+			focus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: `${unref(context).id.value}-trigger`,
+				ref_key: "element",
+				ref: element,
+				type: __props.type,
+				disabled: __props.disabled,
+				"aria-label": __props.ariaLabel,
+				"aria-haspopup": "dialog",
+				"aria-expanded": unref(context).open.value ? "true" : "false",
+				"aria-controls": unref(context).contentId.value,
+				"data-vize-ui": "dialog-trigger",
+				part: "trigger",
+				"data-state": unref(context).state.value,
+				"data-disabled": __props.disabled ? "true" : void 0,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", {
+				disabled: __props.disabled,
+				modal: unref(context).modal.value,
+				open: unref(context).open.value,
+				state: unref(context).state.value
+			}, void 0, true)], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-7b2ebb49"]]);
+//#endregion
+export { dialog_description_default as a, dialog_root_default as c, dialog_overlay_default as i, dialogContext as l, dialog_title_default as n, dialog_content_default as o, dialog_portal_default as r, dialog_close_default as s, dialog_trigger_default as t };