@conduction/nextcloud-vue 2.62.0 → 2.63.0

package/dist/esm/nextcloud-vue.css

@@ -325,6 +325,87 @@
 	outline-offset: -2px;
 }
 
+/* Header filter button (CnDataTable `filterable`). 24px hit area with the
+   16px icon; the filled icon plus the primary colour marks an active filter,
+   so the state never rests on colour alone. */
+.cn-table-header__filter {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	margin: 0 0 0 4px;
+	padding: 0;
+	border: none;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-table-header__filter:hover {
+	background-color: var(--color-background-hover);
+	color: var(--color-main-text);
+}
+
+.cn-table-header__filter:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 0;
+}
+
+.cn-table-header__filter--active {
+	color: var(--color-primary-element);
+}
+
+/* Active header filters above the table, one removable chip each. */
+.cn-data-table__filter-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	margin: 0 0 8px;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-data-table__filter-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 4px 2px 10px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-pill, 16px);
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-data-table__filter-chip-remove {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	margin: 0;
+	padding: 0;
+	border: none;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+
+.cn-data-table__filter-chip-remove:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-data-table__filter-chip-remove:focus-visible {
+	outline: 2px solid var(--color-main-text);
+}
+
 /* Multi-column sort priority badge (1, 2, 3), rendered only when two or more rendered, sortable columns are sorted. */
 .cn-table-sort-badge {
 	display: inline-flex;
@@ -2584,6 +2665,55 @@
 .cn-dashboard-list__item:hover {
 	background: var(--color-background-hover);
 }
+
+/* "Install <app>" placeholder in a widget whose app is missing.
+ *
+ * NcEmptyContent centres its content with `justify-content: center`. In a
+ * two-row dashboard tile (about 150px inside an `overflow: hidden` wrapper)
+ * the icon, name, description and button are taller than the tile, and plain
+ * `center` overflows on BOTH sides, so the top ran out of the widget and the
+ * name was cut off. `safe center` falls back to the start edge when the
+ * content does not fit, the spacing is compact, and what still does not fit
+ * scrolls instead of being clipped. Shared by CnDashboardPage and
+ * CnDetailWidgetHost (`cn-requires-app`). The class is doubled to outrank
+ * NcEmptyContent's own scoped rules (`.empty-content[data-v-…]`) whatever
+ * order the stylesheets load in. */
+.cn-requires-app.cn-requires-app.empty-content,
+.cn-requires-app.cn-requires-app .empty-content {
+	justify-content: safe center;
+	min-height: 0;
+	max-height: 100%;
+	overflow: auto;
+	margin: 0;
+	padding: calc(2 * var(--default-grid-baseline, 4px));
+	gap: var(--default-grid-baseline, 4px);
+	box-sizing: border-box;
+}
+
+.cn-requires-app.cn-requires-app .empty-content__icon {
+	width: auto;
+	height: auto;
+	min-height: 0;
+	margin: 0;
+	opacity: 0.7;
+}
+
+.cn-requires-app.cn-requires-app .empty-content__name {
+	margin: 0;
+	font-size: var(--default-font-size, 15px);
+	font-weight: 600;
+	text-align: center;
+}
+
+.cn-requires-app.cn-requires-app .empty-content__description {
+	margin: 0;
+	text-align: center;
+	font-size: 0.9em;
+}
+
+.cn-requires-app.cn-requires-app .empty-content__action {
+	margin-top: var(--default-grid-baseline, 4px);
+}
 /* ========================================
    @conduction/nextcloud-vue — CnDetailPage Styles
    ======================================== */
@@ -2692,6 +2822,25 @@
 	flex-shrink: 0;
 }
 
+/* Every control in the header sits on one line at one height. The lifecycle
+   bar carries `margin: 0 0 8px` for its place above a page body; in the
+   header that margin pushed its buttons up and made the row 8px taller, so
+   the Edit button beside it read as the bigger one. A consumer's actions
+   component can bring its own margins too, so they are reset here as well. */
+.cn-detail-page .cn-detail-page__header-actions .cn-lifecycle-actions {
+	margin: 0;
+	flex-wrap: nowrap;
+}
+
+.cn-detail-page .cn-detail-page__header-actions > * {
+	margin-block: 0;
+}
+
+.cn-detail-page .cn-detail-page__header-actions .button-vue {
+	min-height: var(--default-clickable-area);
+	block-size: var(--default-clickable-area);
+}
+
 /* The sentence a refused lock acquire left behind, under the locked banner. */
 .cn-detail-page__lock-refusal {
 	margin: 0 0 calc(3 * var(--default-grid-baseline));
@@ -5959,6 +6108,101 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 
+.cn-column-filter[data-v-2cb54356] {
+	z-index: 10000;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	box-sizing: border-box;
+	max-height: 60vh;
+	overflow-y: auto;
+	padding: 12px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-large, 8px);
+	box-shadow: 0 2px 8px var(--color-box-shadow);
+	font-weight: normal;
+	text-align: start;
+}
+.cn-column-filter__heading[data-v-2cb54356] {
+	margin: 0;
+	font-weight: bold;
+}
+.cn-column-filter__options[data-v-2cb54356] {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: none;
+}
+.cn-column-filter__option[data-v-2cb54356] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-height: 32px;
+	cursor: pointer;
+}
+.cn-column-filter__range[data-v-2cb54356] {
+	display: flex;
+	gap: 8px;
+}
+.cn-column-filter__field[data-v-2cb54356] {
+	display: flex;
+	flex: 1 1 0;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+.cn-column-filter__label[data-v-2cb54356] {
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+.cn-column-filter__input[data-v-2cb54356] {
+	width: 100%;
+	box-sizing: border-box;
+	margin: 0;
+}
+.cn-column-filter__hint[data-v-2cb54356] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-column-filter__actions[data-v-2cb54356] {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+}
+.cn-column-filter__button[data-v-2cb54356] {
+	min-height: 34px;
+	padding: 0 12px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+.cn-column-filter__button--primary[data-v-2cb54356] {
+	border-color: var(--color-primary-element);
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+}
+.cn-column-filter__button[data-v-2cb54356]:focus-visible,
+.cn-column-filter__input[data-v-2cb54356]:focus-visible,
+.cn-column-filter__option input[data-v-2cb54356]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-column-filter__sr-only[data-v-2cb54356] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+
 .cn-fk-resolve-cell[data-v-471db666] {
 	white-space: nowrap;
 	overflow: hidden;
@@ -6359,6 +6603,87 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	outline-offset: -2px;
 }
 
+/* Header filter button (CnDataTable `filterable`). 24px hit area with the
+   16px icon; the filled icon plus the primary colour marks an active filter,
+   so the state never rests on colour alone. */
+.cn-table-header__filter {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	margin: 0 0 0 4px;
+	padding: 0;
+	border: none;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-table-header__filter:hover {
+	background-color: var(--color-background-hover);
+	color: var(--color-main-text);
+}
+
+.cn-table-header__filter:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 0;
+}
+
+.cn-table-header__filter--active {
+	color: var(--color-primary-element);
+}
+
+/* Active header filters above the table, one removable chip each. */
+.cn-data-table__filter-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	margin: 0 0 8px;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-data-table__filter-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 4px 2px 10px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-pill, 16px);
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-data-table__filter-chip-remove {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	min-height: 24px;
+	margin: 0;
+	padding: 0;
+	border: none;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--color-main-text);
+	cursor: pointer;
+}
+
+.cn-data-table__filter-chip-remove:hover {
+	background-color: var(--color-background-hover);
+}
+
+.cn-data-table__filter-chip-remove:focus-visible {
+	outline: 2px solid var(--color-main-text);
+}
+
 /* Multi-column sort priority badge (1, 2, 3), rendered only when two or more rendered, sortable columns are sorted. */
 .cn-table-sort-badge {
 	display: inline-flex;
@@ -15141,6 +15466,10 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	font-size: 0.9em;
 	margin-inline-end: auto;
 }
+.cn-form-dialog__switch-wrapper[data-v-c3eeb0a2] {
+	display: flex;
+	flex-direction: column;
+}
 .cn-form-dialog__form[data-v-c3eeb0a2] {
 	display: flex;
 	flex-direction: column;
@@ -18032,6 +18361,83 @@ to { background-position: -200% 0;
 }
 
 
+.cn-timeline-widget[data-v-621fcccf] {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+.cn-timeline-widget__title[data-v-621fcccf] {
+	margin: 0;
+	font-size: var(--font-size-large, 1.1em);
+}
+.cn-timeline-widget__loading[data-v-621fcccf] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-timeline-widget__empty[data-v-621fcccf] {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+.cn-timeline-widget__list[data-v-621fcccf] {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.cn-timeline-widget__event[data-v-621fcccf] {
+	position: relative;
+	display: flex;
+	gap: 12px;
+	padding-block-end: 12px;
+}
+
+/* The line between dots: drawn from each dot down to the next event. */
+.cn-timeline-widget__event[data-v-621fcccf]:not(:last-child)::before {
+	content: '';
+	position: absolute;
+	inset-block: 14px 0;
+	inset-inline-start: 5px;
+	border-inline-start: 2px solid var(--color-border-dark);
+}
+.cn-timeline-widget__dot[data-v-621fcccf] {
+	flex: 0 0 auto;
+	width: 12px;
+	height: 12px;
+	margin-block-start: 4px;
+	border-radius: 50%;
+	background-color: var(--color-primary-element);
+}
+
+/* Upcoming: a hollow dot, plus the word "Upcoming" beside the date. */
+.cn-timeline-widget__event--upcoming .cn-timeline-widget__dot[data-v-621fcccf] {
+	box-sizing: border-box;
+	border: 2px solid var(--color-primary-element);
+	background-color: var(--color-main-background);
+}
+.cn-timeline-widget__body[data-v-621fcccf] {
+	min-width: 0;
+}
+.cn-timeline-widget__when[data-v-621fcccf] {
+	font-size: var(--font-size-small, 13px);
+	color: var(--color-text-maxcontrast);
+}
+.cn-timeline-widget__badge[data-v-621fcccf] {
+	margin-inline-start: 8px;
+	font-size: var(--font-size-small, 13px);
+	font-weight: bold;
+	color: var(--color-main-text);
+}
+.cn-timeline-widget__label[data-v-621fcccf] {
+	margin: 0;
+	font-weight: bold;
+}
+.cn-timeline-widget__detail[data-v-621fcccf] {
+	margin: 0;
+	overflow-wrap: anywhere;
+}
+
+
 .cn-object-card[data-v-6f672c8f] {
 	display: flex;
 	gap: 12px;
@@ -23314,6 +23720,17 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 }
 
 
+.cn-admin-action-card__description[data-v-57907ee5] {
+	margin: 0 0 12px;
+	color: var(--color-text-maxcontrast);
+}
+.cn-admin-action-card__footer[data-v-57907ee5] {
+	display: flex;
+	gap: 8px;
+	margin-block: 8px;
+}
+
+
 .cn-version-info__card[data-v-3dc855b2] {
 	background: var(--color-background-hover);
 	border: 1px solid var(--color-border);
@@ -23698,6 +24115,19 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
   padding: 12px;
 }
 
+.cn-choice-cards__cell[data-v-93473002] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-inline-size: 0;
+}
+
+.cn-choice-cards__actions[data-v-93473002] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 .cn-choice-cards__option[data-v-93473002] {
   position: relative;
   display: block;
@@ -23860,6 +24290,16 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 	padding: 24px 0;
 	color: var(--color-text-maxcontrast);
 }
+.cn-setup-load-result[data-v-75b2078b] {
+	margin: 0;
+	font-size: var(--font-size-small, 13px);
+}
+.cn-setup-load-result--success[data-v-75b2078b] {
+	color: var(--color-success-text, var(--color-success));
+}
+.cn-setup-load-result--error[data-v-75b2078b] {
+	color: var(--color-error-text, var(--color-error));
+}
 .cn-setup-field[data-v-75b2078b] {
 	display: flex;
 	flex-direction: column;
@@ -28690,6 +29130,10 @@ to {
 	padding: 16px;
 	pointer-events: auto;
 }
+.cn-walkthrough__card--docked[data-v-5691d49a] {
+	inset-block-end: 16px;
+	inset-inline-start: 16px;
+}
 .cn-walkthrough__close[data-v-5691d49a] {
 	/* !important beats NcButton's own `position: relative`, which would otherwise
 	   leave the close button in-flow at the card's top-left. */
@@ -33713,6 +34157,11 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	margin-bottom: 12px;
 	color: var(--color-text-maxcontrast);
 }
+.cn-app-root__walkthrough-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
 .cn-app-root__integrations-hint {
 	margin-bottom: 12px;
 	color: var(--color-text-maxcontrast);

package/dist/esm/store/useObjectStore.js

@@ -5,6 +5,7 @@ import { parseResponseError, networkError, genericError } from '../utils/errors.
 import { normalizeFacets } from '../utils/facets.js';
 import { prefixUrl, capitalize, buildHeaders, buildQueryString } from '../utils/headers.js';
 import { extractId } from '../utils/id.js';
+import { dispatchObjectCreated } from '../utils/walkthroughSignals.js';
 import { mergePluginState, mergePluginGetters, mergePluginActions } from './pluginMerge.js';
 import { liveUpdatesPlugin } from './plugins/liveUpdates.js';
 
@@ -830,6 +831,13 @@ const baseActions = {
 				[type]: { ...(this.objects[type] || {}), [savedId]: data },
 			};
 
+			// Every create through the store lets an `advanceOn:
+			// object-created` walkthrough step advance, whichever form made it.
+			if (!isUpdate) {
+				const config = this.objectTypeRegistry[type] || {};
+				dispatchObjectCreated({ register: config.registerSlug || config.register, schema: config.schemaSlug || config.schema, object: data });
+			}
+
 			return data
 		} catch (error) {
 			this.errors = {