@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -80,10 +80,64 @@
 					</span>
 				</template>
 
+				<!-- A stack (`widgetIds`): every widget is a titled card; the
+				     first joins the open tab, the next ones stand below it. -->
+				<div
+					v-if="entry.widget && entry.stack.length"
+					class="cn-tabs-widget__stack"
+					data-testid="cn-tabs-widget-stack">
+					<div class="cn-tabs-widget__stack-first">
+						<CnDetailWidgetHost
+							:widget="entry.widget"
+							chrome="card"
+							:showCardTitle="true"
+							:showActions="false"
+							:availableWidgets="availableWidgets"
+							:objectId="objectId"
+							:object="objectData"
+							:objectType="objectType"
+							:schemaObject="schemaObject"
+							:register="register"
+							:schema="schema"
+							:store="store"
+							:surface="surface"
+							:integrationContext="integrationContext"
+							:cnRegistry="cnRegistry"
+							@geoSaved="onGeoSaved"
+							@openIntegration="onOpenIntegration"
+							@selectObject="onSelectObject" />
+					</div>
+					<div
+						v-for="child in entry.stack"
+						:key="`${entry.key}-${child.id}`"
+						class="cn-tabs-widget__stack-item"
+						:data-testid="`cn-tabs-widget-stack-${child.id}`">
+						<CnDetailWidgetHost
+							:widget="child"
+							chrome="card"
+							:showCardTitle="true"
+							:showActions="false"
+							:availableWidgets="availableWidgets"
+							:objectId="objectId"
+							:object="objectData"
+							:objectType="objectType"
+							:schemaObject="schemaObject"
+							:register="register"
+							:schema="schema"
+							:store="store"
+							:surface="surface"
+							:integrationContext="integrationContext"
+							:cnRegistry="cnRegistry"
+							@geoSaved="onGeoSaved"
+							@openIntegration="onOpenIntegration"
+							@selectObject="onSelectObject" />
+					</div>
+				</div>
 				<CnDetailWidgetHost
-					v-if="entry.widget"
+					v-else-if="entry.widget"
 					:widget="entry.widget"
 					chrome="bare"
+					:availableWidgets="availableWidgets"
 					:objectId="objectId"
 					:object="objectData"
 					:objectType="objectType"
@@ -114,6 +168,7 @@ import CnTab from '../CnTabs/CnTab.vue'
 import CnTabs from '../CnTabs/CnTabs.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { resolveTabCount } from '../../utils/detailActionModel.js'
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { isActivityWidget } from '../../utils/headerMeta.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
 import { evaluateVisibleWhen, evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
@@ -254,6 +309,11 @@ export default {
 		cnLook: { default: 'nextcloud' },
 		/** The tab list's name under the board look, provided by CnDetailPage (`config.tabsLabel`). */
 		cnDetailTabsLabel: { default: null },
+		/**
+		 * The host's translate (CnAppRoot provides `cnTranslate`), so a tab
+		 * label written in the manifest reads in the user's language.
+		 */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
@@ -263,7 +323,11 @@ export default {
 		 * `tabs[]` entries are `{ widgetId, label?, icon?, count?, countField?, overflow? }`.
 		 * `label` and `icon` fall back to the referenced widget's own title and
 		 * icon. `count` is a number shown after the label; `countField` reads
-		 * it off the record instead (a list counts its items). `overflow: true`
+		 * it off the record instead (a list counts its items). `countFrom`
+		 * counts a list on the server: `"widget"` counts the child widget's
+		 * own list (`content.register`, `schema`, `filter`, tokens such as
+		 * `@objectId` resolved), an object `{ register, schema, filter? }`
+		 * names the list; `count` and `countField` win over it. `overflow: true`
 		 * lists the tab under "More".
 		 *
 		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
@@ -271,7 +335,7 @@ export default {
 		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
 		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
 		 *
-		 * @type {{ tabs?: Array<{widgetId: string, label?: string, icon?: string, count?: number, countField?: string, overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
+		 * @type {{ tabs?: Array<{widgetId?: string, widgetIds?: string[], label?: string, icon?: string, count?: number, countField?: string, countFrom?: ('widget'|{register: string, schema: string, filter?: object}), overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
 		 */
 		content: {
 			type: Object,
@@ -391,6 +455,9 @@ export default {
 			sourceVisibility: {},
 			// Bumped per evaluation round, so a slow answer from an earlier round is dropped.
 			visibilitySeq: 0,
+			// Totals counted for tabs with `countFrom`, by position in `content.tabs`.
+			widgetCounts: {},
+			countSeq: 0,
 			// Tab id named by the route hash that has not appeared yet (still pending).
 			hashTargetId: '',
 			// Items published by the panels, keyed by widget id. Keyed rather
@@ -433,7 +500,7 @@ export default {
 			// whatever its place in the manifest. `index` stays the position in
 			// `content.tabs`, which the source-mode conditions are keyed on.
 			const isActivityTab = (tab) => {
-				const id = typeof tab === 'string' ? tab : tab?.widgetId
+				const id = this.tabWidgetIds(tab)[0]
 				return isActivityWidget(this.availableWidgets.find((w) => w && w.id === id))
 			}
 			const ordered = authored.map((tab, index) => ({ tab, index }))
@@ -455,9 +522,19 @@ export default {
 				if (visibility === 'hidden') {
 					return
 				}
-				const widgetId = typeof tab === 'string' ? tab : tab?.widgetId
-				const widget = this.availableWidgets.find((w) => w && w.id === widgetId) || null
-				const count = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData)
+				// A stack (`widgetIds`) resolves every id; one that names no
+				// widget is skipped. The first that resolves is the panel's.
+				const ids = this.tabWidgetIds(tab)
+				const widgets = ids.length > 1
+					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null).filter(Boolean)
+					: []
+				const widget = ids.length > 1
+					? (widgets[0] || null)
+					: (this.availableWidgets.find((w) => w && w.id === ids[0]) || null)
+				const widgetId = widget ? widget.id : ids[0]
+				const declared = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData)
+				const counted = this.widgetCounts[index]
+				const count = declared === null && typeof counted === 'number' ? counted : declared
 				// The board strip has no "More": every tab is in the strip.
 				let overflow = !this.isBoard && ((tab && tab.overflow === true) || (hideEmpty && count === 0))
 				if (!overflow && !this.isBoard) {
@@ -471,9 +548,10 @@ export default {
 					key: `${widgetId || 'tab'}-${index}`,
 					id: (tab && typeof tab === 'object' && tab.id) || widgetId || '',
 					widgetId,
-					label: (tab && tab.label) || (this.isBoard && isActivityWidget(widget) ? t('nextcloud-vue', 'History') : '') || widgetTitleOf(widget) || widgetId || '',
+					label: this.tabLabel(tab, widget, widgetId),
 					icon: (tab && tab.icon) || widget?.icon || '',
 					widget,
+					stack: widgets.slice(1),
 					count,
 					overflow,
 					pending: visibility === 'pending',
@@ -492,6 +570,17 @@ export default {
 			return t('nextcloud-vue', 'Loading …')
 		},
 
+		/**
+		 * The lists the tabs count (`countFrom`), serialised, to count again
+		 * when they change.
+		 *
+		 * @return {string} The key.
+		 */
+		countSourcesKey() {
+			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
+			return JSON.stringify(tabs.map((tab) => this.countSourceOf(tab)))
+		},
+
 		/** @return {string} The source-mode conditions, serialised, to re-evaluate when they change. */
 		sourceConditionsKey() {
 			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
@@ -604,6 +693,12 @@ export default {
 		objectId() {
 			this.sourceVisibility = {}
 			this.refreshSourceVisibility()
+			this.widgetCounts = {}
+			this.refreshWidgetCounts()
+		},
+
+		countSourcesKey() {
+			this.refreshWidgetCounts()
 		},
 
 		sourceConditionsKey() {
@@ -638,10 +733,14 @@ export default {
 		}
 		this.activeKey = this.resolvedTabs[this.activeIndex]?.key || ''
 		this.refreshSourceVisibility()
+		this.refreshWidgetCounts()
 	},
 
 	mounted() {
-		this._onRefresh = () => this.refreshSourceVisibility()
+		this._onRefresh = () => {
+			this.refreshSourceVisibility()
+			this.refreshWidgetCounts()
+		}
 		subscribe('cn:page:refresh', this._onRefresh)
 		subscribe('cn:widget:refresh', this._onRefresh)
 	},
@@ -652,6 +751,51 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The widget ids a tab names: `widgetIds` (a stack) when it holds at
+		 * least one id, else `widgetId`, or the bare string.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @return {string[]} The ids, at least one entry (possibly undefined).
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-tab-can-hold-a-stack-of-widgets
+		 */
+		tabWidgetIds(tab) {
+			if (typeof tab === 'string') {
+				return [tab]
+			}
+			if (tab && Array.isArray(tab.widgetIds)) {
+				const ids = tab.widgetIds.filter((id) => typeof id === 'string' && id !== '')
+				if (ids.length) {
+					return ids
+				}
+			}
+			return [tab?.widgetId]
+		},
+
+		/**
+		 * The label a tab shows: the authored `label`, else (board look) History
+		 * for the activity widget, else the child widget's title, else its id.
+		 * A manifest label or title goes through the host's translate; the
+		 * library's own History is translated by the library catalogue.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @param {object|null} widget The widget definition it names.
+		 * @param {string} widgetId The widget id.
+		 * @return {string} The label.
+		 * @spec openspec/changes/screens-detail-labels-parity/specs/detail-labels-board-look/spec.md#requirement-detail-labels-read-in-the-users-language
+		 */
+		tabLabel(tab, widget, widgetId) {
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
+			if (tab && typeof tab.label === 'string' && tab.label !== '') {
+				return translate(tab.label)
+			}
+			if (this.isBoard && isActivityWidget(widget)) {
+				return t('nextcloud-vue', 'History')
+			}
+			const title = widgetTitleOf(widget)
+			return title ? translate(title) : (widgetId || '')
+		},
+
 		/**
 		 * Whether a tab shows: `visible`, `hidden`, or `pending` while its
 		 * condition cannot be decided yet (object not loaded, count not back).
@@ -704,6 +848,60 @@ export default {
 			}))
 		},
 
+		/**
+		 * The list a tab counts (`countFrom`): `"widget"` counts the child
+		 * widget's own list (its `content.register`, `content.schema` and
+		 * `content.filter`); an object `{ register, schema, filter? }` names
+		 * the list itself. Null for a tab that does not ask, or a child with
+		 * no list.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @return {{register: string, schema: string, filter: object}|null} The list.
+		 * @spec openspec/changes/screens-tab-counts-parity/specs/tab-counts/spec.md#requirement-a-tab-can-count-its-list
+		 */
+		countSourceOf(tab) {
+			const from = tab && typeof tab === 'object' ? tab.countFrom : null
+			let source = null
+			if (from === 'widget') {
+				// A stack counts its first widget that has a list.
+				const lists = this.tabWidgetIds(tab)
+					.map((id) => this.availableWidgets.find((w) => w && w.id === id))
+					.filter((w) => w && w.content && typeof w.content === 'object' && w.content.register && w.content.schema)
+				source = lists.length ? lists[0].content : null
+			} else if (from && typeof from === 'object') {
+				source = from
+			}
+			if (!source || typeof source.register !== 'string' || source.register === '' || typeof source.schema !== 'string' || source.schema === '') {
+				return null
+			}
+			const filter = source.filter && typeof source.filter === 'object' && !Array.isArray(source.filter) ? source.filter : {}
+			return { register: source.register, schema: source.schema, filter }
+		},
+
+		/**
+		 * Count the list behind every tab with `countFrom`: once on mount,
+		 * when the record changes and after a refresh. A tab keeps its last
+		 * total while the new one is on its way; a failed count shows none.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-tab-counts-parity/specs/tab-counts/spec.md#requirement-a-tab-can-count-its-list
+		 */
+		async refreshWidgetCounts() {
+			const tabs = Array.isArray(this.content?.tabs) ? this.content.tabs : []
+			const seq = ++this.countSeq
+			const ctx = { objectId: this.objectId, object: this.objectData || undefined }
+			await Promise.all(tabs.map(async (tab, index) => {
+				const source = this.countSourceOf(tab)
+				if (!source) {
+					return
+				}
+				const total = await fetchListTotal(source.register, source.schema, source.filter, ctx).catch(() => null)
+				if (seq === this.countSeq) {
+					this.widgetCounts = { ...this.widgetCounts, [index]: total }
+				}
+			}))
+		},
+
 		/** @return {string} The route hash without its `#`, or ''. */
 		currentHash() {
 			const fromRoute = this.$route && typeof this.$route.hash === 'string' ? this.$route.hash : ''
@@ -794,6 +992,13 @@ export default {
 </script>
 
 <style scoped>
+/* A stack (`widgetIds`): the panel's widget, then cards 20px apart. */
+.cn-tabs-widget__stack {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
 /* The panel is the card; the strip is not inside it. There is no title bar
    above the tabs either: the open tab names the panel, so a title row would
    say the same thing twice and cost a row of height on a card that is mostly

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -72,6 +72,10 @@ import '../CnDeltaWidget/index.js'
 import '../CnGaugeWidget/index.js'
 import '../CnFlowRunsWidget/index.js'
 import '../CnTasksWidget/index.js'
+import '../CnSectionsWidget/index.js'
+import '../CnFactsWidget/index.js'
+import '../CnFieldListWidget/index.js'
+import '../CnRecordListWidget/index.js'
 import '../CnNotepadWidget/index.js'
 import '../CnObjectDataWidget/dashboardRegistration.js'
 import '../CnObjectGeoWidget/dashboardRegistration.js'

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -323,6 +323,19 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Fit the table to the tile: the title column (a column's `grow: true`,
+		 * else `title` or `name`, else the first) shrinks and ends in an
+		 * ellipsis so the trailing columns stay visible. On by default; pass
+		 * `false` for the table's own auto layout. Forwarded to CnDataTable.
+		 *
+		 * @spec openspec/changes/narrow-object-table-widgets/specs/narrow-object-table-widgets/spec.md#requirement-a-narrow-object-table-keeps-its-trailing-columns-in-view
+		 */
+		fitWidth: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Route NAME for row-click navigation. Mapped onto CnDataTable's
 		 * `rowClickRoute` as `{ name: rowRoute, params: { id } }` with the

package/src/components/CnWorkspaceFilterWidget/CnWorkspaceFilterWidget.vue

@@ -4,12 +4,43 @@
 -->
 
 <template>
-	<div class="cn-workspace-filter-widget" data-testid="cn-workspace-filter-widget">
+	<div
+		class="cn-workspace-filter-widget"
+		:class="{ 'cn-workspace-filter-widget--start': isStart }"
+		data-testid="cn-workspace-filter-widget">
+		<!-- The start card (`layout: "start"`): a title and one line of
+		     guidance beside the control, as the "Contact starten" card. -->
+		<div v-if="isStart && (title || description)" class="cn-workspace-filter-widget__text">
+			<h3 v-if="title" class="cn-workspace-filter-widget__title">
+				{{ title }}
+			</h3>
+			<p v-if="description" class="cn-workspace-filter-widget__description">
+				{{ description }}
+			</p>
+		</div>
+
 		<p v-if="label" class="cn-workspace-filter-widget__label">
 			{{ label }}
 		</p>
 
-		<div v-if="loading" class="cn-workspace-filter-widget__status">
+		<!-- An object picker (`objectSource`): searches OpenRegister on the
+		     server, so it reaches every object, not a fetched page. -->
+		<CnResourceSelect
+			v-if="objectSource"
+			class="cn-workspace-filter-widget__control"
+			:register="objectSource.register"
+			:schema="objectSource.schema"
+			:labelField="objectSource.labelField || 'title'"
+			:modelValue="selected === undefined || selected === null ? '' : String(selected)"
+			:placeholder="tr(objectSource.placeholder || '')"
+			:ariaLabelCombobox="tr(objectSource.ariaLabel || '') || title || label || writeKey"
+			:preload="objectSource.preload !== false"
+			:clearable="Boolean(content.allLabel)"
+			:allowCreate="false"
+			data-testid="cn-workspace-filter-object"
+			@update:modelValue="applySelection($event || '')" />
+
+		<div v-else-if="loading" class="cn-workspace-filter-widget__status">
 			{{ loadingLabel }}
 		</div>
 
@@ -47,12 +78,23 @@
 				</NcCheckboxRadioSwitch>
 			</li>
 		</ul>
+
+		<component
+			:is="startLink.to ? 'router-link' : 'a'"
+			v-if="startLink"
+			:to="startLink.to || undefined"
+			:href="startLink.href || undefined"
+			class="cn-workspace-filter-widget__link"
+			data-testid="cn-workspace-filter-link">
+			{{ startLink.label }}
+		</component>
 	</div>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
+import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import { fetchEndpointSource } from '../../composables/useEndpointSource.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
@@ -94,7 +136,7 @@ import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 export default {
 	name: 'CnWorkspaceFilterWidget',
 
-	components: { NcSelect, NcCheckboxRadioSwitch },
+	components: { CnResourceSelect, NcSelect, NcCheckboxRadioSwitch },
 
 	inject: {
 		/**
@@ -104,13 +146,23 @@ export default {
 		 * Null on pages without one (the widget then just emits `@change`).
 		 */
 		cnWorkspaceContext: { default: null },
+		/** Host translate function, for the start card's texts. */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
 		/**
 		 * Persisted configuration blob.
 		 *
-		 * @type {{label?: string, writes?: string, style?: string, allLabel?: string, showCounts?: boolean, options?: Array, source?: object, endpointSource?: object, default?: (string|number)}}
+		 * Start card keys (abstract-start-card): `layout: "start"` draws
+		 * `title` and `description` beside the control, and `link`
+		 * (`{ label, route? | href? }`) after it. `objectSource`
+		 * (`{ register, schema, labelField?, placeholder?, ariaLabel?, preload? }`)
+		 * makes the control an OpenRegister object picker that searches on the
+		 * server and writes the picked object's id; without a selection and
+		 * without `allLabel` it selects the first object.
+		 *
+		 * @type {{label?: string, writes?: string, style?: string, allLabel?: string, showCounts?: boolean, options?: Array, source?: object, endpointSource?: object, objectSource?: object, default?: (string|number), layout?: string, title?: string, description?: string, link?: object}}
 		 */
 		content: {
 			type: Object,
@@ -137,6 +189,50 @@ export default {
 			return this.content.label || ''
 		},
 
+		/** Whether the widget draws the start card. */
+		isStart() {
+			return this.content.layout === 'start'
+		},
+
+		/** The start card's title, translated. */
+		title() {
+			return this.tr(this.content.title || '')
+		},
+
+		/** The start card's guidance line, translated. */
+		description() {
+			return this.tr(this.content.description || '')
+		},
+
+		/**
+		 * The link after the control, or null.
+		 *
+		 * @return {{label: string, to?: object, href?: string}|null}
+		 */
+		startLink() {
+			const link = this.content.link
+			if (!link || typeof link !== 'object' || !link.label) {
+				return null
+			}
+			if (link.route && typeof link.route === 'object' && link.route.name) {
+				return { label: this.tr(link.label), to: link.route }
+			}
+			if (typeof link.href === 'string' && link.href !== '') {
+				return { label: this.tr(link.label), href: link.href }
+			}
+			return null
+		},
+
+		/**
+		 * The object picker declaration, or null.
+		 *
+		 * @return {{register: string, schema: string, labelField?: string}|null}
+		 */
+		objectSource() {
+			const src = this.content.objectSource
+			return src && typeof src === 'object' && src.register && src.schema ? src : null
+		},
+
 		/** Choice style: 'select' or 'radio' (default). */
 		style() {
 			return this.content.style === 'select' ? 'select' : 'radio'
@@ -263,6 +359,10 @@ export default {
 		 * @return {Promise<void>}
 		 */
 		async loadOptions() {
+			if (this.objectSource) {
+				await this.seedFirstObject()
+				return
+			}
 			if (this.content.endpointSource && this.content.endpointSource.url) {
 				await this.loadFromEndpoint()
 			} else if (this.content.source && this.content.source.schema) {
@@ -281,6 +381,51 @@ export default {
 			}
 		},
 
+		/**
+		 * Translate a manifest string through the host app.
+		 *
+		 * @param {string} text The text.
+		 * @return {string}
+		 */
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * The object picker's default: with nothing selected, no `default` and
+		 * no `allLabel`, select the first object the source lists, so the page
+		 * always has one in focus. Fail-safe: a failed read selects nothing.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async seedFirstObject() {
+			if ((this.selected !== undefined && this.selected !== '') || this.content.allLabel || this.content.default !== undefined) {
+				return
+			}
+			const src = this.objectSource
+			try {
+				const [{ default: axios }, { generateUrl }] = await Promise.all([
+					import('@nextcloud/axios'),
+					import('@nextcloud/router'),
+				])
+				const url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', { register: src.register, schema: src.schema })
+				const res = await axios.get(url, { params: { _limit: 1 } })
+				const data = res && res.data
+				const rows = Array.isArray(data) ? data : ((data && data.results) || [])
+				const first = rows[0]
+				const id = first && (first.id || (first['@self'] && first['@self'].id))
+				if (id && (this.selected === undefined || this.selected === '') && this.readWorkspace() === undefined) {
+					this.selected = String(id)
+					this.writeWorkspace(String(id))
+				}
+			} catch {
+				// Nothing selected: the siblings wait for a pick.
+			}
+		},
+
 		/**
 		 * Fetch options from an `endpointSource` (array of options at
 		 * responsePath). Fail-safe: a failed fetch leaves an empty list.
@@ -465,6 +610,45 @@ export default {
 	gap: 2px;
 }
 
+/* The start card: text left, control (and link) right, as PqDashboard's "Contact starten". */
+.cn-workspace-filter-widget--start {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 16px 24px;
+}
+
+.cn-workspace-filter-widget__text {
+	flex: 1 1 320px;
+	min-width: 0;
+}
+
+.cn-workspace-filter-widget__title {
+	margin: 0 0 4px;
+	font-size: 17px;
+	font-weight: 700;
+	color: var(--color-main-text);
+}
+
+.cn-workspace-filter-widget__description {
+	margin: 0;
+	max-width: 420px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-workspace-filter-widget--start .cn-workspace-filter-widget__control,
+.cn-workspace-filter-widget--start > .v-select {
+	flex: 0 1 480px;
+	min-width: 240px;
+}
+
+.cn-workspace-filter-widget__link {
+	font-weight: 600;
+	color: var(--color-primary-element);
+	text-decoration: underline;
+	white-space: nowrap;
+}
+
 .cn-workspace-filter-widget__count {
 	margin-inline-start: 6px;
 	padding: 0 6px;

package/src/components/index.js

@@ -109,7 +109,7 @@ export { CnTreeView } from './CnTreeView/index.js'
 export { CnUserActionMenu } from './CnUserActionMenu/index.js'
 export { CnNotesCard } from './CnNotesCard/index.js'
 export { CnTasksCard } from './CnTasksCard/index.js'
-export { CnFilesBrowser } from './CnFilesBrowser/index.js'
+export { CnFilesBrowser, createOpenRegisterSource } from './CnFilesBrowser/index.js'
 export { CnFilesCard } from './CnFilesCard/index.js'
 export { CnFileManager } from './CnFileManager/index.js'
 export { CnRelatedFiles } from './CnRelatedFiles/index.js'
@@ -216,6 +216,10 @@ export { CnFlowStepOutcomes } from './CnFlowStepOutcomes/index.js'
 export { CnFlowRunsWidgetForm } from './CnFlowRunsWidgetForm/index.js'
 export { CnTasksWidget } from './CnTasksWidget/index.js'
 export { CnTasksWidgetForm } from './CnTasksWidgetForm/index.js'
+export { CnSectionsWidget } from './CnSectionsWidget/index.js'
+export { CnFactsWidget } from './CnFactsWidget/index.js'
+export { CnFieldListWidget } from './CnFieldListWidget/index.js'
+export { CnRecordListWidget } from './CnRecordListWidget/index.js'
 export { CnFilePreview } from './CnFilePreview/index.js'
 export { CnTaskFormDialog } from './CnTaskFormDialog/index.js'
 export { CnChildRecordsField } from './CnChildRecordsField/index.js'