@conduction/nextcloud-vue 0.1.0-beta.6 → 0.1.0-beta.7

package/src/components/CnProgressBar/CnProgressBar.vue

@@ -0,0 +1,262 @@
+<template>
+	<div class="cn-progress-bar">
+		<div class="cn-progress-bar__items">
+			<div
+				v-for="(item, index) in items"
+				:key="item.key || index"
+				class="cn-progress-bar__item">
+				<div class="cn-progress-bar__label">
+					<span
+						class="cn-progress-bar__name"
+						:class="{ 'cn-progress-bar__name--tooltip': item.tooltip }"
+						:title="item.tooltip || undefined">
+						<slot :name="'label-' + (item.key || index)" :item="item">
+							{{ item.label }}
+						</slot>
+					</span>
+					<span class="cn-progress-bar__value">
+						<slot :name="'value-' + (item.key || index)" :item="item" :percentage="getPercentage(item)">
+							{{ formatValue(item) }}
+						</slot>
+					</span>
+				</div>
+				<div
+					class="cn-progress-bar__track"
+					:class="{ 'cn-progress-bar__track--rounded': rounded }"
+					:style="{ height: barHeight + 'px' }">
+					<div
+						class="cn-progress-bar__fill"
+						:class="[
+							'cn-progress-bar__fill--' + resolveVariant(item),
+							{ 'cn-progress-bar__fill--rounded': rounded },
+						]"
+						:style="{ width: getPercentage(item) + '%' }" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnProgressBar — Labeled horizontal progress bars with variant colors.
+ *
+ * Renders a list of items as labeled progress bars. Each item has a label, a count,
+ * and a percentage-width fill bar. Percentages are calculated automatically from the
+ * items' count values relative to the total (sum of all counts), or can be provided
+ * explicitly via `item.percentage`.
+ *
+ * Suitable for distribution visualizations (e.g., query complexity, action breakdown,
+ * status distribution).
+ *
+ * @example Basic usage
+ * <CnProgressBar :items="[
+ *   { key: 'simple', label: 'Simple', count: 50, variant: 'success' },
+ *   { key: 'medium', label: 'Medium', count: 30, variant: 'warning' },
+ *   { key: 'complex', label: 'Complex', count: 20, variant: 'error' },
+ * ]" />
+ *
+ * @example With explicit percentages
+ * <CnProgressBar :items="[
+ *   { key: 'cpu', label: 'CPU', percentage: 72, variant: 'warning' },
+ *   { key: 'mem', label: 'Memory', percentage: 45, variant: 'success' },
+ * ]" show-percentage />
+ *
+ * @example With tooltips
+ * <CnProgressBar :items="[
+ *   { key: 'simple', label: 'Simple', count: 50, variant: 'success', tooltip: 'Basic text searches' },
+ * ]" />
+ */
+export default {
+	name: 'CnProgressBar',
+
+	props: {
+		/**
+		 * Array of progress bar items.
+		 *
+		 * Each item: `{ key?, label, count?, percentage?, variant?, tooltip? }`
+		 *
+		 * - `key` — Unique identifier (optional, falls back to index)
+		 * - `label` — Display label
+		 * - `count` — Numeric value (used to calculate percentage from total if `percentage` not given)
+		 * - `total` — Per-item total for percentage calculation (e.g. count=50, total=500 → 10%). Defaults to sum of all item counts.
+		 * - `percentage` — Explicit percentage (0-100), overrides both count and total
+		 * - `variant` — Color variant: a string ('default'|'primary'|'success'|'warning'|'error'|'info') or a function `({ item, count, total, percentage }) => string` for dynamic resolution
+		 * - `tooltip` — Hover tooltip text for the label
+		 */
+		items: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Default color variant for all bars. Individual items can override via `item.variant`.
+		 * One of: 'default', 'primary', 'success', 'warning', 'error', 'info'
+		 */
+		variant: {
+			type: String,
+			default: 'primary',
+			validator: (v) => ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(v),
+		},
+
+		/** Height of the progress bar track in pixels */
+		barHeight: {
+			type: Number,
+			default: 8,
+		},
+
+		/** Whether to use rounded corners on the track and fill */
+		rounded: {
+			type: Boolean,
+			default: true,
+		},
+
+		/** Whether to show the percentage value instead of the count */
+		showPercentage: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		/**
+		 * Total count across all items (for percentage calculation).
+		 * @return {number}
+		 */
+		totalCount() {
+			return this.items.reduce((sum, item) => sum + (item.count || 0), 0)
+		},
+	},
+
+	methods: {
+		/**
+		 * Get the percentage for an item.
+		 * Uses item.percentage if provided, otherwise calculates from count/total.
+		 * @param {object} item - The progress bar item
+		 * @return {number} Percentage (0-100)
+		 */
+		/**
+		 * Resolve the variant for an item. Supports string or function.
+		 * @param {object} item - The progress bar item
+		 * @return {string} Resolved variant name
+		 */
+		resolveVariant(item) {
+			const itemVariant = item.variant
+			if (typeof itemVariant === 'function') {
+				return itemVariant({
+					item,
+					count: item.count ?? 0,
+					total: item.total ?? this.totalCount,
+					percentage: this.getPercentage(item),
+				}) || this.variant
+			}
+			return itemVariant || this.variant
+		},
+
+		getPercentage(item) {
+			if (item.percentage !== undefined && item.percentage !== null) {
+				return Math.min(100, Math.max(0, item.percentage))
+			}
+			const total = (item.total !== undefined && item.total !== null) ? item.total : this.totalCount
+			if (total === 0) return 0
+			return Math.round(((item.count || 0) / total) * 100)
+		},
+
+		/**
+		 * Format the display value for an item.
+		 * @param {object} item - The progress bar item
+		 * @return {string} Formatted value
+		 */
+		formatValue(item) {
+			if (this.showPercentage) {
+				return `${this.getPercentage(item)}%`
+			}
+			return String(item.count ?? 0)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-progress-bar__items {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.cn-progress-bar__item {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-progress-bar__label {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 0.9rem;
+}
+
+.cn-progress-bar__name {
+	color: var(--color-main-text);
+}
+
+.cn-progress-bar__name--tooltip {
+	cursor: help;
+	text-decoration: underline;
+	text-decoration-style: dotted;
+	text-underline-offset: 2px;
+}
+
+.cn-progress-bar__name--tooltip:hover {
+	text-decoration-style: solid;
+}
+
+.cn-progress-bar__value {
+	color: var(--color-text-maxcontrast);
+	font-variant-numeric: tabular-nums;
+}
+
+.cn-progress-bar__track {
+	background: var(--color-background-dark, var(--color-background-darker));
+	overflow: hidden;
+}
+
+.cn-progress-bar__track--rounded {
+	border-radius: 4px;
+}
+
+.cn-progress-bar__fill {
+	height: 100%;
+	transition: width 0.3s ease;
+}
+
+.cn-progress-bar__fill--rounded {
+	border-radius: 4px;
+}
+
+/* Variant colors */
+.cn-progress-bar__fill--default {
+	background: var(--color-main-text);
+}
+
+.cn-progress-bar__fill--primary {
+	background: var(--color-primary-element);
+}
+
+.cn-progress-bar__fill--success {
+	background: var(--color-success);
+}
+
+.cn-progress-bar__fill--warning {
+	background: var(--color-warning);
+}
+
+.cn-progress-bar__fill--error {
+	background: var(--color-error);
+}
+
+.cn-progress-bar__fill--info {
+	background: var(--color-info, #0082c9);
+}
+</style>

package/src/components/CnProgressBar/index.js

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

package/src/components/CnSchemaFormDialog/CnSchemaPropertiesTab.vue

@@ -179,7 +179,7 @@ export default {
 		sortedProperties() {
 			const properties = this.schema.properties || {}
 			return Object.entries(properties)
-				.sort(([keyA, propA], [keyB, propB]) => {
+				.sort(([, propA], [, propB]) => {
 					const orderA = propA.order || 0
 					const orderB = propB.order || 0
 					if (orderA > 0 && orderB > 0) {

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -259,16 +259,22 @@ export default {
 	color: inherit;
 	border: 2px solid transparent;
 	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+	height: 100%;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+	min-width: 0;
 }
 
 .cn-stats-block--horizontal {
 	flex-direction: row;
-	align-items: flex-start;
-	gap: 16px;
+	align-items: center;
+	gap: 12px;
 }
 
 .cn-stats-block--horizontal .cn-stats-block__content {
 	text-align: left;
+	min-width: 0;
 }
 
 .cn-stats-block--horizontal .cn-stats-block__count {
@@ -305,6 +311,8 @@ export default {
 
 .cn-stats-block--horizontal .cn-stats-block__icon {
 	margin-bottom: 0;
+	width: 36px;
+	height: 36px;
 }
 
 .cn-stats-block__icon--primary {
@@ -314,17 +322,17 @@ export default {
 
 .cn-stats-block__icon--success {
 	background: rgba(70, 186, 97, 0.1);
-	color: var(--color-success);
+	color: var(--color-element-success, var(--color-success));
 }
 
 .cn-stats-block__icon--warning {
 	background: rgba(232, 163, 24, 0.1);
-	color: var(--color-warning);
+	color: var(--color-element-warning, var(--color-warning));
 }
 
 .cn-stats-block__icon--error {
 	background: rgba(224, 36, 36, 0.1);
-	color: var(--color-error);
+	color: var(--color-element-error, var(--color-error));
 }
 
 /* Content */
@@ -336,34 +344,42 @@ export default {
 
 .cn-stats-block__header h4 {
 	margin-top: 0;
-	margin-bottom: 0.5rem;
+	margin-bottom: 0.25rem;
 	color: var(--color-main-text);
 	font-size: 14px;
 	font-weight: 600;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .cn-stats-block__count {
 	display: flex;
 	align-items: baseline;
 	justify-content: center;
-	gap: 0.5rem;
+	gap: 0.25rem;
 	font-size: 1.2rem;
-	margin-bottom: 0.5rem;
+	margin-bottom: 0.25rem;
+	white-space: nowrap;
+	overflow: hidden;
 }
 
 .cn-stats-block__count-value {
 	font-size: 2rem;
 	font-weight: bold;
 	color: var(--color-primary-element);
+	flex-shrink: 0;
 }
 
 .cn-stats-block--primary .cn-stats-block__count-value { color: var(--color-primary-element); }
-.cn-stats-block--success .cn-stats-block__count-value { color: var(--color-success); }
-.cn-stats-block--warning .cn-stats-block__count-value { color: var(--color-warning); }
-.cn-stats-block--error .cn-stats-block__count-value { color: var(--color-error); }
+.cn-stats-block--success .cn-stats-block__count-value { color: var(--color-element-success, var(--color-success)); }
+.cn-stats-block--warning .cn-stats-block__count-value { color: var(--color-element-warning, var(--color-warning)); }
+.cn-stats-block--error .cn-stats-block__count-value { color: var(--color-element-error, var(--color-error)); }
 
 .cn-stats-block__count-label {
 	color: var(--color-text-maxcontrast);
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .cn-stats-block__loading {

package/src/components/CnStatsPanel/CnStatsPanel.vue

@@ -0,0 +1,320 @@
+<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 { 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: 'Loading...',
+		},
+
+		/** Default text shown when a section has no items. Can be overridden per section via `section.emptyLabel`. */
+		emptyLabel: {
+			type: String,
+			default: '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'