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

package/src/components/CnAdvancedFormDialog/index.js

@@ -1 +1,4 @@
 export { default as CnAdvancedFormDialog } from './CnAdvancedFormDialog.vue'
+export { default as CnPropertiesTab } from './CnPropertiesTab.vue'
+export { default as CnMetadataTab } from './CnMetadataTab.vue'
+export { default as CnPropertyValueCell } from './CnPropertyValueCell.vue'

package/src/components/CnAppLoading/CnAppLoading.vue

@@ -0,0 +1,93 @@
+<!--
+  CnAppLoading — full-page loading screen used during the loading phase
+  of CnAppRoot (while useAppManifest is fetching).
+
+  Apps can override CnAppRoot's #loading slot to swap branding /
+  messaging. The default rendering shows an optional logo, the
+  Nextcloud loading spinner, and a message.
+
+  See REQ-JMR-010 of the json-manifest-renderer specification.
+-->
+<template>
+	<div class="cn-app-loading">
+		<div class="cn-app-loading__inner">
+			<slot name="logo">
+				<img
+					v-if="logoUrl"
+					:src="logoUrl"
+					alt=""
+					class="cn-app-loading__logo">
+			</slot>
+			<NcLoadingIcon :size="48" />
+			<p class="cn-app-loading__message">
+				{{ message }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+
+export default {
+	name: 'CnAppLoading',
+
+	components: {
+		NcLoadingIcon,
+	},
+
+	props: {
+		/**
+		 * Loading message displayed below the spinner. Plain string —
+		 * the consuming app pre-translates if needed (this library
+		 * never imports `t()` from a specific app).
+		 *
+		 * @type {string}
+		 */
+		message: {
+			type: String,
+			default: 'Loading...',
+		},
+		/**
+		 * Optional logo image URL displayed above the spinner. Apps
+		 * with custom branding can also override the `#logo` slot.
+		 *
+		 * @type {string}
+		 */
+		logoUrl: {
+			type: String,
+			default: '',
+		},
+	},
+}
+</script>
+
+<style>
+.cn-app-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	min-height: 100vh;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.cn-app-loading__inner {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-app-loading__logo {
+	max-width: 96px;
+	max-height: 96px;
+}
+
+.cn-app-loading__message {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: var(--default-font-size);
+}
+</style>

package/src/components/CnAppLoading/index.js

@@ -0,0 +1,3 @@
+import CnAppLoading from './CnAppLoading.vue'
+export default CnAppLoading
+export { CnAppLoading }

package/src/components/CnAppNav/CnAppNav.vue

@@ -0,0 +1,269 @@
+<!--
+  CnAppNav — manifest-driven app navigation.
+
+  Renders the manifest's `menu[]` array as a Nextcloud app navigation
+  (NcAppNavigation + NcAppNavigationItem). One level of nested
+  `children[]` is supported. Items are sorted by `order`; items without
+  an order render last. Items with a `permission` are filtered against
+  the `permissions` prop — when the prop is omitted, all items render.
+
+  Items split into two groups by `section`:
+  - `section: "main"` (default) — top of the navigation, scrollable.
+  - `section: "settings"` — pinned to the bottom inside NcAppNavigation's
+    `#footer` slot, always visible above the close-toggle, separated
+    from the main list by a thin border. Use for documentation links,
+    settings entries, or anything that should sit at the bottom.
+
+  Manifest and translate are injected from CnAppRoot by default but can
+  also be passed as props for standalone use without CnAppRoot. Props
+  win over inject when both are present.
+
+  See REQ-JMR-004 of the json-manifest-renderer specification.
+-->
+<template>
+	<NcAppNavigation>
+		<template #list>
+			<NcAppNavigationItem
+				v-for="item in mainItems"
+				:key="item.id"
+				:name="resolveLabel(item)"
+				:to="itemTo(item)"
+				:exact="isExact(item)"
+				:icon="item.icon"
+				:active="isActive(item)"
+				@click="onItemClick(item, $event)">
+				<NcAppNavigationItem
+					v-for="child in visibleChildren(item)"
+					:key="child.id"
+					:name="resolveLabel(child)"
+					:to="itemTo(child)"
+					:exact="isExact(child)"
+					:icon="child.icon"
+					:active="isActive(child)"
+					@click="onItemClick(child, $event)" />
+			</NcAppNavigationItem>
+		</template>
+		<template v-if="settingsItems.length" #footer>
+			<ul class="cn-app-nav__footer-list">
+				<NcAppNavigationItem
+					v-for="item in settingsItems"
+					:key="item.id"
+					:name="resolveLabel(item)"
+					:to="itemTo(item)"
+					:exact="isExact(item)"
+					:icon="item.icon"
+					:active="isActive(item)"
+					@click="onItemClick(item, $event)" />
+			</ul>
+		</template>
+	</NcAppNavigation>
+</template>
+
+<script>
+import { NcAppNavigation, NcAppNavigationItem } from '@nextcloud/vue'
+
+export default {
+	name: 'CnAppNav',
+
+	components: {
+		NcAppNavigation,
+		NcAppNavigationItem,
+	},
+
+	inject: {
+		cnManifest: { default: null },
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * Manifest object. Falls back to injected `cnManifest`. Provide
+		 * explicitly when mounting CnAppNav outside of CnAppRoot.
+		 *
+		 * @type {object|null}
+		 */
+		manifest: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * Translate function. Falls back to injected `cnTranslate`,
+		 * which itself defaults to an identity function.
+		 *
+		 * @type {Function|null}
+		 */
+		translate: {
+			type: Function,
+			default: null,
+		},
+		/**
+		 * List of permission strings the current user holds. Items
+		 * declaring a `permission` only render when their permission
+		 * appears in this list. When the prop is omitted (or empty),
+		 * all items are visible regardless of their permission field.
+		 *
+		 * @type {Array<string>}
+		 */
+		permissions: {
+			type: Array,
+			default: () => [],
+		},
+	},
+
+	computed: {
+		effectiveManifest() {
+			return this.manifest ?? this.cnManifest
+		},
+		effectiveTranslate() {
+			return this.translate ?? this.cnTranslate
+		},
+		/**
+		 * All visible items (filtered by permission, sorted by order).
+		 * Retained for backwards-compat with the previous public API and
+		 * tests that read this computed; new code should use
+		 * `mainItems` / `settingsItems` instead.
+		 */
+		visibleItems() {
+			const items = this.effectiveManifest?.menu ?? []
+			return items
+				.filter((item) => this.passesPermission(item))
+				.slice()
+				.sort((a, b) => {
+					const aHas = typeof a.order === 'number'
+					const bHas = typeof b.order === 'number'
+					if (aHas && !bHas) return -1
+					if (!aHas && bHas) return 1
+					if (!aHas && !bHas) return 0
+					return a.order - b.order
+				})
+		},
+		/** Items that render in the top list (default placement). */
+		mainItems() {
+			return this.visibleItems.filter((item) => (item.section ?? 'main') === 'main')
+		},
+		/**
+		 * Items that render inside the `#footer` slot of NcAppNavigation
+		 * — always visible at the bottom of the navigation, above the
+		 * close-toggle. Use for help / docs / settings entries that
+		 * should anchor to the bottom rather than scroll with the main
+		 * list.
+		 */
+		settingsItems() {
+			return this.visibleItems.filter((item) => item.section === 'settings')
+		},
+	},
+
+	methods: {
+		passesPermission(item) {
+			if (!item.permission) return true
+			if (!this.permissions || this.permissions.length === 0) return true
+			return this.permissions.includes(item.permission)
+		},
+		visibleChildren(item) {
+			if (!Array.isArray(item.children)) return []
+			return item.children.filter((c) => this.passesPermission(c))
+		},
+		resolveLabel(item) {
+			return this.effectiveTranslate(item.label)
+		},
+		isActive(item) {
+			if (item.href || !item.route) return false
+			return this.$route?.name === item.route
+		},
+		/**
+		 * Look up an item's resolved page (`pages[]` entry whose `id`
+		 * matches the menu item's `route`) — used to decide whether the
+		 * NcAppNavigationItem should match its router-link `exact`.
+		 *
+		 * @param {object} item Menu item to resolve.
+		 * @return {object|null} Matching page entry, or null when the item
+		 *   has no `route` or no page matches.
+		 */
+		pageForItem(item) {
+			if (!item.route) return null
+			const pages = this.effectiveManifest?.pages ?? []
+			return pages.find((p) => p.id === item.route) ?? null
+		},
+		/**
+		 * Pass-through for `NcAppNavigationItem`'s router-link `exact`.
+		 * Root paths (`/`) match every nested route by default, which
+		 * makes the root item permanently look active. Returning true
+		 * for `route === '/'` restores the expected behaviour.
+		 *
+		 * @param {object} item Menu item being rendered.
+		 * @return {boolean} Whether to enable exact router-link matching.
+		 */
+		isExact(item) {
+			const page = this.pageForItem(item)
+			return page?.route === '/'
+		},
+		/**
+		 * Build the `:to` value for an `NcAppNavigationItem`. External
+		 * (`href`) items return `null` so the underlying anchor falls
+		 * through to a click handler instead of vue-router; route items
+		 * return a named route.
+		 *
+		 * @param {object} item Menu item being rendered.
+		 * @return {object|null} A `{ name }` route object, or null for
+		 *   external / route-less items.
+		 */
+		itemTo(item) {
+			if (item.href) return null
+			return item.route ? { name: item.route } : null
+		},
+		/**
+		 * Click handler. For external (`href`) items, opens the URL in a
+		 * new tab with safe rel attributes. Route items are handled by
+		 * `:to` and skip this path.
+		 *
+		 * @param {object} item Menu item being clicked.
+		 * @param {Event} [event] Native click event (used to call
+		 *   preventDefault for external links).
+		 */
+		onItemClick(item, event) {
+			if (!item.href) return
+			if (event && typeof event.preventDefault === 'function') {
+				event.preventDefault()
+			}
+			window.open(item.href, '_blank', 'noopener,noreferrer')
+		},
+	},
+}
+</script>
+
+<style>
+/*
+ * The legacy `icon-*` classes in Nextcloud render a background-image
+ * with a hardcoded dark fill, so they stay grey when an entry becomes
+ * active (text turns white against the primary-element background).
+ * Force the icon to white in the active state to match the label.
+ * Only applies when the icon is provided via the `icon` prop (CSS
+ * class) — items using a `<template #icon>` MDI component already
+ * inherit `currentColor`.
+ */
+.app-navigation-entry.active .app-navigation-entry-icon[class*="icon-"] {
+	filter: brightness(0) invert(1);
+}
+
+/*
+ * Footer-list (section: "settings" items rendered in NcAppNavigation's
+ * `#footer` slot). Reset list defaults so the entries align with the
+ * main list, and add a thin separator above the group so it visually
+ * detaches from the scrollable list when the two meet.
+ *
+ * NcAppNavigation's scoped style targets `.app-navigation__content >
+ * ul` with `overflow-y: auto` + flex padding, and Vue 2 propagates the
+ * parent's data-v attribute onto slot-root elements — so without these
+ * overrides the footer list renders its own scrollbar even though the
+ * footer area has plenty of room. The `!important` flags force-beat
+ * the parent rule's specificity (which includes the data-v attribute).
+ */
+.cn-app-nav__footer-list {
+	list-style: none;
+	margin: 0;
+	padding: 0 !important;
+	border-top: 1px solid var(--color-border);
+	overflow: visible !important;
+	flex: 0 0 auto;
+}
+</style>

package/src/components/CnAppNav/index.js

@@ -0,0 +1,3 @@
+import CnAppNav from './CnAppNav.vue'
+export default CnAppNav
+export { CnAppNav }

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -0,0 +1,201 @@
+<!--
+  CnAppRoot — top-level wrapper for manifest-driven Conduction apps.
+
+  Provides the manifest, custom-component registry, and translate
+  function to descendants via Vue's `provide`/`inject`. Orchestrates
+  three rendering phases:
+
+    1. Loading        — while useAppManifest.isLoading is true.
+                        Default: <CnAppLoading />. Override: #loading slot.
+    2. Dependency     — after loading; when any entry in
+                        manifest.dependencies is not installed/enabled.
+                        Default: <CnDependencyMissing />. Override:
+                        #dependency-missing slot.
+    3. Shell          — manifest loaded + dependencies satisfied.
+                        Renders #menu (default <CnAppNav />) + the
+                        consuming app's <router-view>, plus optional
+                        #header-actions, #sidebar, and #footer slots.
+
+  Consuming apps that want manifest-driven pages but their own root
+  layout can skip CnAppRoot entirely and use CnPageRenderer / CnAppNav
+  with explicit props (the props-vs-inject fallback). CnAppRoot is the
+  full-shell convenience.
+
+  See REQ-JMR-003 and REQ-JMR-013 of the json-manifest-renderer spec.
+-->
+<template>
+	<NcContent :app-name="appId">
+		<!-- Loading phase -->
+		<template v-if="phase === 'loading'">
+			<slot name="loading">
+				<CnAppLoading />
+			</slot>
+		</template>
+
+		<!-- Dependency-check phase -->
+		<template v-else-if="phase === 'dependency-missing'">
+			<slot name="dependency-missing" :dependencies="unresolvedDependencies">
+				<CnDependencyMissing
+					:dependencies="unresolvedDependencies"
+					:app-name="appId" />
+			</slot>
+		</template>
+
+		<!-- Shell phase -->
+		<template v-else>
+			<slot name="menu">
+				<CnAppNav :permissions="permissions" />
+			</slot>
+			<NcAppContent>
+				<router-view />
+				<slot name="header-actions" />
+				<slot name="footer" />
+			</NcAppContent>
+			<slot name="sidebar" />
+		</template>
+	</NcContent>
+</template>
+
+<script>
+import { NcAppContent, NcContent } from '@nextcloud/vue'
+import CnAppNav from '../CnAppNav/CnAppNav.vue'
+import CnAppLoading from '../CnAppLoading/CnAppLoading.vue'
+import CnDependencyMissing from '../CnDependencyMissing/CnDependencyMissing.vue'
+import { useAppStatus } from '../../composables/useAppStatus.js'
+
+export default {
+	name: 'CnAppRoot',
+
+	components: {
+		NcAppContent,
+		NcContent,
+		CnAppNav,
+		CnAppLoading,
+		CnDependencyMissing,
+	},
+
+	provide() {
+		return {
+			cnManifest: this.manifest,
+			cnCustomComponents: this.customComponents,
+			cnTranslate: this.translate,
+			cnPageTypes: this.pageTypes,
+		}
+	},
+
+	props: {
+		/**
+		 * Reactive manifest object (from useAppManifest). The renderer
+		 * reads `manifest.dependencies`, `manifest.menu`, and is
+		 * propagated to descendants via provide/inject.
+		 *
+		 * @type {object}
+		 */
+		manifest: {
+			type: Object,
+			required: true,
+		},
+		/**
+		 * Nextcloud app id. Forwarded to NcContent as `app-name` and
+		 * to CnDependencyMissing for the heading.
+		 *
+		 * @type {string}
+		 */
+		appId: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Whether the manifest is still loading from the backend.
+		 * Typically wired to `useAppManifest().isLoading`. Defaults to
+		 * false so that apps using only the bundled manifest skip the
+		 * loading phase.
+		 *
+		 * @type {boolean}
+		 */
+		isLoading: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Custom-component registry consumed by CnPageRenderer for
+		 * `type: "custom"` pages and slot overrides. Empty by default.
+		 *
+		 * @type {object}
+		 */
+		customComponents: {
+			type: Object,
+			default: () => ({}),
+		},
+		/**
+		 * Translate function provided by the consuming app. The library
+		 * never imports `t()` from a specific app, so the consumer
+		 * passes its own translator. Typically a closure over the
+		 * Nextcloud `t()` mixin pre-bound to the app id, e.g.
+		 * `(key) => t(appId, key)`.
+		 *
+		 * Defaults to an identity function so untranslated keys surface
+		 * visibly rather than crashing.
+		 *
+		 * Note: the prop is named `translate` (not `t`) to avoid
+		 * shadowing the global `t()` method that Conduction apps
+		 * install via `Vue.mixin({ methods: { t, n } })`. The provide
+		 * key is `cnTranslate`.
+		 *
+		 * @type {Function}
+		 */
+		translate: {
+			type: Function,
+			default: (key) => key,
+		},
+		/**
+		 * List of permission strings the current user holds. Forwarded
+		 * to CnAppNav's permission filter.
+		 *
+		 * @type {Array<string>}
+		 */
+		permissions: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Page-type registry. Map of `pages[].type` → Vue component.
+		 * Provided to descendant CnPageRenderer instances via inject.
+		 * When omitted, the renderer falls back to the library's
+		 * `defaultPageTypes`. Apps with custom page types pass a merged
+		 * map: `{ ...defaultPageTypes, report: MyReportPage }`.
+		 *
+		 * @type {object|null}
+		 */
+		pageTypes: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	computed: {
+		/**
+		 * Per-dependency status, computed once per `appId` declared in
+		 * `manifest.dependencies`. Reading the value here triggers the
+		 * useAppStatus composable for each id; results are cached
+		 * module-side so subsequent reads are free.
+		 */
+		dependencyStatuses() {
+			const deps = Array.isArray(this.manifest?.dependencies)
+				? this.manifest.dependencies
+				: []
+			return deps.map((id) => ({ id, status: useAppStatus(id) }))
+		},
+		unresolvedDependencies() {
+			return this.dependencyStatuses
+				.filter(({ status }) => !status.installed.value || !status.enabled.value)
+				.map(({ id }) => ({ id, name: id, enabled: false }))
+		},
+		phase() {
+			if (this.isLoading) return 'loading'
+			if (this.unresolvedDependencies.length > 0) return 'dependency-missing'
+			return 'shell'
+		},
+	},
+}
+</script>

package/src/components/CnAppRoot/index.js

@@ -0,0 +1,3 @@
+import CnAppRoot from './CnAppRoot.vue'
+export default CnAppRoot
+export { CnAppRoot }