@conduction/nextcloud-vue 0.1.0-beta.1

package/package.json

@@ -0,0 +1,63 @@
+{
+	"name": "@conduction/nextcloud-vue",
+	"version": "0.1.0-beta.1",
+	"description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
+	"license": "EUPL-1.2",
+	"author": "Conduction B.V. <info@conduction.nl>",
+	"main": "dist/nextcloud-vue.cjs.js",
+	"module": "dist/nextcloud-vue.esm.js",
+	"style": "dist/nextcloud-vue.css",
+	"types": "src/types/index.d.ts",
+	"files": [
+		"dist/",
+		"src/"
+	],
+	"sideEffects": [
+		"*.css"
+	],
+	"scripts": {
+		"build": "rollup -c",
+		"dev": "rollup -c -w",
+		"test": "jest",
+		"lint": "eslint src/",
+		"stylelint": "stylelint 'src/**/*.vue' 'src/**/*.css'",
+		"prepare": "npm run build",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"@nextcloud/l10n": "^2.0.0 || ^3.0.0",
+		"@nextcloud/vue": "^8.0.0",
+		"pinia": "^2.0.0",
+		"vue": "^2.7.0",
+		"vue-material-design-icons": "^5.0.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.29.0",
+		"@babel/preset-env": "^7.29.0",
+		"@eslint/config-helpers": "^0.4.2",
+		"@eslint/eslintrc": "^3.3.4",
+		"@eslint/js": "^9.39.3",
+		"@nextcloud/browserslist-config": "^3.1.2",
+		"@nextcloud/eslint-config": "^8.4.2",
+		"@nextcloud/vue": "^8.12.0",
+		"@rollup/plugin-commonjs": "^25.0.0",
+		"@rollup/plugin-node-resolve": "^15.0.0",
+		"@vue/test-utils": "^1.3.6",
+		"@vue/vue2-jest": "^29.2.6",
+		"babel-jest": "^29.7.0",
+		"eslint": "^8.56.0",
+		"eslint-import-resolver-alias": "^1.1.2",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"jest-transform-stub": "^2.0.0",
+		"pinia": "^2.1.7",
+		"rollup": "^3.29.0",
+		"rollup-plugin-postcss": "^4.0.0",
+		"rollup-plugin-vue": "^5.1.9",
+		"stylelint": "^14.16.1",
+		"stylelint-config-recommended": "^9.0.0",
+		"stylelint-config-recommended-vue": "^1.5.0",
+		"vue": "^2.7.16",
+		"vue-material-design-icons": "^5.2.0"
+	}
+}

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -0,0 +1,152 @@
+<template>
+	<div class="cn-card-grid">
+		<!-- Loading state -->
+		<div v-if="loading" class="cn-card-grid__loading">
+			<NcLoadingIcon :size="32" />
+		</div>
+
+		<!-- Empty state -->
+		<div v-else-if="objects.length === 0" class="cn-card-grid__empty">
+			<slot name="empty">
+				<NcEmptyContent :name="emptyText">
+					<template #icon>
+						<ViewGrid :size="64" />
+					</template>
+				</NcEmptyContent>
+			</slot>
+		</div>
+
+		<!-- Card grid -->
+		<div v-else class="cn-card-grid__grid">
+			<slot
+				v-for="object in objects"
+				name="card"
+				:object="object"
+				:selected="isSelected(object)"
+				:schema="schema">
+				<CnObjectCard
+					:key="object[rowKey]"
+					:object="object"
+					:schema="schema"
+					:selectable="selectable"
+					:selected="isSelected(object)"
+					@click="$emit('click', object)"
+					@select="toggleSelect(object)">
+					<template v-if="$scopedSlots['card-actions']" #actions="{ object: obj }">
+						<slot name="card-actions" :object="obj" />
+					</template>
+					<template v-if="$scopedSlots['card-badges']" #badges="{ object: obj }">
+						<slot name="card-badges" :object="obj" />
+					</template>
+				</CnObjectCard>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon, NcEmptyContent } from '@nextcloud/vue'
+import ViewGrid from 'vue-material-design-icons/ViewGrid.vue'
+import { CnObjectCard } from '../CnObjectCard/index.js'
+
+/**
+ * CnCardGrid — Responsive grid container for CnObjectCard instances.
+ *
+ * Displays objects in a responsive CSS grid layout using schema-driven cards.
+ * Supports selection, loading/empty states, and custom card rendering via slots.
+ *
+ * @example
+ * <CnCardGrid
+ *   :objects="publications"
+ *   :schema="pubSchema"
+ *   :selectable="true"
+ *   :selected-ids="selectedIds"
+ *   @click="openPublication"
+ *   @select="onSelect">
+ *   <template #card-actions="{ object }">
+ *     <NcActions><NcActionButton>Edit</NcActionButton></NcActions>
+ *   </template>
+ * </CnCardGrid>
+ */
+export default {
+	name: 'CnCardGrid',
+
+	components: {
+		NcLoadingIcon,
+		NcEmptyContent,
+		ViewGrid,
+		CnObjectCard,
+	},
+
+	props: {
+		/** Array of objects to display as cards */
+		objects: {
+			type: Array,
+			default: () => [],
+		},
+		/** Schema definition (passed through to CnObjectCard) */
+		schema: {
+			type: Object,
+			required: true,
+		},
+		/** Whether data is loading */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether cards can be selected */
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+		/** Array of currently selected object IDs */
+		selectedIds: {
+			type: Array,
+			default: () => [],
+		},
+		/** Property name used as unique identifier */
+		rowKey: {
+			type: String,
+			default: 'id',
+		},
+		/** Text shown when there are no objects */
+		emptyText: {
+			type: String,
+			default: 'No items found',
+		},
+	},
+
+	methods: {
+		isSelected(object) {
+			return this.selectedIds.includes(object[this.rowKey])
+		},
+
+		toggleSelect(object) {
+			const id = object[this.rowKey]
+			const newIds = this.isSelected(object)
+				? this.selectedIds.filter((i) => i !== id)
+				: [...this.selectedIds, id]
+			this.$emit('select', newIds)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-card-grid__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+	gap: 16px;
+}
+
+.cn-card-grid__loading {
+	display: flex;
+	justify-content: center;
+	padding: 40px;
+}
+
+.cn-card-grid__empty {
+	padding: 40px 20px;
+	text-align: center;
+}
+</style>

package/src/components/CnCardGrid/index.js

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

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -0,0 +1,132 @@
+<template>
+	<span class="cn-cell-renderer" :class="cellClass">
+		<!-- Boolean: icon -->
+		<template v-if="propertyType === 'boolean'">
+			<CheckBold v-if="value" :size="16" class="cn-cell-renderer__icon cn-cell-renderer__icon--success" />
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
+		<!-- Enum: status badge -->
+		<template v-else-if="isEnum">
+			<CnStatusBadge v-if="value" :label="String(value)" />
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
+		<!-- Array: comma-joined or count -->
+		<template v-else-if="propertyType === 'array'">
+			<span v-if="!value || !value.length" class="cn-cell-renderer__dash">—</span>
+			<span v-else :title="Array.isArray(value) ? value.join(', ') : ''">
+				{{ formattedValue }}
+			</span>
+		</template>
+
+		<!-- Default: formatted text -->
+		<template v-else>
+			<span :title="rawTitle">{{ formattedValue }}</span>
+		</template>
+	</span>
+</template>
+
+<script>
+import { formatValue } from '../../utils/schema.js'
+import { CnStatusBadge } from '../CnStatusBadge/index.js'
+import CheckBold from 'vue-material-design-icons/CheckBold.vue'
+
+/**
+ * CnCellRenderer — Type-aware cell renderer for schema-driven tables.
+ *
+ * Renders a single cell value based on its schema property definition.
+ * Booleans render as icons, enums as status badges, dates as formatted strings,
+ * and everything else as truncated text via `formatValue()`.
+ *
+ * @example
+ * <CnCellRenderer :value="row.status" :property="schema.properties.status" />
+ */
+export default {
+	name: 'CnCellRenderer',
+
+	components: {
+		CnStatusBadge,
+		CheckBold,
+	},
+
+	props: {
+		/** The raw cell value */
+		value: {
+			type: [String, Number, Boolean, Array, Object],
+			default: null,
+		},
+		/** Schema property definition: { type, format, enum, items, title } */
+		property: {
+			type: Object,
+			default: () => ({}),
+		},
+		/** Maximum string length before truncation */
+		truncate: {
+			type: Number,
+			default: 100,
+		},
+	},
+
+	computed: {
+		propertyType() {
+			return this.property?.type || (typeof this.value)
+		},
+
+		isEnum() {
+			return !!(this.property?.enum && this.property.enum.length > 0)
+		},
+
+		formattedValue() {
+			return formatValue(this.value, this.property, { truncate: this.truncate })
+		},
+
+		rawTitle() {
+			// Show full value on hover if it was truncated
+			const raw = this.value
+			if (typeof raw === 'string' && raw.length > this.truncate) {
+				return raw
+			}
+			return undefined
+		},
+
+		cellClass() {
+			const classes = []
+			if (this.propertyType === 'boolean') classes.push('cn-cell-renderer--boolean')
+			if (this.isEnum) classes.push('cn-cell-renderer--enum')
+			if (this.property?.format === 'date-time' || this.property?.format === 'date') {
+				classes.push('cn-cell-renderer--date')
+			}
+			if (this.property?.format === 'uuid') classes.push('cn-cell-renderer--uuid')
+			if (this.propertyType === 'integer' || this.propertyType === 'number') {
+				classes.push('cn-cell-renderer--number')
+			}
+			return classes
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-cell-renderer--uuid {
+	font-family: monospace;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-cell-renderer--number {
+	font-variant-numeric: tabular-nums;
+}
+
+.cn-cell-renderer--date {
+	white-space: nowrap;
+}
+
+.cn-cell-renderer__dash {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-cell-renderer__icon--success {
+	color: var(--color-success);
+}
+</style>

package/src/components/CnCellRenderer/index.js

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

package/src/components/CnConfigurationCard/CnConfigurationCard.vue

@@ -0,0 +1,77 @@
+<template>
+	<div class="cn-card">
+		<div class="cn-card-header">
+			<h3>
+				<slot name="icon" />
+				{{ title }}
+			</h3>
+			<div class="cn-card-header__actions">
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<!-- Status badges -->
+		<div v-if="$slots.status" class="cn-config-card__status">
+			<slot name="status" />
+		</div>
+
+		<!-- Main content -->
+		<div class="cn-config-card__content">
+			<slot />
+		</div>
+
+		<!-- Footer -->
+		<div v-if="$slots.footer" class="cn-config-card__footer">
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnConfigurationCard — Configuration card with title, actions, status, and content.
+ *
+ * Decoupled from OpenRegister's ConfigurationCard. All data is provided via
+ * props and slots — no store dependencies. Consumer wraps this and handles
+ * navigation/store logic.
+ *
+ * @example
+ * <CnConfigurationCard title="Database Configuration">
+ *   <template #actions>
+ *     <NcActions><NcActionButton @click="edit">Edit</NcActionButton></NcActions>
+ *   </template>
+ *   <template #status>
+ *     <CnStatusBadge label="Connected" variant="success" />
+ *   </template>
+ *   <p>PostgreSQL 15.2 on localhost:5432</p>
+ * </CnConfigurationCard>
+ */
+export default {
+	name: 'CnConfigurationCard',
+
+	props: {
+		/** Card title */
+		title: {
+			type: String,
+			default: '',
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-config-card__status {
+	display: flex;
+	gap: 8px;
+	margin-bottom: 12px;
+}
+
+.cn-config-card__content {
+	margin-bottom: 8px;
+}
+
+.cn-config-card__footer {
+	padding-top: 12px;
+	border-top: 1px solid var(--color-border);
+}
+</style>

package/src/components/CnConfigurationCard/index.js

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