picocrank 1.33.0 → 1.34.0

package/vue/components/FormField.vue

@@ -20,16 +20,19 @@
 				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 class="form-field-value-stack">
+			<slot />
+			<NotificationBlock
+				v-if="fieldError"
+				:id="errorId"
+				class="form-field-error"
+				type="bad"
+				label="Error"
+				:message="fieldError"
+				attached-below
+				role="alert"
+			/>
+		</div>
 		<div v-if="!descriptionAbove && hasFieldMeta" class="form-field-meta">
 			<p v-if="description" class="subtle form-field-description">{{ description }}</p>
 			<a
@@ -303,10 +306,35 @@ label.disabled,
 	align-self: flex-start;
 }
 
+.form-field-value-stack {
+	display: flex;
+	flex-direction: column;
+	gap: 0;
+	width: 100%;
+	min-width: 0;
+}
+
 .form-field-control :deep(.form-field-error) {
 	font-size: 0.9em;
 }
 
+.form-field-value-stack:has(> :is(input, textarea, select).field-invalid + :deep(.form-field-error.attached-below)) {
+	box-shadow: var(--field-invalid-outline);
+	border-radius: 0.4em;
+	overflow: hidden;
+}
+
+.form-field-value-stack:has(> :is(input, textarea, select).field-invalid + :deep(.form-field-error.attached-below)) > :is(input, textarea, select).field-invalid {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	box-shadow: none;
+}
+
+.form-field-value-stack:has(> :is(input, textarea, select).field-invalid + :deep(.form-field-error.attached-below)) :deep(.form-field-error.attached-below) {
+	margin: 0;
+	box-shadow: none;
+}
+
 .form-field-required {
 	color: var(--form-field-required-fg);
 	margin-left: 0.15em;

package/vue/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-	<header :class="{ fixed }">
+	<header ref="headerRoot" :class="{ fixed }">
 		<div
 			:id = "showSidebarChrome ? 'sidebar-button' : null"
 			:class="['image-and-title', 'flex-row', { 'disabled-branding': !showBranding, 'logo-home-link': !showSidebarChrome && showBranding }]"
@@ -71,7 +71,7 @@
 </template>
 
 <script setup>
-	import { computed, ref } from "vue";
+	import { computed, nextTick, ref, watch } from "vue";
 	import { RouterLink } from "vue-router";
 	import { HugeiconsIcon } from "@hugeicons/vue";
 	import { BulbIcon, Menu01Icon, Moon02Icon, Sun01Icon, UserIcon } from "@hugeicons/core-free-icons";
@@ -80,6 +80,7 @@
 	import TopBar from "./TopBar.vue";
 	import Sidebar from "./Sidebar.vue";
 	import { useTheme } from '../composables/useTheme.js';
+	import { useHeaderTopBarFit } from '../composables/useHeaderTopBarFit.js';
 	import { useResponsiveNav } from '../composables/useResponsiveNav.js';
 
 	const { theme, nextTheme, toggleTheme } = useTheme();
@@ -161,10 +162,31 @@
 	});
 
 	const fallbackSidebar = ref(null);
+	const headerRoot = ref(null);
+	const topBarSpaceLimited = ref(false);
 
 	const { showTopBar, showSidebarChrome, needsFallbackSidebar, isMobile } = useResponsiveNav(
 		() => props.sidebarEnabled,
 		() => props.topBarEnabled,
+		topBarSpaceLimited,
+	);
+
+	const topBarMeasureActive = computed(
+		() => props.topBarEnabled && !isMobile.value,
+	);
+
+	const { remeasure: remeasureTopBar } = useHeaderTopBarFit(
+		headerRoot,
+		topBarMeasureActive,
+		topBarSpaceLimited,
+	);
+
+	watch(showTopBar, () => nextTick(() => remeasureTopBar()));
+
+	watch(
+		() => props.topBarNavigation,
+		() => remeasureTopBar(),
+		{ deep: true },
 	);
 
 	const showBreadcrumbsBar = computed(

package/vue/components/NotificationBlock.vue

@@ -89,6 +89,14 @@ const props = defineProps({
 		type: String,
 		default: 'status',
 	},
+	/**
+	 * Nest the block directly under a control (flat top edge, shared width).
+	 * Pair with an input, select, or textarea immediately above.
+	 */
+	attachedBelow: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const emit = defineEmits(['click', 'dismiss'])
@@ -108,6 +116,7 @@ const hasLink = computed(() => Boolean(
 const rootClasses = computed(() => ({
 	notification: true,
 	[props.type]: true,
+	'attached-below': props.attachedBelow,
 	clickable: props.clickable || props.dismissible,
 }))
 
@@ -118,3 +127,19 @@ function handleClick(event) {
 	}
 }
 </script>
+
+<style scoped>
+.notification.attached-below {
+	box-sizing: border-box;
+	width: 100%;
+	margin: 0;
+	border-top: none;
+	border-radius: 0 0 0.4em 0.4em;
+}
+
+.notification.attached-below.bad,
+.notification.attached-below.error,
+.notification.attached-below.critical {
+	border-color: var(--karma-bad-border);
+}
+</style>

package/vue/components/ReorderList.spec.js

@@ -0,0 +1,318 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick, ref } from 'vue'
+import ReorderList from './ReorderList.vue'
+import ReorderListExample from '../examples/ReorderListExample.vue'
+
+const globalStubs = {
+	HugeiconsIcon: true,
+}
+
+const rows = [
+	{ id: 'a', title: 'Alpha' },
+	{ id: 'b', title: 'Beta' },
+	{ id: 'c', title: 'Gamma' },
+]
+
+function mountList(props = {}, slots = {}) {
+	const wrapper = mount(ReorderList, {
+		props: {
+			modelValue: rows.map((row) => ({ ...row })),
+			ariaLabel: 'Queue',
+			...props,
+		},
+		slots: {
+			item: ({ item }) => h('span', { class: 'row-label' }, item.title),
+			...slots,
+		},
+		global: { stubs: globalStubs },
+	})
+	return wrapper
+}
+
+function dataTransfer() {
+	return {
+		effectAllowed: '',
+		dropEffect: '',
+		setData: () => {},
+	}
+}
+
+describe('ReorderList', () => {
+	it('renders row slot content in model order', () => {
+		const wrapper = mountList()
+		const labels = wrapper.findAll('.row-label').map((node) => node.text())
+
+		expect(labels).toEqual(['Alpha', 'Beta', 'Gamma'])
+		expect(wrapper.attributes('aria-label')).toBe('Queue')
+	})
+
+	it('moves a row down and up with the buttons', async () => {
+		const wrapper = mountList({ showMoveButtons: true })
+
+		await wrapper.find('[aria-label="Move Alpha down"]').trigger('click')
+		expect(wrapper.emitted('update:modelValue')[0][0].map((item) => item.id)).toEqual(['b', 'a', 'c'])
+		expect(wrapper.emitted('reorder')[0][0]).toMatchObject({ fromIndex: 0, toIndex: 1 })
+
+		await wrapper.setProps({ modelValue: wrapper.emitted('update:modelValue')[0][0] })
+		await wrapper.find('[aria-label="Move Alpha up"]').trigger('click')
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted[emitted.length - 1][0].map((item) => item.id)).toEqual(['a', 'b', 'c'])
+	})
+
+	it('disables moves past the ends of the list', () => {
+		const wrapper = mountList({ showMoveButtons: true })
+
+		expect(wrapper.find('[aria-label="Move Alpha up"]').attributes('disabled')).toBeDefined()
+		expect(wrapper.find('[aria-label="Move Gamma down"]').attributes('disabled')).toBeDefined()
+		expect(wrapper.find('[aria-label="Move Beta up"]').attributes('disabled')).toBeUndefined()
+	})
+
+	function layoutRows(wrapper) {
+		const list = wrapper.element?.classList?.contains('reorder-list')
+			? wrapper
+			: wrapper.get('.reorder-list')
+		const rowEls = [...list.element.querySelectorAll(':scope > li.reorder-list-row')]
+		rowEls.forEach((rowEl, index) => {
+			const top = index * 50
+			rowEl.getBoundingClientRect = () => ({
+				top,
+				bottom: top + 40,
+				height: 40,
+				left: 0,
+				right: 200,
+				width: 200,
+				x: 0,
+				y: top,
+				toJSON() { return {} },
+			})
+		})
+		list.element.getBoundingClientRect = () => ({
+			top: 0,
+			bottom: rowEls.length * 50,
+			height: rowEls.length * 50,
+			left: 0,
+			right: 200,
+			width: 200,
+			x: 0,
+			y: 0,
+			toJSON() { return {} },
+		})
+		return list
+	}
+
+	it('shows a separator in the gap between rows and inserts there', async () => {
+		const wrapper = mountList()
+		const list = layoutRows(wrapper)
+		const handles = wrapper.findAll('.reorder-list-handle')
+
+		await handles[0].trigger('dragstart', { dataTransfer: dataTransfer() })
+		expect(wrapper.find('.reorder-list-row').classes()).toContain('is-dragging')
+
+		// Lower half of Beta: the gap between Beta and Gamma.
+		await list.trigger('dragover', { clientY: 80, dataTransfer: dataTransfer() })
+		const separator = wrapper.get('.reorder-list-separator')
+		expect(separator.attributes('data-drop-gap')).toBe('2')
+		expect(wrapper.find('.is-drag-over').exists()).toBe(false)
+
+		await list.trigger('drop', { clientY: 80 })
+		expect(wrapper.emitted('update:modelValue')[0][0].map((item) => item.id)).toEqual(['b', 'a', 'c'])
+		expect(wrapper.emitted('reorder')[0][0]).toMatchObject({ fromIndex: 0, toIndex: 1 })
+		expect(wrapper.find('.reorder-list-separator').exists()).toBe(false)
+		expect(wrapper.find('.reorder-list-row.is-dragging').exists()).toBe(false)
+	})
+
+	it('places the separator after the last row when the pointer is below it', async () => {
+		const wrapper = mountList()
+		const list = layoutRows(wrapper)
+
+		await wrapper.findAll('.reorder-list-handle')[0].trigger('dragstart', { dataTransfer: dataTransfer() })
+		await list.trigger('dragover', { clientY: 140, dataTransfer: dataTransfer() })
+
+		expect(wrapper.get('.reorder-list-separator').attributes('data-drop-gap')).toBe('3')
+		await list.trigger('drop', { clientY: 140 })
+		expect(wrapper.emitted('update:modelValue')[0][0].map((item) => item.id)).toEqual(['b', 'c', 'a'])
+	})
+
+	it('places the separator before the first row when dragging upward', async () => {
+		const wrapper = mountList()
+		const list = layoutRows(wrapper)
+
+		await wrapper.findAll('.reorder-list-handle')[2].trigger('dragstart', { dataTransfer: dataTransfer() })
+		await list.trigger('dragover', { clientY: 10, dataTransfer: dataTransfer() })
+
+		expect(wrapper.get('.reorder-list-separator').attributes('data-drop-gap')).toBe('0')
+		await list.trigger('drop', { clientY: 10 })
+		expect(wrapper.emitted('update:modelValue')[0][0].map((item) => item.id)).toEqual(['c', 'a', 'b'])
+	})
+
+	it('hides the separator when the gap would not move the row', async () => {
+		const wrapper = mountList()
+		const list = layoutRows(wrapper)
+
+		await wrapper.findAll('.reorder-list-handle')[0].trigger('dragstart', { dataTransfer: dataTransfer() })
+		await list.trigger('dragover', { clientY: 30, dataTransfer: dataTransfer() })
+
+		expect(wrapper.find('.reorder-list-separator').exists()).toBe(false)
+		await list.trigger('drop', { clientY: 30 })
+		expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+	})
+
+	it('does not reorder when disabled', async () => {
+		const wrapper = mountList({ disabled: true })
+
+		await wrapper.findAll('.reorder-list-handle')[0].trigger('dragstart', { dataTransfer: dataTransfer() })
+		await wrapper.findAll('.reorder-list-row')[2].trigger('drop')
+
+		expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+		expect(wrapper.classes()).toContain('is-disabled')
+	})
+
+	it('moves with the arrow keys when move buttons are hidden', async () => {
+		const wrapper = mountList()
+		const handle = wrapper.findAll('.reorder-list-handle')[0]
+
+		expect(handle.attributes('tabindex')).toBe('0')
+		await handle.trigger('keydown', { key: 'ArrowDown' })
+		await nextTick()
+
+		expect(wrapper.emitted('update:modelValue')[0][0].map((item) => item.id)).toEqual(['b', 'a', 'c'])
+	})
+
+	it('renders the empty slot', () => {
+		const wrapper = mountList(
+			{ modelValue: [] },
+			{ empty: () => h('span', { class: 'empty' }, 'No rows') },
+		)
+
+		expect(wrapper.find('.empty').text()).toBe('No rows')
+		expect(wrapper.find('.reorder-list-row').exists()).toBe(false)
+	})
+
+	it('hides move buttons and drag handles independently', () => {
+		const buttonsOnly = mountList({ showMoveButtons: true, showDragHandles: false })
+		expect(buttonsOnly.find('.reorder-list-handle').exists()).toBe(false)
+		expect(buttonsOnly.find('.reorder-list-move').exists()).toBe(true)
+
+		const handlesOnly = mountList()
+		expect(handlesOnly.find('.reorder-list-move').exists()).toBe(false)
+		expect(handlesOnly.find('.reorder-list-handle').exists()).toBe(true)
+
+		const neither = mountList({ showDragHandles: false })
+		expect(neither.find('.reorder-list-controls').exists()).toBe(false)
+	})
+
+	it('drags from the whole row when dragWholeRow is enabled', async () => {
+		const wrapper = mountList({ dragWholeRow: true, showDragHandles: true })
+		const list = layoutRows(wrapper)
+
+		expect(wrapper.find('.reorder-list-handle').exists()).toBe(false)
+		expect(wrapper.find('.reorder-list-row.is-drag-whole-row').exists()).toBe(true)
+
+		await wrapper.findAll('.reorder-list-row')[0].trigger('dragstart', { dataTransfer: dataTransfer() })
+		await list.trigger('dragover', { clientY: 80, dataTransfer: dataTransfer() })
+		await list.trigger('drop', { clientY: 80 })
+
+		expect(wrapper.emitted('update:modelValue')[0][0].map((item) => item.id)).toEqual(['b', 'a', 'c'])
+	})
+
+	it('does not start a whole-row drag from move buttons', async () => {
+		const wrapper = mountList({ dragWholeRow: true, showMoveButtons: true })
+		await wrapper.find('[aria-label="Move Alpha down"]').trigger('dragstart', { dataTransfer: dataTransfer() })
+		expect(wrapper.find('.reorder-list-row.is-dragging').exists()).toBe(false)
+	})
+
+	it('does not show drop indicators on nested lists while dragging the parent', async () => {
+		const groups = ref([
+			{
+				id: 'g1',
+				title: 'Group 1',
+				children: [{ id: 'c1', label: 'Step 1' }, { id: 'c2', label: 'Step 2' }],
+			},
+			{
+				id: 'g2',
+				title: 'Group 2',
+				children: [{ id: 'c3', label: 'Step 3' }],
+			},
+		])
+		const wrapper = mount({
+			components: { ReorderList },
+			setup() {
+				return { groups }
+			},
+			template: `
+				<ReorderList v-model="groups" item-key="id" aria-label="Outer">
+					<template #item="{ item }">
+						<div class="nested-slot">
+							<strong>{{ item.title }}</strong>
+							<ReorderList
+								v-model="item.children"
+								item-key="id"
+								aria-label="Inner steps"
+							/>
+						</div>
+					</template>
+				</ReorderList>
+			`,
+			global: { stubs: globalStubs },
+		})
+
+		const lists = wrapper.findAll('.reorder-list')
+		const outer = lists[0]
+		const innerLists = lists.slice(1)
+
+		layoutRows(outer)
+		await outer.find('.reorder-list-handle').trigger('dragstart', { dataTransfer: dataTransfer() })
+		await innerLists[0].trigger('dragover', { clientY: 120, dataTransfer: dataTransfer() })
+
+		expect(innerLists[0].find('.reorder-list-separator').exists()).toBe(false)
+		expect(innerLists[1].find('.reorder-list-separator').exists()).toBe(false)
+	})
+
+	it('uses a custom item key function', async () => {
+		const wrapper = mountList({
+			modelValue: [{ slug: 'one' }, { slug: 'two' }],
+			itemKey: (item) => item.slug,
+			itemLabel: (item) => item.slug,
+			showMoveButtons: true,
+		}, {
+			item: ({ item }) => h('span', { class: 'row-label' }, item.slug),
+		})
+
+		await wrapper.find('[aria-label="Move one down"]').trigger('click')
+		expect(wrapper.emitted('update:modelValue')[0][0].map((item) => item.slug)).toEqual(['two', 'one'])
+	})
+})
+
+describe('ReorderList example', () => {
+	it('toggles move buttons and drag handles from the section toolbar', async () => {
+		const wrapper = mount(ReorderListExample, {
+			global: { stubs: globalStubs },
+		})
+
+		const checklist = wrapper.findAll('section').find((section) => (
+			section.find('.reorder-example-toggle').exists()
+		))
+		const moveButtons = checklist.get('input[type="checkbox"]')
+		const dragHandles = checklist.findAll('input[type="checkbox"]')[1]
+
+		expect(checklist.find('.reorder-list-move').exists()).toBe(false)
+		expect(checklist.find('.reorder-list-handle').exists()).toBe(true)
+
+		await moveButtons.setValue(true)
+		expect(checklist.find('.reorder-list-move').exists()).toBe(true)
+		expect(checklist.find('.reorder-list-handle').exists()).toBe(true)
+
+		await dragHandles.setValue(false)
+		expect(checklist.find('.reorder-list-handle').exists()).toBe(false)
+		expect(checklist.find('.reorder-list-move').exists()).toBe(true)
+
+		await moveButtons.setValue(false)
+		expect(checklist.find('.reorder-list-controls').exists()).toBe(false)
+
+		await dragHandles.setValue(true)
+		await moveButtons.setValue(false)
+		expect(checklist.find('.reorder-list-move').exists()).toBe(false)
+		expect(checklist.find('.reorder-list-handle').exists()).toBe(true)
+	})
+})