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

package/src/css/timeline-stages.css

@@ -0,0 +1,220 @@
+/* =============================================
+   CnTimelineStages — Timeline / progress stages
+   ============================================= */
+
+/* ---------- Root container ---------- */
+.cn-timeline-stages {
+	display: flex;
+	align-items: flex-start;
+	gap: 0;
+	width: 100%;
+}
+
+/* Horizontal: left-to-right, scrollable overflow */
+.cn-timeline-stages--horizontal {
+	flex-direction: row;
+	overflow-x: auto;
+	padding-bottom: calc(var(--default-grid-baseline, 4px) * 1);
+}
+
+/* Vertical: top-to-bottom */
+.cn-timeline-stages--vertical {
+	flex-direction: column;
+}
+
+/* ---------- Stage node ---------- */
+.cn-timeline-stages__stage {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: relative;
+	flex: 1 1 0;
+	min-width: calc(var(--default-grid-baseline, 4px) * 20); /* 80px */
+	text-align: center;
+	padding: calc(var(--default-grid-baseline, 4px) * 1);
+	border-radius: var(--border-radius-large, 10px);
+	transition: background-color 0.15s ease;
+}
+
+/* Vertical stages: row layout */
+.cn-timeline-stages--vertical .cn-timeline-stages__stage {
+	flex-direction: row;
+	align-items: center;
+	text-align: left;
+	min-width: 0;
+	gap: calc(var(--default-grid-baseline, 4px) * 3);
+}
+
+/* ---------- Track line (horizontal) ---------- */
+.cn-timeline-stages--horizontal .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
+	content: '';
+	position: absolute;
+	top: 16px; /* half of 32px indicator */
+	right: calc(50% + 16px + 4px);
+	left: calc(-50% + 16px + 4px);
+	height: 2px;
+	background-color: var(--color-border, #ededed);
+	z-index: 0;
+}
+
+/* Completed + current track segments: filled */
+.cn-timeline-stages--horizontal .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage::before,
+.cn-timeline-stages--horizontal .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage--current::before {
+	background-color: var(--color-success-text, var(--color-success, #46ba61));
+}
+
+/* ---------- Track line (vertical) ---------- */
+.cn-timeline-stages--vertical .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
+	content: '';
+	position: absolute;
+	left: 15px; /* center of 32px indicator */
+	top: -6px;
+	height: 6px;
+	width: 2px;
+	background-color: var(--color-border, #ededed);
+	z-index: 0;
+}
+
+/* Completed + current track segments: filled (vertical) */
+.cn-timeline-stages--vertical .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage::before,
+.cn-timeline-stages--vertical .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage--current::before {
+	background-color: var(--color-success-text, var(--color-success, #46ba61));
+}
+
+/* ---------- Indicator (circle) ---------- */
+.cn-timeline-stages__indicator {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	flex-shrink: 0;
+	position: relative;
+	z-index: 1;
+	border: 2px solid var(--color-border, #ededed);
+	background-color: var(--color-main-background, #fff);
+	transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+/* Completed indicator: success green with white icon */
+.cn-timeline-stages__stage--completed .cn-timeline-stages__indicator {
+	background-color: var(--color-success-text, var(--color-success, #46ba61));
+	border-color: var(--color-success-text, var(--color-success, #46ba61));
+	color: #fff;
+}
+
+/* Current indicator: primary blue */
+.cn-timeline-stages__stage--current .cn-timeline-stages__indicator {
+	background-color: var(--color-primary-element, #0082c9);
+	border-color: var(--color-primary-element, #0082c9);
+	color: var(--color-primary-element-text, #fff);
+}
+
+/* ---------- Checkmark SVG ---------- */
+.cn-timeline-stages__checkmark {
+	width: 16px;
+	height: 16px;
+}
+
+/* ---------- Current dot ---------- */
+.cn-timeline-stages__dot {
+	display: block;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	background-color: currentColor;
+}
+
+/* ---------- Label ---------- */
+.cn-timeline-stages__label {
+	display: block;
+	margin-top: calc(var(--default-grid-baseline, 4px) * 1);
+	font-size: 0.9em;
+	line-height: 1.3;
+	color: var(--color-text-maxcontrast, #767676);
+	word-break: break-word;
+}
+
+/* Vertical: label aligns with indicator center */
+.cn-timeline-stages--vertical .cn-timeline-stages__label {
+	margin-top: 0;
+}
+
+/* Completed stage label */
+.cn-timeline-stages__stage--completed .cn-timeline-stages__label {
+	color: var(--color-main-text, #222);
+}
+
+/* Current stage label: bold and prominent */
+.cn-timeline-stages__stage--current .cn-timeline-stages__label {
+	color: var(--color-main-text, #222);
+	font-weight: bold;
+}
+
+/* ---------- Subtitle ---------- */
+.cn-timeline-stages__subtitle {
+	display: block;
+	font-size: 0.8em;
+	line-height: 1.3;
+	color: var(--color-text-maxcontrast, #767676);
+	margin-top: 2px;
+}
+
+/* ---------- Small size variant ---------- */
+.cn-timeline-stages--small .cn-timeline-stages__indicator {
+	width: 20px;
+	height: 20px;
+}
+
+.cn-timeline-stages--small .cn-timeline-stages__checkmark {
+	width: 12px;
+	height: 12px;
+}
+
+.cn-timeline-stages--small .cn-timeline-stages__dot {
+	width: 6px;
+	height: 6px;
+}
+
+.cn-timeline-stages--small .cn-timeline-stages__label {
+	font-size: 0.85em;
+}
+
+.cn-timeline-stages--small .cn-timeline-stages__stage {
+	min-width: calc(var(--default-grid-baseline, 4px) * 14); /* 56px */
+}
+
+/* Small horizontal track line offset */
+.cn-timeline-stages--small.cn-timeline-stages--horizontal .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
+	top: 10px; /* half of 20px */
+	right: calc(50% + 10px + 4px);
+	left: calc(-50% + 10px + 4px);
+}
+
+/* Small vertical track line offset */
+.cn-timeline-stages--small.cn-timeline-stages--vertical .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
+	left: 9px; /* center of 20px indicator */
+	top: -6px;
+	height: 6px;
+}
+
+/* ---------- Clickable mode ---------- */
+.cn-timeline-stages--clickable .cn-timeline-stages__stage {
+	cursor: pointer;
+}
+
+.cn-timeline-stages--clickable .cn-timeline-stages__stage:hover {
+	background-color: var(--color-background-dark, #ededed);
+}
+
+/* Focus ring (keyboard only) */
+.cn-timeline-stages--clickable .cn-timeline-stages__stage:focus-visible {
+	outline: 2px solid var(--color-primary-element, #0082c9);
+	outline-offset: 2px;
+}
+
+/* Remove default outline for mouse clicks */
+.cn-timeline-stages--clickable .cn-timeline-stages__stage:focus:not(:focus-visible) {
+	outline: none;
+}

package/src/css/utilities.css

@@ -1,46 +1,46 @@
-/* ========================================
-   @conduction/nextcloud-vue — Utilities
-   ======================================== */
-
-/* Text Utilities */
-.cn-text-ellipsis {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.cn-text-description {
-	font-size: 0.9em;
-	color: var(--color-text-maxcontrast);
-}
-
-.cn-text-success { color: var(--color-success); }
-.cn-text-error { color: var(--color-error); }
-.cn-text-warning { color: var(--color-warning); }
-.cn-text-muted { color: var(--color-text-maxcontrast); }
-
-/* Vue Transition Animations */
-.cn-slide-fade-enter-active {
-	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.cn-slide-fade-leave-active {
-	transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
-}
-
-.cn-slide-fade-enter,
-.cn-slide-fade-enter-from {
-	transform: translateY(-10px);
-	opacity: 0;
-}
-
-.cn-slide-fade-leave-to {
-	transform: translateY(-5px);
-	opacity: 0;
-}
-
-/* Backwards compatibility aliases */
-.textEllipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.textDescription { font-size: 0.9em; color: var(--color-text-maxcontrast); }
-.successMessage { color: var(--color-success); }
-.errorMessage { color: var(--color-error); }
+/* ========================================
+   @conduction/nextcloud-vue — Utilities
+   ======================================== */
+
+/* Text Utilities */
+.cn-text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-text-description {
+	font-size: 0.9em;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-text-success { color: var(--color-success); }
+.cn-text-error { color: var(--color-error); }
+.cn-text-warning { color: var(--color-warning); }
+.cn-text-muted { color: var(--color-text-maxcontrast); }
+
+/* Vue Transition Animations */
+.cn-slide-fade-enter-active {
+	transition: all var(--animation-slow) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cn-slide-fade-leave-active {
+	transition: all var(--animation-quick) cubic-bezier(0.4, 0, 1, 1);
+}
+
+.cn-slide-fade-enter,
+.cn-slide-fade-enter-from {
+	transform: translateY(-10px);
+	opacity: 0;
+}
+
+.cn-slide-fade-leave-to {
+	transform: translateY(-5px);
+	opacity: 0;
+}
+
+/* Backwards compatibility aliases */
+.textEllipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.textDescription { font-size: 0.9em; color: var(--color-text-maxcontrast); }
+.successMessage { color: var(--color-success); }
+.errorMessage { color: var(--color-error); }

package/src/index.js

@@ -1,50 +1,91 @@
-// Components
-export {
-	CnDataTable,
-	CnFilterBar,
-	CnListViewLayout,
-	CnDetailViewLayout,
-	CnStatusBadge,
-	CnEmptyState,
-	CnPagination,
-	CnSettingsCard,
-	CnSettingsSection,
-	CnStatsBlock,
-	CnConfigurationCard,
-	CnVersionInfoCard,
-	CnCellRenderer,
-	CnObjectCard,
-	CnCardGrid,
-	CnFacetSidebar,
-	CnViewModeToggle,
-	CnRowActions,
-	CnIndexPage,
-	CnMassActionBar,
-	CnMassDeleteDialog,
-	CnMassCopyDialog,
-	CnKpiGrid,
-	CnMassExportDialog,
-	CnMassImportDialog,
-} from './components/index.js'
-
-// Store
-export { useObjectStore, createObjectStore } from './store/index.js'
-export { createSubResourcePlugin, emptyPaginated } from './store/index.js'
-
-// Store plugins
-export {
-	auditTrailsPlugin,
-	relationsPlugin,
-	filesPlugin,
-	lifecyclePlugin,
-} from './store/plugins/index.js'
-
-// Composables
-export { useListView, useDetailView, useSubResource } from './composables/index.js'
-
-// 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'
+// CSS — auto-imported so consumers get styles with components
+import './css/index.css'
+
+// Components
+export {
+	CnDataTable,
+	CnFilterBar,
+	CnStatusBadge,
+	CnPagination,
+	CnSettingsCard,
+	CnSettingsSection,
+	CnStatsBlock,
+	CnConfigurationCard,
+	CnVersionInfoCard,
+	CnCellRenderer,
+	CnObjectCard,
+	CnCardGrid,
+	CnFacetSidebar,
+	CnRowActions,
+	CnContextMenu,
+	CnIndexPage,
+	CnMassActionBar,
+	CnDeleteDialog,
+	CnCopyDialog,
+	CnFormDialog,
+	CnAdvancedFormDialog,
+	CnMassDeleteDialog,
+	CnMassCopyDialog,
+	CnKpiGrid,
+	CnMassExportDialog,
+	CnMassImportDialog,
+	CnIndexSidebar,
+	CnRegisterMapping,
+	CnDashboardPage,
+	CnDashboardGrid,
+	CnWidgetWrapper,
+	CnWidgetRenderer,
+	CnTileWidget,
+	CnItemCard,
+	CnSchemaFormDialog,
+	CnTabbedFormDialog,
+	CnTimelineStages,
+	CnUserActionMenu,
+	CnNotesCard,
+	CnTasksCard,
+	CnDetailCard,
+	CnDetailPage,
+	CnCard,
+	CnStatsPanel,
+	CnJsonViewer,
+	CnDetailGrid,
+	CnProgressBar,
+	CnChartWidget,
+	CnObjectSidebar,
+	CnInfoWidget,
+	CnTableWidget,
+	CnActionsBar,
+	CnIcon,
+	CnPageHeader,
+	CnNoteCard,
+	CnObjectDataWidget,
+	CnObjectMetadataWidget,
+	registerIcons,
+} from './components/index.js'
+
+// Store
+export { useObjectStore, createObjectStore } from './store/index.js'
+export { createCrudStore } from './store/index.js'
+export { createSubResourcePlugin, emptyPaginated } from './store/index.js'
+
+// Store plugins
+export {
+	auditTrailsPlugin,
+	relationsPlugin,
+	filesPlugin,
+	lifecyclePlugin,
+	registerMappingPlugin,
+	selectionPlugin,
+	searchPlugin,
+	SEARCH_TYPE,
+	getRegisterApiUrl,
+	getSchemaApiUrl,
+} from './store/plugins/index.js'
+
+// Composables
+export { useListView, useDetailView, useSubResource, useDashboardView, useContextMenu } from './composables/index.js'
+
+// Utilities
+export { buildHeaders, buildQueryString, parseResponseError, networkError, genericError } from './utils/index.js'
+export { columnsFromSchema, formatValue, filtersFromSchema, fieldsFromSchema } from './utils/index.js'
+export { filterWidgetsByVisibility, isWidgetVisible, getCurrentUserId, getCurrentUserGroups, resetVisibilityCache } from './utils/index.js'

package/src/mixins/gridLayout.js

@@ -0,0 +1,118 @@
+/**
+ * Grid layout mixin for static 12-column CSS grid layouts.
+ *
+ * Provides a shared grid engine for components that render widget-based layouts
+ * using CSS Grid (as opposed to GridStack's absolute positioning). Used by
+ * CnDetailPage for static grid layout mode.
+ *
+ * @mixin gridLayout
+ *
+ * @example
+ * import { gridLayout } from '@conduction/nextcloud-vue/src/mixins/gridLayout.js'
+ *
+ * export default {
+ *   mixins: [gridLayout],
+ *   // Use this.sortedLayout and this.widgetGridStyle(item) in template
+ * }
+ */
+export const gridLayout = {
+	props: {
+		/**
+		 * Grid layout definition. Array of placement objects defining where each widget
+		 * appears in the 12-column grid.
+		 *
+		 * @type {{ id: number, widgetId: string, gridX: number, gridY: number, gridWidth: number, gridHeight?: number, showTitle?: boolean }[]}
+		 */
+		layout: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Widget definitions. Array of widget objects with id and title.
+		 *
+		 * @type {{ id: string, title: string, type?: string }[]}
+		 */
+		widgets: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Number of grid columns.
+		 *
+		 * @type {number}
+		 */
+		columns: {
+			type: Number,
+			default: 12,
+		},
+	},
+
+	computed: {
+		/**
+		 * Layout items sorted by gridY (row) then gridX (column) for proper
+		 * rendering order. Ensures DOM order matches visual order for
+		 * accessibility (WCAG 2.4.3 Focus Order).
+		 *
+		 * @return {Array} Sorted copy of the layout array.
+		 */
+		sortedLayout() {
+			if (!this.layout) return []
+			return [...this.layout].sort((a, b) => {
+				if (a.gridY !== b.gridY) {
+					return a.gridY - b.gridY
+				}
+				return a.gridX - b.gridX
+			})
+		},
+
+		/**
+		 * Whether grid layout mode is active (layout array is provided and non-empty).
+		 *
+		 * @return {boolean}
+		 */
+		hasGridLayout() {
+			return Array.isArray(this.layout) && this.layout.length > 0
+		},
+	},
+
+	methods: {
+		/**
+		 * Compute CSS grid placement styles for a layout item.
+		 *
+		 * Maps the layout item's gridX and gridWidth to CSS grid-column values,
+		 * and gridY + gridHeight to grid-row values.
+		 *
+		 * @param {{ gridX: number, gridWidth: number, gridY?: number, gridHeight?: number }} item - Layout item.
+		 * @return {object} CSS style object for grid-column and grid-row placement.
+		 */
+		widgetGridStyle(item) {
+			const colStart = (item.gridX || 0) + 1
+			const colEnd = colStart + (item.gridWidth || this.columns)
+
+			const style = {
+				gridColumn: `${colStart} / ${colEnd}`,
+			}
+
+			// Only set grid-row if explicit height is provided
+			if (item.gridY !== undefined && item.gridHeight) {
+				const rowStart = item.gridY + 1
+				const rowEnd = rowStart + item.gridHeight
+				style.gridRow = `${rowStart} / ${rowEnd}`
+			}
+
+			return style
+		},
+
+		/**
+		 * Find the widget definition for a layout item.
+		 *
+		 * @param {{ widgetId: string }} item - Layout item with widgetId reference.
+		 * @return {object|undefined} The matching widget definition.
+		 */
+		findWidget(item) {
+			return this.widgets.find(w => w.id === item.widgetId)
+		},
+	},
+}
+
+export default gridLayout