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

package/src/css/pagination.css

@@ -6,9 +6,9 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	gap: 15px;
-	margin-top: 30px;
-	padding: 20px;
+	gap: calc(4 * var(--default-grid-baseline));
+	margin-top: calc(8 * var(--default-grid-baseline));
+	padding: calc(5 * var(--default-grid-baseline));
 	flex-wrap: nowrap;
 }
 
@@ -26,7 +26,7 @@
 .cn-pagination__nav {
 	display: flex;
 	align-items: center;
-	gap: 10px;
+	gap: calc(2 * var(--default-grid-baseline));
 	flex-grow: 1;
 	justify-content: center;
 }
@@ -34,11 +34,11 @@
 .cn-pagination__numbers {
 	display: flex;
 	align-items: center;
-	gap: 5px;
+	gap: var(--default-grid-baseline);
 }
 
 .cn-pagination__ellipsis {
-	padding: 0 5px;
+	padding: 0 var(--default-grid-baseline);
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9rem;
 }
@@ -46,7 +46,7 @@
 .cn-pagination__page-size {
 	display: flex;
 	align-items: center;
-	gap: 10px;
+	gap: calc(2 * var(--default-grid-baseline));
 	flex-shrink: 0;
 	min-width: 0;
 }
@@ -63,10 +63,10 @@
 }
 
 /* Backwards compatibility aliases */
-.viewPagination { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 30px; padding: 20px; flex-wrap: nowrap; }
+.viewPagination { display: flex; justify-content: space-between; align-items: center; gap: calc(4 * var(--default-grid-baseline)); margin-top: calc(8 * var(--default-grid-baseline)); padding: calc(5 * var(--default-grid-baseline)); 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; }
+.viewPaginationNav { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); flex-grow: 1; justify-content: center; }
+.viewPaginationNumbers { display: flex; align-items: center; gap: var(--default-grid-baseline); }
+.viewPaginationEllipsis { padding: 0 var(--default-grid-baseline); color: var(--color-text-maxcontrast); font-size: 0.9rem; }
+.viewPaginationPageSize { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); flex-shrink: 0; min-width: 0; }

package/src/css/table.css

@@ -4,12 +4,12 @@
 
 /* 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));
+	background: var(--color-main-background);
+	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;
+	border: 1px solid var(--color-border);
+	margin-bottom: calc(5 * var(--default-grid-baseline));
 }
 
 .cn-table-container.cn-table-container--scrollable {
@@ -21,28 +21,27 @@
 .cn-data-table {
 	width: 100%;
 	border-collapse: collapse;
-	background-color: var(--nldesign-component-table-background-color, var(--color-main-background));
+	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);
+	padding: calc(3 * var(--default-grid-baseline));
 	text-align: left;
-	border-bottom: 1px solid var(--nldesign-component-table-border-color, var(--color-border));
+	border-bottom: 1px solid 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);
+	background: var(--color-background-dark);
+	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;
+	transition: background-color var(--animation-quick) ease;
 }
 
 .cn-data-table th.cn-table-header--sortable:hover {
@@ -50,19 +49,19 @@
 }
 
 .cn-table-sort-indicator {
-	margin-left: 4px;
+	margin-left: var(--default-grid-baseline);
 	opacity: 0.6;
 }
 
 /* Row States */
 .cn-table-row {
-	border-bottom: 1px solid var(--nldesign-component-table-border-color, var(--color-border));
+	border-bottom: 1px solid var(--color-border);
 	cursor: pointer;
-	transition: background-color 0.2s ease;
+	transition: background-color var(--animation-quick) ease;
 }
 
 .cn-table-row:hover {
-	background: var(--nldesign-component-table-row-hover-background-color, var(--color-background-hover));
+	background: var(--color-background-hover);
 }
 
 .cn-table-row--selected {
@@ -109,18 +108,18 @@
 /* Loading State */
 .cn-table-loading {
 	text-align: center;
-	padding: 50px;
+	padding: calc(12 * var(--default-grid-baseline));
 }
 
 .cn-table-loading p {
-	margin-top: 20px;
+	margin-top: calc(5 * var(--default-grid-baseline));
 	color: var(--color-text-maxcontrast);
 }
 
 /* Empty State (inside table) */
 .cn-table-empty td {
 	text-align: center;
-	padding: 48px 24px;
+	padding: calc(12 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));
 	color: var(--color-text-maxcontrast);
 }
 
@@ -128,12 +127,12 @@
    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 { background: var(--color-main-background); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 2px 4px var(--color-box-shadow); border: 1px solid var(--color-border); margin-bottom: calc(5 * var(--default-grid-baseline)); }
 .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 { width: 100%; border-collapse: collapse; background-color: var(--color-main-background); }
+.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); 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 { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color var(--animation-quick) ease; }
 .viewTableRow:hover { background: var(--color-background-hover); }
 .viewTableRow.active, .viewTableRowSelected { background: var(--color-primary-light); }
 .tableColumnCheckbox { width: 50px; text-align: center; }

package/src/css/utilities.css

@@ -21,11 +21,11 @@
 
 /* Vue Transition Animations */
 .cn-slide-fade-enter-active {
-	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+	transition: all var(--animation-slow) cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .cn-slide-fade-leave-active {
-	transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
+	transition: all var(--animation-quick) cubic-bezier(0.4, 0, 1, 1);
 }
 
 .cn-slide-fade-enter,

package/src/index.js

@@ -1,11 +1,11 @@
+// CSS — auto-imported so consumers get styles with components
+import './css/index.css'
+
 // Components
 export {
 	CnDataTable,
 	CnFilterBar,
-	CnListViewLayout,
-	CnDetailViewLayout,
 	CnStatusBadge,
-	CnEmptyState,
 	CnPagination,
 	CnSettingsCard,
 	CnSettingsSection,
@@ -16,15 +16,20 @@ export {
 	CnObjectCard,
 	CnCardGrid,
 	CnFacetSidebar,
-	CnViewModeToggle,
 	CnRowActions,
 	CnIndexPage,
 	CnMassActionBar,
+	CnDeleteDialog,
+	CnCopyDialog,
+	CnFormDialog,
 	CnMassDeleteDialog,
 	CnMassCopyDialog,
 	CnKpiGrid,
 	CnMassExportDialog,
 	CnMassImportDialog,
+	CnIndexSidebar,
+	CnRegisterMapping,
+	registerIcons,
 } from './components/index.js'
 
 // Store
@@ -37,6 +42,7 @@ export {
 	relationsPlugin,
 	filesPlugin,
 	lifecyclePlugin,
+	registerMappingPlugin,
 } from './store/plugins/index.js'
 
 // Composables
@@ -44,7 +50,4 @@ export { useListView, useDetailView, useSubResource } from './composables/index.
 
 // Utilities
 export { buildHeaders, buildQueryString, parseResponseError, networkError, genericError } from './utils/index.js'
-export { columnsFromSchema, formatValue, filtersFromSchema } from './utils/index.js'
-
-// CSS (consumers should import separately)
-// import '@conduction/nextcloud-vue/src/css/index.css'
+export { columnsFromSchema, formatValue, filtersFromSchema, fieldsFromSchema } from './utils/index.js'

package/src/store/plugins/index.js

@@ -2,3 +2,4 @@ export { auditTrailsPlugin } from './auditTrails.js'
 export { relationsPlugin } from './relations.js'
 export { filesPlugin } from './files.js'
 export { lifecyclePlugin } from './lifecycle.js'
+export { registerMappingPlugin } from './registerMapping.js'

package/src/store/plugins/registerMapping.js

@@ -0,0 +1,185 @@
+import { buildHeaders } from '../../utils/headers.js'
+
+/**
+ * Register mapping plugin for the object store.
+ *
+ * Adds state and actions for fetching OpenRegister registers and their
+ * schemas, used by CnRegisterMapping to populate dropdowns.
+ *
+ * State: registers, registerSchemas, registersLoading, registersError
+ * Actions: fetchRegisters, fetchSchemasForRegister, clearRegisterMapping
+ * Getters: getRegisters, registerOptions, schemaOptions, isRegistersLoading, getRegistersError
+ *
+ * @return {Function} Plugin factory
+ *
+ * @example
+ * const useStore = createObjectStore('object', {
+ *   plugins: [registerMappingPlugin()],
+ * })
+ * const store = useStore()
+ * await store.fetchRegisters()
+ * const options = store.registerOptions       // [{ label, value }]
+ * const schemas = store.schemaOptions('5')    // [{ label, value }]
+ */
+export function registerMappingPlugin() {
+	return {
+		name: 'RegisterMapping',
+
+		state: () => ({
+			/** @type {Array} All available registers from OpenRegister */
+			registers: [],
+			/** @type {Object<string, Array>} Schemas keyed by register ID */
+			registerSchemas: {},
+			/** @type {boolean} Whether registers are being fetched */
+			registersLoading: false,
+			/** @type {string|null} Error message from last fetch */
+			registersError: null,
+		}),
+
+		getters: {
+			/** @return {Array} Raw register list */
+			getRegisters: (state) => state.registers,
+
+			/** @return {boolean} Whether registers are loading */
+			isRegistersLoading: (state) => state.registersLoading,
+
+			/** @return {string|null} Last error */
+			getRegistersError: (state) => state.registersError,
+
+			/**
+			 * Registers as NcSelect-compatible options.
+			 *
+			 * @return {Array<{label: string, value: string}>}
+			 */
+			registerOptions: (state) => state.registers.map((r) => ({
+				label: r.title || r.slug || `Register ${r.id}`,
+				value: String(r.id),
+			})),
+		},
+
+		actions: {
+			/**
+			 * Get schemas for a register as NcSelect options.
+			 *
+			 * @param {string|number} registerId Register ID
+			 * @return {Array<{label: string, value: string}>}
+			 */
+			schemaOptions(registerId) {
+				const id = String(registerId)
+				return (this.registerSchemas[id] || []).map((s) => ({
+					label: s.title || s.slug || `Schema ${s.id}`,
+					value: String(s.id),
+				}))
+			},
+
+			/**
+			 * Fetch all registers from OpenRegister with expanded schemas.
+			 *
+			 * @param {boolean} [withSchemas=true] Include schemas in response
+			 * @return {Promise<Array>} Fetched registers
+			 */
+			async fetchRegisters(withSchemas = true) {
+				this.registersLoading = true
+				this.registersError = null
+
+				try {
+					let url = '/apps/openregister/api/registers'
+					if (withSchemas) {
+						url += '?_extend[]=schemas'
+					}
+
+					const response = await fetch(url, {
+						method: 'GET',
+						headers: buildHeaders(),
+					})
+
+					if (!response.ok) {
+						this.registersError = `Failed to fetch registers: ${response.statusText}`
+						return []
+					}
+
+					const data = await response.json()
+					const results = data.results || data
+					this.registers = Array.isArray(results) ? results : []
+
+					// Cache expanded schemas by register ID
+					if (withSchemas) {
+						for (const reg of this.registers) {
+							if (Array.isArray(reg.schemas) && reg.schemas.length > 0) {
+								this.registerSchemas = {
+									...this.registerSchemas,
+									[String(reg.id)]: reg.schemas.filter(
+										(s) => s && typeof s === 'object' && s.id,
+									),
+								}
+							}
+						}
+					}
+
+					return this.registers
+				} catch (error) {
+					this.registersError = error.message || 'Network error fetching registers'
+					return []
+				} finally {
+					this.registersLoading = false
+				}
+			},
+
+			/**
+			 * Fetch schemas for a specific register.
+			 * Returns cached data if already fetched via expanded registers.
+			 *
+			 * @param {string|number} registerId Register ID
+			 * @return {Promise<Array>} Schemas for the register
+			 */
+			async fetchSchemasForRegister(registerId) {
+				const id = String(registerId)
+
+				// Return cached if available and non-empty
+				if (this.registerSchemas[id]?.length > 0) {
+					return this.registerSchemas[id]
+				}
+
+				// Check registers array for expanded schemas
+				const register = this.registers.find((r) => String(r.id) === id)
+				if (register?.schemas?.length > 0) {
+					const schemas = register.schemas.filter(
+						(s) => s && typeof s === 'object' && s.id,
+					)
+					if (schemas.length > 0) {
+						this.registerSchemas = { ...this.registerSchemas, [id]: schemas }
+						return schemas
+					}
+				}
+
+				// Fetch from API as fallback
+				try {
+					const response = await fetch(
+						`/apps/openregister/api/registers/${id}?_extend[]=schemas`,
+						{ method: 'GET', headers: buildHeaders() },
+					)
+					if (!response.ok) return []
+
+					const data = await response.json()
+					const schemas = (data.schemas || []).filter(
+						(s) => s && typeof s === 'object' && s.id,
+					)
+					this.registerSchemas = { ...this.registerSchemas, [id]: schemas }
+					return schemas
+				} catch {
+					return []
+				}
+			},
+
+			/**
+			 * Clear all register mapping state.
+			 */
+			clearRegisterMapping() {
+				this.registers = []
+				this.registerSchemas = {}
+				this.registersLoading = false
+				this.registersError = null
+			},
+		},
+	}
+}