@getdom/studio 0.1.0

package/src/pages/forms/input-group/DomInputGroup.vue

@@ -0,0 +1,232 @@
+<script setup>
+import { computed, unref, useId } from 'vue';
+import DomField from '../field/DomField.vue';
+import { normalizeErrors } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Input group',
+		tag: '<DomInputGroup>',
+		description: 'A display-only frame that presents several independent form controls as one grouped input, followed by optional feedback and their errors.',
+		icon: 'M5 5h14v14H5V5Zm0 7h14',
+		slots: [
+			{ name: '(default)', description: 'Form controls using chrome="false". Each control keeps its own model, name, validation, and form registration.' },
+			{ name: 'feedback', description: 'Supporting content shown outside the shared frame and before validation errors.' },
+		],
+	},
+});
+
+const props = defineProps({
+	ariaLabel: {
+		type: String,
+		default: 'Grouped form fields',
+		_edit: { description: 'Accessible name for the shared control frame.' },
+	},
+	description: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional helper text shown below the grouped errors.' },
+	},
+	errors: {
+		type: [Array, Object, String],
+		default: () => [],
+		_edit: { component: 'DomJsonInput', description: 'Optional group-level validation errors shown after child field errors.' },
+	},
+	errorLabels: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Prefix each child error with its field label so repeated messages remain distinguishable.' },
+	},
+	invalid: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Mark the shared frame invalid in addition to any child field state.' },
+	},
+	visible: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show or hide the complete input group.' },
+	},
+});
+
+const inputGroupId = `dom-input-group-${useId()}`;
+const descriptionId = `${inputGroupId}-description`;
+const groupErrorId = `${inputGroupId}-error`;
+
+/**
+ * Normalizes group-level errors without merging identical child messages.
+ */
+const groupErrors = computed(() => normalizeErrors(props.errors));
+
+/**
+ * Resolves a reactive field registration value or its matching field attribute.
+ *
+ * @param {Record<string, unknown>} field Registered child field.
+ * @param {string} key Registration property to resolve.
+ * @returns {unknown} Resolved property value.
+ */
+function fieldValue(field, key) {
+	const directValue = unref(field?.[key]);
+	if (directValue !== undefined) return directValue;
+	return unref(unref(field?.fieldAttrs)?.[key]);
+}
+
+/**
+ * Returns the stable key for a registered child field.
+ *
+ * @param {Record<string, unknown>} field Registered child field.
+ * @param {number} index Child position used as a final fallback.
+ * @returns {string} Stable rendering key.
+ */
+function fieldKey(field, index) {
+	return String(fieldValue(field, 'path') || fieldValue(field, 'htmlId') || fieldValue(field, 'id') || index);
+}
+
+/**
+ * Returns the visible and accessible label for a child field.
+ *
+ * @param {Record<string, unknown>} field Registered child field.
+ * @returns {string} Child field label.
+ */
+function fieldLabel(field) {
+	return String(fieldValue(field, 'label') || fieldValue(field, 'name') || 'Field');
+}
+
+/**
+ * Returns the native input ID registered by a child field.
+ *
+ * @param {Record<string, unknown>} field Registered child field.
+ * @returns {string} Native input ID.
+ */
+function fieldHtmlId(field) {
+	return String(fieldValue(field, 'htmlId') || fieldValue(field, 'id') || '');
+}
+
+/**
+ * Returns the error element ID expected by a child input's ARIA attributes.
+ *
+ * @param {Record<string, unknown>} field Registered child field.
+ * @returns {string} Child error element ID.
+ */
+function fieldErrorId(field) {
+	return String(fieldValue(field, 'errorId') || '');
+}
+
+/**
+ * Returns every validation message registered for a child field.
+ *
+ * @param {Record<string, unknown>} field Registered child field.
+ * @returns {string[]} Normalized validation messages.
+ */
+function fieldErrors(field) {
+	return normalizeErrors(fieldValue(field, 'errors'));
+}
+
+/**
+ * Reports whether any registered child field currently has validation errors.
+ *
+ * @param {Array<Record<string, unknown>>} fields Registered child fields.
+ * @returns {boolean} Whether child validation errors exist.
+ */
+function hasFieldErrors(fields) {
+	return fields.some((field) => fieldErrors(field).length > 0);
+}
+
+/**
+ * Adds field context to an error when several controls share one error region.
+ *
+ * @param {Record<string, unknown>} field Registered child field.
+ * @param {string} error Validation message.
+ * @returns {string} Error copy for display.
+ */
+function displayError(field, error) {
+	if (!props.errorLabels) return error;
+	return `${fieldLabel(field)}: ${error}`;
+}
+</script>
+
+<template>
+	<DomField :chrome="false" :errors="errors" :invalid="invalid" :visible="visible">
+		<template #default="{ invalid: groupInvalid, fields }">
+			<div class="w-full space-y-1.5">
+				<div
+					:aria-label="ariaLabel"
+					:aria-describedby="description ? descriptionId : undefined"
+					:aria-errormessage="groupErrors.length ? groupErrorId : undefined"
+					:aria-invalid="groupInvalid || undefined"
+					role="group"
+					class="skin-input dom-input-group__controls overflow-hidden p-0 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 data-[invalid]:border-destructive data-[invalid]:focus-within:border-destructive data-[invalid]:focus-within:ring-destructive/25"
+					:data-invalid="groupInvalid ? '' : undefined"
+				>
+					<div class="sr-only">
+						<label
+							v-for="(field, fieldIndex) in fields"
+							:key="`label-${fieldKey(field, fieldIndex)}`"
+							:for="fieldHtmlId(field) || undefined"
+						>
+							{{ fieldLabel(field) }}
+						</label>
+					</div>
+					<slot />
+				</div>
+
+				<div v-if="$slots.feedback" class="dom-input-group__feedback pt-1">
+					<slot name="feedback" />
+				</div>
+
+				<div
+					v-if="hasFieldErrors(fields) || groupErrors.length"
+					class="space-y-1 text-[11px] leading-snug text-destructive"
+					aria-live="polite"
+				>
+					<template v-for="(field, fieldIndex) in fields" :key="`errors-${fieldKey(field, fieldIndex)}`">
+						<p
+							v-for="(error, errorIndex) in fieldErrors(field)"
+							:key="`${fieldKey(field, fieldIndex)}-${error}-${errorIndex}`"
+							:id="errorIndex === 0 ? fieldErrorId(field) || undefined : undefined"
+						>
+							{{ displayError(field, error) }}
+						</p>
+					</template>
+					<p
+						v-for="(error, errorIndex) in groupErrors"
+						:key="`group-${error}-${errorIndex}`"
+						:id="errorIndex === 0 ? groupErrorId : undefined"
+					>
+						{{ error }}
+					</p>
+				</div>
+
+				<p v-if="description" :id="descriptionId" class="text-[11px] leading-snug text-muted-fg">
+					{{ description }}
+				</p>
+			</div>
+		</template>
+	</DomField>
+</template>
+
+<style scoped>
+.dom-input-group__controls :deep(.skin-input) {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+	box-shadow: none;
+}
+
+.dom-input-group__controls :deep(.skin-input:focus) {
+	border-color: transparent;
+	box-shadow: none;
+}
+
+.dom-input-group__controls :deep(button:active) {
+	scale: 1;
+}
+
+.dom-input-group__controls :deep(.dom-password-input__warning) {
+	margin: 0.75rem;
+}
+
+:global(.dom-input-group__controls > *:not(.sr-only) + *:not(.sr-only)) {
+	border-top: 1px solid var(--border);
+}
+</style>

package/src/pages/forms/json-input/DomJsonInput.vue

@@ -0,0 +1,227 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import DomCodeInput from '../code-input/DomCodeInput.vue';
+import DomField from '../field/DomField.vue';
+import DomForm from '../form/DomForm.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { inferFormNodeFromValue, normalizeFormNode } from '../form/formDefinition.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'JSON input',
+		tag: '<DomJsonInput>',
+		description: 'A JSON form input backed by DomCodeInput. Valid JSON emits parsed data; invalid JSON stays local and shows an error.',
+		events: [
+			{ name: 'update:modelValue', payload: 'object | array | string | number | boolean | null', description: 'Fired with parsed JSON when the editor contains valid JSON.' },
+			{ name: 'valid', payload: 'parsed value', description: 'Fired when JSON parses successfully.' },
+			{ name: 'invalid', payload: 'Error', description: 'Fired when JSON cannot be parsed.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		default: null,
+		_edit: { component: 'DomJsonInput', description: 'Any JSON-serializable value.' },
+	},
+	rows: {
+		type: Number,
+		default: 10,
+		_edit: { description: 'Textarea fallback rows.' },
+	},
+	editor: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Attempt to load the enhanced editor from the CDN.' },
+	},
+	schema: {
+		type: [Object, Array],
+		default: null,
+		_edit: {
+			component: 'DomJsonInput',
+			description: 'Optional standardized form definition used to render a visual JSON editor.',
+		},
+	},
+	jsonToggle: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show the visual/raw JSON mode switch when schema is provided.' },
+	},
+	compact: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Reduce vertical spacing for schema-driven editors.' },
+	},
+	_registerField: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'valid', 'invalid', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-json-input', register: props._registerField });
+const text = ref(format(field.value.value));
+const error = ref('');
+const focused = ref(false);
+const mode = ref('fields');
+const schemaNode = computed(() => (
+	props.schema
+		? normalizeJsonSchema(props.schema)
+		: normalizeFormNode(inferFormNodeFromValue(field.value.value))
+));
+const hasSchema = computed(() => !!schemaNode.value);
+const schemaFormType = computed(() => (schemaNode.value?.type === 'array' ? 'array' : 'object'));
+const schemaChildren = computed(() => schemaNode.value?.children || []);
+const schemaItems = computed(() => schemaNode.value?.items || null);
+const schemaValue = computed(() => {
+	if (schemaFormType.value === 'array') return Array.isArray(field.value.value) ? field.value.value : [];
+	return field.value.value && typeof field.value.value === 'object' && !Array.isArray(field.value.value)
+		? field.value.value
+		: {};
+});
+const codeFieldAttrs = computed(() => ({
+	...field.fieldAttrs.value,
+	invalid: field.invalid.value || !!error.value,
+	errors: error.value ? [error.value] : field.errors.value,
+}));
+
+function format(value) {
+	return JSON.stringify(value ?? null, null, 2);
+}
+
+function normalizeJsonSchema(schema) {
+	return Array.isArray(schema)
+		? normalizeFormNode({ type: 'DomForm', children: schema })
+		: normalizeFormNode(schema);
+}
+
+function onInput(value) {
+	text.value = value;
+	try {
+		const parsed = JSON.parse(value);
+		error.value = '';
+		field.setFieldState({ errors: [], invalid: false });
+		field.onInput(parsed);
+		emit('valid', parsed);
+	} catch (err) {
+		error.value = err.message;
+		field.setFieldState({ errors: [err.message], invalid: true });
+		emit('invalid', err);
+	}
+}
+
+function onFormInput(value) {
+	error.value = '';
+	field.setFieldState({ errors: [], invalid: false });
+	field.onInput(value);
+	emit('valid', value);
+}
+
+function onFocus(event) {
+	focused.value = true;
+	field.onFocus(event);
+}
+
+function onBlur(event) {
+	focused.value = false;
+	field.onBlur(event);
+}
+
+watch(field.value, (value) => {
+	if (focused.value) return;
+	const next = format(value);
+	if (next !== text.value) text.value = next;
+});
+</script>
+
+<template>
+	<DomField v-if="hasSchema" v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<input
+			v-if="field.htmlName.value && mode === 'fields'"
+			type="hidden"
+			:name="field.htmlName.value"
+			:value="format(field.value.value)"
+		/>
+		<div :class="compact ? 'space-y-1.5' : 'space-y-2'">
+			<div v-if="jsonToggle" class="flex justify-end">
+				<div class="inline-flex rounded-lg border border-border bg-secondary/60 p-0.5">
+					<button
+						type="button"
+						class="rounded-md px-2.5 py-1 text-xs font-medium transition"
+						:class="mode === 'fields' ? 'bg-canvas text-canvas-fg shadow-sm' : 'text-muted-fg hover:text-canvas-fg'"
+						:aria-pressed="mode === 'fields'"
+						@click="mode = 'fields'"
+					>
+						Fields
+					</button>
+					<button
+						type="button"
+						class="rounded-md px-2.5 py-1 text-xs font-medium transition"
+						:class="mode === 'json' ? 'bg-canvas text-canvas-fg shadow-sm' : 'text-muted-fg hover:text-canvas-fg'"
+						:aria-pressed="mode === 'json'"
+						@click="mode = 'json'"
+					>
+						JSON
+					</button>
+				</div>
+			</div>
+			<DomForm
+				v-if="mode === 'fields'"
+				:model-value="schemaValue"
+				:type="schemaFormType"
+				:children="schemaChildren"
+				:items="schemaItems"
+				:compact="compact"
+				tag="div"
+				isolated
+				@update:model-value="onFormInput"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			/>
+			<div v-else>
+				<DomCodeInput
+					:model-value="text"
+					:id="field.id.value"
+					:name="field.htmlName.value"
+					:rows="rows"
+					:editor="editor"
+					:invalid="codeFieldAttrs.invalid"
+					:errors="codeFieldAttrs.errors"
+					:required="required"
+					:disabled="field.disabled.value"
+					:read-only="field.readOnly.value"
+					chrome="none"
+					:_register-field="false"
+					lang="json"
+					@update:model-value="onInput"
+					@focus="onFocus"
+					@blur="onBlur"
+				/>
+			</div>
+		</div>
+	</DomField>
+	<div v-else>
+		<DomCodeInput
+			:model-value="text"
+			:id="field.id.value"
+			:name="field.htmlName.value"
+			:label="codeFieldAttrs.label"
+			:description="codeFieldAttrs.description"
+			:rows="rows"
+			:editor="editor"
+			:invalid="codeFieldAttrs.invalid"
+			:errors="codeFieldAttrs.errors"
+			:required="required"
+			:disabled="field.disabled.value"
+			:read-only="field.readOnly.value"
+			:chrome="chrome"
+			:_register-field="false"
+			lang="json"
+			@update:model-value="onInput"
+			@focus="onFocus"
+			@blur="onBlur"
+		/>
+	</div>
+</template>

package/src/pages/forms/json-list-input/DomJsonListInput.vue

@@ -0,0 +1,206 @@
+<script setup>
+import { computed, ref } from 'vue';
+import DomForm from '../form/DomForm.vue';
+import DomField from '../field/DomField.vue';
+import DomJsonInput from '../json-input/DomJsonInput.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { inferFormNodeFromValue, normalizeFormNode } from '../form/formDefinition.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'JSON list input',
+		tag: '<DomJsonListInput>',
+		description: 'A schema-aware editor for arrays of objects. Edit rows through form controls, or toggle to raw JSON for bulk changes.',
+		events: [
+			{ name: 'update:modelValue', payload: 'Array<object>', description: 'Fired when rows are added, removed, reordered, edited, or replaced from valid raw JSON.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: Array,
+		default: () => [],
+		_edit: { component: 'DomJsonListInput', props: { compact: true } },
+	},
+	addLabel: {
+		type: String,
+		default: '+ Add row',
+		_edit: { description: 'Button label for adding a row.' },
+	},
+	schema: {
+		type: [Array, Object],
+		default: null,
+		_edit: {
+			component: 'DomJsonInput',
+			props: {
+				label: 'Schema',
+				description: 'Standardized form definition used by the visual editor. Legacy flat row schema arrays are still supported.',
+				rows: 8,
+			},
+		},
+	},
+	jsonToggle: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show the visual/raw JSON mode switch.' },
+	},
+	compact: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Reduce vertical spacing for inspectors and narrow tool panels.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-json-list-input' });
+const mode = ref('fields');
+const rawError = ref('');
+
+const rows = computed(() => (Array.isArray(field.value.value) ? field.value.value : []));
+const normalizedSchema = computed(() => (
+	props.schema && !Array.isArray(props.schema) ? normalizeFormNode(props.schema) : null
+));
+const formItemSchema = computed(() => {
+	if (!normalizedSchema.value) return null;
+	if (normalizedSchema.value.type === 'array') return normalizedSchema.value.items || { type: 'json' };
+	return normalizedSchema.value;
+});
+const fields = computed(() => {
+	if (Array.isArray(props.schema) && props.schema.length) return props.schema;
+	const keys = [...new Set(rows.value.flatMap((row) => (isObject(row) ? Object.keys(row) : [])))];
+	return keys.map((key) => ({
+		key,
+		label: key.replace(/([A-Z])/g, ' $1').replace(/^./, (c) => c.toUpperCase()),
+		type: key.includes('url') || key.includes('avatar') || key.includes('image') ? 'url' : 'text',
+	}));
+});
+const inferredArraySchema = computed(() => inferFormNodeFromValue(rows.value));
+const visualItemSchema = computed(() => (
+	formItemSchema.value
+	|| (Array.isArray(props.schema) && props.schema.length ? legacyFieldsToFormNode(fields.value) : null)
+	|| inferredArraySchema.value?.items
+	|| legacyFieldsToFormNode(fields.value)
+));
+
+function isObject(value) {
+	return value && typeof value === 'object' && !Array.isArray(value);
+}
+
+function update(next) {
+	rawError.value = '';
+	field.onInput(next);
+}
+
+function setRawJson(value) {
+	if (!Array.isArray(value)) {
+		rawError.value = 'JSON list input expects an array of objects.';
+		return;
+	}
+
+	rawError.value = '';
+	update(value);
+}
+
+function legacyFieldsToFormNode(nextFields) {
+	return {
+		type: 'DomForm',
+		properties: Object.fromEntries((nextFields || [])
+			.filter((field) => field?.key)
+			.map((field) => [field.key, legacyFieldToFormNode(field)])),
+	};
+}
+
+function legacyFieldToFormNode(field) {
+	const {
+		key,
+		type = 'string',
+		label,
+		description,
+		placeholder,
+		required,
+		default: defaultValue,
+		options,
+		component,
+		valueType,
+	} = field;
+	return {
+		type,
+		...(component ? { component } : {}),
+		...(label ? { label } : {}),
+		...(description ? { description } : {}),
+		...(placeholder ? { placeholder } : {}),
+		...(required ? { required } : {}),
+		...(defaultValue !== undefined ? { default: defaultValue } : {}),
+		...(options ? { options } : {}),
+		...(valueType ? { valueType } : {}),
+	};
+}
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<input
+			v-if="field.htmlName.value"
+			type="hidden"
+			:name="field.htmlName.value"
+			:value="JSON.stringify(rows)"
+		/>
+		<div :class="compact ? 'space-y-1.5' : 'space-y-2'">
+			<div v-if="jsonToggle" class="flex justify-end">
+				<div class="inline-flex rounded-lg border border-border bg-secondary/60 p-0.5">
+					<button
+						type="button"
+						class="rounded-md px-2.5 py-1 text-xs font-medium transition"
+						:class="mode === 'fields' ? 'bg-canvas text-canvas-fg shadow-sm' : 'text-muted-fg hover:text-canvas-fg'"
+						:aria-pressed="mode === 'fields'"
+						@click="mode = 'fields'"
+					>
+						Fields
+					</button>
+					<button
+						type="button"
+						class="rounded-md px-2.5 py-1 text-xs font-medium transition"
+						:class="mode === 'json' ? 'bg-canvas text-canvas-fg shadow-sm' : 'text-muted-fg hover:text-canvas-fg'"
+						:aria-pressed="mode === 'json'"
+						@click="mode = 'json'"
+					>
+						JSON
+					</button>
+				</div>
+			</div>
+
+			<div v-if="mode === 'json'">
+				<DomJsonInput
+					:model-value="rows"
+					:rows="compact ? 7 : 12"
+					:editor="true"
+					:chrome="'none'"
+					:_register-field="false"
+					@update:model-value="setRawJson"
+					@focus="field.onFocus"
+					@blur="field.onBlur"
+				/>
+				<p v-if="rawError" class="mt-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs font-mono text-destructive">
+					{{ rawError }}
+				</p>
+			</div>
+
+			<template v-else>
+				<DomForm
+					:model-value="rows"
+					type="array"
+					:items="visualItemSchema"
+					:add-label="addLabel"
+					:compact="compact"
+					tag="div"
+					isolated
+					@update:model-value="update"
+					@focus="field.onFocus"
+					@blur="field.onBlur"
+				/>
+			</template>
+		</div>
+	</DomField>
+</template>