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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@conduction/nextcloud-vue",
-	"version": "0.1.0-beta.14",
+	"version": "0.1.0-beta.16",
 	"description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
 	"license": "EUPL-1.2",
 	"author": "Conduction B.V. <info@conduction.nl>",
@@ -47,7 +47,8 @@
 		"@uiw/codemirror-theme-github": "^4.25.8",
 		"gridstack": "^10.3.1",
 		"vue-apexcharts": "^1.7.0",
-		"vue-codemirror6": "^1.4.3"
+		"vue-codemirror6": "^1.4.3",
+		"vue-color": "^2.8.2"
 	},
 	"peerDependencies": {
 		"@nextcloud/axios": "^2.0.0",

package/src/components/CnAdvancedFormDialog/CnAdvancedFormDialog.vue

@@ -37,8 +37,13 @@
 				<!-- 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">
+						<!-- Properties tab — disabled when the active schema has no
+						     properties to render (a bare JSON blob is still
+						     editable via the Data tab). -->
+						<BTab
+							v-if="showPropertiesTable"
+							title="Properties"
+							:disabled="!hasSchemaProperties">
 							<slot
 								name="tab-properties"
 								:form-data="formData"
@@ -130,7 +135,7 @@ 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']
+const EDITABLE_SUPPORTED_TYPES = ['string', 'number', 'integer', 'boolean', 'array', 'object']
 
 /**
  * CnAdvancedFormDialog — Create/edit dialog with properties table (click-to-edit), JSON tab, and optional store integration.
@@ -229,6 +234,24 @@ export default {
 			return !!this.item
 		},
 
+		/**
+		 * True when the active schema declares at least one (non-metadata)
+		 * property the Properties tab can render. Used to disable the tab
+		 * when there's nothing for it to show — the Data tab still works.
+		 */
+		hasSchemaProperties() {
+			const props = this.schema?.properties || {}
+			const exclude = this.excludeFields || []
+			const include = this.includeFields
+			for (const key of Object.keys(props)) {
+				if (key === '@self' || key === 'id') continue
+				if (exclude.includes(key)) continue
+				if (include && !include.includes(key)) continue
+				return true
+			}
+			return false
+		},
+
 		resolvedFields() {
 			return fieldsFromSchema(this.schema, {
 				exclude: this.excludeFields,
@@ -297,6 +320,16 @@ export default {
 				this.initFormData(newItem)
 			},
 		},
+		hasSchemaProperties: {
+			immediate: true,
+			handler(hasProps) {
+				// When the Properties tab is disabled, skip past it so we
+				// don't land on a non-interactive tab on first render.
+				if (!hasProps && this.activeTab === 0 && this.showPropertiesTable) {
+					this.activeTab = this.resolvedShowMetadataTab ? 1 : (this.showJsonTab ? 1 : 0)
+				}
+			},
+		},
 		jsonData(newVal) {
 			if (!this.isInternalUpdate && this.isValidJson(newVal)) {
 				this.updateFormFromJson()

package/src/components/CnAdvancedFormDialog/CnMetadataTab.vue

@@ -12,28 +12,15 @@
 				</tr>
 			</thead>
 			<tbody>
-				<tr class="cn-advanced-form-dialog__table-row">
-					<td class="cn-advanced-form-dialog__table-col-constrained">
-						{{ t('nextcloud-vue', 'ID') }}
-					</td>
-					<td class="cn-advanced-form-dialog__table-col-expanded">
-						{{ metadataId }}
-					</td>
-				</tr>
-				<tr class="cn-advanced-form-dialog__table-row">
+				<tr
+					v-for="[label, value] in resolvedRows"
+					:key="label"
+					class="cn-advanced-form-dialog__table-row">
 					<td class="cn-advanced-form-dialog__table-col-constrained">
-						{{ t('nextcloud-vue', 'Created') }}
+						{{ label }}
 					</td>
 					<td class="cn-advanced-form-dialog__table-col-expanded">
-						{{ metadataCreated }}
-					</td>
-				</tr>
-				<tr class="cn-advanced-form-dialog__table-row">
-					<td class="cn-advanced-form-dialog__table-col-constrained">
-						{{ t('nextcloud-vue', 'Updated') }}
-					</td>
-					<td class="cn-advanced-form-dialog__table-col-expanded">
-						{{ metadataUpdated }}
+						{{ value }}
 					</td>
 				</tr>
 			</tbody>
@@ -42,12 +29,24 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
+
 export default {
 	name: 'CnMetadataTab',
 
 	props: {
 		item: { type: Object, default: null },
 		formData: { type: Object, default: () => ({}) },
+		/**
+		 * Additional `[label, value]` rows appended to (or, when `replaceRows` is true,
+		 * replacing) the default ID/Created/Updated rows. Use this to surface
+		 * domain-specific metadata (version, owner, custom timestamps, etc.).
+		 */
+		extraRows: { type: Array, default: () => [] },
+		/**
+		 * When true, render only `extraRows` and skip the default ID/Created/Updated rows.
+		 */
+		replaceRows: { type: Boolean, default: false },
 	},
 
 	computed: {
@@ -67,7 +66,23 @@ export default {
 			const v = o?.updated
 			return v ? new Date(v).toLocaleString() : '—'
 		},
+
+		defaultRows() {
+			return [
+				[this.t('nextcloud-vue', 'ID'), this.metadataId],
+				[this.t('nextcloud-vue', 'Created'), this.metadataCreated],
+				[this.t('nextcloud-vue', 'Updated'), this.metadataUpdated],
+			]
+		},
+
+		resolvedRows() {
+			const extra = Array.isArray(this.extraRows) ? this.extraRows : []
+			if (this.replaceRows) return extra
+			return [...this.defaultRows, ...extra]
+		},
 	},
+
+	methods: { t },
 }
 </script>
 

package/src/components/CnAdvancedFormDialog/CnPropertiesTab.vue

@@ -9,6 +9,11 @@
 					<th class="cn-advanced-form-dialog__table-col-expanded">
 						{{ t('nextcloud-vue', 'Value') }}
 					</th>
+					<th
+						v-if="hasRowActionsSlot"
+						class="cn-advanced-form-dialog__table-col-actions">
+						<slot name="row-actions-header" />
+					</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -18,18 +23,24 @@
 					class="cn-advanced-form-dialog__table-row"
 					:class="{
 						'cn-advanced-form-dialog__table-row--selected': selectedProperty === key,
-						'cn-advanced-form-dialog__table-row--edited': formData[key] !== undefined,
+						'cn-advanced-form-dialog__table-row--edited': isValueChanged(key),
 						'cn-advanced-form-dialog__table-row--non-editable': !isPropertyEditable(key, resolvedValue(key, value)),
 						[getPropertyValidationClass(key, value)]: validationDisplay === 'indicator',
 					}"
 					@click="handleRowClick(key, $event)">
-					<td class="cn-advanced-form-dialog__table-col-constrained cn-advanced-form-dialog__prop-cell">
+					<td class="cn-advanced-form-dialog__table-col-constrained cn-advanced-form-dialog__prop-cell"
+						:style="getPropCellStyle(key, value)">
 						<div class="cn-advanced-form-dialog__prop-cell-content">
 							<AlertCircle
 								v-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'invalid'"
 								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--error"
 								:size="16"
 								:title="getPropertyErrorMessage(key, resolvedValue(key, value))" />
+							<Alert
+								v-else-if="validationDisplay === 'indicator' && isValueChanged(key) && getPropertyValidationState(key, resolvedValue(key, value)) !== 'invalid'"
+								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--edited"
+								:size="16"
+								:title="t('nextcloud-vue', 'This field has been changed')" />
 							<Alert
 								v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'warning'"
 								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--warning"
@@ -46,19 +57,58 @@
 								:size="16"
 								:title="getEditabilityWarning(key, resolvedValue(key, value)) || ''" />
 							<span :title="getPropertyTooltip(key)">{{ getPropertyDisplayName(key) }}</span>
+							<span
+								v-if="isRequired(key)"
+								class="cn-advanced-form-dialog__required-indicator"
+								:title="t('nextcloud-vue', 'Required')"
+								aria-label="required">*</span>
+							<span
+								v-if="isImmutableHint(key)"
+								class="cn-advanced-form-dialog__immutable-badge"
+								:title="t('nextcloud-vue', 'This value can be set on creation but cannot be changed afterwards.')">
+								{{ t('nextcloud-vue', 'Set once') }}
+							</span>
 						</div>
 					</td>
 					<td class="cn-advanced-form-dialog__table-col-expanded cn-advanced-form-dialog__value-cell">
-						<CnPropertyValueCell
-							:ref="'cell-' + key"
+						<slot
+							name="value-cell"
 							:property-key="key"
-							:schema="schema"
-							:value="resolvedValue(key, value)"
-							:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+							:value="value"
+							:resolved-value="resolvedValue(key, value)"
 							:is-editing="selectedProperty === key"
+							:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
 							:display-name="getPropertyDisplayName(key)"
+							:schema-prop="schema && schema.properties && schema.properties[key]"
 							:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
-							@update:value="onPropertyValueUpdate(key, $event)" />
+							:on-update="(v) => onPropertyValueUpdate(key, v)">
+							<CnPropertyValueCell
+								:ref="'cell-' + key"
+								:property-key="key"
+								:schema="schema"
+								:value="resolvedValue(key, value)"
+								:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+								:is-editing="selectedProperty === key"
+								:display-name="getPropertyDisplayName(key)"
+								:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
+								:widget="(propertyOverrides[key] && propertyOverrides[key].widget) || null"
+								:select-options="(propertyOverrides[key] && propertyOverrides[key].selectOptions) || null"
+								:select-multiple="propertyOverrides[key] ? propertyOverrides[key].selectMultiple !== false : true"
+								:textarea-rows="(propertyOverrides[key] && propertyOverrides[key].textareaRows) || 4"
+								@update:value="onPropertyValueUpdate(key, $event)" />
+						</slot>
+					</td>
+					<td
+						v-if="hasRowActionsSlot"
+						class="cn-advanced-form-dialog__table-col-actions"
+						@click.stop>
+						<slot
+							name="row-actions"
+							:property-key="key"
+							:value="value"
+							:resolved-value="resolvedValue(key, value)"
+							:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+							:is-schema-property="!!(schema && schema.properties && Object.prototype.hasOwnProperty.call(schema.properties, key))" />
 					</td>
 				</tr>
 			</tbody>
@@ -67,6 +117,7 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
 import LockOutline from 'vue-material-design-icons/LockOutline.vue'
@@ -89,13 +140,40 @@ export default {
 		item: { type: Object, default: null },
 		formData: { type: Object, default: () => ({}) },
 		selectedProperty: { type: String, default: null },
-		editableTypes: { type: Array, default: () => ['string', 'number', 'integer', 'boolean'] },
+		editableTypes: { type: Array, default: () => ['string', 'number', 'integer', 'boolean', 'array', 'object'] },
 		validationDisplay: { type: String, default: 'indicator' },
 		excludeFields: { type: Array, default: () => [] },
 		includeFields: { type: Array, default: null },
+		/**
+		 * When false (default), properties whose schema entry has `const`
+		 * set are filtered out of the list — the user can't change them so
+		 * they only add noise. Set to `true` to render them anyway (e.g. for
+		 * debugging or admin views). `immutable` / `readOnly` properties are
+		 * always rendered regardless of this flag; they're just non-editable
+		 * once they have a value.
+		 */
+		showConstantProperties: { type: Boolean, default: false },
+		/**
+		 * Per-property overrides forwarded to CnPropertyValueCell. Keyed by property key.
+		 * Each entry may contain: `{ widget, selectOptions, selectMultiple, textareaRows }`.
+		 */
+		propertyOverrides: { type: Object, default: () => ({}) },
+		/**
+		 * Override the left-edge indicator color on the property-name cell.
+		 * When null (default) the CSS default is used (var(--color-primary)).
+		 * Pass "none" to remove the indicator and let the per-row validation
+		 * colors (green/yellow/red) on the <tr> show through instead.
+		 * Any other CSS color string is applied directly.
+		 */
+		propCellColor: { type: String, default: null },
 	},
 
 	computed: {
+		propCellStyle() {
+			if (this.propCellColor === null) return undefined
+			if (this.propCellColor === 'none') return { boxShadow: 'none' }
+			return { boxShadow: `inset 3px 0 0 0 ${this.propCellColor}` }
+		},
 		objectProperties() {
 			const schemaProps = this.schema?.properties || {}
 			const obj = this.item || {}
@@ -105,6 +183,7 @@ export default {
 				if (k === '@self' || k === 'id') return false
 				if (exclude.includes(k)) return false
 				if (include && !include.includes(k)) return false
+				if (schemaProps[k]?.hideOnForm === true) return false
 				return true
 			}
 			const existing = Object.entries(obj).filter(([k]) => filterKey(k))
@@ -112,24 +191,94 @@ export default {
 			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])
+					missing.push([key, this.defaultForProperty(prop)])
 				}
 			}
-			return [...existing, ...missing]
+			const all = [...existing, ...missing]
+			const filtered = this.showConstantProperties
+				? all
+				: all.filter(([key]) => !this.isConstantOrImmutableKey(key))
+			// Sort: schema `order` ascending (0 first), unspecified last; preserve
+			// schema/property declaration order as a stable tiebreaker.
+			const indexFor = (key) => {
+				const i = Object.keys(schemaProps).indexOf(key)
+				return i === -1 ? Number.MAX_SAFE_INTEGER : i
+			}
+			const orderFor = (key) => {
+				const o = schemaProps[key]?.order
+				return typeof o === 'number' ? o : Number.MAX_SAFE_INTEGER
+			}
+			return filtered
+				.map(([k, v], i) => ({ k, v, order: orderFor(k), idx: indexFor(k), insertion: i }))
+				.sort((a, b) => (a.order - b.order) || (a.idx - b.idx) || (a.insertion - b.insertion))
+				.map(({ k, v }) => [k, v])
+		},
+
+		/**
+		 * True when at least one property in the (unfiltered) list is constant or immutable.
+		 * Useful for parents that want to render a show/hide-toggle button only when relevant.
+		 */
+		hasConstantOrImmutableProperties() {
+			const schemaProps = this.schema?.properties || {}
+			const obj = this.item || {}
+			const exclude = this.excludeFields || []
+			const include = this.includeFields
+			const keys = new Set([
+				...Object.keys(obj),
+				...Object.keys(schemaProps),
+			])
+			for (const k of keys) {
+				if (k === '@self' || k === 'id') continue
+				if (exclude.includes(k)) continue
+				if (include && !include.includes(k)) continue
+				if (schemaProps[k]?.hideOnForm === true) continue
+				if (this.isConstantOrImmutableKey(k)) return true
+			}
+			return false
+		},
+
+		hasRowActionsSlot() {
+			return !!this.$scopedSlots['row-actions']
 		},
 	},
 
 	methods: {
+		t,
+
+		getPropCellStyle(key, value) {
+			if (this.validationDisplay !== 'indicator') {
+				return this.propCellStyle
+			}
+			const resolvedVal = this.resolvedValue(key, value)
+			const state = this.getPropertyValidationState(key, resolvedVal)
+			if (state === 'invalid') {
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-error)' }
+			}
+			if (this.isValueChanged(key)) {
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-warning)' }
+			}
+			if (state === 'valid') {
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-success)' }
+			}
+			if (state === 'warning') {
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-warning)' }
+			}
+			if (state === 'new') {
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-primary-element)' }
+			}
+			return this.propCellStyle
+		},
+
+		isValueChanged(key) {
+			if (this.formData[key] === undefined) return false
+			const original = this.item ? this.item[key] : undefined
+			const current = this.formData[key]
+			if (typeof current === 'object' || typeof original === 'object') {
+				return JSON.stringify(current) !== JSON.stringify(original)
+			}
+			return current !== original
+		},
+
 		/**
 		 * The effective value for a key: formData override or the object's own value
 		 * @param {string} key - The property key to look up
@@ -139,15 +288,92 @@ export default {
 			return this.formData[key] !== undefined ? this.formData[key] : objectValue
 		},
 
+		/**
+		 * Initial display value for a schema property that doesn't yet exist on the
+		 * object. Honors `default` and `const` first, then falls back to the
+		 * type-appropriate empty value.
+		 * @param {object} prop - The schema property entry.
+		 */
+		defaultForProperty(prop) {
+			if (!prop) return ''
+			if (prop.default !== undefined) return prop.default
+			if (prop.const !== undefined) return prop.const
+			switch (prop.type) {
+			case 'string': return ''
+			case 'number':
+			case 'integer': return 0
+			case 'boolean': return false
+			case 'array': return []
+			case 'object': return {}
+			default: return ''
+			}
+		},
+
 		onPropertyValueUpdate(key, value) {
 			this.$emit('update:property-value', { key, value })
 		},
 
+		/**
+		 * Whether a property is marked required either via `schema.required: [...]`
+		 * (the JSON-Schema-canonical place) or via `prop.required: true` on the
+		 * property entry itself (a non-standard but commonly seen variant).
+		 * @param {string} key - Property key.
+		 * @return {boolean}
+		 */
+		isRequired(key) {
+			if ((this.schema?.required || []).includes(key)) return true
+			const prop = this.schema?.properties?.[key]
+			return !!(prop && prop.required === true)
+		},
+
+		/**
+		 * Whether the property's value is fixed by the schema (`const`) and
+		 * should be hide-able via the show/hide toggle. Note: `immutable` /
+		 * `readOnly` are NOT considered constant — they're set on creation
+		 * and locked afterward, but should remain visible in the form.
+		 * @param {string} key - Property key.
+		 * @return {boolean}
+		 */
+		/**
+		 * True when an "immutable" / "readOnly" hint badge should be shown
+		 * for this property — i.e. the prop is settable on creation but
+		 * locks once persisted, AND it isn't already locked. Once locked the
+		 * lock icon takes over and the badge would be redundant.
+		 * @param {string} key - Property key.
+		 * @return {boolean}
+		 */
+		isImmutableHint(key) {
+			const prop = this.schema?.properties?.[key]
+			if (!prop) return false
+			if (prop.const !== undefined) return false
+			const lockOnce = prop.immutable === true || prop.readOnly === true
+			if (!lockOnce) return false
+			return this.isPropertyEditable(key, null)
+		},
+
+		isConstantOrImmutableKey(key) {
+			const prop = this.schema?.properties?.[key]
+			if (!prop) return false
+			return prop.const !== undefined
+		},
+
+		// `value` is intentionally unused — kept in the signature for callers
+		// that already pass it (slot consumers, the cell, the row click
+		// handler). Editability is now driven by the persisted `item`.
+		// eslint-disable-next-line no-unused-vars
 		isPropertyEditable(key, value) {
 			const prop = this.schema?.properties?.[key]
 			if (!prop) return true
 			if (prop.const !== undefined) return false
-			if (prop.immutable && value != null && value !== '') return false
+			// `immutable` / `readOnly` mean "settable on creation, locked
+			// once persisted". Use the persisted `item` (not the live value
+			// the user is typing) as the source of truth — otherwise the
+			// field would lock the moment the first character is entered.
+			const lockOnce = prop.immutable === true || prop.readOnly === true
+			if (lockOnce) {
+				const persisted = this.item && this.item[key]
+				if (persisted != null && persisted !== '') return false
+			}
 			const type = prop.type || 'string'
 			return this.editableTypes.includes(type)
 		},
@@ -197,6 +423,8 @@ export default {
 			case 'string':
 				if (typeof value !== 'string') return false
 				if (schemaProperty?.format === 'date-time' && !this.isValidDate(value)) return false
+				if (schemaProperty?.format === 'email' && !this.isValidEmail(value)) return false
+				if (schemaProperty?.format === 'uri' && !this.isValidUri(value)) return false
 				if (schemaProperty?.const && value !== schemaProperty.const) return false
 				return true
 			case 'number':
@@ -229,6 +457,12 @@ export default {
 			if (prop.format === 'date-time' && !this.isValidDate(value)) {
 				return `Property '${key}' should be a valid date-time value.`
 			}
+			if (prop.format === 'email' && !this.isValidEmail(value)) {
+				return `Property '${key}' should be a valid email address.`
+			}
+			if (prop.format === 'uri' && !this.isValidUri(value)) {
+				return `Property '${key}' should be a valid URI.`
+			}
 			if (prop.const && value !== prop.const) {
 				return `Property '${key}' should be '${prop.const}' but is '${value}'.`
 			}
@@ -285,6 +519,20 @@ export default {
 			const d = new Date(v)
 			return d instanceof Date && !Number.isNaN(d.getTime())
 		},
+
+		isValidEmail(v) {
+			if (!v) return false
+			return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
+		},
+
+		isValidUri(v) {
+			if (!v) return false
+			try {
+				return !!new URL(v)
+			} catch {
+				return false
+			}
+		},
 	},
 }
 </script>
@@ -293,7 +541,6 @@ export default {
 .cn-advanced-form-dialog__table-container {
 	background: var(--color-main-background);
 	border-radius: var(--border-radius);
-	overflow: hidden;
 	box-shadow: 0 2px 4px var(--color-box-shadow);
 	border: 1px solid var(--color-border);
 	margin-bottom: calc(5 * var(--default-grid-baseline));
@@ -313,6 +560,13 @@ export default {
 	vertical-align: middle;
 }
 
+/* Selected (editing) row: align the constrained label cell to the top of the
+   value cell so tall inputs (textarea, JSON editor) do not visually overflow
+   into the next row. */
+.cn-advanced-form-dialog__table-row--selected td {
+	vertical-align: top;
+}
+
 .cn-advanced-form-dialog__table th {
 	background: var(--color-background-dark);
 	font-weight: 500;
@@ -337,8 +591,7 @@ export default {
 }
 
 .cn-advanced-form-dialog__table-row--edited {
-	background-color: var(--color-success-light);
-	box-shadow: inset 3px 0 0 0 var(--color-success);
+	background-color: var(--color-warning-light);
 }
 
 .cn-advanced-form-dialog__table-row--non-editable {
@@ -351,22 +604,12 @@ export default {
 	cursor: not-allowed !important;
 }
 
-.cn-advanced-form-dialog__table-row--valid {
-	box-shadow: inset 3px 0 0 0 var(--color-success);
-}
-
 .cn-advanced-form-dialog__table-row--invalid {
 	background-color: var(--color-error-light);
-	box-shadow: inset 3px 0 0 0 var(--color-error);
 }
 
 .cn-advanced-form-dialog__table-row--warning {
 	background-color: var(--color-warning-light);
-	box-shadow: inset 3px 0 0 0 var(--color-warning);
-}
-
-.cn-advanced-form-dialog__table-row--new {
-	box-shadow: inset 3px 0 0 0 var(--color-primary-element);
 }
 
 .cn-advanced-form-dialog__table-col-constrained {
@@ -382,10 +625,15 @@ export default {
 	min-width: 200px;
 }
 
+.cn-advanced-form-dialog__table-col-actions {
+	width: 56px;
+	text-align: right;
+	white-space: nowrap;
+}
+
 .cn-advanced-form-dialog__prop-cell {
 	width: 30%;
 	font-weight: 600;
-	box-shadow: inset 3px 0 0 0 var(--color-primary);
 }
 
 .cn-advanced-form-dialog__value-cell {
@@ -394,6 +642,10 @@ export default {
 	border-radius: 4px;
 }
 
+.cn-advanced-form-dialog__value-cell > * {
+	max-width: 100%;
+}
+
 .cn-advanced-form-dialog__prop-cell-content {
 	display: flex;
 	align-items: center;
@@ -408,6 +660,10 @@ export default {
 	color: var(--color-error);
 }
 
+.cn-advanced-form-dialog__validation-icon--edited {
+	color: var(--color-warning);
+}
+
 .cn-advanced-form-dialog__validation-icon--warning {
 	color: var(--color-warning);
 }
@@ -419,4 +675,24 @@ export default {
 .cn-advanced-form-dialog__validation-icon--new {
 	color: var(--color-primary-element);
 }
+
+.cn-advanced-form-dialog__required-indicator {
+	color: var(--color-error-text);
+	font-weight: bold;
+	cursor: help;
+}
+
+.cn-advanced-form-dialog__immutable-badge {
+	display: inline-block;
+	padding: 1px 6px;
+	border-radius: 10px;
+	background: var(--color-background-dark);
+	color: var(--color-text-maxcontrast);
+	font-size: 0.75em;
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0.02em;
+	cursor: help;
+	white-space: nowrap;
+}
 </style>