@conduction/nextcloud-vue 0.1.0-beta.1

package/src/components/CnSettingsCard/index.js

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

package/src/components/CnSettingsSection/CnSettingsSection.vue

@@ -0,0 +1,266 @@
+<template>
+	<NcSettingsSection
+		:name="name"
+		:description="description"
+		:doc-url="docUrl"
+		v-bind="$attrs">
+		<!-- Action buttons positioned top-right -->
+		<div v-if="$slots.actions" class="cn-settings-section__actions">
+			<slot name="actions" />
+		</div>
+
+		<!-- Section Description (optional detailed description box) -->
+		<div v-if="$slots.description || detailedDescription" class="cn-settings-section__description">
+			<slot name="description">
+				<p v-if="detailedDescription" class="cn-settings-section__description-text">
+					{{ detailedDescription }}
+				</p>
+			</slot>
+		</div>
+
+		<!-- Main Content -->
+		<div class="cn-settings-section__content">
+			<slot />
+		</div>
+
+		<!-- Loading State -->
+		<div v-if="loading" class="cn-settings-section__loading">
+			<NcLoadingIcon :size="32" />
+			<p>{{ loadingMessage }}</p>
+		</div>
+
+		<!-- Error State -->
+		<div v-if="error && !loading" class="cn-settings-section__error">
+			<p class="cn-settings-section__error-message">
+				{{ errorMessage }}
+			</p>
+			<NcButton v-if="onRetry" type="primary" @click="onRetry">
+				<template #icon>
+					<Refresh :size="20" />
+				</template>
+				{{ retryButtonText }}
+			</NcButton>
+		</div>
+
+		<!-- Empty State -->
+		<div v-if="empty && !loading && !error" class="cn-settings-section__empty">
+			<slot name="empty">
+				<div class="cn-settings-section__empty-content">
+					<InformationOutline :size="48" />
+					<p>{{ emptyMessage }}</p>
+				</div>
+			</slot>
+		</div>
+
+		<!-- Footer Actions -->
+		<div v-if="$slots.footer" class="cn-settings-section__footer">
+			<slot name="footer" />
+		</div>
+	</NcSettingsSection>
+</template>
+
+<script>
+import { NcSettingsSection, NcLoadingIcon, NcButton } from '@nextcloud/vue'
+import Refresh from 'vue-material-design-icons/Refresh.vue'
+import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+
+/**
+ * CnSettingsSection - Admin settings section wrapper with consistent layout.
+ *
+ * Wraps NcSettingsSection with action buttons (top-right), loading/error/empty
+ * states, and a footer slot. Use this as the container for each section on an
+ * admin settings page.
+ *
+ * Extracted from OpenRegister's SettingsSection. Designed for reuse across all
+ * Conduction Nextcloud apps.
+ *
+ * @example Basic usage
+ * <CnSettingsSection name="Cache Management" description="Manage application caches">
+ *   <template #actions>
+ *     <NcButton @click="clearCache">Clear Cache</NcButton>
+ *   </template>
+ *   <p>Cache hit rate: 94%</p>
+ * </CnSettingsSection>
+ *
+ * @example With loading and error states
+ * <CnSettingsSection
+ *   name="Statistics"
+ *   :loading="isLoading"
+ *   loading-message="Loading statistics..."
+ *   :error="hasError"
+ *   error-message="Failed to load statistics"
+ *   :on-retry="loadStats">
+ *   <StatsTable :data="stats" />
+ * </CnSettingsSection>
+ *
+ * @example With empty state
+ * <CnSettingsSection name="API Tokens" :empty="tokens.length === 0" empty-message="No tokens configured">
+ *   <TokenList :tokens="tokens" />
+ * </CnSettingsSection>
+ */
+export default {
+	name: 'CnSettingsSection',
+
+	components: {
+		NcSettingsSection,
+		NcLoadingIcon,
+		NcButton,
+		Refresh,
+		InformationOutline,
+	},
+
+	inheritAttrs: false,
+
+	props: {
+		/** Section name/title */
+		name: {
+			type: String,
+			required: true,
+		},
+		/** Brief section description (shown under title by NcSettingsSection) */
+		description: {
+			type: String,
+			default: '',
+		},
+		/** Detailed description shown in a separate block below the title */
+		detailedDescription: {
+			type: String,
+			default: '',
+		},
+		/** Documentation URL (shows info icon next to title) */
+		docUrl: {
+			type: String,
+			default: '',
+		},
+		/** Whether the section is in a loading state */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Message shown during loading */
+		loadingMessage: {
+			type: String,
+			default: 'Loading...',
+		},
+		/** Whether the section is in an error state */
+		error: {
+			type: Boolean,
+			default: false,
+		},
+		/** Message shown when in error state */
+		errorMessage: {
+			type: String,
+			default: 'An error occurred',
+		},
+		/** Callback function for retry button (shown in error state). If null, no retry button is shown. */
+		onRetry: {
+			type: Function,
+			default: null,
+		},
+		/** Text for the retry button */
+		retryButtonText: {
+			type: String,
+			default: 'Retry',
+		},
+		/** Whether the section has no data to show */
+		empty: {
+			type: Boolean,
+			default: false,
+		},
+		/** Message shown when section is empty */
+		emptyMessage: {
+			type: String,
+			default: 'No data available',
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-settings-section__actions {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	justify-content: flex-end;
+	float: right;
+	margin-top: -66px;
+	margin-bottom: 26px;
+	position: relative;
+	z-index: 10;
+}
+
+.cn-settings-section__content {
+	clear: both;
+}
+
+.cn-settings-section__description-text {
+	color: var(--color-text-maxcontrast);
+	margin-bottom: 16px;
+}
+
+.cn-settings-section__loading {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 40px 20px;
+	gap: 16px;
+}
+
+.cn-settings-section__loading p {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
+.cn-settings-section__error {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 32px 20px;
+	gap: 16px;
+	background: var(--color-error-light);
+	border: 1px solid var(--color-error);
+	border-radius: var(--border-radius-large);
+}
+
+.cn-settings-section__error-message {
+	color: var(--color-error);
+	font-weight: 500;
+	margin: 0;
+}
+
+.cn-settings-section__empty {
+	padding: 40px 20px;
+}
+
+.cn-settings-section__empty-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-settings-section__empty-content p {
+	margin: 0;
+	font-size: 14px;
+}
+
+.cn-settings-section__footer {
+	margin-top: 24px;
+	padding-top: 24px;
+	border-top: 1px solid var(--color-border);
+}
+
+@media (max-width: 768px) {
+	.cn-settings-section__actions {
+		position: static;
+		margin-top: 0;
+		margin-bottom: 1rem;
+		float: none;
+		flex-direction: column;
+		align-items: stretch;
+	}
+}
+</style>

package/src/components/CnSettingsSection/index.js

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

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -0,0 +1,366 @@
+<template>
+	<component
+		:is="clickable ? 'a' : 'div'"
+		class="cn-stats-block"
+		:class="rootClasses"
+		v-bind="clickable ? { href: '#', role: 'button', tabindex: '0' } : {}"
+		@click="onClick">
+		<!-- Icon -->
+		<div v-if="hasIcon" class="cn-stats-block__icon" :class="iconClasses">
+			<slot name="icon">
+				<component :is="icon" v-if="icon" :size="iconSize" />
+			</slot>
+		</div>
+
+		<!-- Content -->
+		<div class="cn-stats-block__content">
+			<div class="cn-stats-block__header">
+				<h4>{{ title || 'Objects' }}</h4>
+			</div>
+
+			<div v-if="count > 0" class="cn-stats-block__count">
+				<span class="cn-stats-block__count-value">{{ formattedCount }}</span>
+				<span class="cn-stats-block__count-label">{{ countLabel }}</span>
+			</div>
+			<div v-else-if="loading" class="cn-stats-block__loading">
+				<NcLoadingIcon :size="16" />
+				{{ loadingLabel }}
+			</div>
+			<div v-else class="cn-stats-block__empty">
+				{{ emptyLabel }}
+			</div>
+
+			<!-- Breakdown details -->
+			<div v-if="breakdown && count > 0" class="cn-stats-block__breakdown">
+				<div
+					v-for="(value, key) in breakdown"
+					:key="key"
+					class="cn-stats-block__breakdown-item">
+					<span class="cn-stats-block__breakdown-label">{{ formatBreakdownLabel(key) }}</span>
+					<span
+						class="cn-stats-block__breakdown-value"
+						:class="'cn-stats-block__breakdown-value--' + key">
+						{{ value }}
+					</span>
+				</div>
+			</div>
+		</div>
+	</component>
+</template>
+
+<script>
+import { NcLoadingIcon } from '@nextcloud/vue'
+
+/**
+ * CnStatsBlock — Statistics display card with icon, count, and optional breakdown.
+ *
+ * Supports vertical (default) and horizontal layouts, color variants, icons,
+ * and clickable state. Use in a CnKpiGrid for responsive dashboard layouts.
+ *
+ * @example Basic vertical (default)
+ * <CnStatsBlock title="Cases" :count="42" count-label="open cases" />
+ *
+ * @example Horizontal with icon and variant
+ * <CnStatsBlock
+ *   title="Open Cases"
+ *   :count="42"
+ *   :icon="BriefcaseOutline"
+ *   variant="primary"
+ *   horizontal
+ *   clickable
+ *   @click="goToCases" />
+ *
+ * @example With breakdown
+ * <CnStatsBlock
+ *   title="Cases"
+ *   :count="42"
+ *   :breakdown="{ total: 100, invalid: 3, deleted: 5, published: 92 }" />
+ *
+ * @example Custom icon slot
+ * <CnStatsBlock title="Files" :count="128">
+ *   <template #icon>
+ *     <FileDocumentOutline :size="24" />
+ *   </template>
+ * </CnStatsBlock>
+ */
+export default {
+	name: 'CnStatsBlock',
+
+	components: {
+		NcLoadingIcon,
+	},
+
+	props: {
+		/** Block title */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** The main count number to display prominently */
+		count: {
+			type: Number,
+			default: 0,
+		},
+		/** Label displayed next to the count */
+		countLabel: {
+			type: String,
+			default: 'objects',
+		},
+		/** Detailed breakdown object (key-value pairs) */
+		breakdown: {
+			type: Object,
+			default: null,
+		},
+		/** Whether data is currently loading */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Text shown while loading */
+		loadingLabel: {
+			type: String,
+			default: 'Loading...',
+		},
+		/** Text shown when count is 0 */
+		emptyLabel: {
+			type: String,
+			default: 'No items found',
+		},
+		/** Icon component (e.g., imported MDI icon) */
+		icon: {
+			type: [Object, Function],
+			default: null,
+		},
+		/** Icon size in pixels */
+		iconSize: {
+			type: Number,
+			default: 24,
+		},
+		/** Color variant: 'default', 'primary', 'success', 'warning', 'error' */
+		variant: {
+			type: String,
+			default: 'default',
+			validator: (v) => ['default', 'primary', 'success', 'warning', 'error'].includes(v),
+		},
+		/** Use horizontal layout (icon left, content right) */
+		horizontal: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether the card is clickable */
+		clickable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		hasIcon() {
+			return this.icon !== null || this.$scopedSlots.icon || this.$slots.icon
+		},
+
+		formattedCount() {
+			return this.count.toLocaleString()
+		},
+
+		rootClasses() {
+			return {
+				'cn-stats-block--horizontal': this.horizontal,
+				'cn-stats-block--clickable': this.clickable,
+				[`cn-stats-block--${this.variant}`]: this.variant !== 'default',
+			}
+		},
+
+		iconClasses() {
+			return {
+				[`cn-stats-block__icon--${this.variant}`]: this.variant !== 'default',
+			}
+		},
+	},
+
+	methods: {
+		formatBreakdownLabel(key) {
+			return key.charAt(0).toUpperCase() + key.slice(1) + ':'
+		},
+
+		onClick(event) {
+			if (this.clickable) {
+				event.preventDefault()
+				this.$emit('click', event)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-stats-block {
+	background: var(--color-background-hover);
+	border-radius: var(--border-radius-large, 10px);
+	padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-decoration: none;
+	color: inherit;
+	border: 2px solid transparent;
+	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cn-stats-block--horizontal {
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 16px;
+}
+
+.cn-stats-block--horizontal .cn-stats-block__content {
+	text-align: left;
+}
+
+.cn-stats-block--horizontal .cn-stats-block__count {
+	justify-content: flex-start;
+}
+
+.cn-stats-block--clickable {
+	cursor: pointer;
+}
+
+.cn-stats-block--clickable:hover {
+	border-color: var(--color-primary-element);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.cn-stats-block--clickable:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+/* Icon */
+.cn-stats-block__icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: 50%;
+	background: var(--color-primary-element-light, rgba(0, 130, 201, 0.1));
+	color: var(--color-primary-element);
+	flex-shrink: 0;
+	margin-bottom: 8px;
+}
+
+.cn-stats-block--horizontal .cn-stats-block__icon {
+	margin-bottom: 0;
+}
+
+.cn-stats-block__icon--primary {
+	background: var(--color-primary-element-light, rgba(0, 130, 201, 0.1));
+	color: var(--color-primary-element);
+}
+
+.cn-stats-block__icon--success {
+	background: rgba(70, 186, 97, 0.1);
+	color: var(--color-success);
+}
+
+.cn-stats-block__icon--warning {
+	background: rgba(232, 163, 24, 0.1);
+	color: var(--color-warning);
+}
+
+.cn-stats-block__icon--error {
+	background: rgba(224, 36, 36, 0.1);
+	color: var(--color-error);
+}
+
+/* Content */
+.cn-stats-block__content {
+	flex: 1;
+	min-width: 0;
+	text-align: center;
+}
+
+.cn-stats-block__header h4 {
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-stats-block__count {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+	gap: 0.5rem;
+	font-size: 1.2rem;
+	margin-bottom: 0.5rem;
+}
+
+.cn-stats-block__count-value {
+	font-size: 2rem;
+	font-weight: bold;
+	color: var(--color-primary-element);
+}
+
+.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__count-label {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-stats-block__loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	color: var(--color-text-maxcontrast);
+	margin-bottom: 0.5rem;
+}
+
+.cn-stats-block__empty {
+	text-align: center;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+	margin-bottom: 0.5rem;
+}
+
+.cn-stats-block__breakdown {
+	margin-top: 0.5rem;
+	padding: 0.75rem;
+	background: var(--color-background-hover);
+	border-radius: var(--border-radius);
+	border: 1px solid var(--color-border);
+	width: 100%;
+}
+
+.cn-stats-block__breakdown-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0.5rem;
+}
+
+.cn-stats-block__breakdown-item:last-child {
+	margin-bottom: 0;
+}
+
+.cn-stats-block__breakdown-label {
+	font-weight: 500;
+	color: var(--color-main-text);
+}
+
+.cn-stats-block__breakdown-value {
+	font-weight: 600;
+	padding: 0.25rem 0.5rem;
+	border-radius: var(--border-radius);
+	background: var(--color-background-hover);
+}
+
+.cn-stats-block__breakdown-value--invalid { color: var(--color-warning); }
+.cn-stats-block__breakdown-value--deleted { color: var(--color-error); }
+.cn-stats-block__breakdown-value--published { color: var(--color-success); }
+</style>

package/src/components/CnStatsBlock/index.js

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

package/src/components/CnStatusBadge/CnStatusBadge.vue

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

package/src/components/CnStatusBadge/index.js

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