@conduction/nextcloud-vue 2.56.0-beta.6 → 2.56.0-beta.8

package/src/components/CnQuickFilterBar/CnQuickFilterBar.vue

@@ -44,6 +44,10 @@
 					:size="16"
 					class="cn-quick-filter-bar__icon" />
 				<span class="cn-quick-filter-bar__label">{{ entry.tab.label }}</span>
+				<span
+					v-if="countOf(entry) !== null"
+					class="cn-quick-filter-bar__count"
+					data-testid="cn-quick-filter-count">{{ ' ' + countOf(entry) }}</span>
 			</button>
 		</div>
 		<!-- The overflow is a CHIP and not a toolbar button: it is one of the
@@ -96,6 +100,10 @@
 							:size="16"
 							class="cn-quick-filter-bar__icon" />
 						<span class="cn-quick-filter-bar__label">{{ entry.tab.label }}</span>
+						<span
+							v-if="countOf(entry) !== null"
+							class="cn-quick-filter-bar__count"
+							data-testid="cn-quick-filter-count">{{ ' ' + countOf(entry) }}</span>
 					</button>
 				</div>
 			</div>
@@ -231,6 +239,19 @@ export default {
 			default: 0,
 			validator: (v) => Number.isFinite(v) && v >= 0,
 		},
+
+		/**
+		 * How many records each tab matches, keyed by tab index (an array in
+		 * tab order works too). A tab with a number here shows it after its
+		 * label; a tab without one shows no count. A tab can also carry its
+		 * own `count`. `null` (the default) shows no counts at all.
+		 *
+		 * @type {{[index: number]: number}|Array<number|null>|null}
+		 */
+		counts: {
+			type: [Object, Array],
+			default: null,
+		},
 	},
 
 	emits: ['update:active-index', 'update:selected-indices'],
@@ -324,10 +345,19 @@ export default {
 		 * omitted — an empty selection already means "all".
 		 *
 		 * @return {Array<{label: string, index: number, icon: string}>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
 		 */
 		dropdownOptions() {
 			return this.tabs
-				.map((tab, index) => ({ label: tab.label, icon: tab.icon, index, _empty: this.isEmptyFilter(tab) }))
+				.map((tab, index) => {
+					const count = this.countOf({ tab, index })
+					return {
+						label: count === null ? tab.label : `${tab.label} (${count})`,
+						icon: tab.icon,
+						index,
+						_empty: this.isEmptyFilter(tab),
+					}
+				})
 				.filter((o) => !o._empty)
 		},
 
@@ -346,6 +376,20 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The count to show on a tab, or null for none: `counts[index]`
+		 * first, else the tab's own `count`.
+		 *
+		 * @param {{tab: object, index: number}} entry The tab and its index.
+		 * @return {number|null}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		countOf(entry) {
+			const fromProp = this.counts ? this.counts[entry.index] : undefined
+			const value = (fromProp !== undefined && fromProp !== null) ? fromProp : entry.tab.count
+			return (typeof value === 'number' && Number.isFinite(value)) ? value : null
+		},
+
 		/**
 		 * Is tab `i` rendered active in chips mode (handles both single
 		 * `activeIndex` and `multiple` `selectedIndices`).
@@ -501,6 +545,21 @@ export default {
 	line-height: 1;
 }
 
+/* Inherits the chip's own text colour, so it stays readable on the active
+   (primary) fill as well as on the resting one. The count's text starts with
+   a space: the chip is a flex row, so the space is not drawn, but it keeps a
+   screen reader from reading label and count as one word. */
+.cn-quick-filter-bar__count {
+	min-width: 1.5em;
+	padding: 2px 6px;
+	border: 1px solid currentColor;
+	border-radius: var(--border-radius-pill, 10px);
+	font-size: 0.85em;
+	font-weight: 600;
+	line-height: 1;
+	text-align: center;
+}
+
 /* NcPopover wraps its trigger in a plain `<div class="v-popper">`, which as a
    block would drop the chip onto its own line under the strip. */
 .cn-quick-filter-bar > :deep(.v-popper) {

package/src/components/CnSavedViewsControl/CnSavedViewsControl.vue

@@ -182,6 +182,18 @@ export default {
 			type: Number,
 			default: 3,
 		},
+
+		/**
+		 * How many records each view matches, keyed by view id (or slug). A
+		 * view with a number here shows it after its name; a view can also
+		 * carry its own `count`. `null` (the default) shows no counts.
+		 *
+		 * @type {{[viewId: string]: number}|null}
+		 */
+		counts: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	emits: ['apply', 'delete-request', 'save-request'],
@@ -245,9 +257,42 @@ export default {
 		 *
 		 * @param {object} row The row from buildViewTree().
 		 * @return {string} The name.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
 		 */
 		rowName(row) {
-			return `${'\u2007'.repeat(row.depth * 2)}${row.view.name}`
+			return `${'\u2007'.repeat(row.depth * 2)}${this.nameWithCount(row.view)}`
+		},
+
+		/**
+		 * The number of records a view matches, or null when none is known:
+		 * `counts[id]` (or `counts[slug]`) first, else the view's own `count`.
+		 *
+		 * @param {object} view The saved view.
+		 * @return {number|null}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		countOf(view) {
+			const counts = this.counts || {}
+			let value = counts[view.id]
+			if (value === undefined || value === null) {
+				value = counts[view.slug]
+			}
+			if (value === undefined || value === null) {
+				value = view.count
+			}
+			return (typeof value === 'number' && Number.isFinite(value)) ? value : null
+		},
+
+		/**
+		 * A view's name, followed by its count when one is known.
+		 *
+		 * @param {object} view The saved view.
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		nameWithCount(view) {
+			const count = this.countOf(view)
+			return count === null ? view.name : `${view.name} (${count})`
 		},
 
 		/**
@@ -259,11 +304,13 @@ export default {
 		 *
 		 * @param {object} row The row from buildViewTree().
 		 * @return {string} The accessible label.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
 		 */
 		rowLabel(row) {
+			const viewName = this.nameWithCount(row.view)
 			const name = row.depth === 0
-				? row.view.name
-				: t('nextcloud-vue', '{name}, level {level}', { name: row.view.name, level: row.depth + 1 })
+				? viewName
+				: t('nextcloud-vue', '{name}, level {level}', { name: viewName, level: row.depth + 1 })
 
 			if (row.orphaned !== true) {
 				return name

package/src/components/CnSegmentedControl/CnSegmentedControl.md

@@ -0,0 +1,46 @@
+A switch between a few views of the same thing. It is a radio group: the arrow keys move the choice.
+
+```vue
+<template>
+  <div>
+    <CnSegmentedControl
+      v-model="view"
+      aria-label="View"
+      :options="[
+        { value: 'mine', label: 'My work' },
+        { value: 'team', label: 'My team', count: 12 },
+      ]" />
+    <p>Chosen: {{ view }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() { return { view: 'mine' } },
+}
+</script>
+```
+
+Stretched, with a disabled option:
+
+```vue
+<template>
+  <CnSegmentedControl
+    v-model="period"
+    stretch
+    aria-label="Period"
+    :options="[
+      { value: 'week', label: 'Week' },
+      { value: 'month', label: 'Month' },
+      { value: 'year', label: 'Year', disabled: true },
+    ]" />
+</template>
+
+<script>
+export default {
+  data() { return { period: 'week' } },
+}
+</script>
+```
+
+Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), and `stretch` fills the width.

package/src/components/CnSegmentedControl/CnSegmentedControl.vue

@@ -0,0 +1,291 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div
+		class="cn-segmented-control"
+		:class="{ 'cn-segmented-control--stretch': stretch }"
+		role="radiogroup"
+		:aria-label="ariaLabel || null"
+		:aria-labelledby="ariaLabelledby || null"
+		@keydown="onKeydown">
+		<button
+			v-for="(option, index) in normalizedOptions"
+			:key="option.key"
+			type="button"
+			role="radio"
+			class="cn-segmented-control__option"
+			:class="{ 'cn-segmented-control__option--checked': isChecked(option) }"
+			:aria-checked="isChecked(option) ? 'true' : 'false'"
+			:tabindex="index === focusableIndex ? 0 : -1"
+			:disabled="option.disabled || null"
+			:data-value="option.key"
+			@click="select(option)">
+			<!-- @slot option Replaces the content of one option. -->
+			<!-- @binding {object} option The option: `{ value, label, disabled, count }`. -->
+			<!-- @binding {boolean} checked Whether this option is the chosen one. -->
+			<slot name="option" :option="option" :checked="isChecked(option)">
+				<span class="cn-segmented-control__label">{{ option.label }}</span>
+				<!-- The leading space is not drawn in this flex row; it keeps a
+				     screen reader from reading label and count as one word. -->
+				<span v-if="option.count !== null" class="cn-segmented-control__count">{{ ' ' + option.count }}</span>
+			</slot>
+		</button>
+	</div>
+</template>
+
+<script>
+/**
+ * CnSegmentedControl is a switch between a few views of the same thing, such
+ * as "My work / My team". One option is always the chosen one.
+ *
+ * It is a radio group: screen readers announce the group and which option is
+ * checked, the arrow keys move the choice, and Tab enters and leaves the group
+ * in one step. Give it a name with `aria-label` (or `aria-labelledby`).
+ *
+ * ```vue
+ * <CnSegmentedControl
+ *   v-model="view"
+ *   aria-label="View"
+ *   :options="[
+ *     { value: 'mine', label: 'My work' },
+ *     { value: 'team', label: 'My team' },
+ *   ]" />
+ * ```
+ *
+ * To switch between panels of content, use `CnTabs` with `variant="segmented"`
+ * instead: that keeps the tab and panel semantics and looks the same.
+ */
+export default {
+	name: 'CnSegmentedControl',
+
+	props: {
+		/**
+		 * The options. Each is `{ value, label, disabled?, count? }`, or a
+		 * plain string that is both the value and the label. `count` shows a
+		 * number after the label.
+		 *
+		 * @type {Array<string|{value: (string|number|boolean), label: string, disabled?: boolean, count?: number}>}
+		 */
+		options: {
+			type: Array,
+			required: true,
+		},
+
+		/**
+		 * The value of the chosen option (v-model).
+		 *
+		 * @type {string|number|boolean|null}
+		 */
+		modelValue: {
+			type: [Boolean, String, Number],
+			default: null,
+		},
+
+		/** Accessible name of the group, read out when focus enters it. */
+		ariaLabel: {
+			type: String,
+			default: '',
+		},
+
+		/** Id of an element that names the group, as an alternative to `ariaLabel`. */
+		ariaLabelledby: {
+			type: String,
+			default: '',
+		},
+
+		/** Stretch the control to the full width, with options of equal width. */
+		stretch: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	emits: [
+		/**
+		 * Emitted with the value of the newly chosen option.
+		 *
+		 * @event update:modelValue
+		 * @type {string|number|boolean}
+		 */
+		'update:modelValue',
+	],
+
+	computed: {
+		/**
+		 * The options in one shape.
+		 *
+		 * @return {Array<{key: string, value: (string|number|boolean), label: string, disabled: boolean, count: (number|null)}>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		normalizedOptions() {
+			return (Array.isArray(this.options) ? this.options : [])
+				.filter((option) => option !== null && option !== undefined)
+				.map((option) => {
+					if (typeof option !== 'object') {
+						return { key: String(option), value: option, label: String(option), disabled: false, count: null }
+					}
+					return {
+						key: String(option.value),
+						value: option.value,
+						label: String(option.label ?? option.value),
+						disabled: option.disabled === true,
+						count: Number.isFinite(option.count) ? option.count : null,
+					}
+				})
+		},
+
+		/**
+		 * The option Tab lands on: the chosen one, else the first enabled one.
+		 *
+		 * @return {number} Its index, or -1 when no option can take focus.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		focusableIndex() {
+			const checked = this.normalizedOptions.findIndex((option) => this.isChecked(option) && !option.disabled)
+			if (checked !== -1) {
+				return checked
+			}
+			return this.normalizedOptions.findIndex((option) => !option.disabled)
+		},
+	},
+
+	methods: {
+		/**
+		 * Whether an option is the chosen one.
+		 *
+		 * @param {{value: (string|number|boolean)}} option The option.
+		 * @return {boolean}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		isChecked(option) {
+			return this.modelValue !== null && String(option.value) === String(this.modelValue)
+		},
+
+		/**
+		 * Choose an option.
+		 *
+		 * @param {{value: (string|number|boolean), disabled: boolean}} option The option.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		select(option) {
+			if (option.disabled || this.isChecked(option)) {
+				return
+			}
+			this.$emit('update:modelValue', option.value)
+		},
+
+		/**
+		 * Arrow keys, Home and End move the choice, as in a native radio
+		 * group. Disabled options are passed over and the ends wrap around.
+		 *
+		 * @param {KeyboardEvent} event The key press.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-segmented-control
+		 */
+		onKeydown(event) {
+			const enabled = this.normalizedOptions
+				.map((option, index) => ({ option, index }))
+				.filter((entry) => !entry.option.disabled)
+			if (enabled.length === 0) {
+				return
+			}
+			const buttons = Array.from(this.$el.querySelectorAll('[role="radio"]'))
+			const focused = buttons.indexOf(document.activeElement)
+			const from = focused !== -1 ? focused : this.focusableIndex
+			let position = enabled.findIndex((entry) => entry.index === from)
+			if (position === -1) {
+				position = 0
+			}
+			if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+				position = (position + 1) % enabled.length
+			} else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+				position = (position - 1 + enabled.length) % enabled.length
+			} else if (event.key === 'Home') {
+				position = 0
+			} else if (event.key === 'End') {
+				position = enabled.length - 1
+			} else {
+				return
+			}
+			event.preventDefault()
+			const target = enabled[position]
+			this.select(target.option)
+			if (buttons[target.index] && typeof buttons[target.index].focus === 'function') {
+				buttons[target.index].focus()
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-segmented-control {
+	display: inline-flex;
+	gap: 4px;
+	max-width: 100%;
+	padding: 4px;
+	border-radius: var(--border-radius-container, var(--border-radius-large, 10px));
+	background-color: var(--color-background-dark);
+	overflow-x: auto;
+}
+
+.cn-segmented-control--stretch {
+	display: flex;
+}
+
+.cn-segmented-control--stretch .cn-segmented-control__option {
+	flex: 1 1 0;
+}
+
+/* The parent class outscores Nextcloud's server rule that gives every plain
+   `button` a margin and a border. */
+.cn-segmented-control .cn-segmented-control__option {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	box-sizing: border-box;
+	min-height: 36px;
+	margin: 0;
+	padding: 0 16px;
+	border: 1px solid transparent;
+	border-radius: var(--border-radius-element, var(--border-radius-large, 8px));
+	background-color: transparent;
+	/* Full-contrast label on every option: the choice is carried by the
+	   raised surface, not by dimming the others. */
+	color: var(--color-main-text);
+	font: inherit;
+	font-weight: 600;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.cn-segmented-control .cn-segmented-control__option:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-segmented-control .cn-segmented-control__option:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+/* The border survives forced-colours mode, which drops background and shadow. */
+.cn-segmented-control .cn-segmented-control__option--checked,
+.cn-segmented-control .cn-segmented-control__option--checked:hover {
+	border-color: var(--color-border-dark);
+	background-color: var(--color-main-background);
+	box-shadow: 0 1px 2px var(--color-box-shadow);
+}
+
+.cn-segmented-control .cn-segmented-control__option[disabled] {
+	cursor: default;
+	opacity: 0.5;
+}
+
+.cn-segmented-control__count {
+	font-weight: 400;
+}
+</style>

package/src/components/CnSegmentedControl/index.js

@@ -0,0 +1,4 @@
+import CnSegmentedControl from './CnSegmentedControl.vue'
+
+export default CnSegmentedControl
+export { CnSegmentedControl }

package/src/components/CnStackedBarWidget/CnStackedBarWidget.md

@@ -0,0 +1,15 @@
+One bar cut into segments, with a legend that carries the numbers. This example uses static segments; in an app they usually come from an OpenRegister `source` with `groupBy`.
+
+```vue
+<CnStackedBarWidget
+  :content="{
+    segments: [
+      { label: 'Received', value: 3 },
+      { label: 'In progress', value: 6 },
+      { label: 'Decision', value: 3 },
+      { label: 'Publish', value: 2 },
+    ],
+  }" />
+```
+
+Props: `content` holds the configuration (see the component description) and `translate` is an optional translate function for the labels in it.