@conduction/nextcloud-vue 0.1.0-beta.3 → 0.1.0-beta.5

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -0,0 +1,225 @@
+<!--
+  CnDashboardGrid — GridStack-powered drag-and-drop dashboard grid.
+
+  Renders widgets in a configurable grid layout. Supports drag, resize,
+  and dynamic item addition/removal. Emits layout changes for persistence.
+-->
+<template>
+	<div ref="gridContainer" class="cn-dashboard-grid">
+		<div class="grid-stack">
+			<div
+				v-for="item in layout"
+				:key="item.id"
+				class="grid-stack-item"
+				:gs-id="item.id"
+				:gs-x="item.gridX"
+				:gs-y="item.gridY"
+				:gs-w="item.gridWidth"
+				:gs-h="item.gridHeight"
+				:gs-min-w="minWidth"
+				:gs-min-h="minHeight">
+				<div class="grid-stack-item-content">
+					<slot name="widget" :item="item">
+						<!-- Default: render nothing; CnDashboardPage provides content -->
+					</slot>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { GridStack } from 'gridstack'
+import 'gridstack/dist/gridstack.min.css'
+
+/**
+ * CnDashboardGrid — Low-level grid layout engine powered by GridStack.
+ *
+ * Manages the drag-and-drop grid, syncs positions, and emits layout
+ * changes. Does NOT handle widget rendering — that's done by the parent
+ * via the `#widget` scoped slot.
+ *
+ * @example
+ * <CnDashboardGrid
+ *   :layout="placements"
+ *   :editable="isEditing"
+ *   @layout-change="onLayoutChange">
+ *   <template #widget="{ item }">
+ *     <MyWidget :config="item" />
+ *   </template>
+ * </CnDashboardGrid>
+ */
+export default {
+	name: 'CnDashboardGrid',
+
+	props: {
+		/** Array of layout items: { id, gridX, gridY, gridWidth, gridHeight, ...extra } */
+		layout: {
+			type: Array,
+			required: true,
+		},
+		/** Whether drag and resize are enabled */
+		editable: {
+			type: Boolean,
+			default: false,
+		},
+		/** Number of grid columns */
+		columns: {
+			type: Number,
+			default: 12,
+		},
+		/** Cell height in pixels */
+		cellHeight: {
+			type: Number,
+			default: 80,
+		},
+		/** Grid margin in pixels */
+		margin: {
+			type: Number,
+			default: 12,
+		},
+		/** Minimum widget width in grid units */
+		minWidth: {
+			type: Number,
+			default: 2,
+		},
+		/** Minimum widget height in grid units */
+		minHeight: {
+			type: Number,
+			default: 2,
+		},
+	},
+
+	emits: ['layout-change'],
+
+	data() {
+		return {
+			grid: null,
+		}
+	},
+
+	watch: {
+		editable(val) {
+			if (!this.grid) return
+			if (val) {
+				this.grid.enable()
+			} else {
+				this.grid.disable()
+			}
+		},
+
+		layout: {
+			deep: true,
+			handler(newLayout) {
+				if (this.grid) {
+					this.syncGridItems(newLayout)
+				}
+			},
+		},
+	},
+
+	mounted() {
+		this.initGrid()
+	},
+
+	beforeDestroy() {
+		if (this.grid) {
+			this.grid.destroy(false)
+		}
+	},
+
+	methods: {
+		initGrid() {
+			const el = this.$refs.gridContainer.querySelector('.grid-stack')
+			this.grid = GridStack.init({
+				column: this.columns,
+				cellHeight: this.cellHeight,
+				margin: this.margin,
+				float: true,
+				animate: true,
+				disableDrag: !this.editable,
+				disableResize: !this.editable,
+				removable: false,
+			}, el)
+
+			this.grid.on('change', (_event, items) => {
+				this.handleGridChange(items)
+			})
+		},
+
+		handleGridChange(items) {
+			if (!items || items.length === 0) return
+
+			const updated = this.layout.map(item => {
+				const gridItem = items.find(gi => String(gi.id) === String(item.id))
+				if (gridItem) {
+					return {
+						...item,
+						gridX: gridItem.x,
+						gridY: gridItem.y,
+						gridWidth: gridItem.w,
+						gridHeight: gridItem.h,
+					}
+				}
+				return item
+			})
+
+			this.$emit('layout-change', updated)
+		},
+
+		syncGridItems(newLayout) {
+			// Add items that don't exist in grid yet
+			for (const item of newLayout) {
+				const exists = this.grid.engine.nodes.find(
+					n => String(n.id) === String(item.id),
+				)
+				if (!exists) {
+					this.$nextTick(() => {
+						const el = this.$refs.gridContainer.querySelector(`[gs-id="${item.id}"]`)
+						if (el) {
+							this.grid.makeWidget(el)
+						}
+					})
+				}
+			}
+
+			// Remove items no longer in layout
+			const ids = newLayout.map(i => String(i.id))
+			const toRemove = this.grid.engine.nodes.filter(
+				n => !ids.includes(String(n.id)),
+			)
+			for (const node of toRemove) {
+				const el = this.$refs.gridContainer.querySelector(`[gs-id="${node.id}"]`)
+				if (el) {
+					this.grid.removeWidget(el, false)
+				}
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-dashboard-grid {
+	width: 100%;
+	min-height: 200px;
+}
+
+.grid-stack {
+	background: transparent;
+}
+
+:deep(.grid-stack-item-content) {
+	background: var(--color-main-background);
+	border-radius: 0;
+	border: none;
+	box-shadow: none;
+	overflow: hidden;
+}
+
+:deep(.grid-stack-placeholder > .placeholder-content) {
+	background: var(--color-primary-element-light);
+	border: 2px dashed var(--color-primary-element);
+	border-radius: var(--border-radius-large);
+}
+</style>

package/src/components/CnDashboardGrid/index.js

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

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -0,0 +1,390 @@
+<!--
+  CnDashboardPage — Top-level dashboard page with GridStack widget grid.
+
+  The dashboard equivalent of CnIndexPage. Assembles a complete dashboard
+  from a widget definition array and a layout array. Supports:
+  - Custom widgets via scoped slots (#widget-{widgetId})
+  - Nextcloud Dashboard API widgets (auto-rendered)
+  - Tile widgets (quick-access links)
+  - Drag-and-drop editing mode
+  - Header with title, actions, and edit toggle
+-->
+<template>
+	<div class="cn-dashboard-page">
+		<!-- Header -->
+		<div class="cn-dashboard-page__header">
+			<div class="cn-dashboard-page__header-left">
+				<h2 v-if="title" class="cn-dashboard-page__title">
+					{{ title }}
+				</h2>
+				<p v-if="description" class="cn-dashboard-page__description">
+					{{ description }}
+				</p>
+			</div>
+			<div class="cn-dashboard-page__header-actions">
+				<slot name="header-actions" />
+				<NcButton
+					v-if="allowEdit"
+					:type="isEditing ? 'primary' : 'secondary'"
+					@click="toggleEdit">
+					<template #icon>
+						<Pencil v-if="!isEditing" :size="20" />
+						<Check v-else :size="20" />
+					</template>
+					{{ isEditing ? doneLabel : editLabel }}
+				</NcButton>
+			</div>
+		</div>
+
+		<!-- Loading state -->
+		<NcLoadingIcon v-if="loading" />
+
+		<!-- Empty state -->
+		<div v-else-if="!hasWidgets" class="cn-dashboard-page__empty">
+			<slot name="empty">
+				<NcEmptyContent :description="emptyLabel">
+					<template #icon>
+						<ViewDashboardOutline :size="48" />
+					</template>
+				</NcEmptyContent>
+			</slot>
+		</div>
+
+		<!-- Dashboard grid -->
+		<CnDashboardGrid
+			v-else
+			:layout="layout"
+			:editable="isEditing"
+			:columns="columns"
+			:cell-height="cellHeight"
+			:margin="gridMargin"
+			@layout-change="onLayoutChange">
+			<template #widget="{ item }">
+				<!-- Tile widget -->
+				<CnTileWidget
+					v-if="isTile(item)"
+					:tile="getTileConfig(item)" />
+
+				<!-- Custom slot widget — apps provide their own rendering -->
+				<template v-else-if="hasWidgetSlot(item.widgetId)">
+					<CnWidgetWrapper
+						:title="getWidgetTitle(item)"
+						:icon-url="getWidgetIconUrl(item)"
+						:icon-class="getWidgetIconClass(item)"
+						:show-title="item.showTitle !== false"
+						:buttons="getWidgetButtons(item)"
+						:style-config="item.styleConfig || {}">
+						<slot :name="'widget-' + item.widgetId" :item="item" :widget="getWidgetDef(item.widgetId)" />
+					</CnWidgetWrapper>
+				</template>
+
+				<!-- NC Dashboard API widget -->
+				<template v-else-if="isNcWidget(item)">
+					<CnWidgetWrapper
+						:title="getWidgetTitle(item)"
+						:icon-url="getWidgetIconUrl(item)"
+						:icon-class="getWidgetIconClass(item)"
+						:show-title="item.showTitle !== false"
+						:buttons="getWidgetButtons(item)"
+						:style-config="item.styleConfig || {}">
+						<CnWidgetRenderer
+							:widget="getWidgetDef(item.widgetId)"
+							:unavailable-text="unavailableLabel" />
+					</CnWidgetWrapper>
+				</template>
+
+				<!-- Unknown widget fallback -->
+				<CnWidgetWrapper
+					v-else
+					:title="getWidgetTitle(item)"
+					:show-title="item.showTitle !== false">
+					<div class="cn-dashboard-page__unknown">
+						{{ unavailableLabel }}
+					</div>
+				</CnWidgetWrapper>
+			</template>
+		</CnDashboardGrid>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
+import CnDashboardGrid from '../CnDashboardGrid/CnDashboardGrid.vue'
+import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
+import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
+import CnTileWidget from '../CnTileWidget/CnTileWidget.vue'
+
+/**
+ * CnDashboardPage — Top-level dashboard page component.
+ *
+ * The dashboard equivalent of CnIndexPage. Renders a configurable grid
+ * of widgets from a `widgets` definition array and a `layout` array.
+ *
+ * Widget types:
+ * 1. **Custom** — App provides rendering via `#widget-{widgetId}` slot
+ * 2. **NC Dashboard API** — Widgets with `itemApiVersions` are auto-rendered
+ * 3. **Tile** — Items with `type: 'tile'` render as quick-access tiles
+ *
+ * @example Basic usage with custom widgets
+ * <CnDashboardPage
+ *   title="Dashboard"
+ *   :widgets="widgetDefs"
+ *   :layout="savedLayout"
+ *   @layout-change="saveLayout">
+ *   <template #widget-cases-by-status="{ item }">
+ *     <StatusChart :data="statusData" />
+ *   </template>
+ *   <template #widget-my-work="{ item }">
+ *     <MyWorkList :items="workItems" />
+ *   </template>
+ * </CnDashboardPage>
+ *
+ * @example With NC Dashboard API widgets
+ * <CnDashboardPage
+ *   title="Dashboard"
+ *   :widgets="[...appWidgets, ...ncWidgets]"
+ *   :layout="layout"
+ *   @layout-change="saveLayout" />
+ */
+export default {
+	name: 'CnDashboardPage',
+
+	components: {
+		NcButton,
+		NcEmptyContent,
+		NcLoadingIcon,
+		Pencil,
+		Check,
+		ViewDashboardOutline,
+		CnDashboardGrid,
+		CnWidgetWrapper,
+		CnWidgetRenderer,
+		CnTileWidget,
+	},
+
+	props: {
+		/** Page title */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Page description (shown below title) */
+		description: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Widget definitions array. Each widget defines metadata for rendering.
+		 *
+		 * Custom widgets: `{ id: 'my-widget', title: 'My Widget', type: 'custom' }`
+		 * NC API widgets: `{ id: 'calendar', title: 'Calendar', itemApiVersions: [1,2], ... }`
+		 * Tile widgets: `{ id: 'tile-files', type: 'tile', title: 'Files', icon: 'M12...', iconType: 'svg', backgroundColor: '#0082c9', textColor: '#fff', linkType: 'app', linkValue: 'files' }`
+		 *
+		 * @type {Array<{ id: string, title: string, type?: string, iconUrl?: string, iconClass?: string, buttons?: Array, itemApiVersions?: number[], reloadInterval?: number, [key: string]: any }>}
+		 */
+		widgets: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Layout array defining widget positions in the grid.
+		 *
+		 * Each item: `{ id: 'unique-id', widgetId: 'my-widget', gridX: 0, gridY: 0, gridWidth: 4, gridHeight: 3 }`
+		 *
+		 * Additional properties (showTitle, styleConfig, tile config) are passed through.
+		 *
+		 * @type {Array<{ id: string|number, widgetId: string, gridX: number, gridY: number, gridWidth: number, gridHeight: number, showTitle?: boolean, styleConfig?: object, [key: string]: any }>}
+		 */
+		layout: {
+			type: Array,
+			default: () => [],
+		},
+		/** Whether the dashboard is loading */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether to show the edit toggle button */
+		allowEdit: {
+			type: Boolean,
+			default: false,
+		},
+		/** Number of grid columns */
+		columns: {
+			type: Number,
+			default: 12,
+		},
+		/** Grid cell height in pixels */
+		cellHeight: {
+			type: Number,
+			default: 80,
+		},
+		/** Grid margin in pixels */
+		gridMargin: {
+			type: Number,
+			default: 12,
+		},
+		/** Label for the edit button */
+		editLabel: {
+			type: String,
+			default: 'Edit',
+		},
+		/** Label for the done button (when editing) */
+		doneLabel: {
+			type: String,
+			default: 'Done',
+		},
+		/** Label for the empty state */
+		emptyLabel: {
+			type: String,
+			default: 'No widgets configured',
+		},
+		/** Label for unavailable widgets */
+		unavailableLabel: {
+			type: String,
+			default: 'Widget not available',
+		},
+	},
+
+	emits: ['layout-change', 'edit-toggle'],
+
+	data() {
+		return {
+			isEditing: false,
+		}
+	},
+
+	computed: {
+		hasWidgets() {
+			return this.layout.length > 0
+		},
+
+		widgetMap() {
+			const map = {}
+			for (const w of this.widgets) {
+				map[w.id] = w
+			}
+			return map
+		},
+	},
+
+	methods: {
+		toggleEdit() {
+			this.isEditing = !this.isEditing
+			this.$emit('edit-toggle', this.isEditing)
+		},
+
+		onLayoutChange(updated) {
+			this.$emit('layout-change', updated)
+		},
+
+		getWidgetDef(widgetId) {
+			return this.widgetMap[widgetId] || null
+		},
+
+		getWidgetTitle(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return item.customTitle || def?.title || item.widgetId
+		},
+
+		getWidgetIconUrl(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.iconUrl || null
+		},
+
+		getWidgetIconClass(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.iconClass || null
+		},
+
+		getWidgetButtons(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.buttons || []
+		},
+
+		isTile(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.type === 'tile'
+		},
+
+		getTileConfig(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			if (!def) return null
+			return {
+				title: def.title,
+				icon: def.icon,
+				iconType: def.iconType,
+				backgroundColor: def.backgroundColor,
+				textColor: def.textColor,
+				linkType: def.linkType,
+				linkValue: def.linkValue,
+			}
+		},
+
+		isNcWidget(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.itemApiVersions && def.itemApiVersions.length > 0
+		},
+
+		hasWidgetSlot(widgetId) {
+			return !!this.$scopedSlots['widget-' + widgetId]
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-dashboard-page {
+	padding: 20px;
+	max-width: 1400px;
+}
+
+.cn-dashboard-page__header {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 20px;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+.cn-dashboard-page__header-left {
+	min-width: 0;
+}
+
+.cn-dashboard-page__title {
+	margin: 0;
+	font-size: 20px;
+	font-weight: 700;
+}
+
+.cn-dashboard-page__description {
+	margin: 4px 0 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-dashboard-page__header-actions {
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
+	flex-shrink: 0;
+}
+
+.cn-dashboard-page__empty {
+	padding: 60px 20px;
+}
+
+.cn-dashboard-page__unknown {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	padding: 16px;
+}
+</style>

package/src/components/CnDashboardPage/index.js

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

package/src/components/CnDataTable/CnDataTable.vue

@@ -38,7 +38,7 @@
 
 					<!-- Actions column -->
 					<th v-if="$scopedSlots['row-actions']" class="cn-table-col--actions">
-						<!-- Actions header intentionally empty -->
+						<slot name="actions-header" />
 					</th>
 				</tr>
 			</thead>

package/src/components/CnDataTable/index.js

@@ -1 +1 @@
-export { default as CnDataTable } from './CnDataTable.vue'
+export { default as CnDataTable } from './CnDataTable.vue'