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

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -1,152 +1,152 @@
-<template>
-	<div class="cn-card-grid">
-		<!-- Loading state -->
-		<div v-if="loading" class="cn-card-grid__loading">
-			<NcLoadingIcon :size="32" />
-		</div>
-
-		<!-- Empty state -->
-		<div v-else-if="objects.length === 0" class="cn-card-grid__empty">
-			<slot name="empty">
-				<NcEmptyContent :name="emptyText">
-					<template #icon>
-						<ViewGrid :size="64" />
-					</template>
-				</NcEmptyContent>
-			</slot>
-		</div>
-
-		<!-- Card grid -->
-		<div v-else class="cn-card-grid__grid">
-			<slot
-				v-for="object in objects"
-				name="card"
-				:object="object"
-				:selected="isSelected(object)"
-				:schema="schema">
-				<CnObjectCard
-					:key="object[rowKey]"
-					:object="object"
-					:schema="schema"
-					:selectable="selectable"
-					:selected="isSelected(object)"
-					@click="$emit('click', object)"
-					@select="toggleSelect(object)">
-					<template v-if="$scopedSlots['card-actions']" #actions="{ object: obj }">
-						<slot name="card-actions" :object="obj" />
-					</template>
-					<template v-if="$scopedSlots['card-badges']" #badges="{ object: obj }">
-						<slot name="card-badges" :object="obj" />
-					</template>
-				</CnObjectCard>
-			</slot>
-		</div>
-	</div>
-</template>
-
-<script>
-import { NcLoadingIcon, NcEmptyContent } from '@nextcloud/vue'
-import ViewGrid from 'vue-material-design-icons/ViewGrid.vue'
-import { CnObjectCard } from '../CnObjectCard/index.js'
-
-/**
- * CnCardGrid — Responsive grid container for CnObjectCard instances.
- *
- * Displays objects in a responsive CSS grid layout using schema-driven cards.
- * Supports selection, loading/empty states, and custom card rendering via slots.
- *
- * @example
- * <CnCardGrid
- *   :objects="publications"
- *   :schema="pubSchema"
- *   :selectable="true"
- *   :selected-ids="selectedIds"
- *   @click="openPublication"
- *   @select="onSelect">
- *   <template #card-actions="{ object }">
- *     <NcActions><NcActionButton>Edit</NcActionButton></NcActions>
- *   </template>
- * </CnCardGrid>
- */
-export default {
-	name: 'CnCardGrid',
-
-	components: {
-		NcLoadingIcon,
-		NcEmptyContent,
-		ViewGrid,
-		CnObjectCard,
-	},
-
-	props: {
-		/** Array of objects to display as cards */
-		objects: {
-			type: Array,
-			default: () => [],
-		},
-		/** Schema definition (passed through to CnObjectCard) */
-		schema: {
-			type: Object,
-			default: null,
-		},
-		/** Whether data is loading */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** Whether cards can be selected */
-		selectable: {
-			type: Boolean,
-			default: false,
-		},
-		/** Array of currently selected object IDs */
-		selectedIds: {
-			type: Array,
-			default: () => [],
-		},
-		/** Property name used as unique identifier */
-		rowKey: {
-			type: String,
-			default: 'id',
-		},
-		/** Text shown when there are no objects */
-		emptyText: {
-			type: String,
-			default: 'No items found',
-		},
-	},
-
-	methods: {
-		isSelected(object) {
-			return this.selectedIds.includes(object[this.rowKey])
-		},
-
-		toggleSelect(object) {
-			const id = object[this.rowKey]
-			const newIds = this.isSelected(object)
-				? this.selectedIds.filter((i) => i !== id)
-				: [...this.selectedIds, id]
-			this.$emit('select', newIds)
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-card-grid__grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-	gap: 16px;
-}
-
-.cn-card-grid__loading {
-	display: flex;
-	justify-content: center;
-	padding: 40px;
-}
-
-.cn-card-grid__empty {
-	padding: 40px 20px;
-	text-align: center;
-}
-</style>
+<template>
+	<div class="cn-card-grid">
+		<!-- Loading state -->
+		<div v-if="loading" class="cn-card-grid__loading">
+			<NcLoadingIcon :size="32" />
+		</div>
+
+		<!-- Empty state -->
+		<div v-else-if="objects.length === 0" class="cn-card-grid__empty">
+			<slot name="empty">
+				<NcEmptyContent :name="emptyText">
+					<template #icon>
+						<ViewGrid :size="64" />
+					</template>
+				</NcEmptyContent>
+			</slot>
+		</div>
+
+		<!-- Card grid -->
+		<div v-else class="cn-card-grid__grid">
+			<slot
+				v-for="object in objects"
+				name="card"
+				:object="object"
+				:selected="isSelected(object)"
+				:schema="schema">
+				<CnObjectCard
+					:key="object[rowKey]"
+					:object="object"
+					:schema="schema"
+					:selectable="selectable"
+					:selected="isSelected(object)"
+					@click="$emit('click', object)"
+					@select="toggleSelect(object)">
+					<template v-if="$scopedSlots['card-actions']" #actions="{ object: obj }">
+						<slot name="card-actions" :object="obj" />
+					</template>
+					<template v-if="$scopedSlots['card-badges']" #badges="{ object: obj }">
+						<slot name="card-badges" :object="obj" />
+					</template>
+				</CnObjectCard>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcLoadingIcon, NcEmptyContent } from '@nextcloud/vue'
+import ViewGrid from 'vue-material-design-icons/ViewGrid.vue'
+import { CnObjectCard } from '../CnObjectCard/index.js'
+
+/**
+ * CnCardGrid — Responsive grid container for CnObjectCard instances.
+ *
+ * Displays objects in a responsive CSS grid layout using schema-driven cards.
+ * Supports selection, loading/empty states, and custom card rendering via slots.
+ *
+ * @example
+ * <CnCardGrid
+ *   :objects="publications"
+ *   :schema="pubSchema"
+ *   :selectable="true"
+ *   :selected-ids="selectedIds"
+ *   @click="openPublication"
+ *   @select="onSelect">
+ *   <template #card-actions="{ object }">
+ *     <NcActions><NcActionButton>Edit</NcActionButton></NcActions>
+ *   </template>
+ * </CnCardGrid>
+ */
+export default {
+	name: 'CnCardGrid',
+
+	components: {
+		NcLoadingIcon,
+		NcEmptyContent,
+		ViewGrid,
+		CnObjectCard,
+	},
+
+	props: {
+		/** Array of objects to display as cards */
+		objects: {
+			type: Array,
+			default: () => [],
+		},
+		/** Schema definition (passed through to CnObjectCard) */
+		schema: {
+			type: Object,
+			default: null,
+		},
+		/** Whether data is loading */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		/** Whether cards can be selected */
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+		/** Array of currently selected object IDs */
+		selectedIds: {
+			type: Array,
+			default: () => [],
+		},
+		/** Property name used as unique identifier */
+		rowKey: {
+			type: String,
+			default: 'id',
+		},
+		/** Text shown when there are no objects */
+		emptyText: {
+			type: String,
+			default: 'No items found',
+		},
+	},
+
+	methods: {
+		isSelected(object) {
+			return this.selectedIds.includes(object[this.rowKey])
+		},
+
+		toggleSelect(object) {
+			const id = object[this.rowKey]
+			const newIds = this.isSelected(object)
+				? this.selectedIds.filter((i) => i !== id)
+				: [...this.selectedIds, id]
+			this.$emit('select', newIds)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-card-grid__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+	gap: 16px;
+}
+
+.cn-card-grid__loading {
+	display: flex;
+	justify-content: center;
+	padding: 40px;
+}
+
+.cn-card-grid__empty {
+	padding: 40px 20px;
+	text-align: center;
+}
+</style>

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -1,132 +1,132 @@
-<template>
-	<span class="cn-cell-renderer" :class="cellClass">
-		<!-- Boolean: icon -->
-		<template v-if="propertyType === 'boolean'">
-			<CheckBold v-if="value" :size="16" class="cn-cell-renderer__icon cn-cell-renderer__icon--success" />
-			<span v-else class="cn-cell-renderer__dash">—</span>
-		</template>
-
-		<!-- Enum: status badge -->
-		<template v-else-if="isEnum">
-			<CnStatusBadge v-if="value" :label="String(value)" />
-			<span v-else class="cn-cell-renderer__dash">—</span>
-		</template>
-
-		<!-- Array: comma-joined or count -->
-		<template v-else-if="propertyType === 'array'">
-			<span v-if="!value || !value.length" class="cn-cell-renderer__dash">—</span>
-			<span v-else :title="Array.isArray(value) ? value.join(', ') : ''">
-				{{ formattedValue }}
-			</span>
-		</template>
-
-		<!-- Default: formatted text -->
-		<template v-else>
-			<span :title="rawTitle">{{ formattedValue }}</span>
-		</template>
-	</span>
-</template>
-
-<script>
-import { formatValue } from '../../utils/schema.js'
-import { CnStatusBadge } from '../CnStatusBadge/index.js'
-import CheckBold from 'vue-material-design-icons/CheckBold.vue'
-
-/**
- * CnCellRenderer — Type-aware cell renderer for schema-driven tables.
- *
- * Renders a single cell value based on its schema property definition.
- * Booleans render as icons, enums as status badges, dates as formatted strings,
- * and everything else as truncated text via `formatValue()`.
- *
- * @example
- * <CnCellRenderer :value="row.status" :property="schema.properties.status" />
- */
-export default {
-	name: 'CnCellRenderer',
-
-	components: {
-		CnStatusBadge,
-		CheckBold,
-	},
-
-	props: {
-		/** The raw cell value */
-		value: {
-			type: [String, Number, Boolean, Array, Object],
-			default: null,
-		},
-		/** Schema property definition: { type, format, enum, items, title } */
-		property: {
-			type: Object,
-			default: () => ({}),
-		},
-		/** Maximum string length before truncation */
-		truncate: {
-			type: Number,
-			default: 100,
-		},
-	},
-
-	computed: {
-		propertyType() {
-			return this.property?.type || (typeof this.value)
-		},
-
-		isEnum() {
-			return !!(this.property?.enum && this.property.enum.length > 0)
-		},
-
-		formattedValue() {
-			return formatValue(this.value, this.property, { truncate: this.truncate })
-		},
-
-		rawTitle() {
-			// Show full value on hover if it was truncated
-			const raw = this.value
-			if (typeof raw === 'string' && raw.length > this.truncate) {
-				return raw
-			}
-			return undefined
-		},
-
-		cellClass() {
-			const classes = []
-			if (this.propertyType === 'boolean') classes.push('cn-cell-renderer--boolean')
-			if (this.isEnum) classes.push('cn-cell-renderer--enum')
-			if (this.property?.format === 'date-time' || this.property?.format === 'date') {
-				classes.push('cn-cell-renderer--date')
-			}
-			if (this.property?.format === 'uuid') classes.push('cn-cell-renderer--uuid')
-			if (this.propertyType === 'integer' || this.propertyType === 'number') {
-				classes.push('cn-cell-renderer--number')
-			}
-			return classes
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-cell-renderer--uuid {
-	font-family: monospace;
-	font-size: 13px;
-	color: var(--color-text-maxcontrast);
-}
-
-.cn-cell-renderer--number {
-	font-variant-numeric: tabular-nums;
-}
-
-.cn-cell-renderer--date {
-	white-space: nowrap;
-}
-
-.cn-cell-renderer__dash {
-	color: var(--color-text-maxcontrast);
-}
-
-.cn-cell-renderer__icon--success {
-	color: var(--color-success);
-}
-</style>
+<template>
+	<span class="cn-cell-renderer" :class="cellClass">
+		<!-- Boolean: icon -->
+		<template v-if="propertyType === 'boolean'">
+			<CheckBold v-if="value" :size="16" class="cn-cell-renderer__icon cn-cell-renderer__icon--success" />
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
+		<!-- Enum: status badge -->
+		<template v-else-if="isEnum">
+			<CnStatusBadge v-if="value" :label="String(value)" />
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
+		<!-- Array: comma-joined or count -->
+		<template v-else-if="propertyType === 'array'">
+			<span v-if="!value || !value.length" class="cn-cell-renderer__dash">—</span>
+			<span v-else :title="Array.isArray(value) ? value.join(', ') : ''">
+				{{ formattedValue }}
+			</span>
+		</template>
+
+		<!-- Default: formatted text -->
+		<template v-else>
+			<span :title="rawTitle">{{ formattedValue }}</span>
+		</template>
+	</span>
+</template>
+
+<script>
+import { formatValue } from '../../utils/schema.js'
+import { CnStatusBadge } from '../CnStatusBadge/index.js'
+import CheckBold from 'vue-material-design-icons/CheckBold.vue'
+
+/**
+ * CnCellRenderer — Type-aware cell renderer for schema-driven tables.
+ *
+ * Renders a single cell value based on its schema property definition.
+ * Booleans render as icons, enums as status badges, dates as formatted strings,
+ * and everything else as truncated text via `formatValue()`.
+ *
+ * @example
+ * <CnCellRenderer :value="row.status" :property="schema.properties.status" />
+ */
+export default {
+	name: 'CnCellRenderer',
+
+	components: {
+		CnStatusBadge,
+		CheckBold,
+	},
+
+	props: {
+		/** The raw cell value */
+		value: {
+			type: [String, Number, Boolean, Array, Object],
+			default: null,
+		},
+		/** Schema property definition: { type, format, enum, items, title } */
+		property: {
+			type: Object,
+			default: () => ({}),
+		},
+		/** Maximum string length before truncation */
+		truncate: {
+			type: Number,
+			default: 100,
+		},
+	},
+
+	computed: {
+		propertyType() {
+			return this.property?.type || (typeof this.value)
+		},
+
+		isEnum() {
+			return !!(this.property?.enum && this.property.enum.length > 0)
+		},
+
+		formattedValue() {
+			return formatValue(this.value, this.property, { truncate: this.truncate })
+		},
+
+		rawTitle() {
+			// Show full value on hover if it was truncated
+			const raw = this.value
+			if (typeof raw === 'string' && raw.length > this.truncate) {
+				return raw
+			}
+			return undefined
+		},
+
+		cellClass() {
+			const classes = []
+			if (this.propertyType === 'boolean') classes.push('cn-cell-renderer--boolean')
+			if (this.isEnum) classes.push('cn-cell-renderer--enum')
+			if (this.property?.format === 'date-time' || this.property?.format === 'date') {
+				classes.push('cn-cell-renderer--date')
+			}
+			if (this.property?.format === 'uuid') classes.push('cn-cell-renderer--uuid')
+			if (this.propertyType === 'integer' || this.propertyType === 'number') {
+				classes.push('cn-cell-renderer--number')
+			}
+			return classes
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-cell-renderer--uuid {
+	font-family: monospace;
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-cell-renderer--number {
+	font-variant-numeric: tabular-nums;
+}
+
+.cn-cell-renderer--date {
+	white-space: nowrap;
+}
+
+.cn-cell-renderer__dash {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-cell-renderer__icon--success {
+	color: var(--color-success);
+}
+</style>