@conduction/nextcloud-vue 2.59.0 → 2.61.0

package/src/components/CnTabs/CnTabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="cn-tabs" :class="{ 'cn-tabs--card': card }">
+	<div class="cn-tabs" :class="{ 'cn-tabs--card': card, 'cn-tabs--segmented': variant === 'segmented' }">
 		<div class="cn-tabs__bar">
 			<div
 				class="cn-tabs__strip"
@@ -14,7 +14,7 @@
 					@wheel="onNavWheel"
 					@scroll="measureOverflow">
 					<button
-						v-for="tab in tabs"
+						v-for="tab in visibleTabs"
 						:id="tab.tabId"
 						:key="tab.uid"
 						ref="navButtons"
@@ -27,7 +27,14 @@
 						:tabindex="isActive(tab.uid) ? 0 : -1"
 						:disabled="tab.disabled || null"
 						@click="tab.onActivate()">
-						<component :is="tab.titleRender" />
+						<!-- The space before the count is load-bearing: it keeps
+						     the tab's accessible name "Documents 5" rather than
+						     "Documents5". The margin separates the two for the eye
+						     only, so keep both tags on one line. -->
+						<component :is="tab.titleRender" /> <span
+							v-if="hasCount(tab)"
+							class="cn-tabs__count"
+							data-testid="cn-tabs-count">{{ tab.count }}</span>
 					</button>
 				</div>
 				<!-- Mouse-only affordances: keyboard users already have the arrow
@@ -51,6 +58,36 @@
 					<ChevronRight :size="20" />
 				</button>
 			</div>
+			<!-- The tabs that did not make the strip. OUTSIDE the tablist, like
+			     `#nav-end`: a menu button nested in it would be announced as
+			     one more tab. A tab picked here joins the strip while it is
+			     selected, so the open panel always has a real tab to be
+			     labelled by. -->
+			<div v-if="overflowTabs.length > 0" class="cn-tabs__more">
+				<NcActions
+					:forceMenu="true"
+					:forceName="true"
+					:menuName="moreLabel"
+					:aria-label="moreAriaLabel"
+					variant="tertiary"
+					data-testid="cn-tabs-more">
+					<template #icon>
+						<ChevronDown :size="20" />
+					</template>
+					<NcActionButton
+						v-for="tab in overflowTabs"
+						:key="tab.uid"
+						:disabled="tab.disabled || null"
+						:closeAfterClick="true"
+						data-testid="cn-tabs-more-item"
+						@click="onOverflowPick(tab)">
+						<template #icon>
+							<span class="cn-tabs__more-spacer" />
+						</template>
+						{{ overflowLabel(tab) }}
+					</NcActionButton>
+				</NcActions>
+			</div>
 			<div v-if="$slots['nav-end']" class="cn-tabs__nav-end">
 				<!-- @slot nav-end Rendered at the right-hand end of the tab bar, deliberately OUTSIDE the `role="tablist"` element. A widget Actions menu belongs beside the strip, not inside it: anything nested in the tablist is announced as one of the tabs, so a screen-reader user counting six tabs would hear seven. -->
 				<!-- @binding {number} active-index Index of the currently selected tab. -->
@@ -131,8 +168,27 @@
  * wiring, a roving `tabindex` (only the selected tab is in the tab order), and
  * Left/Right/Home/End keyboard navigation within the strip. Pass `aria-label`
  * (or `ariaLabel`) so screen-reader users hear what the strip is for.
+ *
+ * ## Counts and the "More" menu
+ *
+ * A `CnTab` with `count` shows that number after its title. A `CnTab` with
+ * `overflow` is listed under a "More" menu beside the strip instead of in it:
+ *
+ * ```vue
+ * <CnTabs aria-label="Case details">
+ *   <CnTab title="Documents" :count="5">…</CnTab>
+ *   <CnTab title="Archiving" overflow>…</CnTab>
+ * </CnTabs>
+ * ```
+ *
+ * Picking a tab from the menu selects it and shows it in the strip for as long
+ * as it is selected. With no overflow tab the menu does not render, and the
+ * strip is exactly what it was before these props existed.
  */
-import { computed, defineComponent, onBeforeUnmount, onMounted, onUpdated, provide, reactive, ref, watch } from 'vue'
+import { translate as t } from '@nextcloud/l10n'
+import { NcActionButton, NcActions } from '@nextcloud/vue'
+import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, onUpdated, provide, reactive, ref, watch } from 'vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import { CN_TABS_INJECTION_KEY } from './tabsKey.js'
@@ -141,8 +197,11 @@ export default defineComponent({
 	name: 'CnTabs',
 
 	components: {
+		ChevronDown,
 		ChevronLeft,
 		ChevronRight,
+		NcActionButton,
+		NcActions,
 	},
 
 	props: {
@@ -164,6 +223,20 @@ export default defineComponent({
 			default: false,
 		},
 
+		/**
+		 * How the strip is drawn: `line` (the default: tabs joined to the
+		 * panel below) or `segmented` (a compact pill switch, for a view
+		 * switch such as "My work / My team"). Roles and keyboard behaviour
+		 * are the same in both.
+		 *
+		 * @type {'line'|'segmented'}
+		 */
+		variant: {
+			type: String,
+			default: 'line',
+			validator: (v) => ['line', 'segmented'].includes(v),
+		},
+
 		/**
 		 * Accessible name for the tab strip, applied to the `role="tablist"`
 		 * element. Screen readers announce it when focus enters the strip.
@@ -172,6 +245,12 @@ export default defineComponent({
 			type: String,
 			default: '',
 		},
+
+		/** Name of the menu that lists the `overflow` tabs. */
+		moreLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'More'),
+		},
 	},
 
 	emits: [
@@ -184,6 +263,10 @@ export default defineComponent({
 		const tabs = reactive([])
 		const activeUid = ref(null)
 		const navButtons = ref([])
+		const nav = ref(null)
+		// Whether the selection was chosen (a tab declared `active`, or the
+		// user picked one) rather than defaulted to the first tab registered.
+		let selectionChosen = false
 
 		/**
 		 * Register a child tab. The first child to register wins the initial
@@ -199,8 +282,23 @@ export default defineComponent({
 			if (tab.disabled) {
 				return
 			}
-			if (activeUid.value === null || tab.active) {
+			if (tab.active) {
 				activeUid.value = tab.uid
+				selectionChosen = true
+				return
+			}
+			if (activeUid.value === null) {
+				activeUid.value = tab.uid
+				return
+			}
+			// A tab under "More" only held the default selection because it
+			// registered first. The first tab that is actually in the strip
+			// takes it over, unless somebody chose.
+			if (!selectionChosen && !tab.overflow) {
+				const current = tabs.find((candidate) => candidate.uid === activeUid.value)
+				if (current && current.overflow) {
+					activeUid.value = tab.uid
+				}
 			}
 		}
 
@@ -232,6 +330,7 @@ export default defineComponent({
 		 * @return {void}
 		 */
 		function select(uid) {
+			selectionChosen = true
 			if (activeUid.value === uid) {
 				return
 			}
@@ -252,6 +351,67 @@ export default defineComponent({
 
 		const activeIndex = computed(() => tabs.findIndex((tab) => tab.uid === activeUid.value))
 
+		/**
+		 * The tabs drawn in the strip: every tab that is not `overflow`, plus
+		 * an overflow tab for as long as it is the selected one.
+		 *
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+		 */
+		const visibleTabs = computed(() => tabs.filter((tab) => !tab.overflow || tab.uid === activeUid.value))
+
+		/**
+		 * The tabs listed under "More": overflow tabs that are not selected.
+		 *
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+		 */
+		const overflowTabs = computed(() => tabs.filter((tab) => tab.overflow && tab.uid !== activeUid.value))
+
+		/**
+		 * Whether a tab declares a count. `0` is a count; null and '' are not.
+		 *
+		 * @param {object} tab Child descriptor.
+		 *
+		 * @return {boolean} True when the count renders.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+		 */
+		function hasCount(tab) {
+			return tab.count !== null && tab.count !== undefined && tab.count !== ''
+		}
+
+		/**
+		 * A "More" entry's text: the tab's title, and its count when it has one.
+		 *
+		 * @param {object} tab Child descriptor.
+		 *
+		 * @return {string} The menu label.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+		 */
+		function overflowLabel(tab) {
+			return hasCount(tab) ? `${tab.label} (${tab.count})` : tab.label
+		}
+
+		/**
+		 * Select a tab picked from "More" and move focus to it in the strip,
+		 * so a keyboard user lands on the tab they chose rather than on a menu
+		 * button that no longer lists it.
+		 *
+		 * @param {object} tab Child descriptor.
+		 *
+		 * @return {void}
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+		 */
+		function onOverflowPick(tab) {
+			tab.onActivate()
+			nextTick(() => {
+				const button = nav.value?.querySelector(`#${tab.tabId}`)
+				if (button && typeof button.focus === 'function') {
+					button.focus()
+				}
+			})
+		}
+
+		const moreAriaLabel = computed(() => t('nextcloud-vue', 'More tabs'))
+
 		/**
 		 * Move the selection and DOM focus to a tab by index, skipping disabled
 		 * ones. Focus has to move with the selection: in the WAI-ARIA tabs
@@ -263,14 +423,16 @@ export default defineComponent({
 		 * @return {void}
 		 */
 		function focusTab(index) {
-			const enabled = tabs.filter((tab) => !tab.disabled)
+			// The strip's own tabs only: the arrow keys walk what is drawn, and
+			// the "More" menu has its own keyboard handling.
+			const enabled = visibleTabs.value.filter((tab) => !tab.disabled)
 			if (enabled.length === 0) {
 				return
 			}
 			const wrapped = ((index % enabled.length) + enabled.length) % enabled.length
 			const target = enabled[wrapped]
+			const position = visibleTabs.value.indexOf(target)
 			select(target.uid)
-			const position = tabs.indexOf(target)
 			const button = navButtons.value?.[position]
 			if (button && typeof button.focus === 'function') {
 				button.focus()
@@ -285,7 +447,7 @@ export default defineComponent({
 		 * @return {void}
 		 */
 		function onNavKeydown(event) {
-			const enabled = tabs.filter((tab) => !tab.disabled)
+			const enabled = visibleTabs.value.filter((tab) => !tab.disabled)
 			const current = enabled.findIndex((tab) => tab.uid === activeUid.value)
 			let next = null
 
@@ -306,8 +468,6 @@ export default defineComponent({
 			focusTab(next)
 		}
 
-		const nav = ref(null)
-
 		/**
 		 * Scroll the strip so the selected tab is wholly in view.
 		 *
@@ -402,6 +562,12 @@ export default defineComponent({
 
 		return {
 			tabs,
+			visibleTabs,
+			overflowTabs,
+			hasCount,
+			overflowLabel,
+			onOverflowPick,
+			moreAriaLabel,
 			isActive,
 			activeIndex,
 			nav,
@@ -534,6 +700,34 @@ export default defineComponent({
 	inset-inline-end: 0;
 }
 
+/* The count behind a tab's title. Full-contrast text on the page background,
+   so it reads on the idle tab's darker fill and on the open tab alike. */
+.cn-tabs__count {
+	background-color: var(--color-main-background);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-pill, 100px);
+	color: var(--color-main-text);
+	display: inline-block;
+	font-size: 0.85em;
+	line-height: 1.4;
+	margin-inline-start: 6px;
+	min-width: 1.4em;
+	padding: 0 6px;
+	text-align: center;
+}
+
+.cn-tabs__more {
+	align-items: center;
+	display: flex;
+	flex: 0 0 auto;
+}
+
+/* Keeps a "More" entry's text on the menu's text column without drawing an icon. */
+.cn-tabs__more-spacer {
+	display: inline-block;
+	width: 20px;
+}
+
 .cn-tabs__nav-end {
 	align-items: center;
 	display: flex;
@@ -645,4 +839,44 @@ export default defineComponent({
 	border-top: none;
 	padding: 12px;
 }
+
+/* Segmented variant: the strip is a pill switch that stands on its own, so
+   the bar's rule and the tab-joins-panel treatment are both dropped. */
+.cn-tabs--segmented .cn-tabs__bar {
+	border-bottom: none;
+}
+
+.cn-tabs--segmented .cn-tabs__strip {
+	flex: 0 1 auto;
+}
+
+.cn-tabs--segmented .cn-tabs__nav {
+	gap: 4px;
+	margin-bottom: 0;
+	padding: 4px;
+	border-radius: var(--border-radius-container, var(--border-radius-large, 10px));
+	background-color: var(--color-background-dark);
+}
+
+.cn-tabs--segmented .cn-tabs__nav-item {
+	border: 1px solid transparent;
+	border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
+	background-color: transparent;
+	font-weight: 600;
+	padding: 6px 16px;
+}
+
+.cn-tabs--segmented .cn-tabs__nav-item:hover {
+	background-color: var(--color-background-hover);
+}
+
+/* The open segment is the raised one. Its border survives forced-colours
+   mode, which drops the background and the shadow. */
+.cn-tabs--segmented .cn-tabs__nav-item--active {
+	border: 1px solid var(--color-border-dark);
+	background-color: var(--color-main-background);
+	box-shadow: 0 1px 2px var(--color-box-shadow);
+	font-weight: 600;
+	padding-top: 6px;
+}
 </style>

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -7,6 +7,7 @@
 	<div class="cn-tabs-widget">
 		<CnTabs
 			:aria-label="stripLabel"
+			:moreLabel="moreLabel"
 			class="cn-tabs-widget__tabs"
 			@update:activeIndex="onTabChange">
 			<!-- One Actions menu for the whole widget, bound to whichever child
@@ -55,6 +56,9 @@
 				v-for="(entry, index) in resolvedTabs"
 				:key="entry.key"
 				:active="index === activeIndex"
+				:title="entry.label"
+				:count="entry.count"
+				:overflow="entry.overflow"
 				lazy
 				@click="activeIndex = index">
 				<template #title>
@@ -97,6 +101,7 @@ import CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnTab from '../CnTabs/CnTab.vue'
 import CnTabs from '../CnTabs/CnTabs.vue'
+import { resolveTabCount } from '../../utils/detailActionModel.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
 import { widgetTitleOf } from '../../utils/widgetDispatch.js'
 import { CnActionsMenu } from '../CnActionsMenu/index.js'
@@ -233,10 +238,17 @@ export default {
 		/**
 		 * The widget's config: `{ tabs, ariaLabel }`.
 		 *
-		 * `tabs[]` entries are `{ widgetId, label?, icon? }`. `label` and `icon`
-		 * fall back to the referenced widget's own title and icon.
+		 * `tabs[]` entries are `{ widgetId, label?, icon?, count?, countField?, overflow? }`.
+		 * `label` and `icon` fall back to the referenced widget's own title and
+		 * icon. `count` is a number shown after the label; `countField` reads
+		 * it off the record instead (a list counts its items). `overflow: true`
+		 * lists the tab under "More".
 		 *
-		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string}>, ariaLabel?: string }}
+		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
+		 * `hideEmpty: true` moves a tab whose count is 0 there too.
+		 * `moreLabel` names that menu.
+		 *
+		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string, count?: number, countField?: string, overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string }}
 		 */
 		content: {
 			type: Object,
@@ -374,23 +386,56 @@ export default {
 		/**
 		 * The configured tabs, each paired with the widget definition it names.
 		 *
-		 * @return {object[]} `{ key, widgetId, label, icon, widget }` per tab.
+		 * A tab goes under the strip's "More" menu when it says `overflow`, when
+		 * `content.hideEmpty` is set and its count is 0, or when
+		 * `content.maxVisibleTabs` places are already taken. `count` is a
+		 * literal, or read off the record through `countField`.
+		 *
+		 * @return {object[]} `{ key, widgetId, label, icon, widget, count, overflow }` per tab.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
 		 */
 		resolvedTabs() {
 			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
+			const max = Number(this.content?.maxVisibleTabs)
+			const hideEmpty = this.content?.hideEmpty === true
+			// How many tabs have taken a place in the strip so far. A tab that
+			// is already going under "More" does not use one up.
+			let placed = 0
 			return tabs.map((tab, index) => {
 				const widgetId = typeof tab === 'string' ? tab : tab?.widgetId
 				const widget = this.availableWidgets.find((w) => w && w.id === widgetId) || null
+				const count = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData)
+				let overflow = (tab && tab.overflow === true) || (hideEmpty && count === 0)
+				if (!overflow) {
+					if (Number.isFinite(max) && max > 0 && placed >= max) {
+						overflow = true
+					} else {
+						placed += 1
+					}
+				}
 				return {
 					key: `${widgetId || 'tab'}-${index}`,
 					widgetId,
 					label: (tab && tab.label) || widgetTitleOf(widget) || widgetId || '',
 					icon: (tab && tab.icon) || widget?.icon || '',
 					widget,
+					count,
+					overflow,
 				}
 			})
 		},
 
+		/**
+		 * Name of the menu that holds the tabs that are not in the strip.
+		 *
+		 * @return {string|undefined} The configured label, or undefined for the default.
+		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+		 */
+		moreLabel() {
+			const label = this.content?.moreLabel
+			return typeof label === 'string' && label !== '' ? label : undefined
+		},
+
 		/**
 		 * The tab currently showing.
 		 *
@@ -429,6 +474,20 @@ export default {
 		},
 	},
 
+	/**
+	 * Open on the first tab that is in the strip. Tab 0 is the default, and
+	 * when tab 0 sits under "More" the strip would open on a tab the author
+	 * chose to tuck away.
+	 *
+	 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+	 */
+	created() {
+		const first = this.resolvedTabs.findIndex((tab) => !tab.overflow)
+		if (first > 0) {
+			this.activeIndex = first
+		}
+	},
+
 	methods: {
 		/**
 		 * Re-emit a geo child's save so the surface can reload the record.

package/src/components/CnWeekStripWidget/CnWeekStripWidget.md

@@ -0,0 +1,31 @@
+The current week as day columns. This example uses static items; in an app the items usually come from an OpenRegister `source`.
+
+```vue
+<template>
+  <CnWeekStripWidget :content="content" />
+</template>
+
+<script>
+export default {
+  data() {
+    const day = (offset) => {
+      const now = new Date()
+      const monday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - ((now.getDay() + 6) % 7) + offset)
+      return [monday.getFullYear(), String(monday.getMonth() + 1).padStart(2, '0'), String(monday.getDate()).padStart(2, '0')].join('-')
+    }
+    return {
+      content: {
+        emptyText: 'No deadlines',
+        items: [
+          { title: 'Parking permits city centre', meta: '2026-0061 · Woo', date: day(0) },
+          { title: 'Objection parking fine', meta: '2026-0074 · Objection', date: day(2) },
+          { title: 'Tender youth care', meta: '2026-0058 · Woo', date: day(4) },
+        ],
+      },
+    }
+  },
+}
+</script>
+```
+
+Props: `content` holds the configuration (see the component description), `translate` is an optional translate function for the texts in it, and `now` sets the moment the strip treats as now.