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

package/src/components/CnIndexSidebar/index.js

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

package/src/components/CnItemCard/CnItemCard.vue

@@ -0,0 +1,132 @@
+<template>
+	<div class="cn-item-card" @click="$emit('click', $event)">
+		<div class="cn-item-card__header">
+			<div class="cn-item-card__title-row">
+				<slot name="icon">
+					<component :is="icon" v-if="icon" :size="iconSize" />
+				</slot>
+				<div class="cn-item-card__title-content">
+					<h3 class="cn-item-card__title">{{ title }}</h3>
+					<span v-if="subtitle" class="cn-item-card__subtitle">{{ subtitle }}</span>
+				</div>
+			</div>
+			<div v-if="$slots.actions || $scopedSlots.actions" class="cn-item-card__actions">
+				<slot name="actions" />
+			</div>
+		</div>
+		<div v-if="$slots.default || $scopedSlots.default" class="cn-item-card__content">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnItemCard — Compact card for displaying an item in a sidebar list.
+ *
+ * Provides a card with a header (icon + title + optional actions) and
+ * a flexible content area. Designed for use in sidebar lists such as
+ * schema listings, source listings, etc.
+ *
+ * @example Basic usage
+ * <CnItemCard title="My Schema" :icon="FileCodeOutline">
+ *   <p>Schema content here</p>
+ * </CnItemCard>
+ *
+ * @example With actions and stats
+ * <CnItemCard title="My Schema" :icon="FileCodeOutline" subtitle="v1.0">
+ *   <template #actions>
+ *     <NcActions>
+ *       <NcActionButton @click="edit">Edit</NcActionButton>
+ *     </NcActions>
+ *   </template>
+ *   <CnKpiGrid :columns="2">
+ *     <CnStatsBlock title="Objects" :count="42" />
+ *     <CnStatsBlock title="Size" :count="0" :breakdown="{ size: '1.2 MB' }" />
+ *   </CnKpiGrid>
+ * </CnItemCard>
+ */
+export default {
+	name: 'CnItemCard',
+
+	props: {
+		/** Card title */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Optional subtitle below the title */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+		/** Icon component (e.g., imported MDI icon) */
+		icon: {
+			type: [Object, Function],
+			default: null,
+		},
+		/** Icon size in pixels */
+		iconSize: {
+			type: Number,
+			default: 20,
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-item-card {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 10px);
+	padding: 12px;
+	margin-bottom: 12px;
+}
+
+.cn-item-card:last-child {
+	margin-bottom: 0;
+}
+
+.cn-item-card__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.cn-item-card__title-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	flex: 1;
+}
+
+.cn-item-card__title-content {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.cn-item-card__title {
+	margin: 0;
+	font-size: 1em;
+	font-weight: 600;
+	color: var(--color-main-text);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-item-card__subtitle {
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-item-card__actions {
+	flex-shrink: 0;
+}
+
+.cn-item-card__content {
+	margin-top: 8px;
+}
+</style>

package/src/components/CnItemCard/index.js

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

package/src/components/CnKpiGrid/CnKpiGrid.vue

@@ -1,89 +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>
+<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

@@ -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,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>
+<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

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