@conduction/nextcloud-vue 0.1.0-beta.1

package/src/composables/useSubResource.js

@@ -0,0 +1,142 @@
+import { ref, reactive } from 'vue'
+import { buildHeaders, buildQueryString } from '../utils/headers.js'
+import { parseResponseError, networkError } from '../utils/errors.js'
+
+/**
+ * Standalone composable for fetching sub-resources outside the Pinia store.
+ *
+ * Use this for app-specific sub-resources that don't follow the standard
+ * OpenRegister pattern or don't need shared state (e.g. CalDAV tasks,
+ * ICommentsManager notes). State is scoped to the component lifecycle.
+ *
+ * For sub-resources that need shared state across components, use store
+ * plugins (filesPlugin, auditTrailsPlugin, etc.) instead.
+ *
+ * @param {object} store The object store instance (must have objectTypeRegistry and _options)
+ * @param {string} endpoint URL path segment appended to the object URL (e.g. 'tasks')
+ * @param {object} [options={}] Composable options
+ * @param {Function} [options.transform] Transform function applied to each result item
+ * @param {number} [options.limit=20] Default page size
+ * @return {object} Reactive state and methods
+ *
+ * @example
+ * // Basic usage
+ * const tasks = useSubResource(store, 'tasks')
+ * await tasks.fetch('case', caseId)
+ * console.log(tasks.data.results)
+ *
+ * @example
+ * // With transform function (e.g. CalDAV task normalization)
+ * const tasks = useSubResource(store, 'tasks', {
+ *   transform: (task) => ({
+ *     id: task.uid || task.id,
+ *     title: task.summary,
+ *     deadline: task.due,
+ *     status: task.status,
+ *   }),
+ * })
+ */
+export function useSubResource(store, endpoint, options = {}) {
+	const limit = options.limit || 20
+	const transform = options.transform || null
+
+	const data = reactive({
+		results: [],
+		total: 0,
+		page: 1,
+		pages: 0,
+		limit,
+		offset: 0,
+	})
+	const loading = ref(false)
+	const error = ref(null)
+
+	/**
+	 * Build the sub-resource URL for a given object type and ID.
+	 *
+	 * @param {string} type The registered object type slug
+	 * @param {string} objectId The parent object ID
+	 * @return {string} Full URL path
+	 */
+	function buildUrl(type, objectId) {
+		const config = store.objectTypeRegistry[type]
+		if (!config) {
+			throw new Error(`Object type "${type}" is not registered in the store.`)
+		}
+		return `${store._options.baseUrl}/${config.register}/${config.schema}/${objectId}/${endpoint}`
+	}
+
+	/**
+	 * Fetch the sub-resource collection for an object.
+	 *
+	 * @param {string} type The registered object type slug
+	 * @param {string} objectId The parent object ID
+	 * @param {object} [params={}] Query parameters (_search, _limit, _page)
+	 * @return {Promise<Array>} The fetched results
+	 */
+	async function fetchData(type, objectId, params = {}) {
+		loading.value = true
+		error.value = null
+
+		try {
+			const url = buildUrl(type, objectId) + buildQueryString(params)
+
+			const response = await fetch(url, {
+				method: 'GET',
+				headers: buildHeaders(),
+			})
+
+			if (!response.ok) {
+				error.value = await parseResponseError(response, endpoint)
+				console.error(`Error fetching ${endpoint} for ${type}/${objectId}:`, error.value)
+				return []
+			}
+
+			const responseData = await response.json()
+			let results = responseData.results || responseData
+
+			if (Array.isArray(results) && transform) {
+				results = results.map(transform)
+			}
+
+			data.results = results
+			data.total = responseData.total || results.length
+			data.page = responseData.page || 1
+			data.pages = responseData.pages || 0
+			data.limit = params._limit || limit
+			data.offset = responseData.offset || 0
+
+			return data.results
+		} catch (err) {
+			error.value = err.name === 'TypeError'
+				? networkError(err)
+				: { status: null, message: err.message, details: null, isValidation: false, fields: null, toString() { return this.message } }
+			console.error(`Error fetching ${endpoint} for ${type}/${objectId}:`, err)
+			return []
+		} finally {
+			loading.value = false
+		}
+	}
+
+	/**
+	 * Clear all state back to defaults.
+	 */
+	function clear() {
+		data.results = []
+		data.total = 0
+		data.page = 1
+		data.pages = 0
+		data.limit = limit
+		data.offset = 0
+		loading.value = false
+		error.value = null
+	}
+
+	return {
+		data,
+		loading,
+		error,
+		fetch: fetchData,
+		clear,
+	}
+}

package/src/css/badge.css

@@ -0,0 +1,51 @@
+/* ========================================
+   @conduction/nextcloud-vue — Status Badge
+   ======================================== */
+
+.cn-status-badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 10px;
+	border-radius: var(--border-radius-pill);
+	font-size: 0.85em;
+	font-weight: 500;
+	line-height: 1.4;
+	white-space: nowrap;
+}
+
+/* Size variants */
+.cn-status-badge--small {
+	padding: 1px 8px;
+	font-size: 0.75em;
+}
+
+/* Color variants */
+.cn-status-badge--default {
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-status-badge--primary {
+	background-color: var(--nldesign-color-primary-light, var(--color-primary-element-light));
+	color: var(--nldesign-color-primary, var(--color-primary-element));
+}
+
+.cn-status-badge--success {
+	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	color: var(--color-success);
+}
+
+.cn-status-badge--warning {
+	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	color: var(--color-warning-text, var(--color-warning));
+}
+
+.cn-status-badge--error {
+	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	color: var(--color-error);
+}
+
+.cn-status-badge--info {
+	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	color: var(--color-info, #0082c9);
+}

package/src/css/card.css

@@ -0,0 +1,128 @@
+/* ========================================
+   @conduction/nextcloud-vue — Card Styles
+   ======================================== */
+
+/* Card Grid */
+.cn-card-grid {
+	display: grid;
+	gap: 1.5rem;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+/* Base Card */
+.cn-card {
+	background: var(--color-main-background);
+	border-radius: 8px;
+	padding: 20px;
+	box-shadow: 0 2px 8px var(--color-box-shadow);
+	min-height: 200px;
+	transition: transform 0.2s ease-in-out;
+	border: 1px solid var(--color-border);
+}
+
+.cn-card:hover {
+	transform: scale(1.01);
+	box-shadow: 0 4px 12px var(--color-box-shadow);
+}
+
+/* Card Header */
+.cn-card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	margin-bottom: 12px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-card-header h2,
+.cn-card-header h3 {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	color: var(--color-main-text);
+}
+
+.cn-card-header h2 { font-size: 1.2em; }
+.cn-card-header h3 { font-size: 1.1em; }
+
+/* Settings Card */
+.cn-settings-card {
+	background: var(--color-background-hover);
+	border-radius: var(--border-radius-large);
+	padding: 20px;
+	margin-bottom: 20px;
+}
+
+.cn-settings-card h4 {
+	margin: 0 0 16px 0;
+	color: var(--color-main-text);
+	font-size: 16px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.cn-settings-card--collapsible h4 {
+	cursor: pointer;
+	user-select: none;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	transition: color 0.2s ease;
+	margin-bottom: 0;
+}
+
+.cn-settings-card--collapsible h4:hover {
+	color: var(--color-primary-element);
+}
+
+.cn-settings-card__chevron {
+	transition: transform 0.3s ease;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-settings-card--collapsible h4:hover .cn-settings-card__chevron {
+	color: var(--color-primary-element);
+}
+
+.cn-settings-card__content {
+	padding-top: 16px;
+}
+
+/* Stat Grid */
+.cn-stat-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 12px;
+	margin-bottom: 16px;
+}
+
+.cn-stat-item {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-stat-label {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+}
+
+.cn-stat-value {
+	font-size: 1.1em;
+	font-weight: 600;
+}
+
+/* Backwards compatibility aliases */
+.cardGrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+.card { background: var(--color-main-background); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform 0.2s ease-in-out; border: 1px solid var(--color-border); }
+.card:hover { transform: scale(1.01); box-shadow: 0 4px 12px var(--color-box-shadow); }
+.cardHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
+.statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
+.statItem { display: flex; flex-direction: column; gap: 4px; }
+.statLabel { color: var(--color-text-maxcontrast); font-size: 0.9em; }
+.statValue { font-size: 1.1em; font-weight: 600; }

package/src/css/detail.css

@@ -0,0 +1,68 @@
+/* ========================================
+   @conduction/nextcloud-vue — Detail Styles
+   ======================================== */
+
+/* Detail Grid (metadata display) */
+.cn-detail-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	gap: 16px;
+	margin-bottom: 20px;
+}
+
+.cn-detail-item {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 8px 12px;
+	border-left: 3px solid var(--color-primary-element);
+	background: var(--color-background-hover);
+	border-radius: 0 var(--border-radius) var(--border-radius) 0;
+}
+
+.cn-detail-item__label {
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+	font-weight: 500;
+}
+
+.cn-detail-item__value {
+	font-size: 1em;
+	color: var(--color-main-text);
+	word-break: break-word;
+}
+
+/* Detail Layout */
+.cn-detail-layout {
+	max-width: 1000px;
+	padding: 20px;
+}
+
+.cn-detail-layout__header {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	margin-bottom: 24px;
+}
+
+.cn-detail-layout__title {
+	flex: 1;
+	margin: 0;
+	font-size: 1.5em;
+	color: var(--color-main-text);
+}
+
+.cn-detail-layout__actions {
+	display: flex;
+	gap: 8px;
+	flex-shrink: 0;
+}
+
+.cn-detail-layout__content {
+	margin-top: 16px;
+}
+
+/* Backwards compatibility aliases */
+.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 20px; }
+.detail-item { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-left: 3px solid var(--color-primary-element); background: var(--color-background-hover); border-radius: 0 var(--border-radius) var(--border-radius) 0; }
+.detailContainer { margin-block-start: 20px; margin-inline-start: 20px; margin-inline-end: 20px; }

package/src/css/index.css

@@ -0,0 +1,8 @@
+/* @conduction/nextcloud-vue — Main CSS entry point */
+@import './table.css';
+@import './card.css';
+@import './pagination.css';
+@import './detail.css';
+@import './badge.css';
+@import './layout.css';
+@import './utilities.css';

package/src/css/layout.css

@@ -0,0 +1,90 @@
+/* ========================================
+   @conduction/nextcloud-vue — Layout Styles
+   ======================================== */
+
+/* List View Layout */
+.cn-list-layout {
+	padding: 20px;
+}
+
+.cn-list-layout__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 16px;
+}
+
+.cn-list-layout__title {
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+}
+
+.cn-list-layout__title h2 {
+	margin: 0;
+	font-size: 1.4em;
+	color: var(--color-main-text);
+}
+
+.cn-list-layout__title .cn-list-layout__count {
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-list-layout__actions {
+	display: flex;
+	gap: 8px;
+}
+
+/* Filter Bar */
+.cn-filter-bar {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	margin-bottom: 16px;
+	flex-wrap: wrap;
+}
+
+.cn-filter-bar__search {
+	flex: 1;
+	min-width: 200px;
+	max-width: 400px;
+}
+
+.cn-filter-bar__filters {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+.cn-filter-bar__filter {
+	min-width: 150px;
+	max-width: 200px;
+}
+
+.cn-filter-bar__clear {
+	margin-left: auto;
+}
+
+/* Dashboard Content */
+.cn-dashboard-content {
+	margin-inline: auto;
+	max-width: 1200px;
+	padding-block: 20px;
+	padding-inline: 20px;
+}
+
+/* Loading Container */
+.cn-loading-container {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	color: var(--color-text-maxcontrast);
+	justify-content: center;
+	padding-block: 40px;
+}
+
+/* Backwards compatibility aliases */
+.dashboardContent { margin-inline: auto; max-width: 1200px; padding-block: 20px; padding-inline: 20px; }
+.loadingContainer { display: flex; align-items: center; gap: 10px; color: var(--color-text-maxcontrast); justify-content: center; padding-block: 40px; }

package/src/css/pagination.css

@@ -0,0 +1,72 @@
+/* ========================================
+   @conduction/nextcloud-vue — Pagination
+   ======================================== */
+
+.cn-pagination {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 15px;
+	margin-top: 30px;
+	padding: 20px;
+	flex-wrap: nowrap;
+}
+
+.cn-pagination__info {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.cn-pagination__page-info {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9rem;
+}
+
+.cn-pagination__nav {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	flex-grow: 1;
+	justify-content: center;
+}
+
+.cn-pagination__numbers {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.cn-pagination__ellipsis {
+	padding: 0 5px;
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9rem;
+}
+
+.cn-pagination__page-size {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	flex-shrink: 0;
+	min-width: 0;
+}
+
+.cn-pagination__page-size label {
+	font-size: 0.9rem;
+	color: var(--color-text-maxcontrast);
+	white-space: nowrap;
+}
+
+.cn-pagination__page-size-select {
+	min-width: 100px !important;
+	max-width: 120px !important;
+}
+
+/* Backwards compatibility aliases */
+.viewPagination { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 30px; padding: 20px; flex-wrap: nowrap; }
+.viewPaginationInfo { display: flex; align-items: center; flex-shrink: 0; }
+.viewPageInfo { color: var(--color-text-maxcontrast); font-size: 0.9rem; }
+.viewPaginationNav { display: flex; align-items: center; gap: 10px; flex-grow: 1; justify-content: center; }
+.viewPaginationNumbers { display: flex; align-items: center; gap: 5px; }
+.viewPaginationEllipsis { padding: 0 5px; color: var(--color-text-maxcontrast); font-size: 0.9rem; }
+.viewPaginationPageSize { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }

package/src/css/table.css

@@ -0,0 +1,143 @@
+/* ========================================
+   @conduction/nextcloud-vue — Table Styles
+   ======================================== */
+
+/* Table Container */
+.cn-table-container {
+	background: var(--nldesign-component-table-background-color, var(--color-main-background));
+	border-radius: var(--nldesign-border-radius, var(--border-radius));
+	overflow: hidden;
+	box-shadow: 0 2px 4px var(--color-box-shadow);
+	border: 1px solid var(--nldesign-component-table-border-color, var(--color-border));
+	margin-bottom: 20px;
+}
+
+.cn-table-container.cn-table-container--scrollable {
+	max-height: 400px;
+	overflow-y: auto;
+}
+
+/* Base Table */
+.cn-data-table {
+	width: 100%;
+	border-collapse: collapse;
+	background-color: var(--nldesign-component-table-background-color, var(--color-main-background));
+}
+
+.cn-data-table th,
+.cn-data-table td {
+	padding: var(--nldesign-component-table-cell-padding-block, 12px)
+		var(--nldesign-component-table-cell-padding-inline, 12px);
+	text-align: left;
+	border-bottom: 1px solid var(--nldesign-component-table-border-color, var(--color-border));
+	vertical-align: middle;
+}
+
+.cn-data-table th {
+	background: var(--nldesign-component-table-header-background-color, var(--color-background-dark));
+	font-weight: var(--nldesign-component-table-header-font-weight, 500);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-data-table th.cn-table-header--sortable {
+	cursor: pointer;
+	user-select: none;
+	transition: background-color 0.2s ease;
+}
+
+.cn-data-table th.cn-table-header--sortable:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-table-sort-indicator {
+	margin-left: 4px;
+	opacity: 0.6;
+}
+
+/* Row States */
+.cn-table-row {
+	border-bottom: 1px solid var(--nldesign-component-table-border-color, var(--color-border));
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+}
+
+.cn-table-row:hover {
+	background: var(--nldesign-component-table-row-hover-background-color, var(--color-background-hover));
+}
+
+.cn-table-row--selected {
+	background-color: var(--color-primary-light);
+	border-left: 3px solid var(--color-primary);
+}
+
+.cn-table-row--selected:hover {
+	background-color: var(--color-primary-light);
+}
+
+/* Column Types */
+.cn-table-col--checkbox {
+	width: 50px;
+	text-align: center;
+}
+
+.cn-table-col--actions {
+	width: 120px;
+	text-align: center;
+	min-width: 120px;
+}
+
+.cn-table-col--constrained {
+	width: 150px;
+	max-width: 150px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-table-col--expanded {
+	width: auto;
+	min-width: 200px;
+}
+
+.cn-table-col--title {
+	min-width: 120px;
+	max-width: 200px;
+	word-wrap: break-word;
+	overflow: hidden;
+}
+
+/* Loading State */
+.cn-table-loading {
+	text-align: center;
+	padding: 50px;
+}
+
+.cn-table-loading p {
+	margin-top: 20px;
+	color: var(--color-text-maxcontrast);
+}
+
+/* Empty State (inside table) */
+.cn-table-empty td {
+	text-align: center;
+	padding: 48px 24px;
+	color: var(--color-text-maxcontrast);
+}
+
+/* ========================================
+   Backwards compatibility aliases
+   (legacy OpenRegister CSS class names)
+   ======================================== */
+.viewTableContainer { background: var(--nldesign-component-table-background-color, var(--color-main-background)); border-radius: var(--nldesign-border-radius, var(--border-radius)); overflow: hidden; box-shadow: 0 2px 4px var(--color-box-shadow); border: 1px solid var(--nldesign-component-table-border-color, var(--color-border)); margin-bottom: 20px; }
+.viewTableContainer.scrollable { max-height: 400px; overflow-y: auto; }
+.viewTable { width: 100%; border-collapse: collapse; background-color: var(--nldesign-component-table-background-color, var(--color-main-background)); }
+.viewTable th, .viewTable td { padding: 12px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
+.viewTable th { background: var(--color-background-hover); font-weight: 500; color: var(--color-text-maxcontrast); background-color: var(--color-background-dark); }
+.viewTableRow { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color 0.2s ease; }
+.viewTableRow:hover { background: var(--color-background-hover); }
+.viewTableRow.active, .viewTableRowSelected { background: var(--color-primary-light); }
+.tableColumnCheckbox { width: 50px; text-align: center; }
+.tableColumnActions { width: 120px; text-align: center; min-width: 120px; }
+.tableColumnConstrained { width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tableColumnExpanded { width: auto; min-width: 200px; }
+.tableColumnTitle { min-width: 120px; max-width: 200px; word-wrap: break-word; overflow: hidden; }