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

package/src/composables/useSubResource.js

@@ -14,9 +14,9 @@ import { parseResponseError, networkError } from '../utils/errors.js'
  *
  * @param {object} store The object store instance (must have objectTypeRegistry and _options)
  * @param {string} endpoint URL path segment appended to the object URL (e.g. 'tasks')
- * @param {object} [options={}] Composable options
+ * @param {object} [options] Composable options
  * @param {Function} [options.transform] Transform function applied to each result item
- * @param {number} [options.limit=20] Default page size
+ * @param {number} [options.limit] Default page size
  * @return {object} Reactive state and methods
  *
  * @example
@@ -71,7 +71,7 @@ export function useSubResource(store, endpoint, options = {}) {
 	 *
 	 * @param {string} type The registered object type slug
 	 * @param {string} objectId The parent object ID
-	 * @param {object} [params={}] Query parameters (_search, _limit, _page)
+	 * @param {object} [params] Query parameters (_search, _limit, _page)
 	 * @return {Promise<Array>} The fetched results
 	 */
 	async function fetchData(type, objectId, params = {}) {

package/src/css/badge.css

@@ -5,6 +5,7 @@
 .cn-status-badge {
 	display: inline-flex;
 	align-items: center;
+	gap: calc(0.5 * var(--default-grid-baseline));
 	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
 	border-radius: var(--border-radius-pill);
 	font-size: 0.85em;
@@ -49,3 +50,34 @@
 	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
 	color: var(--color-info, #0082c9);
 }
+
+/* Solid variants — solid background with white text for use on colored backgrounds */
+.cn-status-badge--solid.cn-status-badge--default {
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-status-badge--solid.cn-status-badge--primary {
+	background-color: var(--color-primary-element);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--success {
+	background-color: var(--color-success);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--warning {
+	background-color: var(--color-warning);
+	color: var(--color-primary-text);
+}
+
+.cn-status-badge--solid.cn-status-badge--error {
+	background-color: var(--color-error);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--info {
+	background-color: var(--color-info, #0082c9);
+	color: white;
+}

package/src/css/card.css

@@ -7,6 +7,7 @@
 	display: grid;
 	gap: calc(4 * var(--default-grid-baseline));
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	padding: 0.25rem;
 }
 
 /* Base Card */

package/src/css/detail-page.css

@@ -5,22 +5,23 @@
 .cn-detail-page {
 	margin-inline: auto;
 	padding: calc(5 * var(--default-grid-baseline));
+	position: relative;
 }
 
 /* Header */
 .cn-detail-page__header {
 	display: flex;
 	justify-content: space-between;
-	align-items: flex-start;
+	align-items: center;
 	margin-bottom: calc(4 * var(--default-grid-baseline));
 	flex-wrap: wrap;
-	gap: calc(2 * var(--default-grid-baseline));
+	gap: calc(4 * var(--default-grid-baseline));
 }
 
 .cn-detail-page__header-left {
 	display: flex;
 	align-items: center;
-	gap: calc(2 * var(--default-grid-baseline));
+	gap: calc(3 * var(--default-grid-baseline));
 	min-width: 0;
 }
 
@@ -32,11 +33,28 @@
 	flex-shrink: 0;
 }
 
+.cn-detail-page__title-group {
+	display: flex;
+	align-items: baseline;
+	gap: calc(3 * var(--default-grid-baseline));
+	min-width: 0;
+}
+
 .cn-detail-page__title {
 	margin: 0;
-	font-size: 20px;
+	font-size: 22px;
 	font-weight: 700;
+	line-height: 1.3;
 	color: var(--color-main-text);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-detail-page__subtitle {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+	white-space: nowrap;
 }
 
 .cn-detail-page__description {
@@ -47,7 +65,7 @@
 
 .cn-detail-page__header-actions {
 	display: flex;
-	gap: calc(1 * var(--default-grid-baseline));
+	gap: calc(2 * var(--default-grid-baseline));
 	flex-wrap: wrap;
 	flex-shrink: 0;
 }
@@ -133,17 +151,56 @@
 
 /* Body & content */
 .cn-detail-page__body {
-	/* Wrapper for all content when not in loading/error/empty state */
+	display: flex;
+	flex-direction: column;
+	gap: calc(5 * var(--default-grid-baseline));
 }
 
 .cn-detail-page__content {
-	/* Content area inherits spacing from parent */
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: calc(4 * var(--default-grid-baseline));
+}
+
+/* Grid layout mode */
+.cn-detail-page__content--grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	gap: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__grid-item {
+	min-width: 0;
+}
+
+.cn-detail-page__widget-title {
+	margin: 0 0 calc(2 * var(--default-grid-baseline)) 0;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 1.4;
 }
 
 .cn-detail-page__sections {
 	margin-top: calc(4 * var(--default-grid-baseline));
 }
 
+/* Sidebar */
+.cn-detail-page__sidebar {
+	width: 340px;
+	flex-shrink: 0;
+	position: sticky;
+	top: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__sidebar-toggle {
+	position: fixed;
+	right: calc(5 * var(--default-grid-baseline));
+	top: 80px;
+	z-index: 10;
+}
+
 /* Footer */
 .cn-detail-page__footer {
 	margin-top: calc(4 * var(--default-grid-baseline));
@@ -164,5 +221,15 @@
 	.cn-detail-page__header-actions {
 		width: 100%;
 	}
+}
+
+@media (max-width: 600px) {
+	.cn-detail-page__content--grid {
+		grid-template-columns: 1fr;
+	}
 
+	.cn-detail-page__content--grid .cn-detail-page__grid-item {
+		grid-column: 1 / -1 !important;
+		grid-row: auto !important;
+	}
 }

package/src/index.js

@@ -42,12 +42,27 @@ export {
 	CnUserActionMenu,
 	CnNotesCard,
 	CnTasksCard,
+	CnDetailCard,
 	CnDetailPage,
+	CnCard,
+	CnStatsPanel,
+	CnJsonViewer,
+	CnDetailGrid,
+	CnProgressBar,
+	CnChartWidget,
+	CnObjectSidebar,
+	CnInfoWidget,
+	CnTableWidget,
+	CnActionsBar,
+	CnIcon,
+	CnPageHeader,
+	CnNoteCard,
 	registerIcons,
 } from './components/index.js'
 
 // Store
 export { useObjectStore, createObjectStore } from './store/index.js'
+export { createCrudStore } from './store/index.js'
 export { createSubResourcePlugin, emptyPaginated } from './store/index.js'
 
 // Store plugins
@@ -70,3 +85,4 @@ export { useListView, useDetailView, useSubResource, useDashboardView } from './
 // Utilities
 export { buildHeaders, buildQueryString, parseResponseError, networkError, genericError } from './utils/index.js'
 export { columnsFromSchema, formatValue, filtersFromSchema, fieldsFromSchema } from './utils/index.js'
+export { filterWidgetsByVisibility, isWidgetVisible, getCurrentUserId, getCurrentUserGroups, resetVisibilityCache } from './utils/index.js'

package/src/mixins/gridLayout.js

@@ -0,0 +1,118 @@
+/**
+ * Grid layout mixin for static 12-column CSS grid layouts.
+ *
+ * Provides a shared grid engine for components that render widget-based layouts
+ * using CSS Grid (as opposed to GridStack's absolute positioning). Used by
+ * CnDetailPage for static grid layout mode.
+ *
+ * @mixin gridLayout
+ *
+ * @example
+ * import { gridLayout } from '@conduction/nextcloud-vue/src/mixins/gridLayout.js'
+ *
+ * export default {
+ *   mixins: [gridLayout],
+ *   // Use this.sortedLayout and this.widgetGridStyle(item) in template
+ * }
+ */
+export const gridLayout = {
+	props: {
+		/**
+		 * Grid layout definition. Array of placement objects defining where each widget
+		 * appears in the 12-column grid.
+		 *
+		 * @type {{ id: number, widgetId: string, gridX: number, gridY: number, gridWidth: number, gridHeight?: number, showTitle?: boolean }[]}
+		 */
+		layout: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Widget definitions. Array of widget objects with id and title.
+		 *
+		 * @type {{ id: string, title: string, type?: string }[]}
+		 */
+		widgets: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Number of grid columns.
+		 *
+		 * @type {number}
+		 */
+		columns: {
+			type: Number,
+			default: 12,
+		},
+	},
+
+	computed: {
+		/**
+		 * Layout items sorted by gridY (row) then gridX (column) for proper
+		 * rendering order. Ensures DOM order matches visual order for
+		 * accessibility (WCAG 2.4.3 Focus Order).
+		 *
+		 * @return {Array} Sorted copy of the layout array.
+		 */
+		sortedLayout() {
+			if (!this.layout) return []
+			return [...this.layout].sort((a, b) => {
+				if (a.gridY !== b.gridY) {
+					return a.gridY - b.gridY
+				}
+				return a.gridX - b.gridX
+			})
+		},
+
+		/**
+		 * Whether grid layout mode is active (layout array is provided and non-empty).
+		 *
+		 * @return {boolean}
+		 */
+		hasGridLayout() {
+			return Array.isArray(this.layout) && this.layout.length > 0
+		},
+	},
+
+	methods: {
+		/**
+		 * Compute CSS grid placement styles for a layout item.
+		 *
+		 * Maps the layout item's gridX and gridWidth to CSS grid-column values,
+		 * and gridY + gridHeight to grid-row values.
+		 *
+		 * @param {{ gridX: number, gridWidth: number, gridY?: number, gridHeight?: number }} item - Layout item.
+		 * @return {object} CSS style object for grid-column and grid-row placement.
+		 */
+		widgetGridStyle(item) {
+			const colStart = (item.gridX || 0) + 1
+			const colEnd = colStart + (item.gridWidth || this.columns)
+
+			const style = {
+				gridColumn: `${colStart} / ${colEnd}`,
+			}
+
+			// Only set grid-row if explicit height is provided
+			if (item.gridY !== undefined && item.gridHeight) {
+				const rowStart = item.gridY + 1
+				const rowEnd = rowStart + item.gridHeight
+				style.gridRow = `${rowStart} / ${rowEnd}`
+			}
+
+			return style
+		},
+
+		/**
+		 * Find the widget definition for a layout item.
+		 *
+		 * @param {{ widgetId: string }} item - Layout item with widgetId reference.
+		 * @return {object|undefined} The matching widget definition.
+		 */
+		findWidget(item) {
+			return this.widgets.find(w => w.id === item.widgetId)
+		},
+	},
+}
+
+export default gridLayout