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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@conduction/nextcloud-vue",
-	"version": "0.1.0-beta.1",
+	"version": "0.1.0-beta.3",
 	"description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
 	"license": "EUPL-1.2",
 	"author": "Conduction B.V. <info@conduction.nl>",
@@ -10,11 +10,10 @@
 	"types": "src/types/index.d.ts",
 	"files": [
 		"dist/",
-		"src/"
-	],
-	"sideEffects": [
-		"*.css"
+		"src/",
+		"css/"
 	],
+	"sideEffects": true,
 	"scripts": {
 		"build": "rollup -c",
 		"dev": "rollup -c -w",

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -0,0 +1,225 @@
+<template>
+	<div class="cn-actions-bar">
+		<div class="cn-actions-bar__info">
+			<span v-if="pagination && pagination.total > 0" class="cn-actions-bar__count">
+				{{ countText }}
+			</span>
+		</div>
+		<div class="cn-actions-bar__actions">
+			<!-- View mode toggle (Cards / Table) -->
+			<div v-if="showViewToggle" class="cn-actions-bar__view-toggle">
+				<NcCheckboxRadioSwitch
+					:checked="viewMode"
+					:button-variant="true"
+					value="cards"
+					name="cn_view_mode"
+					type="radio"
+					button-variant-grouped="horizontal"
+					@update:checked="$emit('view-mode-change', 'cards')">
+					Cards
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch
+					:checked="viewMode"
+					:button-variant="true"
+					value="table"
+					name="cn_view_mode"
+					type="radio"
+					button-variant-grouped="horizontal"
+					@update:checked="$emit('view-mode-change', 'table')">
+					Table
+				</NcCheckboxRadioSwitch>
+			</div>
+
+			<!-- Add button (primary) -->
+			<NcButton type="primary" @click="$emit('add')">
+				<template #icon>
+					<CnIcon v-if="addIcon" :name="addIcon" :size="20" />
+					<Plus v-else :size="20" />
+				</template>
+				{{ addLabel }}
+			</NcButton>
+
+			<!-- Actions menu (Refresh, Import, Export, mass actions) -->
+			<NcActions
+				:force-name="true"
+				:inline="0"
+				menu-name="Actions">
+				<NcActionButton @click="$emit('refresh')">
+					<template #icon>
+						<Refresh :size="20" />
+					</template>
+					Refresh
+				</NcActionButton>
+
+				<!-- Custom primary action items (overflow) -->
+				<slot name="action-items" />
+
+				<!-- Separator between primary and mass actions -->
+				<NcActionSeparator v-if="selectable" />
+
+				<!-- Mass actions (overflow) -->
+				<NcActionButton
+					v-if="showMassImport"
+					@click="$emit('show-import')">
+					<template #icon>
+						<Import :size="20" />
+					</template>
+					Import
+				</NcActionButton>
+				<NcActionButton
+					v-if="showMassExport"
+					@click="$emit('show-export')">
+					<template #icon>
+						<Export :size="20" />
+					</template>
+					Export
+				</NcActionButton>
+				<NcActionButton
+					v-if="showMassCopy"
+					:disabled="selectedIds.length < 1"
+					:title="selectedIds.length < 1 ? 'Select 1 or more items to copy' : ''"
+					@click="$emit('show-copy')">
+					<template #icon>
+						<ContentCopy :size="20" />
+					</template>
+					Copy selected
+				</NcActionButton>
+				<NcActionButton
+					v-if="showMassDelete"
+					:disabled="selectedIds.length < 1"
+					:title="selectedIds.length < 1 ? 'Select 1 or more items to delete' : ''"
+					@click="$emit('show-delete')">
+					<template #icon>
+						<TrashCanOutline :size="20" />
+					</template>
+					Delete selected
+				</NcActionButton>
+
+				<!-- Custom mass actions (overflow) -->
+				<slot name="mass-actions" :count="selectedIds.length" :selected-ids="selectedIds" />
+			</NcActions>
+
+			<slot name="header-actions" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcActions, NcActionButton, NcActionSeparator, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { CnIcon } from '../CnIcon/index.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Refresh from 'vue-material-design-icons/Refresh.vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import Import from 'vue-material-design-icons/Import.vue'
+import Export from 'vue-material-design-icons/Export.vue'
+
+/**
+ * CnActionsBar — Reusable actions toolbar with count, mass actions, and primary actions.
+ *
+ * @example
+ * <CnActionsBar
+ *   :pagination="pagination"
+ *   :object-count="items.length"
+ *   add-label="Add Client"
+ *   add-icon="AccountGroup"
+ *   @add="createNew"
+ *   @refresh="reload" />
+ */
+export default {
+	name: 'CnActionsBar',
+
+	components: {
+		NcActions,
+		NcActionButton,
+		NcActionSeparator,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		CnIcon,
+		Plus,
+		Refresh,
+		ContentCopy,
+		TrashCanOutline,
+		Import,
+		Export,
+	},
+
+	props: {
+		/** Pagination state: { total, page, pages, limit } */
+		pagination: {
+			type: Object,
+			default: null,
+		},
+		/** Number of currently visible objects (for "Showing X of Y") */
+		objectCount: {
+			type: Number,
+			default: 0,
+		},
+		/** Whether rows/cards can be selected */
+		selectable: {
+			type: Boolean,
+			default: true,
+		},
+		/** Currently selected IDs */
+		selectedIds: {
+			type: Array,
+			default: () => [],
+		},
+		/** Label for the Add button */
+		addLabel: {
+			type: String,
+			default: 'Add',
+		},
+		/** MDI icon name for the Add button (e.g. 'AccountGroup'). Falls back to Plus icon. */
+		addIcon: {
+			type: String,
+			default: '',
+		},
+		/** How many action buttons to show inline (rest go in overflow dropdown) */
+		inlineActionCount: {
+			type: Number,
+			default: 2,
+		},
+		/** Whether to show the built-in mass Import action */
+		showMassImport: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in mass Export action */
+		showMassExport: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in mass Copy action */
+		showMassCopy: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in mass Delete action */
+		showMassDelete: {
+			type: Boolean,
+			default: true,
+		},
+		/** Current view mode: 'table' or 'cards' */
+		viewMode: {
+			type: String,
+			default: 'table',
+			validator: (v) => ['table', 'cards'].includes(v),
+		},
+		/** Whether to show the Cards/Table view toggle */
+		showViewToggle: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	computed: {
+		countText() {
+			if (!this.pagination) return ''
+			return `Showing ${this.objectCount} of ${this.pagination.total}`
+		},
+	},
+}
+</script>
+
+<!-- Styles in css/actions-bar.css -->

package/src/components/CnActionsBar/index.js

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

package/src/components/CnCopyDialog/CnCopyDialog.vue

@@ -0,0 +1,250 @@
+<template>
+	<NcDialog
+		:name="dialogTitle"
+		size="small"
+		:can-close="!loading"
+		@closing="$emit('close')">
+		<!-- Result phase -->
+		<div v-if="result !== null" class="cn-copy__result">
+			<NcNoteCard v-if="result.success" type="success">
+				{{ successText }}
+			</NcNoteCard>
+			<NcNoteCard v-if="result.error" type="error">
+				{{ result.error }}
+			</NcNoteCard>
+		</div>
+
+		<!-- Form phase -->
+		<div v-else class="cn-copy__form">
+			<div class="cn-copy__pattern">
+				<label for="cn-copy-pattern">{{ patternLabel }}</label>
+				<NcSelect
+					input-id="cn-copy-pattern"
+					:options="patternOptions"
+					:value="selectedPattern"
+					:clearable="false"
+					@input="selectedPattern = $event" />
+			</div>
+
+			<div class="cn-copy__preview">
+				<div class="cn-copy__preview-row">
+					<span class="cn-copy__preview-original">{{ itemName }}</span>
+					<span class="cn-copy__preview-arrow">&rarr;</span>
+					<span class="cn-copy__preview-new">{{ newName }}</span>
+				</div>
+			</div>
+		</div>
+
+		<template #actions>
+			<NcButton @click="$emit('close')">
+				{{ result !== null ? closeLabel : cancelLabel }}
+			</NcButton>
+			<NcButton
+				v-if="result === null"
+				type="primary"
+				:disabled="loading"
+				@click="executeCopy">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<ContentCopy v-else :size="20" />
+				</template>
+				{{ confirmLabel }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+
+/**
+ * CnCopyDialog — Single-item copy confirmation dialog with naming pattern.
+ *
+ * Two-phase UI: form (with name preview) then result. The dialog does NOT
+ * perform the copy itself — it emits a `confirm` event with the item ID
+ * and the new name. The parent performs the actual API call and calls
+ * `setResult()` via a ref.
+ *
+ * @example
+ * <CnCopyDialog
+ *   v-if="showCopyDialog"
+ *   ref="copyDialog"
+ *   :item="itemToCopy"
+ *   @confirm="onCopyConfirm"
+ *   @close="showCopyDialog = false" />
+ *
+ * // In methods:
+ * async onCopyConfirm({ id, newName }) {
+ *   try {
+ *     await store.copyItem(id, { title: newName })
+ *     this.$refs.copyDialog.setResult({ success: true })
+ *   } catch (e) {
+ *     this.$refs.copyDialog.setResult({ error: e.message })
+ *   }
+ * }
+ */
+export default {
+	name: 'CnCopyDialog',
+
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		NcSelect,
+		ContentCopy,
+	},
+
+	props: {
+		/** The item to copy. Must have an `id` property. */
+		item: {
+			type: Object,
+			required: true,
+		},
+		/** Property name used for display (e.g., 'title', 'name') */
+		nameField: {
+			type: String,
+			default: 'title',
+		},
+		/** Dialog title */
+		dialogTitle: {
+			type: String,
+			default: 'Copy Item',
+		},
+		/** Label for the naming pattern selector */
+		patternLabel: {
+			type: String,
+			default: 'Naming pattern',
+		},
+		/** Success message */
+		successText: {
+			type: String,
+			default: 'Item successfully copied.',
+		},
+		cancelLabel: { type: String, default: 'Cancel' },
+		closeLabel: { type: String, default: 'Close' },
+		confirmLabel: { type: String, default: 'Copy' },
+	},
+
+	data() {
+		return {
+			loading: false,
+			result: null,
+			closeTimeout: null,
+			selectedPattern: { id: 'copy-of', label: 'Copy of {name}' },
+		}
+	},
+
+	computed: {
+		itemName() {
+			return this.item[this.nameField] || this.item.name || this.item.title || this.item.id
+		},
+
+		patternOptions() {
+			return [
+				{ id: 'copy-of', label: 'Copy of {name}' },
+				{ id: 'name-copy', label: '{name} - Copy' },
+				{ id: 'name-parens', label: '{name} (Copy)' },
+			]
+		},
+
+		newName() {
+			return this.applyPattern(this.itemName, this.selectedPattern.id)
+		},
+	},
+
+	beforeDestroy() {
+		if (this.closeTimeout) clearTimeout(this.closeTimeout)
+	},
+
+	/**
+	 * @event confirm Emitted when the user confirms copying. Payload: `{ id, newName }`.
+	 * @event close Emitted when the dialog should be closed (cancel, close button, or auto-close after success).
+	 */
+
+	methods: {
+		applyPattern(name, patternId) {
+			switch (patternId) {
+			case 'copy-of':
+				return `Copy of ${name}`
+			case 'name-copy':
+				return `${name} - Copy`
+			case 'name-parens':
+				return `${name} (Copy)`
+			default:
+				return `Copy of ${name}`
+			}
+		},
+
+		executeCopy() {
+			this.loading = true
+			this.$emit('confirm', {
+				id: this.item.id,
+				newName: this.newName,
+			})
+		},
+
+		/**
+		 * Set the result of the copy operation. Call this from the parent
+		 * after the API call completes.
+		 *
+		 * @param {{ success?: boolean, error?: string }} resultData
+		 * @public
+		 */
+		setResult(resultData) {
+			this.loading = false
+			this.result = resultData
+			if (resultData.success) {
+				this.closeTimeout = setTimeout(() => {
+					this.$emit('close')
+				}, 2000)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-copy__pattern {
+	margin-bottom: 16px;
+}
+
+.cn-copy__pattern label {
+	display: block;
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+
+.cn-copy__preview {
+	margin-top: 12px;
+}
+
+.cn-copy__preview-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 12px;
+	background-color: var(--color-background-hover);
+	border-radius: var(--border-radius);
+}
+
+.cn-copy__preview-original {
+	color: var(--color-text-maxcontrast);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-copy__preview-arrow {
+	flex-shrink: 0;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-copy__preview-new {
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>

package/src/components/CnCopyDialog/index.js

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

package/src/components/CnDataTable/CnDataTable.vue

@@ -118,11 +118,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="[

package/src/components/CnDeleteDialog/CnDeleteDialog.vue

@@ -0,0 +1,170 @@
+<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 { 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',
+		},
+		/** Dialog title */
+		dialogTitle: {
+			type: String,
+			default: 'Delete Item',
+		},
+		/** Warning text. Use `{name}` as placeholder for the item name. */
+		warningText: {
+			type: String,
+			default: 'Are you sure you want to permanently delete "{name}"? This action cannot be undone.',
+		},
+		/** Success message */
+		successText: {
+			type: String,
+			default: 'Item successfully deleted.',
+		},
+		cancelLabel: { type: String, default: 'Cancel' },
+		closeLabel: { type: String, default: 'Close' },
+		confirmLabel: { type: String, default: 'Delete' },
+	},
+
+	data() {
+		return {
+			loading: false,
+			result: null,
+			closeTimeout: null,
+		}
+	},
+
+	computed: {
+		itemName() {
+			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
+		 * @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'