picocrank 1.32.0 → 1.34.0

package/vue/components/FieldValue.vue

@@ -0,0 +1,222 @@
+<template>
+	<div
+		class="field-value"
+		:class="{
+			'is-inline': hasInlineEdit,
+			'is-outline': hasOutlineEdit,
+			'is-readonly': readOnly,
+		}"
+	>
+		<div
+			v-if="editing"
+			ref="editRoot"
+			class="field-value-edit"
+			@click.stop
+		>
+			<slot
+				name="edit"
+				:value="draft"
+				:update="updateDraft"
+				:commit="commit"
+				:cancel="cancel"
+			/>
+		</div>
+		<div
+			v-else
+			class="field-value-display"
+			:class="{ editable: hasInlineEdit }"
+			@click="startEdit"
+		>
+			<span class="field-value-content">
+				<slot>{{ displayText }}</slot>
+			</span>
+			<HugeiconsIcon
+				v-if="hasInlineEdit"
+				:icon="Edit03Icon"
+				class="field-value-icon"
+				width="0.9em"
+				height="0.9em"
+				aria-hidden="true"
+			/>
+			<router-link
+				v-else-if="to"
+				:to="to"
+				class="field-value-icon field-value-outline"
+				:title="editLabel"
+				:aria-label="editLabel"
+				@click.stop
+			>
+				<HugeiconsIcon
+					:icon="FileEditIcon"
+					width="0.9em"
+					height="0.9em"
+					aria-hidden="true"
+				/>
+			</router-link>
+			<a
+				v-else-if="href"
+				:href="href"
+				class="field-value-icon field-value-outline"
+				:title="editLabel"
+				:aria-label="editLabel"
+				@click.stop
+			>
+				<HugeiconsIcon
+					:icon="FileEditIcon"
+					width="0.9em"
+					height="0.9em"
+					aria-hidden="true"
+				/>
+			</a>
+			<span
+				v-else
+				class="field-value-icon field-value-readonly"
+				title="Read only"
+				aria-label="Read only"
+			>
+				<HugeiconsIcon
+					:icon="SquareLock01Icon"
+					width="0.9em"
+					height="0.9em"
+					aria-hidden="true"
+				/>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { computed, nextTick, ref, useSlots } from 'vue'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Edit03Icon, FileEditIcon, SquareLock01Icon } from '@hugeicons/core-free-icons'
+
+const props = defineProps({
+	modelValue: {
+		type: [String, Number, Boolean],
+		default: '',
+	},
+	/**
+	 * Route for outline edit. Shown when no edit template is provided.
+	 */
+	to: {
+		type: [String, Object],
+		default: null,
+	},
+	/**
+	 * URL for outline edit when a router location is not used.
+	 */
+	href: {
+		type: String,
+		default: '',
+	},
+	editLabel: {
+		type: String,
+		default: 'Edit',
+	},
+})
+
+const emit = defineEmits(['update:modelValue', 'commit', 'cancel'])
+
+const slots = useSlots()
+const editing = ref(false)
+const draft = ref('')
+const editRoot = ref(null)
+
+const hasInlineEdit = computed(() => typeof slots.edit === 'function')
+const hasOutlineEdit = computed(() => !hasInlineEdit.value && Boolean(props.to || props.href))
+const readOnly = computed(() => !hasInlineEdit.value && !hasOutlineEdit.value)
+const displayText = computed(() => (props.modelValue == null ? '' : String(props.modelValue)))
+
+function startEdit() {
+	if (!hasInlineEdit.value || editing.value) {
+		return
+	}
+	draft.value = displayText.value
+	editing.value = true
+	nextTick(() => {
+		const control = editRoot.value?.querySelector('input, select, textarea')
+		if (!control) {
+			return
+		}
+		control.focus()
+		if (control instanceof HTMLInputElement && control.type !== 'checkbox') {
+			control.select()
+		}
+	})
+}
+
+function updateDraft(value) {
+	draft.value = value == null ? '' : String(value)
+}
+
+function commit() {
+	if (!editing.value) {
+		return
+	}
+	emit('update:modelValue', draft.value)
+	emit('commit', draft.value)
+	editing.value = false
+}
+
+function cancel() {
+	if (!editing.value) {
+		return
+	}
+	editing.value = false
+	draft.value = displayText.value
+	emit('cancel')
+}
+</script>
+
+<style scoped>
+.field-value-display,
+.field-value-edit {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	min-height: 1.5em;
+}
+
+.field-value-display.editable {
+	cursor: pointer;
+	padding: 0.25rem;
+	border-radius: 3px;
+}
+
+.field-value-display.editable:hover {
+	background-color: var(--hover-background-color, #f8f9fa);
+}
+
+.field-value-content {
+	min-width: 0;
+}
+
+.field-value-icon {
+	flex-shrink: 0;
+	color: var(--muted-text-color, #8a8a8a);
+	opacity: 0.55;
+}
+
+.field-value-outline,
+.field-value-readonly {
+	display: inline-flex;
+	line-height: 0;
+}
+
+.field-value-outline {
+	text-decoration: none;
+}
+
+.field-value-display.editable:hover .field-value-icon,
+.field-value-outline:hover {
+	opacity: 0.9;
+}
+
+.field-value-edit :deep(input),
+.field-value-edit :deep(select),
+.field-value-edit :deep(textarea) {
+	width: 100%;
+	max-width: 28rem;
+	box-sizing: border-box;
+}
+</style>

package/vue/components/FormField.spec.js

@@ -124,6 +124,7 @@ describe('FormField', () => {
 
 			const errorBlock = wrapper.find('.form-field-error')
 			expect(errorBlock.exists()).toBe(true)
+			expect(errorBlock.classes()).toContain('attached-below')
 			expect(errorBlock.attributes('role')).toBe('alert')
 			expect(errorBlock.text()).toContain('This field is required.')
 		})

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>