@conduction/nextcloud-vue 0.1.0-beta.6 → 0.1.0-beta.7

package/src/components/CnDeleteDialog/CnDeleteDialog.vue

@@ -91,6 +91,11 @@ export default {
 			type: String,
 			default: 'title',
 		},
+		/** Optional function to format the item name. Receives the item, returns a string. Overrides nameField when provided. */
+		nameFormatter: {
+			type: Function,
+			default: null,
+		},
 		/** Dialog title */
 		dialogTitle: {
 			type: String,
@@ -121,6 +126,7 @@ export default {
 
 	computed: {
 		itemName() {
+			if (this.nameFormatter) return this.nameFormatter(this.item)
 			return this.item[this.nameField] || this.item.name || this.item.title || this.item.id
 		},
 		resolvedWarningText() {
@@ -147,7 +153,7 @@ export default {
 		 * Set the result of the delete operation. Call this from the parent
 		 * after the API call completes.
 		 *
-		 * @param {{ success?: boolean, error?: string }} resultData
+		 * @param {{ success?: boolean, error?: string }} resultData - Result data to pass to the dialog
 		 * @public
 		 */
 		setResult(resultData) {

package/src/components/CnDetailCard/CnDetailCard.vue

@@ -38,7 +38,7 @@
 		</div>
 
 		<!-- Content -->
-		<div v-show="!isCollapsed" class="cn-detail-card__content">
+		<div v-show="!isCollapsed" class="cn-detail-card__content" :class="{ 'cn-detail-card__content--flush': flush }">
 			<slot />
 		</div>
 
@@ -101,6 +101,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Remove content padding — allows tables and lists to go edge-to-edge.
+		 */
+		flush: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -207,6 +214,10 @@ export default {
 	padding: 16px;
 }
 
+.cn-detail-card__content--flush {
+	padding: 0;
+}
+
 .cn-detail-card__footer {
 	padding: 8px 16px;
 	border-top: 1px solid var(--color-border);

package/src/components/CnDetailGrid/CnDetailGrid.vue

@@ -0,0 +1,254 @@
+<!--
+  CnDetailGrid — Data-driven label-value grid for detail/info sections.
+
+  Supports two layout modes:
+  - grid (default): Responsive card grid with label stacked above value
+  - horizontal: Vertical list of rows with label on left, value on right
+
+  Items can be data-driven via the `items` prop, or customized per-item
+  via named scoped slots (#item-{index}, #label-{index}, #item-actions-{index}).
+-->
+<template>
+	<div
+		class="cn-detail-grid"
+		:class="rootClasses"
+		:style="rootStyles">
+		<!-- Empty state -->
+		<div v-if="!items.length && !$scopedSlots.default" class="cn-detail-grid__empty">
+			<slot name="empty">
+				{{ emptyLabel }}
+			</slot>
+		</div>
+
+		<!-- Data-driven items -->
+		<div
+			v-for="(item, index) in items"
+			:key="index"
+			class="cn-detail-grid__item"
+			:class="itemClasses">
+			<!-- Label -->
+			<div class="cn-detail-grid__label">
+				<slot :name="'label-' + index" :item="item" :index="index">
+					{{ item.label }}
+				</slot>
+			</div>
+
+			<!-- Value -->
+			<div class="cn-detail-grid__value">
+				<slot :name="'item-' + index" :item="item" :index="index">
+					{{ item.value !== undefined && item.value !== null ? item.value : '-' }}
+				</slot>
+			</div>
+
+			<!-- Optional per-item actions -->
+			<div v-if="$scopedSlots['item-actions-' + index]" class="cn-detail-grid__actions">
+				<slot :name="'item-actions-' + index" :item="item" :index="index" />
+			</div>
+		</div>
+
+		<!-- Append slot for manual items -->
+		<slot />
+	</div>
+</template>
+
+<script>
+/**
+ * CnDetailGrid — Data-driven label-value grid for detail/info sections.
+ *
+ * @example Simple data-driven grid
+ * <CnDetailGrid :items="[
+ *   { label: 'ID', value: '12345' },
+ *   { label: 'Status', value: 'Active' },
+ *   { label: 'Created', value: '2024-01-15' },
+ * ]" />
+ *
+ * @example Grid with custom slot content
+ * <CnDetailGrid :items="[
+ *   { label: 'ID', value: item.id },
+ *   { label: 'Action' },
+ * ]">
+ *   <template #item-1>
+ *     <CnStatusBadge :label="item.action" />
+ *   </template>
+ * </CnDetailGrid>
+ *
+ * @example Horizontal row layout
+ * <CnDetailGrid layout="horizontal" :items="fields" />
+ */
+export default {
+	name: 'CnDetailGrid',
+
+	props: {
+		/**
+		 * Array of detail items to render.
+		 * @type {Array<{ label: string, value?: string|number }>}
+		 */
+		items: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Layout mode.
+		 * - 'grid': Responsive card grid, label stacked above value
+		 * - 'horizontal': Vertical list of rows, label on left, value on right
+		 */
+		layout: {
+			type: String,
+			default: 'grid',
+			validator: (v) => ['grid', 'horizontal'].includes(v),
+		},
+		/**
+		 * Number of fixed grid columns. Set to 0 (default) for responsive auto-fit.
+		 * Only applies to layout="grid".
+		 */
+		columns: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * Minimum width (px) for auto-fit grid items.
+		 * Only applies when columns is 0 and layout is 'grid'.
+		 */
+		minItemWidth: {
+			type: Number,
+			default: 250,
+		},
+		/**
+		 * Minimum width (px) for labels in horizontal mode.
+		 */
+		labelWidth: {
+			type: Number,
+			default: 150,
+		},
+		/**
+		 * Whether to show the left accent border on items.
+		 */
+		accent: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Text shown when the items array is empty.
+		 */
+		emptyLabel: {
+			type: String,
+			default: 'No details available',
+		},
+	},
+
+	computed: {
+		rootClasses() {
+			return {
+				'cn-detail-grid--grid': this.layout === 'grid',
+				'cn-detail-grid--horizontal': this.layout === 'horizontal',
+				'cn-detail-grid--accent': this.accent,
+			}
+		},
+		rootStyles() {
+			if (this.layout === 'grid') {
+				if (this.columns > 0) {
+					return { 'grid-template-columns': `repeat(${this.columns}, 1fr)` }
+				}
+				return { 'grid-template-columns': `repeat(auto-fit, minmax(${this.minItemWidth}px, 1fr))` }
+			}
+			if (this.layout === 'horizontal') {
+				return { '--cn-detail-grid-label-width': this.labelWidth + 'px' }
+			}
+			return {}
+		},
+		itemClasses() {
+			return {
+				'cn-detail-grid__item--horizontal': this.layout === 'horizontal',
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+/* ===== Grid layout (default) ===== */
+.cn-detail-grid--grid {
+	display: grid;
+	gap: calc(4 * var(--default-grid-baseline, 4px));
+}
+
+/* ===== Horizontal layout ===== */
+.cn-detail-grid--horizontal {
+	display: flex;
+	flex-direction: column;
+	gap: calc(3 * var(--default-grid-baseline, 4px));
+}
+
+/* ===== Item (card style) ===== */
+.cn-detail-grid__item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline, 4px);
+	padding: calc(2 * var(--default-grid-baseline, 4px)) calc(3 * var(--default-grid-baseline, 4px));
+	background: var(--color-background-hover);
+	border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+/* Accent border */
+.cn-detail-grid--accent .cn-detail-grid__item {
+	border-left: 3px solid var(--color-primary-element);
+}
+
+/* Horizontal item: row direction */
+.cn-detail-grid__item--horizontal {
+	flex-direction: row;
+	align-items: center;
+	gap: calc(4 * var(--default-grid-baseline, 4px));
+	border-radius: var(--border-radius);
+}
+
+/* ===== Label ===== */
+.cn-detail-grid__label {
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+	font-weight: 500;
+}
+
+.cn-detail-grid--horizontal .cn-detail-grid__label {
+	min-width: var(--cn-detail-grid-label-width, 150px);
+	flex-shrink: 0;
+}
+
+/* ===== Value ===== */
+.cn-detail-grid__value {
+	font-size: 1em;
+	color: var(--color-main-text);
+	word-break: break-word;
+	margin: 0.5rem;
+}
+
+.cn-detail-grid--horizontal .cn-detail-grid__value {
+	flex: 1;
+}
+
+/* ===== Actions ===== */
+.cn-detail-grid__actions {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+}
+
+/* ===== Empty state ===== */
+.cn-detail-grid__empty {
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+	padding: calc(2 * var(--default-grid-baseline, 4px));
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 600px) {
+	.cn-detail-grid--grid {
+		grid-template-columns: 1fr !important;
+	}
+
+	.cn-detail-grid__item--horizontal {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}
+</style>

package/src/components/CnDetailGrid/index.js

@@ -0,0 +1 @@
+export { default as CnDetailGrid } from './CnDetailGrid.vue'

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1,6 +1,18 @@
 <!--
   CnDetailPage — Generic detail/overview page.
 
+  The detail page equivalent of CnDashboardPage. Assembles a complete entity detail
+  view from card-based sections, matching the dashboard visual style (rounded cards
+  with headers). Uses a fixed declarative layout (no drag-and-drop).
+
+  Features:
+  - Header with back button, title, subtitle, and action buttons
+  - Card-based content area (via default slot with CnDetailCard components)
+  - Optional 12-column CSS grid layout mode (via layout + widgets props)
+  - Optional right sidebar (CnObjectSidebar) for files, notes, tags, tasks, audit trail
+  - Loading and error states
+  - Edit mode toggle
+
   A simpler alternative to CnIndexPage for detail, stats, and overview pages.
   No multi-object table, no CRUD dialogs — just a clean layout with:
   - Header (title, description, icon, action buttons)
@@ -76,6 +88,27 @@
 
 		<!-- Main content -->
 		<div v-else class="cn-detail-page__body">
+			<!-- Grid layout mode -->
+			<div v-if="hasGridLayout" class="cn-detail-page__content cn-detail-page__content--grid">
+				<section
+					v-for="item in sortedLayout"
+					:key="item.id"
+					:style="widgetGridStyle(item)"
+					class="cn-detail-page__grid-item"
+					:aria-labelledby="item.showTitle !== false && findWidget(item) ? `widget-title-${item.id}` : undefined">
+					<h3
+						v-if="item.showTitle !== false && findWidget(item)"
+						:id="`widget-title-${item.id}`"
+						class="cn-detail-page__widget-title">
+						{{ findWidget(item).title }}
+					</h3>
+					<slot
+						:name="`widget-${item.widgetId}`"
+						:item="item"
+						:widget="findWidget(item)" />
+				</section>
+			</div>
+
 			<!-- Statistics table -->
 			<div v-if="hasStats" class="cn-detail-page__stats">
 				<slot name="stats-header">
@@ -103,20 +136,23 @@
 				</table>
 			</div>
 
-			<!-- Default content -->
-			<div class="cn-detail-page__content">
-				<slot />
-			</div>
+			<!-- Default vertical stacking mode -->
+			<div v-else class="cn-detail-page__content">
+				<!-- Default content -->
+				<div class="cn-detail-page__content">
+					<slot />
+				</div>
 
-			<!-- Sections slot — additional content below stats -->
-			<div v-if="$slots.sections" class="cn-detail-page__sections">
-				<slot name="sections" />
+				<!-- Sections slot — additional content below stats -->
+				<div v-if="$slots.sections" class="cn-detail-page__sections">
+					<slot name="sections" />
+				</div>
 			</div>
-		</div>
 
-		<!-- Footer -->
-		<div v-if="$slots.footer" class="cn-detail-page__footer">
-			<slot name="footer" />
+			<!-- Footer -->
+			<div v-if="$slots.footer" class="cn-detail-page__footer">
+				<slot name="footer" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -126,11 +162,19 @@ import { NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { CnIcon } from '../CnIcon/index.js'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import { gridLayout } from '../../mixins/gridLayout.js'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
 
 /**
  * CnDetailPage — Generic detail/overview page.
  *
+ * Supports two layout modes:
+ * 1. **Default (vertical stacking):** Content provided via default slot, cards stack vertically.
+ * 2. **Grid layout:** When `layout` and `widgets` props are provided, content renders in a
+ *    12-column CSS grid with `#widget-{widgetId}` scoped slots. Same API as CnDashboardPage.
+ *
+ * @example Basic usage (vertical stacking)
+ *
  * A simpler alternative to CnIndexPage for pages that display detail info,
  * statistics, charts, or card grids — without multi-object tables or CRUD
  * dialogs. Provides a consistent layout with header, loading/error/empty
@@ -156,6 +200,24 @@ import Refresh from 'vue-material-design-icons/Refresh.vue'
  *   <SchemaCards :schemas="schemas" />
  * </CnDetailPage>
  *
+ * @example Grid layout mode
+ * <CnDetailPage
+ *   title="Character Detail"
+ *   :layout="[
+ *     { id: 1, widgetId: 'info', gridX: 0, gridY: 0, gridWidth: 8 },
+ *     { id: 2, widgetId: 'stats', gridX: 8, gridY: 0, gridWidth: 4 },
+ *   ]"
+ *   :widgets="[
+ *     { id: 'info', title: 'Character Info' },
+ *     { id: 'stats', title: 'Statistics' },
+ *   ]">
+ *   <template #widget-info="{ item, widget }">
+ *     <CharacterInfoCard :character="character" />
+ *   </template>
+ *   <template #widget-stats="{ item, widget }">
+ *     <StatsCard :stats="character.stats" />
+ *   </template>
+ *
  * @example With header actions and error handling
  * <CnDetailPage
  *   title="Schema Details"
@@ -181,6 +243,12 @@ export default {
 		Refresh,
 	},
 
+	mixins: [gridLayout],
+
+	inject: {
+		objectSidebarState: { default: null },
+	},
+
 	props: {
 		/** Page title */
 		title: {
@@ -212,6 +280,36 @@ export default {
 			type: String,
 			default: 'Loading...',
 		},
+		/** Whether to activate the external sidebar (via objectSidebarState inject) */
+		sidebar: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether the sidebar is open (expanded) */
+		sidebarOpen: {
+			type: Boolean,
+			default: true,
+		},
+		/** The registered object type slug for the sidebar */
+		objectType: {
+			type: String,
+			default: '',
+		},
+		/** The object ID to display in the sidebar */
+		objectId: {
+			type: [String, Number],
+			default: '',
+		},
+		/** Subtitle shown in the sidebar header */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+		/** Additional sidebar configuration (register, schema, hiddenTabs, title, subtitle) */
+		sidebarProps: {
+			type: Object,
+			default: () => ({}),
+		},
 		/** Whether the page is in an error state */
 		error: {
 			type: Boolean,
@@ -275,10 +373,58 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the sidebar is rendered externally (via objectSidebarState inject)
+		 * rather than inline. When external, CnDetailPage only manages state —
+		 * the parent App renders the actual NcAppSidebar.
+		 */
+		hasExternalSidebar() {
+			return !!this.objectSidebarState
+		},
 		hasStats() {
 			return this.statsColumns.length > 0 && (this.statsRows.length > 0 || !!this.$slots['stats-rows'])
 		},
 	},
+
+	watch: {
+		sidebar: {
+			immediate: true,
+			handler() { this.syncSidebarState() },
+		},
+		title() { this.syncSidebarState() },
+		subtitle() { this.syncSidebarState() },
+		objectType() { this.syncSidebarState() },
+		objectId() { this.syncSidebarState() },
+		sidebarProps: {
+			deep: true,
+			handler() { this.syncSidebarState() },
+		},
+	},
+
+	beforeDestroy() {
+		if (this.hasExternalSidebar) {
+			this.objectSidebarState.active = false
+		}
+	},
+
+	methods: {
+		syncSidebarState() {
+			if (!this.hasExternalSidebar) return
+			if (this.sidebar && this.objectType && this.objectId) {
+				this.objectSidebarState.active = true
+				this.objectSidebarState.open = this.sidebarOpen
+				this.objectSidebarState.objectType = this.objectType
+				this.objectSidebarState.objectId = this.objectId
+				this.objectSidebarState.title = this.sidebarProps.title || this.title || ''
+				this.objectSidebarState.subtitle = this.sidebarProps.subtitle || this.subtitle || ''
+				this.objectSidebarState.register = this.sidebarProps.register || ''
+				this.objectSidebarState.schema = this.sidebarProps.schema || ''
+				this.objectSidebarState.hiddenTabs = this.sidebarProps.hiddenTabs || []
+			} else {
+				this.objectSidebarState.active = false
+			}
+		},
+	},
 }
 </script>
 

package/src/components/CnFacetSidebar/CnFacetSidebar.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="cn-facet-sidebar">
 		<div class="cn-facet-sidebar__header">
-			<h3 class="cn-facet-sidebar__title">{{ title }}</h3>
+			<h3 class="cn-facet-sidebar__title">
+				{{ title }}
+			</h3>
 			<NcButton
 				v-if="hasActiveFilters"
 				type="tertiary"