@conduction/nextcloud-vue 0.1.0-beta.1

package/src/components/CnKpiGrid/CnKpiGrid.vue

@@ -0,0 +1,89 @@
+<template>
+	<div class="cn-kpi-grid" :class="gridClasses">
+		<slot />
+	</div>
+</template>
+
+<script>
+/**
+ * CnKpiGrid — Responsive grid layout for KPI/stats cards.
+ *
+ * Wraps CnStatsBlock components in a responsive CSS grid. Supports
+ * 2, 3, or 4 column layouts that adapt to screen size.
+ *
+ * @example 4-column dashboard (default)
+ * <CnKpiGrid>
+ *   <CnStatsBlock title="Cases" :count="42" :icon="BriefcaseOutline" variant="primary" />
+ *   <CnStatsBlock title="Contacts" :count="128" :icon="AccountGroup" variant="success" />
+ *   <CnStatsBlock title="Tasks" :count="7" :icon="ClipboardCheck" variant="warning" />
+ *   <CnStatsBlock title="Overdue" :count="3" :icon="AlertCircle" variant="error" />
+ * </CnKpiGrid>
+ *
+ * @example 2-column layout
+ * <CnKpiGrid :columns="2">
+ *   <CnStatsBlock title="Open" :count="15" />
+ *   <CnStatsBlock title="Closed" :count="42" />
+ * </CnKpiGrid>
+ */
+export default {
+	name: 'CnKpiGrid',
+
+	props: {
+		/** Number of columns at max width: 2, 3, or 4 */
+		columns: {
+			type: Number,
+			default: 4,
+			validator: (v) => [2, 3, 4].includes(v),
+		},
+	},
+
+	computed: {
+		gridClasses() {
+			return {
+				[`cn-kpi-grid--cols-${this.columns}`]: true,
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-kpi-grid {
+	display: grid;
+	gap: 16px;
+	margin-bottom: 24px;
+}
+
+.cn-kpi-grid--cols-2 {
+	grid-template-columns: repeat(2, 1fr);
+}
+
+.cn-kpi-grid--cols-3 {
+	grid-template-columns: repeat(3, 1fr);
+}
+
+.cn-kpi-grid--cols-4 {
+	grid-template-columns: repeat(4, 1fr);
+}
+
+/* Responsive breakpoints */
+@media (max-width: 1200px) {
+	.cn-kpi-grid--cols-4 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (max-width: 900px) {
+	.cn-kpi-grid--cols-3 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
+
+@media (max-width: 600px) {
+	.cn-kpi-grid--cols-2,
+	.cn-kpi-grid--cols-3,
+	.cn-kpi-grid--cols-4 {
+		grid-template-columns: 1fr;
+	}
+}
+</style>

package/src/components/CnKpiGrid/index.js

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

package/src/components/CnListViewLayout/CnListViewLayout.vue

@@ -0,0 +1,80 @@
+<template>
+	<div class="cn-list-layout">
+		<!-- Header -->
+		<div class="cn-list-layout__header">
+			<div class="cn-list-layout__title">
+				<h2>{{ title }}</h2>
+				<span v-if="totalItems > 0" class="cn-list-layout__count">({{ totalItems }})</span>
+			</div>
+			<div class="cn-list-layout__actions">
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<!-- Filters slot -->
+		<slot name="filters" />
+
+		<!-- Loading state -->
+		<div v-if="loading" class="cn-loading-container">
+			<NcLoadingIcon :size="32" />
+		</div>
+
+		<!-- Main content (table area) -->
+		<template v-else>
+			<slot />
+		</template>
+
+		<!-- Pagination slot -->
+		<slot name="pagination" />
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+
+/**
+ * CnListViewLayout — Full list page layout wrapping header, filters, table, and pagination.
+ *
+ * Provides the standard page structure used by every list view: a header with
+ * title + action buttons, a filter/search area, the main content (table), and pagination.
+ *
+ * @example
+ * <CnListViewLayout title="Clients" :total-items="clients.length" :loading="isLoading">
+ *   <template #actions>
+ *     <NcButton type="primary" @click="createClient">New client</NcButton>
+ *   </template>
+ *   <template #filters>
+ *     <CnFilterBar ... />
+ *   </template>
+ *   <CnDataTable :columns="columns" :rows="clients" />
+ *   <template #pagination>
+ *     <CnPagination ... />
+ *   </template>
+ * </CnListViewLayout>
+ */
+export default {
+	name: 'CnListViewLayout',
+
+	components: {
+		NcLoadingIcon,
+	},
+
+	props: {
+		/** Page title */
+		title: {
+			type: String,
+			required: true,
+		},
+		/** Total items count (shown next to title) */
+		totalItems: {
+			type: Number,
+			default: 0,
+		},
+		/** Whether data is loading */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+	},
+}
+</script>

package/src/components/CnListViewLayout/index.js

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

package/src/components/CnMassActionBar/CnMassActionBar.vue

@@ -0,0 +1,160 @@
+<template>
+	<NcActions
+		v-if="count > 0"
+		:menu-name="menuLabel"
+		:inline="0">
+		<template #icon>
+			<TuneVariant :size="20" />
+		</template>
+
+		<!-- Built-in: Import -->
+		<NcActionButton
+			v-if="showImport"
+			@click="$emit('mass-import')">
+			<template #icon>
+				<Import :size="20" />
+			</template>
+			{{ importLabel }}
+		</NcActionButton>
+
+		<!-- Built-in: Export -->
+		<NcActionButton
+			v-if="showExport"
+			@click="$emit('mass-export')">
+			<template #icon>
+				<Export :size="20" />
+			</template>
+			{{ exportLabel }}
+		</NcActionButton>
+
+		<!-- Built-in: Copy -->
+		<NcActionButton
+			v-if="showCopy"
+			@click="$emit('mass-copy')">
+			<template #icon>
+				<ContentCopy :size="20" />
+			</template>
+			{{ copyLabel }}
+		</NcActionButton>
+
+		<!-- Built-in: Delete -->
+		<NcActionButton
+			v-if="showDelete"
+			@click="$emit('mass-delete')">
+			<template #icon>
+				<TrashCanOutline :size="20" />
+			</template>
+			{{ deleteLabel }}
+		</NcActionButton>
+
+		<!-- Custom actions slot -->
+		<slot name="actions" :count="count" :selected-ids="selectedIds" />
+	</NcActions>
+</template>
+
+<script>
+import { NcActions, NcActionButton } from '@nextcloud/vue'
+import TuneVariant from 'vue-material-design-icons/TuneVariant.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'
+
+/**
+ * CnMassActionBar — Mass action dropdown button for selected items.
+ *
+ * Renders as a single "Mass Actions (N)" dropdown button with built-in
+ * Import, Export, Copy, and Delete actions plus a slot for custom actions.
+ * Place this in the header/action bar of your index page.
+ *
+ * ## Adding Custom Mass Actions
+ *
+ * Use the `#actions` scoped slot to add app-specific mass actions.
+ * Slot content should use `NcActionButton` components:
+ *
+ * ```vue
+ * <CnMassActionBar :selected-ids="selectedIds" :count="selectedIds.length">
+ *   <template #actions="{ count, selectedIds }">
+ *     <NcActionButton @click="migrateSelected(selectedIds)">
+ *       <template #icon><SwapHorizontal :size="20" /></template>
+ *       Migrate
+ *     </NcActionButton>
+ *     <NcActionButton @click="publishSelected(selectedIds)">
+ *       <template #icon><Publish :size="20" /></template>
+ *       Publish
+ *     </NcActionButton>
+ *   </template>
+ * </CnMassActionBar>
+ * ```
+ *
+ * @example Basic usage
+ * <CnMassActionBar
+ *   :selected-ids="selectedIds"
+ *   :count="selectedIds.length"
+ *   @mass-copy="openCopyDialog"
+ *   @mass-delete="openDeleteDialog"
+ *   @mass-import="openImportDialog"
+ *   @mass-export="openExportDialog" />
+ */
+export default {
+	name: 'CnMassActionBar',
+
+	components: {
+		NcActions,
+		NcActionButton,
+		TuneVariant,
+		ContentCopy,
+		TrashCanOutline,
+		Import,
+		Export,
+	},
+
+	props: {
+		/** Array of selected item IDs */
+		selectedIds: {
+			type: Array,
+			default: () => [],
+		},
+		/** Number of selected items */
+		count: {
+			type: Number,
+			default: 0,
+		},
+		/** Whether to show the built-in Import action */
+		showImport: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in Export action */
+		showExport: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in Copy action */
+		showCopy: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in Delete action */
+		showDelete: {
+			type: Boolean,
+			default: true,
+		},
+		/** Label template for the menu button. Use {count} for the count. */
+		menuLabelTemplate: {
+			type: String,
+			default: 'Mass Actions ({count})',
+		},
+		importLabel: { type: String, default: 'Import' },
+		exportLabel: { type: String, default: 'Export' },
+		copyLabel: { type: String, default: 'Copy' },
+		deleteLabel: { type: String, default: 'Delete' },
+	},
+
+	computed: {
+		menuLabel() {
+			return this.menuLabelTemplate.replace('{count}', String(this.count))
+		},
+	},
+}
+</script>

package/src/components/CnMassActionBar/index.js

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

package/src/components/CnMassCopyDialog/CnMassCopyDialog.vue

@@ -0,0 +1,320 @@
+<template>
+	<NcDialog
+		:name="dialogTitle"
+		size="normal"
+		:can-close="!loading"
+		@closing="$emit('close')">
+		<!-- Review phase -->
+		<div v-if="result === null" class="cn-mass-copy__review">
+			<div class="cn-mass-copy__pattern">
+				<label for="cn-mass-copy-pattern">{{ patternLabel }}</label>
+				<NcSelect
+					input-id="cn-mass-copy-pattern"
+					:options="patternOptions"
+					:value="selectedPattern"
+					:clearable="false"
+					@input="onPatternChange" />
+			</div>
+
+			<div class="cn-mass-copy__list">
+				<div
+					v-for="item in localItems"
+					:key="item.id"
+					class="cn-mass-copy__item">
+					<div class="cn-mass-copy__item-names">
+						<span class="cn-mass-copy__item-original">{{ getItemName(item) }}</span>
+						<span class="cn-mass-copy__item-arrow">&rarr;</span>
+						<span class="cn-mass-copy__item-new">{{ getNewName(item) }}</span>
+					</div>
+					<NcButton
+						type="tertiary"
+						:aria-label="removeLabel"
+						@click="removeItem(item.id)">
+						<template #icon>
+							<Close :size="16" />
+						</template>
+					</NcButton>
+				</div>
+			</div>
+
+			<p v-if="localItems.length === 0" class="cn-mass-copy__empty">
+				{{ emptyText }}
+			</p>
+		</div>
+
+		<!-- Result phase -->
+		<div v-else class="cn-mass-copy__result">
+			<NcNoteCard v-if="result.success" type="success">
+				{{ successText }}
+			</NcNoteCard>
+			<NcNoteCard v-if="result.error" type="error">
+				{{ result.error }}
+			</NcNoteCard>
+		</div>
+
+		<template #actions>
+			<NcButton @click="$emit('close')">
+				{{ result === null ? cancelLabel : closeLabel }}
+			</NcButton>
+			<NcButton
+				v-if="result === null"
+				type="primary"
+				:disabled="loading || localItems.length === 0"
+				@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'
+import Close from 'vue-material-design-icons/Close.vue'
+
+/**
+ * CnMassCopyDialog — Two-phase mass copy confirmation dialog.
+ *
+ * Phase 1 (review): Shows the items to be copied with a naming pattern
+ * selector and real-time preview of new names. Phase 2 (result): Shows
+ * success or error.
+ *
+ * The dialog does NOT perform the copy itself — it emits a `confirm` event
+ * with the items and naming function. The parent performs the actual API
+ * call and calls `setResult()` via a ref.
+ *
+ * @example
+ * <CnMassCopyDialog
+ *   v-if="showCopyDialog"
+ *   ref="copyDialog"
+ *   :items="selectedObjects"
+ *   :name-field="'title'"
+ *   @confirm="onCopyConfirm"
+ *   @close="showCopyDialog = false" />
+ *
+ * // In methods:
+ * async onCopyConfirm({ ids, getName }) {
+ *   try {
+ *     for (const item of this.selectedObjects) {
+ *       await store.copyObject(item.id, { title: getName(item) })
+ *     }
+ *     this.$refs.copyDialog.setResult({ success: true })
+ *   } catch (e) {
+ *     this.$refs.copyDialog.setResult({ error: e.message })
+ *   }
+ * }
+ */
+export default {
+	name: 'CnMassCopyDialog',
+
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		NcSelect,
+		ContentCopy,
+		Close,
+	},
+
+	props: {
+		/** Items to copy. Each must have an `id` property. */
+		items: {
+			type: Array,
+			required: true,
+		},
+		/** Property name used for display (e.g., 'title', 'name') */
+		nameField: {
+			type: String,
+			default: 'title',
+		},
+		/** Dialog title */
+		dialogTitle: {
+			type: String,
+			default: 'Copy Items',
+		},
+		/** Label for the naming pattern selector */
+		patternLabel: {
+			type: String,
+			default: 'Naming pattern',
+		},
+		/** Text when all items removed from list */
+		emptyText: {
+			type: String,
+			default: 'No items selected for copying.',
+		},
+		/** Success message */
+		successText: {
+			type: String,
+			default: 'Items successfully copied.',
+		},
+		cancelLabel: { type: String, default: 'Cancel' },
+		closeLabel: { type: String, default: 'Close' },
+		confirmLabel: { type: String, default: 'Copy' },
+		removeLabel: { type: String, default: 'Remove from list' },
+	},
+
+	data() {
+		return {
+			localItems: [...this.items],
+			loading: false,
+			result: null,
+			closeTimeout: null,
+			selectedPattern: { id: 'copy-of', label: 'Copy of {name}' },
+		}
+	},
+
+	computed: {
+		patternOptions() {
+			return [
+				{ id: 'copy-of', label: 'Copy of {name}' },
+				{ id: 'name-copy', label: '{name} - Copy' },
+				{ id: 'name-parens', label: '{name} (Copy)' },
+			]
+		},
+	},
+
+	watch: {
+		items(val) {
+			this.localItems = [...val]
+		},
+	},
+
+	beforeDestroy() {
+		if (this.closeTimeout) clearTimeout(this.closeTimeout)
+	},
+
+	methods: {
+		getItemName(item) {
+			return item[this.nameField] || item.name || item.title || item.id
+		},
+
+		getNewName(item) {
+			const name = this.getItemName(item)
+			return this.applyPattern(name, this.selectedPattern.id)
+		},
+
+		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}`
+			}
+		},
+
+		onPatternChange(option) {
+			this.selectedPattern = option
+		},
+
+		removeItem(id) {
+			this.localItems = this.localItems.filter((i) => i.id !== id)
+		},
+
+		executeCopy() {
+			this.loading = true
+			const ids = this.localItems.map((i) => i.id)
+			const patternId = this.selectedPattern.id
+			/**
+			 * @event confirm Emitted when the user confirms copying.
+			 * Payload: { ids, getName } where getName(item) returns the new name.
+			 */
+			this.$emit('confirm', {
+				ids,
+				getName: (item) => {
+					const name = this.getItemName(item)
+					return this.applyPattern(name, patternId)
+				},
+			})
+		},
+
+		/**
+		 * 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-mass-copy__pattern {
+	margin-bottom: 16px;
+}
+
+.cn-mass-copy__pattern label {
+	display: block;
+	font-weight: 600;
+	margin-bottom: 4px;
+}
+
+.cn-mass-copy__list {
+	max-height: 300px;
+	overflow-y: auto;
+}
+
+.cn-mass-copy__item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-mass-copy__item:last-child {
+	border-bottom: none;
+}
+
+.cn-mass-copy__item-names {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	overflow: hidden;
+	flex: 1;
+}
+
+.cn-mass-copy__item-original {
+	color: var(--color-text-maxcontrast);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-mass-copy__item-arrow {
+	flex-shrink: 0;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-mass-copy__item-new {
+	font-weight: 500;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-mass-copy__empty {
+	text-align: center;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+	padding: 20px;
+}
+</style>

package/src/components/CnMassCopyDialog/index.js

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