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

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -0,0 +1,396 @@
+<!--
+  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="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"
+						:borderless="item.showTitle === false"
+						:flush="item.flush === true"
+						:buttons="getWidgetButtons(item)"
+						:style-config="item.styleConfig || {}">
+						<!-- Per-widget header actions (e.g. #widget-my-work-actions) -->
+						<template v-if="$slots['widget-' + item.widgetId + '-actions']" #actions>
+							<slot :name="'widget-' + item.widgetId + '-actions'" :item="item" :widget="getWidgetDef(item.widgetId)" />
+						</template>
+						<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>
@@ -63,7 +63,8 @@
 						isSelected(row) ? 'cn-table-row--selected' : '',
 						rowClass ? rowClass(row) : '',
 					]"
-					@click="$emit('row-click', row)">
+					@click="$emit('row-click', row)"
+					@contextmenu.prevent="$emit('row-context-menu', { row, event: $event })">
 					<!-- Checkbox -->
 					<td v-if="selectable" class="cn-table-col--checkbox" @click.stop>
 						<NcCheckboxRadioSwitch
@@ -101,6 +102,7 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { CnCellRenderer } from '../CnCellRenderer/index.js'
 import { columnsFromSchema } from '../../utils/schema.js'
@@ -118,11 +120,6 @@ import { columnsFromSchema } from '../../utils/schema.js'
  * (dates, booleans, UUIDs, enums, etc.). Scoped slots still override individual
  * columns when needed.
  *
- * NL Design tokens used:
- * - --nldesign-component-table-header-background-color
- * - --nldesign-component-table-row-hover-background-color
- * - --nldesign-component-table-border-color
- *
  * @example Manual columns (backwards compatible)
  * <CnDataTable
  *   :columns="[
@@ -203,11 +200,11 @@ export default {
 			type: String,
 			default: null,
 		},
-		/** Current sort order: 'asc' or 'desc' */
+		/** Current sort order: 'asc', 'desc', or null (no sort) */
 		sortOrder: {
 			type: String,
 			default: 'asc',
-			validator: (v) => ['asc', 'desc'].includes(v),
+			validator: (v) => v === null || ['asc', 'desc'].includes(v),
 		},
 		/** Whether rows can be selected with checkboxes */
 		selectable: {
@@ -227,7 +224,7 @@ export default {
 		/** Text shown when there are no rows */
 		emptyText: {
 			type: String,
-			default: 'No items found',
+			default: () => t('nextcloud-vue', 'No items found'),
 		},
 		/** Function returning CSS class(es) for a row: (row) => string|object */
 		rowClass: {
@@ -242,7 +239,7 @@ export default {
 		/** Text shown while loading */
 		loadingText: {
 			type: String,
-			default: 'Loading...',
+			default: () => t('nextcloud-vue', 'Loading...'),
 		},
 	},
 
@@ -320,15 +317,22 @@ export default {
 		 * @param {string} key Column key
 		 */
 		onSort(key) {
+			let newKey = key
 			let order = 'asc'
 			if (this.sortKey === key) {
-				order = this.sortOrder === 'asc' ? 'desc' : 'asc'
+				if (this.sortOrder === 'asc') {
+					order = 'desc'
+				} else {
+					// desc → disabled: clear sort entirely
+					newKey = null
+					order = null
+				}
 			}
 			/**
 			 * @event sort Emitted when a sortable column header is clicked.
-			 * @type {{ key: string, order: 'asc'|'desc' }}
+			 * @type {{ key: string|null, order: 'asc'|'desc'|null }}
 			 */
-			this.$emit('sort', { key, order })
+			this.$emit('sort', { key: newKey, order })
 		},
 
 		toggleSelect(row) {
@@ -342,9 +346,13 @@ export default {
 
 		toggleSelectAll() {
 			if (this.allSelected) {
-				this.$emit('select', [])
+				// Remove only current page IDs, preserving cross-page selections
+				const currentPageIds = new Set(this.rows.map((row) => row[this.rowKey]))
+				this.$emit('select', this.selectedIds.filter((id) => !currentPageIds.has(id)))
 			} else {
-				this.$emit('select', this.rows.map((row) => row[this.rowKey]))
+				// Add current page IDs to existing selections
+				const merged = new Set([...this.selectedIds, ...this.rows.map((row) => row[this.rowKey])])
+				this.$emit('select', [...merged])
 			}
 			/** @event select-all Emitted when select-all checkbox is toggled. */
 			this.$emit('select-all', !this.allSelected)

package/src/components/CnDataTable/index.js

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

package/src/components/CnDeleteDialog/CnDeleteDialog.vue

@@ -0,0 +1,177 @@
+<template>
+	<NcDialog
+		:name="dialogTitle"
+		size="small"
+		:can-close="!loading"
+		@closing="$emit('close')">
+		<!-- Result phase -->
+		<div v-if="result !== null" class="cn-delete__result">
+			<NcNoteCard v-if="result.success" type="success">
+				{{ successText }}
+			</NcNoteCard>
+			<NcNoteCard v-if="result.error" type="error">
+				{{ result.error }}
+			</NcNoteCard>
+		</div>
+
+		<!-- Confirm phase -->
+		<div v-else class="cn-delete__confirm">
+			<NcNoteCard type="warning">
+				{{ resolvedWarningText }}
+			</NcNoteCard>
+		</div>
+
+		<template #actions>
+			<NcButton @click="$emit('close')">
+				{{ result !== null ? closeLabel : cancelLabel }}
+			</NcButton>
+			<NcButton
+				v-if="result === null"
+				type="error"
+				:disabled="loading"
+				@click="executeDelete">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-else :size="20" />
+				</template>
+				{{ confirmLabel }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+
+/**
+ * CnDeleteDialog — Single-item delete confirmation dialog.
+ *
+ * Two-phase UI: confirm then result. The dialog does NOT perform the delete
+ * itself — it emits a `confirm` event with the item ID. The parent performs
+ * the actual API call and calls `setResult()` via a ref.
+ *
+ * @example
+ * <CnDeleteDialog
+ *   v-if="showDeleteDialog"
+ *   ref="deleteDialog"
+ *   :item="itemToDelete"
+ *   @confirm="onDeleteConfirm"
+ *   @close="showDeleteDialog = false" />
+ *
+ * // In methods:
+ * async onDeleteConfirm(id) {
+ *   try {
+ *     await store.deleteItem(id)
+ *     this.$refs.deleteDialog.setResult({ success: true })
+ *   } catch (e) {
+ *     this.$refs.deleteDialog.setResult({ error: e.message })
+ *   }
+ * }
+ */
+export default {
+	name: 'CnDeleteDialog',
+
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		TrashCanOutline,
+	},
+
+	props: {
+		/** The item to delete. Must have an `id` property. */
+		item: {
+			type: Object,
+			required: true,
+		},
+		/** Property name used for display (e.g., 'title', 'name') */
+		nameField: {
+			type: String,
+			default: 'title',
+		},
+		/** Optional function to format the item name. Receives the item, returns a string. Overrides nameField when provided. */
+		nameFormatter: {
+			type: Function,
+			default: null,
+		},
+		/** Dialog title */
+		dialogTitle: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Delete item'),
+		},
+		/** Warning text. Use `{name}` as placeholder for the item name. */
+		warningText: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Are you sure you want to permanently delete "{name}"? This action cannot be undone.'),
+		},
+		/** Success message */
+		successText: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Item successfully deleted.'),
+		},
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
+		confirmLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },
+	},
+
+	data() {
+		return {
+			loading: false,
+			result: null,
+			closeTimeout: null,
+		}
+	},
+
+	computed: {
+		itemName() {
+			if (this.nameFormatter) return this.nameFormatter(this.item)
+			return this.item[this.nameField] || this.item.name || this.item.title || this.item.id
+		},
+		resolvedWarningText() {
+			return this.warningText.replace('{name}', this.itemName)
+		},
+	},
+
+	beforeDestroy() {
+		if (this.closeTimeout) clearTimeout(this.closeTimeout)
+	},
+
+	/**
+	 * @event confirm Emitted when the user confirms deletion. Payload: the item ID.
+	 * @event close Emitted when the dialog should be closed (cancel, close button, or auto-close after success).
+	 */
+
+	methods: {
+		executeDelete() {
+			this.loading = true
+			this.$emit('confirm', this.item.id)
+		},
+
+		/**
+		 * Set the result of the delete operation. Call this from the parent
+		 * after the API call completes.
+		 *
+		 * @param {{ success?: boolean, error?: string }} resultData - Result data to pass to the dialog
+		 * @public
+		 */
+		setResult(resultData) {
+			this.loading = false
+			this.result = resultData
+			if (resultData.success) {
+				this.closeTimeout = setTimeout(() => {
+					this.$emit('close')
+				}, 2000)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-delete__confirm {
+	padding: 4px 0;
+}
+</style>

package/src/components/CnDeleteDialog/index.js

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