@conduction/nextcloud-vue 0.1.0-beta.3 → 0.1.0-beta.4

package/src/css/actions-bar.css

@@ -1,48 +1,48 @@
-/* CnActionsBar — Reusable actions toolbar styles */
-
-.cn-actions-bar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: calc(5 * var(--default-grid-baseline));
-	padding: calc(2 * var(--default-grid-baseline));
-	background: var(--color-background-hover);
-	border-radius: var(--border-radius);
-}
-
-.cn-actions-bar__info {
-	font-weight: 500;
-	font-size: var(--default-font-size);
-}
-
-.cn-actions-bar__count {
-	color: var(--color-text-maxcontrast);
-}
-
-.cn-actions-bar__actions {
-	display: flex;
-	align-items: center;
-	gap: calc(2 * var(--default-grid-baseline));
-}
-
-/* View mode toggle container */
-.cn-actions-bar__view-toggle {
-	display: flex;
-	align-items: center;
-}
-
-.cn-actions-bar__view-toggle span {
-	max-height: 34px;
-}
-
-/* Override Nextcloud's pointer-events:none on disabled action items
-   so native title tooltip is visible on hover.
-   The button's disabled attribute still prevents click events. */
-.action.action--disabled {
-	pointer-events: auto !important;
-	cursor: not-allowed;
-}
-
-.action.action--disabled button {
-	cursor: not-allowed;
-}
+/* CnActionsBar — Reusable actions toolbar styles */
+
+.cn-actions-bar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+	padding: calc(2 * var(--default-grid-baseline));
+	background: var(--color-background-hover);
+	border-radius: var(--border-radius);
+}
+
+.cn-actions-bar__info {
+	font-weight: 500;
+	font-size: var(--default-font-size);
+}
+
+.cn-actions-bar__count {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-actions-bar__actions {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+/* View mode toggle container */
+.cn-actions-bar__view-toggle {
+	display: flex;
+	align-items: center;
+}
+
+.cn-actions-bar__view-toggle span {
+	max-height: 34px;
+}
+
+/* Override Nextcloud's pointer-events:none on disabled action items
+   so native title tooltip is visible on hover.
+   The button's disabled attribute still prevents click events. */
+.action.action--disabled {
+	pointer-events: auto !important;
+	cursor: not-allowed;
+}
+
+.action.action--disabled button {
+	cursor: not-allowed;
+}

package/src/css/badge.css

@@ -1,51 +1,51 @@
-/* ========================================
-   @conduction/nextcloud-vue — Status Badge
-   ======================================== */
-
-.cn-status-badge {
-	display: inline-flex;
-	align-items: center;
-	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
-	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: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
-	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(--color-primary-element-light);
-	color: 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);
-}
+/* ========================================
+   @conduction/nextcloud-vue — Status Badge
+   ======================================== */
+
+.cn-status-badge {
+	display: inline-flex;
+	align-items: center;
+	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
+	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: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+	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(--color-primary-element-light);
+	color: 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

@@ -1,128 +1,128 @@
-/* ========================================
-   @conduction/nextcloud-vue — Card Styles
-   ======================================== */
-
-/* Card Grid */
-.cn-card-grid {
-	display: grid;
-	gap: calc(4 * var(--default-grid-baseline));
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-/* Base Card */
-.cn-card {
-	background: var(--color-main-background);
-	border-radius: var(--border-radius-large);
-	padding: calc(5 * var(--default-grid-baseline));
-	box-shadow: 0 2px 8px var(--color-box-shadow);
-	min-height: 200px;
-	transition: transform var(--animation-quick) 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: calc(2 * var(--default-grid-baseline));
-	margin-bottom: calc(3 * var(--default-grid-baseline));
-	padding-bottom: calc(2 * var(--default-grid-baseline));
-	border-bottom: 1px solid var(--color-border);
-}
-
-.cn-card-header h2,
-.cn-card-header h3 {
-	display: flex;
-	align-items: center;
-	gap: calc(2 * var(--default-grid-baseline));
-	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: calc(5 * var(--default-grid-baseline));
-	margin-bottom: calc(5 * var(--default-grid-baseline));
-}
-
-.cn-settings-card h4 {
-	margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
-	color: var(--color-main-text);
-	font-size: 16px;
-	font-weight: 600;
-	display: flex;
-	align-items: center;
-	gap: calc(2 * var(--default-grid-baseline));
-}
-
-.cn-settings-card--collapsible h4 {
-	cursor: pointer;
-	user-select: none;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	transition: color var(--animation-quick) ease;
-	margin-bottom: 0;
-}
-
-.cn-settings-card--collapsible h4:hover {
-	color: var(--color-primary-element);
-}
-
-.cn-settings-card__chevron {
-	transition: transform var(--animation-slow) 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: calc(4 * var(--default-grid-baseline));
-}
-
-/* Stat Grid */
-.cn-stat-grid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: calc(3 * var(--default-grid-baseline));
-	margin-bottom: calc(4 * var(--default-grid-baseline));
-}
-
-.cn-stat-item {
-	display: flex;
-	flex-direction: column;
-	gap: var(--default-grid-baseline);
-}
-
-.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: calc(4 * var(--default-grid-baseline)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
-.card { background: var(--color-main-background); border-radius: var(--border-radius-large); padding: calc(5 * var(--default-grid-baseline)); box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform var(--animation-quick) 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: calc(2 * var(--default-grid-baseline)); margin-bottom: calc(3 * var(--default-grid-baseline)); padding-bottom: calc(2 * var(--default-grid-baseline)); border-bottom: 1px solid var(--color-border); }
-.statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(3 * var(--default-grid-baseline)); margin-bottom: calc(4 * var(--default-grid-baseline)); }
-.statItem { display: flex; flex-direction: column; gap: var(--default-grid-baseline); }
-.statLabel { color: var(--color-text-maxcontrast); font-size: 0.9em; }
-.statValue { font-size: 1.1em; font-weight: 600; }
+/* ========================================
+   @conduction/nextcloud-vue — Card Styles
+   ======================================== */
+
+/* Card Grid */
+.cn-card-grid {
+	display: grid;
+	gap: calc(4 * var(--default-grid-baseline));
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+/* Base Card */
+.cn-card {
+	background: var(--color-main-background);
+	border-radius: var(--border-radius-large);
+	padding: calc(5 * var(--default-grid-baseline));
+	box-shadow: 0 2px 8px var(--color-box-shadow);
+	min-height: 200px;
+	transition: transform var(--animation-quick) 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: calc(2 * var(--default-grid-baseline));
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+	padding-bottom: calc(2 * var(--default-grid-baseline));
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-card-header h2,
+.cn-card-header h3 {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	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: calc(5 * var(--default-grid-baseline));
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-settings-card h4 {
+	margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
+	color: var(--color-main-text);
+	font-size: 16px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-settings-card--collapsible h4 {
+	cursor: pointer;
+	user-select: none;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	transition: color var(--animation-quick) ease;
+	margin-bottom: 0;
+}
+
+.cn-settings-card--collapsible h4:hover {
+	color: var(--color-primary-element);
+}
+
+.cn-settings-card__chevron {
+	transition: transform var(--animation-slow) 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: calc(4 * var(--default-grid-baseline));
+}
+
+/* Stat Grid */
+.cn-stat-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-stat-item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+}
+
+.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: calc(4 * var(--default-grid-baseline)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+.card { background: var(--color-main-background); border-radius: var(--border-radius-large); padding: calc(5 * var(--default-grid-baseline)); box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform var(--animation-quick) 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: calc(2 * var(--default-grid-baseline)); margin-bottom: calc(3 * var(--default-grid-baseline)); padding-bottom: calc(2 * var(--default-grid-baseline)); border-bottom: 1px solid var(--color-border); }
+.statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(3 * var(--default-grid-baseline)); margin-bottom: calc(4 * var(--default-grid-baseline)); }
+.statItem { display: flex; flex-direction: column; gap: var(--default-grid-baseline); }
+.statLabel { color: var(--color-text-maxcontrast); font-size: 0.9em; }
+.statValue { font-size: 1.1em; font-weight: 600; }

package/src/css/dashboard.css

@@ -0,0 +1,70 @@
+/* @conduction/nextcloud-vue — Dashboard component styles */
+
+/* Dashboard page layout */
+.cn-dashboard-page {
+	padding: 20px;
+	max-width: 1400px;
+}
+
+/* Widget grid item borders for non-tile widgets */
+.cn-dashboard-grid :deep(.grid-stack-item-content:has(.cn-widget-wrapper)) {
+	border: 1px solid var(--color-border);
+}
+
+/* Dashboard widget content area */
+.cn-dashboard-widget-content {
+	padding: 16px;
+}
+
+/* Dashboard KPI row inside grid */
+.cn-dashboard-kpi-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 16px;
+	height: 100%;
+}
+
+/* Dashboard chart container */
+.cn-dashboard-chart {
+	padding: 16px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.cn-dashboard-chart__title {
+	margin: 0 0 12px;
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-dashboard-chart__content {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+}
+
+/* Dashboard list widget */
+.cn-dashboard-list {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+.cn-dashboard-list__item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 16px;
+	cursor: pointer;
+	border-bottom: 1px solid var(--color-border-dark);
+}
+
+.cn-dashboard-list__item:last-child {
+	border-bottom: none;
+}
+
+.cn-dashboard-list__item:hover {
+	background: var(--color-background-hover);
+}

package/src/css/detail-page.css

@@ -0,0 +1,168 @@
+/* ========================================
+   @conduction/nextcloud-vue — CnDetailPage Styles
+   ======================================== */
+
+.cn-detail-page {
+	margin-inline: auto;
+	padding: calc(5 * var(--default-grid-baseline));
+}
+
+/* Header */
+.cn-detail-page__header {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+	flex-wrap: wrap;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__header-left {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	min-width: 0;
+}
+
+.cn-detail-page__header-text {
+	min-width: 0;
+}
+
+.cn-detail-page__icon {
+	flex-shrink: 0;
+}
+
+.cn-detail-page__title {
+	margin: 0;
+	font-size: 20px;
+	font-weight: 700;
+	color: var(--color-main-text);
+}
+
+.cn-detail-page__description {
+	margin: 4px 0 0;
+	font-size: var(--default-font-size);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-detail-page__header-actions {
+	display: flex;
+	gap: calc(1 * var(--default-grid-baseline));
+	flex-wrap: wrap;
+	flex-shrink: 0;
+}
+
+/* Loading state */
+.cn-detail-page__loading {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	color: var(--color-text-maxcontrast);
+	justify-content: center;
+	padding-block: calc(8 * var(--default-grid-baseline));
+}
+
+/* Error state */
+.cn-detail-page__error {
+	padding: calc(8 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+}
+
+/* Empty state */
+.cn-detail-page__empty {
+	padding: calc(8 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+}
+
+/* Statistics table */
+.cn-detail-page__stats {
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__section-title {
+	margin: 0 0 calc(2 * var(--default-grid-baseline));
+	font-size: 1.1em;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+
+.cn-detail-page__stats-table {
+	width: 100%;
+	border-collapse: collapse;
+	background: var(--color-main-background);
+	border-radius: var(--border-radius-large);
+	overflow: hidden;
+	border: 1px solid var(--color-border);
+}
+
+.cn-detail-page__stats-table thead th {
+	padding: calc(1.5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+	text-align: left;
+	font-weight: 600;
+	font-size: 0.9em;
+	color: var(--color-text-maxcontrast);
+	background: var(--color-background-hover);
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-detail-page__stats-table tbody td {
+	padding: calc(1.5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+	border-bottom: 1px solid var(--color-border-dark);
+	color: var(--color-main-text);
+	font-size: 0.95em;
+}
+
+.cn-detail-page__stats-table tbody tr:last-child td {
+	border-bottom: none;
+}
+
+.cn-detail-page__stats-row--sub td {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+}
+
+.cn-detail-page__stats-cell--indented {
+	padding-left: calc(5 * var(--default-grid-baseline)) !important;
+}
+
+.cn-detail-page__stats-cell--center {
+	text-align: center;
+}
+
+.cn-detail-page__stats-cell--right {
+	text-align: right;
+}
+
+/* Body & content */
+.cn-detail-page__body {
+	/* Wrapper for all content when not in loading/error/empty state */
+}
+
+.cn-detail-page__content {
+	/* Content area inherits spacing from parent */
+}
+
+.cn-detail-page__sections {
+	margin-top: calc(4 * var(--default-grid-baseline));
+}
+
+/* Footer */
+.cn-detail-page__footer {
+	margin-top: calc(4 * var(--default-grid-baseline));
+	padding-top: calc(3 * var(--default-grid-baseline));
+	border-top: 1px solid var(--color-border);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+	.cn-detail-page {
+		padding: calc(3 * var(--default-grid-baseline));
+	}
+
+	.cn-detail-page__header {
+		flex-direction: column;
+	}
+
+	.cn-detail-page__header-actions {
+		width: 100%;
+	}
+
+}