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

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/CnDeleteDialog/CnDeleteDialog.vue

@@ -0,0 +1,177 @@
+<template>
+	<NcDialog
+		:name="dialogTitle"
+		size="small"
+		:can-close="!loading"
+		@closing="$emit('close')">
+		<!-- Result phase -->
+		<div v-if="result !== null" class="cn-delete__result">
+			<NcNoteCard v-if="result.success" type="success">
+				{{ successText }}
+			</NcNoteCard>
+			<NcNoteCard v-if="result.error" type="error">
+				{{ result.error }}
+			</NcNoteCard>
+		</div>
+
+		<!-- Confirm phase -->
+		<div v-else class="cn-delete__confirm">
+			<NcNoteCard type="warning">
+				{{ resolvedWarningText }}
+			</NcNoteCard>
+		</div>
+
+		<template #actions>
+			<NcButton @click="$emit('close')">
+				{{ result !== null ? closeLabel : cancelLabel }}
+			</NcButton>
+			<NcButton
+				v-if="result === null"
+				type="error"
+				:disabled="loading"
+				@click="executeDelete">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" />
+					<TrashCanOutline v-else :size="20" />
+				</template>
+				{{ confirmLabel }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+
+/**
+ * CnDeleteDialog — Single-item delete confirmation dialog.
+ *
+ * Two-phase UI: confirm then result. The dialog does NOT perform the delete
+ * itself — it emits a `confirm` event with the item ID. The parent performs
+ * the actual API call and calls `setResult()` via a ref.
+ *
+ * @example
+ * <CnDeleteDialog
+ *   v-if="showDeleteDialog"
+ *   ref="deleteDialog"
+ *   :item="itemToDelete"
+ *   @confirm="onDeleteConfirm"
+ *   @close="showDeleteDialog = false" />
+ *
+ * // In methods:
+ * async onDeleteConfirm(id) {
+ *   try {
+ *     await store.deleteItem(id)
+ *     this.$refs.deleteDialog.setResult({ success: true })
+ *   } catch (e) {
+ *     this.$refs.deleteDialog.setResult({ error: e.message })
+ *   }
+ * }
+ */
+export default {
+	name: 'CnDeleteDialog',
+
+	components: {
+		NcDialog,
+		NcButton,
+		NcNoteCard,
+		NcLoadingIcon,
+		TrashCanOutline,
+	},
+
+	props: {
+		/** The item to delete. Must have an `id` property. */
+		item: {
+			type: Object,
+			required: true,
+		},
+		/** Property name used for display (e.g., 'title', 'name') */
+		nameField: {
+			type: String,
+			default: 'title',
+		},
+		/** Optional function to format the item name. Receives the item, returns a string. Overrides nameField when provided. */
+		nameFormatter: {
+			type: Function,
+			default: null,
+		},
+		/** Dialog title */
+		dialogTitle: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Delete item'),
+		},
+		/** Warning text. Use `{name}` as placeholder for the item name. */
+		warningText: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Are you sure you want to permanently delete "{name}"? This action cannot be undone.'),
+		},
+		/** Success message */
+		successText: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Item successfully deleted.'),
+		},
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
+		confirmLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },
+	},
+
+	data() {
+		return {
+			loading: false,
+			result: null,
+			closeTimeout: null,
+		}
+	},
+
+	computed: {
+		itemName() {
+			if (this.nameFormatter) return this.nameFormatter(this.item)
+			return this.item[this.nameField] || this.item.name || this.item.title || this.item.id
+		},
+		resolvedWarningText() {
+			return this.warningText.replace('{name}', this.itemName)
+		},
+	},
+
+	beforeDestroy() {
+		if (this.closeTimeout) clearTimeout(this.closeTimeout)
+	},
+
+	/**
+	 * @event confirm Emitted when the user confirms deletion. Payload: the item ID.
+	 * @event close Emitted when the dialog should be closed (cancel, close button, or auto-close after success).
+	 */
+
+	methods: {
+		executeDelete() {
+			this.loading = true
+			this.$emit('confirm', this.item.id)
+		},
+
+		/**
+		 * Set the result of the delete operation. Call this from the parent
+		 * after the API call completes.
+		 *
+		 * @param {{ success?: boolean, error?: string }} resultData - Result data to pass to the dialog
+		 * @public
+		 */
+		setResult(resultData) {
+			this.loading = false
+			this.result = resultData
+			if (resultData.success) {
+				this.closeTimeout = setTimeout(() => {
+					this.$emit('close')
+				}, 2000)
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-delete__confirm {
+	padding: 4px 0;
+}
+</style>

package/src/components/CnDeleteDialog/index.js

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

package/src/components/CnDetailCard/CnDetailCard.vue

@@ -0,0 +1,225 @@
+<!--
+  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="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" :class="{ 'cn-detail-card__content--flush': flush }">
+			<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 #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,
+		},
+		/**
+		 * Remove content padding — allows tables and lists to go edge-to-edge.
+		 */
+		flush: {
+			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__content--flush {
+	padding: 0;
+}
+
+.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/CnDetailGrid/CnDetailGrid.vue

@@ -0,0 +1,256 @@
+<!--
+  CnDetailGrid — Data-driven label-value grid for detail/info sections.
+
+  Supports two layout modes:
+  - grid (default): Responsive card grid with label stacked above value
+  - horizontal: Vertical list of rows with label on left, value on right
+
+  Items can be data-driven via the `items` prop, or customized per-item
+  via named scoped slots (#item-{index}, #label-{index}, #item-actions-{index}).
+-->
+<template>
+	<div
+		class="cn-detail-grid"
+		:class="rootClasses"
+		:style="rootStyles">
+		<!-- Empty state -->
+		<div v-if="!items.length && !$scopedSlots.default" class="cn-detail-grid__empty">
+			<slot name="empty">
+				{{ emptyLabel }}
+			</slot>
+		</div>
+
+		<!-- Data-driven items -->
+		<div
+			v-for="(item, index) in items"
+			:key="index"
+			class="cn-detail-grid__item"
+			:class="itemClasses">
+			<!-- Label -->
+			<div class="cn-detail-grid__label">
+				<slot :name="'label-' + index" :item="item" :index="index">
+					{{ item.label }}
+				</slot>
+			</div>
+
+			<!-- Value -->
+			<div class="cn-detail-grid__value">
+				<slot :name="'item-' + index" :item="item" :index="index">
+					{{ item.value !== undefined && item.value !== null ? item.value : '-' }}
+				</slot>
+			</div>
+
+			<!-- Optional per-item actions -->
+			<div v-if="$scopedSlots['item-actions-' + index]" class="cn-detail-grid__actions">
+				<slot :name="'item-actions-' + index" :item="item" :index="index" />
+			</div>
+		</div>
+
+		<!-- Append slot for manual items -->
+		<slot />
+	</div>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+
+/**
+ * CnDetailGrid — Data-driven label-value grid for detail/info sections.
+ *
+ * @example Simple data-driven grid
+ * <CnDetailGrid :items="[
+ *   { label: 'ID', value: '12345' },
+ *   { label: 'Status', value: 'Active' },
+ *   { label: 'Created', value: '2024-01-15' },
+ * ]" />
+ *
+ * @example Grid with custom slot content
+ * <CnDetailGrid :items="[
+ *   { label: 'ID', value: item.id },
+ *   { label: 'Action' },
+ * ]">
+ *   <template #item-1>
+ *     <CnStatusBadge :label="item.action" />
+ *   </template>
+ * </CnDetailGrid>
+ *
+ * @example Horizontal row layout
+ * <CnDetailGrid layout="horizontal" :items="fields" />
+ */
+export default {
+	name: 'CnDetailGrid',
+
+	props: {
+		/**
+		 * Array of detail items to render.
+		 * @type {Array<{ label: string, value?: string|number }>}
+		 */
+		items: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Layout mode.
+		 * - 'grid': Responsive card grid, label stacked above value
+		 * - 'horizontal': Vertical list of rows, label on left, value on right
+		 */
+		layout: {
+			type: String,
+			default: 'grid',
+			validator: (v) => ['grid', 'horizontal'].includes(v),
+		},
+		/**
+		 * Number of fixed grid columns. Set to 0 (default) for responsive auto-fit.
+		 * Only applies to layout="grid".
+		 */
+		columns: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * Minimum width (px) for auto-fit grid items.
+		 * Only applies when columns is 0 and layout is 'grid'.
+		 */
+		minItemWidth: {
+			type: Number,
+			default: 250,
+		},
+		/**
+		 * Minimum width (px) for labels in horizontal mode.
+		 */
+		labelWidth: {
+			type: Number,
+			default: 150,
+		},
+		/**
+		 * Whether to show the left accent border on items.
+		 */
+		accent: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Text shown when the items array is empty.
+		 */
+		emptyLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'No details available'),
+		},
+	},
+
+	computed: {
+		rootClasses() {
+			return {
+				'cn-detail-grid--grid': this.layout === 'grid',
+				'cn-detail-grid--horizontal': this.layout === 'horizontal',
+				'cn-detail-grid--accent': this.accent,
+			}
+		},
+		rootStyles() {
+			if (this.layout === 'grid') {
+				if (this.columns > 0) {
+					return { 'grid-template-columns': `repeat(${this.columns}, 1fr)` }
+				}
+				return { 'grid-template-columns': `repeat(auto-fit, minmax(${this.minItemWidth}px, 1fr))` }
+			}
+			if (this.layout === 'horizontal') {
+				return { '--cn-detail-grid-label-width': this.labelWidth + 'px' }
+			}
+			return {}
+		},
+		itemClasses() {
+			return {
+				'cn-detail-grid__item--horizontal': this.layout === 'horizontal',
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+/* ===== Grid layout (default) ===== */
+.cn-detail-grid--grid {
+	display: grid;
+	gap: calc(4 * var(--default-grid-baseline, 4px));
+}
+
+/* ===== Horizontal layout ===== */
+.cn-detail-grid--horizontal {
+	display: flex;
+	flex-direction: column;
+	gap: calc(3 * var(--default-grid-baseline, 4px));
+}
+
+/* ===== Item (card style) ===== */
+.cn-detail-grid__item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline, 4px);
+	padding: calc(2 * var(--default-grid-baseline, 4px)) calc(3 * var(--default-grid-baseline, 4px));
+	background: var(--color-background-hover);
+	border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+/* Accent border */
+.cn-detail-grid--accent .cn-detail-grid__item {
+	border-left: 3px solid var(--color-primary-element);
+}
+
+/* Horizontal item: row direction */
+.cn-detail-grid__item--horizontal {
+	flex-direction: row;
+	align-items: center;
+	gap: calc(4 * var(--default-grid-baseline, 4px));
+	border-radius: var(--border-radius);
+}
+
+/* ===== Label ===== */
+.cn-detail-grid__label {
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+	font-weight: 500;
+}
+
+.cn-detail-grid--horizontal .cn-detail-grid__label {
+	min-width: var(--cn-detail-grid-label-width, 150px);
+	flex-shrink: 0;
+}
+
+/* ===== Value ===== */
+.cn-detail-grid__value {
+	font-size: 1em;
+	color: var(--color-main-text);
+	word-break: break-word;
+	margin: 0.5rem;
+}
+
+.cn-detail-grid--horizontal .cn-detail-grid__value {
+	flex: 1;
+}
+
+/* ===== Actions ===== */
+.cn-detail-grid__actions {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+}
+
+/* ===== Empty state ===== */
+.cn-detail-grid__empty {
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+	padding: calc(2 * var(--default-grid-baseline, 4px));
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 600px) {
+	.cn-detail-grid--grid {
+		grid-template-columns: 1fr !important;
+	}
+
+	.cn-detail-grid__item--horizontal {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+}
+</style>

package/src/components/CnDetailGrid/index.js

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