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

package/src/css/detail.css

@@ -1,68 +1,68 @@
-/* ========================================
-   @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)); }
+/* ========================================
+   @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

@@ -1,32 +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 {
-	padding: calc(5 * var(--default-grid-baseline));
-}
-
-/* Body layout */
-.cn-index-page__body {
-	display: flex;
-}
-
-.cn-index-page__main {
-	flex: 1;
-	min-width: 0;
-}
-
-.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));
-}
+/* 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

@@ -1,187 +1,193 @@
-/* CnIndexSidebar — NcAppSidebar wrapper styles */
-
-/* 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));
-	min-height: calc(100vh - 200px);
-}
-
-.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;
-}
+/* 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,12 +1,16 @@
-/* @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';
+/* @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';