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

package/src/components/CnSchemaFormDialog/CnSchemaPropertiesTab.vue

@@ -36,13 +36,19 @@
 							@click.stop />
 					</div>
 					<div v-else class="cn-schema-form__name-display-container">
-						<AlertOutline v-if="isPropertyModified(row._key)"
+						<LockOutline v-if="row._inherited"
+							:size="16"
+							class="cn-schema-form__lock-icon"
+							:title="t('nextcloud-vue', 'Inherited from parent schema (read-only)')" />
+						<AlertOutline v-else-if="isPropertyModified(row._key)"
 							:size="16"
 							class="cn-schema-form__warning-icon"
 							:title="t('nextcloud-vue', 'Property has been modified. Changes will only take effect after the schema is saved.')" />
 						<div class="cn-schema-form__name-with-chips">
 							<span class="cn-schema-form__property-name">{{ row._key }}</span>
 							<div class="cn-schema-form__inline-chips">
+								<span v-if="row._inherited"
+									class="cn-schema-form__property-chip cn-schema-form__chip-inherited">{{ t('nextcloud-vue', 'Inherited') }}</span>
 								<span v-if="isPropertyRequired(schema, row._key)"
 									class="cn-schema-form__property-chip cn-schema-form__chip-primary">{{ t('nextcloud-vue', 'Required') }}</span>
 								<span v-if="row.immutable"
@@ -80,6 +86,7 @@
 
 				<template #row-actions="{ row }">
 					<CnSchemaPropertyActions
+						v-if="!row._inherited"
 						:property-key="row._key"
 						:property="schema.properties[row._key]"
 						:schema-item="schema"
@@ -111,6 +118,7 @@ import CnSchemaPropertyActions from './CnSchemaPropertyActions.vue'
 
 import Plus from 'vue-material-design-icons/Plus.vue'
 import AlertOutline from 'vue-material-design-icons/AlertOutline.vue'
+import LockOutline from 'vue-material-design-icons/LockOutline.vue'
 
 /**
  * CnSchemaPropertiesTab — Properties table tab for CnSchemaFormDialog.
@@ -135,6 +143,7 @@ export default {
 		CnSchemaPropertyActions,
 		Plus,
 		AlertOutline,
+		LockOutline,
 	},
 	props: {
 		/** The full schema item (needs .properties, .required) */
@@ -161,6 +170,8 @@ export default {
 		sortedUserGroups: { type: Array, default: () => [] },
 		/** Whether groups are loading */
 		loadingGroups: { type: Boolean, default: false },
+		/** Properties inherited from parent schemas (allOf) — shown as locked/read-only rows */
+		inheritedProperties: { type: Object, default: () => ({}) },
 	},
 	data() {
 		return {
@@ -195,11 +206,24 @@ export default {
 				})
 		},
 		propertyRows() {
-			return this.sortedProperties.map(([key, prop]) => ({
+			const ownProperties = this.schema.properties || {}
+			const inheritedRows = Object.entries(this.inheritedProperties || {})
+				.filter(([key]) => !(key in ownProperties))
+				.map(([key, prop]) => ({
+					_id: `inherited_${key}`,
+					_key: key,
+					_inherited: true,
+					...prop,
+				}))
+
+			const ownRows = this.sortedProperties.map(([key, prop]) => ({
 				_id: this.getStablePropertyId(key),
 				_key: key,
+				_inherited: false,
 				...prop,
 			}))
+
+			return [...inheritedRows, ...ownRows]
 		},
 	},
 	watch: {
@@ -258,6 +282,9 @@ export default {
 		},
 
 		getRowClass(row) {
+			if (row._inherited) {
+				return 'cn-schema-form__inherited-row'
+			}
 			const classes = []
 			if (this.selectedProperty === row._key) {
 				classes.push('cn-schema-form__selected-row')
@@ -273,6 +300,7 @@ export default {
 		},
 
 		onRowClick(row) {
+			if (row._inherited) return
 			if (this.selectedProperty === row._key) return
 			this.$emit('update:selected-property', row._key)
 		},

package/src/components/CnSchemaFormDialog/CnSchemaSecurityTab.vue

@@ -265,6 +265,7 @@
 
 <script>
 import _ from 'lodash'
+import { translate as t } from '@nextcloud/l10n'
 import {
 	NcButton,
 	NcCheckboxRadioSwitch,
@@ -316,6 +317,8 @@ export default {
 		hasAnyPermissions: { type: Boolean, default: false },
 		/** Whether schema has restrictive permissions */
 		isRestrictiveSchema: { type: Boolean, default: false },
+		/** Properties inherited from parent schemas (allOf) */
+		inheritedProperties: { type: Object, default: () => ({}) },
 	},
 	data() {
 		return {
@@ -352,10 +355,10 @@ export default {
 		},
 
 		propertyOptions() {
-			const schemaProps = Object.keys(this.schemaItem.properties || {}).map(key => ({
-				id: key,
-				label: key,
-			}))
+			const ownKeys = Object.keys(this.schemaItem.properties || {}).filter(k => k !== '')
+			const inheritedKeys = Object.keys(this.inheritedProperties || {}).filter(k => k !== '')
+			const allKeys = [...new Set([...inheritedKeys, ...ownKeys])]
+			const schemaProps = allKeys.map(key => ({ id: key, label: key }))
 			const systemProps = [
 				{ id: '_organisation', label: t('nextcloud-vue', '_organisation (system)') },
 				{ id: '_owner', label: t('nextcloud-vue', '_owner (system)') },
@@ -396,6 +399,7 @@ export default {
 		},
 	},
 	methods: {
+		t,
 		capitalize: _.capitalize,
 
 		availablePropertyOptions(action, ruleIdx) {
@@ -510,10 +514,11 @@ export default {
 		},
 
 		removeCondition(action, originalIndex, propKey) {
-			const match = this.schema.authorization[action][originalIndex].match
-			if (match) {
-				this.$delete(match, propKey)
-			}
+			const rule = this.schema.authorization[action][originalIndex]
+			if (!rule.match) return
+			const updated = { ...rule.match }
+			delete updated[propKey]
+			this.$set(rule, 'match', updated)
 		},
 
 		// ─── Add-condition form state ─────────────────────────────────────
@@ -581,10 +586,9 @@ export default {
 			if (!conditionValue && conditionValue !== false) return
 
 			const rule = this.schema.authorization[action][originalIndex]
-			if (!rule.match) {
-				this.$set(rule, 'match', {})
-			}
-			this.$set(rule.match, property, { [operator]: conditionValue })
+			// Replace the entire match object so Vue 2's property-level dep on `rule.match`
+			// fires and the condition table v-for updates correctly.
+			this.$set(rule, 'match', { ...(rule.match || {}), [property]: { [operator]: conditionValue } })
 
 			this.cancelAddCondition()
 		},

package/src/components/CnTabbedFormDialog/CnTabbedFormDialog.vue

@@ -146,8 +146,9 @@ export default {
 			validator: (tabs) => tabs.length > 0 && tabs.every(t => t.id && t.title),
 		},
 		/**
-		 * Existing item for edit mode. Pass null or undefined for create mode.
-		 * The component only checks for truthiness to determine create vs edit mode.
+		 * Existing item for edit mode. Pass null or undefined for plain create
+		 * mode. A non-null object without an `id` is also treated as create mode
+		 * — useful for pre-filled payloads (extend, clone, duplicate flows).
 		 *
 		 * @type {object|null}
 		 */
@@ -287,12 +288,16 @@ export default {
 	},
 	computed: {
 		/**
-		 * Whether the dialog is in create mode (no existing item).
+		 * Whether the dialog is in create mode (no existing persisted item).
+		 *
+		 * An item is considered "existing" only when it has an `id`. A non-null
+		 * item without an `id` (e.g. a pre-filled payload for extend/clone flows)
+		 * is treated as create mode.
 		 *
 		 * @return {boolean}
 		 */
 		isCreateMode() {
-			return !this.item
+			return !this.item || !this.item.id
 		},
 		/**
 		 * Resolved dialog title. Uses dialogTitle prop if provided,

package/src/components/index.js

@@ -18,7 +18,7 @@ export { CnMassActionBar } from './CnMassActionBar/index.js'
 export { CnDeleteDialog } from './CnDeleteDialog/index.js'
 export { CnCopyDialog } from './CnCopyDialog/index.js'
 export { CnFormDialog } from './CnFormDialog/index.js'
-export { CnAdvancedFormDialog } from './CnAdvancedFormDialog/index.js'
+export { CnAdvancedFormDialog, CnPropertiesTab, CnMetadataTab, CnPropertyValueCell } from './CnAdvancedFormDialog/index.js'
 export { CnMassDeleteDialog } from './CnMassDeleteDialog/index.js'
 export { CnMassCopyDialog } from './CnMassCopyDialog/index.js'
 export { CnKpiGrid } from './CnKpiGrid/index.js'
@@ -46,6 +46,7 @@ export { CnDetailCard } from './CnDetailCard/index.js'
 export { CnCard } from './CnCard/index.js'
 export { CnStatsPanel } from './CnStatsPanel/index.js'
 export { CnJsonViewer } from './CnJsonViewer/index.js'
+export { CnColorPicker } from './CnColorPicker/index.js'
 export { CnDetailGrid } from './CnDetailGrid/index.js'
 export { CnProgressBar } from './CnProgressBar/index.js'
 export { CnChartWidget } from './CnChartWidget/index.js'
@@ -55,3 +56,8 @@ export { CnTableWidget } from './CnTableWidget/index.js'
 export { CnNoteCard } from './CnNoteCard/index.js'
 export { CnObjectDataWidget } from './CnObjectDataWidget/index.js'
 export { CnObjectMetadataWidget } from './CnObjectMetadataWidget/index.js'
+export { CnPageRenderer, defaultPageTypes } from './CnPageRenderer/index.js'
+export { CnAppNav } from './CnAppNav/index.js'
+export { CnAppLoading } from './CnAppLoading/index.js'
+export { CnDependencyMissing } from './CnDependencyMissing/index.js'
+export { CnAppRoot } from './CnAppRoot/index.js'

package/src/composables/index.js

@@ -3,3 +3,5 @@ export { useDetailView } from './useDetailView.js'
 export { useSubResource } from './useSubResource.js'
 export { useDashboardView } from './useDashboardView.js'
 export { useContextMenu } from './useContextMenu.js'
+export { useAppManifest } from './useAppManifest.js'
+export { useAppStatus } from './useAppStatus.js'

package/src/composables/useAppManifest.js

@@ -0,0 +1,115 @@
+import { ref } from 'vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { validateManifest } from '../utils/validateManifest.js'
+
+/**
+ * Composable that loads and validates a Conduction app manifest.
+ *
+ * The composable implements the three-phase flow specified in
+ * REQ-JMR-002 of the json-manifest-renderer capability:
+ *
+ *  1. Synchronous bundled load — `bundledManifest` is the immediate value.
+ *  2. Async backend merge — fetches `/index.php/apps/{appId}/api/manifest`
+ *     and deep-merges any 200 response over the bundled manifest. 4xx /
+ *     5xx / network errors are silently ignored so apps work without a
+ *     backend endpoint.
+ *  3. Validation — the merged result is validated against
+ *     `app-manifest.schema.json`. On failure, the bundled manifest is
+ *     kept and a `console.warn` is emitted with the error list.
+ *
+ * The returned manifest is reactive, so the future "app builder" backend
+ * can hot-swap the manifest without a page reload.
+ *
+ * @param {string} appId Nextcloud app ID. Used to build the default
+ *   backend endpoint URL via `@nextcloud/router`.
+ * @param {object} bundledManifest The manifest shipped with the app (the
+ *   default value, available synchronously).
+ * @param {object} [options] Configuration options.
+ * @param {string} [options.endpoint] Override the backend fetch URL.
+ *   Useful for tests and alternative-host deployments.
+ * @param {Function} [options.fetcher] Override the fetch function. Must
+ *   return a promise resolving to `{ status: number, data: object }`.
+ *   Defaults to `axios.get` from `@nextcloud/axios` (which inherits the
+ *   Nextcloud CSRF token automatically).
+ * @return {{ manifest: import('vue').Ref<object>, isLoading: import('vue').Ref<boolean>, validationErrors: import('vue').Ref<string[]|null> }}
+ *
+ * @example Basic usage (Composition API)
+ * const { manifest, isLoading } = useAppManifest('decidesk', bundled)
+ *
+ * @example Inside an Options API component
+ * export default {
+ *   setup() {
+ *     return useAppManifest('decidesk', bundled)
+ *   },
+ * }
+ *
+ * @example Custom endpoint and fetcher (e.g. for tests)
+ * useAppManifest('decidesk', bundled, {
+ *   endpoint: '/custom/manifest/url',
+ *   fetcher: (url) => Promise.resolve({ status: 200, data: { ... } }),
+ * })
+ */
+export function useAppManifest(appId, bundledManifest, options = {}) {
+	const manifest = ref(bundledManifest)
+	const isLoading = ref(true)
+	const validationErrors = ref(null)
+
+	const endpoint = options.endpoint ?? generateUrl(`/apps/${appId}/api/manifest`)
+	const fetcher = options.fetcher ?? ((url) => axios.get(url))
+
+	;(async () => {
+		try {
+			const response = await fetcher(endpoint)
+			if (!response || response.status !== 200 || !response.data) {
+				return
+			}
+			const merged = deepMerge(bundledManifest, response.data)
+			const result = validateManifest(merged)
+			if (!result.valid) {
+				validationErrors.value = result.errors
+				// eslint-disable-next-line no-console
+				console.warn(
+					'[useAppManifest] Backend manifest failed schema validation; falling back to bundled manifest.',
+					result.errors,
+				)
+				return
+			}
+			manifest.value = merged
+		} catch (err) {
+			// Silent fallback on 404, network errors, non-200 responses.
+			// Apps without a backend endpoint should keep working.
+		} finally {
+			isLoading.value = false
+		}
+	})()
+
+	return { manifest, isLoading, validationErrors }
+}
+
+/**
+ * Deep-merge `source` into `target`, returning a new object. Plain
+ * objects are merged recursively; arrays are replaced (not concatenated)
+ * to match typical deep-merge semantics expected by manifest overrides.
+ *
+ * @param {object} target Base object.
+ * @param {object} source Object whose values take precedence.
+ * @return {object} New merged object.
+ */
+function deepMerge(target, source) {
+	if (!isPlainObject(target)) return source
+	if (!isPlainObject(source)) return source
+	const out = { ...target }
+	for (const key of Object.keys(source)) {
+		if (isPlainObject(source[key]) && isPlainObject(target[key])) {
+			out[key] = deepMerge(target[key], source[key])
+		} else {
+			out[key] = source[key]
+		}
+	}
+	return out
+}
+
+function isPlainObject(value) {
+	return value !== null && typeof value === 'object' && !Array.isArray(value)
+}

package/src/composables/useAppStatus.js

@@ -0,0 +1,107 @@
+import { ref } from 'vue'
+import { getCapabilities } from '@nextcloud/capabilities'
+
+/**
+ * Per-`appId` cache of status results. Populated lazily on first call.
+ *
+ * The Vue refs themselves are stored in the cache; subsequent calls for
+ * the same `appId` return the same refs so all consumers share state.
+ *
+ * Module-level lifetime — survives until the page is reloaded.
+ */
+const cache = new Map()
+
+/**
+ * Composable that reports whether a given Nextcloud app is installed
+ * and enabled.
+ *
+ * Implements REQ-JMR-012 of the json-manifest-renderer capability:
+ *  - generic over `appId` so callers can check `openregister`,
+ *    `opencatalogi`, or any other Nextcloud app
+ *  - results are cached per `appId` for the page lifetime; repeated
+ *    calls reuse the same refs without re-checking
+ *  - on error the composable falls back to `{ installed: false,
+ *    enabled: false }` and logs a `console.warn`, so a failed
+ *    lookup never crashes the app shell
+ *
+ * Detection order:
+ *  1. `OC.appswebroots[appId]` — a global object Nextcloud injects on
+ *     every authenticated page load that contains a key for every app
+ *     enabled for the current user. This is the most reliable signal:
+ *     it doesn't require the target app to opt into the capabilities
+ *     API, and it reflects per-user enablement.
+ *  2. `getCapabilities()[appId]` — falls back to the capabilities
+ *     bootstrap when `OC` is not available (rare; mostly for tests).
+ *     Apps that implement `\OCP\Capabilities\ICapability` advertise
+ *     themselves here.
+ *
+ * Most Conduction / OpenRegister-backed apps do NOT register a
+ * capability key, which is why the appswebroots check has to come
+ * first — capabilities alone would report every Conduction app as
+ * "missing" even when they are installed and enabled.
+ *
+ * @param {string} appId Nextcloud app id (e.g. `"openregister"`).
+ * @return {{ installed: import('vue').Ref<boolean>, enabled: import('vue').Ref<boolean>, loading: import('vue').Ref<boolean> }}
+ *
+ * @example
+ * const { installed, enabled, loading } = useAppStatus('openregister')
+ * // After loading.value flips to false, installed.value is the answer.
+ */
+export function useAppStatus(appId) {
+	if (cache.has(appId)) {
+		return cache.get(appId)
+	}
+
+	const installed = ref(false)
+	const enabled = ref(false)
+	const loading = ref(true)
+
+	const result = { installed, enabled, loading }
+	cache.set(appId, result)
+
+	try {
+		// Primary check: the global `OC.appswebroots` map. NC populates
+		// this with one key per app enabled for the current user. Tests
+		// running outside a real Nextcloud page won't have it, in which
+		// case we fall through to the capabilities check.
+		const ocAppsWebRoots = (typeof OC !== 'undefined' && OC && OC.appswebroots) || null
+		if (ocAppsWebRoots && Object.prototype.hasOwnProperty.call(ocAppsWebRoots, appId)) {
+			installed.value = true
+			enabled.value = true
+			return result
+		}
+
+		// Secondary check: capabilities API. Only apps that implement
+		// `ICapability` advertise themselves here.
+		const capabilities = getCapabilities()
+		if (
+			capabilities
+			&& typeof capabilities === 'object'
+			&& Object.prototype.hasOwnProperty.call(capabilities, appId)
+		) {
+			installed.value = true
+			enabled.value = true
+		}
+	} catch (err) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			`[useAppStatus] Failed to determine status for "${appId}":`,
+			err,
+		)
+		// installed and enabled stay false
+	} finally {
+		loading.value = false
+	}
+
+	return result
+}
+
+/**
+ * Test-only helper to reset the per-`appId` cache. Not exported from
+ * the package barrel — only the test suite imports it directly.
+ *
+ * @internal
+ */
+export function __resetAppStatusCacheForTests() {
+	cache.clear()
+}

package/src/css/CnSchemaFormDialog.css

@@ -173,6 +173,17 @@
   border-left: 3px solid var(--color-primary);
 }
 
+.cn-schema-form__viewTable tbody tr.cn-schema-form__inherited-row {
+  background-color: var(--color-background-dark);
+  border-left: 3px solid var(--color-text-maxcontrast);
+  cursor: default;
+  opacity: 0.8;
+}
+
+.cn-schema-form__viewTable tbody tr.cn-schema-form__inherited-row:hover {
+  background-color: var(--color-background-dark);
+}
+
 /* Form editor */
 .cn-schema-form__form-editor {
   display: flex;
@@ -193,6 +204,11 @@
   flex-shrink: 0;
 }
 
+.cn-schema-form__lock-icon {
+  color: var(--color-text-maxcontrast);
+  flex-shrink: 0;
+}
+
 /* Table column widths */
 .cn-schema-form__tableColumnActions {
   width: 150px;
@@ -512,6 +528,12 @@
   color: var(--color-success-text);
 }
 
+.cn-schema-form__chip-inherited {
+  background-color: var(--color-background-dark);
+  color: var(--color-text-maxcontrast);
+  border: 1px solid var(--color-border);
+}
+
 .cn-schema-form__properties-warning {
   margin-top: 15px;
 }

package/src/index.js

@@ -1,6 +1,17 @@
 // CSS — auto-imported so consumers get styles with components
 import './css/index.css'
 
+// Re-export every Nc* component from @nextcloud/vue so consumer apps
+// can import all Nextcloud-Vue + Conduction components from a single
+// barrel, per ADR-004: "NEVER import from @nextcloud/vue directly —
+// use @conduction/nextcloud-vue which re-exports all". Wildcard form
+// is intentional so the barrel stays in sync without per-component
+// edits when @nextcloud/vue adds new components. check-docs.js skips
+// `export *` (its regex only matches the named-export form), so no
+// docs are required for these pass-through re-exports — the source
+// of truth is the upstream @nextcloud/vue documentation.
+export * from '@nextcloud/vue'
+
 // Components
 export {
 	CnDataTable,
@@ -24,6 +35,9 @@ export {
 	CnCopyDialog,
 	CnFormDialog,
 	CnAdvancedFormDialog,
+	CnPropertiesTab,
+	CnMetadataTab,
+	CnPropertyValueCell,
 	CnMassDeleteDialog,
 	CnMassCopyDialog,
 	CnKpiGrid,
@@ -48,6 +62,7 @@ export {
 	CnCard,
 	CnStatsPanel,
 	CnJsonViewer,
+	CnColorPicker,
 	CnDetailGrid,
 	CnProgressBar,
 	CnChartWidget,
@@ -60,6 +75,12 @@ export {
 	CnNoteCard,
 	CnObjectDataWidget,
 	CnObjectMetadataWidget,
+	CnPageRenderer,
+	defaultPageTypes,
+	CnAppNav,
+	CnAppLoading,
+	CnDependencyMissing,
+	CnAppRoot,
 	registerIcons,
 } from './components/index.js'
 
@@ -84,12 +105,13 @@ export {
 } from './store/plugins/index.js'
 
 // Composables
-export { useListView, useDetailView, useSubResource, useDashboardView, useContextMenu } from './composables/index.js'
+export { useListView, useDetailView, useSubResource, useDashboardView, useContextMenu, useAppManifest, useAppStatus } from './composables/index.js'
 
 // Localization
 export { registerTranslations } from './l10n/index.js'
 
 // Utilities
 export { buildHeaders, buildQueryString, parseResponseError, networkError, genericError } from './utils/index.js'
-export { columnsFromSchema, formatValue, filtersFromSchema, fieldsFromSchema } from './utils/index.js'
+export { columnsFromSchema, formatValue, filtersFromSchema, fieldsFromSchema, validateValue } from './utils/index.js'
+export { validateManifest } from './utils/validateManifest.js'
 export { filterWidgetsByVisibility, isWidgetVisible, getCurrentUserId, getCurrentUserGroups, resetVisibilityCache } from './utils/index.js'