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

package/src/components/CnStatusBadge/CnStatusBadge.vue

@@ -2,7 +2,10 @@
 	<span
 		class="cn-status-badge"
 		:class="badgeClasses">
-		<slot>{{ label }}</slot>
+		<slot>
+			<slot name="icon" />
+			{{ label }}
+		</slot>
 	</span>
 </template>
 
@@ -46,6 +49,14 @@ export default {
 			default: 'medium',
 			validator: (v) => ['small', 'medium'].includes(v),
 		},
+		/**
+		 * Use solid background with white text instead of light background with colored text.
+		 * Useful when the badge is placed on a colored background (e.g., an active card).
+		 */
+		solid: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Map of label values to variants. When provided, the variant is resolved
 		 * from this map using the label (case-insensitive). Falls back to the variant prop.
@@ -61,7 +72,8 @@ export default {
 		resolvedVariant() {
 			if (this.colorMap && this.label) {
 				const key = this.label.toLowerCase()
-				return this.colorMap[key] || this.variant
+				const normalizedColorMap = Object.fromEntries(Object.entries(this.colorMap).map(([k, v]) => [k.toLowerCase(), v]))
+				return normalizedColorMap[key] || this.variant
 			}
 			return this.variant
 		},
@@ -70,6 +82,7 @@ export default {
 			return {
 				['cn-status-badge--' + this.resolvedVariant]: true,
 				'cn-status-badge--small': this.size === 'small',
+				'cn-status-badge--solid': this.solid,
 			}
 		},
 	},

package/src/components/CnTabbedFormDialog/CnTabbedFormDialog.vue

@@ -48,6 +48,9 @@
 					</BTab>
 				</BTabs>
 			</div>
+
+			<!-- Optional content below tabs (e.g. shared settings across all tabs) -->
+			<slot name="below-tabs" :loading="loading" />
 		</div>
 
 		<template #actions>
@@ -88,6 +91,7 @@
 				@click="executeConfirm">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
+					<slot v-else-if="$slots['confirm-icon']" name="confirm-icon" />
 					<Plus v-else-if="isCreateMode" :size="20" />
 					<ContentSaveOutline v-else :size="20" />
 				</template>
@@ -328,7 +332,7 @@ export default {
 		 * the success message shows inline for 2 seconds, then clears and
 		 * emits the `reset` event.
 		 *
-		 * @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/CnTableWidget/CnTableWidget.vue

@@ -0,0 +1,332 @@
+<!--
+  CnTableWidget — Data table widget with card wrapper and dual data sourcing.
+
+  Wraps CnDataTable in a card container with a title header, optional "View all"
+  footer link, and loading/empty states. Supports two data modes:
+  1. External: `rows` prop provided (no API calls)
+  2. Self-fetch: `register` + `schemaId` provided (fetches from OpenRegister API)
+
+  Used in dashboard and detail page grid layouts for displaying related data tables.
+-->
+<template>
+	<div class="cn-table-widget">
+		<!-- Header -->
+		<div v-if="title" class="cn-table-widget__header">
+			<h3 class="cn-table-widget__title">
+				{{ title }}
+			</h3>
+			<span v-if="totalCount > 0" class="cn-table-widget__count">
+				{{ totalCount }}
+			</span>
+		</div>
+
+		<!-- Loading state -->
+		<NcLoadingIcon v-if="isLoading" class="cn-table-widget__loading" :size="32" />
+
+		<!-- Empty state -->
+		<p v-else-if="displayRows.length === 0" class="cn-table-widget__empty">
+			{{ emptyText }}
+		</p>
+
+		<!-- Data table -->
+		<CnDataTable
+			v-else
+			:rows="displayRows"
+			:columns="columns"
+			:loading="false"
+			:selectable="false"
+			@row-click="onRowClick" />
+
+		<!-- Footer with view all link -->
+		<div
+			v-if="viewAllRoute && totalCount > limitedCount"
+			class="cn-table-widget__footer">
+			<a
+				class="cn-table-widget__view-all"
+				@click.prevent="$router.push(viewAllRoute)">
+				{{ viewAllLabel }}
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+import CnDataTable from '../CnDataTable/CnDataTable.vue'
+
+/**
+ * CnTableWidget — Data table widget with card wrapper and dual data sourcing.
+ *
+ * @example External data mode
+ * <CnTableWidget
+ *   title="Related Skills"
+ *   :rows="skillRows"
+ *   :columns="skillColumns"
+ *   :view-all-route="{ name: 'Skills' }" />
+ *
+ * @example Self-fetch mode
+ * <CnTableWidget
+ *   title="Documents"
+ *   register="9"
+ *   schema-id="42"
+ *   :limit="5" />
+ */
+export default {
+	name: 'CnTableWidget',
+
+	components: {
+		NcLoadingIcon,
+		CnDataTable,
+	},
+
+	props: {
+		/** Widget title shown in the header. */
+		title: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * External row data. When provided, no API calls are made.
+		 *
+		 * @type {object[]}
+		 */
+		rows: {
+			type: Array,
+			default: null,
+		},
+		/**
+		 * Column definitions for CnDataTable.
+		 *
+		 * @type {{ key: string, label: string, sortable?: boolean }[]}
+		 */
+		columns: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * OpenRegister register ID for self-fetch mode.
+		 *
+		 * @type {string|number}
+		 */
+		register: {
+			type: [String, Number],
+			default: null,
+		},
+		/**
+		 * OpenRegister schema ID for self-fetch mode.
+		 *
+		 * @type {string|number}
+		 */
+		schemaId: {
+			type: [String, Number],
+			default: null,
+		},
+		/**
+		 * Maximum number of rows to display. When total exceeds this,
+		 * a "View all" link appears.
+		 *
+		 * @type {number}
+		 */
+		limit: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * Vue Router route for the "View all" link.
+		 *
+		 * @type {object}
+		 */
+		viewAllRoute: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * Function that returns a route object for row click navigation.
+		 * Receives the row data as argument.
+		 *
+		 * @type {Function}
+		 */
+		rowClickRoute: {
+			type: Function,
+			default: null,
+		},
+		/** Pre-translated "View all" label. */
+		viewAllLabel: {
+			type: String,
+			default: 'View all',
+		},
+		/** Pre-translated empty state text. */
+		emptyText: {
+			type: String,
+			default: 'No data available',
+		},
+	},
+
+	data() {
+		return {
+			fetchedRows: [],
+			loading: false,
+		}
+	},
+
+	computed: {
+		/**
+		 * Whether data is currently loading.
+		 *
+		 * @return {boolean}
+		 */
+		isLoading() {
+			return this.loading
+		},
+
+		/**
+		 * All rows (external or fetched).
+		 *
+		 * @return {object[]}
+		 */
+		allRows() {
+			return this.rows || this.fetchedRows
+		},
+
+		/**
+		 * Rows limited to the configured limit.
+		 *
+		 * @return {object[]}
+		 */
+		displayRows() {
+			if (this.limit > 0) {
+				return this.allRows.slice(0, this.limit)
+			}
+			return this.allRows
+		},
+
+		/**
+		 * Total count of all rows (before limiting).
+		 *
+		 * @return {number}
+		 */
+		totalCount() {
+			return this.allRows.length
+		},
+
+		/**
+		 * Count of displayed rows (after limiting).
+		 *
+		 * @return {number}
+		 */
+		limitedCount() {
+			return this.displayRows.length
+		},
+	},
+
+	mounted() {
+		if (this.rows === null && this.register && this.schemaId) {
+			this.fetchData()
+		}
+	},
+
+	methods: {
+		/**
+		 * Fetch data from the OpenRegister API.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async fetchData() {
+			this.loading = true
+			try {
+				const url = `/index.php/apps/openregister/api/objects/${this.register}/${this.schemaId}`
+				const response = await fetch(url, {
+					headers: {
+						'Content-Type': 'application/json',
+						'OCS-APIREQUEST': 'true',
+					},
+				})
+				if (response.ok) {
+					const data = await response.json()
+					this.fetchedRows = data.results || data || []
+				}
+			} catch (error) {
+				console.error('CnTableWidget: Failed to fetch data', error)
+			} finally {
+				this.loading = false
+			}
+		},
+
+		/**
+		 * Handle row click events. Navigates if rowClickRoute is configured.
+		 *
+		 * @param {object} row - The clicked row data.
+		 */
+		onRowClick(row) {
+			if (this.rowClickRoute) {
+				const route = this.rowClickRoute(row)
+				if (route) {
+					this.$router.push(route)
+				}
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-table-widget {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 16px);
+	overflow: hidden;
+}
+
+.cn-table-widget__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-table-widget__title {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-table-widget__count {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-dark);
+	padding: 2px 8px;
+	border-radius: 10px;
+}
+
+.cn-table-widget__loading {
+	padding: 32px 0;
+	display: flex;
+	justify-content: center;
+}
+
+.cn-table-widget__empty {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	margin: 0;
+}
+
+.cn-table-widget__footer {
+	padding: 8px 16px;
+	border-top: 1px solid var(--color-border);
+	text-align: center;
+}
+
+.cn-table-widget__view-all {
+	font-size: 13px;
+	color: var(--color-primary-element);
+	cursor: pointer;
+	text-decoration: none;
+}
+
+.cn-table-widget__view-all:hover {
+	text-decoration: underline;
+}
+</style>

package/src/components/CnTableWidget/index.js

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

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -6,7 +6,13 @@
   backgrounds, and padding.
 -->
 <template>
-	<div class="cn-widget-wrapper" :style="wrapperStyles">
+	<div
+		class="cn-widget-wrapper"
+		:class="{
+			'cn-widget-wrapper--borderless': borderless,
+			'cn-widget-wrapper--flush': flush,
+		}"
+		:style="wrapperStyles">
 		<!-- Header -->
 		<div v-if="showTitle" class="cn-widget-wrapper__header">
 			<div class="cn-widget-wrapper__header-left">
@@ -80,6 +86,22 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * Remove border and background — makes the wrapper transparent.
+		 * Useful for widgets that are self-contained cards (e.g. CnStatsBlock).
+		 */
+		borderless: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Remove content padding — allows content to go edge-to-edge.
+		 * Useful for list-style widgets where items should span the full width.
+		 */
+		flush: {
+			type: Boolean,
+			default: false,
+		},
 		/** Icon URL (image) */
 		iconUrl: {
 			type: String,
@@ -146,6 +168,19 @@ export default {
 	overflow: hidden;
 }
 
+.cn-widget-wrapper--borderless {
+	border: none;
+	background: transparent;
+}
+
+.cn-widget-wrapper--borderless .cn-widget-wrapper__content {
+	padding: 0;
+}
+
+.cn-widget-wrapper--flush .cn-widget-wrapper__content {
+	padding: 0;
+}
+
 .cn-widget-wrapper__header {
 	display: flex;
 	align-items: center;

package/src/components/index.js

@@ -41,3 +41,14 @@ export { CnTimelineStages } from './CnTimelineStages/index.js'
 export { CnUserActionMenu } from './CnUserActionMenu/index.js'
 export { CnNotesCard } from './CnNotesCard/index.js'
 export { CnTasksCard } from './CnTasksCard/index.js'
+export { CnDetailCard } from './CnDetailCard/index.js'
+export { CnCard } from './CnCard/index.js'
+export { CnStatsPanel } from './CnStatsPanel/index.js'
+export { CnJsonViewer } from './CnJsonViewer/index.js'
+export { CnDetailGrid } from './CnDetailGrid/index.js'
+export { CnProgressBar } from './CnProgressBar/index.js'
+export { CnChartWidget } from './CnChartWidget/index.js'
+export { CnObjectSidebar } from './CnObjectSidebar/index.js'
+export { CnInfoWidget } from './CnInfoWidget/index.js'
+export { CnTableWidget } from './CnTableWidget/index.js'
+export { CnNoteCard } from './CnNoteCard/index.js'

package/src/composables/useDashboardView.js

@@ -1,22 +1,35 @@
 import { ref, computed, onMounted } from 'vue'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
+import { filterWidgetsByVisibility } from '../utils/widgetVisibility.js'
 
 /**
  * Composable for managing dashboard view state.
  *
  * Handles widget definition loading (including NC Dashboard API widgets),
- * layout management, and edit mode. Apps provide their own widget
- * definitions and persist layouts however they choose (app config,
- * OpenRegister objects, etc.).
+ * layout management, edit mode, and role-based widget visibility filtering.
+ *
+ * Widgets can specify a `visibility` property to control which users see them:
+ * ```js
+ * {
+ *   id: 'kcc-search',
+ *   type: 'custom',
+ *   title: 'Quick Search',
+ *   visibility: {
+ *     users: ['admin'],           // specific user IDs (optional)
+ *     groups: ['KCC', 'Admins'],  // Nextcloud group names (optional)
+ *   }
+ * }
+ * ```
+ * If `visibility` is not set or both arrays are empty, the widget is visible to everyone.
  *
  * @param {object} [options] Configuration options
- * @param {Array} [options.widgets=[]] Static widget definitions from the app
- * @param {Array} [options.defaultLayout=[]] Default layout if no saved layout exists
+ * @param {Array} [options.widgets] Static widget definitions from the app
+ * @param {Array} [options.defaultLayout] Default layout if no saved layout exists
  * @param {Function} [options.loadLayout] Async function that returns saved layout array, or null
  * @param {Function} [options.saveLayout] Async function that persists layout: (layout) => Promise
- * @param {boolean} [options.includeNcWidgets=false] Whether to also load NC Dashboard API widgets
- * @param {number} [options.columns=12] Grid columns
+ * @param {boolean} [options.includeNcWidgets] Whether to also load NC Dashboard API widgets
+ * @param {number} [options.columns] Grid columns
  * @return {object} Reactive state and methods for CnDashboardPage
  *
  * @example Basic usage with static widgets
@@ -39,6 +52,16 @@ import { generateOcsUrl } from '@nextcloud/router'
  *   saveLayout: (layout) => fetch('/api/dashboard-layout', { method: 'PUT', body: JSON.stringify(layout) }),
  *   includeNcWidgets: true,
  * })
+ *
+ * @example With role-based visibility
+ * const dashboard = useDashboardView({
+ *   widgets: [
+ *     { id: 'admin-panel', title: 'Admin Panel', type: 'custom', visibility: { groups: ['admin'] } },
+ *     { id: 'kcc-search', title: 'KCC Search', type: 'custom', visibility: { groups: ['KCC'] } },
+ *     { id: 'public-info', title: 'Info', type: 'custom' }, // visible to everyone
+ *   ],
+ *   defaultLayout: [...],
+ * })
  */
 export function useDashboardView(options = {}) {
 	const opts = {
@@ -54,6 +77,8 @@ export function useDashboardView(options = {}) {
 	// ── State ────────────────────────────────────────────────────────────
 	const appWidgets = ref(opts.widgets)
 	const ncWidgets = ref([])
+	const visibleAppWidgets = ref([])
+	const visibleNcWidgets = ref([])
 	const layout = ref([])
 	const loading = ref(false)
 	const saving = ref(false)
@@ -61,9 +86,9 @@ export function useDashboardView(options = {}) {
 
 	// ── Computed ─────────────────────────────────────────────────────────
 
-	/** All available widgets (app + NC Dashboard API) */
+	/** All available widgets (app + NC Dashboard API), filtered by visibility */
 	const widgets = computed(() => {
-		return [...appWidgets.value, ...ncWidgets.value]
+		return [...visibleAppWidgets.value, ...visibleNcWidgets.value]
 	})
 
 	/** Widget IDs currently on the dashboard */
@@ -78,6 +103,22 @@ export function useDashboardView(options = {}) {
 
 	// ── Methods ──────────────────────────────────────────────────────────
 
+	/**
+	 * Apply visibility filtering to the current widget sets and update
+	 * the layout to remove items whose widgets are no longer visible.
+	 */
+	async function applyVisibilityFilter() {
+		visibleAppWidgets.value = await filterWidgetsByVisibility(appWidgets.value)
+		visibleNcWidgets.value = await filterWidgetsByVisibility(ncWidgets.value)
+
+		// Remove layout items that reference widgets the user cannot see
+		const visibleIds = new Set(widgets.value.map(w => w.id))
+		const filteredLayout = layout.value.filter(item => visibleIds.has(item.widgetId))
+		if (filteredLayout.length !== layout.value.length) {
+			layout.value = filteredLayout
+		}
+	}
+
 	/**
 	 * Load NC Dashboard API widgets from the OCS endpoint.
 	 */
@@ -132,6 +173,9 @@ export function useDashboardView(options = {}) {
 			}
 
 			await Promise.all(tasks)
+
+			// Apply visibility filtering after all data is loaded
+			await applyVisibilityFilter()
 		} catch (error) {
 			console.error('[useDashboardView] Init failed:', error)
 			layout.value = [...opts.defaultLayout]
@@ -202,17 +246,19 @@ export function useDashboardView(options = {}) {
 
 	/**
 	 * Update app widget definitions (e.g., when data changes).
+	 * Re-applies visibility filtering after update.
 	 *
 	 * @param {Array} newWidgets Updated widget definitions
 	 */
-	function setWidgets(newWidgets) {
+	async function setWidgets(newWidgets) {
 		appWidgets.value = newWidgets
+		await applyVisibilityFilter()
 	}
 
 	// ── Lifecycle ────────────────────────────────────────────────────────
 
-	onMounted(() => {
-		init()
+	onMounted(async () => {
+		await init()
 	})
 
 	// ── Return ───────────────────────────────────────────────────────────

package/src/composables/useDetailView.js

@@ -14,10 +14,11 @@ import { useObjectStore } from '../store/index.js'
  * @param {string|object} [objectTypeOrOptions] Object type slug (new API) or legacy options object
  * @param {string|import('vue').Ref<string>} [id] Object ID or `'new'` for a new object
  * @param {object} [options] Options (new API only)
+ * @param {Function} [options.objectStore] Custom object store instance (from createObjectStore)
  * @param {object|null} [options.router] Vue Router instance — enables post-save/delete navigation
  * @param {string|null} [options.listRouteName] Route name to navigate to after successful delete
  * @param {string|null} [options.detailRouteName] Route name to navigate to after successful create
- * @param {string} [options.nameField='title'] Field shown in error messages
+ * @param {string} [options.nameField] Field shown in error messages
  * @return {object} Reactive state and operation functions
  *
  * @example
@@ -54,7 +55,7 @@ export function useDetailView(objectTypeOrOptions, id, options) {
 	// Normalise `id` to a ref so we can watch it
 	const idRef = isRef(id) ? id : ref(id)
 
-	const objectStore = useObjectStore()
+	const objectStore = opts.objectStore ? opts.objectStore() : useObjectStore()
 
 	// ── State refs ───────────────────────────────────────────────────────
 	const editing = ref(false)

package/src/composables/useListView.js

@@ -14,9 +14,10 @@ import { useObjectStore } from '../store/index.js'
  *
  * @param {string|object} [objectTypeOrOptions] Object type slug (new API) or legacy options object
  * @param {object} [options] Options (new API only)
+ * @param {object|null} [options.objectStore] Custom object store instance (from createObjectStore). When provided, uses this store instead of the default useObjectStore(). Required when the app uses createObjectStore with a custom store ID.
  * @param {object|null} [options.sidebarState] Sidebar state object from `inject('sidebarState')`. When provided, the composable wires and unwires the sidebar automatically on mount/unmount.
- * @param {number} [options.defaultPageSize=20] Default `_limit` sent to the API
- * @param {number} [options.debounceMs=300] Search debounce in milliseconds
+ * @param {number} [options.defaultPageSize] Default `_limit` sent to the API
+ * @param {number} [options.debounceMs] Search debounce in milliseconds
  * @param {object} [options.defaultSort] Default sort applied on mount e.g. `{ key: 'createdAt', order: 'desc' }`
  * @return {object} Reactive state and event handlers
  *
@@ -49,7 +50,7 @@ export function useListView(objectTypeOrOptions, options) {
 	const opts = options || {}
 	const sidebarState = opts.sidebarState || null
 
-	const objectStore = useObjectStore()
+	const objectStore = opts.objectStore || useObjectStore()
 
 	// ── State refs ───────────────────────────────────────────────────────
 	const schema = ref(null)
@@ -103,7 +104,7 @@ export function useListView(objectTypeOrOptions, options) {
 	/**
 	 * Fetch the collection using current state params and update sidebar facet data.
 	 *
-	 * @param {number} [page=1] Page to fetch
+	 * @param {number} [page] Page to fetch
 	 * @return {Promise<void>}
 	 */
 	async function refresh(page = 1) {
@@ -256,8 +257,8 @@ export function useListView(objectTypeOrOptions, options) {
  * @param {object} options Legacy options object
  * @param {string} [options.objectType] The registered object type slug
  * @param {Function} [options.fetchFn] Function to call: (type, params) => Promise<Array>
- * @param {number} [options.debounceMs=300] Search debounce in milliseconds
- * @param {number} [options.pageSize=20] Default page size
+ * @param {number} [options.debounceMs] Search debounce in milliseconds
+ * @param {number} [options.pageSize] Default page size
  * @param {object} [options.defaultSort] Default sort: { key: string, order: 'asc'|'desc' }
  * @return {object} Reactive state and methods
  */