@conduction/nextcloud-vue 2.98.0 → 2.100.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/CnSetupWizard/CnSetupWizard.vue

@@ -69,7 +69,12 @@
 
 				<!-- choice -->
 				<template v-else-if="step.type === 'choice'">
-					<NcNoteCard v-if="step.body" type="info">
+					<!-- The board sets the intro as a plain paragraph above the
+					     cards (DqInstellen); the Nextcloud look keeps the note. -->
+					<p v-if="step.body && isBoard" class="cn-setup-step__intro" data-testid="cn-setup-step-intro">
+						{{ stepBody(step) }}
+					</p>
+					<NcNoteCard v-else-if="step.body" type="info">
 						{{ stepBody(step) }}
 					</NcNoteCard>
 					<CnChoiceCards
@@ -119,6 +124,9 @@
 					<NcNoteCard v-if="isChoiceDisabled(step)" type="warning">
 						{{ dependsOnHint(step) }}
 					</NcNoteCard>
+					<p v-if="stepNote(step)" class="cn-setup-step__note" data-testid="cn-setup-step-note">
+						{{ stepNote(step) }}
+					</p>
 				</template>
 
 				<!-- config-fields -->
@@ -212,6 +220,7 @@ import CnChoiceCards from '../CnChoiceCards/CnChoiceCards.vue'
 import CnLeafDependencySettings from '../CnLeafDependencySettings/CnLeafDependencySettings.vue'
 import CnWizardDialog from '../CnWizardDialog/CnWizardDialog.vue'
 import { checkDependencies, isDependencyResolved, missingRequiredApps, readServerAppStatuses } from '../../composables/useDependencyCheck.js'
+import { useLook } from '../../composables/useLook.js'
 import { useSetupStatus } from '../../composables/useSetupStatus.js'
 import { fieldsFromSchema } from '../../utils/schema.js'
 
@@ -428,12 +437,13 @@ export default {
 	 * @return {object} `setupStatus` / `setupStatusLoading` for the option resolver.
 	 */
 	setup(props) {
+		const { isBoard } = useLook()
 		const wantsSource = (props.steps || []).some((s) => s && s.optionsSource)
 		if (!wantsSource) {
-			return {}
+			return { isBoard }
 		}
 		const { status, loading } = useSetupStatus(props.appId, { setup: { steps: props.steps } })
-		return { setupStatus: status, setupStatusLoading: loading }
+		return { isBoard, setupStatus: status, setupStatusLoading: loading }
 	},
 
 	data() {
@@ -793,6 +803,18 @@ export default {
 			return raw === '' ? '' : this.cnTranslate(raw)
 		},
 
+		/**
+		 * The footnote under a choice step's options, from the step's `note`
+		 * (or `footnote`), translated like the body.
+		 *
+		 * @param {object} step The step declaration.
+		 * @return {string} The translated footnote, or ''.
+		 */
+		stepNote(step) {
+			const raw = (step && (step.note || step.footnote)) || ''
+			return raw === '' ? '' : this.cnTranslate(raw)
+		},
+
 		stepSlot(step) {
 			return 'step-' + step.id
 		},
@@ -1338,6 +1360,18 @@ export default {
 	gap: 12px;
 }
 
+.cn-setup-step__intro {
+	margin: 0;
+	font-size: 15px;
+	line-height: 1.5;
+}
+
+.cn-setup-step__note {
+	margin: 0;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-setup-step__nav {
 	display: flex;
 	justify-content: flex-end;

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -76,6 +76,7 @@ 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'

package/src/components/CnWizardDialog/CnWizardDialog.vue

@@ -208,7 +208,7 @@ export default {
 		 */
 		dialogTitle: {
 			type: String,
-			default: 'Wizard',
+			default: () => t('nextcloud-vue', 'Wizard'),
 		},
 
 		/**
@@ -279,17 +279,17 @@ export default {
 		submitIcon: { type: [Object, Function], default: null },
 
 		/** Cancel-button label (wizard phase). */
-		cancelLabel: { type: String, default: 'Cancel' },
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
 		/** Back-button label. */
-		backLabel: { type: String, default: 'Back' },
+		backLabel: { type: String, default: () => t('nextcloud-vue', 'Back') },
 		/** Next-button label (intermediate steps). */
-		nextLabel: { type: String, default: 'Next' },
+		nextLabel: { type: String, default: () => t('nextcloud-vue', 'Next') },
 		/** Submit-button label (last step). */
-		submitLabel: { type: String, default: 'Submit' },
+		submitLabel: { type: String, default: () => t('nextcloud-vue', 'Submit') },
 		/** Close-button label (result phase). */
-		closeLabel: { type: String, default: 'Close' },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
 		/** Success banner default text when result.message is empty. */
-		successText: { type: String, default: 'Done.' },
+		successText: { type: String, default: () => t('nextcloud-vue', 'Done.') },
 		/**
 		 * Whether the dialog can be dismissed (Cancel button, ESC, backdrop
 		 * click) before reaching the result phase. `false` hides Cancel and