@conduction/nextcloud-vue 2.63.0 → 2.65.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -41,8 +41,20 @@
 			{{ skipLinkLabel }}
 		</a>
 
+		<!-- Breadcrumb line (manifest `config.breadcrumb`): the list the record
+		     belongs to, then the record itself as the current crumb. -->
+		<CnBreadcrumbs
+			v-if="breadcrumbCrumbs.length > 0 && !objectNotFound"
+			class="cn-detail-page__breadcrumbs"
+			:crumbs="breadcrumbCrumbs"
+			:rootText="breadcrumbCrumbs[0].icon === undefined"
+			data-testid="cn-detail-page-breadcrumbs" />
 		<!-- Header -->
-		<div v-if="!objectNotFound" class="cn-detail-page__header" data-testid="cn-detail-page-header">
+		<div
+			v-if="!objectNotFound"
+			class="cn-detail-page__header"
+			:class="{ 'cn-detail-page__header--card': headerCard, 'cn-detail-page__header--with-widget': headerWidgetDef !== null }"
+			data-testid="cn-detail-page-header">
 			<!-- Header (left block) — overridable via #header slot. Default
 			     renders the icon + title + description. The right-hand
 			     #actions slot remains separate so headerComponent and
@@ -98,7 +110,7 @@
 						     (ADR-062). Only shown once the object resolves to a
 						     display name that differs from the type label. -->
 						<p
-							v-if="typeEyebrow"
+							v-if="typeEyebrow && showTypeEyebrow"
 							class="cn-detail-page__type-eyebrow"
 							data-testid="cn-detail-page-type-eyebrow">
 							{{ typeEyebrow }}
@@ -363,6 +375,50 @@
 					</template>
 				</CnActionsMenu>
 			</div>
+			<!-- A widget inside the header (manifest `config.headerWidget`), on
+			     a row of its own under the title and the actions: the stages
+			     bars of the board's case card. Drawn without a card of its own,
+			     and taken out of the body grid. Nothing renders without the
+			     key. -->
+			<div
+				v-if="headerWidgetDef !== null"
+				class="cn-detail-page__header-widget"
+				data-testid="cn-detail-page-header-widget">
+				<!--
+					@slot `widget-${headerWidgetDef.id}`
+					@description The same per-widget slot the body grid and the side
+					column offer, for the widget placed in the header
+					(`headerWidget`). Same name and same bindings.
+				-->
+				<slot
+					:name="`widget-${headerWidgetDef.id}`"
+					:item="{ id: headerWidgetDef.id, widgetId: headerWidgetDef.id }"
+					:widget="headerWidgetDef"
+					:objectId="objectId"
+					:object="resolvedObject"
+					:objectData="resolvedObject"
+					:objectType="resolvedObjectType"
+					:register="register"
+					:schema="schema">
+					<CnDetailWidgetHost
+						:widget="headerWidgetDef"
+						chrome="bare"
+						:objectId="objectId"
+						:object="currentObject"
+						:objectType="resolvedObjectType"
+						:schemaObject="currentSchema"
+						:register="register"
+						:schema="schema"
+						:store="effectiveObjectStore"
+						:surface="surface"
+						:integrationContext="effectiveIntegrationContext"
+						:hideEmpty="hideEmpty"
+						:cnRegistry="cnRegistry"
+						:availableWidgets="widgets"
+						@geoSaved="onGeoSaved"
+						@openIntegration="onAutoBodyOpenIntegration" />
+				</slot>
+			</div>
 		</div>
 
 		<!-- The locked card, under the title, for ANY active lock — not only a
@@ -1025,6 +1081,7 @@ import {
 	widgetTitleOf,
 } from '../../utils/widgetDispatch.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
+import { CnBreadcrumbs } from '../CnBreadcrumbs/index.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 import { getWidgetTypeEntry } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
@@ -1172,6 +1229,7 @@ export default {
 		CnDashboardGrid,
 		CnLifecycleActions,
 		CnActionButtons,
+		CnBreadcrumbs,
 		CnStatusBadge,
 		CnSummaryAggregates,
 		CnRelatedCollections,
@@ -2078,6 +2136,37 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Whether the type eyebrow (the type label above the record name)
+		 * renders once the record resolves. `false` (manifest
+		 * `config.showTypeEyebrow: false`) drops it for a header that says
+		 * the type in a pill instead.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
+		 */
+		showTypeEyebrow: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * A breadcrumb line above the header (manifest `config.breadcrumb`):
+		 * `{ label, route?, params?, href? }` names the list the record
+		 * belongs to; the record's display name follows as the current
+		 * crumb. `label` goes through the host translate function and shows
+		 * as text; `icon` (an MDI name, e.g. `Home`) draws that icon instead,
+		 * with the label as its accessible name. Null (the default) draws no
+		 * trail.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-declared-breadcrumb-label-shows-as-text
+		 * @type {{label: string, route?: string, params?: object, href?: string, icon?: string}|null}
+		 */
+		breadcrumb: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * A column of cards beside the body (manifest `config.sideColumn`),
 		 * for the record's facts: deadline, requester, handler, links. Each
@@ -2093,6 +2182,33 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Draw the header as a card (manifest `config.headerCard: true`): the
+		 * pills, the title and the actions on the page's surface colour inside
+		 * a bordered, rounded box, as the board's case header. Off by default,
+		 * which keeps the header on the page ground.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 */
+		headerCard: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The id of a widget declared in `widgets` to render inside the header,
+		 * on its own row under the title and the actions (manifest
+		 * `config.headerWidget`), e.g. the stages bars. It renders without a
+		 * card of its own and leaves the body grid. Empty (the default), or an
+		 * id that names no widget, renders nothing extra.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 */
+		headerWidget: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Whether the current user administers this instance. Shows the
 		 * `adminOnly` header actions. `null` (the default) reads it from
@@ -2632,6 +2748,21 @@ export default {
 				.filter(Boolean)
 		},
 
+		/**
+		 * The widget the header holds (`headerWidget`): the definition in
+		 * `widgets` with that id, or null without the key or a match.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 * @return {object|null} The widget definition, or null.
+		 */
+		headerWidgetDef() {
+			if (!this.headerWidget) {
+				return null
+			}
+			const declared = Array.isArray(this.widgets) ? this.widgets : []
+			return declared.find((widget) => widget && widget.id === this.headerWidget) || null
+		},
+
 		/**
 		 * The side column's widget definitions. A string names a widget
 		 * declared in `widgets`; an object is a definition of its own.
@@ -3201,6 +3332,33 @@ export default {
 			return this.objectDisplayName || this.resolvedTitle
 		},
 
+		/**
+		 * The breadcrumb trail: the declared crumb (a router target from
+		 * `route` + `params`, or an `href`), then the record's display name
+		 * as the current crumb. Empty without a `breadcrumb` label. The first
+		 * crumb carries `icon` only when the manifest declares one.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-declared-breadcrumb-label-shows-as-text
+		 * @return {Array<{label: string, to?: object, href?: string, icon?: string}>}
+		 */
+		breadcrumbCrumbs() {
+			const crumb = this.breadcrumb
+			if (!crumb || typeof crumb.label !== 'string' || crumb.label === '') {
+				return []
+			}
+			const first = { label: this.effectiveTranslate(crumb.label) }
+			if (typeof crumb.icon === 'string' && crumb.icon !== '') {
+				first.icon = crumb.icon
+			}
+			if (crumb.route) {
+				first.to = { name: crumb.route, ...(crumb.params ? { params: crumb.params } : {}) }
+			} else if (crumb.href) {
+				first.href = crumb.href
+			}
+			return [first, { label: this.displayTitle }]
+		},
+
 		/**
 		 * Effective translate function: the injected `cnTranslate` (the host
 		 * app's bound `t()`), identity by default.
@@ -4652,6 +4810,10 @@ export default {
 		 * it — CnPageRenderer's split pane forwards no slots, which is exactly
 		 * that fault and wants fixing, not concealing.
 		 *
+		 * The widget the header holds (`headerWidget`) draws nothing here
+		 * either: it is already drawn in the header.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
 		 * @param {object} item A layout item.
 		 * @return {boolean} False only when the item provably draws nothing.
 		 */
@@ -4662,6 +4824,11 @@ export default {
 			if (this.editingBody) {
 				return true
 			}
+			// The widget the header holds (`headerWidget`) is drawn there, so
+			// its grid cell would be the same widget twice.
+			if (this.headerWidgetDef !== null && item.widgetId === this.headerWidgetDef.id) {
+				return false
+			}
 			const widget = this.findWidget(item)
 			if (!widget) {
 				return true

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain }" :style="wrapperStyle">
+	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0 }" :style="wrapperStyle">
 		<div
 			v-if="hasOverlay"
 			class="cn-header-widget__overlay"
@@ -34,6 +34,16 @@
 				{{ ctaLabel }}
 			</a>
 		</div>
+		<!-- A view switch at the right of the heading (`content.views`): "My
+		     work / My team" as a segmented control whose options are routes. -->
+		<div v-if="viewOptions.length > 0" class="cn-header-widget__views">
+			<CnSegmentedControl
+				:options="viewOptions"
+				:modelValue="activeView"
+				:ariaLabel="viewsLabel"
+				data-testid="cn-header-widget-views"
+				@update:modelValue="onViewChange" />
+		</div>
 		<img
 			v-if="hasBackgroundImage"
 			class="cn-header-widget__probe"
@@ -47,6 +57,7 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
 
 const ALLOWED_OVERLAY_MODES = ['none', 'tint', 'gradient-bottom']
@@ -99,6 +110,8 @@ const VERTICAL_ALIGN_FLEX = Object.freeze({
 export default {
 	name: 'CnHeaderWidget',
 
+	components: { CnSegmentedControl },
+
 	inject: {
 		/**
 		 * Host translate function provided by CnAppRoot as
@@ -115,9 +128,15 @@ export default {
 		 * Persisted widget content: `{title, subtitle, backgroundImageUrl,
 		 * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,
 		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,
-		 * greeting, showDate, plain}`. All fields are optional except `title`
-		 * (or `greeting`); unknown enum values collapse to documented defaults
-		 * and the renderer never throws.
+		 * greeting, showDate, plain, ground, views}`. All fields are optional except
+		 * `title` (or `greeting`); unknown enum values collapse to documented
+		 * defaults and the renderer never throws. `views` is
+		 * `{ ariaLabel?, options: [{ label, route, params? }] }`: a segmented
+		 * control at the right of the heading whose checked option is the
+		 * current route; choosing another pushes its route. `ground: true`
+		 * draws the greeting on the page ground: the plain look with no
+		 * padding, a 32px heading and the date line 6px above it (a dashboard
+		 * also drops the widget's card for it).
 		 *
 		 * @type {object}
 		 */
@@ -198,13 +217,75 @@ export default {
 			return this.now instanceof Date ? this.now : new Date()
 		},
 
+		/**
+		 * The view switch's options from `content.views.options`: each
+		 * `{ label, route, params? }` with a non-empty label and route becomes
+		 * a segmented-control option keyed on its route name (the label goes
+		 * through the host translate function). Empty without a router, so
+		 * the switch cannot offer routes it cannot follow.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views
+		 * @return {Array<{value: string, label: string}>}
+		 */
+		viewOptions() {
+			const raw = this.content && this.content.views && this.content.views.options
+			if (!Array.isArray(raw) || !this.$router) {
+				return []
+			}
+			return raw
+				.filter((o) => o && typeof o.label === 'string' && o.label !== '' && typeof o.route === 'string' && o.route !== '')
+				.map((o) => ({ value: o.route, label: this.cnTranslate(o.label) }))
+		},
+
+		/**
+		 * The checked view: the option whose route is the current route, else
+		 * the first option (a switch always has one checked option).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views
+		 * @return {string|null}
+		 */
+		activeView() {
+			const options = this.viewOptions
+			if (options.length === 0) {
+				return null
+			}
+			const current = this.$route && this.$route.name
+			const match = options.find((o) => o.value === current)
+			return match ? match.value : options[0].value
+		},
+
+		/**
+		 * Accessible name of the view switch: `content.views.ariaLabel`
+		 * through the host translate function, else "View".
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views
+		 * @return {string}
+		 */
+		viewsLabel() {
+			const label = this.content && this.content.views && this.content.views.ariaLabel
+			return label ? this.cnTranslate(label) : t('nextcloud-vue', 'View')
+		},
+
 		/**
 		 * Whether the plain presentation is on (no coloured background).
 		 *
 		 * @return {boolean}
 		 */
 		isPlain() {
-			return Boolean(this.content && this.content.plain === true)
+			return Boolean(this.content && (this.content.plain === true || this.content.ground === true))
+		},
+
+		/**
+		 * Whether the greeting sits on the page ground (`content.ground`):
+		 * the plain look without the card padding, so the date line and the
+		 * heading align with the page edge as the board draws them. Off by
+		 * default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-greeting-can-sit-on-the-page-ground
+		 * @return {boolean}
+		 */
+		isGround() {
+			return Boolean(this.content && this.content.ground === true)
 		},
 
 		/**
@@ -490,7 +571,9 @@ export default {
 			return {
 				position: 'relative',
 				'z-index': 1,
-				width: '100%',
+				// Beside a view switch the content shares the row instead of
+				// taking the whole width (see .cn-header-widget--with-views).
+				width: this.viewOptions.length > 0 ? 'auto' : '100%',
 				height: '100%',
 				display: 'flex',
 				'flex-direction': 'column',
@@ -498,9 +581,10 @@ export default {
 				'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],
 				// Plain drops the coloured background, not the card padding:
 				// at 0 the greeting sat flush against the card's left edge.
-				padding: this.isPlain ? '16px' : '16px 24px',
+				// Ground has no card, so it has no padding either.
+				padding: this.isGround ? '0' : (this.isPlain ? '16px' : '16px 24px'),
 				'box-sizing': 'border-box',
-				gap: '8px',
+				gap: this.isGround ? '6px' : '8px',
 				'text-align': this.textAlign,
 			}
 		},
@@ -604,6 +688,26 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Follow the chosen view: push its route (with the option's `params`
+		 * when declared). Nothing happens for the route already shown.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views
+		 * @param {string} route The chosen option's route name.
+		 * @return {void}
+		 */
+		onViewChange(route) {
+			if (!this.$router || !route || route === (this.$route && this.$route.name)) {
+				return
+			}
+			const declared = (this.content.views.options || []).find((o) => o && o.route === route) || {}
+			const target = { name: route }
+			if (declared.params && typeof declared.params === 'object') {
+				target.params = declared.params
+			}
+			this.$router.push(target)
+		},
+
 		/**
 		 * Mark the background image as broken so the renderer falls back to
 		 * the solid colour.
@@ -655,6 +759,40 @@ export default {
 	border-radius: 0;
 }
 
+/* With a view switch the heading and the switch share one row, the switch
+   at the right and bottom-aligned with the heading; on a narrow card the
+   switch wraps under it. */
+.cn-header-widget--with-views {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+}
+
+.cn-header-widget--with-views .cn-header-widget__content {
+	flex: 1 1 320px;
+	width: auto;
+}
+
+.cn-header-widget__views {
+	position: relative;
+	z-index: 1;
+	flex: 0 0 auto;
+	padding: 16px;
+}
+
+/* On the page ground (`content.ground`): no card, so no inset around the
+   view switch, and the heading at the board's 32px. */
+.cn-header-widget--ground .cn-header-widget__views {
+	padding: 0;
+}
+
+.cn-header-widget--ground .cn-header-widget__title {
+	font-size: var(--cn-header-ground-title-size, 32px);
+	letter-spacing: -0.01em;
+}
+
 .cn-header-widget__date {
 	font-size: 14px;
 	line-height: 1.4;
@@ -726,7 +864,7 @@ export default {
 	height: 1px;
 	opacity: 0;
 	pointer-events: none;
-	left: -9999px;
+	inset-inline-start: -9999px;
 	top: -9999px;
 }
 

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -13,12 +13,12 @@
 		<slot
 			name="header"
 			:title="title"
-			:description="description"
+			:description="headerDescription"
 			:icon="resolvedIcon"
 			:showTitle="showTitle">
 			<CnPageHeader
 				:title="title"
-				:description="description"
+				:description="headerDescription"
 				:icon="resolvedIcon"
 				:visuallyHidden="!showTitle" />
 		</slot>
@@ -1177,6 +1177,21 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A description that carries the collection's total: `{total}` in
+		 * the text is replaced by the current pagination total ("{total}
+		 * open cases" reads "48 open cases"). Rendered in place of
+		 * `description` once a total is known; before that, `description`
+		 * shows. Manifest key `config.countSubtitle`. Goes through the host
+		 * translate function.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-an-index-page-title-is-a-manifest-key
+		 */
+		countSubtitle: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Whether to show the page header (icon, title, description) inline.
 		 * When false (default), only the sidebar header shows the title
@@ -4231,6 +4246,21 @@ export default {
 			return resolveDeepTokens(seed, {})
 		},
 
+		/**
+		 * The header's description line: `countSubtitle` with the total
+		 * filled in when one is known, else `description`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-an-index-page-title-is-a-manifest-key
+		 * @return {string}
+		 */
+		headerDescription() {
+			const total = this.effectivePagination?.total
+			if (this.countSubtitle && typeof total === 'number' && total >= 0) {
+				return this.cnTranslate(this.countSubtitle).replace('{total}', String(total))
+			}
+			return this.description
+		},
+
 		/** Add button label — derived from schema.title if not explicitly set */
 		resolvedAddLabel() {
 			if (this.addLabel) {

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -151,6 +151,7 @@
 						:sortKey="localSort.field || null"
 						:sortOrder="localSort.dir || 'asc'"
 						borderless
+						:hideHeader="content.hideHeader === true"
 						@rowClick="onRowClick"
 						@rowAuxClick="onRowAuxClick"
 						@select="onSelect"
@@ -172,6 +173,7 @@
 					:sortKey="localSort.field || null"
 					:sortOrder="localSort.dir || 'asc'"
 					borderless
+					:hideHeader="content.hideHeader === true"
 					@rowClick="onRowClick"
 					@rowAuxClick="onRowAuxClick"
 					@select="onSelect"
@@ -419,7 +421,11 @@ export default {
 		 * those carrying a selected value. Client-side over the fetched page,
 		 * like the rest of this widget's row set.
 		 *
-		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, viewAllRoute?: string, viewAllQuery?: object}}
+		 * `hideHeader: true` drops the table's column header row (CnDataTable's
+		 * `hideHeader`), for a short list that reads as rows, not as a table.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-small-opt-ins-from-the-decidiq-and-learniq-lanes
+		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean}}
 		 */
 		content: {
 			type: Object,