@conduction/nextcloud-vue 2.97.0 → 2.99.0

package/src/components/CnSettingsPage/CnSettingsPage.vue

@@ -172,34 +172,9 @@
 								:field="field"
 								:value="formData[field.key]"
 								:onInput="(v) => updateField(field.key, v)">
-								<NcCheckboxRadioSwitch
-									v-if="field.type === 'boolean'"
-									:modelValue="!!formData[field.key]"
-									@update:modelValue="updateField(field.key, $event)">
-									{{ resolveLabel(field.label) }}
-								</NcCheckboxRadioSwitch>
-								<NcTextField
-									v-else-if="field.type === 'number'"
-									:label="resolveLabel(field.label)"
-									type="number"
-									:modelValue="String(fieldValue(field.key, ''))"
-									@update:modelValue="updateField(field.key, $event === '' ? null : Number($event))" />
-								<NcTextField
-									v-else-if="field.type === 'password'"
-									:label="resolveLabel(field.label)"
-									type="password"
-									:modelValue="fieldValue(field.key, '')"
-									@update:modelValue="updateField(field.key, $event)" />
-								<NcSelect
-									v-else-if="field.type === 'enum' && Array.isArray(field.options)"
-									:modelValue="selectedOption(field)"
-									:options="field.options"
-									:inputLabel="resolveLabel(field.label)"
-									@update:modelValue="updateField(field.key, optionValue($event))" />
-								<NcTextField
-									v-else
-									:label="resolveLabel(field.label)"
-									:modelValue="fieldValue(field.key, '')"
+								<CnSettingsField
+									:field="{ ...field, label: resolveLabel(field.label) }"
+									:modelValue="formData[field.key]"
 									@update:modelValue="updateField(field.key, $event)" />
 							</slot>
 							<small
@@ -297,14 +272,12 @@ import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import {
 	NcButton,
-	NcCheckboxRadioSwitch,
 	NcLoadingIcon,
-	NcSelect,
-	NcTextField,
 } from '@nextcloud/vue'
 import ContentSave from 'vue-material-design-icons/ContentSave.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnRegisterMapping from '../CnRegisterMapping/CnRegisterMapping.vue'
+import CnSettingsField from '../CnSettingsField/CnSettingsField.vue'
 import CnToggleTableWidget from '../CnToggleTableWidget/CnToggleTableWidget.vue'
 import CnVersionInfoCard from '../CnVersionInfoCard/CnVersionInfoCard.vue'
 import { useLook } from '../../composables/useLook.js'
@@ -356,7 +329,7 @@ const BUILTIN_SETTINGS_WIDGETS = Object.freeze({
  * three body kinds:
  *
  *  - `fields[]`    — flat form fields (back-compat default).
- *    Each field's `type` controls which input renders:
+ *    Each field's `type` controls which input CnSettingsField renders:
  *      - `boolean` → NcCheckboxRadioSwitch
  *      - `number` → NcTextField (type=number)
  *      - `string` → NcTextField (default)
@@ -409,11 +382,9 @@ export default {
 
 	components: {
 		NcButton,
-		NcCheckboxRadioSwitch,
 		NcLoadingIcon,
-		NcSelect,
-		NcTextField,
 		ContentSave,
+		CnSettingsField,
 		CnBuildiqEditButton,
 		CnSettingsCard,
 		CnSettingsSection,
@@ -823,57 +794,6 @@ export default {
 	},
 
 	methods: {
-		// Coalesce a field value to a fallback when null / undefined.
-		// Used in template bindings instead of `formData[key] ?? ''` because
-		// vue-template-es2015-compiler (the Rollup VuePlugin's parser) does
-		// not accept ES2020 nullish-coalescing inside template expressions.
-		fieldValue(key, fallback) {
-			const v = this.formData[key]
-			return (v === null || v === undefined) ? fallback : v
-		},
-
-		// Resolve the currently-selected option for an enum field.
-		// `field.options` may be an array of strings/numbers OR an array
-		// of `{ label, value }`-shaped objects. NcSelect needs the actual
-		// option entry (not the bare value) to render the selection
-		// correctly, so this resolver looks up the matching object form
-		// when a primitive value is stored. Returns `null` when nothing
-		// is selected so NcSelect renders the empty state instead of
-		// emitting a Vue warning about an undefined `value` prop.
-		selectedOption(field) {
-			const v = this.formData[field.key]
-			if (v === null || v === undefined) {
-				return null
-			}
-			if (!Array.isArray(field.options)) {
-				return v
-			}
-			for (const opt of field.options) {
-				if (opt && typeof opt === 'object') {
-					if (opt.value === v) {
-						return opt
-					}
-				} else if (opt === v) {
-					return opt
-				}
-			}
-			return v
-		},
-
-		// Inverse of `selectedOption` — extract the storable value from
-		// whatever NcSelect emits. NcSelect emits the full option entry
-		// when options are objects, the primitive when options are
-		// primitives, or `null` on clear.
-		optionValue(emitted) {
-			if (emitted === null || emitted === undefined) {
-				return null
-			}
-			if (typeof emitted === 'object' && 'value' in emitted) {
-				return emitted.value
-			}
-			return emitted
-		},
-
 		cloneInitial() {
 			const merged = { ...(this.initialValues || {}) }
 			// Collect every section across both modes (flat

package/src/components/CnUserSettingsDialog/CnUserSettingsDialog.vue

@@ -21,7 +21,24 @@
 				class="cn-user-settings-dialog__nav"
 				:aria-label="navLabel"
 				data-testid="cn-user-settings-nav">
-				<ul>
+				<!-- `nextcloudLinks`: Nextcloud's own personal settings first, as
+				     links, then one entry for this app holding its sections. -->
+				<ul v-if="ncLinks.length > 0" class="cn-user-settings-dialog__nc-links" data-testid="cn-user-settings-nc-links">
+					<li v-for="link in ncLinks" :key="link.key">
+						<a :href="link.href" class="cn-user-settings-dialog__nav-link">
+							<span v-if="link.icon" class="cn-user-settings-dialog__nav-icon" aria-hidden="true">
+								<CnIcon :name="link.icon" :size="18" />
+							</span>
+							<span>{{ link.label }}</span>
+						</a>
+					</li>
+				</ul>
+				<p v-if="ncLinks.length > 0 && appName"
+					class="cn-user-settings-dialog__group"
+					data-testid="cn-user-settings-app-group">
+					{{ appName }}
+				</p>
+				<ul :class="{ 'cn-user-settings-dialog__group-sections': ncLinks.length > 0 }">
 					<li v-for="section in sections" :key="section.id">
 						<a
 							:href="`#settings-section_${section.id}`"
@@ -41,6 +58,14 @@
 			<div class="cn-user-settings-dialog__sections">
 				<!-- @slot default NcAppSettingsSection children; each registers itself in the navigation. -->
 				<slot />
+				<!-- A section's `#icon` also stands before its heading. -->
+				<template v-for="section in sections" :key="`heading-icon-${section.id}-${section.name}`">
+					<Teleport v-if="section.icon && headingTargets.includes(section.id)" :to="`#settings-section_${section.id}--label`">
+						<span class="cn-user-settings-dialog__heading-icon" aria-hidden="true" :data-testid="`cn-user-settings-heading-icon-${section.id}`">
+							<CnVNodes :vnodes="section.icon" />
+						</span>
+					</Teleport>
+				</template>
 			</div>
 		</div>
 		<template #actions>
@@ -56,9 +81,11 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
 import { NcButton } from '@nextcloud/vue'
-import { markRaw } from 'vue'
+import { cloneVNode, markRaw, ref } from 'vue'
 import CnDialog from '../CnDialog/CnDialog.vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
 
 /**
  * The key NcAppSettingsSection injects to register itself with its dialog
@@ -66,20 +93,26 @@ import CnDialog from '../CnDialog/CnDialog.vue'
  */
 const REGISTRATION_KEY = Symbol.for('NcAppSettingsDialog:registration')
 
+/** The key NcAppSettingsSection injects for the legacy design flag. */
+const LEGACY_DESIGN_KEY = Symbol.for('NcAppSettingsDialog:legacy')
+
 /** Renders a section's icon vnodes as they were registered. */
 const CnVNodes = {
 	name: 'CnVNodes',
 	props: { vnodes: { type: [Array, Object], default: null } },
 	render() {
-		return this.vnodes
+		// A section's icon is drawn twice (navigation and heading), so each draw gets its own copy.
+		const list = Array.isArray(this.vnodes) ? this.vnodes : [this.vnodes]
+		return list.map((vnode) => (vnode && typeof vnode === 'object' ? cloneVNode(vnode) : vnode))
 	},
 }
 
 /**
  * CnUserSettingsDialog - the user settings dialog in the board look (board
  * PqPersoonlijk): eyebrow, title and subtitle, a left navigation listing the
- * sections with their icons, the sections themselves, and a footer with a
- * note that changes save straight away and a Close button.
+ * sections with their icons, the current section (the others stay mounted
+ * but hidden), and a footer with a note that changes save straight away and
+ * a Close button.
  *
  * The sections stay the app's: any `NcAppSettingsSection` in the default slot
  * registers itself with this dialog exactly as it does with
@@ -93,7 +126,7 @@ const CnVNodes = {
 export default {
 	name: 'CnUserSettingsDialog',
 
-	components: { CnDialog, CnVNodes, NcButton },
+	components: { CnDialog, CnIcon, CnVNodes, NcButton },
 
 	provide() {
 		return {
@@ -101,6 +134,9 @@ export default {
 				registerSection: this.registerSection,
 				unregisterSection: this.unregisterSection,
 			},
+
+			// NcAppSettingsSection also asks its dialog whether to use the legacy design.
+			[LEGACY_DESIGN_KEY]: ref(false),
 		}
 	},
 
@@ -113,8 +149,15 @@ export default {
 		eyebrow: { type: String, default: () => t('nextcloud-vue', 'Your account') },
 		/** Sentence under the title. */
 		subtitle: { type: String, default: () => t('nextcloud-vue', 'Only for you. Colleagues keep their own settings.') },
-		/** The app's name, after the footer note. */
+		/** The app's name, after the footer note and as the navigation entry holding its sections. */
 		appName: { type: String, default: '' },
+		/**
+		 * Nextcloud's own personal settings, listed first in the navigation as
+		 * links: `[{ label, section? | href?, icon? }]`. `section` is a
+		 * personal settings section id (`/settings/user/<section>`). With any,
+		 * the app's sections sit under one entry named after the app.
+		 */
+		nextcloudLinks: { type: Array, default: () => [] },
 	},
 
 	emits: ['update:open'],
@@ -123,11 +166,30 @@ export default {
 		return {
 			sections: [],
 			selected: '',
+			/** Ids of the sections whose heading is in the page, for the heading icons. */
+			headingTargets: [],
 			picked: false,
 		}
 	},
 
 	computed: {
+		/**
+		 * The Nextcloud links with their URL.
+		 *
+		 * @spec openspec/changes/user-settings-nav-groups/specs/user-settings-board-dialog/spec.md#requirement-the-board-user-settings-navigation-can-list-nextclouds-own-sections-first
+		 * @return {Array<{key: string, label: string, href: string, icon: string}>}
+		 */
+		ncLinks() {
+			return (Array.isArray(this.nextcloudLinks) ? this.nextcloudLinks : [])
+				.filter((link) => link && typeof link === 'object' && typeof link.label === 'string' && link.label !== '' && (link.href || link.section))
+				.map((link, index) => ({
+					key: String(link.section || link.href || index),
+					label: link.label,
+					href: link.href || generateUrl('/settings/user/{section}', { section: String(link.section) }),
+					icon: typeof link.icon === 'string' ? link.icon : '',
+				}))
+		},
+
 		/** @return {object} The board's eyebrow: muted, in sentence case. */
 		eyebrowStyle() {
 			return { '--cn-dialog-eyebrow-transform': 'none', '--cn-dialog-eyebrow-color': 'var(--color-text-maxcontrast)' }
@@ -150,6 +212,21 @@ export default {
 		},
 	},
 
+	watch: {
+		sections() {
+			this.$nextTick(() => {
+				this.headingTargets = typeof document === 'undefined'
+					? []
+					: this.sections.filter((section) => section.icon && document.getElementById(`settings-section_${section.id}--label`)).map((section) => section.id)
+				this.showSelected()
+			})
+		},
+
+		selected() {
+			this.$nextTick(() => this.showSelected())
+		},
+	},
+
 	methods: {
 		/**
 		 * Add a section to the navigation, kept in `order`; a section
@@ -190,9 +267,31 @@ export default {
 		selectSection(id) {
 			this.picked = true
 			this.selected = id
-			const target = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}`) : null
-			if (target && typeof target.scrollIntoView === 'function') {
-				target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+			this.$nextTick(() => {
+				this.showSelected()
+				const heading = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}--label`) : null
+				if (heading) {
+					heading.setAttribute('tabindex', '-1')
+					heading.focus()
+				}
+			})
+		},
+
+		/**
+		 * Show the current section and hide the others. They stay mounted,
+		 * so what a reader typed in one survives a switch.
+		 *
+		 * @spec openspec/changes/user-settings-one-section/specs/user-settings-board-dialog/spec.md#requirement-the-board-user-settings-dialog-shows-one-section-at-a-time
+		 */
+		showSelected() {
+			if (typeof document === 'undefined') {
+				return
+			}
+			for (const section of this.sections) {
+				const el = document.getElementById(`settings-section_${section.id}`)
+				if (el) {
+					el.hidden = section.id !== this.selected
+				}
 			}
 		},
 
@@ -294,6 +393,9 @@ export default {
 	margin: 0 0 12px;
 	font-size: 17px;
 	font-weight: 700;
+	display: flex;
+	align-items: center;
+	gap: 10px;
 }
 
 .cn-user-settings-dialog__note {
@@ -302,4 +404,31 @@ export default {
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
+
+.cn-user-settings-dialog__nc-links {
+	margin-bottom: 2px;
+}
+
+.cn-user-settings-dialog__group {
+	margin: 10px 0 2px;
+	padding: 0 12px;
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+
+.cn-user-settings-dialog__group-sections {
+	padding-inline-start: 12px;
+}
+
+.cn-user-settings-dialog__heading-icon {
+	display: inline-flex;
+	order: -1;
+	color: var(--color-text-maxcontrast);
+}
+
+/* One section at a time: the others are mounted but hidden. */
+.cn-user-settings-dialog__sections :deep(.app-settings-section[hidden]) {
+	display: none;
+}
 </style>

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -75,6 +75,8 @@ import '../CnTasksWidget/index.js'
 import '../CnSectionsWidget/index.js'
 import '../CnFactsWidget/index.js'
 import '../CnDeviceFramesWidget/index.js'
+import '../CnChecklistRunWidget/index.js'
+import '../CnWorkingCalendarWidget/index.js'
 import '../CnPartyActionsWidget/index.js'
 import '../CnFieldListWidget/index.js'
 import '../CnSettingsFormWidget/index.js'