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

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -0,0 +1,320 @@
+<!--
+  CnChartWidget — Renders charts inside dashboard widgets.
+
+  A thin wrapper around ApexCharts for use in CnDashboardPage widget slots.
+  Supports area, line, bar, pie, donut, and radialBar chart types.
+  Automatically adapts to the widget container size.
+
+  ApexCharts is loaded as a peer dependency — consuming apps must
+  install `apexcharts` and `vue-apexcharts` in their own package.json.
+-->
+<template>
+	<div class="cn-chart-widget">
+		<component
+			:is="chartComponent"
+			v-if="chartComponent"
+			:type="type"
+			:height="computedHeight"
+			:width="computedWidth"
+			:options="mergedOptions"
+			:series="series" />
+		<div v-else class="cn-chart-widget__fallback">
+			<slot name="fallback">
+				<p class="cn-chart-widget__error">{{ unavailableLabel }}</p>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnChartWidget — Chart component for dashboard widgets.
+ *
+ * Wraps ApexCharts with sensible defaults for Nextcloud theming.
+ * Apps must install `apexcharts` and `vue-apexcharts` as dependencies.
+ *
+ * @example Basic area chart
+ * <CnChartWidget
+ *   type="area"
+ *   :series="[{ name: 'Searches', data: [10, 41, 35, 51] }]"
+ *   :categories="['Mon', 'Tue', 'Wed', 'Thu']"
+ *   :height="250" />
+ *
+ * @example Pie chart
+ * <CnChartWidget
+ *   type="pie"
+ *   :series="[44, 55, 13]"
+ *   :labels="['Active', 'Pending', 'Closed']" />
+ *
+ * @example With custom options
+ * <CnChartWidget
+ *   type="bar"
+ *   :series="barSeries"
+ *   :options="{ plotOptions: { bar: { horizontal: true } } }" />
+ */
+export default {
+	name: 'CnChartWidget',
+
+	props: {
+		/**
+		 * Chart type: area, line, bar, pie, donut, radialBar
+		 * @type {string}
+		 */
+		type: {
+			type: String,
+			default: 'area',
+			validator: (v) => ['area', 'line', 'bar', 'pie', 'donut', 'radialBar'].includes(v),
+		},
+		/**
+		 * Chart data series. Format depends on chart type.
+		 * For line/area/bar: [{ name: string, data: number[] }]
+		 * For pie/donut: number[]
+		 * @type {Array}
+		 */
+		series: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * X-axis categories (for line, area, bar charts)
+		 * @type {Array<string>}
+		 */
+		categories: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Labels (for pie, donut charts)
+		 * @type {Array<string>}
+		 */
+		labels: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Chart height in pixels. Use 'auto' for container-based sizing.
+		 * @type {number|string}
+		 */
+		height: {
+			type: [Number, String],
+			default: 250,
+		},
+		/**
+		 * Chart width. Defaults to '100%' (fills container).
+		 * @type {number|string}
+		 */
+		width: {
+			type: [Number, String],
+			default: '100%',
+		},
+		/**
+		 * Custom ApexCharts options (deep-merged with defaults).
+		 * @type {object}
+		 */
+		options: {
+			type: Object,
+			default: () => ({}),
+		},
+		/**
+		 * Chart color palette. Defaults to Nextcloud theme colors.
+		 * @type {Array<string>}
+		 */
+		colors: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Show or hide the toolbar (zoom, download, etc.)
+		 * @type {boolean}
+		 */
+		toolbar: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Show or hide the legend
+		 * @type {boolean}
+		 */
+		legend: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Label shown when ApexCharts is not available
+		 * @type {string}
+		 */
+		unavailableLabel: {
+			type: String,
+			default: 'Chart library not available',
+		},
+	},
+
+	data() {
+		return {
+			chartComponent: null,
+		}
+	},
+
+	computed: {
+		computedHeight() {
+			return this.height
+		},
+		computedWidth() {
+			return this.width
+		},
+		defaultColors() {
+			if (this.colors.length > 0) return this.colors
+			// Nextcloud-themed color palette
+			return [
+				'var(--color-primary-element, #0082c9)',
+				'var(--color-success, #46ba61)',
+				'var(--color-warning, #e9a300)',
+				'var(--color-error, #e04224)',
+				'var(--color-primary-element-light, #aad2ed)',
+				'var(--color-text-maxcontrast, #767676)',
+			]
+		},
+		mergedOptions() {
+			const isPieType = ['pie', 'donut', 'radialBar'].includes(this.type)
+
+			const defaults = {
+				chart: {
+					type: this.type,
+					toolbar: { show: this.toolbar },
+					zoom: { enabled: false },
+					fontFamily: 'var(--default-font, system-ui, sans-serif)',
+					foreColor: 'var(--color-main-text, #222)',
+					background: 'transparent',
+				},
+				colors: this.defaultColors,
+				stroke: {
+					curve: 'smooth',
+					width: this.type === 'area' ? 2 : (this.type === 'bar' ? 0 : 2),
+				},
+				fill: this.type === 'area'
+					? {
+						type: 'gradient',
+						gradient: {
+							shade: 'light',
+							type: 'vertical',
+							opacityFrom: 0.5,
+							opacityTo: 0.1,
+						},
+					}
+					: { opacity: 1 },
+				grid: {
+					borderColor: 'var(--color-border, #ededed)',
+					strokeDashArray: 4,
+				},
+				legend: {
+					show: this.legend,
+					position: isPieType ? 'bottom' : 'top',
+					labels: {
+						colors: 'var(--color-main-text, #222)',
+					},
+				},
+				dataLabels: {
+					enabled: isPieType,
+				},
+				tooltip: {
+					theme: 'light',
+				},
+			}
+
+			// Add categories for cartesian charts
+			if (!isPieType && this.categories.length > 0) {
+				defaults.xaxis = {
+					categories: this.categories,
+					labels: {
+						style: {
+							colors: 'var(--color-text-maxcontrast, #767676)',
+						},
+					},
+				}
+				defaults.yaxis = {
+					labels: {
+						style: {
+							colors: 'var(--color-text-maxcontrast, #767676)',
+						},
+					},
+				}
+			}
+
+			// Add labels for pie/donut
+			if (isPieType && this.labels.length > 0) {
+				defaults.labels = this.labels
+			}
+
+			// Bar-specific defaults
+			if (this.type === 'bar') {
+				defaults.plotOptions = {
+					bar: {
+						horizontal: false,
+						columnWidth: '55%',
+						borderRadius: 4,
+					},
+				}
+			}
+
+			return this.deepMerge(defaults, this.options)
+		},
+	},
+
+	async created() {
+		try {
+			const VueApexCharts = await import('vue-apexcharts')
+			this.chartComponent = VueApexCharts.default || VueApexCharts
+		} catch {
+			console.warn('[CnChartWidget] vue-apexcharts not found. Install it: npm install apexcharts vue-apexcharts')
+			this.chartComponent = null
+		}
+	},
+
+	methods: {
+		/**
+		 * Deep merge two objects (target wins on conflict)
+		 * @param {object} base Base object
+		 * @param {object} override Override object
+		 * @return {object} Merged result
+		 */
+		deepMerge(base, override) {
+			const result = { ...base }
+			for (const key of Object.keys(override)) {
+				if (
+					override[key]
+					&& typeof override[key] === 'object'
+					&& !Array.isArray(override[key])
+					&& base[key]
+					&& typeof base[key] === 'object'
+					&& !Array.isArray(base[key])
+				) {
+					result[key] = this.deepMerge(base[key], override[key])
+				} else {
+					result[key] = override[key]
+				}
+			}
+			return result
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-chart-widget {
+	width: 100%;
+	min-height: 100px;
+}
+
+.cn-chart-widget__fallback {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 150px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-chart-widget__error {
+	font-size: 14px;
+	margin: 0;
+}
+</style>

package/src/components/CnChartWidget/index.js

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

package/src/components/CnConfigurationCard/CnConfigurationCard.vue

@@ -1,77 +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>
+<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

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

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'