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

package/src/css/layout.css

@@ -1,90 +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; }
+/* ========================================
+   @conduction/nextcloud-vue — Layout & Filter Utility Styles
+   ======================================== */
+
+/* List View Layout */
+.cn-list-layout {
+	padding: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-list-layout__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-list-layout__title {
+	display: flex;
+	align-items: baseline;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.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: calc(2 * var(--default-grid-baseline));
+}
+
+/* Filter Bar */
+.cn-filter-bar {
+	display: flex;
+	align-items: center;
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+	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: calc(2 * var(--default-grid-baseline));
+	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: calc(5 * var(--default-grid-baseline));
+	padding-inline: calc(5 * var(--default-grid-baseline));
+}
+
+/* Loading Container */
+.cn-loading-container {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	color: var(--color-text-maxcontrast);
+	justify-content: center;
+	padding-block: calc(10 * var(--default-grid-baseline));
+}
+
+/* Backwards compatibility aliases */
+.dashboardContent { margin-inline: auto; max-width: 1200px; padding-block: calc(5 * var(--default-grid-baseline)); padding-inline: calc(5 * var(--default-grid-baseline)); }
+.loadingContainer { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); color: var(--color-text-maxcontrast); justify-content: center; padding-block: calc(10 * var(--default-grid-baseline)); }

package/src/css/page-header.css

@@ -0,0 +1,35 @@
+/* CnPageHeader — Reusable page header styles */
+
+.cn-page-header {
+	display: flex;
+	align-items: flex-start;
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+	/* Clear the Nextcloud navigation toggle button (44px wide, absolutely positioned) */
+	padding-left: 44px;
+}
+
+.cn-page-header__icon {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	padding-top: var(--default-grid-baseline);
+	color: var(--color-primary);
+}
+
+.cn-page-header__text {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-page-header__title {
+	margin: 0 0 var(--default-grid-baseline) 0;
+	font-size: 2rem;
+	font-weight: 300;
+}
+
+.cn-page-header__description {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+	font-size: var(--default-font-size);
+}

package/src/css/pagination.css

@@ -1,72 +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; }
+/* ========================================
+   @conduction/nextcloud-vue — Pagination
+   ======================================== */
+
+.cn-pagination {
+	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;
+}
+
+.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: calc(2 * var(--default-grid-baseline));
+	flex-grow: 1;
+	justify-content: center;
+}
+
+.cn-pagination__numbers {
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+}
+
+.cn-pagination__ellipsis {
+	padding: 0 var(--default-grid-baseline);
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9rem;
+}
+
+.cn-pagination__page-size {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	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: 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: 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

@@ -1,143 +1,142 @@
-/* ========================================
-   @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; }
+/* ========================================
+   @conduction/nextcloud-vue — Table Styles
+   ======================================== */
+
+/* Table Container */
+.cn-table-container {
+	background: var(--color-main-background);
+	border-radius: var(--border-radius);
+	overflow-x: auto;
+	box-shadow: 0 2px 4px var(--color-box-shadow);
+	border: 1px solid var(--color-border);
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+.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(--color-main-background);
+}
+
+.cn-data-table th,
+.cn-data-table td {
+	padding: calc(3 * var(--default-grid-baseline));
+	text-align: left;
+	border-bottom: 1px solid var(--color-border);
+	vertical-align: middle;
+}
+
+.cn-data-table th {
+	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 var(--animation-quick) ease;
+}
+
+.cn-data-table th.cn-table-header--sortable:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-table-sort-indicator {
+	margin-left: var(--default-grid-baseline);
+	opacity: 0.6;
+}
+
+/* Row States */
+.cn-table-row {
+	border-bottom: 1px solid var(--color-border);
+	cursor: pointer;
+	transition: background-color var(--animation-quick) ease;
+}
+
+.cn-table-row:hover {
+	background: var(--color-background-hover);
+}
+
+.cn-table-row--selected {
+	background-color: var(--color-primary-light);
+	box-shadow: inset 3px 0 0 0 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: calc(12 * var(--default-grid-baseline));
+}
+
+.cn-table-loading p {
+	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: calc(12 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));
+	color: var(--color-text-maxcontrast);
+}
+
+/* ========================================
+   Backwards compatibility aliases
+   (legacy OpenRegister CSS class names)
+   ======================================== */
+.viewTableContainer { background: var(--color-main-background); border-radius: var(--border-radius); overflow-x: hidden; overflow-y: visible; 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(--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 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; }
+.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; }