@conduction/nextcloud-vue 0.1.0-beta.13 → 0.1.0-beta.14

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -267,6 +267,24 @@ export default {
 	min-width: 0;
 }
 
+/* Content */
+.cn-stats-block__content {
+	flex: 1;
+	min-width: 0;
+	text-align: center;
+}
+
+.cn-stats-block__count {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+	gap: 0.25rem;
+	font-size: 1.2rem;
+	margin-bottom: 0.25rem;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
 .cn-stats-block--horizontal {
 	flex-direction: row;
 	align-items: center;
@@ -336,13 +354,6 @@ export default {
 	color: var(--color-element-error, var(--color-error));
 }
 
-/* Content */
-.cn-stats-block__content {
-	flex: 1;
-	min-width: 0;
-	text-align: center;
-}
-
 .cn-stats-block__header h4 {
 	margin-top: 0;
 	margin-bottom: 0.25rem;
@@ -354,17 +365,6 @@ export default {
 	text-overflow: ellipsis;
 }
 
-.cn-stats-block__count {
-	display: flex;
-	align-items: baseline;
-	justify-content: center;
-	gap: 0.25rem;
-	font-size: 1.2rem;
-	margin-bottom: 0.25rem;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
 .cn-stats-block__count-value {
 	font-size: 2rem;
 	font-weight: bold;

package/src/components/CnTabbedFormDialog/CnTabbedFormDialog.vue

@@ -86,8 +86,10 @@
 			<!-- Primary action button (Save / Create) -->
 			<NcButton
 				v-if="createAnother || result === null"
+				v-tooltip="disableSave && disableSaveTooltip ? disableSaveTooltip : undefined"
 				type="primary"
 				:disabled="loading || disableSave"
+				:aria-label="disableSave && disableSaveTooltip ? disableSaveTooltip : undefined"
 				@click="executeConfirm">
 				<template #icon>
 					<NcLoadingIcon v-if="loading" :size="20" />
@@ -204,6 +206,16 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Tooltip shown on the save button when it is disabled.
+		 * Also used as aria-label so screen readers can explain the blocked state (WCAG 2.1 AA).
+		 *
+		 * @type {string}
+		 */
+		disableSaveTooltip: {
+			type: String,
+			default: '',
+		},
 		/**
 		 * Custom success message shown in the result NcNoteCard.
 		 * Defaults to "{entityName} saved successfully".

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -170,6 +170,13 @@ export default {
 	overflow: hidden;
 }
 
+.cn-widget-wrapper__content {
+	flex: 1;
+	overflow: auto;
+	min-height: 0;
+	padding: 16px;
+}
+
 .cn-widget-wrapper--borderless {
 	border: none;
 	background: transparent;
@@ -214,13 +221,6 @@ export default {
 	text-overflow: ellipsis;
 }
 
-.cn-widget-wrapper__content {
-	flex: 1;
-	overflow: auto;
-	min-height: 0;
-	padding: 16px;
-}
-
 .cn-widget-wrapper__actions {
 	display: flex;
 	gap: 4px;

package/src/composables/useContextMenu.js

@@ -54,7 +54,7 @@ export function useContextMenu() {
 	 * Sets CSS custom properties for x/y coordinates and a data attribute on
 	 * `document.documentElement` so the shared CSS can override Popper positioning.
 	 *
-	 * @param {object} params
+	 * @param {object} params - Context menu trigger parameters.
 	 * @param {any} params.item The item associated with the right-click (row, folder, etc.)
 	 * @param {MouseEvent} params.event The native contextmenu event
 	 */

package/src/css/CnSchemaFormDialog.css

@@ -152,6 +152,11 @@
   background-color: var(--color-primary-light);
 }
 
+/* Applied to each td of the row currently being edited so inputs sit at the same baseline */
+.cn-schema-form__editing-cell {
+  vertical-align: baseline !important;
+}
+
 .cn-schema-form__viewTable tbody tr.cn-schema-form__modified-row {
   background-color: var(--color-warning);
   border-left: 3px solid var(--color-element-warning);
@@ -161,7 +166,9 @@
   background-color: var(--color-warning);
 }
 
-.cn-schema-form__viewTable tbody tr.cn-schema-form__modified-row.cn-schema-form__selected-row {
+.cn-schema-form__viewTable
+  tbody
+  tr.cn-schema-form__modified-row.cn-schema-form__selected-row {
   background-color: var(--color-primary-light);
   border-left: 3px solid var(--color-primary);
 }
@@ -524,6 +531,255 @@
   color: var(--color-info-text);
 }
 
+/* Advanced: Conditional Access Rules — accordion + rule cards */
+.cn-schema-form__conditional-section {
+  margin-top: 32px;
+}
+
+.cn-schema-form__cond-accordion-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--color-background-dark);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-element);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-main-text);
+  text-align: left;
+  transition: background var(--animation-quick) ease;
+}
+
+.cn-schema-form__cond-accordion-header:hover {
+  background: var(--color-background-hover);
+}
+
+.cn-schema-form__cond-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-maxcontrast);
+}
+
+.cn-schema-form__cond-count-badge {
+  margin-left: auto;
+  padding: 2px 8px;
+  background: var(--color-primary-element);
+  color: var(--color-primary-element-text);
+  border-radius: var(--border-radius-pill);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.cn-schema-form__cond-accordion-body {
+  margin-top: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-element);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Per-action container — same border/radius pattern as the RBAC table container */
+.cn-schema-form__cond-action {
+  margin-top: 16px;
+  border: 1px solid var(--color-border-dark);
+  border-radius: var(--border-radius-element);
+  /* overflow visible so NcSelect dropdowns (appendToBody:true) can position correctly */
+  overflow: visible;
+  box-shadow: 0 2px 8px rgba(var(--color-box-shadow-rgb), 0.06);
+}
+
+.cn-schema-form__cond-action:first-of-type {
+  margin-top: 12px;
+}
+
+/* Action header — matches RBAC table <th> row */
+.cn-schema-form__cond-action-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: var(--color-background-dark);
+  border-bottom: 2px solid var(--color-border-dark);
+  border-radius: var(--border-radius-element) var(--border-radius-element) 0 0;
+}
+
+.cn-schema-form__cond-action-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-main-text);
+  text-transform: capitalize;
+}
+
+.cn-schema-form__cond-empty {
+  padding: 12px 16px;
+  color: var(--color-text-maxcontrast);
+  font-style: italic;
+  font-size: 13px;
+  background: var(--color-main-background);
+}
+
+/* Rule card — standalone card so each rule is visually distinct */
+.cn-schema-form__cond-rule-card {
+  margin: 8px;
+  padding: 14px 16px;
+  background: var(--color-main-background);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-element);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: visible;
+  box-shadow: 0 1px 4px rgba(var(--color-box-shadow-rgb), 0.08);
+  transition: background var(--animation-quick) ease,
+    box-shadow var(--animation-quick) ease;
+}
+
+/* Group-based left border — same color variables as the group badges in the RBAC table */
+.cn-schema-form__cond-rule-card--public {
+  border-left: 3px solid var(--color-info);
+}
+.cn-schema-form__cond-rule-card--authenticated {
+  border-left: 3px solid var(--color-warning);
+}
+.cn-schema-form__cond-rule-card--admin {
+  border-left: 3px solid var(--color-success);
+}
+
+/* Rule header row: group badge + select + remove button */
+.cn-schema-form__cond-rule-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Suppress the badge text since the select already shows the group */
+.cn-schema-form__cond-rule-header .cn-schema-form__group-badge {
+  display: none;
+}
+
+.cn-schema-form__cond-rule-group-select {
+  flex: 1;
+  max-width: 260px;
+}
+
+/* Remove extra spacing from vue-select so the group select aligns with the Remove rule button */
+.cn-schema-form__cond-rule-group-select .v-select {
+  margin: 0;
+}
+.cn-schema-form__cond-rule-group-select .vs__dropdown-toggle {
+  padding-bottom: 0;
+}
+
+/* Conditions list */
+.cn-schema-form__cond-match-list {
+  padding-left: 4px;
+}
+
+.cn-schema-form__cond-match-empty {
+  font-size: 12px;
+  font-style: italic;
+  color: var(--color-text-maxcontrast);
+  padding: 4px 0;
+  margin: 0;
+}
+
+.cn-schema-form__cond-match-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--color-border-dark);
+  border-radius: var(--border-radius-element);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(var(--color-box-shadow-rgb), 0.1);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.cn-schema-form__cond-match-table th {
+  background: var(--color-background-dark);
+  color: var(--color-main-text);
+  font-weight: 600;
+  padding: 10px 16px;
+  text-align: left;
+  border-bottom: 2px solid var(--color-border-dark);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.cn-schema-form__cond-match-table td {
+  padding: 10px 16px;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.cn-schema-form__cond-match-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.cn-schema-form__cond-match-actions {
+  width: 44px;
+  text-align: right;
+}
+
+/* Add-condition inline form */
+.cn-schema-form__cond-add-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+  background: var(--color-background-hover);
+  border-radius: var(--border-radius);
+  border: 1px dashed var(--color-border-dark);
+}
+
+/* Three equal columns for Property / Operator / Value selects */
+.cn-schema-form__cond-add-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.cn-schema-form__cond-add-field {
+  min-width: 0;
+}
+
+/* NcSelect (vue-select) must fill its grid cell */
+.cn-schema-form__cond-add-field .v-select {
+  width: 100%;
+  min-width: 0;
+}
+
+/* Custom value input — full width below the three selects, never displaces them */
+.cn-schema-form__cond-custom-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cn-schema-form__cond-custom-input {
+  width: 100%;
+  height: 34px;
+  padding: 4px 10px;
+  border: 1px solid var(--color-border-dark);
+  border-radius: var(--border-radius);
+  background: var(--color-main-background);
+  color: var(--color-main-text);
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.cn-schema-form__cond-custom-input:focus {
+  outline: 2px solid var(--color-primary-element);
+  outline-offset: -1px;
+}
+
+.cn-schema-form__cond-add-actions {
+  display: flex;
+  gap: 8px;
+}
+
 /* Copied from openregister/SolrWarmupModal — also used in other files */
 .cn-schema-form__schema-option {
   display: flex;
@@ -541,6 +797,6 @@
   word-break: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;  
+  -webkit-box-orient: vertical;
   overflow: hidden;
 }

package/src/css/dashboard.css

@@ -7,6 +7,7 @@
 }
 
 /* Widget grid item borders for non-tile widgets */
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
 .cn-dashboard-grid :deep(.grid-stack-item-content:has(.cn-widget-wrapper)) {
 	border: 1px solid var(--color-border);
 }

package/src/css/detail-page.css

@@ -121,6 +121,11 @@
 	border-bottom: 1px solid var(--color-border);
 }
 
+.cn-detail-page__stats-row--sub td {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+}
+
 .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);
@@ -132,11 +137,6 @@
 	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;
 }

package/src/css/index.css

@@ -15,3 +15,4 @@
 @import './CnSchemaFormDialog.css';
 @import './timeline-stages.css';
 @import './context-menu.css';
+@import './patches.css';

package/src/css/patches.css

@@ -0,0 +1,20 @@
+/*
+ * Global theme override for NcDateTimePicker's disabled calendar cells.
+ * The underlying vue2-datepicker library ships hardcoded `#f3f3f3` / `#ccc`,
+ * which breaks dark mode. The popup is portaled to <body>, so this must be
+ * unscoped and lives here rather than in each modal that uses the picker.
+ */
+.mx-calendar-content .cell.disabled {
+	background-color: var(--color-background-dark) !important;
+	color: var(--color-text-maxcontrast) !important;
+	cursor: not-allowed;
+}
+
+.mx-calendar-content .cell.disabled,
+.mx-calendar-content .cell.disabled * {
+	cursor: not-allowed !important;
+}
+
+.mx-calendar-content .cell.disabled:hover {
+	background-color: var(--color-background-dark) !important;
+}

package/src/store/plugins/search.js

@@ -99,25 +99,25 @@ export function searchPlugin() {
 			 */
 			searchVisibleColumns: [],
 
-			/** @private @type {Array} */
+			/** @private */
 			_searchCollection: [],
 
-			/** @private @type {{ total: number, page: number, pages: number, limit: number }} */
+			/** @private */
 			_searchPagination: { total: 0, page: 1, pages: 1, limit: 20 },
 
-			/** @private @type {boolean} */
+			/** @private */
 			_searchLoading: false,
 
-			/** @private @type {object|null} */
+			/** @private */
 			_searchSchema: null,
 
-			/** @private @type {object|null} */
+			/** @private */
 			_searchRegister: null,
 
-			/** @private @type {object} */
+			/** @private */
 			_searchFacets: {},
 
-			/** @private @type {number} Request sequence counter to prevent race conditions */
+			/** @private */
 			_searchRequestId: 0,
 		}),