@conduction/nextcloud-vue 0.1.0-beta.1

package/src/components/CnObjectCard/CnObjectCard.vue

@@ -0,0 +1,292 @@
+<template>
+	<div
+		class="cn-object-card"
+		:class="{ 'cn-object-card--selected': selected }"
+		@click="$emit('click', object)">
+		<!-- Selection checkbox -->
+		<div v-if="selectable" class="cn-object-card__checkbox" @click.stop>
+			<NcCheckboxRadioSwitch
+				:checked="selected"
+				@update:checked="$emit('select', object)" />
+		</div>
+
+		<!-- Card content -->
+		<div class="cn-object-card__content">
+			<!-- Header: image + title -->
+			<div class="cn-object-card__header">
+				<img
+					v-if="imageUrl"
+					:src="imageUrl"
+					:alt="title"
+					class="cn-object-card__image">
+
+				<div class="cn-object-card__title-area">
+					<h3 class="cn-object-card__title">{{ title }}</h3>
+					<p v-if="description" class="cn-object-card__description">
+						{{ truncatedDescription }}
+					</p>
+				</div>
+			</div>
+
+			<!-- Badges slot -->
+			<div v-if="$scopedSlots.badges" class="cn-object-card__badges">
+				<slot name="badges" :object="object" />
+			</div>
+
+			<!-- Metadata: visible properties as label:value pairs -->
+			<div v-if="metadataFields.length > 0" class="cn-object-card__metadata">
+				<slot name="metadata" :object="object" :fields="metadataFields">
+					<div
+						v-for="field in metadataFields"
+						:key="field.key"
+						class="cn-object-card__meta-item">
+						<span class="cn-object-card__meta-label">{{ field.label }}</span>
+						<CnCellRenderer
+							:value="field.value"
+							:property="field.property"
+							:truncate="60" />
+					</div>
+				</slot>
+			</div>
+		</div>
+
+		<!-- Actions slot -->
+		<div v-if="$scopedSlots.actions" class="cn-object-card__actions" @click.stop>
+			<slot name="actions" :object="object" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { CnCellRenderer } from '../CnCellRenderer/index.js'
+import { formatValue } from '../../utils/schema.js'
+
+/**
+ * CnObjectCard — Schema-configuration-driven card for object display.
+ *
+ * Uses `schema.configuration` to determine which fields map to the card title,
+ * description, and image. Remaining visible properties are shown as metadata.
+ *
+ * @example
+ * <CnObjectCard :object="publication" :schema="pubSchema">
+ *   <template #actions="{ object }">
+ *     <NcActions><NcActionButton @click="edit(object)">Edit</NcActionButton></NcActions>
+ *   </template>
+ * </CnObjectCard>
+ */
+export default {
+	name: 'CnObjectCard',
+
+	components: {
+		NcCheckboxRadioSwitch,
+		CnCellRenderer,
+	},
+
+	props: {
+		/** The object data */
+		object: {
+			type: Object,
+			required: true,
+		},
+		/** Schema definition with properties and configuration */
+		schema: {
+			type: Object,
+			required: true,
+		},
+		/** Whether this card is selected */
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether to show selection checkbox */
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+		/** Maximum number of metadata fields to show */
+		maxMetadata: {
+			type: Number,
+			default: 4,
+		},
+	},
+
+	computed: {
+		config() {
+			return this.schema?.configuration || {}
+		},
+
+		title() {
+			const field = this.config.objectNameField
+			if (field && this.object[field]) {
+				return String(this.object[field])
+			}
+			return this.object.title || this.object.name || this.object.id || '—'
+		},
+
+		description() {
+			const field = this.config.objectDescriptionField
+			if (field && this.object[field]) {
+				return String(this.object[field])
+			}
+			return null
+		},
+
+		truncatedDescription() {
+			if (!this.description) return null
+			if (this.description.length > 120) {
+				return this.description.substring(0, 120) + '...'
+			}
+			return this.description
+		},
+
+		imageUrl() {
+			const field = this.config.objectImageField
+			if (field && this.object[field]) {
+				return this.object[field]
+			}
+			return null
+		},
+
+		/** Fields excluded from metadata (already shown as title/desc/image) */
+		configFields() {
+			return [
+				this.config.objectNameField,
+				this.config.objectDescriptionField,
+				this.config.objectSummaryField,
+				this.config.objectImageField,
+			].filter(Boolean)
+		},
+
+		/** Remaining visible properties for the metadata section */
+		metadataFields() {
+			if (!this.schema?.properties) return []
+
+			return Object.entries(this.schema.properties)
+				.filter(([key, prop]) => {
+					if (this.configFields.includes(key)) return false
+					if (prop.visible === false) return false
+					if (prop.type === 'object') return false
+					if (prop.format === 'markdown') return false
+					return true
+				})
+				.sort(([, a], [, b]) => {
+					const orderA = typeof a.order === 'number' ? a.order : Infinity
+					const orderB = typeof b.order === 'number' ? b.order : Infinity
+					return orderA - orderB
+				})
+				.slice(0, this.maxMetadata)
+				.map(([key, prop]) => ({
+					key,
+					label: prop.title || key,
+					value: this.object[key],
+					property: prop,
+				}))
+		},
+	},
+
+	methods: {
+		formatValue,
+	},
+}
+</script>
+
+<style scoped>
+.cn-object-card {
+	display: flex;
+	gap: 12px;
+	padding: 16px;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 10px);
+	cursor: pointer;
+	transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.cn-object-card:hover {
+	border-color: var(--color-primary-element);
+	box-shadow: 0 2px 8px var(--color-box-shadow);
+}
+
+.cn-object-card--selected {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element-light);
+}
+
+.cn-object-card__checkbox {
+	flex-shrink: 0;
+	padding-top: 2px;
+}
+
+.cn-object-card__content {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-object-card__header {
+	display: flex;
+	gap: 12px;
+	align-items: flex-start;
+}
+
+.cn-object-card__image {
+	width: 48px;
+	height: 48px;
+	border-radius: var(--border-radius);
+	object-fit: cover;
+	flex-shrink: 0;
+}
+
+.cn-object-card__title-area {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-object-card__title {
+	margin: 0;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 1.3;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-object-card__description {
+	margin: 4px 0 0;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+	line-height: 1.4;
+}
+
+.cn-object-card__badges {
+	margin-top: 8px;
+}
+
+.cn-object-card__metadata {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	gap: 8px;
+	margin-top: 12px;
+	padding-top: 12px;
+	border-top: 1px solid var(--color-border);
+}
+
+.cn-object-card__meta-item {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.cn-object-card__meta-label {
+	font-size: 11px;
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+	text-transform: uppercase;
+	letter-spacing: 0.3px;
+}
+
+.cn-object-card__actions {
+	flex-shrink: 0;
+}
+</style>

package/src/components/CnObjectCard/index.js

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

package/src/components/CnPagination/CnPagination.vue

@@ -0,0 +1,252 @@
+<template>
+	<div v-if="totalPages > 1 || totalItems > minItemsToShow" class="cn-pagination">
+		<!-- Page info -->
+		<div class="cn-pagination__info">
+			<span class="cn-pagination__page-info">
+				{{ pageInfoText }}
+			</span>
+		</div>
+
+		<!-- Page navigation -->
+		<div v-if="totalPages > 1" class="cn-pagination__nav">
+			<NcButton
+				:disabled="currentPage === 1"
+				@click="changePage(1)">
+				{{ firstLabel }}
+			</NcButton>
+
+			<NcButton
+				:disabled="currentPage === 1"
+				@click="changePage(currentPage - 1)">
+				{{ previousLabel }}
+			</NcButton>
+
+			<div class="cn-pagination__numbers">
+				<template v-for="page in visiblePages">
+					<span v-if="page === '...'" :key="'ellipsis-' + page" class="cn-pagination__ellipsis">...</span>
+					<NcButton
+						v-else
+						:key="page"
+						:type="page === currentPage ? 'primary' : 'secondary'"
+						:disabled="page === currentPage"
+						@click="changePage(page)">
+						{{ page }}
+					</NcButton>
+				</template>
+			</div>
+
+			<NcButton
+				:disabled="currentPage === totalPages"
+				@click="changePage(currentPage + 1)">
+				{{ nextLabel }}
+			</NcButton>
+
+			<NcButton
+				:disabled="currentPage === totalPages"
+				@click="changePage(totalPages)">
+				{{ lastLabel }}
+			</NcButton>
+		</div>
+
+		<!-- Page size selector -->
+		<div class="cn-pagination__page-size">
+			<label :for="pageSizeId">{{ itemsPerPageLabel }}</label>
+			<NcSelect
+				:input-id="pageSizeId"
+				class="cn-pagination__page-size-select"
+				:value="currentPageSizeOption"
+				:options="pageSizeOptions"
+				:clearable="false"
+				:input-label="itemsPerPageLabel"
+				@option:selected="changePageSize" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcSelect } from '@nextcloud/vue'
+
+/**
+ * CnPagination — Full pagination with page numbers, navigation, and page size selector.
+ *
+ * Extracted from OpenRegister's PaginationComponent. Zero store dependencies.
+ * Supports First/Previous/Next/Last buttons, smart page number display with
+ * ellipsis, and configurable page size.
+ *
+ * NL Design tokens used:
+ * - Inherits from cn-pagination CSS class (see css/pagination.css)
+ *
+ * @example
+ * <CnPagination
+ *   :current-page="page"
+ *   :total-pages="totalPages"
+ *   :total-items="totalItems"
+ *   :current-page-size="limit"
+ *   @page-changed="onPageChange"
+ *   @page-size-changed="onPageSizeChange" />
+ */
+export default {
+	name: 'CnPagination',
+
+	components: {
+		NcButton,
+		NcSelect,
+	},
+
+	props: {
+		/** Current page number (1-based) */
+		currentPage: {
+			type: Number,
+			default: 1,
+		},
+		/** Total number of pages */
+		totalPages: {
+			type: Number,
+			default: 1,
+		},
+		/** Total number of items across all pages */
+		totalItems: {
+			type: Number,
+			default: 0,
+		},
+		/** Current items per page */
+		currentPageSize: {
+			type: Number,
+			default: 20,
+		},
+		/** Available page size options */
+		pageSizeOptions: {
+			type: Array,
+			default: () => [
+				{ value: 10, label: '10' },
+				{ value: 20, label: '20' },
+				{ value: 50, label: '50' },
+				{ value: 100, label: '100' },
+				{ value: 250, label: '250' },
+				{ value: 500, label: '500' },
+				{ value: 1000, label: '1000' },
+			],
+		},
+		/** Minimum items before pagination is shown */
+		minItemsToShow: {
+			type: Number,
+			default: 10,
+		},
+		/** Label for "First" button */
+		firstLabel: {
+			type: String,
+			default: 'First',
+		},
+		/** Label for "Previous" button */
+		previousLabel: {
+			type: String,
+			default: 'Previous',
+		},
+		/** Label for "Next" button */
+		nextLabel: {
+			type: String,
+			default: 'Next',
+		},
+		/** Label for "Last" button */
+		lastLabel: {
+			type: String,
+			default: 'Last',
+		},
+		/** Label for "Items per page:" */
+		itemsPerPageLabel: {
+			type: String,
+			default: 'Items per page:',
+		},
+		/**
+		 * Page info format string. Use {current} and {total} as placeholders.
+		 * @example "Page {current} of {total}"
+		 */
+		pageInfoFormat: {
+			type: String,
+			default: 'Page {current} of {total}',
+		},
+	},
+
+	computed: {
+		pageSizeId() {
+			return 'cn-page-size-' + this._uid
+		},
+
+		currentPageSizeOption() {
+			return this.pageSizeOptions.find(
+				(option) => option.value === this.currentPageSize,
+			) || this.pageSizeOptions[1]
+		},
+
+		pageInfoText() {
+			return this.pageInfoFormat
+				.replace('{current}', this.currentPage)
+				.replace('{total}', this.totalPages)
+		},
+
+		/**
+		 * Calculate visible page numbers with ellipsis for large page counts.
+		 * Shows up to 7 page numbers at a time.
+		 */
+		visiblePages() {
+			const current = this.currentPage
+			const total = this.totalPages
+			const pages = []
+
+			if (total <= 7) {
+				for (let i = 1; i <= total; i++) {
+					pages.push(i)
+				}
+			} else {
+				pages.push(1)
+
+				if (current <= 4) {
+					for (let i = 2; i <= 5; i++) {
+						pages.push(i)
+					}
+					pages.push('...')
+					pages.push(total)
+				} else if (current >= total - 3) {
+					pages.push('...')
+					for (let i = total - 4; i <= total; i++) {
+						pages.push(i)
+					}
+				} else {
+					pages.push('...')
+					for (let i = current - 1; i <= current + 1; i++) {
+						pages.push(i)
+					}
+					pages.push('...')
+					pages.push(total)
+				}
+			}
+
+			return pages
+		},
+	},
+
+	methods: {
+		/**
+		 * Navigate to a specific page.
+		 * @param {number} page Target page number
+		 */
+		changePage(page) {
+			if (page !== this.currentPage && page >= 1 && page <= this.totalPages) {
+				/** @event page-changed Emitted when page changes. Payload: new page number. */
+				this.$emit('page-changed', page)
+			}
+		},
+
+		/**
+		 * Change the page size.
+		 * @param {object} option Selected page size option { value, label }
+		 */
+		changePageSize(option) {
+			if (option.value !== this.currentPageSize) {
+				/** @event page-size-changed Emitted when page size changes. Payload: new page size. */
+				this.$emit('page-size-changed', option.value)
+			}
+		},
+	},
+}
+</script>

package/src/components/CnPagination/index.js

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

package/src/components/CnRowActions/CnRowActions.vue

@@ -0,0 +1,73 @@
+<template>
+	<NcActions :force-menu="actions.length > 3">
+		<NcActionButton
+			v-for="action in actions"
+			:key="action.label"
+			:disabled="action.disabled"
+			:class="{ 'cn-row-action--destructive': action.destructive }"
+			@click="onAction(action)">
+			<template v-if="action.icon" #icon>
+				<component :is="action.icon" :size="20" />
+			</template>
+			{{ action.label }}
+		</NcActionButton>
+	</NcActions>
+</template>
+
+<script>
+import { NcActions, NcActionButton } from '@nextcloud/vue'
+
+/**
+ * CnRowActions — Action menu wrapper for table rows and cards.
+ *
+ * Wraps NcActions + NcActionButton for consistent row/card action menus.
+ * Actions are defined as an array of objects with label, icon, handler, etc.
+ *
+ * @example
+ * <CnRowActions
+ *   :actions="[
+ *     { label: 'Edit', icon: PencilIcon, handler: (row) => editRow(row) },
+ *     { label: 'Delete', icon: TrashIcon, handler: (row) => deleteRow(row), destructive: true },
+ *   ]"
+ *   :row="row" />
+ */
+export default {
+	name: 'CnRowActions',
+
+	components: {
+		NcActions,
+		NcActionButton,
+	},
+
+	props: {
+		/**
+		 * Action definitions.
+		 * @type {Array<{label: string, icon?: Component, handler: Function, disabled?: boolean, destructive?: boolean}>}
+		 */
+		actions: {
+			type: Array,
+			default: () => [],
+		},
+		/** The row/object data (passed to action handlers) */
+		row: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	methods: {
+		onAction(action) {
+			if (action.handler && typeof action.handler === 'function') {
+				action.handler(this.row)
+			}
+			this.$emit('action', { action: action.label, row: this.row })
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-row-action--destructive {
+	color: var(--color-error) !important;
+}
+</style>

package/src/components/CnRowActions/index.js

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

package/src/components/CnSettingsCard/CnSettingsCard.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="cn-settings-card" :class="{ 'cn-settings-card--collapsible': collapsible }">
+		<h4
+			v-if="title"
+			:class="{ 'cn-settings-card__header--clickable': collapsible }"
+			@click="collapsible ? toggleCollapsed() : null">
+			<span>{{ icon }} {{ title }}</span>
+			<ChevronDown
+				v-if="collapsible && !isCollapsed"
+				:size="20"
+				class="cn-settings-card__chevron" />
+			<ChevronUp
+				v-if="collapsible && isCollapsed"
+				:size="20"
+				class="cn-settings-card__chevron" />
+		</h4>
+
+		<transition v-if="collapsible" name="cn-slide-fade">
+			<div v-show="!isCollapsed" class="cn-settings-card__content">
+				<slot />
+			</div>
+		</transition>
+
+		<div v-else>
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+
+/**
+ * CnSettingsCard — Collapsible card for settings and configuration sections.
+ *
+ * Extracted from OpenRegister's SettingsCard. Provides a titled card with
+ * optional collapse/expand animation.
+ *
+ * @example
+ * <CnSettingsCard title="Database Settings" icon="🗄️" collapsible>
+ *   <p>Content here</p>
+ * </CnSettingsCard>
+ */
+export default {
+	name: 'CnSettingsCard',
+
+	components: {
+		ChevronDown,
+		ChevronUp,
+	},
+
+	props: {
+		/** Card title text */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Icon emoji or text displayed before the title */
+		icon: {
+			type: String,
+			default: '',
+		},
+		/** Whether the card can be collapsed */
+		collapsible: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether the card starts collapsed (only applies when collapsible) */
+		defaultCollapsed: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			isCollapsed: this.defaultCollapsed,
+		}
+	},
+
+	methods: {
+		toggleCollapsed() {
+			if (this.collapsible) {
+				this.isCollapsed = !this.isCollapsed
+				/** @event toggle Emitted when collapse state changes. Payload: isCollapsed boolean. */
+				this.$emit('toggle', this.isCollapsed)
+			}
+		},
+	},
+}
+</script>