picocrank 1.26.0 → 1.27.0

package/vue/components/Login.vue

@@ -1,30 +1,50 @@
 <template>
-	<div class="login-container">
+	<div class="login-container" :class="{ 'local-only': localOnly }">
 		<Tabs :tabs="loginTabs" @tab-change="onTabChange">
 			<!-- Local Login Tab -->
 			<template #tab-local>
 				<div class="login-section">
-					<form @submit.prevent="handleLocalLogin" class="local-login-form">
-						<input
-							id="username"
-							type="text"
-							v-model="localLogin.username"
-							required
-							autocomplete="username"
-							placeholder="Username"
-						/>
-						<input
-							id="password"
-							type="password"
-							v-model="localLogin.password"
-							required
-							autocomplete="current-password"
-							placeholder="Password"
-						/>
+					<div
+						v-if="localLoginLoading"
+						class="local-login-loading"
+						role="status"
+						aria-live="polite"
+					>
+						<span class="local-login-spinner" aria-hidden="true" />
+						<p>{{ localLoginLoadingMessage }}</p>
+					</div>
+					<form v-else @submit.prevent="handleLocalLogin" class="local-login-form">
+						<FormField label="Username" for="username" label-skip v-model:error="usernameError">
+							<input
+								id="username"
+								type="text"
+								v-model="localLogin.username"
+								required
+								autocomplete="username"
+								placeholder="Username"
+								aria-label="Username"
+							/>
+						</FormField>
+						<FormField label="Password" for="password" label-skip v-model:error="passwordError">
+							<input
+								id="password"
+								type="password"
+								v-model="localLogin.password"
+								required
+								autocomplete="current-password"
+								placeholder="Password"
+								aria-label="Password"
+							/>
+						</FormField>
 						<button type="submit" class="good">Login</button>
-						<div v-if="localLoginError" class="error-message">
-							{{ localLoginError }}
-						</div>
+						<NotificationBlock
+							v-if="formError"
+							class="login-form-error"
+							type="bad"
+							label="Error"
+							:message="formError"
+							role="alert"
+						/>
 					</form>
 				</div>
 			</template>
@@ -70,6 +90,8 @@
 <script setup>
 import { ref, reactive, watch, computed, useSlots } from 'vue';
 import Tabs from './Tabs.vue';
+import FormField from './FormField.vue';
+import NotificationBlock from './NotificationBlock.vue';
 import { HugeiconsIcon } from '@hugeicons/vue';
 
 const props = defineProps({
@@ -95,6 +117,15 @@ const props = defineProps({
 	showDefaultTabs: {
 		type: Boolean,
 		default: true
+	},
+	// Username & password only — no OAuth or custom tabs; hides the tab bar
+	localOnly: {
+		type: Boolean,
+		default: false
+	},
+	loadingMessage: {
+		type: String,
+		default: 'Signing in…'
 	}
 });
 
@@ -119,8 +150,9 @@ const loginTabs = ref([]);
 function initializeTabs() {
 	const tabs = [];
 	
-	// Add default tabs if enabled
-	if (props.showDefaultTabs) {
+	if (props.localOnly) {
+		tabs.push({ id: 'local', label: props.tabLabels.local || 'Username & Password' });
+	} else if (props.showDefaultTabs) {
 		tabs.push(
 			{ id: 'local', label: props.tabLabels.local || 'Username & Password' },
 			{ id: 'oauth', label: props.tabLabels.oauth || 'OAuth2' }
@@ -128,7 +160,7 @@ function initializeTabs() {
 	}
 	
 	// Add custom tabs
-	if (props.customTabs && props.customTabs.length > 0) {
+	if (!props.localOnly && props.customTabs && props.customTabs.length > 0) {
 		tabs.push(...props.customTabs);
 	}
 	
@@ -139,7 +171,7 @@ function initializeTabs() {
 initializeTabs();
 
 // Watch for changes to customTabs or showDefaultTabs
-watch(() => [props.customTabs, props.showDefaultTabs], () => {
+watch(() => [props.customTabs, props.showDefaultTabs, props.localOnly], () => {
 	initializeTabs();
 }, { deep: true });
 
@@ -149,7 +181,26 @@ const localLogin = reactive({
 	password: ''
 });
 
-const localLoginError = ref('');
+const usernameError = ref('');
+const passwordError = ref('');
+const formError = ref('');
+const localLoginLoading = ref(false);
+const localLoginLoadingMessage = ref('');
+
+function clearLocalLoginErrors() {
+	usernameError.value = '';
+	passwordError.value = '';
+	formError.value = '';
+}
+
+watch(
+	() => [localLogin.username, localLogin.password],
+	() => {
+		if (formError.value) {
+			formError.value = '';
+		}
+	},
+);
 
 // OAuth providers - provided by parent component
 const oauthProviders = ref(props.oauthProviders);
@@ -163,9 +214,10 @@ watch(() => props.oauthProviders, (newProviders) => {
 
 // Handle local login
 function handleLocalLogin() {
-	localLoginError.value = '';
-	
-	// Emit event for parent component to handle
+	clearLocalLoginErrors();
+	localLoginLoading.value = true;
+	localLoginLoadingMessage.value = props.loadingMessage;
+
 	emit('local-login', {
 		username: localLogin.username,
 		password: localLogin.password
@@ -176,7 +228,8 @@ function handleLocalLogin() {
 function resetLocalForm() {
 	localLogin.username = '';
 	localLogin.password = '';
-	localLoginError.value = '';
+	clearLocalLoginErrors();
+	localLoginLoading.value = false;
 }
 
 // Handle OAuth login
@@ -189,15 +242,28 @@ function handleOAuthLogin(provider) {
 
 // Handle tab change
 function onTabChange(tab, tabId) {
-	// Clear errors when switching tabs
-	localLoginError.value = '';
+	clearLocalLoginErrors();
 	oauthError.value = '';
+	localLoginLoading.value = false;
 	emit('tab-change', tab, tabId);
 }
 
-// Method to set error messages
+function setLocalLoginErrors(errors = {}) {
+	localLoginLoading.value = false;
+	usernameError.value = errors.username || '';
+	passwordError.value = errors.password || '';
+	formError.value = errors.form || '';
+}
+
 function setLocalLoginError(message) {
-	localLoginError.value = message;
+	setLocalLoginErrors({ form: message });
+}
+
+function setLocalLoginLoading(loading, message) {
+	localLoginLoading.value = loading;
+	if (loading) {
+		localLoginLoadingMessage.value = message ?? props.loadingMessage;
+	}
 }
 
 function setOAuthError(message) {
@@ -214,6 +280,8 @@ defineExpose({
 	addOAuthProvider,
 	resetLocalForm,
 	setLocalLoginError,
+	setLocalLoginErrors,
+	setLocalLoginLoading,
 	setOAuthError,
 	localLogin
 });
@@ -225,6 +293,15 @@ defineExpose({
 	margin: 2rem auto;
 }
 
+.login-container.local-only {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.login-container.local-only :deep(.tabs-header) {
+	display: none;
+}
+
 .login-section {
 	display: flex;
 	flex-direction: column;
@@ -239,17 +316,46 @@ defineExpose({
 	width: 100%;
 }
 
-.local-login-form input {
-	padding: 0.75rem;
-	border-radius: 4px;
-	font-size: 1em;
+.local-login-form :deep(.form-field-control) {
+	width: 100%;
+}
+
+.local-login-form :deep(input) {
 	width: 100%;
 	box-sizing: border-box;
 }
 
-.local-login-form input:focus-visible {
-	outline: 2px solid var(--login-input-focus-outline);
-	outline-offset: 2px;
+.local-login-loading {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+	width: 100%;
+	min-height: 9rem;
+	padding: 1rem 0;
+	color: var(--login-muted-fg);
+	text-align: center;
+}
+
+.local-login-loading p {
+	margin: 0;
+	font-size: 0.95em;
+}
+
+.local-login-spinner {
+	width: 2rem;
+	height: 2rem;
+	border: 3px solid var(--login-spinner-track);
+	border-top-color: var(--login-spinner-fg);
+	border-radius: 50%;
+	animation: local-login-spin 0.75s linear infinite;
+}
+
+@keyframes local-login-spin {
+	to {
+		transform: rotate(360deg);
+	}
 }
 
 .local-login-form button {
@@ -266,6 +372,11 @@ defineExpose({
 	opacity: 0.9;
 }
 
+.local-login-form :deep(.login-form-error) {
+	width: 100%;
+	font-size: 0.9em;
+}
+
 .oauth-providers {
 	display: flex;
 	flex-direction: column;

package/vue/components/Pagination.vue

@@ -185,19 +185,20 @@ watch(() => props.pageSize, (newSize) => {
 
 .button:disabled {
   background: transparent;
+  color: var(--button-transparent-disabled-fg);
   cursor: not-allowed;
 }
 
+.button.active:disabled {
+  color: var(--text-color);
+}
+
 #page-size {
   background: transparent;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
 
-option {
-  background: #545f69;
-}
-
 /* Responsive design */
 @media (max-width: 768px) {
   .pagination {

package/vue/components/Tabs.spec.js

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Tabs from './Tabs.vue'
+
+const globalStubs = {
+	HugeiconsIcon: true,
+}
+
+describe('Tabs disabled support', () => {
+	const tabs = [
+		{ id: 'first', label: 'First' },
+		{ id: 'second', label: 'Second', disabled: true },
+		{ id: 'third', label: 'Third' },
+	]
+
+	function mountTabs(overrides = {}) {
+		return mount(Tabs, {
+			attachTo: document.body,
+			props: {
+				tabs,
+				defaultTab: 'first',
+				...overrides.props,
+			},
+			slots: {
+				'tab-first': '<p>First panel</p>',
+				'tab-second': '<p>Second panel</p>',
+				'tab-third': '<p>Third panel</p>',
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		})
+	}
+
+	it('marks disabled tabs with disabled and aria-disabled', () => {
+		const wrapper = mountTabs()
+
+		const disabledTab = wrapper.find('#tab-second')
+		expect(disabledTab.attributes('disabled')).toBeDefined()
+		expect(disabledTab.attributes('aria-disabled')).toBe('true')
+	})
+
+	it('does not select a disabled tab on click', async () => {
+		const wrapper = mountTabs()
+
+		await wrapper.find('#tab-second').trigger('click')
+		await nextTick()
+
+		expect(wrapper.find('#tab-first').attributes('aria-selected')).toBe('true')
+		expect(wrapper.emitted('tab-change')).toBeUndefined()
+	})
+
+	it('skips disabled tabs when moving focus with arrow keys', async () => {
+		const wrapper = mountTabs()
+
+		await wrapper.find('#tab-first').trigger('keydown', { key: 'ArrowRight' })
+		await nextTick()
+
+		expect(wrapper.find('#tab-third').attributes('tabindex')).toBe('0')
+		expect(wrapper.find('#tab-third').attributes('aria-selected')).toBe('true')
+	})
+
+	it('selects the first enabled tab when defaultTab is disabled', async () => {
+		const wrapper = mountTabs({
+			props: {
+				defaultTab: 'second',
+			},
+		})
+
+		await nextTick()
+
+		expect(wrapper.find('#tab-first').attributes('aria-selected')).toBe('true')
+	})
+
+	it('moves off a tab when it becomes disabled', async () => {
+		const wrapper = mountTabs({
+			props: {
+				tabs: [
+					{ id: 'first', label: 'First' },
+					{ id: 'second', label: 'Second' },
+				],
+				defaultTab: 'second',
+			},
+			slots: {
+				'tab-first': '<p>First panel</p>',
+				'tab-second': '<p>Second panel</p>',
+			},
+		})
+
+		await wrapper.setProps({
+			tabs: [
+				{ id: 'first', label: 'First' },
+				{ id: 'second', label: 'Second', disabled: true },
+			],
+		})
+		await nextTick()
+
+		expect(wrapper.find('#tab-first').attributes('aria-selected')).toBe('true')
+	})
+})

package/vue/components/Tabs.vue

@@ -18,11 +18,14 @@
 					v-for="(tab, index) in tabs"
 					:key="getTabKey(tab, index)"
 					:ref="(el) => setTabRef(getTabKey(tab, index), el)"
-					:class="['tab-button', { active: isTabSelected(tab, index) }]"
+					:class="['tab-button', { active: isTabSelected(tab, index), disabled: isTabDisabled(tab) }]"
+					:disabled="isTabDisabled(tab)"
 					:aria-selected="isTabSelected(tab, index) ? 'true' : 'false'"
+					:aria-disabled="isTabDisabled(tab) ? 'true' : undefined"
 					:aria-controls="`tab-panel-${getTabKey(tab, index)}`"
 					:id="`tab-${getTabKey(tab, index)}`"
-					:tabindex="isTabFocused(tab, index) ? 0 : -1"
+					:tabindex="tabTabIndex(tab, index)"
+					:title="tab.disabledTitle || undefined"
 					role="tab"
 					type="button"
 					@click="onTabClick(getTabKey(tab, index))"
@@ -104,18 +107,66 @@ const emit = defineEmits(['tab-change'])
 
 const tabRefs = new Map()
 
-function getInitialTabId() {
-	if (props.defaultTab !== null) {
-		return props.defaultTab
+const activeTabId = ref(null)
+const focusedTabId = ref(null)
+
+function isTabDisabled(tab) {
+	return tab.disabled === true
+}
+
+function getFirstEnabledIndex() {
+	return props.tabs.findIndex((tab) => !isTabDisabled(tab))
+}
+
+function getLastEnabledIndex() {
+	for (let index = props.tabs.length - 1; index >= 0; index -= 1) {
+		if (!isTabDisabled(props.tabs[index])) {
+			return index
+		}
+	}
+	return -1
+}
+
+function getFirstEnabledTabKey() {
+	const index = getFirstEnabledIndex()
+	if (index < 0) {
+		return null
 	}
-	if (props.tabs.length > 0) {
-		return getTabKey(props.tabs[0], 0)
+	return getTabKey(props.tabs[index], index)
+}
+
+function resolveSelectableTabId(tabKey) {
+	if (tabKey !== null && tabKey !== undefined) {
+		const index = props.tabs.findIndex((tab, i) => getTabKey(tab, i) === tabKey)
+		if (index >= 0 && !isTabDisabled(props.tabs[index])) {
+			return tabKey
+		}
+	}
+	return getFirstEnabledTabKey()
+}
+
+function tabTabIndex(tab, index) {
+	if (isTabDisabled(tab)) {
+		return -1
 	}
-	return null
+	return isTabFocused(tab, index) ? 0 : -1
 }
 
-const activeTabId = ref(getInitialTabId())
-const focusedTabId = ref(getInitialTabId())
+function findNextEnabledIndex(fromIndex, step) {
+	const length = props.tabs.length
+	if (length === 0) {
+		return fromIndex
+	}
+
+	for (let offset = 1; offset <= length; offset += 1) {
+		const index = (fromIndex + step * offset + length * 100) % length
+		if (!isTabDisabled(props.tabs[index])) {
+			return index
+		}
+	}
+
+	return fromIndex
+}
 
 function getTabKey(tab, index) {
 	return tab.id ?? index
@@ -146,10 +197,14 @@ function focusTab(tabKey) {
 }
 
 function selectTab(tabKey, { emitChange = true } = {}) {
+	const index = tabIndexForKey(tabKey)
+	if (index >= 0 && isTabDisabled(props.tabs[index])) {
+		return
+	}
+
 	if (activeTabId.value !== tabKey) {
 		activeTabId.value = tabKey
 		if (emitChange) {
-			const index = tabIndexForKey(tabKey)
 			const activeTab = index >= 0 ? props.tabs[index] : null
 			emit('tab-change', activeTab, tabKey)
 		}
@@ -166,8 +221,11 @@ function moveFocusToIndex(index, { activate = props.activation === 'auto' } = {}
 		return
 	}
 
-	const normalized = (index + props.tabs.length) % props.tabs.length
-	const tabKey = getTabKey(props.tabs[normalized], normalized)
+	if (index < 0 || index >= props.tabs.length || isTabDisabled(props.tabs[index])) {
+		return
+	}
+
+	const tabKey = getTabKey(props.tabs[index], index)
 	focusedTabId.value = tabKey
 
 	if (activate) {
@@ -177,6 +235,14 @@ function moveFocusToIndex(index, { activate = props.activation === 'auto' } = {}
 	nextTick(() => focusTab(tabKey))
 }
 
+function moveFocusByStep(fromIndex, step, { activate = props.activation === 'auto' } = {}) {
+	const nextIndex = findNextEnabledIndex(fromIndex, step)
+	if (nextIndex === fromIndex && isTabDisabled(props.tabs[fromIndex])) {
+		return
+	}
+	moveFocusToIndex(nextIndex, { activate })
+}
+
 function tabKeyFromElement(tabEl) {
 	const suffix = tabEl.id.slice('tab-'.length)
 	const index = props.tabs.findIndex((tab, i) => String(getTabKey(tab, i)) === suffix)
@@ -204,34 +270,34 @@ function onTabListKeydown(event) {
 		case 'ArrowRight':
 			if (!isVertical) {
 				event.preventDefault()
-				moveFocusToIndex(index + 1)
+				moveFocusByStep(index, 1)
 			}
 			break
 		case 'ArrowLeft':
 			if (!isVertical) {
 				event.preventDefault()
-				moveFocusToIndex(index - 1)
+				moveFocusByStep(index, -1)
 			}
 			break
 		case 'ArrowDown':
 			if (isVertical) {
 				event.preventDefault()
-				moveFocusToIndex(index + 1)
+				moveFocusByStep(index, 1)
 			}
 			break
 		case 'ArrowUp':
 			if (isVertical) {
 				event.preventDefault()
-				moveFocusToIndex(index - 1)
+				moveFocusByStep(index, -1)
 			}
 			break
 		case 'Home':
 			event.preventDefault()
-			moveFocusToIndex(0)
+			moveFocusToIndex(getFirstEnabledIndex())
 			break
 		case 'End':
 			event.preventDefault()
-			moveFocusToIndex(props.tabs.length - 1)
+			moveFocusToIndex(getLastEnabledIndex())
 			break
 		case ' ':
 		case 'Enter':
@@ -260,20 +326,25 @@ function syncTabIdsAfterListChange() {
 		return
 	}
 
-	const activeStillExists = tabIndexForKey(activeTabId.value) >= 0
-	if (!activeStillExists) {
-		const firstKey = getTabKey(props.tabs[0], 0)
+	const activeIndex = tabIndexForKey(activeTabId.value)
+	const activeIsValid = activeIndex >= 0 && !isTabDisabled(props.tabs[activeIndex])
+	if (!activeIsValid) {
+		const firstKey = getFirstEnabledTabKey()
 		activeTabId.value = firstKey
 		focusedTabId.value = firstKey
 		return
 	}
 
-	if (tabIndexForKey(focusedTabId.value) < 0) {
+	const focusedIndex = tabIndexForKey(focusedTabId.value)
+	const focusedIsValid = focusedIndex >= 0 && !isTabDisabled(props.tabs[focusedIndex])
+	if (!focusedIsValid) {
 		focusedTabId.value = activeTabId.value
 	}
 }
 
 onMounted(() => {
+	activeTabId.value = resolveSelectableTabId(props.defaultTab)
+	focusedTabId.value = activeTabId.value
 	syncTabIdsAfterListChange()
 })
 
@@ -357,7 +428,7 @@ defineExpose({
 	position: relative;
 }
 
-.tab-button:hover:not(.active) {
+.tab-button:hover:not(.active):not(:disabled) {
 	color: var(--tab-hover-fg);
 	background-color: var(--tab-hover-bg);
 }
@@ -368,6 +439,25 @@ defineExpose({
 	border-bottom-color: transparent;
 }
 
+.tab-button:disabled,
+.tab-button.disabled {
+	cursor: not-allowed;
+	color: var(--disabled-text-color);
+	opacity: 0.72;
+}
+
+.tab-button:disabled:hover,
+.tab-button.disabled:hover {
+	color: var(--disabled-text-color);
+	background-color: transparent;
+}
+
+.tab-button:disabled.active,
+.tab-button.disabled.active {
+	background-color: var(--tab-active-bg);
+	color: var(--disabled-text-color);
+}
+
 .tabs-vertical .tab-button {
 	width: 100%;
 	justify-content: flex-start;
@@ -426,7 +516,7 @@ defineExpose({
 	z-index: 1;
 }
 
-.tab-button:hover:not(.active):focus-visible {
+.tab-button:hover:not(.active):not(:disabled):focus-visible {
 	color: var(--tab-hover-fg);
 	background-color: var(--tab-hover-bg);
 }