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

package/src/components/CnStatsBlock/index.js

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

package/src/components/CnStatsPanel/CnStatsPanel.vue

@@ -0,0 +1,321 @@
+<template>
+	<div class="cn-stats-panel">
+		<!-- Header slot for filters/selectors -->
+		<div v-if="$slots.header" class="cn-stats-panel__header">
+			<slot name="header" />
+		</div>
+
+		<!-- Global loading state -->
+		<div v-if="loading" class="cn-stats-panel__loading">
+			<NcLoadingIcon :size="20" />
+			<span>{{ loadingLabel }}</span>
+		</div>
+
+		<!-- Sections -->
+		<template v-else>
+			<div
+				v-for="section in sections"
+				:key="section.id"
+				class="cn-stats-panel__section">
+				<!-- Section title -->
+				<h4 v-if="section.title" class="cn-stats-panel__section-title">
+					{{ section.title }}
+				</h4>
+
+				<!-- Section-level loading -->
+				<div v-if="section.loading" class="cn-stats-panel__loading">
+					<NcLoadingIcon :size="20" />
+					<span>{{ loadingLabel }}</span>
+				</div>
+
+				<!-- Empty section -->
+				<div v-else-if="!section.items || !section.items.length" class="cn-stats-panel__empty">
+					{{ section.emptyLabel || emptyLabel }}
+				</div>
+
+				<!-- Stats section -->
+				<template v-else-if="section.type === 'stats'">
+					<slot :name="'section-' + section.id" :section="section">
+						<!-- Stack layout -->
+						<div v-if="section.layout === 'stack'" class="cn-stats-panel__stack">
+							<CnStatsBlock
+								v-for="(item, index) in section.items"
+								:key="index"
+								:title="item.title"
+								:count="item.count"
+								:count-label="item.countLabel"
+								:variant="item.variant || 'default'"
+								:icon="isComponentIcon(item.icon) ? item.icon : null"
+								:icon-size="item.iconSize || 24"
+								:horizontal="item.horizontal !== undefined ? item.horizontal : true"
+								:show-zero-count="item.showZeroCount !== undefined ? item.showZeroCount : true"
+								:breakdown="item.breakdown || null"
+								:route="item.route || null"
+								:clickable="item.clickable || false"
+								:loading="item.loading || false"
+								@click="$emit('stat-click', { section: section.id, item, index })">
+								<template v-if="typeof item.icon === 'string'" #icon>
+									<CnIcon :name="item.icon" :size="item.iconSize || 24" />
+								</template>
+							</CnStatsBlock>
+						</div>
+
+						<!-- Grid layout -->
+						<CnKpiGrid
+							v-else-if="section.layout === 'grid'"
+							grid-class="remove-margin"
+							:columns="section.columns || 2">
+							<CnStatsBlock
+								v-for="(item, index) in section.items"
+								:key="index"
+								:title="item.title"
+								:count="item.count"
+								:count-label="item.countLabel"
+								:variant="item.variant || 'default'"
+								:icon="isComponentIcon(item.icon) ? item.icon : null"
+								:icon-size="item.iconSize || 24"
+								:horizontal="item.horizontal !== undefined ? item.horizontal : false"
+								:show-zero-count="item.showZeroCount !== undefined ? item.showZeroCount : true"
+								:breakdown="item.breakdown || null"
+								:route="item.route || null"
+								:clickable="item.clickable || false"
+								:loading="item.loading || false"
+								@click="$emit('stat-click', { section: section.id, item, index })">
+								<template v-if="typeof item.icon === 'string'" #icon>
+									<CnIcon :name="item.icon" :size="item.iconSize || 24" />
+								</template>
+							</CnStatsBlock>
+						</CnKpiGrid>
+					</slot>
+				</template>
+
+				<!-- Progress section -->
+				<template v-else-if="section.type === 'progress'">
+					<slot :name="'section-' + section.id" :section="section">
+						<CnProgressBar
+							:items="section.items"
+							:variant="section.variant || 'primary'"
+							:bar-height="section.barHeight || 8"
+							:rounded="section.rounded !== undefined ? section.rounded : true"
+							:show-percentage="section.showPercentage || false" />
+					</slot>
+				</template>
+
+				<!-- List section -->
+				<template v-else-if="section.type === 'list'">
+					<slot :name="'section-' + section.id" :section="section">
+						<div class="cn-stats-panel__list">
+							<NcListItem
+								v-for="item in section.items"
+								:key="item.key"
+								:name="item.name"
+								:bold="item.bold || false"
+								@click="$emit('list-click', { section: section.id, item })">
+								<template #icon>
+									<slot :name="'item-icon-' + section.id" :item="item">
+										<CnIcon
+											v-if="typeof item.icon === 'string'"
+											:name="item.icon"
+											:size="item.iconSize || 32" />
+										<component
+											:is="item.icon"
+											v-else-if="item.icon"
+											:size="item.iconSize || 32" />
+									</slot>
+								</template>
+								<template #subname>
+									<slot :name="'item-subname-' + section.id" :item="item">
+										{{ item.subname }}
+									</slot>
+								</template>
+							</NcListItem>
+						</div>
+					</slot>
+				</template>
+			</div>
+		</template>
+
+		<!-- Footer slot -->
+		<div v-if="$slots.footer" class="cn-stats-panel__footer">
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcLoadingIcon, NcListItem } from '@nextcloud/vue'
+import { CnStatsBlock } from '../CnStatsBlock/index.js'
+import { CnKpiGrid } from '../CnKpiGrid/index.js'
+import { CnIcon } from '../CnIcon/index.js'
+import { CnProgressBar } from '../CnProgressBar/index.js'
+
+/**
+ * CnStatsPanel — Configurable statistics panel with sections of stat blocks and list items.
+ *
+ * Renders statistics content from a declarative sections array. Each section can be
+ * either a 'stats' section (renders CnStatsBlocks in stack or grid layout) or a
+ * 'list' section (renders NcListItems). Suitable for sidebar tabs, dashboard widgets,
+ * or any panel that displays statistics.
+ *
+ * @example Stats stack (vertical)
+ * <CnStatsPanel :sections="[{
+ *   type: 'stats',
+ *   id: 'totals',
+ *   title: 'System Totals',
+ *   layout: 'stack',
+ *   items: [
+ *     { title: 'Objects', count: 42, countLabel: 'objects', variant: 'primary', icon: PackageIcon },
+ *     { title: 'Files', count: 128, countLabel: 'files', icon: FileIcon },
+ *   ],
+ * }]" />
+ *
+ * @example Stats grid (2-column)
+ * <CnStatsPanel :sections="[{
+ *   type: 'stats',
+ *   id: 'operations',
+ *   title: 'Operations',
+ *   layout: 'grid',
+ *   columns: 2,
+ *   items: [
+ *     { title: 'Create', count: 10, countLabel: 'ops', variant: 'success', icon: PlusIcon },
+ *     { title: 'Delete', count: 3, countLabel: 'ops', variant: 'error', icon: DeleteIcon },
+ *   ],
+ * }]" />
+ *
+ * @example List section
+ * <CnStatsPanel :sections="[{
+ *   type: 'list',
+ *   id: 'topObjects',
+ *   title: 'Most Active',
+ *   items: [
+ *     { key: '1', name: 'Object A', subname: '42 entries', icon: CogIcon },
+ *   ],
+ * }]" />
+ *
+ * @example With header slot for filters
+ * <CnStatsPanel :sections="sections">
+ *   <template #header>
+ *     <NcSelect v-bind="registerOptions" />
+ *   </template>
+ * </CnStatsPanel>
+ */
+export default {
+	name: 'CnStatsPanel',
+
+	components: {
+		NcLoadingIcon,
+		NcListItem,
+		CnStatsBlock,
+		CnKpiGrid,
+		CnIcon,
+		CnProgressBar,
+	},
+
+	props: {
+		/**
+		 * Array of section definitions to render.
+		 * Each section has a `type` of 'stats', 'list', or 'progress'.
+		 *
+		 * Stats sections: `{ type: 'stats', id, title, layout: 'stack'|'grid', columns?, loading?, items: StatItem[] }`
+		 * List sections: `{ type: 'list', id, title, loading?, items: ListItem[] }`
+		 * Progress sections: `{ type: 'progress', id, title, variant?, barHeight?, rounded?, showPercentage?, loading?, items: ProgressItem[] }`
+		 *
+		 * StatItem: `{ title, count, countLabel, variant?, icon?, iconSize?, horizontal?, showZeroCount?, breakdown?, route?, clickable?, loading? }`
+		 * ListItem: `{ key, name, subname?, bold?, icon?, iconSize? }`
+		 * ProgressItem: `{ key?, label, count?, percentage?, variant?, tooltip? }`
+		 */
+		sections: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** Whether the entire panel is in a loading state */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Label shown during loading state */
+		loadingLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Loading...'),
+		},
+
+		/** Default text shown when a section has no items. Can be overridden per section via `section.emptyLabel`. */
+		emptyLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'No data available'),
+		},
+	},
+
+	emits: ['stat-click', 'list-click', 'progress-click'],
+
+	methods: {
+		/**
+		 * Check if an icon value is a component reference (not a string name).
+		 * @param {*} icon - Icon value to check
+		 * @return {boolean}
+		 */
+		isComponentIcon(icon) {
+			return icon != null && typeof icon !== 'string'
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-stats-panel__section {
+	padding: 12px 0;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.remove-margin {
+	margin: 0;
+}
+
+.cn-stats-panel__section:last-child {
+	border-bottom: none;
+}
+
+.cn-stats-panel__section-title {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	font-weight: bold;
+	padding: 0 16px;
+	margin: 0 0 12px 0;
+}
+
+.cn-stats-panel__stack {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.cn-stats-panel__loading {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 0 16px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-stats-panel__empty {
+	padding: 0 16px;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+}
+
+.cn-stats-panel__header {
+	padding-bottom: 12px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-stats-panel__footer {
+	padding-top: 12px;
+}
+
+.cn-stats-panel__list {
+	margin-top: 4px;
+}
+</style>

package/src/components/CnStatsPanel/index.js

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

package/src/components/CnStatusBadge/CnStatusBadge.vue

@@ -1,77 +1,90 @@
-<template>
-	<span
-		class="cn-status-badge"
-		:class="badgeClasses">
-		<slot>{{ label }}</slot>
-	</span>
-</template>
-
-<script>
-/**
- * CnStatusBadge — Color-coded pill badge for status, priority, or category display.
- *
- * Replaces the various .status-badge / .priority-badge CSS patterns duplicated
- * across Pipelinq and Procest. Supports a colorMap for automatic variant lookup.
- *
- * @example
- * <CnStatusBadge label="Open" variant="success" />
- * <CnStatusBadge label="Urgent" variant="error" size="small" />
- *
- * @example
- * <!-- With colorMap: variant auto-resolved from label -->
- * <CnStatusBadge
- *   label="overdue"
- *   :color-map="{ open: 'success', closed: 'default', overdue: 'error' }" />
- */
-export default {
-	name: 'CnStatusBadge',
-
-	props: {
-		/** Badge label text */
-		label: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * Color variant: 'default', 'primary', 'success', 'warning', 'error', 'info'
-		 */
-		variant: {
-			type: String,
-			default: 'default',
-			validator: (v) => ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(v),
-		},
-		/** Size: 'small' or 'medium' */
-		size: {
-			type: String,
-			default: 'medium',
-			validator: (v) => ['small', 'medium'].includes(v),
-		},
-		/**
-		 * Map of label values to variants. When provided, the variant is resolved
-		 * from this map using the label (case-insensitive). Falls back to the variant prop.
-		 * @example { open: 'success', closed: 'default', overdue: 'error' }
-		 */
-		colorMap: {
-			type: Object,
-			default: null,
-		},
-	},
-
-	computed: {
-		resolvedVariant() {
-			if (this.colorMap && this.label) {
-				const key = this.label.toLowerCase()
-				return this.colorMap[key] || this.variant
-			}
-			return this.variant
-		},
-
-		badgeClasses() {
-			return {
-				['cn-status-badge--' + this.resolvedVariant]: true,
-				'cn-status-badge--small': this.size === 'small',
-			}
-		},
-	},
-}
-</script>
+<template>
+	<span
+		class="cn-status-badge"
+		:class="badgeClasses">
+		<slot>
+			<slot name="icon" />
+			{{ label }}
+		</slot>
+	</span>
+</template>
+
+<script>
+/**
+ * CnStatusBadge — Color-coded pill badge for status, priority, or category display.
+ *
+ * Replaces the various .status-badge / .priority-badge CSS patterns duplicated
+ * across Pipelinq and Procest. Supports a colorMap for automatic variant lookup.
+ *
+ * @example
+ * <CnStatusBadge label="Open" variant="success" />
+ * <CnStatusBadge label="Urgent" variant="error" size="small" />
+ *
+ * @example
+ * <!-- With colorMap: variant auto-resolved from label -->
+ * <CnStatusBadge
+ *   label="overdue"
+ *   :color-map="{ open: 'success', closed: 'default', overdue: 'error' }" />
+ */
+export default {
+	name: 'CnStatusBadge',
+
+	props: {
+		/** Badge label text */
+		label: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Color variant: 'default', 'primary', 'success', 'warning', 'error', 'info'
+		 */
+		variant: {
+			type: String,
+			default: 'default',
+			validator: (v) => ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(v),
+		},
+		/** Size: 'small' or 'medium' */
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (v) => ['small', 'medium'].includes(v),
+		},
+		/**
+		 * Use solid background with white text instead of light background with colored text.
+		 * Useful when the badge is placed on a colored background (e.g., an active card).
+		 */
+		solid: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Map of label values to variants. When provided, the variant is resolved
+		 * from this map using the label (case-insensitive). Falls back to the variant prop.
+		 * @example { open: 'success', closed: 'default', overdue: 'error' }
+		 */
+		colorMap: {
+			type: Object,
+			default: null,
+		},
+	},
+
+	computed: {
+		resolvedVariant() {
+			if (this.colorMap && this.label) {
+				const key = this.label.toLowerCase()
+				const normalizedColorMap = Object.fromEntries(Object.entries(this.colorMap).map(([k, v]) => [k.toLowerCase(), v]))
+				return normalizedColorMap[key] || this.variant
+			}
+			return this.variant
+		},
+
+		badgeClasses() {
+			return {
+				['cn-status-badge--' + this.resolvedVariant]: true,
+				'cn-status-badge--small': this.size === 'small',
+				'cn-status-badge--solid': this.solid,
+			}
+		},
+	},
+}
+</script>

package/src/components/CnStatusBadge/index.js

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