@conduction/nextcloud-vue 0.1.0-beta.11 → 0.1.0-beta.12

package/src/components/CnAdvancedFormDialog/CnAdvancedFormDialog.vue

@@ -1,570 +1,570 @@
-<template>
-	<NcDialog
-		:name="resolvedTitle"
-		size="large"
-		:can-close="!loading"
-		@closing="$emit('close')">
-		<!-- Result phase -->
-		<div v-if="result !== null" class="cn-advanced-form-dialog__result">
-			<NcNoteCard v-if="result.success" type="success">
-				{{ resolvedSuccessText }}
-			</NcNoteCard>
-			<NcNoteCard v-if="result.error" type="error">
-				{{ result.error }}
-			</NcNoteCard>
-		</div>
-
-		<!-- Form phase -->
-		<div v-else class="cn-advanced-form-dialog__form">
-			<!-- Full form override slot -->
-			<slot
-				v-if="$scopedSlots.form"
-				name="form"
-				:form-data="formData"
-				:update-field="updateField"
-				:object-properties="objectPropertiesForSlot"
-				:json-data="jsonData"
-				:update-json="updateJsonFromExternal"
-				:is-valid-json="isValidJson(jsonData)" />
-
-			<!-- Default content -->
-			<template v-else>
-				<!-- Register/schema selection step (optional slot) -->
-				<slot
-					v-if="$scopedSlots['register-schema-selection']"
-					name="register-schema-selection" />
-
-				<!-- Main tabs -->
-				<div v-else class="cn-advanced-form-dialog__tabs tabContainer">
-					<BTabs v-model="activeTab" content-class="mt-3" justified>
-						<!-- Properties tab -->
-						<BTab v-if="showPropertiesTable" title="Properties">
-							<slot
-								name="tab-properties"
-								:form-data="formData"
-								:update-field="updateField"
-								:object-properties="objectPropertiesForSlot"
-								:selected-property="selectedProperty"
-								:get-property-display-name="getPropertyDisplayName"
-								:get-property-validation-class="getPropertyValidationClass"
-								:is-property-editable="isPropertyEditable"
-								:validation-display="validationDisplay">
-								<CnPropertiesTab
-									ref="propertiesTab"
-									:schema="schema"
-									:item="item"
-									:form-data="formData"
-									:selected-property="selectedProperty"
-									:editable-types="editableTypes"
-									:validation-display="validationDisplay"
-									:exclude-fields="excludeFields"
-									:include-fields="includeFields"
-									@update:property-value="onPropertyValueUpdate"
-									@update:selected-property="selectedProperty = $event" />
-							</slot>
-						</BTab>
-
-						<!-- Metadata tab -->
-						<BTab v-if="resolvedShowMetadataTab" title="Metadata">
-							<slot name="tab-metadata" :item="item" :form-data="formData">
-								<CnMetadataTab :item="item" :form-data="formData" />
-							</slot>
-						</BTab>
-
-						<!-- Data (JSON) tab -->
-						<BTab v-if="showJsonTab" title="Data">
-							<slot
-								name="tab-data"
-								:json-data="jsonData"
-								:update-json="updateJsonFromExternal"
-								:is-valid="isValidJson(jsonData)"
-								:format-json="formatJSON">
-								<CnDataTab
-									:value="jsonData"
-									:dark="jsonEditorDark"
-									@update:value="jsonData = $event"
-									@format="onFormatResult" />
-							</slot>
-						</BTab>
-					</BTabs>
-				</div>
-			</template>
-		</div>
-
-		<template #actions>
-			<slot name="actions-left" />
-			<NcButton @click="$emit('close')">
-				{{ result !== null ? closeLabel : cancelLabel }}
-			</NcButton>
-			<NcButton
-				v-if="result === null"
-				type="primary"
-				:disabled="loading"
-				@click="executeConfirm">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<Plus v-else-if="isCreateMode" :size="20" />
-					<ContentSaveOutline v-else :size="20" />
-				</template>
-				{{ resolvedConfirmLabel }}
-			</NcButton>
-			<slot name="actions-right" />
-		</template>
-	</NcDialog>
-</template>
-
-<script>
-import { translate as t } from '@nextcloud/l10n'
-import {
-	NcDialog,
-	NcButton,
-	NcNoteCard,
-	NcLoadingIcon,
-} from '@nextcloud/vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
-import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
-import { BTabs, BTab } from 'bootstrap-vue'
-import { fieldsFromSchema } from '../../utils/schema.js'
-import CnPropertiesTab from './CnPropertiesTab.vue'
-import CnMetadataTab from './CnMetadataTab.vue'
-import CnDataTab from './CnDataTab.vue'
-
-/** Schema types for which we have built-in inline editing support in the properties table. */
-const EDITABLE_SUPPORTED_TYPES = ['string', 'number', 'integer', 'boolean']
-
-/**
- * CnAdvancedFormDialog — Create/edit dialog with properties table (click-to-edit), JSON tab, and optional store integration.
- *
- * When `item` is null, operates in create mode. When `item` is provided, operates in edit mode.
- * Provides a richer UX than CnFormDialog: properties table with inline editing, Data (JSON) tab with CodeMirror,
- * optional Metadata tab. Editable property types are determined by coded-in support; optional editablePropertyTypes
- * prop can restrict or extend. Dialog size is fixed to large.
- *
- * @event confirm Emitted when the user confirms. Payload: formData object.
- * @event close Emitted when the dialog should be closed.
- */
-export default {
-	name: 'CnAdvancedFormDialog',
-
-	components: {
-		NcDialog,
-		NcButton,
-		NcNoteCard,
-		NcLoadingIcon,
-		Plus,
-		ContentSaveOutline,
-		BTabs,
-		BTab,
-		CnPropertiesTab,
-		CnMetadataTab,
-		CnDataTab,
-	},
-
-	props: {
-		schema: { type: Object, default: null },
-		item: { type: Object, default: null },
-		dialogTitle: { type: String, default: '' },
-		nameField: { type: String, default: 'title' },
-		successText: { type: String, default: '' },
-		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
-		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
-		confirmLabel: { type: String, default: '' },
-		excludeFields: { type: Array, default: () => [] },
-		includeFields: { type: Array, default: null },
-		fieldOverrides: { type: Object, default: () => ({}) },
-		showPropertiesTable: { type: Boolean, default: true },
-		showJsonTab: { type: Boolean, default: true },
-		showMetadataTab: { type: Boolean, default: null },
-		editablePropertyTypes: { type: Array, default: null },
-		validationDisplay: { type: String, default: 'indicator', validator: (v) => ['indicator', 'none'].includes(v) },
-		jsonEditorDark: { type: Boolean, default: false },
-	},
-
-	data() {
-		return {
-			formData: {},
-			jsonData: '',
-			activeTab: 0,
-			selectedProperty: null,
-			errors: {},
-			loading: false,
-			result: null,
-			closeTimeout: null,
-			isInternalUpdate: false,
-		}
-	},
-
-	computed: {
-		isCreateMode() {
-			return !this.item
-		},
-
-		schemaTitle() {
-			return (this.schema && this.schema.title) || t('nextcloud-vue', 'Item')
-		},
-
-		currentSchema() {
-			return this.schema
-		},
-
-		resolvedTitle() {
-			if (this.dialogTitle) return this.dialogTitle
-			return this.isCreateMode
-				? t('nextcloud-vue', 'Create {title}', { title: this.schemaTitle })
-				: t('nextcloud-vue', 'Edit {title}', { title: this.schemaTitle })
-		},
-
-		resolvedConfirmLabel() {
-			if (this.confirmLabel) return this.confirmLabel
-			return this.isCreateMode ? t('nextcloud-vue', 'Create') : t('nextcloud-vue', 'Save')
-		},
-
-		resolvedSuccessText() {
-			if (this.successText) return this.successText
-			return t('nextcloud-vue', '{title} saved successfully.', { title: this.schemaTitle })
-		},
-
-		resolvedShowMetadataTab() {
-			if (this.showMetadataTab !== null) return this.showMetadataTab
-			return !!this.item
-		},
-
-		resolvedFields() {
-			return fieldsFromSchema(this.schema, {
-				exclude: this.excludeFields,
-				include: this.includeFields,
-				overrides: this.fieldOverrides,
-				includeReadOnly: true,
-			})
-		},
-
-		/** objectProperties exposed to the #form and #tab-properties slot consumers */
-		objectPropertiesForSlot() {
-			const schemaProps = this.schema?.properties || {}
-			const obj = this.item || {}
-			const exclude = this.excludeFields || []
-			const include = this.includeFields
-			const filterKey = (k) => {
-				if (k === '@self' || k === 'id') return false
-				if (exclude.includes(k)) return false
-				if (include && !include.includes(k)) return false
-				return true
-			}
-			const existing = Object.entries(obj).filter(([k]) => filterKey(k))
-			const missing = []
-			for (const [key, prop] of Object.entries(schemaProps)) {
-				if (!filterKey(key)) continue
-				if (!Object.prototype.hasOwnProperty.call(obj, key)) {
-					let def
-					switch (prop.type) {
-					case 'string': def = prop.const ?? ''; break
-					case 'number':
-					case 'integer': def = 0; break
-					case 'boolean': def = false; break
-					case 'array': def = []; break
-					case 'object': def = {}; break
-					default: def = ''
-					}
-					missing.push([key, def])
-				}
-			}
-			return [...existing, ...missing]
-		},
-
-		dataTabIndex() {
-			let index = 0
-			if (this.showPropertiesTable) index++
-			if (this.resolvedShowMetadataTab) index++
-			return index
-		},
-
-		isDataTabActive() {
-			return this.showJsonTab && this.activeTab === this.dataTabIndex
-		},
-
-		editableTypes() {
-			if (this.editablePropertyTypes && this.editablePropertyTypes.length > 0) {
-				return this.editablePropertyTypes
-			}
-			return EDITABLE_SUPPORTED_TYPES
-		},
-	},
-
-	watch: {
-		item: {
-			immediate: true,
-			handler(newItem) {
-				this.initFormData(newItem)
-			},
-		},
-		jsonData(newVal) {
-			if (!this.isInternalUpdate && this.isValidJson(newVal)) {
-				this.updateFormFromJson()
-			}
-		},
-		formData: {
-			handler() {
-				if (!this.isInternalUpdate) {
-					this.updateJsonFromForm()
-				}
-			},
-			deep: true,
-		},
-	},
-
-	beforeDestroy() {
-		if (this.closeTimeout) {
-			clearTimeout(this.closeTimeout)
-			this.closeTimeout = null
-		}
-	},
-
-	methods: {
-		initFormData(item) {
-			if (item) {
-				this.formData = JSON.parse(JSON.stringify(item))
-			} else {
-				const data = {}
-				for (const field of this.resolvedFields) {
-					if (field.default !== null && field.default !== undefined) {
-						data[field.key] = field.default
-					} else if (field.widget === 'checkbox') {
-						data[field.key] = false
-					} else if (field.widget === 'tags' || field.widget === 'multiselect') {
-						data[field.key] = []
-					} else {
-						data[field.key] = null
-					}
-				}
-				this.formData = data
-			}
-			this.jsonData = JSON.stringify(this.formData, null, 2)
-			this.errors = {}
-			this.selectedProperty = null
-		},
-
-		updateField(key, value) {
-			this.$set(this.formData, key, value)
-			if (this.errors[key]) this.$delete(this.errors, key)
-		},
-
-		onPropertyValueUpdate({ key, value }) {
-			this.$set(this.formData, key, value)
-			if (this.errors[key]) this.$delete(this.errors, key)
-		},
-
-		/**
-		 * Proxy for slot consumers: exposes isPropertyEditable from the tab sub-component.
-		 * @param {string} key - Property key
-		 * @param {*} value - Current property value
-		 */
-		isPropertyEditable(key, value) {
-			const tab = this.$refs.propertiesTab
-			if (tab) return tab.isPropertyEditable(key, value)
-			return true
-		},
-
-		/**
-		 * Proxy for slot consumers.
-		 * @param {string} key - Property key
-		 */
-		getPropertyDisplayName(key) {
-			const tab = this.$refs.propertiesTab
-			if (tab) return tab.getPropertyDisplayName(key)
-			return key
-		},
-
-		/**
-		 * Proxy for slot consumers.
-		 * @param {string} key - Property key
-		 * @param {*} value - Current property value
-		 */
-		getPropertyValidationClass(key, value) {
-			const tab = this.$refs.propertiesTab
-			if (tab) return tab.getPropertyValidationClass(key, value)
-			return ''
-		},
-
-		updateFormFromJson() {
-			if (this.isInternalUpdate) return
-			try {
-				this.isInternalUpdate = true
-				this.formData = JSON.parse(this.jsonData)
-			} catch {
-				// Keep previous formData
-			} finally {
-				this.$nextTick(() => { this.isInternalUpdate = false })
-			}
-		},
-
-		updateJsonFromForm() {
-			if (this.isInternalUpdate) return
-			try {
-				this.isInternalUpdate = true
-				this.jsonData = JSON.stringify(this.formData, null, 2)
-			} catch {
-				// Ignore
-			} finally {
-				this.$nextTick(() => { this.isInternalUpdate = false })
-			}
-		},
-
-		updateJsonFromExternal(newJson) {
-			this.jsonData = newJson
-			if (this.isValidJson(newJson)) this.updateFormFromJson()
-		},
-
-		isValidJson(str) {
-			if (!str || !str.trim()) return false
-			try {
-				JSON.parse(str)
-				return true
-			} catch {
-				return false
-			}
-		},
-
-		formatJSON() {
-			try {
-				if (this.jsonData) {
-					const parsed = JSON.parse(this.jsonData)
-					this.jsonData = JSON.stringify(parsed, null, 2)
-					if (!this.isInternalUpdate) {
-						this.isInternalUpdate = true
-						this.formData = parsed
-						this.$nextTick(() => { this.isInternalUpdate = false })
-					}
-				}
-			} catch {
-				// Keep invalid JSON as-is
-			}
-		},
-
-		onFormatResult(parsed) {
-			if (!this.isInternalUpdate) {
-				this.isInternalUpdate = true
-				this.formData = parsed
-				this.$nextTick(() => { this.isInternalUpdate = false })
-			}
-		},
-
-		validate() {
-			const newErrors = {}
-			for (const field of this.resolvedFields) {
-				const value = this.formData[field.key]
-				if (field.required && (value == null || value === '')) {
-					newErrors[field.key] = `${field.label} is required.`
-				}
-			}
-			this.errors = newErrors
-			return Object.keys(newErrors).length === 0
-		},
-
-		executeConfirm() {
-			if (!this.validate()) return
-			if (this.isDataTabActive && !this.isValidJson(this.jsonData)) return
-			this.$emit('confirm', JSON.parse(JSON.stringify(this.formData)))
-		},
-
-		setResult(resultData) {
-			this.loading = false
-			this.result = resultData
-			if (resultData?.success) {
-				this.closeTimeout = setTimeout(() => this.$emit('close'), 2000)
-			}
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-advanced-form-dialog__form {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.cn-advanced-form-dialog__tabs {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-}
-
-/* Bootstrap-Vue tab styling to match ViewObject */
-.tabContainer {
-	margin-top: 20px;
-}
-
-.tabContainer > * ul > li {
-  display: flex;
-  flex: 1;
-}
-
-.tabContainer > * ul > li:hover {
-  background-color: var(--color-background-hover);
-}
-
-.tabContainer > * ul > li > a {
-  flex: 1;
-  text-align: center;
-}
-
-.tabContainer > * ul > li > .active {
-  background: transparent !important;
-  color: var(--color-main-text) !important;
-  border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
-}
-
-.tabContainer > * ul[role="tablist"] {
-  display: flex;
-  margin: 10px 8px 0 8px;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.tabContainer > * ul[role="tablist"] > * a[role="tab"] {
-  padding-inline-start: 10px;
-  padding-inline-end: 10px;
-  padding-block-start: 10px;
-  padding-block-end: 10px;
-}
-
-.tabContainer > * div[role="tabpanel"] {
-  margin-block-start: var(--OR-margin-10);
-}
-
-:deep(.nav-tabs) {
-	border-bottom: 1px solid var(--color-border);
-	margin-bottom: 15px;
-	display: flex;
-}
-
-:deep(.nav-tabs .nav-item) {
-	display: flex;
-	flex: 1;
-}
-
-:deep(.nav-tabs .nav-link) {
-	flex: 1;
-	text-align: center;
-	border: none;
-	border-bottom: 2px solid transparent;
-	color: var(--color-text-maxcontrast);
-	padding: 8px 16px;
-}
-
-:deep(.nav-tabs .nav-link.active) {
-	color: var(--color-main-text);
-	border-bottom: 2px solid var(--color-primary);
-	background-color: transparent;
-}
-
-:deep(.nav-tabs .nav-link:hover) {
-	border-bottom: 2px solid var(--color-border);
-}
-
-:deep(.tab-content) {
-	padding: 16px;
-	background-color: var(--color-main-background);
-}
-</style>
+<template>
+	<NcDialog
+		:name="resolvedTitle"
+		size="large"
+		:can-close="!loading"
+		@closing="$emit('close')">
+		<!-- Result phase -->
+		<div v-if="result !== null" class="cn-advanced-form-dialog__result">
+			<NcNoteCard v-if="result.success" type="success">
+				{{ resolvedSuccessText }}
+			</NcNoteCard>
+			<NcNoteCard v-if="result.error" type="error">
+				{{ result.error }}
+			</NcNoteCard>
+		</div>
+
+		<!-- Form phase -->
+		<div v-else class="cn-advanced-form-dialog__form">
+			<!-- Full form override slot -->
+			<slot
+				v-if="$scopedSlots.form"
+				name="form"
+				:form-data="formData"
+				:update-field="updateField"
+				:object-properties="objectPropertiesForSlot"
+				:json-data="jsonData"
+				:update-json="updateJsonFromExternal"
+				:is-valid-json="isValidJson(jsonData)" />
+
+			<!-- Default content -->
+			<template v-else>
+				<!-- Register/schema selection step (optional slot) -->
+				<slot
+					v-if="$scopedSlots['register-schema-selection']"
+					name="register-schema-selection" />
+
+				<!-- Main tabs -->
+				<div v-else class="cn-advanced-form-dialog__tabs tabContainer">
+					<BTabs v-model="activeTab" content-class="mt-3" justified>
+						<!-- Properties tab -->
+						<BTab v-if="showPropertiesTable" title="Properties">
+							<slot
+								name="tab-properties"
+								:form-data="formData"
+								:update-field="updateField"
+								:object-properties="objectPropertiesForSlot"
+								:selected-property="selectedProperty"
+								:get-property-display-name="getPropertyDisplayName"
+								:get-property-validation-class="getPropertyValidationClass"
+								:is-property-editable="isPropertyEditable"
+								:validation-display="validationDisplay">
+								<CnPropertiesTab
+									ref="propertiesTab"
+									:schema="schema"
+									:item="item"
+									:form-data="formData"
+									:selected-property="selectedProperty"
+									:editable-types="editableTypes"
+									:validation-display="validationDisplay"
+									:exclude-fields="excludeFields"
+									:include-fields="includeFields"
+									@update:property-value="onPropertyValueUpdate"
+									@update:selected-property="selectedProperty = $event" />
+							</slot>
+						</BTab>
+
+						<!-- Metadata tab -->
+						<BTab v-if="resolvedShowMetadataTab" title="Metadata">
+							<slot name="tab-metadata" :item="item" :form-data="formData">
+								<CnMetadataTab :item="item" :form-data="formData" />
+							</slot>
+						</BTab>
+
+						<!-- Data (JSON) tab -->
+						<BTab v-if="showJsonTab" title="Data">
+							<slot
+								name="tab-data"
+								:json-data="jsonData"
+								:update-json="updateJsonFromExternal"
+								:is-valid="isValidJson(jsonData)"
+								:format-json="formatJSON">
+								<CnDataTab
+									:value="jsonData"
+									:dark="jsonEditorDark"
+									@update:value="jsonData = $event"
+									@format="onFormatResult" />
+							</slot>
+						</BTab>
+					</BTabs>
+				</div>
+			</template>
+		</div>
+
+		<template #actions>
+			<slot name="actions-left" />
+			<NcButton @click="$emit('close')">
+				{{ result !== null ? closeLabel : cancelLabel }}
+			</NcButton>
+			<NcButton
+				v-if="result === null"
+				type="primary"
+				:disabled="loading"
+				@click="executeConfirm">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<Plus v-else-if="isCreateMode" :size="20" />
+					<ContentSaveOutline v-else :size="20" />
+				</template>
+				{{ resolvedConfirmLabel }}
+			</NcButton>
+			<slot name="actions-right" />
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import {
+	NcDialog,
+	NcButton,
+	NcNoteCard,
+	NcLoadingIcon,
+} from '@nextcloud/vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import { BTabs, BTab } from 'bootstrap-vue'
+import { fieldsFromSchema } from '../../utils/schema.js'
+import CnPropertiesTab from './CnPropertiesTab.vue'
+import CnMetadataTab from './CnMetadataTab.vue'
+import CnDataTab from './CnDataTab.vue'
+
+/** Schema types for which we have built-in inline editing support in the properties table. */
+const EDITABLE_SUPPORTED_TYPES = ['string', 'number', 'integer', 'boolean']
+
+/**
+ * CnAdvancedFormDialog — Create/edit dialog with properties table (click-to-edit), JSON tab, and optional store integration.
+ *
+ * When `item` is null, operates in create mode. When `item` is provided, operates in edit mode.
+ * Provides a richer UX than CnFormDialog: properties table with inline editing, Data (JSON) tab with CodeMirror,
+ * optional Metadata tab. Editable property types are determined by coded-in support; optional editablePropertyTypes
+ * prop can restrict or extend. Dialog size is fixed to large.
+ *
+ * @event confirm Emitted when the user confirms. Payload: formData object.
+ * @event close Emitted when the dialog should be closed.
+ */
+export default {
+	name: 'CnAdvancedFormDialog',
+
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		Plus,
+		ContentSaveOutline,
+		BTabs,
+		BTab,
+		CnPropertiesTab,
+		CnMetadataTab,
+		CnDataTab,
+	},
+
+	props: {
+		schema: { type: Object, default: null },
+		item: { type: Object, default: null },
+		dialogTitle: { type: String, default: '' },
+		nameField: { type: String, default: 'title' },
+		successText: { type: String, default: '' },
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
+		confirmLabel: { type: String, default: '' },
+		excludeFields: { type: Array, default: () => [] },
+		includeFields: { type: Array, default: null },
+		fieldOverrides: { type: Object, default: () => ({}) },
+		showPropertiesTable: { type: Boolean, default: true },
+		showJsonTab: { type: Boolean, default: true },
+		showMetadataTab: { type: Boolean, default: null },
+		editablePropertyTypes: { type: Array, default: null },
+		validationDisplay: { type: String, default: 'indicator', validator: (v) => ['indicator', 'none'].includes(v) },
+		jsonEditorDark: { type: Boolean, default: false },
+	},
+
+	data() {
+		return {
+			formData: {},
+			jsonData: '',
+			activeTab: 0,
+			selectedProperty: null,
+			errors: {},
+			loading: false,
+			result: null,
+			closeTimeout: null,
+			isInternalUpdate: false,
+		}
+	},
+
+	computed: {
+		isCreateMode() {
+			return !this.item
+		},
+
+		schemaTitle() {
+			return (this.schema && this.schema.title) || t('nextcloud-vue', 'Item')
+		},
+
+		currentSchema() {
+			return this.schema
+		},
+
+		resolvedTitle() {
+			if (this.dialogTitle) return this.dialogTitle
+			return this.isCreateMode
+				? t('nextcloud-vue', 'Create {title}', { title: this.schemaTitle })
+				: t('nextcloud-vue', 'Edit {title}', { title: this.schemaTitle })
+		},
+
+		resolvedConfirmLabel() {
+			if (this.confirmLabel) return this.confirmLabel
+			return this.isCreateMode ? t('nextcloud-vue', 'Create') : t('nextcloud-vue', 'Save')
+		},
+
+		resolvedSuccessText() {
+			if (this.successText) return this.successText
+			return t('nextcloud-vue', '{title} saved successfully.', { title: this.schemaTitle })
+		},
+
+		resolvedShowMetadataTab() {
+			if (this.showMetadataTab !== null) return this.showMetadataTab
+			return !!this.item
+		},
+
+		resolvedFields() {
+			return fieldsFromSchema(this.schema, {
+				exclude: this.excludeFields,
+				include: this.includeFields,
+				overrides: this.fieldOverrides,
+				includeReadOnly: true,
+			})
+		},
+
+		/** objectProperties exposed to the #form and #tab-properties slot consumers */
+		objectPropertiesForSlot() {
+			const schemaProps = this.schema?.properties || {}
+			const obj = this.item || {}
+			const exclude = this.excludeFields || []
+			const include = this.includeFields
+			const filterKey = (k) => {
+				if (k === '@self' || k === 'id') return false
+				if (exclude.includes(k)) return false
+				if (include && !include.includes(k)) return false
+				return true
+			}
+			const existing = Object.entries(obj).filter(([k]) => filterKey(k))
+			const missing = []
+			for (const [key, prop] of Object.entries(schemaProps)) {
+				if (!filterKey(key)) continue
+				if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+					let def
+					switch (prop.type) {
+					case 'string': def = prop.const ?? ''; break
+					case 'number':
+					case 'integer': def = 0; break
+					case 'boolean': def = false; break
+					case 'array': def = []; break
+					case 'object': def = {}; break
+					default: def = ''
+					}
+					missing.push([key, def])
+				}
+			}
+			return [...existing, ...missing]
+		},
+
+		dataTabIndex() {
+			let index = 0
+			if (this.showPropertiesTable) index++
+			if (this.resolvedShowMetadataTab) index++
+			return index
+		},
+
+		isDataTabActive() {
+			return this.showJsonTab && this.activeTab === this.dataTabIndex
+		},
+
+		editableTypes() {
+			if (this.editablePropertyTypes && this.editablePropertyTypes.length > 0) {
+				return this.editablePropertyTypes
+			}
+			return EDITABLE_SUPPORTED_TYPES
+		},
+	},
+
+	watch: {
+		item: {
+			immediate: true,
+			handler(newItem) {
+				this.initFormData(newItem)
+			},
+		},
+		jsonData(newVal) {
+			if (!this.isInternalUpdate && this.isValidJson(newVal)) {
+				this.updateFormFromJson()
+			}
+		},
+		formData: {
+			handler() {
+				if (!this.isInternalUpdate) {
+					this.updateJsonFromForm()
+				}
+			},
+			deep: true,
+		},
+	},
+
+	beforeDestroy() {
+		if (this.closeTimeout) {
+			clearTimeout(this.closeTimeout)
+			this.closeTimeout = null
+		}
+	},
+
+	methods: {
+		initFormData(item) {
+			if (item) {
+				this.formData = JSON.parse(JSON.stringify(item))
+			} else {
+				const data = {}
+				for (const field of this.resolvedFields) {
+					if (field.default !== null && field.default !== undefined) {
+						data[field.key] = field.default
+					} else if (field.widget === 'checkbox') {
+						data[field.key] = false
+					} else if (field.widget === 'tags' || field.widget === 'multiselect') {
+						data[field.key] = []
+					} else {
+						data[field.key] = null
+					}
+				}
+				this.formData = data
+			}
+			this.jsonData = JSON.stringify(this.formData, null, 2)
+			this.errors = {}
+			this.selectedProperty = null
+		},
+
+		updateField(key, value) {
+			this.$set(this.formData, key, value)
+			if (this.errors[key]) this.$delete(this.errors, key)
+		},
+
+		onPropertyValueUpdate({ key, value }) {
+			this.$set(this.formData, key, value)
+			if (this.errors[key]) this.$delete(this.errors, key)
+		},
+
+		/**
+		 * Proxy for slot consumers: exposes isPropertyEditable from the tab sub-component.
+		 * @param {string} key - Property key
+		 * @param {*} value - Current property value
+		 */
+		isPropertyEditable(key, value) {
+			const tab = this.$refs.propertiesTab
+			if (tab) return tab.isPropertyEditable(key, value)
+			return true
+		},
+
+		/**
+		 * Proxy for slot consumers.
+		 * @param {string} key - Property key
+		 */
+		getPropertyDisplayName(key) {
+			const tab = this.$refs.propertiesTab
+			if (tab) return tab.getPropertyDisplayName(key)
+			return key
+		},
+
+		/**
+		 * Proxy for slot consumers.
+		 * @param {string} key - Property key
+		 * @param {*} value - Current property value
+		 */
+		getPropertyValidationClass(key, value) {
+			const tab = this.$refs.propertiesTab
+			if (tab) return tab.getPropertyValidationClass(key, value)
+			return ''
+		},
+
+		updateFormFromJson() {
+			if (this.isInternalUpdate) return
+			try {
+				this.isInternalUpdate = true
+				this.formData = JSON.parse(this.jsonData)
+			} catch {
+				// Keep previous formData
+			} finally {
+				this.$nextTick(() => { this.isInternalUpdate = false })
+			}
+		},
+
+		updateJsonFromForm() {
+			if (this.isInternalUpdate) return
+			try {
+				this.isInternalUpdate = true
+				this.jsonData = JSON.stringify(this.formData, null, 2)
+			} catch {
+				// Ignore
+			} finally {
+				this.$nextTick(() => { this.isInternalUpdate = false })
+			}
+		},
+
+		updateJsonFromExternal(newJson) {
+			this.jsonData = newJson
+			if (this.isValidJson(newJson)) this.updateFormFromJson()
+		},
+
+		isValidJson(str) {
+			if (!str || !str.trim()) return false
+			try {
+				JSON.parse(str)
+				return true
+			} catch {
+				return false
+			}
+		},
+
+		formatJSON() {
+			try {
+				if (this.jsonData) {
+					const parsed = JSON.parse(this.jsonData)
+					this.jsonData = JSON.stringify(parsed, null, 2)
+					if (!this.isInternalUpdate) {
+						this.isInternalUpdate = true
+						this.formData = parsed
+						this.$nextTick(() => { this.isInternalUpdate = false })
+					}
+				}
+			} catch {
+				// Keep invalid JSON as-is
+			}
+		},
+
+		onFormatResult(parsed) {
+			if (!this.isInternalUpdate) {
+				this.isInternalUpdate = true
+				this.formData = parsed
+				this.$nextTick(() => { this.isInternalUpdate = false })
+			}
+		},
+
+		validate() {
+			const newErrors = {}
+			for (const field of this.resolvedFields) {
+				const value = this.formData[field.key]
+				if (field.required && (value == null || value === '')) {
+					newErrors[field.key] = `${field.label} is required.`
+				}
+			}
+			this.errors = newErrors
+			return Object.keys(newErrors).length === 0
+		},
+
+		executeConfirm() {
+			if (!this.validate()) return
+			if (this.isDataTabActive && !this.isValidJson(this.jsonData)) return
+			this.$emit('confirm', JSON.parse(JSON.stringify(this.formData)))
+		},
+
+		setResult(resultData) {
+			this.loading = false
+			this.result = resultData
+			if (resultData?.success) {
+				this.closeTimeout = setTimeout(() => this.$emit('close'), 2000)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-advanced-form-dialog__form {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.cn-advanced-form-dialog__tabs {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+/* Bootstrap-Vue tab styling to match ViewObject */
+.tabContainer {
+	margin-top: 20px;
+}
+
+.tabContainer > * ul > li {
+  display: flex;
+  flex: 1;
+}
+
+.tabContainer > * ul > li:hover {
+  background-color: var(--color-background-hover);
+}
+
+.tabContainer > * ul > li > a {
+  flex: 1;
+  text-align: center;
+}
+
+.tabContainer > * ul > li > .active {
+  background: transparent !important;
+  color: var(--color-main-text) !important;
+  border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
+}
+
+.tabContainer > * ul[role="tablist"] {
+  display: flex;
+  margin: 10px 8px 0 8px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.tabContainer > * ul[role="tablist"] > * a[role="tab"] {
+  padding-inline-start: 10px;
+  padding-inline-end: 10px;
+  padding-block-start: 10px;
+  padding-block-end: 10px;
+}
+
+.tabContainer > * div[role="tabpanel"] {
+  margin-block-start: var(--OR-margin-10);
+}
+
+:deep(.nav-tabs) {
+	border-bottom: 1px solid var(--color-border);
+	margin-bottom: 15px;
+	display: flex;
+}
+
+:deep(.nav-tabs .nav-item) {
+	display: flex;
+	flex: 1;
+}
+
+:deep(.nav-tabs .nav-link) {
+	flex: 1;
+	text-align: center;
+	border: none;
+	border-bottom: 2px solid transparent;
+	color: var(--color-text-maxcontrast);
+	padding: 8px 16px;
+}
+
+:deep(.nav-tabs .nav-link.active) {
+	color: var(--color-main-text);
+	border-bottom: 2px solid var(--color-primary);
+	background-color: transparent;
+}
+
+:deep(.nav-tabs .nav-link:hover) {
+	border-bottom: 2px solid var(--color-border);
+}
+
+:deep(.tab-content) {
+	padding: 16px;
+	background-color: var(--color-main-background);
+}
+</style>