picocrank 1.25.2 → 1.27.0

package/vue/components/FormField.vue

@@ -1,39 +1,51 @@
 <template>
-	<label v-if="!fake" :for="controlId" :class="{ disabled }">{{ label }}</label>
-	<span v-else class="fake-label" :class="{ disabled }">{{ label }}</span>
-	<div v-if="hasFieldMeta" class="form-field-control">
-		<template v-if="descriptionAbove">
-			<div v-if="description || docsUrl" class="form-field-meta">
-				<p v-if="description" class="subtle form-field-description">{{ description }}</p>
-				<a
-					v-if="docsUrl"
-					class="form-field-docs-link"
-					:href="docsUrl"
-					target="_blank"
-					rel="noopener noreferrer"
-				>{{ docsLinkTitle }}</a>
-			</div>
-			<slot />
-		</template>
-		<template v-else>
-			<slot />
-			<div v-if="description || docsUrl" class="form-field-meta">
-				<p v-if="description" class="subtle form-field-description">{{ description }}</p>
-				<a
-					v-if="docsUrl"
-					class="form-field-docs-link"
-					:href="docsUrl"
-					target="_blank"
-					rel="noopener noreferrer"
-				>{{ docsLinkTitle }}</a>
-			</div>
-		</template>
+	<label v-if="showLabel && !componentHasLabel" :for="controlId" :class="{ disabled }">
+		<span class="form-field-label-text">{{ label }}</span><span v-if="showRequiredLabel" class="form-field-required" aria-hidden="true">*</span>
+	</label>
+	<span v-else-if="showLabel" class="fake-label" :class="{ disabled }">
+		<span class="form-field-label-text">{{ label }}</span><span v-if="showRequiredLabel" class="form-field-required" aria-hidden="true">*</span>
+	</span>
+	<div
+		ref="fieldControlRef"
+		class="form-field-control"
+		:class="{ 'form-field-label-skip': labelSkip }"
+	>
+		<div v-if="descriptionAbove && hasFieldMeta" class="form-field-meta">
+			<p v-if="description" class="subtle form-field-description">{{ description }}</p>
+			<a
+				v-if="docsUrl"
+				class="form-field-docs-link"
+				:href="docsUrl"
+				target="_blank"
+				rel="noopener noreferrer"
+			>{{ docsLinkTitle }}</a>
+		</div>
+		<slot />
+		<NotificationBlock
+			v-if="fieldError"
+			:id="errorId"
+			class="form-field-error"
+			type="bad"
+			label="Error"
+			:message="fieldError"
+			role="alert"
+		/>
+		<div v-if="!descriptionAbove && hasFieldMeta" class="form-field-meta">
+			<p v-if="description" class="subtle form-field-description">{{ description }}</p>
+			<a
+				v-if="docsUrl"
+				class="form-field-docs-link"
+				:href="docsUrl"
+				target="_blank"
+				rel="noopener noreferrer"
+			>{{ docsLinkTitle }}</a>
+		</div>
 	</div>
-	<slot v-else />
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
+import NotificationBlock from './NotificationBlock.vue'
 
 const props = defineProps({
 	label: {
@@ -64,7 +76,15 @@ const props = defineProps({
 		type: String,
 		default: '',
 	},
-	fake: {
+	componentHasLabel: {
+		type: Boolean,
+		default: false,
+	},
+	labelSkip: {
+		type: Boolean,
+		default: false,
+	},
+	labelRequired: {
 		type: Boolean,
 		default: false,
 	},
@@ -72,11 +92,186 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	error: {
+		type: String,
+		default: '',
+	},
+	validate: {
+		type: Function,
+		default: null,
+	},
+	validateDeps: {
+		type: Array,
+		default: () => [],
+	},
 })
 
+const emit = defineEmits(['update:error'])
+
 const controlId = computed(() => props.htmlFor || props.for)
+const showLabel = computed(() => !props.labelSkip)
 const hasFieldMeta = computed(() => Boolean(props.description || props.docsUrl))
 const docsLinkTitle = computed(() => props.docsUrlTitle || props.docsUrl)
+const errorId = useId()
+const FIELD_INVALID_CLASS = 'field-invalid'
+const fieldControlRef = ref(null)
+const controlRequired = ref(false)
+let boundControl = null
+
+function onControlInput() {
+	if (props.error.trim()) {
+		emit('update:error', '')
+	}
+}
+
+function bindControlListeners() {
+	unbindControlListeners()
+	const element = getControlElement()
+	if (!element) {
+		return
+	}
+	element.addEventListener('input', onControlInput)
+	element.addEventListener('change', onControlInput)
+	boundControl = element
+}
+
+function unbindControlListeners() {
+	if (!boundControl) {
+		return
+	}
+	boundControl.removeEventListener('input', onControlInput)
+	boundControl.removeEventListener('change', onControlInput)
+	boundControl = null
+}
+
+const showRequiredLabel = computed(() => props.labelRequired || controlRequired.value)
+
+const fieldError = computed(() => {
+	// Re-run when parent passes reactive deps (e.g. v-model values).
+	void props.validateDeps
+
+	if (props.error.trim()) {
+		return props.error.trim()
+	}
+	if (typeof props.validate === 'function') {
+		const result = props.validate()
+		return typeof result === 'string' ? result.trim() : ''
+	}
+	return ''
+})
+
+function getControlElement() {
+	if (!controlId.value) {
+		return null
+	}
+	return document.getElementById(controlId.value)
+}
+
+function syncRequiredState() {
+	const linkedControl = getControlElement()
+	if (linkedControl) {
+		controlRequired.value = linkedControl.required === true
+		return
+	}
+
+	const container = fieldControlRef.value
+	controlRequired.value = Boolean(
+		container?.querySelector('input[required], select[required], textarea[required]'),
+	)
+}
+
+function syncControlState() {
+	syncNativeValidity()
+	syncRequiredState()
+}
+
+function syncNativeValidity() {
+	const element = getControlElement()
+	const canUseNativeValidity = Boolean(
+		controlId.value
+		&& !props.componentHasLabel
+		&& element
+		&& typeof element.setCustomValidity === 'function',
+	)
+
+	if (!canUseNativeValidity) {
+		clearNativeFieldState(element)
+		return
+	}
+
+	element.setCustomValidity(fieldError.value || '')
+	if (fieldError.value) {
+		element.setAttribute('aria-invalid', 'true')
+		element.classList.add(FIELD_INVALID_CLASS)
+		setErrorDescribedBy(element)
+	} else {
+		element.removeAttribute('aria-invalid')
+		element.classList.remove(FIELD_INVALID_CLASS)
+		removeErrorDescribedBy(element)
+	}
+}
+
+function clearNativeFieldState(element) {
+	if (!element) {
+		return
+	}
+	if (typeof element.setCustomValidity === 'function') {
+		element.setCustomValidity('')
+	}
+	element.removeAttribute('aria-invalid')
+	element.classList.remove(FIELD_INVALID_CLASS)
+	removeErrorDescribedBy(element)
+}
+
+function setErrorDescribedBy(element) {
+	const existing = element.getAttribute('aria-describedby')
+	const ids = existing ? existing.split(/\s+/).filter(Boolean) : []
+	if (!ids.includes(errorId)) {
+		ids.push(errorId)
+	}
+	element.setAttribute('aria-describedby', ids.join(' '))
+}
+
+function removeErrorDescribedBy(element) {
+	const existing = element.getAttribute('aria-describedby')
+	if (!existing) {
+		return
+	}
+	const ids = existing.split(/\s+/).filter((id) => id !== errorId)
+	if (ids.length > 0) {
+		element.setAttribute('aria-describedby', ids.join(' '))
+	} else {
+		element.removeAttribute('aria-describedby')
+	}
+}
+
+watch(
+	() => [fieldError.value, controlId.value, props.componentHasLabel],
+	() => {
+		nextTick(syncControlState)
+	},
+	{ flush: 'post' },
+)
+
+watch(
+	controlId,
+	() => {
+		nextTick(bindControlListeners)
+	},
+)
+
+onMounted(() => {
+	nextTick(() => {
+		syncControlState()
+		bindControlListeners()
+	})
+})
+
+onBeforeUnmount(() => {
+	const element = boundControl || getControlElement()
+	unbindControlListeners()
+	clearNativeFieldState(element)
+})
 </script>
 
 <style scoped>
@@ -107,4 +302,13 @@ label.disabled,
 	font-size: 0.9em;
 	align-self: flex-start;
 }
+
+.form-field-control :deep(.form-field-error) {
+	font-size: 0.9em;
+}
+
+.form-field-required {
+	color: var(--form-field-required-fg);
+	margin-left: 0.15em;
+}
 </style>

package/vue/components/FormLayout.spec.js

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FormLayout from './FormLayout.vue'
+
+describe('FormLayout', () => {
+	it('renders a form element with default slot content', () => {
+		const wrapper = mount(FormLayout, {
+			attachTo: document.body,
+			slots: {
+				default: '<input id="name" />',
+			},
+		})
+
+		expect(wrapper.element.tagName).toBe('FORM')
+		expect(wrapper.find('#name').exists()).toBe(true)
+	})
+
+	it('does not render an actions fieldset when the actions slot is empty', () => {
+		const wrapper = mount(FormLayout, {
+			slots: {
+				default: '<input id="name" />',
+			},
+		})
+
+		expect(wrapper.find('fieldset').exists()).toBe(false)
+	})
+
+	it('renders an actions fieldset when the actions slot is provided', () => {
+		const wrapper = mount(FormLayout, {
+			slots: {
+				default: '<input id="name" />',
+				actions: '<button type="submit">Save</button>',
+			},
+		})
+
+		const fieldset = wrapper.find('fieldset')
+		expect(fieldset.exists()).toBe(true)
+		expect(fieldset.find('button[type="submit"]').exists()).toBe(true)
+	})
+
+	it('forwards submit events from the native form', async () => {
+		const onSubmit = vi.fn((event) => event.preventDefault())
+		const wrapper = mount(FormLayout, {
+			attrs: {
+				onSubmit,
+			},
+			slots: {
+				default: '<button type="submit">Save</button>',
+			},
+		})
+
+		await wrapper.find('form').trigger('submit')
+
+		expect(onSubmit).toHaveBeenCalledTimes(1)
+	})
+})

package/vue/components/Header.vue

@@ -24,9 +24,9 @@
 			</button>
 		</div>
 
-		<TopBar v-if="showTopBar" :navigation="navigation" />
+		<Breadcrumbs v-if="showBreadcrumbsBar" />
 
-		<Breadcrumbs v-if="breadcrumbs" />
+		<TopBar v-if="showTopBar" :navigation="topBarNavigation" />
 
 		<div class = "fg1"></div>
 
@@ -138,15 +138,23 @@
 			type: Object,
 			default: null,
 		},
+		topBarNavigation: {
+			type: Object,
+			default: null,
+		},
 	});
 
 	const fallbackSidebar = ref(null);
 
-	const { showTopBar, showSidebarChrome, needsFallbackSidebar } = useResponsiveNav(
+	const { showTopBar, showSidebarChrome, needsFallbackSidebar, isMobile } = useResponsiveNav(
 		() => props.sidebarEnabled,
 		() => props.topBarEnabled,
 	);
 
+	const showBreadcrumbsBar = computed(
+		() => props.breadcrumbs && !isMobile.value,
+	);
+
 	function toggleNavSidebar() {
 		if (needsFallbackSidebar.value) {
 			fallbackSidebar.value?.toggle();
@@ -165,8 +173,15 @@
 </script>
 
 <style scoped>
+#sidebar-button {
+	flex-shrink: 0;
+	width: 14em;
+	min-width: 14em;
+}
+
 #sidebar-button.disabled-branding {
 	width: auto;
+	min-width: 0;
 }
 
 .logo-home-link {
@@ -194,6 +209,7 @@
 .header-actions {
 	align-self: stretch;
 	gap: 0.25rem;
+	flex-shrink: 0;
 }
 
 .theme-toggle {
@@ -205,7 +221,7 @@
 .header-actions :deep(button) {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-fg-color, var(--header-text-color, #fff));
+	color: var(--header-fg-color);
 	background-color: transparent;
 	align-self: stretch;
 	display: inline-flex;
@@ -227,7 +243,7 @@
 #sidebar-toggler-button {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-fg-color, var(--header-text-color, #fff));
+	color: var(--header-fg-color);
 	background-color: transparent;
 	align-self: stretch;
 	display: inline-flex;
@@ -260,7 +276,7 @@ header .search-trigger,
 header .search-trigger.neutral {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-fg-color, var(--header-text-color, #fff));
+	color: var(--header-fg-color);
 	background-color: transparent;
 	align-self: stretch;
 	height: 100%;