@conduction/nextcloud-vue 2.74.0 → 2.75.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 38245574 bytes
-sha256: a5678854a3205a4621af802be47ea65067c29bb280f4f1765558f532f8d9e13c
+size: 38285312 bytes
+sha256: 91421df55f0b2ab43c1c2b9428d1808f048aa4d3a8a0909a9681e4f49b38b627

package/dist/nextcloud-vue.css

@@ -795,7 +795,7 @@
 }
 
 /* An invalid field: 2px error border on the control, 4px edge on the group. */
-.cn-look-board .cn-form-field--invalid input,
+.cn-look-board .cn-form-field--invalid input:not([type='checkbox']):not([type='radio']),
 .cn-look-board .cn-form-field--invalid textarea,
 .cn-look-board .cn-form-field--invalid .select {
 	border: var(--cn-field-error-border) solid var(--color-error);
@@ -38840,6 +38840,71 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 
 
+/* The host is one flex item at the start of Nextcloud's header. */
+.cn-brand-bar-host {
+	flex: none;
+	display: flex;
+	align-items: center;
+	height: 100%;
+	margin-inline-end: 12px;
+}
+.cn-brand-bar {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: var(--cn-board-brand-width, 237px);
+}
+.cn-brand-bar__brand {
+	flex: 1 1 0;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+	min-height: 48px;
+	max-height: 100%;
+	padding: 0 6px;
+	border-radius: 8px;
+	color: var(--color-background-plain-text, var(--color-main-text));
+}
+.cn-brand-bar__emblem {
+	flex: none;
+	height: var(--cn-nav-emblem-size, 34px);
+	width: auto;
+	object-fit: contain;
+}
+.cn-brand-bar__emblem--theme {
+	display: inline-block;
+	width: var(--cn-nav-emblem-size, 34px);
+	background: var(--nldesign-emblem-url) center / contain no-repeat;
+}
+.cn-brand-bar__text {
+	display: flex;
+	flex-direction: column;
+	line-height: 1.15;
+	min-width: 0;
+}
+.cn-brand-bar__caption {
+	font-size: 13px;
+	white-space: nowrap;
+	opacity: 0.8;
+}
+.cn-brand-bar__name {
+	font-size: 18px;
+	font-weight: 700;
+	white-space: nowrap;
+}
+.cn-brand-bar__divider {
+	flex: none;
+	width: 1px;
+	height: 28px;
+	background: currentColor;
+	opacity: 0.25;
+	color: var(--color-background-plain-text, var(--color-main-text));
+}
+
+
 .cn-notif-prefs__intro[data-v-72cc0056] {
 	margin-bottom: 12px;
 	color: var(--color-text-maxcontrast);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.74.0",
+  "version": "2.75.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAppNav/CnAppNav.vue

@@ -75,7 +75,7 @@
 -->
 <template>
 	<NcAppNavigation :aria-label="ariaLabel" data-testid="cn-nav">
-		<template v-if="$slots.search || $slots.brand || resolvedBrand" #search>
+		<template v-if="$slots.search || $slots.brand || navBrand" #search>
 			<!--
 				@slot brand
 				@description Replace the brand block at the very top of the
@@ -86,7 +86,7 @@
 			-->
 			<slot name="brand" :brand="resolvedBrand">
 				<div
-					v-if="resolvedBrand"
+					v-if="navBrand"
 					class="cn-app-nav__brand"
 					data-testid="cn-nav-brand">
 					<!-- Decorative beside a name: the name already says whose
@@ -481,6 +481,7 @@ import CnMenuItemIcon from '../CnMenuWidget/CnMenuItemIcon.vue'
 import { useLook } from '../../composables/useLook.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { isSvgPath } from '../../utils/iconUtils.js'
+import { resolveBrand } from '../../utils/resolveBrand.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
 // The legacy `icon-*` → MDI bridge lives beside CnIcon now, so the menu EDITOR
@@ -579,6 +580,12 @@ export default {
 
 	inject: {
 		cnManifest: { default: null },
+		/**
+		 * Provided by CnAppRoot as true while the board look draws the brand
+		 * block in Nextcloud's header (screens-brand-block-top-bar): the
+		 * navigation then skips its own.
+		 */
+		cnBrandInHeader: { default: false },
 		cnTranslate: { default: () => (key) => key },
 		/**
 		 * Provided by CnAppRoot — opens the host app's
@@ -808,6 +815,17 @@ export default {
 			return this.translate ?? this.cnTranslate
 		},
 
+		/**
+		 * The brand the navigation draws itself: the resolved brand, or null
+		 * while the app's top bar draws it.
+		 *
+		 * @spec openspec/changes/screens-brand-block-top-bar/specs/layout-components/spec.md#requirement-the-navigation-does-not-draw-a-brand-block-the-bar-already-draws
+		 * @return {object|null}
+		 */
+		navBrand() {
+			return this.cnBrandInHeader ? null : this.resolvedBrand
+		},
+
 		/**
 		 * The brand to draw: the `brand` prop, else the manifest's
 		 * `nav.brand`. Name and caption go through the translate function,
@@ -819,20 +837,7 @@ export default {
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-navigation-brand
 		 */
 		resolvedBrand() {
-			const declared = this.brand ?? this.effectiveManifest?.nav?.brand
-			if (!declared || typeof declared !== 'object') {
-				return null
-			}
-			const text = (value) => (typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : '')
-			const brand = {
-				logo: typeof declared.logo === 'string' ? declared.logo : '',
-				// A URL, or `true` for the theme's emblem (--nldesign-emblem-url).
-				emblem: declared.emblem === true ? true : (typeof declared.emblem === 'string' ? declared.emblem : ''),
-				name: text(declared.name),
-				caption: text(declared.caption),
-				alt: text(declared.alt),
-			}
-			return (brand.logo || brand.emblem || brand.name || brand.caption) ? brand : null
+			return resolveBrand(this.brand ?? this.effectiveManifest?.nav?.brand, (value) => this.effectiveTranslate(value))
 		},
 
 		/**

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -189,6 +189,8 @@
 
 		<!-- Phase 3: shell -->
 		<template v-else>
+			<!-- The brand block in Nextcloud's own header (board look); teleported, renders nothing here. -->
+			<CnBrandBar v-if="brandInHeader" :brand="resolvedBrandBlock" @unavailable="headerMissing = true" />
 			<!--
 			  @slot menu
 			  @description Left-rail navigation surface. Default:
@@ -681,6 +683,7 @@ import Restart from 'vue-material-design-icons/Restart.vue'
 import CnAiCompanion from '../CnAiCompanion/CnAiCompanion.vue'
 import CnAppLoading from '../CnAppLoading/CnAppLoading.vue'
 import CnAppNav from '../CnAppNav/CnAppNav.vue'
+import CnBrandBar from '../CnBrandBar/CnBrandBar.vue'
 import CnCommandPalette from '../CnCommandPalette/CnCommandPalette.vue'
 import CnCredentials from '../CnCredentials/CnCredentials.vue'
 import CnDependencyMissing from '../CnDependencyMissing/CnDependencyMissing.vue'
@@ -721,6 +724,7 @@ import { DEFAULT_FORGE, resolveForge } from '../../utils/forge.js'
 import { BUILT_IN_KB_PROVIDERS } from '../../utils/kbSearchProviders.js'
 import { createManifestTranslate } from '../../utils/manifestTranslate.js'
 import { installModalStack, uninstallModalStack } from '../../utils/modalStack.js'
+import { resolveBrand } from '../../utils/resolveBrand.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
 
@@ -781,6 +785,7 @@ export default {
 	name: 'CnAppRoot',
 
 	components: {
+		CnBrandBar,
 		NcAppContent,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
@@ -831,6 +836,9 @@ export default {
 			// value once, so a getter would freeze the look at creation.
 			cnLook: computed(() => self.resolvedLook),
 
+			// True while CnBrandBar draws the block in Nextcloud's header, so CnAppNav skips its own.
+			cnBrandInHeader: computed(() => self.brandInHeader),
+
 			get cnManifest() {
 				return self.manifestEditor ? self.manifestEditor.source.value : self.manifest
 			},
@@ -1591,6 +1599,19 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * The brand block (`{ logo, emblem, name, caption, alt, placement }`)
+		 * the board look draws at the start of Nextcloud's header. Empty falls back
+		 * to the manifest's `nav.brand`. `placement: "nav"` keeps the block
+		 * in the navigation.
+		 *
+		 * @type {object|null}
+		 */
+		brand: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Title rendered at the top of the user-settings modal
 		 * (NcAppSettingsDialog `name` prop). Defaults to the
@@ -1790,6 +1811,12 @@ export default {
 	data() {
 		const willCheck = Array.isArray(this.requiresApps) && this.requiresApps.length > 0
 		return {
+			// Nextcloud's own header, present on a server-rendered page; the
+			// brand block goes into it (CnBrandBar). Read once at creation so
+			// the navigation never draws a block that then moves.
+			headerPresent: typeof document !== 'undefined' && !!document.getElementById('header'),
+			// Set when CnBrandBar finds the header gone: the navigation draws the block.
+			headerMissing: false,
 			capabilitiesLoading: willCheck,
 			missingApps: [],
 			guardError: null,
@@ -2062,6 +2089,32 @@ export default {
 			return (this.look || this.manifest?.look) === 'board' ? 'board' : 'nextcloud'
 		},
 
+		/**
+		 * The brand CnBrandBar draws in the header: the `brand` prop, else the manifest's
+		 * `nav.brand`, read into one shape.
+		 *
+		 * @return {object|null} The resolved brand, or null.
+		 */
+		resolvedBrandBlock() {
+			return resolveBrand(this.brand || this.manifest?.nav?.brand, (text) => this.manifestTranslate(text))
+		},
+
+		/**
+		 * Whether CnBrandBar draws the brand block in Nextcloud's header: the
+		 * board look, a brand that can be drawn, a placement other than `nav`,
+		 * and a `#header` to put it in. Without `#header` the navigation draws it.
+		 *
+		 * @spec openspec/changes/screens-brand-block-top-bar/specs/layout-components/spec.md#requirement-the-board-look-draws-the-brand-block-in-the-nextcloud-header
+		 * @return {boolean}
+		 */
+		brandInHeader() {
+			return this.resolvedLook === 'board'
+				&& !this.headerMissing
+				&& this.headerPresent
+				&& !!this.resolvedBrandBlock
+				&& this.resolvedBrandBlock.placement !== 'nav'
+		},
+
 		/**
 		 * The label lookup provided as `cnTranslate`: the manifest's own
 		 * translations for the language first, then the host `translate`, then the

package/src/components/CnBannerWidget/CnBannerWidget.vue

@@ -142,6 +142,14 @@ export default {
 
 	components: { NcNoteCard },
 
+	inject: {
+		/**
+		 * The host's label lookup (CnAppRoot provides it); identity without one, so a
+		 * label that is not a key renders as written.
+		 */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Banner severity variant: `info | warning | error` (plus `success`
@@ -362,7 +370,7 @@ export default {
 		 */
 		resolvedKicker() {
 			const kicker = this.kicker || (this.content && this.content.kicker) || ''
-			return kicker
+			return kicker ? this.tl(kicker) : ''
 		},
 
 		/**
@@ -373,7 +381,7 @@ export default {
 		 */
 		displayTitle() {
 			const title = this.title || (this.content && this.content.title) || ''
-			return title ? this.fillValue(title) : this.displayText
+			return title ? this.fillValue(this.tl(title)) : this.displayText
 		},
 
 		/**
@@ -386,7 +394,7 @@ export default {
 		displayReason() {
 			const reason = this.reason || (this.content && this.content.reason) || ''
 			if (reason) {
-				return this.fillValue(reason)
+				return this.fillValue(this.tl(reason))
 			}
 			const title = this.title || (this.content && this.content.title) || ''
 			// A card that sets `text` to the same words as its `title` says
@@ -424,7 +432,7 @@ export default {
 				return {
 					key: `${index}-${action.id || action.label}`,
 					id: action.id,
-					label: action.label,
+					label: this.tl(action.label),
 					href,
 					target,
 					primary: index === primaryIndex,
@@ -526,6 +534,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the host's label lookup (`cnTranslate`), so a key
+		 * such as "Mine" reads in the user's language.
+		 *
+		 * @param {string} text The text as written in the manifest.
+		 * @return {string} The translated text.
+		 */
+		tl(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
 		/**
 		 * Replace `{value}` in a text by the value the predicate read, once
 		 * one is known.

package/src/components/CnBrandBar/CnBrandBar.vue

@@ -0,0 +1,230 @@
+<!--
+  CnBrandBar — the brand block in Nextcloud's own header (screens-brand-block-top-bar).
+
+  Draws the 237px brand block (emblem, organisation, app name, and a 1px
+  divider at its end) at the START of `#header`, before the app menu, under the
+  board look. CnAppRoot mounts it when a brand is declared and `#header` exists.
+
+  `#header` is Nextcloud's and offers no extension point for apps, so this is
+  the one place the library reaches into it, and it does so defensively:
+    - it adds ONE node of its own (a host element) as the first child of the
+      header, and teleports the block into it; it never moves, edits or removes
+      a node Nextcloud drew;
+    - it re-inserts its own host when Nextcloud re-renders the header (a
+      MutationObserver on the header and its parent), never a second one;
+    - with no `#header` it renders nothing and emits `unavailable`, so
+      CnAppRoot lets the navigation draw the block instead.
+
+  Sizes come from the board: `dossiq/DqKop`.
+-->
+<template>
+	<Teleport v-if="host" :to="host">
+		<div class="cn-brand-bar" data-testid="cn-brand-bar">
+			<div class="cn-brand-bar__brand" data-testid="cn-brand-bar-brand">
+				<!-- Decorative beside a name: the name already says whose app this is. -->
+				<img
+					v-if="typeof brand.emblem === 'string' && brand.emblem !== ''"
+					class="cn-brand-bar__emblem"
+					data-testid="cn-brand-bar-emblem"
+					:src="brand.emblem"
+					:alt="brand.name ? '' : brand.alt">
+				<span
+					v-else-if="brand.emblem === true"
+					class="cn-brand-bar__emblem cn-brand-bar__emblem--theme"
+					data-testid="cn-brand-bar-emblem"
+					aria-hidden="true" />
+				<img
+					v-else-if="brand.logo"
+					class="cn-brand-bar__emblem"
+					:src="brand.logo"
+					:alt="brand.name ? '' : brand.alt">
+				<span v-if="brand.name || brand.caption" class="cn-brand-bar__text">
+					<span v-if="brand.caption" class="cn-brand-bar__caption">{{ brand.caption }}</span>
+					<strong v-if="brand.name" class="cn-brand-bar__name">{{ brand.name }}</strong>
+				</span>
+			</div>
+			<span class="cn-brand-bar__divider" aria-hidden="true" />
+		</div>
+	</Teleport>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+
+const HOST_CLASS = 'cn-brand-bar-host'
+
+/**
+ * The brand block in Nextcloud's header.
+ *
+ * @event unavailable Emitted when there is no `#header` to put the block in (or it disappears), so the host lets the navigation draw it.
+ *
+ * @spec openspec/changes/screens-brand-block-top-bar/specs/layout-components/spec.md#requirement-the-board-look-draws-the-brand-block-in-the-nextcloud-header
+ */
+export default {
+	name: 'CnBrandBar',
+
+	props: {
+		/**
+		 * The resolved brand: `{ logo, emblem, name, caption, alt }`. `emblem`
+		 * is a URL, or `true` for the theme's `--nldesign-emblem-url`.
+		 *
+		 * @type {{logo?: string, emblem?: (string|boolean), name?: string, caption?: string, alt?: string}}
+		 */
+		brand: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	emits: ['unavailable'],
+
+	data() {
+		return { host: null, observer: null }
+	},
+
+	mounted() {
+		this.attach()
+	},
+
+	beforeUnmount() {
+		this.detach()
+	},
+
+	methods: {
+		/**
+		 * Insert the host as the first child of `#header` and watch the header.
+		 * Emits `unavailable` when there is no header.
+		 *
+		 * @return {void}
+		 */
+		attach() {
+			const header = document.getElementById('header')
+			if (!header) {
+				/**
+				 * @event unavailable Emitted when there is no `#header` to put the block in.
+				 */
+				this.$emit('unavailable')
+				return
+			}
+			this.host = markRaw(document.createElement('div'))
+			this.host.className = HOST_CLASS
+			header.insertBefore(this.host, header.firstChild)
+			if (typeof MutationObserver === 'function') {
+				this.observer = new MutationObserver(() => this.reattach())
+				this.observer.observe(header, { childList: true })
+				if (header.parentNode) {
+					this.observer.observe(header.parentNode, { childList: true })
+				}
+			}
+		},
+
+		/**
+		 * Put the same host back when Nextcloud re-rendered the header and took
+		 * it out. Never creates a second host; when the header is gone for good
+		 * it hands the block back to the navigation.
+		 *
+		 * @return {void}
+		 */
+		reattach() {
+			if (!this.host) {
+				return
+			}
+			const header = document.getElementById('header')
+			if (!header) {
+				this.$emit('unavailable')
+				return
+			}
+			if (this.host.parentNode !== header) {
+				header.insertBefore(this.host, header.firstChild)
+				this.observer?.observe(header, { childList: true })
+			}
+		},
+
+		/**
+		 * Stop watching and remove only the host this component added.
+		 *
+		 * @return {void}
+		 */
+		detach() {
+			this.observer?.disconnect()
+			this.observer = null
+			this.host?.remove()
+			this.host = null
+		},
+	},
+}
+</script>
+
+<style>
+/* The host is one flex item at the start of Nextcloud's header. */
+.cn-brand-bar-host {
+	flex: none;
+	display: flex;
+	align-items: center;
+	height: 100%;
+	margin-inline-end: 12px;
+}
+
+.cn-brand-bar {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	width: var(--cn-board-brand-width, 237px);
+}
+
+.cn-brand-bar__brand {
+	flex: 1 1 0;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+	min-height: 48px;
+	max-height: 100%;
+	padding: 0 6px;
+	border-radius: 8px;
+	color: var(--color-background-plain-text, var(--color-main-text));
+}
+
+.cn-brand-bar__emblem {
+	flex: none;
+	height: var(--cn-nav-emblem-size, 34px);
+	width: auto;
+	object-fit: contain;
+}
+
+.cn-brand-bar__emblem--theme {
+	display: inline-block;
+	width: var(--cn-nav-emblem-size, 34px);
+	background: var(--nldesign-emblem-url) center / contain no-repeat;
+}
+
+.cn-brand-bar__text {
+	display: flex;
+	flex-direction: column;
+	line-height: 1.15;
+	min-width: 0;
+}
+
+.cn-brand-bar__caption {
+	font-size: 13px;
+	white-space: nowrap;
+	opacity: 0.8;
+}
+
+.cn-brand-bar__name {
+	font-size: 18px;
+	font-weight: 700;
+	white-space: nowrap;
+}
+
+.cn-brand-bar__divider {
+	flex: none;
+	width: 1px;
+	height: 28px;
+	background: currentColor;
+	opacity: 0.25;
+	color: var(--color-background-plain-text, var(--color-main-text));
+}
+</style>

package/src/components/CnEnvironmentBanner/CnEnvironmentBanner.vue

@@ -103,7 +103,10 @@ export default {
 				return
 			}
 			const all = Object.values(ENVIRONMENT_TITLE_PREFIX)
-			const bare = document.title.replace(new RegExp(`^(?:${all.map((p) => p.replace(/[[\]]/g, '\\$&')).join('|')}) `), '')
+			// Plain string comparison: no pattern is built from the prefixes, so
+			// there is nothing to escape.
+			const owned = all.find((p) => document.title.startsWith(`${p} `))
+			const bare = owned ? document.title.slice(owned.length + 1) : document.title
 			const wanted = environment ? `${ENVIRONMENT_TITLE_PREFIX[environment]} ${bare}` : bare
 			if (document.title !== wanted) {
 				document.title = wanted

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -309,6 +309,7 @@
 							     and select machinery is unchanged either way. -->
 							<component
 								:is="isUserField(field) ? 'NcSelectUsers' : 'NcSelect'"
+								v-cn-select-aria="fieldAria(field)"
 								:inputId="'cn-form-' + field.key"
 								:inputLabel="fieldLabelText(field)"
 								:labelOutside="isBoardLook"
@@ -358,6 +359,7 @@
 						<!-- Multiselect (array enum items / $ref array / Nextcloud users, supports async function) -->
 						<div v-else-if="field.widget === 'multiselect' || field.widget === 'user-multiselect' || field.widget === 'group-multiselect'" class="cn-form-dialog__select-wrapper">
 							<NcSelect
+								v-cn-select-aria="fieldAria(field)"
 								:inputId="'cn-form-' + field.key"
 								:inputLabel="fieldLabelText(field)"
 								:labelOutside="isBoardLook"
@@ -401,6 +403,7 @@
 						<div v-else-if="field.widget === 'tags'" class="cn-form-dialog__select-wrapper">
 							<!-- TODO: restore `:options` to `asyncState[field.key]?.options` once on Vue 3 (buble doesn't support optional chaining) -->
 							<NcSelect
+								v-cn-select-aria="fieldAria(field)"
 								:inputId="'cn-form-' + field.key"
 								:inputLabel="fieldLabelText(field)"
 								:labelOutside="isBoardLook"
@@ -789,6 +792,7 @@ import { heldFromFailures, splitHeldFiles, uploadHeldFiles } from '../../composa
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { TENANT_CONTEXT_KEY } from '../../composables/useTenantContext.js'
 import { useWriteFeedback } from '../../composables/useWriteFeedback.js'
+import { cnSelectAria } from '../../directives/cnSelectAria.js'
 import { dialogBoardMixin } from '../../mixins/dialogBoard.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
 import { resolveCreateOverrideHandler } from '../../utils/actionsDispatcher.js'
@@ -1009,6 +1013,8 @@ const SEMANTIC_RESOLVE_ENDPOINT = '/apps/openregister/api/schemas/resolve-by-imp
 export default {
 	name: 'CnFormDialog',
 
+	directives: { cnSelectAria },
+
 	components: {
 		CnFileField,
 		CnDurationField,
@@ -3618,6 +3624,10 @@ export default {
 				return
 			}
 			const [head, ...rest] = key.split('.')
+			const unsafe = ['__proto__', 'constructor', 'prototype']
+			if (unsafe.includes(head) || rest.some((k) => unsafe.includes(k))) {
+				return
+			}
 			const clone = JSON.parse(JSON.stringify(this.formData[head] ?? {}))
 			let cur = clone
 			rest.slice(0, -1).forEach((k) => {