@conduction/nextcloud-vue 0.1.0-beta.14 → 0.1.0-beta.16

package/src/components/CnPageRenderer/CnPageRenderer.vue

@@ -0,0 +1,278 @@
+<!--
+  CnPageRenderer — JSON-driven page dispatcher.
+
+  Mounted inside <router-view>, CnPageRenderer reads the manifest, finds
+  the page definition whose `id` matches the current route name, and
+  renders the appropriate page component by dispatching on `type`.
+
+  Page types are resolved via the `pageTypes` registry. The library
+  ships a built-in registry (`defaultPageTypes` — index, detail,
+  dashboard) and consumers can extend it by passing a merged map to
+  CnAppRoot or CnPageRenderer. The `custom` type is special: it
+  resolves `page.component` against the customComponents registry
+  rather than the page-types map. Adding a new built-in page type to
+  the library is one line in `pageTypes.js` — no change here.
+
+  Each entry in `pageTypes` is wrapped in `defineAsyncComponent` so
+  apps using only a subset of types do not pay the bundle cost for
+  others (notably the GridStack-backed dashboard).
+
+  Manifest, customComponents, pageTypes, and translate are injected
+  from CnAppRoot by default; each can also be passed as props for
+  standalone use without CnAppRoot. Props always take precedence
+  over inject.
+
+  See REQ-JMR-005 of the json-manifest-renderer specification.
+-->
+<template>
+	<div
+		v-if="currentPage"
+		:data-page-id="currentPage.id"
+		class="cn-page-renderer">
+		<component
+			:is="resolvedComponent"
+			v-if="resolvedComponent"
+			v-bind="resolvedProps">
+			<template
+				v-for="entry in resolvedSlotEntries"
+				#[entry.name]="slotProps">
+				<component
+					:is="entry.component"
+					:key="entry.name"
+					v-bind="slotProps" />
+			</template>
+		</component>
+	</div>
+</template>
+
+<script>
+import { defaultPageTypes } from './pageTypes.js'
+
+export default {
+	name: 'CnPageRenderer',
+
+	inject: {
+		cnManifest: { default: null },
+		cnCustomComponents: { default: () => ({}) },
+		cnTranslate: { default: () => (key) => key },
+		cnPageTypes: { default: null },
+	},
+
+	props: {
+		/**
+		 * Manifest object. When omitted, falls back to the injected
+		 * `cnManifest` from a CnAppRoot ancestor. Provide explicitly when
+		 * mounting CnPageRenderer outside of CnAppRoot.
+		 *
+		 * @type {object|null}
+		 */
+		manifest: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * Custom-component registry. Keys are the names referenced by
+		 * `page.component` (for `type: "custom"` pages). When omitted,
+		 * falls back to the injected `cnCustomComponents`.
+		 *
+		 * @type {object|null}
+		 */
+		customComponents: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * Translate function. When omitted, falls back to the injected
+		 * `cnTranslate`. Currently not used directly by the renderer
+		 * itself — exposed as a prop for symmetry and so future page
+		 * components rendered by the renderer can `inject('cnTranslate')`
+		 * via the consumer's setup.
+		 *
+		 * @type {Function|null}
+		 */
+		translate: {
+			type: Function,
+			default: null,
+		},
+		/**
+		 * Page-type registry. Map of `pages[].type` value → Vue
+		 * component to mount. Consumers extend the library defaults by
+		 * spreading them: `{ ...defaultPageTypes, report: MyReportPage }`.
+		 *
+		 * Falls back to the injected `cnPageTypes` and finally to the
+		 * library's `defaultPageTypes`. The special `custom` type is
+		 * NOT looked up here — it resolves through the customComponents
+		 * registry instead.
+		 *
+		 * @type {object|null}
+		 */
+		pageTypes: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	computed: {
+		/** Effective manifest: explicit prop wins over injected value. */
+		effectiveManifest() {
+			return this.manifest ?? this.cnManifest
+		},
+		/** Effective custom-component registry. */
+		effectiveCustomComponents() {
+			return this.customComponents ?? this.cnCustomComponents ?? {}
+		},
+		/**
+		 * Effective page-type registry. Prop wins over inject; both
+		 * fall back to the library's `defaultPageTypes`. Apps that want
+		 * the library defaults plus extras typically construct the prop
+		 * value as `{ ...defaultPageTypes, ...myExtras }`.
+		 */
+		effectivePageTypes() {
+			return this.pageTypes ?? this.cnPageTypes ?? defaultPageTypes
+		},
+		/** Page definition matching the current route name, or null. */
+		currentPage() {
+			const manifest = this.effectiveManifest
+			if (!manifest || !Array.isArray(manifest.pages)) {
+				return null
+			}
+			const routeName = this.$route?.name
+			if (!routeName) {
+				return null
+			}
+			return manifest.pages.find((page) => page.id === routeName) ?? null
+		},
+		/**
+		 * Component to render for the current page. Looked up in
+		 * `effectivePageTypes` for built-in / library / consumer-extended
+		 * types; resolved against `effectiveCustomComponents` for
+		 * `type: "custom"` pages.
+		 *
+		 * Async loading is the responsibility of whoever populated the
+		 * `pageTypes` map (the library wraps each entry in
+		 * `defineAsyncComponent`); the renderer treats any value in the
+		 * map as a Vue component.
+		 */
+		resolvedComponent() {
+			const page = this.currentPage
+			if (!page) {
+				return null
+			}
+			if (page.type === 'custom') {
+				const name = page.component
+				const resolved = this.effectiveCustomComponents[name]
+				if (!resolved) {
+					// eslint-disable-next-line no-console
+					console.warn(
+						`[CnPageRenderer] Custom component "${name}" not found in registry for page id "${page.id}".`,
+					)
+					return null
+				}
+				return resolved
+			}
+			const component = this.effectivePageTypes[page.type]
+			if (!component) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					`[CnPageRenderer] Unknown page type "${page.type}" for page id "${page.id}". Add it to the pageTypes registry (e.g. via the pageTypes prop on CnAppRoot or CnPageRenderer).`,
+				)
+				return null
+			}
+			return component
+		},
+		/**
+		 * Props forwarded to the dispatched page component. Spreads the
+		 * page's `config` object so manifest authors can supply whatever
+		 * shape the target page expects. Intentionally generic — per-type
+		 * prop validation lives on the target components themselves.
+		 */
+		resolvedProps() {
+			return this.currentPage?.config ?? {}
+		},
+		/**
+		 * Combined slot-override map for the dispatched page component.
+		 * Sources:
+		 *   1. `page.slots` — generic { slotName: registryName } map.
+		 *   2. `page.headerComponent` — sugar for `slots.header`.
+		 *   3. `page.actionsComponent` — sugar for `slots.actions`.
+		 *
+		 * Sugar fields take precedence when both are set so that the
+		 * legacy fields remain meaningful in mixed manifests. Returned
+		 * as an array of `{ name, component }` entries to make the
+		 * `<template v-for>` + dynamic-slot-name pattern work in Vue 2.
+		 */
+		resolvedSlotEntries() {
+			const page = this.currentPage
+			if (!page) return []
+			const map = { ...(page.slots ?? {}) }
+			if (page.headerComponent) map.header = page.headerComponent
+			if (page.actionsComponent) map.actions = page.actionsComponent
+			const entries = []
+			for (const [name, registryName] of Object.entries(map)) {
+				const component = this.resolveRegistryName(registryName, name)
+				if (component) entries.push({ name, component })
+			}
+			return entries
+		},
+		/**
+		 * @deprecated Use `resolvedSlotEntries` for general slot
+		 * resolution. Retained for compatibility with code that read the
+		 * computed directly.
+		 */
+		headerOverride() {
+			return this.resolvedSlotEntries.find((e) => e.name === 'header')?.component ?? null
+		},
+		/**
+		 * @deprecated See `headerOverride`.
+		 */
+		actionsOverride() {
+			return this.resolvedSlotEntries.find((e) => e.name === 'actions')?.component ?? null
+		},
+	},
+
+	created() {
+		// Surface the page id in Vue devtools and stack traces. The base
+		// component name `CnPageRenderer` becomes `CnPageRenderer:<id>`
+		// for the lifetime of this instance.
+		if (this.currentPage) {
+			this.$options.name = `CnPageRenderer:${this.currentPage.id}`
+		} else {
+			// Warn once at mount time when no page matches the current route.
+			// eslint-disable-next-line no-console
+			console.warn(
+				`[CnPageRenderer] No page found for $route.name = "${this.$route?.name}". The renderer will mount nothing.`,
+			)
+		}
+	},
+
+	methods: {
+		/**
+		 * Resolve a registry component name. Logs a single console.warn
+		 * naming the slot if the name is not in the registry.
+		 *
+		 * @param {string} registryName Name of the component to look up
+		 *   in `effectiveCustomComponents`.
+		 * @param {string} slotName Slot the component would have filled
+		 *   (used only for the warning message).
+		 * @return {object|null}
+		 */
+		resolveRegistryName(registryName, slotName) {
+			const resolved = this.effectiveCustomComponents[registryName]
+			if (!resolved) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					`[CnPageRenderer] Slot-override component "${registryName}" referenced by page id "${this.currentPage.id}" (slot "${slotName}") not found in registry.`,
+				)
+				return null
+			}
+			return resolved
+		},
+	},
+}
+</script>
+
+<style>
+.cn-page-renderer {
+	display: contents;
+}
+</style>

package/src/components/CnPageRenderer/index.js

@@ -0,0 +1,4 @@
+import CnPageRenderer from './CnPageRenderer.vue'
+export default CnPageRenderer
+export { CnPageRenderer }
+export { defaultPageTypes } from './pageTypes.js'

package/src/components/CnPageRenderer/pageTypes.js

@@ -0,0 +1,37 @@
+import { defineAsyncComponent } from 'vue'
+
+/**
+ * Default mapping from manifest `pages[].type` value to the Vue
+ * component the renderer mounts.
+ *
+ * The library ships built-in types here; consumers and downstream
+ * library extensions can add their own by passing a merged map to
+ * `CnAppRoot` (or `CnPageRenderer`) via the `pageTypes` prop.
+ *
+ * Each entry is wrapped in `defineAsyncComponent` so that apps using
+ * only a subset of types do not pay the bundle cost for the others
+ * (notably `dashboard` which depends on GridStack).
+ *
+ * The special `custom` type is NOT registered here — CnPageRenderer
+ * handles it inline, resolving `page.component` against the
+ * customComponents registry rather than this map.
+ *
+ * @example Extending with an app-specific page type
+ *
+ *   import { defaultPageTypes } from '@conduction/nextcloud-vue'
+ *   import MyReportPage from './views/MyReportPage.vue'
+ *
+ *   const pageTypes = { ...defaultPageTypes, report: MyReportPage }
+ *
+ *   <CnAppRoot :manifest="manifest" app-id="myapp" :page-types="pageTypes" />
+ *
+ * @example Adding a built-in page type to the library
+ *
+ *   Add a new entry to this map and export the component from the
+ *   `src/components/index.js` barrel. No change to CnPageRenderer.vue.
+ */
+export const defaultPageTypes = {
+	index: defineAsyncComponent(() => import('../CnIndexPage/CnIndexPage.vue')),
+	detail: defineAsyncComponent(() => import('../CnDetailPage/CnDetailPage.vue')),
+	dashboard: defineAsyncComponent(() => import('../CnDashboardPage/CnDashboardPage.vue')),
+}

package/src/components/CnRowActions/CnRowActions.vue

@@ -1,8 +1,9 @@
 <template>
-	<NcActions :force-menu="actions.length > 3" :primary="primary" :menu-name="menuName">
+	<NcActions :force-menu="visibleActions.length > 3" :primary="primary" :menu-name="menuName">
 		<NcActionButton
-			v-for="action in actions"
+			v-for="action in visibleActions"
 			:key="action.label"
+			:title="getTitle(action)"
 			:disabled="isDisabled(action)"
 			:class="{ 'cn-row-action--destructive': action.destructive }"
 			close-after-click
@@ -43,7 +44,17 @@ export default {
 	props: {
 		/**
 		 * Action definitions.
-		 * @type {Array<{label: string, icon?: object, handler: Function, disabled?: boolean | Function, destructive?: boolean}>}
+		 *
+		 * Each action supports:
+		 * - `label` (string, required) — display text
+		 * - `icon` (component) — MDI icon
+		 * - `handler` (function) — called with `row` on click
+		 * - `disabled` (boolean | (row) => boolean) — gray out the entry
+		 * - `visible` (boolean | (row) => boolean) — when `false`, hide the entry from the menu (default: shown)
+		 * - `title` (string | (row) => string) — native tooltip shown on hover (useful to explain why an entry is disabled)
+		 * - `destructive` (boolean) — apply error color styling
+		 *
+		 * @type {Array<{label: string, icon?: object, handler: Function, disabled?: boolean | Function, visible?: boolean | Function, title?: string | Function, destructive?: boolean}>}
 		 */
 		actions: {
 			type: Array,
@@ -66,6 +77,23 @@ export default {
 		},
 	},
 
+	computed: {
+		/**
+		 * Filter actions by their `visible` predicate. An action without a
+		 * `visible` field is always shown (backwards compatible).
+		 * @return {Array} Visible actions for the current row.
+		 */
+		visibleActions() {
+			return this.actions.filter((action) => {
+				if (action.visible === undefined) return true
+				if (typeof action.visible === 'function') {
+					return !!action.visible(this.row)
+				}
+				return !!action.visible
+			})
+		},
+	},
+
 	methods: {
 		/**
 		 * Resolve disabled state for an action — supports both boolean and function.
@@ -78,6 +106,19 @@ export default {
 			}
 			return !!action.disabled
 		},
+		/**
+		 * Resolve the title (native tooltip) for an action — supports both
+		 * string and function forms. Returns undefined when no title is
+		 * provided so the attribute is not rendered.
+		 * @param {object} action - The action definition
+		 * @return {string|undefined} The resolved tooltip text, or undefined.
+		 */
+		getTitle(action) {
+			if (typeof action.title === 'function') {
+				return action.title(this.row) || undefined
+			}
+			return action.title || undefined
+		},
 		onAction(action) {
 			if (action.handler && typeof action.handler === 'function') {
 				action.handler(this.row)

package/src/components/CnSchemaFormDialog/CnSchemaConfigurationTab.vue

@@ -99,24 +99,28 @@
 			v-model="schema.configuration.objectNameField"
 			:disabled="loading"
 			:options="propertyOptions"
+			:clearable="true"
 			:input-label="t('nextcloud-vue', 'Object name field')"
 			:placeholder="t('nextcloud-vue', 'Select a property to use as object name')" />
 		<NcSelect
 			v-model="schema.configuration.objectDescriptionField"
 			:disabled="loading"
 			:options="propertyOptions"
+			:clearable="true"
 			:input-label="t('nextcloud-vue', 'Object description field')"
 			:placeholder="t('nextcloud-vue', 'Select a property to use as object description')" />
 		<NcSelect
 			v-model="schema.configuration.objectImageField"
 			:disabled="loading"
 			:options="propertyOptions"
+			:clearable="true"
 			:input-label="t('nextcloud-vue', 'Object image field')"
 			:placeholder="t('nextcloud-vue', 'Select a property to use as object image representing the object. e.g. logo (should contain base64 encoded image)')" />
 		<NcSelect
 			v-model="schema.configuration.objectSummaryField"
 			:disabled="loading"
 			:options="propertyOptions"
+			:clearable="true"
 			:input-label="t('nextcloud-vue', 'Object summary field')"
 			:placeholder="t('nextcloud-vue', 'Select a property to use as object summary. e.g. summary, abstract, or excerpt')" />
 		<NcCheckboxRadioSwitch

package/src/components/CnSchemaFormDialog/CnSchemaFormDialog.vue

@@ -78,6 +78,7 @@
 				:selected-property="selectedProperty"
 				:properties-modified="propertiesModified"
 				:original-properties="originalProperties"
+				:inherited-properties="inheritedProperties"
 				:type-options-for-select="typeOptionsForSelect"
 				:available-schemas="availableSchemas"
 				:available-registers="availableRegisters"
@@ -110,7 +111,8 @@
 				:sorted-user-groups="sortedUserGroups"
 				:loading-groups="loadingGroups"
 				:has-any-permissions="hasAnyPermissions"
-				:is-restrictive-schema="isRestrictiveSchema" />
+				:is-restrictive-schema="isRestrictiveSchema"
+				:inherited-properties="inheritedProperties" />
 		</template>
 
 		<!-- Optional Action Buttons (edit mode only) -->
@@ -254,6 +256,8 @@ export default {
 		availableTags: { type: Array, default: () => [] },
 		/** Whether user groups are still loading */
 		loadingGroups: { type: Boolean, default: false },
+		/** Properties inherited from parent schemas (allOf) — shown as locked rows in the properties tab */
+		inheritedProperties: { type: Object, default: () => ({}) },
 		/** Number of objects attached to this schema (used for action button disable logic) */
 		objectCount: { type: Number, default: 0 },
 		// Optional action button visibility
@@ -370,8 +374,9 @@ export default {
 			]
 		},
 		propertyOptions() {
-			const properties = this.schemaItem.properties || {}
-			return ['', ...Object.keys(properties)]
+			const ownKeys = Object.keys(this.schemaItem.properties || {}).filter(k => k !== '')
+			const inheritedKeys = Object.keys(this.inheritedProperties || {}).filter(k => k !== '')
+			return [...new Set([...inheritedKeys, ...ownKeys])]
 		},
 		availableTagsOptions() {
 			return this.availableTags.map(tag => ({
@@ -539,76 +544,17 @@ export default {
 				this.$refs.dialog.resetDialog()
 			}
 
-			if (this.item && this.item.id) {
-				this.schemaItem = {
-					...this.schemaItem,
-					...JSON.parse(JSON.stringify(this.item)),
-				}
-
-				// Ensure configuration object exists
-				if (!this.schemaItem.configuration) {
-					this.schemaItem.configuration = {
-						objectNameField: '',
-						objectDescriptionField: '',
-						objectImageField: '',
-						objectSummaryField: '',
-						allowFiles: false,
-						allowedTags: [],
-					}
-				} else {
-					if (!this.schemaItem.configuration.objectNameField) {
-						this.schemaItem.configuration.objectNameField = ''
-					}
-					if (!this.schemaItem.configuration.objectDescriptionField) {
-						this.schemaItem.configuration.objectDescriptionField = ''
-					}
-					if (!this.schemaItem.configuration.objectImageField) {
-						this.schemaItem.configuration.objectImageField = ''
-					}
-					if (!this.schemaItem.configuration.objectSummaryField) {
-						this.schemaItem.configuration.objectSummaryField = ''
-					}
-					if (this.schemaItem.configuration.allowFiles === undefined) {
-						this.schemaItem.configuration.allowFiles = false
-					}
-					if (!this.schemaItem.configuration.allowedTags) {
-						this.schemaItem.configuration.allowedTags = []
-					}
-					if (this.schemaItem.configuration.autoPublish === undefined) {
-						this.schemaItem.configuration.autoPublish = false
-					}
-				}
-
-				// Ensure authorization object exists
-				if (!this.schemaItem.authorization) {
-					this.schemaItem.authorization = {}
-				}
-
-				// Ensure existing properties have facetable set to false by default
-				Object.keys(this.schemaItem.properties || {}).forEach(key => {
-					if (this.schemaItem.properties[key].facetable === undefined) {
-						this.$set(this.schemaItem.properties[key], 'facetable', false)
-					}
-
-					if (this.schemaItem.properties[key].enum && Array.isArray(this.schemaItem.properties[key].enum)) {
-						this.$set(this.schemaItem.properties[key], 'enum', [...this.schemaItem.properties[key].enum])
-					}
-
-					const property = this.schemaItem.properties[key]
-					if (property.type === 'array' && property.items && property.items.type === 'object' && !property.items.objectConfiguration) {
-						this.$set(this.schemaItem.properties[key].items, 'objectConfiguration', { handling: 'nested-object' })
-					}
-				})
-
-				// Ensure all $ref values are strings and migrate old structure
-				Object.keys(this.schemaItem.properties || {}).forEach(key => {
-					this.ensureRefIsString(this.schemaItem.properties, key)
-					this.migratePropertyToNewStructure(key)
-				})
-
-				this.originalProperties = JSON.parse(JSON.stringify(this.schemaItem.properties || {}))
-			} else {
-				this.schemaItem.configuration = {
+			// Always rebuild schemaItem from defaults + incoming item. This handles
+			// create mode (item null), edit mode (item with id), and extend mode
+			// (item non-null with no id) without leaking stale state across opens.
+			const defaults = {
+				title: '',
+				version: '0.0.0',
+				description: '',
+				summary: '',
+				slug: '',
+				properties: {},
+				configuration: {
 					objectNameField: '',
 					objectDescriptionField: '',
 					objectImageField: '',
@@ -616,9 +562,79 @@ export default {
 					allowFiles: false,
 					allowedTags: [],
 					autoPublish: false,
+				},
+				authorization: {},
+				hardValidation: false,
+				immutable: false,
+				searchable: true,
+				maxDepth: 0,
+			}
+			this.schemaItem = this.item
+				? { ...defaults, ...JSON.parse(JSON.stringify(this.item)) }
+				: { ...defaults }
+
+			// Ensure configuration object has all expected keys (the spread above may
+			// have replaced our defaults with a partial configuration from the item)
+			if (!this.schemaItem.configuration) {
+				this.schemaItem.configuration = { ...defaults.configuration }
+			} else {
+				if (!this.schemaItem.configuration.objectNameField) {
+					this.schemaItem.configuration.objectNameField = ''
+				}
+				if (!this.schemaItem.configuration.objectDescriptionField) {
+					this.schemaItem.configuration.objectDescriptionField = ''
+				}
+				if (!this.schemaItem.configuration.objectImageField) {
+					this.schemaItem.configuration.objectImageField = ''
+				}
+				if (!this.schemaItem.configuration.objectSummaryField) {
+					this.schemaItem.configuration.objectSummaryField = ''
 				}
-				this.originalProperties = {}
+				if (this.schemaItem.configuration.allowFiles === undefined) {
+					this.schemaItem.configuration.allowFiles = false
+				}
+				if (!this.schemaItem.configuration.allowedTags) {
+					this.schemaItem.configuration.allowedTags = []
+				}
+				if (this.schemaItem.configuration.autoPublish === undefined) {
+					this.schemaItem.configuration.autoPublish = false
+				}
+			}
+
+			// Ensure authorization object exists
+			if (!this.schemaItem.authorization) {
+				this.schemaItem.authorization = {}
 			}
+
+			// Ensure existing properties have facetable set to false by default
+			Object.keys(this.schemaItem.properties || {}).forEach(key => {
+				if (this.schemaItem.properties[key].facetable === undefined) {
+					this.$set(this.schemaItem.properties[key], 'facetable', false)
+				}
+
+				if (this.schemaItem.properties[key].enum && Array.isArray(this.schemaItem.properties[key].enum)) {
+					this.$set(this.schemaItem.properties[key], 'enum', [...this.schemaItem.properties[key].enum])
+				}
+
+				const property = this.schemaItem.properties[key]
+				if (property.type === 'array' && property.items && property.items.type === 'object' && !property.items.objectConfiguration) {
+					this.$set(this.schemaItem.properties[key].items, 'objectConfiguration', { handling: 'nested-object' })
+				}
+			})
+
+			// Ensure all $ref values are strings and migrate old structure
+			Object.keys(this.schemaItem.properties || {}).forEach(key => {
+				this.ensureRefIsString(this.schemaItem.properties, key)
+				this.migratePropertyToNewStructure(key)
+			})
+
+			// Snapshot original properties for change detection. For new/extending
+			// items (no id), there's no "original" — start empty so any added
+			// properties register as modifications.
+			this.originalProperties = this.schemaItem.id
+				? JSON.parse(JSON.stringify(this.schemaItem.properties || {}))
+				: {}
+
 			this.propertiesModified = false
 		},
 
@@ -723,6 +739,19 @@ export default {
 				}
 			})
 
+			// NcSelect (track-by="id") can convert plain IDs to full option objects.
+			// Normalise back to plain IDs before emitting so the backend always gets scalars.
+			for (const field of ['allOf', 'oneOf', 'anyOf']) {
+				if (Array.isArray(cleanedSchemaItem[field])) {
+					cleanedSchemaItem[field] = cleanedSchemaItem[field]
+						.map(ref => (typeof ref === 'object' && ref !== null ? ref.id : ref))
+						.filter(id => id != null && id !== '')
+					if (cleanedSchemaItem[field].length === 0) {
+						delete cleanedSchemaItem[field]
+					}
+				}
+			}
+
 			this.$emit('confirm', cleanedSchemaItem)
 		},