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

package/src/components/CnIcon/CnIcon.vue

@@ -28,7 +28,7 @@ const _registry = {
  * Each key must be the PascalCase icon name matching the
  * vue-material-design-icons file name (e.g. "Sword" for Sword.vue).
  *
- * @param {Record<string, import('vue').Component>} icons
+ * @param {Record<string, import('vue').Component>} icons - Map of PascalCase icon names to Vue components
  *
  * @example
  * import { registerIcons } from '@conduction/nextcloud-vue'

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -28,6 +28,7 @@
 			:view-mode="currentViewMode"
 			:show-view-toggle="showViewToggle"
 			:refreshing="refreshing"
+			:show-add="showAdd"
 			@add="onAddClick"
 			@refresh="$emit('refresh')"
 			@show-import="showImportDialog = true"
@@ -52,6 +53,7 @@
 			ref="massDeleteDialog"
 			:items="selectedObjects"
 			:name-field="massActionNameField"
+			:name-formatter="nameFormatter"
 			@confirm="onMassDeleteConfirm"
 			@close="showMassDeleteDialog = false" />
 
@@ -61,6 +63,7 @@
 			ref="massCopyDialog"
 			:items="selectedObjects"
 			:name-field="massActionNameField"
+			:name-formatter="nameFormatter"
 			@confirm="onMassCopyConfirm"
 			@close="showMassCopyDialog = false" />
 
@@ -94,6 +97,7 @@
 				ref="singleDeleteDialog"
 				:item="actionTargetItem"
 				:name-field="massActionNameField"
+				:name-formatter="nameFormatter"
 				@confirm="onSingleDeleteConfirm"
 				@close="closeSingleDelete" />
 		</slot>
@@ -108,6 +112,7 @@
 				ref="singleCopyDialog"
 				:item="actionTargetItem"
 				:name-field="massActionNameField"
+				:name-formatter="nameFormatter"
 				@confirm="onSingleCopyConfirm"
 				@close="closeSingleCopy" />
 		</slot>
@@ -500,6 +505,11 @@ export default {
 			type: String,
 			default: 'title',
 		},
+		/** Optional function to format item names in dialogs. Receives the item, returns a string. Overrides massActionNameField when provided. */
+		nameFormatter: {
+			type: Function,
+			default: null,
+		},
 		/** Available export formats for the export dialog */
 		exportFormats: {
 			type: Array,
@@ -563,6 +573,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/** Whether to show the Add button in the actions bar */
+		showAdd: {
+			type: Boolean,
+			default: true,
+		},
 		/**
 		 * Store instance for automatic save integration. When provided alongside
 		 * objectType, the form dialog saves directly to the store instead of
@@ -751,28 +766,40 @@ export default {
 			this.$emit('mass-import', payload)
 		},
 
-		/** @public Forward result to mass delete dialog */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setMassDeleteResult(resultData) {
 			if (this.$refs.massDeleteDialog) {
 				this.$refs.massDeleteDialog.setResult(resultData)
 			}
 		},
 
-		/** @public Forward result to mass copy dialog */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setMassCopyResult(resultData) {
 			if (this.$refs.massCopyDialog) {
 				this.$refs.massCopyDialog.setResult(resultData)
 			}
 		},
 
-		/** @public Forward result to export dialog */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setExportResult(resultData) {
 			if (this.$refs.exportDialog) {
 				this.$refs.exportDialog.setResult(resultData)
 			}
 		},
 
-		/** @public Forward result to import dialog */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setImportResult(resultData) {
 			if (this.$refs.importDialog) {
 				this.$refs.importDialog.setResult(resultData)
@@ -780,11 +807,17 @@ export default {
 		},
 
 		// --- Backward-compatible aliases ---
-		/** @public @deprecated Use setMassDeleteResult instead */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setDeleteResult(resultData) {
 			this.setMassDeleteResult(resultData)
 		},
-		/** @public @deprecated Use setMassCopyResult instead */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setCopyResult(resultData) {
 			this.setMassCopyResult(resultData)
 		},
@@ -837,21 +870,30 @@ export default {
 			this.editItem = null
 		},
 
-		/** @public Forward result to single delete dialog */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setSingleDeleteResult(resultData) {
 			if (this.$refs.singleDeleteDialog) {
 				this.$refs.singleDeleteDialog.setResult(resultData)
 			}
 		},
 
-		/** @public Forward result to single copy dialog */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setSingleCopyResult(resultData) {
 			if (this.$refs.singleCopyDialog) {
 				this.$refs.singleCopyDialog.setResult(resultData)
 			}
 		},
 
-		/** @public Forward result to form dialog */
+		/**
+		 * @param {*} resultData Result data to pass to the dialog
+		 * @public
+		 */
 		setFormResult(resultData) {
 			if (this.$refs.formDialog) {
 				this.$refs.formDialog.setResult(resultData)

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -414,24 +414,36 @@ export default {
 	},
 
 	methods: {
-		/** Handle tab change from NcAppSidebar */
+		/**
+		 * Handle tab change from NcAppSidebar
+		 * @param {string} tabId Tab identifier
+		 */
 		onTabChange(tabId) {
 			this.internalActiveTab = tabId
 			this.$emit('tab-change', tabId)
 		},
 
-		/** Check if a column is currently visible */
+		/**
+		 * Check if a column is currently visible
+		 * @param {string} key Column key
+		 */
 		isColumnVisible(key) {
 			if (this.visibleColumns === null) return true
 			return this.visibleColumns.includes(key)
 		},
 
-		/** Check if all columns in a group are visible */
+		/**
+		 * Check if all columns in a group are visible
+		 * @param {string[]} columns Array of column keys
+		 */
 		isGroupAllVisible(columns) {
 			return columns.every((col) => this.isColumnVisible(col.key))
 		},
 
-		/** Toggle a single column's visibility */
+		/**
+		 * Toggle a single column's visibility
+		 * @param {string} key Column key
+		 */
 		toggleColumn(key) {
 			let newVisible
 			if (this.visibleColumns === null) {
@@ -444,7 +456,10 @@ export default {
 			this.$emit('columns-change', newVisible)
 		},
 
-		/** Select or deselect all columns in a group */
+		/**
+		 * Select or deselect all columns in a group
+		 * @param {string[]} columns Array of column keys
+		 */
 		toggleGroupAll(columns) {
 			const groupKeys = columns.map((c) => c.key)
 			const allVisible = this.isGroupAllVisible(columns)
@@ -465,12 +480,18 @@ export default {
 			this.$emit('columns-change', newVisible)
 		},
 
-		/** Toggle a group's expanded state */
+		/**
+		 * Toggle a group's expanded state
+		 * @param {string} groupId Filter group identifier
+		 */
 		toggleGroup(groupId) {
 			this.$set(this.expandedGroups, groupId, !this.expandedGroups[groupId])
 		},
 
-		/** Get filter options for a filter definition */
+		/**
+		 * Get filter options for a filter definition
+		 * @param {object} filter Filter object
+		 */
 		getFilterOptions(filter) {
 			const facet = this.facetData[filter.key]
 			if (facet?.values?.length > 0) {
@@ -482,7 +503,10 @@ export default {
 			return filter.options || []
 		},
 
-		/** Get currently selected options for a filter */
+		/**
+		 * Get currently selected options for a filter
+		 * @param {object} filter Filter object
+		 */
 		getSelectedFilterOptions(filter) {
 			const value = this.activeFilters[filter.key]
 			if (!value) return []
@@ -491,7 +515,11 @@ export default {
 			return values.map((v) => options.find((o) => o.id === v) || { id: v, label: String(v) })
 		},
 
-		/** Handle filter select change */
+		/**
+		 * Handle filter select change
+		 * @param {string} key Filter key
+		 * @param {Array} selected Selected values
+		 */
 		onFilterChange(key, selected) {
 			const values = selected ? selected.map((o) => o.id) : []
 			this.$emit('filter-change', { key, values })

package/src/components/CnInfoWidget/CnInfoWidget.vue

@@ -0,0 +1,219 @@
+<!--
+  CnInfoWidget — Renders label-value pairs in a responsive CSS grid.
+
+  Supports two modes:
+  1. Manual: provide `fields` prop with `[{ label, value }]` objects
+  2. Auto-generated: provide `object` + `schema` props to generate from JSON Schema properties
+
+  Used in dashboard and detail page grid layouts to display entity metadata.
+-->
+<template>
+	<div
+		class="cn-info-widget"
+		:style="gridStyle">
+		<div
+			v-for="(field, index) in displayFields"
+			:key="index"
+			class="cn-info-widget__field">
+			<dt class="cn-info-widget__label">
+				{{ field.label }}
+			</dt>
+			<dd class="cn-info-widget__value">
+				{{ field.value || '—' }}
+			</dd>
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnInfoWidget — Renders label-value pairs in a responsive CSS grid.
+ *
+ * @example Manual fields
+ * <CnInfoWidget :fields="[
+ *   { label: 'Email', value: 'test@example.com' },
+ *   { label: 'Phone', value: '+31 6 12345678' },
+ * ]" :columns="2" />
+ *
+ * @example Auto-generated from schema
+ * <CnInfoWidget :object="myObject" :schema="mySchema" :columns="3" />
+ */
+export default {
+	name: 'CnInfoWidget',
+
+	props: {
+		/**
+		 * Manual field definitions. Array of `{ label, value }` objects.
+		 * Takes precedence over object+schema auto-generation.
+		 *
+		 * @type {{ label: string, value: string|number }[]}
+		 */
+		fields: {
+			type: Array,
+			default: null,
+		},
+		/**
+		 * Object data for auto-generation mode. Properties are extracted
+		 * based on the schema definition.
+		 *
+		 * @type {object}
+		 */
+		object: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * JSON Schema for auto-generation mode. Each schema property
+		 * generates a label:value pair using the property title as label.
+		 *
+		 * @type {object}
+		 */
+		schema: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * Number of columns for the grid layout.
+		 *
+		 * @type {number}
+		 */
+		columns: {
+			type: Number,
+			default: 2,
+		},
+		/**
+		 * Fields to include (by key). If provided, only these fields are shown.
+		 * Only applies in auto-generation mode.
+		 *
+		 * @type {string[]}
+		 */
+		includeFields: {
+			type: Array,
+			default: null,
+		},
+		/**
+		 * Fields to exclude (by key). Only applies in auto-generation mode.
+		 *
+		 * @type {string[]}
+		 */
+		excludeFields: {
+			type: Array,
+			default: () => [],
+		},
+	},
+
+	computed: {
+		/**
+		 * Resolved fields to display. Manual fields take precedence;
+		 * otherwise generates from object + schema.
+		 *
+		 * @return {{ label: string, value: string|number }[]}
+		 */
+		displayFields() {
+			if (this.fields) {
+				return this.fields
+			}
+
+			if (this.object && this.schema && this.schema.properties) {
+				return this.generateFieldsFromSchema()
+			}
+
+			return []
+		},
+
+		/**
+		 * CSS grid style based on column count.
+		 *
+		 * @return {object}
+		 */
+		gridStyle() {
+			return {
+				gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
+			}
+		},
+	},
+
+	methods: {
+		/**
+		 * Generate label-value field definitions from object + schema.
+		 *
+		 * @return {{ label: string, value: string|number }[]}
+		 */
+		generateFieldsFromSchema() {
+			const properties = this.schema.properties || {}
+			const keys = this.includeFields || Object.keys(properties)
+
+			return keys
+				.filter(key => !this.excludeFields.includes(key))
+				.filter(key => properties[key])
+				.map(key => ({
+					label: properties[key].title || key,
+					value: this.formatFieldValue(this.object[key], properties[key]),
+				}))
+		},
+
+		/**
+		 * Format a field value for display based on its schema type.
+		 *
+		 * @param {*} value - The raw value.
+		 * @param {object} schemaProp - The JSON Schema property definition.
+		 * @return {string} Formatted display value.
+		 */
+		formatFieldValue(value) {
+			if (value === null || value === undefined) {
+				return ''
+			}
+
+			if (Array.isArray(value)) {
+				return value.join(', ')
+			}
+
+			if (typeof value === 'object') {
+				return JSON.stringify(value)
+			}
+
+			if (typeof value === 'boolean') {
+				return value ? 'Yes' : 'No'
+			}
+
+			return String(value)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-info-widget {
+	display: grid;
+	gap: 12px 24px;
+}
+
+.cn-info-widget__field {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.cn-info-widget__label {
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin: 0;
+}
+
+.cn-info-widget__value {
+	font-size: 14px;
+	color: var(--color-main-text);
+	margin: 0;
+	word-break: break-word;
+}
+
+/* Responsive: single column on small screens */
+@media (max-width: 600px) {
+	.cn-info-widget {
+		grid-template-columns: 1fr !important;
+	}
+}
+</style>

package/src/components/CnInfoWidget/index.js

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