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

package/src/css/detail-page.css

@@ -0,0 +1,235 @@
+/* ========================================
+   @conduction/nextcloud-vue — CnDetailPage Styles
+   ======================================== */
+
+.cn-detail-page {
+	margin-inline: auto;
+	padding: calc(5 * var(--default-grid-baseline));
+	position: relative;
+}
+
+/* Header */
+.cn-detail-page__header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+	flex-wrap: wrap;
+	gap: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__header-left {
+	display: flex;
+	align-items: center;
+	gap: calc(3 * 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-group {
+	display: flex;
+	align-items: baseline;
+	gap: calc(3 * var(--default-grid-baseline));
+	min-width: 0;
+}
+
+.cn-detail-page__title {
+	margin: 0;
+	font-size: 22px;
+	font-weight: 700;
+	line-height: 1.3;
+	color: var(--color-main-text);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-detail-page__subtitle {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+	white-space: nowrap;
+}
+
+.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(2 * 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 {
+	display: flex;
+	flex-direction: column;
+	gap: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__content {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: calc(4 * var(--default-grid-baseline));
+}
+
+/* Grid layout mode */
+.cn-detail-page__content--grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	gap: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__grid-item {
+	min-width: 0;
+}
+
+.cn-detail-page__widget-title {
+	margin: 0 0 calc(2 * var(--default-grid-baseline)) 0;
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 1.4;
+}
+
+.cn-detail-page__sections {
+	margin-top: calc(4 * var(--default-grid-baseline));
+}
+
+/* Sidebar */
+.cn-detail-page__sidebar {
+	width: 340px;
+	flex-shrink: 0;
+	position: sticky;
+	top: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__sidebar-toggle {
+	position: fixed;
+	right: calc(5 * var(--default-grid-baseline));
+	top: 80px;
+	z-index: 10;
+}
+
+/* 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%;
+	}
+}
+
+@media (max-width: 600px) {
+	.cn-detail-page__content--grid {
+		grid-template-columns: 1fr;
+	}
+
+	.cn-detail-page__content--grid .cn-detail-page__grid-item {
+		grid-column: 1 / -1 !important;
+		grid-row: auto !important;
+	}
+}

package/src/css/detail.css

@@ -1,68 +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; }
+/* ========================================
+   @conduction/nextcloud-vue — Detail Grid & Layout Utility Styles
+   ======================================== */
+
+/* Detail Grid (metadata display) */
+.cn-detail-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	gap: calc(4 * var(--default-grid-baseline));
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-detail-item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
+	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: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-detail-layout__header {
+	display: flex;
+	align-items: center;
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(6 * var(--default-grid-baseline));
+}
+
+.cn-detail-layout__title {
+	flex: 1;
+	margin: 0;
+	font-size: 1.5em;
+	color: var(--color-main-text);
+}
+
+.cn-detail-layout__actions {
+	display: flex;
+	gap: calc(2 * var(--default-grid-baseline));
+	flex-shrink: 0;
+}
+
+.cn-detail-layout__content {
+	margin-top: calc(4 * var(--default-grid-baseline));
+}
+
+/* Backwards compatibility aliases */
+.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(4 * var(--default-grid-baseline)); margin-bottom: calc(5 * var(--default-grid-baseline)); }
+.detail-item { display: flex; flex-direction: column; gap: var(--default-grid-baseline); padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline)); 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: calc(5 * var(--default-grid-baseline)); margin-inline-start: calc(5 * var(--default-grid-baseline)); margin-inline-end: calc(5 * var(--default-grid-baseline)); }

package/src/css/index-page.css

@@ -0,0 +1,44 @@
+/* CnIndexPage — Index page layout styles */
+/* Header styles: see page-header.css (CnPageHeader) */
+/* Actions bar styles: see actions-bar.css (CnActionsBar) */
+
+.cn-index-page {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	padding: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-index-page__below-header {
+    margin-bottom: calc(4 * var(--default-grid-baseline));
+}
+
+/* Body layout */
+.cn-index-page__body {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
+.cn-index-page__main {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	overflow-y: auto;
+}
+
+.cn-index-page__loading {
+	display: flex;
+	justify-content: center;
+	padding: calc(15 * var(--default-grid-baseline));
+}
+
+.cn-index-page__empty {
+	padding: calc(10 * var(--default-grid-baseline)) calc(5 * var(--default-grid-baseline));
+	text-align: center;
+}
+
+.cn-index-page__pagination {
+	margin-top: calc(4 * var(--default-grid-baseline));
+}

package/src/css/index-sidebar.css

@@ -0,0 +1,193 @@
+/* CnIndexSidebar — NcAppSidebar wrapper styles */
+
+/* Tab content: limit height to container so overflow shows a scrollbar */
+.cn-index-sidebar__tab-content {
+	max-height: 100%;
+	min-height: 0;
+	overflow-y: auto;
+}
+
+/* Sidebar header icon (compact mode figure area) */
+.cn-index-sidebar__header-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	color: var(--color-primary-element);
+}
+
+.cn-index-sidebar__header-emoji {
+	font-size: 28px;
+	line-height: 1;
+}
+
+/* Search tab sections */
+.cn-index-sidebar__section {
+	padding: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-index-sidebar__section h3 {
+	margin: 0 0 calc(3 * var(--default-grid-baseline)) 0;
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-index-sidebar__description {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
+}
+
+.cn-index-sidebar__filter-group {
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+}
+
+.cn-index-sidebar__filter-header {
+	display: flex;
+	align-items: center;
+	gap: var(--default-grid-baseline);
+	margin-bottom: var(--default-grid-baseline);
+}
+
+.cn-index-sidebar__filter-label {
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--color-main-text);
+}
+
+.cn-index-sidebar__info-btn {
+	min-width: var(--clickable-area-small, 24px) !important;
+	min-height: var(--clickable-area-small, 24px) !important;
+	width: var(--clickable-area-small, 24px) !important;
+	height: var(--clickable-area-small, 24px) !important;
+	padding: 0 !important;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-index-sidebar__info-btn:hover {
+	color: var(--color-primary);
+}
+
+.cn-index-sidebar__filter-description {
+	padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
+	max-width: 260px;
+	font-size: 13px;
+	color: var(--color-main-text);
+	margin: 0;
+	line-height: var(--default-line-height, 1.4);
+}
+
+.cn-index-sidebar__select {
+	width: 100%;
+}
+
+/* Visually hide NcSelect's rendered label — the filter heading already shows it.
+   Keep input-label prop for screen-reader accessibility. */
+.cn-index-sidebar__select label {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.cn-index-sidebar__empty {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-style: italic;
+}
+
+/* ── Columns tab ── */
+
+.cn-sidebar-columns {
+	padding: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns h3 {
+	margin-top: 0;
+	margin-bottom: calc(2 * var(--default-grid-baseline));
+	font-size: 18px;
+	font-weight: 600;
+}
+
+.cn-sidebar-columns__description {
+	color: var(--color-text-maxcontrast);
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+	font-size: var(--default-font-size);
+}
+
+/* Collapsible column group card */
+.cn-sidebar-columns__group {
+	margin-bottom: calc(6 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__group h4 {
+	margin-top: 0;
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+	font-size: var(--default-font-size);
+	font-weight: 600;
+	color: var(--color-text-light);
+	border-bottom: 1px solid var(--color-border);
+	padding-bottom: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__group .checkbox-radio-switch {
+	margin-bottom: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__group .checkbox-radio-switch__content {
+	padding: var(--default-grid-baseline) 0;
+}
+
+.cn-sidebar-columns__group--collapsible {
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	padding: 0;
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__group-header {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	padding: calc(3 * var(--default-grid-baseline));
+	cursor: pointer;
+	user-select: none;
+	transition: background-color var(--animation-quick) ease;
+}
+
+.cn-sidebar-columns__group-header:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-sidebar-columns__group-header h4 {
+	margin: 0;
+	padding: 0;
+	border: none;
+	flex: 1;
+	color: var(--color-main-text);
+}
+
+.cn-sidebar-columns__select-all {
+	margin: 0 !important;
+	font-size: 12px;
+}
+
+.cn-sidebar-columns__group-content {
+	padding: calc(3 * var(--default-grid-baseline));
+	border-top: 1px solid var(--color-border);
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-sidebar-columns__empty {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-style: italic;
+}

package/src/css/index.css

@@ -1,8 +1,17 @@
-/* @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';
+/* @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';
+@import './page-header.css';
+@import './actions-bar.css';
+@import './index-page.css';
+@import './index-sidebar.css';
+@import './dashboard.css';
+@import './detail-page.css';
+@import './CnSchemaFormDialog.css';
+@import './timeline-stages.css';
+@import './context-menu.css';