@conduction/nextcloud-vue 0.1.0-beta.1

package/src/components/CnDataTable/CnDataTable.vue

@@ -0,0 +1,354 @@
+<template>
+	<div class="cn-table-container" :class="{ 'cn-table-container--scrollable': scrollable }">
+		<!-- Loading State -->
+		<div v-if="loading" class="cn-table-loading">
+			<NcLoadingIcon :size="32" />
+			<p>{{ loadingText }}</p>
+		</div>
+
+		<!-- Table -->
+		<table v-else class="cn-data-table">
+			<thead>
+				<tr>
+					<!-- Checkbox column -->
+					<th v-if="selectable" class="cn-table-col--checkbox">
+						<NcCheckboxRadioSwitch
+							:checked="allSelected"
+							:indeterminate="someSelected && !allSelected"
+							@update:checked="toggleSelectAll" />
+					</th>
+
+					<!-- Data columns -->
+					<th
+						v-for="col in effectiveColumns"
+						:key="col.key"
+						:class="[
+							col.sortable ? 'cn-table-header--sortable' : '',
+							col.class || '',
+						]"
+						:style="col.width ? { width: col.width } : {}"
+						@click="col.sortable ? onSort(col.key) : null">
+						{{ col.label }}
+						<span
+							v-if="col.sortable && sortKey === col.key"
+							class="cn-table-sort-indicator">
+							{{ sortOrder === 'asc' ? '▲' : '▼' }}
+						</span>
+					</th>
+
+					<!-- Actions column -->
+					<th v-if="$scopedSlots['row-actions']" class="cn-table-col--actions">
+						<!-- Actions header intentionally empty -->
+					</th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<!-- Empty state -->
+				<tr v-if="rows.length === 0" class="cn-table-empty">
+					<td :colspan="totalColumns">
+						<slot name="empty">
+							{{ emptyText }}
+						</slot>
+					</td>
+				</tr>
+
+				<!-- Data rows -->
+				<tr
+					v-for="row in rows"
+					v-else
+					:key="row[rowKey]"
+					class="cn-table-row"
+					:class="[
+						isSelected(row) ? 'cn-table-row--selected' : '',
+						rowClass ? rowClass(row) : '',
+					]"
+					@click="$emit('row-click', row)">
+					<!-- Checkbox -->
+					<td v-if="selectable" class="cn-table-col--checkbox" @click.stop>
+						<NcCheckboxRadioSwitch
+							:checked="isSelected(row)"
+							@update:checked="toggleSelect(row)" />
+					</td>
+
+					<!-- Data cells -->
+					<td
+						v-for="col in effectiveColumns"
+						:key="col.key"
+						:class="col.cellClass || ''"
+						:style="col.width ? { maxWidth: col.width } : {}">
+						<slot :name="'column-' + col.key" :row="row" :value="getCellValue(row, col.key)">
+							<!-- Schema-driven: use CnCellRenderer -->
+							<CnCellRenderer
+								v-if="isSchemaColumn(col)"
+								:value="getCellValue(row, col.key)"
+								:property="getSchemaProperty(col.key)" />
+							<!-- Manual: plain text -->
+							<template v-else>
+								{{ getCellValue(row, col.key) }}
+							</template>
+						</slot>
+					</td>
+
+					<!-- Row actions -->
+					<td v-if="$scopedSlots['row-actions']" class="cn-table-col--actions" @click.stop>
+						<slot name="row-actions" :row="row" />
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { CnCellRenderer } from '../CnCellRenderer/index.js'
+import { columnsFromSchema } from '../../utils/schema.js'
+
+/**
+ * CnDataTable — Generic sortable data table for list views.
+ *
+ * Replaces the copy-pasted `<table class="viewTable">` HTML pattern found in
+ * every list view across OpenRegister, Pipelinq, and Procest. Supports sorting,
+ * row selection, custom cell rendering via scoped slots, loading states,
+ * and empty states.
+ *
+ * When a `schema` prop is provided, columns are auto-generated from schema
+ * properties and cells render through CnCellRenderer for type-aware formatting
+ * (dates, booleans, UUIDs, enums, etc.). Scoped slots still override individual
+ * columns when needed.
+ *
+ * NL Design tokens used:
+ * - --nldesign-component-table-header-background-color
+ * - --nldesign-component-table-row-hover-background-color
+ * - --nldesign-component-table-border-color
+ *
+ * @example Manual columns (backwards compatible)
+ * <CnDataTable
+ *   :columns="[
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'email', label: 'Email' },
+ *   ]"
+ *   :rows="clients"
+ *   @row-click="openClient" />
+ *
+ * @example Schema-driven (auto columns)
+ * <CnDataTable :schema="schema" :rows="objects" />
+ *
+ * @example Schema with overrides and custom cell
+ * <CnDataTable
+ *   :schema="schema"
+ *   :exclude-columns="['description']"
+ *   :column-overrides="{ status: { width: '200px' } }"
+ *   :rows="objects">
+ *   <template #column-status="{ row, value }">
+ *     <QuickStatusDropdown :case-obj="row" />
+ *   </template>
+ * </CnDataTable>
+ */
+export default {
+	name: 'CnDataTable',
+
+	components: {
+		NcLoadingIcon,
+		NcCheckboxRadioSwitch,
+		CnCellRenderer,
+	},
+
+	props: {
+		/**
+		 * Column definitions (manual mode).
+		 * Not required when `schema` is provided.
+		 * @type {Array<{key: string, label: string, sortable?: boolean, width?: string, class?: string, cellClass?: string}>}
+		 */
+		columns: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Schema object with `properties` field (schema-driven mode).
+		 * When provided, columns are auto-generated from schema properties.
+		 */
+		schema: {
+			type: Object,
+			default: null,
+		},
+		/** Per-column overrides when using schema mode: { key: { width, label, sortable, ... } } */
+		columnOverrides: {
+			type: Object,
+			default: () => ({}),
+		},
+		/** Column keys to exclude when using schema mode */
+		excludeColumns: {
+			type: Array,
+			default: () => [],
+		},
+		/** Column keys to include when using schema mode (whitelist) */
+		includeColumns: {
+			type: Array,
+			default: null,
+		},
+		/** Row data array. Each row should have a unique identifier (see rowKey). */
+		rows: {
+			type: Array,
+			default: () => [],
+		},
+		/** Whether data is loading (shows loading spinner) */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Current sort column key */
+		sortKey: {
+			type: String,
+			default: null,
+		},
+		/** Current sort order: 'asc' or 'desc' */
+		sortOrder: {
+			type: String,
+			default: 'asc',
+			validator: (v) => ['asc', 'desc'].includes(v),
+		},
+		/** Whether rows can be selected with checkboxes */
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+		/** Array of currently selected row IDs */
+		selectedIds: {
+			type: Array,
+			default: () => [],
+		},
+		/** Property name used as unique row identifier */
+		rowKey: {
+			type: String,
+			default: 'id',
+		},
+		/** Text shown when there are no rows */
+		emptyText: {
+			type: String,
+			default: 'No items found',
+		},
+		/** Function returning CSS class(es) for a row: (row) => string|object */
+		rowClass: {
+			type: Function,
+			default: null,
+		},
+		/** Whether to constrain table height and make it scrollable */
+		scrollable: {
+			type: Boolean,
+			default: false,
+		},
+		/** Text shown while loading */
+		loadingText: {
+			type: String,
+			default: 'Loading...',
+		},
+	},
+
+	computed: {
+		/**
+		 * Effective columns: schema-generated or manually provided.
+		 * Schema columns take precedence when schema is provided and no manual columns given.
+		 */
+		effectiveColumns() {
+			if (this.schema && this.columns.length === 0) {
+				return columnsFromSchema(this.schema, {
+					exclude: this.excludeColumns,
+					include: this.includeColumns,
+					overrides: this.columnOverrides,
+				})
+			}
+			return this.columns
+		},
+
+		totalColumns() {
+			let count = this.effectiveColumns.length
+			if (this.selectable) count++
+			if (this.$scopedSlots['row-actions']) count++
+			return count
+		},
+
+		allSelected() {
+			return this.rows.length > 0
+				&& this.rows.every((row) => this.selectedIds.includes(row[this.rowKey]))
+		},
+
+		someSelected() {
+			return this.rows.some((row) => this.selectedIds.includes(row[this.rowKey]))
+		},
+	},
+
+	methods: {
+		/**
+		 * Get a cell value from a row using dot-notation key.
+		 * @param {object} row The row data
+		 * @param {string} key The column key (supports dot notation: 'address.city')
+		 * @return {*} The cell value
+		 */
+		getCellValue(row, key) {
+			if (key.includes('.')) {
+				return key.split('.').reduce((obj, k) => obj?.[k], row)
+			}
+			return row[key]
+		},
+
+		/**
+		 * Check if a column was generated from schema (has type info).
+		 * @param {object} col Column definition
+		 * @return {boolean}
+		 */
+		isSchemaColumn(col) {
+			return !!(this.schema && col.type)
+		},
+
+		/**
+		 * Get the schema property definition for a column key.
+		 * @param {string} key Column key
+		 * @return {object} Property definition
+		 */
+		getSchemaProperty(key) {
+			return this.schema?.properties?.[key] || {}
+		},
+
+		isSelected(row) {
+			return this.selectedIds.includes(row[this.rowKey])
+		},
+
+		/**
+		 * Handle sort column click.
+		 * @param {string} key Column key
+		 */
+		onSort(key) {
+			let order = 'asc'
+			if (this.sortKey === key) {
+				order = this.sortOrder === 'asc' ? 'desc' : 'asc'
+			}
+			/**
+			 * @event sort Emitted when a sortable column header is clicked.
+			 * @type {{ key: string, order: 'asc'|'desc' }}
+			 */
+			this.$emit('sort', { key, order })
+		},
+
+		toggleSelect(row) {
+			const id = row[this.rowKey]
+			const newIds = this.isSelected(row)
+				? this.selectedIds.filter((i) => i !== id)
+				: [...this.selectedIds, id]
+			/** @event select Emitted when row selection changes. Payload: array of selected IDs. */
+			this.$emit('select', newIds)
+		},
+
+		toggleSelectAll() {
+			if (this.allSelected) {
+				this.$emit('select', [])
+			} else {
+				this.$emit('select', this.rows.map((row) => row[this.rowKey]))
+			}
+			/** @event select-all Emitted when select-all checkbox is toggled. */
+			this.$emit('select-all', !this.allSelected)
+		},
+	},
+}
+</script>

package/src/components/CnDataTable/index.js

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

package/src/components/CnDetailViewLayout/CnDetailViewLayout.vue

@@ -0,0 +1,88 @@
+<template>
+	<div class="cn-detail-layout">
+		<!-- Header -->
+		<div class="cn-detail-layout__header">
+			<NcButton @click="$emit('back')">
+				<template #icon>
+					<ArrowLeft :size="20" />
+				</template>
+				{{ backLabel }}
+			</NcButton>
+
+			<h2 class="cn-detail-layout__title">
+				<slot name="title">{{ title }}</slot>
+			</h2>
+
+			<div class="cn-detail-layout__actions">
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<!-- Loading state -->
+		<div v-if="loading" class="cn-loading-container">
+			<NcLoadingIcon :size="32" />
+		</div>
+
+		<!-- Main content -->
+		<div v-else class="cn-detail-layout__content">
+			<slot />
+		</div>
+
+		<!-- Delete confirmation dialog -->
+		<slot name="dialogs" />
+	</div>
+</template>
+
+<script>
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+
+/**
+ * CnDetailViewLayout — Detail page layout with back button, title, actions, and content.
+ *
+ * Provides the standard structure for detail/edit views: back navigation,
+ * page title, action buttons, and a content area. Supports loading state
+ * and a dialogs slot for modals.
+ *
+ * @example
+ * <CnDetailViewLayout
+ *   title="Client: Acme Corp"
+ *   :loading="isLoading"
+ *   @back="goBack">
+ *   <template #actions>
+ *     <NcButton @click="edit">Edit</NcButton>
+ *     <NcButton type="error" @click="confirmDelete">Delete</NcButton>
+ *   </template>
+ *   <div class="cn-detail-grid">
+ *     <div class="cn-detail-item">...</div>
+ *   </div>
+ * </CnDetailViewLayout>
+ */
+export default {
+	name: 'CnDetailViewLayout',
+
+	components: {
+		NcButton,
+		NcLoadingIcon,
+		ArrowLeft,
+	},
+
+	props: {
+		/** Page title */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Whether data is loading */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Back button label */
+		backLabel: {
+			type: String,
+			default: 'Back',
+		},
+	},
+}
+</script>

package/src/components/CnDetailViewLayout/index.js

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

package/src/components/CnEmptyState/CnEmptyState.vue

@@ -0,0 +1,78 @@
+<template>
+	<NcEmptyContent :name="title" :description="description">
+		<template #icon>
+			<slot name="icon">
+				<component :is="icon" v-if="icon" :size="64" />
+			</slot>
+		</template>
+		<template v-if="actionLabel" #action>
+			<slot name="action">
+				<NcButton :type="actionType" @click="$emit('action')">
+					{{ actionLabel }}
+				</NcButton>
+			</slot>
+		</template>
+	</NcEmptyContent>
+</template>
+
+<script>
+import { NcEmptyContent, NcButton } from '@nextcloud/vue'
+
+/**
+ * CnEmptyState — Consistent empty state display wrapping NcEmptyContent.
+ *
+ * Provides a unified empty state pattern with icon, title, description,
+ * and optional action button. Used across all list views.
+ *
+ * @example
+ * <CnEmptyState
+ *   title="No clients yet"
+ *   description="Create your first client to get started"
+ *   action-label="New Client"
+ *   @action="createClient" />
+ *
+ * @example
+ * <!-- With custom icon -->
+ * <CnEmptyState title="No results">
+ *   <template #icon>
+ *     <Magnify :size="64" />
+ *   </template>
+ * </CnEmptyState>
+ */
+export default {
+	name: 'CnEmptyState',
+
+	components: {
+		NcEmptyContent,
+		NcButton,
+	},
+
+	props: {
+		/** Main title text */
+		title: {
+			type: String,
+			required: true,
+		},
+		/** Description text below the title */
+		description: {
+			type: String,
+			default: '',
+		},
+		/** Vue component for the icon (e.g., imported material design icon) */
+		icon: {
+			type: [Object, null],
+			default: null,
+		},
+		/** Action button label. If empty, no button is shown. */
+		actionLabel: {
+			type: String,
+			default: '',
+		},
+		/** NcButton type for the action button */
+		actionType: {
+			type: String,
+			default: 'primary',
+		},
+	},
+}
+</script>

package/src/components/CnEmptyState/index.js

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