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

package/src/components/CnDataTable/index.js

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

package/src/components/CnDetailCard/CnDetailCard.vue

@@ -0,0 +1,214 @@
+<!--
+  CnDetailCard — A card container for detail page sections.
+
+  Visually matches the dashboard widget card style (rounded border, header, content).
+  Used inside CnDetailPage to organize entity detail information into cards.
+-->
+<template>
+	<div class="cn-detail-card" :class="{ 'cn-detail-card--collapsed': isCollapsed }">
+		<!-- Header -->
+		<div
+			v-if="title || $slots.icon"
+			class="cn-detail-card__header"
+			:class="{ 'cn-detail-card__header--clickable': collapsible }"
+			@click="collapsible && toggleCollapse()">
+			<div class="cn-detail-card__header-left">
+				<slot name="icon">
+					<component
+						:is="icon"
+						v-if="icon"
+						:size="20"
+						class="cn-detail-card__icon" />
+				</slot>
+				<h3 class="cn-detail-card__title">
+					{{ title }}
+				</h3>
+			</div>
+			<div class="cn-detail-card__header-right">
+				<slot name="header-actions" />
+				<button
+					v-if="collapsible"
+					class="cn-detail-card__collapse-btn"
+					:aria-label="isCollapsed ? 'Expand' : 'Collapse'">
+					<ChevronDown
+						:size="20"
+						:class="{ 'cn-detail-card__chevron--rotated': isCollapsed }" />
+				</button>
+			</div>
+		</div>
+
+		<!-- Content -->
+		<div v-show="!isCollapsed" class="cn-detail-card__content">
+			<slot />
+		</div>
+
+		<!-- Footer -->
+		<div v-if="$slots.footer" v-show="!isCollapsed" class="cn-detail-card__footer">
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+
+<script>
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+
+/**
+ * CnDetailCard — Card container for detail page sections.
+ *
+ * @example Basic usage
+ * <CnDetailCard title="Core Info">
+ *   <div class="info-grid">...</div>
+ * </CnDetailCard>
+ *
+ * @example With icon and actions
+ * <CnDetailCard title="Pipeline" :icon="ChartIcon">
+ *   <template #header-actions>
+ *     <NcButton>Edit</NcButton>
+ *   </template>
+ *   <PipelineProgress :stages="stages" />
+ * </CnDetailCard>
+ *
+ * @example Collapsible
+ * <CnDetailCard title="Products" :collapsible="true">
+ *   <ProductList :items="products" />
+ * </CnDetailCard>
+ */
+export default {
+	name: 'CnDetailCard',
+
+	components: {
+		ChevronDown,
+	},
+
+	props: {
+		/** Card header title */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Optional MDI icon component for the header */
+		icon: {
+			type: [Object, Function],
+			default: null,
+		},
+		/** Whether the card can be collapsed */
+		collapsible: {
+			type: Boolean,
+			default: false,
+		},
+		/** Initial collapsed state (only relevant when collapsible is true) */
+		collapsed: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			isCollapsed: this.collapsed,
+		}
+	},
+
+	watch: {
+		collapsed(val) {
+			this.isCollapsed = val
+		},
+	},
+
+	methods: {
+		toggleCollapse() {
+			this.isCollapsed = !this.isCollapsed
+			this.$emit('update:collapsed', this.isCollapsed)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-detail-card {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 12px);
+	overflow: hidden;
+}
+
+.cn-detail-card__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--color-border);
+	flex-shrink: 0;
+}
+
+.cn-detail-card__header--clickable {
+	cursor: pointer;
+	user-select: none;
+}
+
+.cn-detail-card__header--clickable:hover {
+	background: var(--color-background-hover);
+}
+
+.cn-detail-card--collapsed .cn-detail-card__header {
+	border-bottom: none;
+}
+
+.cn-detail-card__header-left {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+
+.cn-detail-card__header-right {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-shrink: 0;
+}
+
+.cn-detail-card__icon {
+	color: var(--color-primary-element);
+	flex-shrink: 0;
+}
+
+.cn-detail-card__title {
+	font-weight: 600;
+	font-size: 14px;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-detail-card__collapse-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: none;
+	border: none;
+	padding: 4px;
+	cursor: pointer;
+	color: var(--color-text-maxcontrast);
+	border-radius: var(--border-radius);
+}
+
+.cn-detail-card__collapse-btn:hover {
+	background: var(--color-background-dark);
+}
+
+.cn-detail-card__chevron--rotated {
+	transform: rotate(-90deg);
+	transition: transform 0.2s ease;
+}
+
+.cn-detail-card__content {
+	padding: 16px;
+}
+
+.cn-detail-card__footer {
+	padding: 8px 16px;
+	border-top: 1px solid var(--color-border);
+}
+</style>

package/src/components/CnDetailCard/index.js

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

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -0,0 +1,281 @@
+<!--
+  CnDetailPage — Generic detail/overview page.
+
+  A simpler alternative to CnIndexPage for detail, stats, and overview pages.
+  No multi-object table, no CRUD dialogs — just a clean layout with:
+  - Header (title, description, icon, action buttons)
+  - Loading / error / empty states
+  - Statistics table section
+  - Content sections via slots
+-->
+<template>
+	<div class="cn-detail-page" :style="{ maxWidth: maxWidth }">
+		<!-- Header -->
+		<div class="cn-detail-page__header">
+			<div class="cn-detail-page__header-left">
+				<slot name="icon">
+					<CnIcon v-if="icon" :name="icon" :size="iconSize" class="cn-detail-page__icon" />
+				</slot>
+				<div class="cn-detail-page__header-text">
+					<h2 v-if="title" class="cn-detail-page__title">
+						{{ title }}
+					</h2>
+					<p v-if="description" class="cn-detail-page__description">
+						{{ description }}
+					</p>
+				</div>
+			</div>
+			<div class="cn-detail-page__header-actions">
+				<slot name="header-actions" />
+			</div>
+		</div>
+
+		<!-- Loading state -->
+		<div v-if="loading" class="cn-detail-page__loading">
+			<NcLoadingIcon :size="32" />
+			<span>{{ loadingLabel }}</span>
+		</div>
+
+		<!-- Error state -->
+		<div v-else-if="error" class="cn-detail-page__error">
+			<slot name="error">
+				<NcEmptyContent :name="errorMessage">
+					<template #icon>
+						<AlertCircleOutline :size="48" />
+					</template>
+					<template #action>
+						<NcButton v-if="onRetry" type="primary" @click="onRetry">
+							<template #icon>
+								<Refresh :size="20" />
+							</template>
+							{{ retryLabel }}
+						</NcButton>
+						<slot name="error-actions" />
+					</template>
+				</NcEmptyContent>
+			</slot>
+		</div>
+
+		<!-- Empty state -->
+		<div v-else-if="empty" class="cn-detail-page__empty">
+			<slot name="empty">
+				<NcEmptyContent :name="emptyLabel">
+					<template #icon>
+						<InformationOutline :size="48" />
+					</template>
+					<template #action>
+						<slot name="empty-actions" />
+					</template>
+				</NcEmptyContent>
+			</slot>
+		</div>
+
+		<!-- Main content -->
+		<div v-else class="cn-detail-page__body">
+			<!-- Statistics table -->
+			<div v-if="hasStats" class="cn-detail-page__stats">
+				<slot name="stats-header">
+					<h3 v-if="statsTitle" class="cn-detail-page__section-title">
+						{{ statsTitle }}
+					</h3>
+				</slot>
+				<table class="cn-detail-page__stats-table">
+					<thead v-if="statsColumns.length > 0">
+						<tr>
+							<th v-for="col in statsColumns" :key="col.key" :class="col.align ? 'cn-detail-page__stats-cell--' + col.align : ''">
+								{{ col.label }}
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<slot name="stats-rows">
+							<tr v-for="(row, index) in statsRows" :key="index" :class="{ 'cn-detail-page__stats-row--sub': row.indent }">
+								<td v-for="col in statsColumns" :key="col.key" :class="[row.indent ? 'cn-detail-page__stats-cell--indented' : '', col.align ? 'cn-detail-page__stats-cell--' + col.align : '']">
+									{{ row[col.key] !== undefined ? row[col.key] : '-' }}
+								</td>
+							</tr>
+						</slot>
+					</tbody>
+				</table>
+			</div>
+
+			<!-- Default content -->
+			<div class="cn-detail-page__content">
+				<slot />
+			</div>
+
+			<!-- Sections slot — additional content below stats -->
+			<div v-if="$slots.sections" class="cn-detail-page__sections">
+				<slot name="sections" />
+			</div>
+		</div>
+
+		<!-- Footer -->
+		<div v-if="$slots.footer" class="cn-detail-page__footer">
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { CnIcon } from '../CnIcon/index.js'
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import Refresh from 'vue-material-design-icons/Refresh.vue'
+
+/**
+ * CnDetailPage — Generic detail/overview page.
+ *
+ * A simpler alternative to CnIndexPage for pages that display detail info,
+ * statistics, charts, or card grids — without multi-object tables or CRUD
+ * dialogs. Provides a consistent layout with header, loading/error/empty
+ * states, a statistics table, and flexible content slots.
+ *
+ * @example Basic usage with stats table and content
+ * <CnDetailPage
+ *   title="Register Overview"
+ *   description="Statistics and schema details"
+ *   icon="DatabaseOutline"
+ *   :stats-title="'Register Statistics'"
+ *   :stats-columns="[
+ *     { key: 'type', label: 'Type' },
+ *     { key: 'total', label: 'Total' },
+ *     { key: 'size', label: 'Size' },
+ *   ]"
+ *   :stats-rows="[
+ *     { type: 'Objects', total: 150, size: '2.4 MB' },
+ *     { type: 'Files', total: 42, size: '1.1 MB' },
+ *   ]"
+ *   :loading="isLoading">
+ *   <ChartGrid :data="chartData" />
+ *   <SchemaCards :schemas="schemas" />
+ * </CnDetailPage>
+ *
+ * @example With header actions and error handling
+ * <CnDetailPage
+ *   title="Schema Details"
+ *   :error="hasError"
+ *   error-message="Failed to load schema"
+ *   :on-retry="loadSchema">
+ *   <template #header-actions>
+ *     <NcButton @click="editSchema">Edit</NcButton>
+ *   </template>
+ *   <DetailContent :schema="schema" />
+ * </CnDetailPage>
+ */
+export default {
+	name: 'CnDetailPage',
+
+	components: {
+		NcButton,
+		NcEmptyContent,
+		NcLoadingIcon,
+		CnIcon,
+		AlertCircleOutline,
+		InformationOutline,
+		Refresh,
+	},
+
+	props: {
+		/** Page title */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Page description (shown below title) */
+		description: {
+			type: String,
+			default: '',
+		},
+		/** Optional MDI icon name (rendered via CnIcon) */
+		icon: {
+			type: String,
+			default: '',
+		},
+		/** Icon size in pixels */
+		iconSize: {
+			type: Number,
+			default: 28,
+		},
+		/** Whether the page is in a loading state */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Message shown during loading */
+		loadingLabel: {
+			type: String,
+			default: 'Loading...',
+		},
+		/** Whether the page is in an error state */
+		error: {
+			type: Boolean,
+			default: false,
+		},
+		/** Error message shown in error state */
+		errorMessage: {
+			type: String,
+			default: 'An error occurred',
+		},
+		/** Callback for retry button in error state. If null, no retry button is shown. */
+		onRetry: {
+			type: Function,
+			default: null,
+		},
+		/** Label for the retry button */
+		retryLabel: {
+			type: String,
+			default: 'Retry',
+		},
+		/** Whether the page has no data to show */
+		empty: {
+			type: Boolean,
+			default: false,
+		},
+		/** Message shown when page is empty */
+		emptyLabel: {
+			type: String,
+			default: 'No data available',
+		},
+		/** Title shown above the statistics table */
+		statsTitle: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Column definitions for the statistics table.
+		 * Each column: `{ key: string, label: string, align?: 'left'|'center'|'right' }`
+		 *
+		 * @type {Array<{ key: string, label: string, align?: string }>}
+		 */
+		statsColumns: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Row data for the statistics table. Each row is an object keyed by
+		 * column keys. Set `indent: true` on a row for sub-row styling.
+		 *
+		 * @type {Array<Object>}
+		 */
+		statsRows: {
+			type: Array,
+			default: () => [],
+		},
+		/** Maximum width of the page content */
+		maxWidth: {
+			type: String,
+			default: '1200px',
+		},
+	},
+
+	computed: {
+		hasStats() {
+			return this.statsColumns.length > 0 && (this.statsRows.length > 0 || !!this.$slots['stats-rows'])
+		},
+	},
+}
+</script>
+
+<!-- Styles in css/detail-page.css -->

package/src/components/CnDetailPage/index.js

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