picocrank 1.25.2 → 1.27.0

package/vue/components/NotificationPopup.vue

@@ -1,9 +1,34 @@
 <template>
-	<div
-		class="notification-popup notification show"
-		:class="popup.class"
-		role="status"
-	>
+	<div class="notification-popup" role="status">
+		<NotificationBlock
+			:type="notificationType"
+			:label="popup.label || ''"
+		>
+			<span class="notification-popup-content">
+				<span class="notification-popup-message">{{ popup.message }}</span>
+
+				<RouterLink
+					v-if="popup.linkTo && !isExternalLink"
+					:to="popup.linkTo"
+					class="notification-popup-link"
+					@click="emit('dismiss', popup.id)"
+				>
+					{{ popup.linkLabel || 'View' }}
+				</RouterLink>
+
+				<a
+					v-else-if="popup.linkTo && isExternalLink"
+					:href="popup.linkTo"
+					class="notification-popup-link"
+					target="_blank"
+					rel="noopener noreferrer"
+					@click="emit('dismiss', popup.id)"
+				>
+					{{ popup.linkLabel || 'View' }}
+				</a>
+			</span>
+		</NotificationBlock>
+
 		<button
 			type="button"
 			class="notification-popup-dismiss"
@@ -12,33 +37,6 @@
 		>
 			<HugeiconsIcon :icon="Cancel01Icon" width="1em" height="1em" />
 		</button>
-
-		<div class="notification-popup-body">
-			<p class="notification-popup-message">
-				<strong v-if="popup.label">{{ popup.label }}:</strong>
-				{{ popup.message }}
-			</p>
-
-			<RouterLink
-				v-if="popup.linkTo && !isExternalLink"
-				:to="popup.linkTo"
-				class="notification-popup-link"
-				@click="emit('dismiss', popup.id)"
-			>
-				{{ popup.linkLabel || 'View' }}
-			</RouterLink>
-
-			<a
-				v-else-if="popup.linkTo && isExternalLink"
-				:href="popup.linkTo"
-				class="notification-popup-link"
-				target="_blank"
-				rel="noopener noreferrer"
-				@click="emit('dismiss', popup.id)"
-			>
-				{{ popup.linkLabel || 'View' }}
-			</a>
-		</div>
 	</div>
 </template>
 
@@ -47,6 +45,7 @@ import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 import { HugeiconsIcon } from '@hugeicons/vue'
 import { Cancel01Icon } from '@hugeicons/core-free-icons'
+import NotificationBlock from './NotificationBlock.vue'
 
 const props = defineProps({
 	popup: {
@@ -57,6 +56,8 @@ const props = defineProps({
 
 const emit = defineEmits(['dismiss'])
 
+const notificationType = computed(() => props.popup.class || 'info')
+
 const isExternalLink = computed(() =>
 	typeof props.popup.linkTo === 'string' && /^https?:\/\//.test(props.popup.linkTo)
 )
@@ -67,30 +68,32 @@ const isExternalLink = computed(() =>
 	position: relative;
 	width: min(22rem, calc(100vw - 2rem));
 	margin: 0;
-	padding: 0.75rem 2.25rem 0.75rem 0.75rem;
-	cursor: default;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 60%, transparent);
 }
 
-.notification-popup-message {
+.notification-popup :deep(.notification) {
 	margin: 0;
 }
 
-.notification-popup-body {
+.notification-popup-content {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
 
+.notification-popup-message {
+	display: block;
+}
+
 .notification-popup-link {
-	color: inherit;
+	color: var(--link-color);
 	font-weight: bold;
 	text-decoration: underline;
 	align-self: flex-start;
 }
 
 .notification-popup-link:hover {
-	opacity: 0.85;
+	text-decoration-thickness: 2px;
 }
 
 .notification-popup-dismiss {
@@ -106,13 +109,13 @@ const isExternalLink = computed(() =>
 	border: 0;
 	border-radius: 0.35rem;
 	background: transparent;
-	color: inherit;
+	color: var(--text-color);
 	cursor: pointer;
 	opacity: 0.75;
 }
 
 .notification-popup-dismiss:hover {
 	opacity: 1;
-	background: rgba(0, 0, 0, 0.08);
+	background: var(--hover-background-color);
 }
 </style>

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/ReadOnlyTextArea.vue

@@ -144,7 +144,7 @@ async function copy() {
 		await navigator.clipboard.writeText(text)
 		markCopied()
 		emit('copy', text)
-	} catch (error) {
+	} catch (_error) {
 		try {
 			textareaRef.value?.select()
 			document.execCommand('copy')

package/vue/components/SidebarNavLink.vue

@@ -121,7 +121,7 @@ a.active {
 	width: 0.5rem;
 	height: 0.5rem;
 	border-radius: 50%;
-	background: var(--indicator-color, #dc3545);
+	background: var(--karma-bad-tint);
 	flex-shrink: 0;
 }
 
@@ -129,8 +129,8 @@ a.active {
 	min-width: 1.25rem;
 	padding: 0.1rem 0.4rem;
 	border-radius: 999px;
-	background: var(--indicator-color, #dc3545);
-	color: #fff;
+	background: var(--karma-bad-tint);
+	color: var(--text-color);
 	font-size: 0.75em;
 	font-weight: 600;
 	line-height: 1.2;

package/vue/components/Table.vue

@@ -37,27 +37,24 @@
 						v-if="showColumnOptionsButton"
 						class="actions table-column-options-header"
 					>
-						<div class="table-column-options-header-content">
-							<span v-if="activeLayoutLabel" class="table-layout-label">{{ activeLayoutLabel }}</span>
-							<span class="actions-menu-trigger">
-								<button
-									ref="columnOptionsButtonRef"
-									type="button"
-									aria-haspopup="dialog"
-									aria-label="Column options"
-									:aria-expanded="columnOptionsOpen ? 'true' : 'false'"
-									@click="openColumnOptions"
-								>
-									<HugeiconsIcon
-										:icon="LayoutGridIcon"
-										width="0.95em"
-										height="0.95em"
-										:strokeWidth="2"
-										aria-hidden="true"
-									/>
-								</button>
-							</span>
-						</div>
+						<span class="actions-menu-trigger">
+							<button
+								ref="columnOptionsButtonRef"
+								type="button"
+								aria-haspopup="dialog"
+								aria-label="Column options"
+								:aria-expanded="columnOptionsOpen ? 'true' : 'false'"
+								@click.stop="openColumnOptions"
+							>
+								<HugeiconsIcon
+									:icon="LayoutGridIcon"
+									width="0.95em"
+									height="0.95em"
+									:strokeWidth="2"
+									aria-hidden="true"
+								/>
+							</button>
+						</span>
 					</th>
 				</tr>
 			</thead>
@@ -71,7 +68,12 @@
 					<td
 						v-for="(header, cellIndex) in visibleHeaders"
 						:key="header.key || cellIndex"
-						:class="[cellClasses(header), header.class]"
+						:colspan="bodyColumnColspan(cellIndex) || undefined"
+						:class="[
+							cellClasses(header),
+							header.class,
+							isLastColumnWithOptions(cellIndex) ? 'table-last-column-with-options' : null,
+						]"
 					>
 						<slot
 							v-if="slots[`cell-${header.key}`]"
@@ -89,11 +91,6 @@
 							{{ row[header.key] }}
 						</span>
 					</td>
-					<td
-						v-if="showColumnOptionsButton"
-						class="actions table-column-options-cell"
-						aria-hidden="true"
-					/>
 				</tr>
 			</tbody>
 		</table>
@@ -135,6 +132,7 @@
 		:column-keys="resolvedColumnOrder"
 		:visible-keys="visibleColumnKeys"
 		:column-priorities="resolvedColumnPriorities"
+		:default-column-priorities="defaultColumnPriorities"
 		:filters="activeFilters"
 		:rows="props.data"
 		:table-id="props.tableId"
@@ -161,11 +159,9 @@ import TableColumnFilterPopover from './TableColumnFilterPopover.vue'
 import TableColumnOptionsPopover from './TableColumnOptionsPopover.vue'
 import { useLongPress } from '../composables/useLongPress.js'
 import {
-	applyFilters,
 	buildSelectOptions,
 	cloneColumnFilterEntries,
 	cloneFilters,
-	countActiveFilters,
 	isColumnFiltered,
 	isFilterEntryActive,
 	normalizeColumnFilterEntries,
@@ -186,6 +182,10 @@ import {
 	sanitizePresetState,
 	layoutStatesEqual,
 } from '../composables/tableColumnPresets.js'
+import {
+	defaultColumnPriorityForIndex,
+	isValidColPriority,
+} from '../composables/tableColumnPriorities.js'
 
 const DEFAULT_PAGE_SIZE = 10
 
@@ -231,6 +231,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	responsiveColumns: {
+		type: Boolean,
+		default: true,
+	},
 	stickyCols: {
 		type: Number,
 		default: null,
@@ -286,6 +290,8 @@ const emit = defineEmits([
 	'column-order-change',
 	'update:columnPriorities',
 	'column-priorities-change',
+	'update:layoutLabel',
+	'layout-label-change',
 ])
 
 const attrs = useAttrs()
@@ -368,6 +374,18 @@ const showColumnOptionsButton = computed(() =>
 	props.columnOptions && manageableColumnKeys.value.length > 0,
 )
 
+function isLastVisibleColumn(index) {
+	return index === visibleHeaders.value.length - 1
+}
+
+function isLastColumnWithOptions(index) {
+	return showColumnOptionsButton.value && isLastVisibleColumn(index)
+}
+
+function bodyColumnColspan(index) {
+	return isLastColumnWithOptions(index) ? 2 : null
+}
+
 function isHeaderHidden(header) {
 	if (header.hidden) {
 		return true
@@ -386,9 +404,13 @@ const visibleColumnKeys = computed(() =>
 		.map((header) => header.key),
 )
 
-function defaultColumnPriority(header) {
-	return isValidColPriority(header?.colPriority) ? header.colPriority : null
-}
+const hasHorizontalScroll = computed(() =>
+	props.horizontalScroll || (props.stickyCols >= 1 && props.stickyCols <= 3),
+)
+
+const useResponsiveColumns = computed(() =>
+	props.responsiveColumns && !hasHorizontalScroll.value,
+)
 
 function resolvedColumnPriority(header) {
 	if (!header?.key) {
@@ -404,9 +426,35 @@ function resolvedColumnPriority(header) {
 		return isValidColPriority(override) ? override : null
 	}
 
-	return defaultColumnPriority(header)
+	if (!useResponsiveColumns.value) {
+		return null
+	}
+
+	const index = visibleHeaders.value.findIndex((item) => item.key === header.key)
+	if (index < 0) {
+		return null
+	}
+
+	return defaultColumnPriorityForIndex(header, index, useResponsiveColumns.value)
 }
 
+const defaultColumnPriorities = computed(() => {
+	if (!useResponsiveColumns.value) {
+		return Object.fromEntries(
+			visibleHeaders.value
+				.filter((header) => isValidColPriority(header?.colPriority))
+				.map((header) => [header.key, header.colPriority]),
+		)
+	}
+
+	return Object.fromEntries(
+		visibleHeaders.value.flatMap((header, index) => {
+			const priority = defaultColumnPriorityForIndex(header, index, true)
+			return isValidColPriority(priority) ? [[header.key, priority]] : []
+		}),
+	)
+})
+
 const resolvedColumnPriorities = computed(() =>
 	Object.fromEntries(
 		manageableColumnKeys.value.map((key) => {
@@ -420,10 +468,6 @@ const hasColPriorities = computed(() =>
 	orderedHeaders.value.some((header) => isValidColPriority(resolvedColumnPriority(header))),
 )
 
-const hasHorizontalScroll = computed(() =>
-	props.horizontalScroll || (props.stickyCols >= 1 && props.stickyCols <= 3),
-)
-
 const needsTableWrapper = computed(() => hasColPriorities.value || hasHorizontalScroll.value)
 
 const tableWrapperClasses = computed(() => {
@@ -528,10 +572,6 @@ const queryParams = computed(() => {
 	return params
 })
 
-function isValidColPriority(priority) {
-	return Number.isInteger(priority) && priority >= 1 && priority <= 5
-}
-
 function colPriorityClass(priority) {
 	return isValidColPriority(priority) ? `col-priority-${priority}` : null
 }
@@ -1105,6 +1145,11 @@ const activeLayoutLabel = computed(() => {
 	return 'Custom'
 })
 
+function emitLayoutLabelChange(label) {
+	emit('update:layoutLabel', label)
+	emit('layout-label-change', label)
+}
+
 function loadDeveloperDefaults() {
 	setFilters({})
 	sortBy.value = null
@@ -1313,6 +1358,10 @@ watch(
 	{ deep: true },
 )
 
+watch(activeLayoutLabel, (label) => {
+	emitLayoutLabelChange(label)
+}, { immediate: true })
+
 watch(sortedItems, () => {
 	if (!isRemote.value) {
 		page.value = 1
@@ -1356,6 +1405,11 @@ onBeforeUnmount(() => {
 		clearTimeout(fetchDebounceTimer.value)
 	}
 })
+
+defineExpose({
+	layoutLabel: activeLayoutLabel,
+	loadDeveloperDefaults,
+})
 </script>
 
 <style scoped>
@@ -1443,41 +1497,19 @@ tbody tr.row-clickable {
 	margin: 0;
 }
 
-th.table-column-options-header,
-td.table-column-options-cell {
+th.table-column-options-header {
 	padding-right: 1rem;
 	text-align: right;
 	vertical-align: middle;
-}
-
-th.table-column-options-header {
 	width: auto;
 	min-width: 2.5rem;
 	max-width: none;
 	white-space: nowrap;
 }
 
-td.table-column-options-cell {
-	width: 2.5rem;
-	min-width: 2.5rem;
-	max-width: 2.5rem;
-}
-
-.table-column-options-header-content {
-	display: inline-flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.5rem;
-	width: 100%;
-}
-
-.table-layout-label {
-	font-size: 0.85rem;
-	color: var(--table-muted-fg);
-	max-width: 10rem;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+td.table-last-column-with-options {
+	padding-right: 1rem;
+	vertical-align: middle;
 }
 
 th.table-column-options-header .actions-menu-trigger {
@@ -1486,24 +1518,20 @@ th.table-column-options-header .actions-menu-trigger {
 	flex: 0 0 auto;
 }
 
-.table-scroll th.table-column-options-header,
-.table-scroll td.table-column-options-cell {
+.table-scroll {
+	min-width: 0;
+	max-width: 100%;
+	contain: inline-size;
+}
+
+.table-scroll th.table-column-options-header {
 	position: sticky;
 	right: 0;
-	z-index: 1;
+	z-index: 2;
 	background-color: var(--table-sticky-bg);
 	box-shadow: -1px 0 0 var(--border-color);
 }
 
-.table-scroll thead th.table-column-options-header {
-	z-index: 2;
-}
-
-.table-scroll table.row-hover tbody tr:hover td.table-column-options-cell,
-.table-scroll table.row-hover tbody tr:focus-within td.table-column-options-cell {
-	background-color: var(--table-sticky-hover-bg);
-}
-
 th.actions .actions-menu-trigger button {
 	display: inline-flex;
 	align-items: center;

package/vue/components/TableColumnOptionsPopover.vue

@@ -264,6 +264,10 @@ const props = defineProps({
 		type: Object,
 		default: () => ({}),
 	},
+	defaultColumnPriorities: {
+		type: Object,
+		default: () => ({}),
+	},
 	anchorEl: {
 		type: Object,
 		default: null,
@@ -389,6 +393,11 @@ function isValidColPriority(priority) {
 }
 
 function defaultColumnPriority(key) {
+	if (Object.prototype.hasOwnProperty.call(props.defaultColumnPriorities, key)) {
+		const value = props.defaultColumnPriorities[key]
+		return isValidColPriority(value) ? value : null
+	}
+
 	const header = headerByKey.value.get(key)
 	return isValidColPriority(header?.colPriority) ? header.colPriority : null
 }

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')
+	})
+})