@conduction/nextcloud-vue 0.1.0-beta.1 → 0.1.0-beta.11

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -0,0 +1,346 @@
+<!--
+  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"
+			ref="chart"
+			: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>
+import { translate as t } from '@nextcloud/l10n'
+import VueApexCharts from 'vue-apexcharts'
+
+/**
+ * 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: () => t('nextcloud-vue', '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)
+		},
+	},
+
+	created() {
+		this.chartComponent = VueApexCharts
+	},
+
+	mounted() {
+		if (typeof ResizeObserver === 'undefined') return
+		this._lastWidth = this.$el.offsetWidth
+		this._resizeTimer = null
+		this._resizeObserver = new ResizeObserver((entries) => {
+			const newWidth = entries[0]?.contentRect?.width ?? this.$el.offsetWidth
+			if (newWidth === this._lastWidth) return
+			this._lastWidth = newWidth
+			clearTimeout(this._resizeTimer)
+			this._resizeTimer = setTimeout(() => {
+				if (this.$refs.chart?.refresh) {
+					this.$refs.chart.refresh()
+				}
+			}, 100)
+		})
+		this._resizeObserver.observe(this.$el)
+	},
+
+	beforeDestroy() {
+		clearTimeout(this._resizeTimer)
+		if (this._resizeObserver) {
+			this._resizeObserver.disconnect()
+			this._resizeObserver = 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/CnContextMenu/CnContextMenu.vue

@@ -0,0 +1,142 @@
+<template>
+	<NcActions
+		:open.sync="internalOpen"
+		:manual-open="true"
+		:force-menu="true"
+		class="cn-context-menu"
+		container="body"
+		@close="onClose">
+		<!-- Dynamic actions from array prop -->
+		<NcActionButton
+			v-for="action in actions"
+			:key="action.label"
+			:disabled="resolveDisabled(action)"
+			:class="{ 'cn-row-action--destructive': action.destructive }"
+			close-after-click
+			@click="onAction(action)">
+			<template v-if="action.icon" #icon>
+				<component :is="action.icon" :size="20" />
+			</template>
+			{{ action.label }}
+		</NcActionButton>
+
+		<!-- Custom content slot (for hardcoded buttons) -->
+		<slot />
+	</NcActions>
+</template>
+
+<script>
+import { NcActions, NcActionButton } from '@nextcloud/vue'
+
+/**
+ * CnContextMenu — Right-click context menu wrapper around NcActions.
+ *
+ * Provides a pre-configured NcActions instance that positions itself at the
+ * cursor via the `useContextMenu` composable's CSS custom properties. Accepts
+ * an `actions` array for the common dynamic case (like CnRowActions), and a
+ * default slot for hardcoded NcActionButton content.
+ *
+ * Pair with `useContextMenu()` for state management (open/close, target item,
+ * cursor positioning). The composable handles the DOM attributes; this component
+ * handles the NcActions template boilerplate.
+ *
+ * @example Dynamic actions (CnIndexPage pattern)
+ * <CnContextMenu
+ *   :open.sync="contextMenuOpen"
+ *   :actions="mergedActions"
+ *   :target-item="contextMenuRow"
+ *   @action="$emit('action', $event)"
+ *   @close="closeContextMenu" />
+ *
+ * @example Custom buttons via slot (Doriath pattern)
+ * <CnContextMenu
+ *   :open.sync="contextMenuOpen"
+ *   @close="closeContextMenu">
+ *   <NcActionButton close-after-click @click="onRename">
+ *     <template #icon><PencilIcon :size="20" /></template>
+ *     Rename
+ *   </NcActionButton>
+ * </CnContextMenu>
+ */
+export default {
+	name: 'CnContextMenu',
+
+	components: {
+		NcActions,
+		NcActionButton,
+	},
+
+	props: {
+		/**
+		 * Whether the context menu is open. Use with `.sync` modifier.
+		 * Bind to `useContextMenu().isOpen`.
+		 */
+		open: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Action definitions rendered as NcActionButton items.
+		 * Same format as CnRowActions: `{ label, icon?, handler?, disabled?, destructive? }`.
+		 * When empty, only the default slot content is rendered.
+		 * @type {Array<{label: string, icon?: Component, handler?: Function, disabled?: boolean | Function, destructive?: boolean}>}
+		 */
+		actions: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * The right-clicked item (row, folder, etc.). Passed to action `handler`
+		 * and `disabled` callbacks, and included in the `action` event payload.
+		 * Bind to `useContextMenu().targetItem`.
+		 */
+		targetItem: {
+			type: [Object, String, Number],
+			default: null,
+		},
+	},
+
+	data() {
+		return {
+			internalOpen: this.open,
+		}
+	},
+
+	watch: {
+		open(val) {
+			this.internalOpen = val
+		},
+		internalOpen(val) {
+			this.$emit('update:open', val)
+		},
+	},
+
+	methods: {
+		resolveDisabled(action) {
+			if (typeof action.disabled === 'function') {
+				return action.disabled(this.targetItem)
+			}
+			return !!action.disabled
+		},
+
+		onAction(action) {
+			if (action.handler && typeof action.handler === 'function') {
+				action.handler(this.targetItem)
+			}
+			this.$emit('action', { action: action.label, row: this.targetItem })
+		},
+
+		onClose() {
+			this.internalOpen = false
+			this.$emit('close')
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-context-menu {
+	/* Hide the NcActions trigger button — menu opens only via right-click */
+	display: none;
+}
+</style>

package/src/components/CnContextMenu/index.js

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