@getdom/studio 0.1.0

package/src/pages/components/dialog/DomDialog.vue

@@ -0,0 +1,271 @@
+<script setup>
+import { computed, onMounted, ref, useId, watch } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'Dialog',
+		tag: '<DomDialog>',
+		description: 'A modal built on the native HTML <dialog> element — top-layer rendering, native stacking, scroll lock, and backdrop styling without z-index hacks.',
+		slots: [
+			{ name: 'trigger', description: 'Optional. Element that opens the dialog when clicked — omit when using v-model, a template ref, or commandfor on an external button.' },
+			{ name: '(default)', description: 'Dialog body — rendered inside the card below the title and description.' },
+			{ name: 'header', payload: '{ title, description, titleId, descriptionId }', description: 'Replace the default title and description block. Apply the provided IDs to custom heading and description elements to preserve the dialog accessibility relationships.' },
+			{ name: 'footer', description: 'Action buttons. Add `data-close` on a control to dismiss the dialog.' },
+		],
+		events: [
+			{ name: 'update:modelValue', payload: '(open: boolean)', description: 'Emitted when the dialog opens or closes.' },
+			{ name: 'before-open', description: 'Emitted immediately before the dialog opens; prepare draft data or item snapshots here.' },
+			{ name: 'close', description: 'Emitted when the dialog is dismissed.' },
+			{ name: 'close-complete', description: 'Emitted after the close transition completes; clear retained dialog data here.' },
+		],
+		keyboard: [
+			{ keys: 'Esc', action: 'Closes the topmost open dialog unless `static` is set.' },
+			{ keys: 'Tab / Shift+Tab', action: 'Focus stays within the dialog while open (native top-layer).' },
+			{ keys: 'Click backdrop', action: 'Dismisses the dialog unless `static` is set.' },
+		],
+	},
+});
+
+const dialogWidthClasses = {
+	sm: 'w-[min(calc(100vw-2rem),24rem)]',
+	md: 'w-[min(calc(100vw-2rem),28rem)]',
+	lg: 'w-[min(calc(100vw-2rem),44rem)]',
+	xl: 'w-[min(calc(100vw-2rem),56rem)]',
+};
+
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Whether the dialog is open.' },
+	},
+	title: {
+		type: String,
+		default: '',
+		_edit: { description: 'Heading rendered inside the dialog card.' },
+	},
+	description: {
+		type: String,
+		default: '',
+		_edit: { description: 'Supporting copy under the heading.' },
+	},
+	size: {
+		type: String,
+		default: 'md',
+		validator: (value) => ['sm', 'md', 'lg', 'xl'].includes(value),
+		_edit: {
+			options: ['sm', 'md', 'lg', 'xl'],
+			description: 'Width preset for the dialog card.',
+		},
+	},
+	width: {
+		type: [String, Number],
+		default: '',
+		_edit: { description: 'Optional CSS width. Overrides the size preset when set, for example 95vw.' },
+	},
+	height: {
+		type: [String, Number],
+		default: '',
+		_edit: { description: 'Optional CSS height. Use values like 95vh for near-full-page dialogs.' },
+	},
+	static: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Modal cannot be dismissed by backdrop click or Esc — use footer actions with data-close or v-model.' },
+	},
+	backdrop: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show the dimmed, blurred page backdrop behind the dialog.' },
+	},
+	footer: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show the footer region and default Close action when no footer slot is provided.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'before-open', 'close', 'close-complete']);
+
+const root = ref(null);
+const uniqueId = useId();
+const titleId = computed(() => (props.title ? `dom-dialog-${uniqueId}-title` : ''));
+const descriptionId = computed(() => (props.description ? `dom-dialog-${uniqueId}-description` : ''));
+const dialogWidthClass = computed(() => dialogWidthClasses[props.size] || dialogWidthClasses.md);
+const dialogPanelStyle = computed(() => {
+	const width = normalizeDialogDimension(props.width);
+	const height = normalizeDialogDimension(props.height);
+
+	return {
+		width: width || undefined,
+		height: height || undefined,
+		maxHeight: height || undefined,
+	};
+});
+
+/**
+ * Normalize a CSS dimension prop into an inline style value.
+ *
+ * @param {string|number} value CSS size string or numeric pixel value.
+ * @returns {string} CSS size value, with numbers converted to pixels.
+ */
+function normalizeDialogDimension(value) {
+	if (typeof value === 'number' && Number.isFinite(value)) return `${value}px`;
+	if (typeof value === 'string') return value.trim();
+	return '';
+}
+
+/**
+ * Synchronize the headless dialog host with the controlled Vue model.
+ *
+ * @param {boolean} v Whether the dialog should be open.
+ * @returns {void}
+ */
+function setOpen(v) {
+	if (!root.value) return;
+	if (v) root.value.open();
+	else root.value.close();
+}
+
+/**
+ * Forward only the root dialog's before-open event to Vue consumers.
+ *
+ * @param {CustomEvent} event Headless before-open event.
+ * @returns {void}
+ */
+function onHeadlessBeforeOpen(event) {
+	if (event.target !== root.value) return;
+	emit('before-open');
+}
+
+/**
+ * Forward only the root dialog's open event to Vue consumers.
+ *
+ * @param {CustomEvent} event Headless open event.
+ * @returns {void}
+ */
+function onHeadlessOpen(event) {
+	if (event.target !== root.value) return;
+	emit('update:modelValue', true);
+}
+
+/**
+ * Forward only the root dialog's close event to Vue consumers.
+ *
+ * @param {CustomEvent} event Headless close event.
+ * @returns {void}
+ */
+function onHeadlessClose(event) {
+	if (event.target !== root.value) return;
+	emit('update:modelValue', false);
+	emit('close');
+}
+
+/**
+ * Forward only the root dialog's close-complete event to Vue consumers.
+ *
+ * @param {CustomEvent} event Headless close-complete event.
+ * @returns {void}
+ */
+function onHeadlessCloseComplete(event) {
+	if (event.target !== root.value) return;
+	emit('close-complete');
+}
+
+onMounted(async () => {
+	await import('../../lib/headless/dialog.js');
+	root.value?.addEventListener('dom:before-open', onHeadlessBeforeOpen);
+	root.value?.addEventListener('dom:open', onHeadlessOpen);
+	root.value?.addEventListener('dom:close', onHeadlessClose);
+	root.value?.addEventListener('dom:close-complete', onHeadlessCloseComplete);
+	if (props.modelValue) setOpen(true);
+});
+
+watch(() => props.modelValue, setOpen);
+
+defineExpose({
+	open: () => setOpen(true),
+	close: () => setOpen(false),
+	toggle: () => root.value?.toggle(),
+	get element() { return root.value; },
+});
+</script>
+
+<template>
+	<!--
+		<dom-dialog> owns the native <dialog> internally (shadow DOM). We
+		just hand it a trigger slot and the dialog body — no <dialog> tag in
+		Vue templates.
+	-->
+	<dom-dialog
+		ref="root"
+		class="dom-dialog"
+		:static="static || null"
+		:no-backdrop="backdrop ? null : ''"
+		:aria-labelledby="titleId || null"
+		:aria-describedby="descriptionId || null"
+	>
+		<!-- Vue does not forward slot= onto component roots; anchor trigger for dom-dialog -->
+		<span slot="trigger" class="contents">
+			<slot name="trigger" />
+		</span>
+		<div
+			class="skin-overlay flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden rounded-2xl p-6 outline-none"
+			:class="dialogWidthClass"
+			:style="dialogPanelStyle"
+		>
+			<slot
+				name="header"
+				:title="title"
+				:description="description"
+				:title-id="titleId"
+				:description-id="descriptionId"
+			>
+				<div v-if="title || description" class="shrink-0 space-y-2">
+					<h2 v-if="title" :id="titleId" class="text-lg font-semibold tracking-tight">{{ title }}</h2>
+					<p v-if="description" :id="descriptionId" class="text-sm text-muted-fg">{{ description }}</p>
+				</div>
+			</slot>
+			<div class="-mx-1 -mb-1 min-h-0 overflow-y-auto px-1 pb-1" :class="($slots.header || title || description) ? 'mt-3 pt-1' : '-mt-1 pt-1'">
+				<slot />
+			</div>
+			<div v-if="footer || $slots.footer" class="mt-6 flex shrink-0 items-center justify-end gap-2">
+				<slot name="footer">
+					<button
+						data-close
+						type="button"
+						class="skin-action inline-flex h-9 items-center rounded-full px-4 text-sm font-medium hover:opacity-90"
+					>Close</button>
+				</slot>
+			</div>
+		</div>
+	</dom-dialog>
+</template>
+
+<style scoped>
+.dom-dialog::part(dialog) {
+	opacity: 0;
+	transform: translateY(10px) scale(0.96);
+	transform-origin: center;
+	filter: blur(1px);
+	transition:
+		opacity 180ms ease,
+		transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
+		filter 180ms ease,
+		overlay 240ms allow-discrete,
+		display 240ms allow-discrete;
+}
+
+.dom-dialog[open]::part(dialog) {
+	opacity: 1;
+	transform: none;
+	filter: blur(0);
+}
+
+@starting-style {
+	.dom-dialog[open]::part(dialog) {
+		opacity: 0;
+		transform: translateY(10px) scale(0.96);
+		filter: blur(1px);
+	}
+}
+</style>

package/src/pages/components/dialog/DomDialogSchemaForm.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref, watch } from 'vue';
+import DomButton from '../button/DomButton.vue';
+import DomForm from '../../forms/form/DomForm.vue';
+
+defineOptions({
+	__doc: {
+		name: 'Dialog schema form',
+		tag: '<DomDialogSchemaForm>',
+		description: 'Internal renderer used by dialogForm(schema) to resolve a DomForm children schema from a programmatic dialog.',
+		events: [
+			{ name: 'resolve', payload: 'Record<string, unknown>', description: 'Emitted with validated form values.' },
+			{ name: 'dismiss', description: 'Emitted when the form is cancelled.' },
+		],
+	},
+});
+
+const props = defineProps({
+	schema: {
+		type: Array,
+		default: () => [],
+	},
+	modelValue: {
+		type: Object,
+		default: () => ({}),
+	},
+	submitText: {
+		type: String,
+		default: 'Submit',
+	},
+	cancelText: {
+		type: String,
+		default: 'Cancel',
+	},
+	invalidMessage: {
+		type: String,
+		default: 'Complete the required fields before continuing.',
+	},
+});
+const emit = defineEmits(['resolve', 'dismiss']);
+const values = ref({ ...props.modelValue });
+const formMessage = ref('');
+
+watch(() => props.modelValue, (nextValues) => {
+	values.value = { ...(nextValues || {}) };
+}, { deep: true });
+
+function submit({ values: submittedValues }) {
+	emit('resolve', submittedValues);
+}
+
+function invalid() {
+	formMessage.value = props.invalidMessage;
+}
+</script>
+
+<template>
+	<DomForm
+		v-model="values"
+		:children="schema"
+		class="space-y-4"
+		@change="formMessage = ''"
+		@invalid="invalid"
+		@submit="submit"
+	>
+		<p v-if="formMessage" class="text-xs text-destructive">{{ formMessage }}</p>
+		<div class="flex items-center justify-end gap-2">
+			<DomButton variant="secondary" type="button" @click="emit('dismiss')">{{ cancelText }}</DomButton>
+			<DomButton type="submit">{{ submitText }}</DomButton>
+		</div>
+	</DomForm>
+</template>

package/src/pages/components/dialog/DomDialogStack.vue

@@ -0,0 +1,289 @@
+<script setup>
+import { onBeforeUnmount, ref, watch } from 'vue';
+import DomButton from '../button/DomButton.vue';
+import DomDialog from './DomDialog.vue';
+import DomDialogSchemaForm from './DomDialogSchemaForm.vue';
+
+const DIALOG_REMOVAL_DELAY_MS = 320;
+
+defineOptions({
+	__doc: {
+		name: 'Dialog stack',
+		tag: '<DomDialogStack>',
+		description: 'Renderer for dialogs created with useDialogs(). Mount it once, then call the dialog API from script.',
+		slots: [
+			{ name: 'default', payload: '{ dialog, resolve, dismiss }', description: 'Custom renderer for a programmatic dialog body.' },
+			{ name: 'footer', payload: '{ dialog, resolve, dismiss }', description: 'Custom renderer for programmatic dialog actions.' },
+		],
+		events: [
+			{ name: 'resolve', payload: '({ id, value })', description: 'Emitted when a dialog resolves.' },
+			{ name: 'dismiss', payload: '({ id, value })', description: 'Emitted when a dialog is dismissed.' },
+			{ name: 'action', payload: '({ id, dialog, ...payload })', description: 'Emitted by custom dialog bodies for app-specific actions.' },
+		],
+	},
+});
+
+const props = defineProps({
+	dialogs: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Visible programmatic dialogs from useDialogs().',
+			props: {
+				addLabel: '+ Add dialog',
+				compact: true,
+				schema: [
+					{ key: 'id', label: 'ID', placeholder: 'dialog-id', default: (index) => `dialog-${index + 1}` },
+					{ key: 'title', label: 'Title', placeholder: 'Delete project?' },
+					{ key: 'description', label: 'Description', placeholder: 'This action cannot be undone.' },
+					{ key: 'message', label: 'Message', placeholder: 'Are you sure?' },
+					{ key: 'type', label: 'Type', placeholder: 'dialog | confirm', default: 'dialog' },
+				],
+			},
+		},
+	},
+});
+const emit = defineEmits(['resolve', 'dismiss', 'action']);
+const renderedDialogs = ref([]);
+const removalTimers = new Map();
+
+watch(
+	() => props.dialogs,
+	(dialogs) => syncRenderedDialogs(dialogs),
+	{ immediate: true, deep: true },
+);
+
+onBeforeUnmount(() => {
+	if (typeof window !== 'undefined') {
+		for (const timer of removalTimers.values()) window.clearTimeout(timer);
+	}
+	removalTimers.clear();
+});
+
+/**
+ * Resolve a dialog, notify the owner immediately, and let the mounted item animate out.
+ *
+ * @param {{ id: string, dialog: Record<string, unknown> }} item Rendered stack item.
+ * @param {unknown} [value] Value passed to the dialog resolver.
+ * @returns {void}
+ */
+function resolve(item, value = true) {
+	if (item.closing) return;
+	emit('resolve', { id: item.id, value });
+	closeDialogItem(item.id);
+}
+
+/**
+ * Dismiss a dialog, notify the owner immediately, and let the mounted item animate out.
+ *
+ * @param {{ id: string, dialog: Record<string, unknown> }} item Rendered stack item.
+ * @param {unknown} [value] Value passed to the dialog resolver.
+ * @returns {void}
+ */
+function dismiss(item, value = false) {
+	if (item.closing) return;
+	emit('dismiss', { id: item.id, value });
+	closeDialogItem(item.id);
+}
+
+/**
+ * Route custom body actions through the standard resolve and dismiss lifecycle.
+ *
+ * @param {{ id: string, dialog: Record<string, unknown> }} item Rendered stack item.
+ * @param {unknown} payload Custom action payload from a dialog body.
+ * @returns {void}
+ */
+function onDialogAction(item, payload) {
+	const detail = {
+		id: item.id,
+		dialog: item.dialog,
+		...(payload && typeof payload === 'object' ? payload : { action: payload }),
+	};
+	if (detail.action === 'resolve') resolve(item, detail.value);
+	else if (detail.action === 'dismiss') dismiss(item, detail.value);
+	emit('action', detail);
+}
+
+/**
+ * Keep the local rendered list aligned with caller-owned dialogs without skipping leave effects.
+ *
+ * @param {Array<Record<string, unknown> & { id: string }>} dialogs Caller-owned dialog records.
+ * @returns {void}
+ */
+function syncRenderedDialogs(dialogs) {
+	const incomingIds = new Set();
+
+	for (const dialog of dialogs) {
+		incomingIds.add(dialog.id);
+		const item = renderedDialogs.value.find((entry) => entry.id === dialog.id);
+
+		if (item) {
+			item.dialog = dialog;
+			if (item.closing) reopenDialogItem(item);
+		} else {
+			renderedDialogs.value.push({
+				id: dialog.id,
+				dialog,
+				open: true,
+				closing: false,
+			});
+		}
+	}
+
+	for (const item of renderedDialogs.value) {
+		if (!incomingIds.has(item.id)) closeDialogItem(item.id);
+	}
+}
+
+/**
+ * Re-open an item if the owner restores the same dialog id before removal completes.
+ *
+ * @param {{ id: string, open: boolean, closing: boolean }} item Rendered stack item.
+ * @returns {void}
+ */
+function reopenDialogItem(item) {
+	clearRemovalTimer(item.id);
+	item.open = true;
+	item.closing = false;
+}
+
+/**
+ * Start the close transition for a rendered dialog and schedule its final removal.
+ *
+ * @param {string} id Dialog id to close.
+ * @returns {void}
+ */
+function closeDialogItem(id) {
+	const item = renderedDialogs.value.find((entry) => entry.id === id);
+	if (!item || item.closing) return;
+	item.closing = true;
+	item.open = false;
+	scheduleDialogRemoval(id);
+}
+
+/**
+ * Remove a dialog after the component's close transition has had time to finish.
+ *
+ * @param {string} id Dialog id to remove.
+ * @returns {void}
+ */
+function scheduleDialogRemoval(id) {
+	clearRemovalTimer(id);
+	if (typeof window === 'undefined') {
+		removeDialogItem(id);
+		return;
+	}
+	removalTimers.set(id, window.setTimeout(() => removeDialogItem(id), DIALOG_REMOVAL_DELAY_MS));
+}
+
+/**
+ * Cancel a pending removal timer for a rendered dialog.
+ *
+ * @param {string} id Dialog id associated with the timer.
+ * @returns {void}
+ */
+function clearRemovalTimer(id) {
+	const timer = removalTimers.get(id);
+	if (!timer || typeof window === 'undefined') return;
+	window.clearTimeout(timer);
+	removalTimers.delete(id);
+}
+
+/**
+ * Remove a dialog from the local rendered list once its leave transition is complete.
+ *
+ * @param {string} id Dialog id to remove.
+ * @returns {void}
+ */
+function removeDialogItem(id) {
+	clearRemovalTimer(id);
+	renderedDialogs.value = renderedDialogs.value.filter((item) => item.id !== id);
+}
+
+/**
+ * Convert a native dialog close into a dismiss event unless this stack already initiated it.
+ *
+ * @param {{ id: string, closing: boolean }} item Rendered stack item.
+ * @returns {void}
+ */
+function onDialogClose(item) {
+	if (item.closing) return;
+	dismiss(item);
+}
+
+/**
+ * Resolve the button variant for a confirmation action.
+ *
+ * @param {Record<string, unknown>} dialog Dialog options.
+ * @returns {string}
+ */
+function confirmVariant(dialog) {
+	return dialog.tone === 'danger' ? 'danger' : 'primary';
+}
+
+/**
+ * Resolve the custom component body, if one was supplied.
+ *
+ * @param {Record<string, unknown>} dialog Dialog options.
+ * @returns {unknown}
+ */
+function dialogComponent(dialog) {
+	return dialog.component || null;
+}
+</script>
+
+<template>
+	<DomDialog
+		v-for="item in renderedDialogs"
+		:key="item.id"
+		:model-value="item.open"
+		:title="item.dialog.title || ''"
+		:description="item.dialog.description || ''"
+		:static="item.dialog.static || null"
+		:backdrop="item.dialog.backdrop !== false"
+		:footer="item.dialog.footer !== false"
+		@close="onDialogClose(item)"
+		@close-complete="removeDialogItem(item.id)"
+	>
+		<slot :dialog="item.dialog" :resolve="(value = true) => resolve(item, value)" :dismiss="(value = false) => dismiss(item, value)">
+			<component
+				:is="dialogComponent(item.dialog)"
+				v-if="dialogComponent(item.dialog)"
+				v-bind="item.dialog.props || {}"
+				@action="onDialogAction(item, $event)"
+				@resolve="resolve(item, $event)"
+				@dismiss="dismiss(item, $event)"
+				@close="dismiss(item)"
+			/>
+			<DomDialogSchemaForm
+				v-else-if="item.dialog.formSchema"
+				:schema="item.dialog.formSchema"
+				:model-value="item.dialog.formValues || {}"
+				:submit-text="item.dialog.confirmText || 'Submit'"
+				:cancel-text="item.dialog.cancelText || 'Cancel'"
+				:invalid-message="item.dialog.invalidMessage || undefined"
+				@resolve="resolve(item, $event)"
+				@dismiss="dismiss(item, $event)"
+			/>
+			<p v-else-if="item.dialog.message" class="text-sm text-muted-fg">
+				{{ item.dialog.message }}
+			</p>
+		</slot>
+
+		<template v-if="item.dialog.footer !== false" #footer>
+			<slot name="footer" :dialog="item.dialog" :resolve="(value = true) => resolve(item, value)" :dismiss="(value = false) => dismiss(item, value)">
+				<DomButton
+					v-if="item.dialog.showCancel || item.dialog.type === 'confirm'"
+					variant="secondary"
+					@click="dismiss(item)"
+				>
+					{{ item.dialog.cancelText || 'Cancel' }}
+				</DomButton>
+				<DomButton :variant="confirmVariant(item.dialog)" @click="resolve(item)">
+					{{ item.dialog.confirmText || 'OK' }}
+				</DomButton>
+			</slot>
+		</template>
+	</DomDialog>
+</template>