@getdom/studio 0.1.0

package/src/pages/forms/class-toggle-input/DomClassToggleInput.vue

@@ -0,0 +1,316 @@
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue';
+import { booleanProp, normalizeOption, optionKey, searchableText, splitTokens as splitOptionTokens, uniqueValues as uniqueOptionValues } from '../_shared/options.js';
+import { useOptionMenu } from '../_shared/useOptionMenu.js';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Class toggle input',
+		tag: '<DomClassToggleInput>',
+		description: 'A class-name autocomplete that keeps every class as a checkbox so utilities can be toggled without being forgotten.',
+		icon: 'M4 7h4l2 2 4-5 2 2-6 7-4-4H4V7Zm0 10h4l2 2 4-5 2 2-6 7-4-4H4v-2Z',
+		events: [
+			{ name: 'update:modelValue', payload: 'string', description: 'Emitted with the enabled class string.' },
+			{ name: 'update:inactiveValues', payload: 'string[]', description: 'Emitted with known classes that are currently toggled off.' },
+			{ name: 'query', payload: 'string', description: 'Fired as the user types.' },
+			{ name: 'toggle', payload: '({ value, enabled, classes, inactiveValues })', description: 'Fired when a class checkbox is toggled.' },
+			{ name: 'add', payload: '({ value, classes, inactiveValues })', description: 'Fired when a typed or suggested class is added.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: String,
+		default: '',
+		_edit: { group: 'Control props', description: 'Enabled class names as a space-separated string.' },
+	},
+	inactiveValues: {
+		type: Array,
+		default: () => [],
+		_edit: { component: 'DomJsonInput', group: 'Control props', description: 'Known class names that are shown but toggled off.' },
+	},
+	options: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			group: 'Control props',
+			description: 'Autocomplete options. Strings are treated as both label and value.',
+			props: {
+				compact: true,
+				addLabel: '+ Add class',
+				schema: [
+					{ key: 'label', label: 'Label', placeholder: 'Class label', default: (index) => `Class ${index + 1}` },
+					{ key: 'value', label: 'Value', placeholder: 'text-sm', default: (index) => `class-${index + 1}` },
+					{ key: 'description', label: 'Description', placeholder: 'Optional helper text' },
+				],
+			},
+		},
+	},
+	placeholder: {
+		type: String,
+		default: 'Add class',
+		_edit: { group: 'Control props', description: 'Placeholder for the class entry field.' },
+	},
+	allowCustom: {
+		type: [Boolean, String],
+		default: true,
+		_edit: { group: 'Control props', description: 'Allow typed classes that are not present in options.' },
+	},
+	filterOptions: {
+		type: [Boolean, String],
+		default: true,
+		_edit: { group: 'Control props', description: 'Filter options locally. Turn off when options are already filtered.' },
+	},
+	maxOptions: {
+		type: Number,
+		default: 8,
+		_edit: { group: 'Control props', description: 'Maximum matching suggestions to show.' },
+	},
+	emptyText: {
+		type: String,
+		default: 'No matching classes',
+		_edit: { group: 'Control props', description: 'Text shown when no option matches.' },
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'update:inactiveValues', 'query', 'add', 'toggle', 'change', 'focus', 'blur']);
+
+const inputEl = ref(null);
+const query = ref('');
+const knownValues = ref([]);
+const field = useField(props, emit, { idPrefix: 'dom-class-toggle-input' });
+const classKey = optionKey;
+
+const enabledClasses = computed(() => splitClassNames(field.value.value));
+const inactiveClasses = computed(() => uniqueValues(props.inactiveValues));
+const normalizedOptions = computed(() => props.options.map((option) => normalizeOption(option, { stringifyValue: true })).filter(Boolean));
+const enabledSet = computed(() => new Set(enabledClasses.value.map(classKey)));
+const inactiveSet = computed(() => new Set(inactiveClasses.value.map(classKey)));
+const knownItems = computed(() => {
+	const optionMap = new Map(normalizedOptions.value.map((option) => [classKey(option.value), option]));
+	return uniqueValues([
+		...knownValues.value,
+		...enabledClasses.value,
+		...inactiveClasses.value,
+	]).map((value) => {
+		const option = optionMap.get(classKey(value));
+		return {
+			value,
+			label: option?.label ?? value,
+			description: option?.description || '',
+			enabled: enabledSet.value.has(classKey(value)),
+		};
+	});
+});
+const trimmedQuery = computed(() => query.value.trim());
+const canCreateQuery = computed(() => {
+	if (!booleanProp(props.allowCustom, true) || !trimmedQuery.value) return false;
+	return !knownItems.value.some((item) => classKey(item.value) === classKey(trimmedQuery.value));
+});
+const matchingOptions = computed(() => {
+	const needle = trimmedQuery.value.toLowerCase();
+	return normalizedOptions.value
+		.filter((option) => !knownItems.value.some((item) => classKey(item.value) === classKey(option.value)))
+		.filter((option) => {
+			if (!needle || !booleanProp(props.filterOptions, true)) return true;
+			return searchableText(option).includes(needle);
+		})
+		.slice(0, Math.max(1, props.maxOptions));
+});
+const menuItems = computed(() => {
+	const items = matchingOptions.value.map((option) => ({ ...option, custom: false }));
+	if (canCreateQuery.value) items.push({ value: trimmedQuery.value, label: trimmedQuery.value, description: 'Add custom class', custom: true });
+	return items;
+});
+const optionMenu = useOptionMenu(menuItems, {
+	query,
+	emitQuery: (value) => emit('query', value),
+});
+const { activeIndex, isOpen } = optionMenu;
+const showMenu = computed(() => isOpen.value && !field.disabled.value && !field.readOnly.value && (menuItems.value.length || trimmedQuery.value));
+const hasEmptyState = computed(() => showMenu.value && !menuItems.value.length);
+const inputAttrs = computed(() => {
+	const { value, placeholder, ...attrs } = field.inputAttrs.value;
+	return attrs;
+});
+
+watch([enabledClasses, inactiveClasses], ([enabled, inactive]) => {
+	rememberValues([...enabled, ...inactive]);
+}, { immediate: true });
+
+function splitClassNames(value) {
+	return uniqueValues(splitOptionTokens(value, [' ']));
+}
+
+function joinClassNames(values) {
+	return uniqueValues(values).join(' ');
+}
+
+function uniqueValues(values) {
+	return uniqueOptionValues(values, {
+		transform: (value) => String(value || '').trim(),
+		key: classKey,
+	});
+}
+
+function rememberValues(values) {
+	const next = uniqueValues([...knownValues.value, ...values]);
+	if (next.length !== knownValues.value.length) knownValues.value = next;
+}
+
+function addClass(value) {
+	const className = String(value || '').trim();
+	if (!className || field.disabled.value || field.readOnly.value) return;
+	if (!booleanProp(props.allowCustom, true) && !normalizedOptions.value.some((option) => classKey(option.value) === classKey(className))) return;
+	rememberValues([className]);
+	const nextEnabled = uniqueValues([...enabledClasses.value, className]);
+	const nextInactive = inactiveClasses.value.filter((item) => classKey(item) !== classKey(className));
+	commitClasses(nextEnabled, nextInactive);
+	emit('add', { value: className, classes: joinClassNames(nextEnabled), inactiveValues: nextInactive });
+	resetQuery();
+	nextTick(() => inputEl.value?.focus());
+}
+
+function toggleClass(value, enabled) {
+	const className = String(value || '').trim();
+	if (!className || field.disabled.value || field.readOnly.value) return;
+	rememberValues([className]);
+	const nextEnabled = enabled
+		? uniqueValues([...enabledClasses.value, className])
+		: enabledClasses.value.filter((item) => classKey(item) !== classKey(className));
+	const nextInactive = enabled
+		? inactiveClasses.value.filter((item) => classKey(item) !== classKey(className))
+		: uniqueValues([...inactiveClasses.value, className]);
+	commitClasses(nextEnabled, nextInactive);
+	emit('toggle', {
+		value: className,
+		enabled,
+		classes: joinClassNames(nextEnabled),
+		inactiveValues: nextInactive,
+	});
+}
+
+function commitClasses(nextEnabled, nextInactive) {
+	const nextClassString = joinClassNames(nextEnabled);
+	field.setValue(nextClassString);
+	emit('update:inactiveValues', nextInactive);
+	emit('change', { classes: nextClassString, inactiveValues: nextInactive });
+}
+
+function resetQuery() {
+	optionMenu.reset();
+}
+
+function onFocus(event) {
+	field.onFocus(event);
+	isOpen.value = true;
+}
+
+function onBlur(event) {
+	optionMenu.closeSoon();
+	field.onBlur(event);
+}
+
+function onKeydown(event) {
+	if (event.key === 'ArrowDown') {
+		event.preventDefault();
+		optionMenu.move(1);
+		return;
+	}
+	if (event.key === 'ArrowUp') {
+		event.preventDefault();
+		optionMenu.move(-1);
+		return;
+	}
+	if (event.key === 'Enter') {
+		event.preventDefault();
+		const item = menuItems.value[activeIndex.value];
+		if (item) addClass(item.value);
+		else addClass(trimmedQuery.value);
+		return;
+	}
+	if (event.key === 'Escape') {
+		event.preventDefault();
+		isOpen.value = false;
+	}
+}
+
+function onPaste(event) {
+	const values = splitClassNames(event.clipboardData?.getData('text') || '');
+	if (values.length <= 1) return;
+	event.preventDefault();
+	for (const value of values) addClass(value);
+}
+
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<div class="relative">
+			<input
+				v-bind="inputAttrs"
+				ref="inputEl"
+				v-model="query"
+				type="text"
+				role="combobox"
+				:aria-expanded="showMenu"
+				:aria-controls="`${field.id.value}-listbox`"
+				:placeholder="placeholder"
+				class="skin-input h-9 rounded-md font-mono text-sm"
+				@focus="onFocus"
+				@blur="onBlur"
+				@keydown="onKeydown"
+				@paste="onPaste"
+			/>
+
+			<ul
+				v-if="showMenu"
+				:id="`${field.id.value}-listbox`"
+				role="listbox"
+				class="skin-popover absolute z-40 mt-2 max-h-72 w-full overflow-auto rounded-2xl p-1"
+			>
+				<li v-if="hasEmptyState" class="rounded-xl px-3 py-2 text-sm text-muted-fg">
+					{{ emptyText }}
+				</li>
+				<li
+					v-for="(item, index) in menuItems"
+					:key="`${item.custom ? 'custom' : 'option'}-${classKey(item.value)}`"
+					role="option"
+					:aria-selected="activeIndex === index"
+					class="cursor-pointer rounded-xl px-3 py-2 text-sm transition"
+					:class="activeIndex === index ? 'bg-accent text-accent-fg' : 'hover:bg-accent/70'"
+					@mouseenter="activeIndex = index"
+					@mousedown.prevent
+					@click="addClass(item.value)"
+				>
+					<span class="block truncate font-mono">{{ item.custom ? `Add ${item.label}` : item.label }}</span>
+					<span v-if="item.description" class="block truncate text-xs text-muted-fg">{{ item.description }}</span>
+				</li>
+			</ul>
+
+			<div v-if="knownItems.length" class="mt-2 flex flex-wrap gap-x-4 gap-y-2">
+				<label
+					v-for="item in knownItems"
+					:key="classKey(item.value)"
+					class="inline-flex min-w-0 items-center gap-1.5 font-mono text-sm text-canvas-fg"
+					:class="item.enabled ? '' : 'opacity-50'"
+				>
+					<input
+						type="checkbox"
+						class="size-4 rounded border-input text-primary focus:ring-ring/60"
+						:checked="item.enabled"
+						:disabled="field.disabled.value || field.readOnly.value"
+						@change="toggleClass(item.value, $event.target.checked)"
+					>
+					<span class="truncate">{{ item.label }}</span>
+				</label>
+			</div>
+		</div>
+	</DomField>
+</template>

package/src/pages/forms/code-input/DomCodeInput.vue

@@ -0,0 +1,202 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+const CODEMIRROR_URL = 'https://esm.sh/codemirror@6.0.1';
+const JSON_LANG_URL = 'https://esm.sh/@codemirror/lang-json@6.0.2';
+const JS_LANG_URL = 'https://esm.sh/@codemirror/lang-javascript@6.2.2';
+
+defineOptions({
+	__doc: {
+		name: 'Code input',
+		tag: '<DomCodeInput>',
+		description: 'A form input for code or structured text. It progressively enhances to CodeMirror from a CDN and falls back to a textarea if loading fails.',
+		events: [
+			{ name: 'update:modelValue', payload: 'string', description: 'Fired when the code changes.' },
+			{ name: 'focus', description: 'Fired when the input receives focus.' },
+			{ name: 'blur', description: 'Fired when the input loses focus.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: String,
+		default: '',
+		_edit: { component: 'DomTextareaInput', props: { rows: 8 }, description: 'Code text.' },
+	},
+	lang: {
+		type: String,
+		default: 'text',
+		_edit: { options: ['text', 'json', 'js', 'html', 'css', 'vue', 'md'], description: 'Language hint for the optional enhanced editor.' },
+	},
+	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.' },
+	},
+	_registerField: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const mountEl = ref(null);
+const textareaEl = ref(null);
+const enhanced = ref(false);
+const field = useField(props, emit, { idPrefix: 'dom-code-input', register: props._registerField });
+const labelId = computed(() => (field.fieldAttrs.value.label ? `${field.id.value}-label` : ''));
+let editorView = null;
+
+function update(value) {
+	field.onInput(value);
+}
+
+function applyEditorAttrs() {
+	if (!editorView?.dom) return;
+	editorView.dom.id = field.id.value;
+	editorView.dom.setAttribute('role', 'textbox');
+	editorView.dom.setAttribute('aria-multiline', 'true');
+	if (labelId.value) editorView.dom.setAttribute('aria-labelledby', labelId.value);
+	else editorView.dom.removeAttribute('aria-labelledby');
+	if (field.describedBy.value) editorView.dom.setAttribute('aria-describedby', field.describedBy.value);
+	else editorView.dom.removeAttribute('aria-describedby');
+	if (field.invalid.value) editorView.dom.setAttribute('aria-invalid', 'true');
+	else editorView.dom.removeAttribute('aria-invalid');
+}
+
+function focusControl() {
+	if (editorView) {
+		editorView.focus();
+		return;
+	}
+	textareaEl.value?.focus?.();
+}
+
+async function languageExtension(lang) {
+	if (lang === 'json') {
+		const mod = await import(/* @vite-ignore */ JSON_LANG_URL);
+		return mod.json();
+	}
+	if (['js', 'vue'].includes(lang)) {
+		const mod = await import(/* @vite-ignore */ JS_LANG_URL);
+		return mod.javascript();
+	}
+	return [];
+}
+
+async function mountEditor() {
+	if (!props.editor || field.disabled.value || typeof window === 'undefined') return;
+	try {
+		if (!mountEl.value) return;
+		const cm = await import(/* @vite-ignore */ CODEMIRROR_URL);
+		const lang = await languageExtension(props.lang);
+		const theme = cm.EditorView.theme({
+			'&': {
+				backgroundColor: 'var(--canvas)',
+				color: 'var(--canvas-fg)',
+				fontSize: '12.5px',
+				borderRadius: '0.75rem',
+				outline: 'none',
+			},
+			'.cm-content': {
+				fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+				padding: '0.75rem',
+			},
+			'.cm-scroller': {
+				fontFamily: 'inherit',
+			},
+			'.cm-focused': {
+				outline: 'none',
+			},
+			'.cm-gutters': {
+				backgroundColor: 'color-mix(in oklch, var(--secondary) 55%, transparent)',
+				color: 'var(--muted-fg)',
+				borderRight: '1px solid var(--border)',
+			},
+			'.cm-activeLineGutter, .cm-activeLine': {
+				backgroundColor: 'color-mix(in oklch, var(--secondary) 55%, transparent)',
+			},
+		});
+		editorView = new cm.EditorView({
+			doc: field.value.value,
+			parent: mountEl.value,
+			extensions: [
+				cm.basicSetup,
+				lang,
+				theme,
+				cm.EditorView.editable.of(!field.disabled.value && !field.readOnly.value),
+				cm.EditorView.lineWrapping,
+				cm.EditorView.updateListener.of((viewUpdate) => {
+					if (viewUpdate.docChanged) update(viewUpdate.state.doc.toString());
+					if (viewUpdate.focusChanged) {
+						if (viewUpdate.view.hasFocus) field.onFocus();
+						else field.onBlur();
+					}
+				}),
+			],
+		});
+		applyEditorAttrs();
+		enhanced.value = true;
+	} catch {
+		enhanced.value = false;
+	}
+}
+
+watch([labelId, field.describedBy, field.invalid], applyEditorAttrs);
+
+watch(field.value, (value) => {
+	if (!editorView) return;
+	const current = editorView.state.doc.toString();
+	if (current === value) return;
+	editorView.dispatch({
+		changes: { from: 0, to: current.length, insert: value || '' },
+	});
+});
+
+onMounted(mountEditor);
+onBeforeUnmount(() => {
+	editorView?.destroy();
+	editorView = null;
+});
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<template #label="{ label, required, htmlFor }">
+			<label
+				v-if="label"
+				:id="labelId || undefined"
+				:for="enhanced ? undefined : htmlFor"
+				class="block cursor-pointer text-[11px] font-medium uppercase tracking-wider text-muted-fg"
+				@click="enhanced ? focusControl() : undefined"
+			>
+				{{ label }}
+				<span v-if="required" class="text-destructive">*</span>
+			</label>
+		</template>
+		<div class="overflow-hidden rounded-xl border border-input bg-canvas 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="field.invalid.value ? '' : undefined">
+			<div v-show="enhanced" ref="mountEl"></div>
+			<textarea
+				v-if="!enhanced"
+				ref="textareaEl"
+				v-bind="field.inputAttrs.value"
+				:rows="rows"
+				spellcheck="false"
+				class="block min-h-40 w-full resize-y bg-canvas p-3 font-mono text-[12.5px] leading-relaxed text-canvas-fg outline-none placeholder:text-muted-fg disabled:opacity-50"
+				@input="update($event.target.value)"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			></textarea>
+		</div>
+	</DomField>
+</template>

package/src/pages/forms/color-input/DomColorInput.vue

@@ -0,0 +1,118 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+import { cssColorToHex, hexToOklch } from '../../lib/css/color.js';
+
+defineOptions({
+	__doc: {
+		name: 'Color input',
+		tag: '<DomColorInput>',
+		description: 'A compact colour swatch that opens the native colour picker while preserving CSS colour values.',
+		events: [
+			{ name: 'update:modelValue', payload: 'string', description: 'Fired when the colour changes.' },
+			{ name: 'focus', payload: 'FocusEvent', description: 'Fired when either control receives focus.' },
+			{ name: 'blur', payload: 'FocusEvent', description: 'Fired when either control loses focus.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: String,
+		default: '#000000',
+		_edit: { group: 'Control props', description: 'CSS colour value. Hex and OKLCH values are supported.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-color-input' });
+const canResolveBrowserColors = ref(false);
+
+const displayColor = computed(() => String(field.value.value || 'transparent').trim() || 'transparent');
+const swatchValue = computed(() => cssColorToHex(displayColor.value));
+const nativeColorValue = computed(() => {
+	if (!canResolveBrowserColors.value && needsBrowserColorResolution(displayColor.value)) return '#000000';
+	return swatchValue.value;
+});
+const nativeColorAttrs = computed(() => ({
+	id: field.id.value,
+	name: field.htmlName.value,
+	value: nativeColorValue.value,
+	disabled: field.disabled.value || field.readOnly.value || undefined,
+	required: props.required || undefined,
+	'aria-invalid': field.invalid.value || undefined,
+	'aria-describedby': field.describedBy.value || undefined,
+	'aria-errormessage': field.errorId.value || undefined,
+	'data-invalid': field.invalid.value ? '' : undefined,
+	'aria-label': props.label ? undefined : 'Change colour',
+	title: displayColor.value,
+}));
+const swatchStyle = computed(() => ({
+	'--dom-color-swatch': displayColor.value,
+}));
+
+function onNativeColorInput(value) {
+	const currentValue = String(field.value.value || '').trim();
+	field.onInput(/^oklch\(/i.test(currentValue) ? hexToOklch(value) : value);
+}
+
+function needsBrowserColorResolution(value) {
+	const color = String(value || '').trim();
+	if (!color || color === 'transparent') return false;
+	return !(
+		/^#[0-9a-f]{3,8}$/i.test(color)
+		|| /^rgba?\(/i.test(color)
+		|| /^oklch\(/i.test(color)
+		|| /^color\(\s*srgb\s+/i.test(color)
+	);
+}
+
+onMounted(() => {
+	canResolveBrowserColors.value = true;
+});
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<div
+			class="dom-color-control relative h-10 w-full overflow-hidden rounded-lg border border-border shadow-sm transition focus-within:ring-2 focus-within:ring-ring/50"
+			:class="(field.disabled.value || field.readOnly.value) && 'cursor-not-allowed opacity-50'"
+		>
+			<span class="dom-color-swatch absolute inset-0" :style="swatchStyle"></span>
+			<span class="sr-only">{{ displayColor }}</span>
+			<input
+				v-bind="nativeColorAttrs"
+				type="color"
+				class="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+				@input="onNativeColorInput($event.target.value)"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			/>
+		</div>
+	</DomField>
+</template>
+
+<style scoped>
+.dom-color-control[data-invalid],
+.dom-color-control:has(input[data-invalid]) {
+	border-color: var(--destructive);
+}
+
+.dom-color-swatch {
+	background:
+		linear-gradient(var(--dom-color-swatch), var(--dom-color-swatch)),
+		conic-gradient(
+			from 45deg,
+			color-mix(in oklch, var(--border) 60%, white) 0 25%,
+			transparent 0 50%,
+			color-mix(in oklch, var(--border) 60%, white) 0 75%,
+			transparent 0
+		);
+	background-color: var(--dom-color-swatch);
+	background-size:
+		100% 100%,
+		14px 14px;
+}
+</style>