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

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@conduction/nextcloud-vue",
-	"version": "0.1.0-beta.6",
+	"version": "0.1.0-beta.7",
 	"description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
 	"license": "EUPL-1.2",
 	"author": "Conduction B.V. <info@conduction.nl>",
-	"main": "dist/nextcloud-vue.cjs",
+	"main": "dist/nextcloud-vue.cjs.js",
 	"module": "dist/nextcloud-vue.esm.js",
 	"style": "dist/nextcloud-vue.css",
 	"types": "src/types/index.d.ts",
@@ -25,9 +25,12 @@
 		"prepublishOnly": "npm run build"
 	},
 	"dependencies": {
+		"@codemirror/lang-html": "^6.4.11",
 		"@codemirror/lang-json": "^6.0.2",
+		"@codemirror/lang-xml": "^6.1.0",
 		"@nextcloud/capabilities": "^1.2.1",
 		"@nextcloud/dialogs": "^7.3.0",
+		"@uiw/codemirror-theme-github": "^4.25.8",
 		"gridstack": "^10.3.1",
 		"vue-apexcharts": "^1.7.0",
 		"vue-codemirror6": "^1.4.3"
@@ -43,11 +46,13 @@
 		"vue-frag": "^1.4.3",
 		"vue-material-design-icons": "^5.0.0"
 	},
+	"overrides": {
+		"json5": "^2.2.3",
+		"loader-utils": "^1.4.2"
+	},
 	"devDependencies": {
 		"@babel/core": "^7.29.0",
-		"@babel/plugin-transform-typescript": "^7.28.6",
 		"@babel/preset-env": "^7.29.0",
-		"@babel/preset-typescript": "^7.28.5",
 		"@eslint/config-helpers": "^0.4.2",
 		"@eslint/eslintrc": "^3.3.4",
 		"@eslint/js": "^9.39.3",

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -31,7 +31,7 @@
 			</div>
 
 			<!-- Add button (primary) -->
-			<NcButton type="primary" @click="$emit('add')">
+			<NcButton v-if="showAdd" type="primary" @click="$emit('add')">
 				<template #icon>
 					<CnIcon v-if="addIcon" :name="addIcon" :size="20" />
 					<Plus v-else :size="20" />
@@ -218,6 +218,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/** Whether to show the Add button */
+		showAdd: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	computed: {

package/src/components/CnAdvancedFormDialog/CnAdvancedFormDialog.vue

@@ -32,8 +32,7 @@
 				<!-- Register/schema selection step (optional slot) -->
 				<slot
 					v-if="$scopedSlots['register-schema-selection']"
-					name="register-schema-selection"
-					:proceed="proceedFromRegisterSchemaStep" />
+					name="register-schema-selection" />
 
 				<!-- Main tabs -->
 				<div v-else class="cn-advanced-form-dialog__tabs tabContainer">
@@ -46,7 +45,6 @@
 								:update-field="updateField"
 								:object-properties="objectPropertiesForSlot"
 								:selected-property="selectedProperty"
-								:handle-row-click="onRowClick"
 								:get-property-display-name="getPropertyDisplayName"
 								:get-property-validation-class="getPropertyValidationClass"
 								:is-property-editable="isPropertyEditable"
@@ -321,10 +319,6 @@ export default {
 	},
 
 	methods: {
-		proceedFromRegisterSchemaStep() {
-			// Placeholder for slot consumers
-		},
-
 		initFormData(item) {
 			if (item) {
 				this.formData = JSON.parse(JSON.stringify(item))
@@ -358,10 +352,6 @@ export default {
 			if (this.errors[key]) this.$delete(this.errors, key)
 		},
 
-		onRowClick(key, event) {
-			// Forwarded for #tab-properties slot consumers — the sub-component handles it internally
-		},
-
 		/**
 		 * Proxy for slot consumers: exposes isPropertyEditable from the tab sub-component.
 		 * @param {string} key - Property key

package/src/components/CnAdvancedFormDialog/CnPropertiesTab.vue

@@ -130,7 +130,11 @@ export default {
 	},
 
 	methods: {
-		/** The effective value for a key: formData override or the object's own value */
+		/**
+		 * The effective value for a key: formData override or the object's own value
+		 * @param {string} key - The property key to look up
+		 * @param {*} objectValue - The fallback value from the object
+		 */
 		resolvedValue(key, objectValue) {
 			return this.formData[key] !== undefined ? this.formData[key] : objectValue
 		},

package/src/components/CnAdvancedFormDialog/CnPropertyValueCell.vue

@@ -81,7 +81,7 @@ export default {
 		/** Full JSON schema object */
 		schema: { type: Object, default: null },
 		/** Resolved current value (formData[key] ?? objectValue) */
-		value: { default: null },
+		value: { type: [String, Number, Boolean, Object, Array], default: null },
 		/** Whether this property is editable at all */
 		isEditable: { type: Boolean, default: true },
 		/** Whether this row is currently selected for editing */

package/src/components/CnCard/CnCard.vue

@@ -0,0 +1,415 @@
+<template>
+	<div
+		class="cn-card"
+		:class="rootClasses"
+		:style="activeStyles"
+		@click="onClick">
+		<div class="cn-card__header">
+			<h2 class="cn-card__title">
+				<slot name="icon">
+					<component :is="icon" v-if="icon" :size="iconSize" />
+				</slot>
+				<span ref="titleText" v-tooltip.bottom="computedTooltip" class="cn-card__title-text">{{ title }}</span>
+			</h2>
+			<div v-if="$slots.actions || $scopedSlots.actions" class="cn-card__actions">
+				<slot name="actions" />
+			</div>
+			<slot name="labels">
+				<span v-if="labels.length > 0" class="cn-card__labels">
+					<CnStatusBadge
+						v-for="(label, i) in labels"
+						:key="i"
+						:label="label.text"
+						:variant="label.variant || 'default'"
+						:solid="true" />
+				</span>
+			</slot>
+		</div>
+
+		<div class="cn-card__body">
+			<slot name="description">
+				<p v-if="description"
+					class="cn-card__description"
+					:style="descriptionStyle">
+					{{ description }}
+				</p>
+			</slot>
+
+			<div v-if="$slots.default || $scopedSlots.default" class="cn-card__content">
+				<slot />
+			</div>
+
+			<slot name="stats">
+				<div v-if="stats.length > 0" class="cn-card__stats">
+					<div v-for="(stat, i) in stats" :key="i" class="cn-card__stat">
+						<span class="cn-card__stat-label">{{ stat.label }}:</span>
+						<span class="cn-card__stat-value">{{ stat.value }}</span>
+					</div>
+				</div>
+			</slot>
+		</div>
+
+		<!-- Footer -->
+		<slot name="footer">
+			<div v-if="hasFooterContent" class="cn-card__footer">
+				<a
+					v-for="(link, i) in footerLinks"
+					:key="'link-' + i"
+					:href="link.url"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="cn-card__footer-link">
+					<slot :name="'footer-link-icon-' + i" />
+					{{ link.label || link.url }}
+				</a>
+				<CnStatusBadge
+					v-for="(tag, i) in normalizedTags"
+					:key="'tag-' + i"
+					:label="tag.text"
+					:variant="tag.variant || 'default'"
+					size="small" />
+			</div>
+		</slot>
+	</div>
+</template>
+
+<script>
+import { CnStatusBadge } from '../CnStatusBadge/index.js'
+
+/**
+ * CnCard — Generic prop-driven card component.
+ *
+ * A flexible card for displaying entities with a title, icon, description,
+ * labels/badges, stats, and an optional active highlight state. Unlike
+ * CnObjectCard (schema-driven), CnCard takes direct props and is ideal
+ * for known, fixed-structure entities.
+ *
+ * @example Basic usage
+ * <CnCard
+ *   title="My Source"
+ *   description="A PostgreSQL data source"
+ *   :icon="DatabaseArrowRightOutline"
+ *   :stats="[{ label: 'Type', value: 'PostgreSQL' }]">
+ *   <template #actions>
+ *     <NcActions><NcActionButton @click="edit">Edit</NcActionButton></NcActions>
+ *   </template>
+ * </CnCard>
+ *
+ * @example With labels and active state
+ * <CnCard
+ *   title="My Organisation"
+ *   :icon="OfficeBuilding"
+ *   :active="isActive"
+ *   active-variant="success"
+ *   :labels="[
+ *     { text: 'Default', variant: 'warning' },
+ *     { text: 'Active', variant: 'success' },
+ *   ]"
+ *   :stats="[
+ *     { label: 'Members', value: 12 },
+ *     { label: 'Owner', value: 'Admin' },
+ *   ]" />
+ */
+export default {
+	name: 'CnCard',
+
+	components: {
+		CnStatusBadge,
+	},
+
+	props: {
+		/** Card title text */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Description text, displayed with line-clamp truncation */
+		description: {
+			type: String,
+			default: '',
+		},
+		/** Tooltip text for the title. If not set, falls back to description */
+		titleTooltip: {
+			type: String,
+			default: '',
+		},
+		/** Icon component (e.g., imported MDI icon). Rendered via <component :is> */
+		icon: {
+			type: [Object, Function],
+			default: null,
+		},
+		/** Icon size in pixels */
+		iconSize: {
+			type: Number,
+			default: 20,
+		},
+		/**
+		 * Array of badge/label objects displayed inline with the title.
+		 * Each entry: { text: string, variant?: string }
+		 * Variant maps to CnStatusBadge variants: 'default'|'primary'|'success'|'warning'|'error'|'info'
+		 * For labels with icons, use the #labels slot override and render CnStatusBadge
+		 * manually with its #icon slot.
+		 */
+		labels: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Array of stat rows displayed as label:value pairs.
+		 * Each entry: { label: string, value: string|number }
+		 */
+		stats: {
+			type: Array,
+			default: () => [],
+		},
+		/** Maximum lines for description truncation (CSS line-clamp) */
+		descriptionLines: {
+			type: Number,
+			default: 3,
+		},
+		/** Whether the card is in an active/highlighted state */
+		active: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Color variant for the active state border and background.
+		 * Maps to Nextcloud CSS variables.
+		 */
+		activeVariant: {
+			type: String,
+			default: 'success',
+			validator: (v) => ['success', 'primary', 'warning', 'error', 'info'].includes(v),
+		},
+		/** Whether the card is clickable (adds hover effect and cursor pointer) */
+		clickable: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Array of footer link objects. Each entry: { url: string, label?: string }
+		 * Links are rendered as clickable anchors. Use the #footer-link-icon-{index} slot
+		 * to add an icon before a specific link.
+		 */
+		footerLinks: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Array of tag items for the footer. Accepts either strings or objects.
+		 * String entries are converted to { text: string, variant: 'default' }.
+		 * Object entries: { text: string, variant?: string }
+		 */
+		tags: {
+			type: Array,
+			default: () => [],
+		},
+	},
+
+	data() {
+		return {
+			isTitleEllipsized: false,
+		}
+	},
+
+	computed: {
+		computedTooltip() {
+			if (this.titleTooltip) return this.titleTooltip
+			return this.isTitleEllipsized ? this.title : ''
+		},
+
+		rootClasses() {
+			return {
+				'cn-card--active': this.active,
+				'cn-card--clickable': this.clickable,
+			}
+		},
+
+		descriptionStyle() {
+			return {
+				'-webkit-line-clamp': this.descriptionLines,
+				'line-clamp': this.descriptionLines,
+			}
+		},
+
+		normalizedTags() {
+			return this.tags.map(tag =>
+				typeof tag === 'string' ? { text: tag, variant: 'default' } : tag,
+			)
+		},
+
+		hasFooterContent() {
+			return this.footerLinks.length > 0 || this.tags.length > 0
+		},
+
+		activeStyles() {
+			if (!this.active) return {}
+			const variantMap = {
+				success: 'var(--color-success)',
+				primary: 'var(--color-primary-element)',
+				warning: 'var(--color-warning)',
+				error: 'var(--color-error)',
+				info: 'var(--color-info)',
+			}
+			return {
+				'--cn-card-active-border': variantMap[this.activeVariant] || variantMap.success,
+			}
+		},
+	},
+
+	mounted() {
+		this.checkTitleEllipsis()
+		this._resizeObserver = new ResizeObserver(() => this.checkTitleEllipsis())
+		this._resizeObserver.observe(this.$el)
+	},
+
+	beforeDestroy() {
+		if (this._resizeObserver) {
+			this._resizeObserver.disconnect()
+		}
+	},
+
+	methods: {
+		onClick(event) {
+			if (this.clickable) {
+				this.$emit('click', event)
+			}
+		},
+
+		checkTitleEllipsis() {
+			const el = this.$refs.titleText
+			this.isTitleEllipsized = el ? el.scrollWidth > el.clientWidth : false
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.cn-card {
+	padding: 16px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	background: var(--color-main-background);
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.cn-card--active {
+	border: 2px solid var(--cn-card-active-border);
+}
+
+.cn-card--clickable {
+	cursor: pointer;
+	transition: box-shadow 0.2s ease, border-color 0.2s ease;
+
+	&:hover {
+		border-color: var(--color-primary-element);
+		box-shadow: 0 2px 8px var(--color-box-shadow);
+	}
+}
+
+.cn-card__header {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	grid-template-rows: auto auto;
+	align-items: center;
+	border-bottom: 1px solid var(--color-border);
+	padding-block-end: 1rem;
+	margin-block-end: 0.5rem;
+}
+
+.cn-card__title {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 16px;
+	margin: 0;
+	min-width: 0;
+}
+
+.cn-card__title-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-card__labels {
+	grid-column: 1 / -1;
+	display: flex;
+	gap: 4px;
+	flex-wrap: wrap;
+	margin-top: 6px;
+}
+
+.cn-card__actions {
+	flex-shrink: 0;
+	margin-inline-start: 0.25rem;
+}
+
+.cn-card__body {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.cn-card__description {
+	color: var(--color-text-lighter);
+	margin-bottom: 12px;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.cn-card__content {
+	margin-bottom: 12px;
+}
+
+.cn-card__stats {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-card__stat {
+	display: flex;
+	justify-content: space-between;
+}
+
+.cn-card__stat-label {
+	color: var(--color-text-lighter);
+	font-size: 12px;
+}
+
+.cn-card__stat-value {
+	font-weight: 600;
+	font-size: 12px;
+}
+
+.cn-card__footer {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: center;
+	padding-top: 8px;
+	margin-top: 8px;
+	border-top: 1px solid var(--color-border);
+}
+
+.cn-card__footer-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	font-size: 0.85em;
+	color: var(--color-primary-element);
+	text-decoration: none;
+	transition: color 0.2s;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+</style>

package/src/components/CnCard/index.js

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

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -18,28 +18,28 @@
 
 		<!-- 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]"
+			<div v-for="object in objects" :key="object[rowKey]">
+				<slot
+					name="card"
 					: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>
+					:schema="schema">
+					<CnObjectCard
+						: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>
 	</div>
 </template>

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -20,7 +20,9 @@
 			:series="series" />
 		<div v-else class="cn-chart-widget__fallback">
 			<slot name="fallback">
-				<p class="cn-chart-widget__error">{{ unavailableLabel }}</p>
+				<p class="cn-chart-widget__error">
+					{{ unavailableLabel }}
+				</p>
 			</slot>
 		</div>
 	</div>

package/src/components/CnCopyDialog/CnCopyDialog.vue

@@ -107,6 +107,11 @@ export default {
 			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,
@@ -138,6 +143,7 @@ export default {
 
 	computed: {
 		itemName() {
+			if (this.nameFormatter) return this.nameFormatter(this.item)
 			return this.item[this.nameField] || this.item.name || this.item.title || this.item.id
 		},
 
@@ -189,7 +195,7 @@ export default {
 		 * Set the result of the copy operation. Call this from the parent
 		 * after the API call completes.
 		 *
-		 * @param {{ success?: boolean, error?: string }} resultData
+		 * @param {{ success?: boolean, error?: string }} resultData - Result data to pass to the dialog
 		 * @public
 		 */
 		setResult(resultData) {

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -217,6 +217,10 @@ export default {
 	overflow: hidden;
 }
 
+:deep(.grid-stack-item-content:has(.cn-widget-wrapper--borderless)) {
+	background: transparent;
+}
+
 :deep(.grid-stack-placeholder > .placeholder-content) {
 	background: var(--color-primary-element-light);
 	border: 2px dashed var(--color-primary-element);

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -72,6 +72,8 @@
 						:icon-url="getWidgetIconUrl(item)"
 						:icon-class="getWidgetIconClass(item)"
 						:show-title="item.showTitle !== false"
+						:borderless="item.showTitle === false"
+						:flush="item.flush === true"
 						:buttons="getWidgetButtons(item)"
 						:style-config="item.styleConfig || {}">
 						<slot :name="'widget-' + item.widgetId" :item="item" :widget="getWidgetDef(item.widgetId)" />

package/src/components/CnDataTable/CnDataTable.vue

@@ -337,9 +337,13 @@ export default {
 
 		toggleSelectAll() {
 			if (this.allSelected) {
-				this.$emit('select', [])
+				// Remove only current page IDs, preserving cross-page selections
+				const currentPageIds = new Set(this.rows.map((row) => row[this.rowKey]))
+				this.$emit('select', this.selectedIds.filter((id) => !currentPageIds.has(id)))
 			} else {
-				this.$emit('select', this.rows.map((row) => row[this.rowKey]))
+				// Add current page IDs to existing selections
+				const merged = new Set([...this.selectedIds, ...this.rows.map((row) => row[this.rowKey])])
+				this.$emit('select', [...merged])
 			}
 			/** @event select-all Emitted when select-all checkbox is toggled. */
 			this.$emit('select-all', !this.allSelected)