@getdom/studio 0.1.0

package/src/pages/forms/time-selector/timeUtils.js

@@ -0,0 +1,194 @@
+export function pad(value) {
+	return String(value).padStart(2, '0');
+}
+
+export function normalizeMinuteStep(value, fallback = 15) {
+	const number = Math.round(Number(value));
+	if (!Number.isFinite(number) || number <= 0) return fallback;
+	return Math.min(720, Math.max(1, number));
+}
+
+export function timeToParts(value) {
+	const match = String(value || '').match(/^(\d{2}):(\d{2})(?::(\d{2}))?$/);
+	if (!match) return null;
+	const hours = Number(match[1]);
+	const minutes = Number(match[2]);
+	const seconds = Number(match[3] || 0);
+	if (hours > 23 || minutes > 59 || seconds > 59) return null;
+	return { hours, minutes, seconds };
+}
+
+export function partsToTime(parts, { showSeconds = false } = {}) {
+	const hours = Number(parts?.hours);
+	const minutes = Number(parts?.minutes);
+	const seconds = Number(parts?.seconds || 0);
+	if (
+		!Number.isInteger(hours)
+		|| !Number.isInteger(minutes)
+		|| !Number.isInteger(seconds)
+		|| hours < 0
+		|| hours > 23
+		|| minutes < 0
+		|| minutes > 59
+		|| seconds < 0
+		|| seconds > 59
+	) return '';
+	const base = `${pad(hours)}:${pad(minutes)}`;
+	return showSeconds ? `${base}:${pad(seconds)}` : base;
+}
+
+export function normalizeTimeValue(value, options = {}) {
+	const parts = timeToParts(value);
+	if (!parts) return '';
+	return partsToTime(parts, options);
+}
+
+export function isTimeValue(value, options = {}) {
+	return normalizeTimeValue(value, options) === value;
+}
+
+export function timeToSeconds(value) {
+	const parts = timeToParts(value);
+	if (!parts) return NaN;
+	return parts.hours * 3600 + parts.minutes * 60 + parts.seconds;
+}
+
+export function secondsToTime(totalSeconds, options = {}) {
+	const safeSeconds = Math.min(86399, Math.max(0, Math.round(Number(totalSeconds) || 0)));
+	const hours = Math.floor(safeSeconds / 3600);
+	const minutes = Math.floor((safeSeconds % 3600) / 60);
+	const seconds = safeSeconds % 60;
+	return partsToTime({ hours, minutes, seconds }, options);
+}
+
+export function compareTimeValues(left, right) {
+	const leftSeconds = timeToSeconds(left);
+	const rightSeconds = timeToSeconds(right);
+	if (!Number.isFinite(leftSeconds) || !Number.isFinite(rightSeconds)) return 0;
+	return leftSeconds - rightSeconds;
+}
+
+export function parseTimeInput(input, options = {}) {
+	const showSeconds = Boolean(options.showSeconds);
+	const trimmed = String(input || '').trim();
+	if (!trimmed) return { value: '', error: '' };
+
+	const compact = trimmed.match(/^(\d{3,4})(?:\s*([ap]m))?$/i);
+	if (compact) {
+		const digits = compact[1];
+		const suffix = compact[2] || '';
+		const hours = Number(digits.slice(0, -2));
+		const minutes = Number(digits.slice(-2));
+		return normalizeParsedParts({ hours, minutes, seconds: 0, suffix, showSeconds });
+	}
+
+	const colon = trimmed.match(/^(\d{1,2})(?::(\d{1,2}))?(?::(\d{1,2}))?(?:\s*([ap]m))?$/i);
+	if (!colon) {
+		return { value: '', error: 'Use a time like 09:30 or 2:30 PM.' };
+	}
+
+	const hours = Number(colon[1]);
+	const minutes = colon[2] == null ? 0 : Number(colon[2]);
+	const seconds = colon[3] == null ? 0 : Number(colon[3]);
+	const suffix = colon[4] || '';
+	return normalizeParsedParts({ hours, minutes, seconds, suffix, showSeconds });
+}
+
+export function formatTimeDisplay(value, options = {}) {
+	const parts = timeToParts(value);
+	if (!parts) return '';
+	const showSeconds = Boolean(options.showSeconds);
+	if (options.timeFormat === '12h') {
+		const suffix = parts.hours >= 12 ? 'PM' : 'AM';
+		const displayHours = parts.hours % 12 || 12;
+		const base = `${displayHours}:${pad(parts.minutes)}`;
+		return showSeconds ? `${base}:${pad(parts.seconds)} ${suffix}` : `${base} ${suffix}`;
+	}
+	const base = `${pad(parts.hours)}:${pad(parts.minutes)}`;
+	return showSeconds ? `${base}:${pad(parts.seconds)}` : base;
+}
+
+export function timeRangeError(value, options = {}) {
+	const normalized = normalizeTimeValue(value, options);
+	if (!normalized) return '';
+	const min = normalizeTimeValue(options.min, options);
+	const max = normalizeTimeValue(options.max, options);
+	if (min && compareTimeValues(normalized, min) < 0) {
+		return `Time must be at or after ${formatTimeDisplay(min, options)}.`;
+	}
+	if (max && compareTimeValues(normalized, max) > 0) {
+		return `Time must be at or before ${formatTimeDisplay(max, options)}.`;
+	}
+	return '';
+}
+
+export function buildTimeOptions(options = {}) {
+	const customOptions = Array.isArray(options.options) ? options.options : [];
+	if (customOptions.length) {
+		return customOptions
+			.map((option) => normalizeOption(option, options))
+			.filter((option) => option.value);
+	}
+
+	const showSeconds = Boolean(options.showSeconds);
+	const stepSeconds = normalizeMinuteStep(options.minuteStep) * 60;
+	const min = normalizeTimeValue(options.min, { showSeconds }) || '00:00';
+	const max = normalizeTimeValue(options.max, { showSeconds }) || (showSeconds ? '23:59:59' : '23:59');
+	const minSeconds = timeToSeconds(min);
+	const maxSeconds = timeToSeconds(max);
+	if (!Number.isFinite(minSeconds) || !Number.isFinite(maxSeconds) || minSeconds > maxSeconds) return [];
+
+	const start = Math.ceil(minSeconds / stepSeconds) * stepSeconds;
+	const items = [];
+	for (let seconds = start; seconds <= maxSeconds; seconds += stepSeconds) {
+		const value = secondsToTime(seconds, { showSeconds });
+		items.push({
+			value,
+			label: formatTimeDisplay(value, options),
+		});
+	}
+	return items;
+}
+
+function normalizeParsedParts({ hours, minutes, seconds, suffix, showSeconds }) {
+	const normalizedSuffix = String(suffix || '').toLowerCase();
+	if (normalizedSuffix) {
+		if (hours < 1 || hours > 12) return { value: '', error: 'Use 1-12 with AM or PM.' };
+		if (normalizedSuffix === 'am') hours = hours === 12 ? 0 : hours;
+		if (normalizedSuffix === 'pm') hours = hours === 12 ? 12 : hours + 12;
+	}
+
+	if (
+		!Number.isInteger(hours)
+		|| !Number.isInteger(minutes)
+		|| !Number.isInteger(seconds)
+		|| hours < 0
+		|| hours > 23
+		|| minutes < 0
+		|| minutes > 59
+		|| seconds < 0
+		|| seconds > 59
+	) {
+		return { value: '', error: 'Enter a real time.' };
+	}
+
+	if (!showSeconds && seconds > 0) {
+		return { value: '', error: 'Use hours and minutes only.' };
+	}
+
+	return {
+		value: partsToTime({ hours, minutes, seconds }, { showSeconds }),
+		error: '',
+	};
+}
+
+function normalizeOption(option, options) {
+	const record = option && typeof option === 'object' ? option : { value: option };
+	const value = normalizeTimeValue(record.value, options) || parseTimeInput(record.value, options).value;
+	return {
+		...record,
+		value,
+		label: record.label || formatTimeDisplay(value, options),
+		disabled: Boolean(record.disabled),
+	};
+}

package/src/pages/forms/toggle/DomToggle.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Toggle',
+		tag: '<DomToggle>',
+		description: 'Accessible switch for boolean values. Works standalone with v-model or inside DomForm through useField.',
+		events: [
+			{ name: 'update:modelValue', payload: '(checked: boolean)', description: 'Emitted when checked changes.' },
+			{ name: 'focus', payload: 'FocusEvent', description: 'Fired when the switch receives focus.' },
+			{ name: 'blur', payload: 'FocusEvent', description: 'Fired when the switch loses focus.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: Boolean,
+		default: false,
+		_edit: { group: 'Control props', description: 'On / off state.' },
+	},
+	size: {
+		type: String,
+		default: 'md',
+		_edit: { group: 'Control props', options: ['sm', 'md', 'lg'], description: 'Switch size. Matches DomButton size names.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+
+const root = ref(null);
+const field = useField(props, emit, { idPrefix: 'dom-toggle' });
+const labelId = computed(() => (props.label ? `${field.id.value}-label` : ''));
+const sizeConfig = computed(() => ({
+	sm: {
+		wrapper: 'gap-2',
+		label: 'text-xs',
+		description: 'text-[0.6875rem] leading-4',
+		style: {
+			'--dom-toggle-height': '1.25rem',
+			'--dom-toggle-width': '2.25rem',
+			'--dom-toggle-thumb-size': '1rem',
+			'--dom-toggle-thumb-offset': '1rem',
+		},
+	},
+	md: {
+		wrapper: 'gap-3',
+		label: 'text-sm',
+		description: 'text-xs',
+		style: {
+			'--dom-toggle-height': '1.5rem',
+			'--dom-toggle-width': '2.75rem',
+			'--dom-toggle-thumb-size': '1.25rem',
+			'--dom-toggle-thumb-offset': '1.25rem',
+		},
+	},
+	lg: {
+		wrapper: 'gap-3.5',
+		label: 'text-base',
+		description: 'text-sm',
+		style: {
+			'--dom-toggle-height': '1.75rem',
+			'--dom-toggle-width': '3.25rem',
+			'--dom-toggle-thumb-size': '1.5rem',
+			'--dom-toggle-thumb-offset': '1.5rem',
+		},
+	},
+}[props.size] || {
+	wrapper: 'gap-3',
+	label: 'text-sm',
+	description: 'text-xs',
+	style: {},
+}));
+const wrapperClasses = computed(() => [
+	'inline-flex items-center',
+	sizeConfig.value.wrapper,
+]);
+const labelClasses = computed(() => [
+	sizeConfig.value.label,
+	'text-canvas-fg',
+]);
+const descriptionClasses = computed(() => [
+	sizeConfig.value.description,
+	'text-muted-fg',
+]);
+const errorClasses = computed(() => [
+	sizeConfig.value.description,
+	'text-destructive',
+]);
+
+onMounted(async () => {
+	await import('../../lib/headless/toggle.js');
+	syncToggleFromValue();
+	root.value?.addEventListener('dom:change', (event) => field.onInput(Boolean(event.detail.checked)));
+});
+watch(field.value, syncToggleFromValue);
+
+/**
+ * Keep the underlying headless toggle state aligned with the Vue field value.
+ *
+ * @returns {void}
+ */
+function syncToggleFromValue() {
+	if (root.value && root.value.checked !== Boolean(field.value.value)) {
+		root.value.checked = Boolean(field.value.value);
+	}
+}
+
+/**
+ * Toggle the switch when the visible text label is clicked.
+ *
+ * @returns {void}
+ */
+function toggleFromLabel() {
+	if (field.disabled.value || field.readOnly.value) return;
+	root.value?.focus?.();
+	root.value?.toggle?.();
+}
+</script>
+
+<template>
+	<div v-if="field.visible.value" :class="wrapperClasses">
+		<input
+			v-if="field.htmlName.value"
+			type="hidden"
+			:name="field.htmlName.value"
+			:value="field.value.value ? 'true' : 'false'"
+		/>
+		<dom-toggle
+			ref="root"
+			:id="field.id.value"
+			:checked="Boolean(field.value.value) || null"
+			:disabled="field.disabled.value || field.readOnly.value || null"
+			:aria-label="!labelId ? label || undefined : undefined"
+			:aria-labelledby="labelId || undefined"
+			:aria-describedby="field.describedBy.value || undefined"
+			:aria-invalid="field.invalid.value || undefined"
+			:aria-errormessage="field.errorId.value || undefined"
+			:data-invalid="field.invalid.value ? '' : undefined"
+			:style="sizeConfig.style"
+			@focus="field.onFocus"
+			@blur="field.onBlur"
+		/>
+		<span
+			v-if="chrome !== 'none' && (label || description || field.errors.value.length)"
+			class="grid gap-0.5"
+			:class="field.disabled.value ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
+			@click="toggleFromLabel"
+		>
+			<span v-if="label" :id="labelId" :class="labelClasses">{{ label }}</span>
+			<span v-if="description" :id="field.descriptionId.value" :class="descriptionClasses">{{ description }}</span>
+			<span v-if="field.errors.value.length" :id="field.errorId.value" :class="errorClasses">{{ field.errors.value[0].message || field.errors.value[0] }}</span>
+		</span>
+	</div>
+</template>

package/src/pages/forms/toggle-button/DomToggleButton.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from 'vue';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Toggle button',
+		tag: '<DomToggleButton>',
+		description: 'A pressable form button for boolean choices, using aria-pressed and v-model.',
+		slots: [{ name: '(default)', description: 'Button label or custom inline content.' }],
+		events: [{ name: 'update:modelValue', payload: '(pressed: boolean)', description: 'Emitted when pressed changes.' }],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: Boolean,
+		default: false,
+		_edit: { group: 'Control props', description: 'Pressed state.' },
+	},
+	pressedLabel: {
+		type: String,
+		default: '',
+		_edit: { group: 'Control props', description: 'Optional button label shown while pressed.' },
+	},
+	unpressedLabel: {
+		type: String,
+		default: '',
+		_edit: { group: 'Control props', description: 'Optional button label shown while not pressed.' },
+	},
+	size: {
+		type: String,
+		default: 'md',
+		_edit: { group: 'Control props', options: ['sm', 'md', 'lg'], description: 'Button size.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-toggle-button' });
+
+const pressed = computed(() => Boolean(field.value.value));
+const displayLabel = computed(() => {
+	if (pressed.value && props.pressedLabel) return props.pressedLabel;
+	if (!pressed.value && props.unpressedLabel) return props.unpressedLabel;
+	if (!props.pressedLabel && !props.unpressedLabel) return props.label;
+	return pressed.value ? props.unpressedLabel : props.pressedLabel;
+});
+const sizeClass = computed(() => ({
+	sm: 'h-8 px-3 text-xs',
+	md: 'h-10 px-4 text-sm',
+	lg: 'h-11 px-5 text-base',
+}[props.size] || 'h-10 px-4 text-sm'));
+
+function toggle() {
+	if (field.disabled.value || field.readOnly.value) return;
+	field.onInput(!pressed.value);
+}
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<input
+			v-if="field.htmlName.value"
+			type="hidden"
+			:name="field.htmlName.value"
+			:value="pressed ? 'true' : 'false'"
+		/>
+		<button
+			:id="field.id.value"
+				type="button"
+				:aria-pressed="String(pressed)"
+				:aria-invalid="field.invalid.value || undefined"
+				:aria-describedby="field.describedBy.value || undefined"
+				:aria-errormessage="field.errorId.value || undefined"
+				:data-invalid="field.invalid.value ? '' : undefined"
+			:disabled="field.disabled.value || undefined"
+			class="skin-control inline-flex w-fit items-center justify-center gap-2 rounded-xl font-medium outline-none transition hover:brightness-[0.98] focus-visible:ring-2 focus-visible:ring-ring/50 active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-fg data-[invalid]:border-destructive data-[invalid]:ring-destructive/20"
+			:class="sizeClass"
+			@click="toggle"
+			@focus="field.onFocus"
+			@blur="field.onBlur"
+		>
+			<slot :pressed="pressed" :label="displayLabel">{{ displayLabel || 'Toggle' }}</slot>
+		</button>
+	</DomField>
+</template>