@getdom/studio 0.1.0

package/src/pages/forms/password-strength/DomPasswordStrength.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { computed, inject } from 'vue';
+import DomTooltip from '../../components/tooltip/DomTooltip.vue';
+import { formFieldProviderKey } from '../field/useField.js';
+import { passwordStrength } from './passwordStrength.js';
+
+defineOptions({
+	__doc: {
+		name: 'Password strength',
+		tag: '<DomPasswordStrength>',
+		description: 'A display-only password strength meter that can read a named DomForm field or a direct model value.',
+		icon: 'M4 18h3V9H4v9Zm6 0h3V6h-3v12Zm6 0h3V3h-3v15Z',
+		playground: {
+			initial: {
+				modelValue: 'violet-orbit-lantern-47!',
+			},
+		},
+	},
+});
+
+const props = defineProps({
+	modelValue: {
+		type: String,
+		default: '',
+		_edit: { description: 'Password value to assess when no form field name is provided.' },
+	},
+	name: {
+		type: String,
+		default: '',
+		_edit: { description: 'Named DomForm field whose current value should be assessed.' },
+	},
+	showCrackTime: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show the estimated time required to crack the password.' },
+	},
+	descriptionMode: {
+		type: String,
+		default: 'inline',
+		_edit: {
+			options: ['inline', 'tooltip'],
+			description: 'Show the strength description below the meter or in a tooltip.',
+		},
+	},
+	tooltipPlacement: {
+		type: String,
+		default: 'bottom',
+		_edit: {
+			options: ['top', 'bottom', 'left', 'right'],
+			description: 'Position of the strength description when descriptionMode is tooltip.',
+		},
+	},
+	visible: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show or hide the strength meter.' },
+	},
+});
+
+const form = inject(formFieldProviderKey, null);
+const strengthTones = ['', 'bg-destructive', 'bg-destructive', 'bg-warning', 'bg-warning', 'bg-success'];
+
+/**
+ * Resolves the password from a named form field or the direct component value.
+ *
+ * @returns {string} Current password value.
+ */
+function resolvedPassword() {
+	if (props.name && typeof form?.getValue === 'function') {
+		const formValue = form.getValue(props.name);
+		if (formValue !== undefined) return String(formValue ?? '');
+	}
+	return String(props.modelValue ?? '');
+}
+
+/**
+ * Builds the visible and accessible description for the current password strength.
+ *
+ * @returns {string} Password strength label with an optional crack-time estimate.
+ */
+function strengthDescription() {
+	if (!password.value) return 'Password strength not yet available';
+
+	const crackTime = props.showCrackTime && passwordInfo.value.crackTime
+		? ` (Time to crack: ${passwordInfo.value.crackTime})`
+		: '';
+
+	return `${passwordInfo.value.label} password${crackTime}`;
+}
+
+const password = computed(resolvedPassword);
+const passwordInfo = computed(() => passwordStrength(password.value));
+const description = computed(strengthDescription);
+</script>
+
+<template>
+	<div
+		v-if="visible"
+		class="dom-password-strength w-full"
+		:class="{ 'space-y-2': descriptionMode === 'inline' }"
+		role="status"
+		aria-live="polite"
+		:aria-label="description"
+	>
+		<component
+			:is="descriptionMode === 'tooltip' ? DomTooltip : 'div'"
+			v-bind="descriptionMode === 'tooltip' ? { text: description, placement: tooltipPlacement } : {}"
+			class="w-full"
+		>
+			<div
+				class="grid w-full grid-cols-5 gap-1.5"
+				:aria-hidden="descriptionMode === 'inline' ? 'true' : undefined"
+				:aria-label="descriptionMode === 'tooltip' ? description : undefined"
+				:tabindex="descriptionMode === 'tooltip' ? 0 : undefined"
+			>
+				<span
+					v-for="step in 5"
+					:key="step"
+					class="h-1.5 rounded-full transition"
+					:class="step <= passwordInfo.score ? strengthTones[passwordInfo.score] : 'bg-muted'"
+				></span>
+			</div>
+		</component>
+		<p v-if="descriptionMode === 'inline'" class="min-h-4 text-xs text-muted-fg">
+			{{ password ? description : '' }}
+		</p>
+	</div>
+</template>

package/src/pages/forms/password-strength/passwordStrength.js

@@ -0,0 +1,92 @@
+const SECONDS_PER_YEAR = 31557600;
+
+/**
+ * Formats an estimated cracking duration for human-readable feedback.
+ *
+ * @param {number} seconds Estimated cracking duration in seconds.
+ * @returns {string} Human-readable duration.
+ */
+function secondsToHuman(seconds) {
+	if (seconds < 1) return 'instantly';
+	if (seconds < 60) return `${Math.round(seconds)} seconds`;
+	if (seconds < 3600) return `${Math.round(seconds / 60)} minutes`;
+	if (seconds < 86400) return `${Math.round(seconds / 3600)} hours`;
+	if (seconds < SECONDS_PER_YEAR) return `${Math.round(seconds / 86400)} days`;
+	const years = seconds / SECONDS_PER_YEAR;
+	if (years < 1_000) return `${Math.round(years)} years`;
+	if (years < 1_000_000) return `${Math.round(years / 1_000)} thousand years`;
+	if (years < 1_000_000_000) return `${Math.round(years / 1_000_000)} million years`;
+	if (years < 1_000_000_000_000) return `${Math.round(years / 1_000_000_000)} billion years`;
+	return 'trillions of years';
+}
+
+/**
+ * Converts a cracking duration into the five-step strength scale.
+ *
+ * @param {number} seconds Estimated cracking duration in seconds.
+ * @returns {[number, string]} Strength score and label.
+ */
+function scoreFromCrackSeconds(seconds) {
+	if (seconds < SECONDS_PER_YEAR) return [1, 'Very weak'];
+	if (seconds < SECONDS_PER_YEAR * 1_000) return [2, 'Weak'];
+	if (seconds < SECONDS_PER_YEAR * 1_000_000) return [3, 'Okay'];
+	if (seconds < SECONDS_PER_YEAR * 1_000_000_000) return [4, 'Strong'];
+	return [5, 'Very strong'];
+}
+
+/**
+ * Estimates average offline cracking time from password entropy.
+ *
+ * @param {number} entropy Estimated password entropy in bits.
+ * @param {number} [guessesPerSecond=1000000000000] Assumed cracking rate.
+ * @returns {{ seconds: number, human: string }} Numeric and formatted estimates.
+ */
+function estimateCrackTime(entropy, guessesPerSecond = 1_000_000_000_000) {
+	const combinations = 2 ** entropy;
+	const averageSeconds = combinations / guessesPerSecond / 2;
+	return {
+		seconds: averageSeconds,
+		human: secondsToHuman(averageSeconds),
+	};
+}
+
+/**
+ * Estimates the strength and cracking time for a password.
+ *
+ * @param {string} password Password to assess.
+ * @returns {{ score: number, label: string, entropy: number, crackTime: string | null, crackSeconds?: number }} Strength details.
+ */
+export function passwordStrength(password) {
+	const value = password || '';
+	if (!value) {
+		return {
+			score: 0,
+			label: 'Empty',
+			entropy: 0,
+			crackTime: null,
+		};
+	}
+
+	const length = value.length;
+	let pool = 0;
+	if (/[a-z]/.test(value)) pool += 26;
+	if (/[A-Z]/.test(value)) pool += 26;
+	if (/\d/.test(value)) pool += 10;
+	if (/[^A-Za-z0-9]/.test(value)) pool += 33;
+
+	let entropy = Math.log2(pool || 1) * length;
+	if (/^(.)\1+$/.test(value)) entropy *= 0.1;
+	if (/123456|password|qwerty|letmein|admin|welcome/i.test(value)) entropy *= 0.3;
+	if (/(.)\1{2,}/.test(value)) entropy *= 0.8;
+	if (/^\d+$/.test(value)) entropy *= 0.5;
+
+	const crack = estimateCrackTime(entropy);
+	const [score, label] = scoreFromCrackSeconds(crack.seconds);
+	return {
+		score,
+		label,
+		entropy: Math.round(entropy),
+		crackTime: crack.human,
+		crackSeconds: crack.seconds,
+	};
+}

package/src/pages/forms/position-input/DomPositionInput.vue

@@ -0,0 +1,83 @@
+<script setup>
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Position input',
+		tag: '<DomPositionInput>',
+		description: 'A compact visual picker for popover and floating element positions.',
+		events: [{ name: 'update:modelValue', payload: 'string', description: 'Fired when the selected position changes.' }],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: String,
+		default: 'bottom-start',
+		_edit: { group: 'Control props', description: 'Selected position token.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-position-input' });
+
+const positions = [
+	{ value: 'start-bottom', label: 'Start bottom', class: 'left-0 top-3/4 -translate-x-1/2 -translate-y-1/2' },
+	{ value: 'start', label: 'Start', class: 'left-0 top-1/2 -translate-x-1/2 -translate-y-1/2' },
+	{ value: 'start-top', label: 'Start top', class: 'left-0 top-1/4 -translate-x-1/2 -translate-y-1/2' },
+	{ value: 'top-start', label: 'Top start', class: 'left-1/4 top-0 -translate-x-1/2 -translate-y-1/2' },
+	{ value: 'top', label: 'Top', class: 'left-1/2 top-0 -translate-x-1/2 -translate-y-1/2' },
+	{ value: 'top-end', label: 'Top end', class: 'left-3/4 top-0 -translate-x-1/2 -translate-y-1/2' },
+	{ value: 'end-top', label: 'End top', class: 'right-0 top-1/4 translate-x-1/2 -translate-y-1/2' },
+	{ value: 'end', label: 'End', class: 'right-0 top-1/2 translate-x-1/2 -translate-y-1/2' },
+	{ value: 'end-bottom', label: 'End bottom', class: 'right-0 top-3/4 translate-x-1/2 -translate-y-1/2' },
+	{ value: 'bottom-end', label: 'Bottom end', class: 'left-3/4 bottom-0 -translate-x-1/2 translate-y-1/2' },
+	{ value: 'bottom', label: 'Bottom', class: 'left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2' },
+	{ value: 'bottom-start', label: 'Bottom start', class: 'left-1/4 bottom-0 -translate-x-1/2 translate-y-1/2' },
+];
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<input
+			v-if="field.htmlName.value"
+			type="hidden"
+			:name="field.htmlName.value"
+			:value="field.value.value"
+		/>
+		<div
+			role="group"
+			:aria-label="label || undefined"
+			:aria-describedby="field.describedBy.value || undefined"
+			class="relative h-32 rounded-xl border border-border bg-secondary/30 p-3"
+		>
+			<div class="absolute left-1/2 top-1/2 size-24 -translate-x-1/2 -translate-y-1/2">
+				<div class="absolute inset-0 rounded-lg border border-border bg-canvas shadow-sm"></div>
+				<button
+					v-for="position in positions"
+					:key="position.value"
+					type="button"
+					class="absolute grid size-5 place-items-center rounded-full border text-[0px] transition focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+					:class="[
+						position.class,
+						field.value.value === position.value
+							? 'border-primary bg-primary text-primary-fg shadow-sm'
+							: 'border-border bg-canvas text-muted-fg hover:border-ring hover:bg-accent',
+					]"
+					:title="position.label"
+					:aria-label="position.label"
+					:aria-pressed="field.value.value === position.value"
+					:disabled="field.disabled.value || undefined"
+					@click="field.onInput(position.value)"
+					@focus="field.onFocus"
+					@blur="field.onBlur"
+				>
+					<span class="size-1.5 rounded-full bg-current"></span>
+				</button>
+			</div>
+		</div>
+		<p class="font-mono text-xs text-muted-fg">{{ field.value.value }}</p>
+	</DomField>
+</template>

package/src/pages/forms/radio-group/DomRadioGroup.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Radio group',
+		tag: '<DomRadioGroup>',
+		description: 'A single-select radio group with roving focus and full styling control.',
+		slots: [{ name: 'option', payload: '{ option, index }', description: 'Custom option markup.' }],
+		events: [{ name: 'update:modelValue', payload: '(value: string)', description: 'Emitted when selection changes.' }],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: [String, Number],
+		default: '',
+		_edit: { group: 'Control props', description: 'Selected value.' },
+	},
+	options: {
+		type: Array,
+		required: true,
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Radio options.',
+			props: {
+				compact: true,
+				addLabel: '+ Add option',
+				schema: [
+					{ key: 'label', label: 'Label', placeholder: 'Option label', default: (index) => `Option ${index + 1}` },
+					{ key: 'value', label: 'Value', placeholder: 'option-value', default: (index) => `option-${index + 1}` },
+				],
+			},
+		},
+	},
+	orientation: {
+		type: String,
+		default: 'vertical',
+		_edit: { group: 'Control props', options: ['vertical', 'horizontal'], description: 'Arrow key direction.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const root = ref(null);
+const field = useField(props, emit, { idPrefix: 'dom-radio-group' });
+
+onMounted(async () => {
+	await import('../../lib/headless/radio-group.js');
+	root.value?.addEventListener('dom:change', (event) => field.onInput(event.detail.value));
+});
+
+watch(field.value, (value) => {
+	if (root.value && String(root.value.value) !== String(value ?? '')) root.value.value = value ?? '';
+});
+
+const labelOf = (option) => (option && typeof option === 'object' ? (option.label ?? option.value) : option);
+const valueOf = (option) => String(option && typeof option === 'object' ? (option.value ?? option.label) : option);
+const selected = (option) => String(field.value.value ?? '') === valueOf(option);
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<input
+			v-if="field.htmlName.value"
+			type="hidden"
+			:name="field.htmlName.value"
+			:value="field.value.value"
+		/>
+		<dom-radio-group
+			ref="root"
+			:id="field.id.value"
+				:value="field.value.value ?? ''"
+				:orientation="orientation"
+				:aria-label="label || undefined"
+				:aria-describedby="field.describedBy.value || undefined"
+				:aria-invalid="field.invalid.value || undefined"
+				:aria-errormessage="field.errorId.value || undefined"
+				class="grid gap-2 data-[invalid]:rounded-2xl data-[invalid]:ring-1 data-[invalid]:ring-destructive"
+			:class="orientation === 'horizontal' && 'grid-flow-col justify-start'"
+			:data-invalid="field.invalid.value ? '' : undefined"
+		>
+			<button
+				v-for="(option, index) in options"
+				:key="valueOf(option) || index"
+				role="radio"
+				:data-value="valueOf(option)"
+				:disabled="field.disabled.value || undefined"
+				class="inline-flex items-center gap-3 rounded-xl border border-border bg-canvas px-3 py-2 text-left text-sm text-canvas-fg outline-none transition hover:bg-secondary focus:ring-2 focus:ring-ring/40 aria-checked:border-primary aria-checked:bg-secondary disabled:cursor-not-allowed disabled:opacity-50"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			>
+				<span class="grid size-4 place-items-center rounded-full border border-border" aria-hidden="true">
+					<span class="size-2 rounded-full bg-primary" :class="selected(option) ? 'opacity-100' : 'opacity-0'"></span>
+				</span>
+				<slot name="option" :option="option" :index="index">{{ labelOf(option) }}</slot>
+			</button>
+		</dom-radio-group>
+	</DomField>
+</template>