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

package/src/components/CnKpiGrid/CnKpiGrid.vue

@@ -1,89 +1,93 @@
-<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>
+<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),
+		},
+		gridClass: {
+			type: String,
+			default: '',
+		},
+	},
+
+	computed: {
+		gridClasses() {
+			return {
+				[`cn-kpi-grid--cols-${this.columns} ${this.gridClass}`]: 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

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

package/src/components/CnMassActionBar/CnMassActionBar.vue

@@ -1,160 +1,161 @@
-<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>
+<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 { translate as t } from '@nextcloud/l10n'
+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: () => t('nextcloud-vue', 'Mass actions ({count})'),
+		},
+		importLabel: { type: String, default: () => t('nextcloud-vue', 'Import') },
+		exportLabel: { type: String, default: () => t('nextcloud-vue', 'Export') },
+		copyLabel: { type: String, default: () => t('nextcloud-vue', 'Copy') },
+		deleteLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },
+	},
+
+	computed: {
+		menuLabel() {
+			return this.menuLabelTemplate.replace('{count}', String(this.count))
+		},
+	},
+}
+</script>

package/src/components/CnMassActionBar/index.js

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