@conduction/nextcloud-vue 2.56.0-beta.11 → 2.56.0-beta.13

package/dist/esm/components/CnDashboardPage/CnDashboardPage.vue3.js

@@ -1,72 +1,84 @@
-import { resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot, createBlock, withCtx, createTextVNode, createVNode, createSlots, normalizeClass, Fragment, renderList, mergeProps, resolveDynamicComponent, normalizeProps } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, renderSlot, createBlock, withCtx, createTextVNode, createVNode, createSlots, normalizeClass, Fragment, renderList, mergeProps, resolveDynamicComponent } from 'vue';
 
 const _hoisted_1 = {
   class: "cn-dashboard-page",
   "data-testid": "cn-dashboard-page"
 };
 const _hoisted_2 = {
+  key: 0,
+  class: "hidden-visually",
+  "data-testid": "cn-dashboard-page-hidden-title"
+};
+const _hoisted_3 = {
+  key: 1,
   class: "cn-dashboard-page__header",
   "data-testid": "cn-dashboard-page-header"
 };
-const _hoisted_3 = { class: "cn-dashboard-page__header-left" };
-const _hoisted_4 = {
+const _hoisted_4 = { class: "cn-dashboard-page__header-left" };
+const _hoisted_5 = {
   key: 0,
   class: "cn-dashboard-page__title-row"
 };
-const _hoisted_5 = {
+const _hoisted_6 = {
   key: 0,
   class: "cn-dashboard-page__title"
 };
-const _hoisted_6 = {
+const _hoisted_7 = {
   key: 1,
   class: "cn-dashboard-page__description"
 };
-const _hoisted_7 = { class: "cn-dashboard-page__header-actions" };
-const _hoisted_8 = ["aria-label"];
-const _hoisted_9 = ["aria-pressed", "data-testid", "onClick"];
-const _hoisted_10 = {
-  key: 1,
+const _hoisted_8 = { class: "cn-dashboard-page__header-actions" };
+const _hoisted_9 = ["aria-label"];
+const _hoisted_10 = ["aria-pressed", "data-testid", "onClick"];
+const _hoisted_11 = {
+  key: 3,
   class: "cn-dashboard-page__page-filters",
   "data-testid": "cn-dashboard-page-page-filters"
 };
-const _hoisted_11 = {
+const _hoisted_12 = {
   key: 0,
   class: "cn-dashboard-page__page-filter-label"
 };
-const _hoisted_12 = {
-  key: 5,
+const _hoisted_13 = {
+  key: 7,
   class: "cn-dashboard-page__empty"
 };
-const _hoisted_13 = {
-  key: 6,
+const _hoisted_14 = {
+  key: 8,
   class: "cn-dashboard-page__content"
 };
-const _hoisted_14 = {
+const _hoisted_15 = {
+  key: 9,
+  class: "cn-dashboard-page__view-switch"
+};
+const _hoisted_16 = {
   key: 0,
   class: "cn-dashboard-page__widget-edit"
 };
-const _hoisted_15 = ["title"];
-const _hoisted_16 = {
+const _hoisted_17 = ["title"];
+const _hoisted_18 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_17 = ["title"];
-const _hoisted_18 = {
+const _hoisted_19 = ["title"];
+const _hoisted_20 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_19 = {
+const _hoisted_21 = {
   key: 2,
   class: "cn-dashboard-page__unknown"
 };
-const _hoisted_20 = ["title"];
-const _hoisted_21 = {
+const _hoisted_22 = ["title"];
+const _hoisted_23 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_22 = { class: "cn-dashboard-page__unknown" };
+const _hoisted_24 = { class: "cn-dashboard-page__unknown" };
+const _hoisted_25 = ["id", "aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CnSegmentedControl = resolveComponent("CnSegmentedControl");
   const _component_CnActionButtons = resolveComponent("CnActionButtons");
   const _component_Pencil = resolveComponent("Pencil");
   const _component_Check = resolveComponent("Check");
@@ -97,90 +109,107 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CnWidgetStyleEditorModal = resolveComponent("CnWidgetStyleEditorModal");
 
   return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("div", _hoisted_2, [
-      createElementVNode("div", _hoisted_3, [
-        ($props.title || _ctx.$slots['title-meta'])
-          ? (openBlock(), createElementBlock("div", _hoisted_4, [
-              ($props.title)
-                ? (openBlock(), createElementBlock("h2", _hoisted_5, toDisplayString($options.resolvedTitle), 1 /* TEXT */))
-                : createCommentVNode("v-if", true),
-              renderSlot(_ctx.$slots, "title-meta")
-            ]))
-          : createCommentVNode("v-if", true),
-        ($props.description)
-          ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString($options.resolvedDescription), 1 /* TEXT */))
-          : createCommentVNode("v-if", true)
-      ]),
-      createElementVNode("div", _hoisted_7, [
-        ($props.headerActions && $props.headerActions.length)
-          ? (openBlock(), createBlock(_component_CnActionButtons, {
-              key: 0,
-              actions: $props.headerActions,
-              "data-testid": "cn-dashboard-page-header-actions"
-            }, null, 8 /* PROPS */, ["actions"]))
-          : createCommentVNode("v-if", true),
-        renderSlot(_ctx.$slots, "header-actions"),
-        renderSlot(_ctx.$slots, "actions"),
-        ($props.allowEdit)
-          ? (openBlock(), createBlock(_component_NcButton, {
-              key: 1,
-              variant: $data.isEditing ? 'primary' : 'secondary',
-              onClick: $options.toggleEdit
-            }, {
-              icon: withCtx(() => [
-                (!$data.isEditing)
-                  ? (openBlock(), createBlock(_component_Pencil, {
-                      key: 0,
-                      size: 20
-                    }))
-                  : (openBlock(), createBlock(_component_Check, {
-                      key: 1,
-                      size: 20
-                    }))
-              ]),
-              default: withCtx(() => [
-                createTextVNode(" " + toDisplayString($data.isEditing ? $props.doneLabel : $props.editLabel), 1 /* TEXT */)
-              ]),
-              _: 1 /* STABLE */
-            }, 8 /* PROPS */, ["variant", "onClick"]))
-          : createCommentVNode("v-if", true),
-        createVNode(_component_CnBuildiqEditButton),
-        createVNode(_component_CnActionsMenu, {
-          showRefresh: $props.showRefresh,
-          showRequestFeature: $props.showRequestFeature,
-          showReportBug: $props.showReportBug,
-          showDocumentation: $props.showDocumentation,
-          documentationUrl: $props.documentationUrl,
-          docsAnchor: $options.resolvedPageId,
-          documentationLabel: $props.documentationLabel,
-          refreshLabel: $props.refreshLabel,
-          requestFeatureLabel: $props.requestFeatureLabel,
-          actionsMenuLabel: $props.actionsMenuLabel,
-          refreshing: $props.refreshing,
-          widgetId: $options.resolvedPageId,
-          title: $props.title,
-          surface: `dashboard:${$options.resolvedPageId}`,
-          specRef: $props.specRef,
-          refreshChannel: "cn:page:refresh",
-          testidBase: "cn-dashboard-page",
-          onRefresh: $options.onActionsRefresh,
-          onRequestFeature: $options.onActionsRequestFeature
-        }, createSlots({ _: 2 /* DYNAMIC */ }, [
-          ($options.hasActionItemsSlot)
-            ? {
-                name: "action-items",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "action-items")
-                ]),
-                key: "0"
-              }
-            : undefined
-        ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["showRefresh", "showRequestFeature", "showReportBug", "showDocumentation", "documentationUrl", "docsAnchor", "documentationLabel", "refreshLabel", "requestFeatureLabel", "actionsMenuLabel", "refreshing", "widgetId", "title", "surface", "specRef", "onRefresh", "onRequestFeature"])
-      ])
-    ]),
+    (!$props.showHeader && $props.title)
+      ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString($options.resolvedTitle), 1 /* TEXT */))
+      : createCommentVNode("v-if", true),
+    ($props.showHeader)
+      ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createElementVNode("div", _hoisted_4, [
+            ($props.title || _ctx.$slots['title-meta'])
+              ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                  ($props.title)
+                    ? (openBlock(), createElementBlock("h2", _hoisted_6, toDisplayString($options.resolvedTitle), 1 /* TEXT */))
+                    : createCommentVNode("v-if", true),
+                  renderSlot(_ctx.$slots, "title-meta")
+                ]))
+              : createCommentVNode("v-if", true),
+            ($props.description)
+              ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString($options.resolvedDescription), 1 /* TEXT */))
+              : createCommentVNode("v-if", true)
+          ]),
+          createElementVNode("div", _hoisted_8, [
+            (_ctx.showsPageViewSwitch)
+              ? (openBlock(), createBlock(_component_CnSegmentedControl, {
+                  key: 0,
+                  class: "cn-page-view-switch",
+                  options: _ctx.viewSwitchOptions,
+                  modelValue: _ctx.activeViewId,
+                  ariaLabel: _ctx.viewSwitchLabel,
+                  controls: _ctx.viewRegionId,
+                  "data-testid": "cn-dashboard-page-view-switch",
+                  "onUpdate:modelValue": _ctx.selectView
+                }, null, 8 /* PROPS */, ["options", "modelValue", "ariaLabel", "controls", "onUpdate:modelValue"]))
+              : createCommentVNode("v-if", true),
+            ($props.headerActions && $props.headerActions.length)
+              ? (openBlock(), createBlock(_component_CnActionButtons, {
+                  key: 1,
+                  actions: $props.headerActions,
+                  "data-testid": "cn-dashboard-page-header-actions"
+                }, null, 8 /* PROPS */, ["actions"]))
+              : createCommentVNode("v-if", true),
+            renderSlot(_ctx.$slots, "header-actions"),
+            renderSlot(_ctx.$slots, "actions"),
+            ($props.allowEdit)
+              ? (openBlock(), createBlock(_component_NcButton, {
+                  key: 2,
+                  variant: $data.isEditing ? 'primary' : 'secondary',
+                  onClick: $options.toggleEdit
+                }, {
+                  icon: withCtx(() => [
+                    (!$data.isEditing)
+                      ? (openBlock(), createBlock(_component_Pencil, {
+                          key: 0,
+                          size: 20
+                        }))
+                      : (openBlock(), createBlock(_component_Check, {
+                          key: 1,
+                          size: 20
+                        }))
+                  ]),
+                  default: withCtx(() => [
+                    createTextVNode(" " + toDisplayString($data.isEditing ? $props.doneLabel : $props.editLabel), 1 /* TEXT */)
+                  ]),
+                  _: 1 /* STABLE */
+                }, 8 /* PROPS */, ["variant", "onClick"]))
+              : createCommentVNode("v-if", true),
+            createVNode(_component_CnBuildiqEditButton),
+            createVNode(_component_CnActionsMenu, {
+              showRefresh: $props.showRefresh,
+              showRequestFeature: $props.showRequestFeature,
+              showReportBug: $props.showReportBug,
+              showDocumentation: $props.showDocumentation,
+              documentationUrl: $props.documentationUrl,
+              docsAnchor: $options.resolvedPageId,
+              documentationLabel: $props.documentationLabel,
+              refreshLabel: $props.refreshLabel,
+              requestFeatureLabel: $props.requestFeatureLabel,
+              actionsMenuLabel: $props.actionsMenuLabel,
+              refreshing: $props.refreshing,
+              widgetId: $options.resolvedPageId,
+              title: $props.title,
+              surface: `dashboard:${$options.resolvedPageId}`,
+              specRef: $props.specRef,
+              refreshChannel: "cn:page:refresh",
+              testidBase: "cn-dashboard-page",
+              onRefresh: $options.onActionsRefresh,
+              onRequestFeature: $options.onActionsRequestFeature
+            }, createSlots({ _: 2 /* DYNAMIC */ }, [
+              ($options.hasActionItemsSlot)
+                ? {
+                    name: "action-items",
+                    fn: withCtx(() => [
+                      renderSlot(_ctx.$slots, "action-items")
+                    ]),
+                    key: "0"
+                  }
+                : undefined
+            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["showRefresh", "showRequestFeature", "showReportBug", "showDocumentation", "documentationUrl", "docsAnchor", "documentationLabel", "refreshLabel", "requestFeatureLabel", "actionsMenuLabel", "refreshing", "widgetId", "title", "surface", "specRef", "onRefresh", "onRequestFeature"])
+          ])
+        ]))
+      : createCommentVNode("v-if", true),
     ($options.showHeaderDateRange)
       ? (openBlock(), createElementBlock("div", {
-          key: 0,
+          key: 2,
           class: normalizeClass(["cn-dashboard-page__date-range", { 'cn-dashboard-page__date-range--pills': $options.dateRangeControl === 'pills' }]),
           "data-testid": "cn-dashboard-page-date-range"
         }, [
@@ -200,7 +229,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                     "aria-pressed": String(Boolean($data.currentRange && $data.currentRange.preset === preset.id)),
                     "data-testid": `cn-dashboard-page-date-pill-${preset.id}`,
                     onClick: $event => ($options.onPillPick(preset))
-                  }, toDisplayString(preset.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_9))
+                  }, toDisplayString(preset.label), 11 /* TEXT, CLASS, PROPS */, _hoisted_10))
                 }), 128 /* KEYED_FRAGMENT */)),
                 ($options.hasCustomPreset)
                   ? (openBlock(), createBlock(_component_NcActions, {
@@ -234,7 +263,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       _: 1 /* STABLE */
                     }))
                   : createCommentVNode("v-if", true)
-              ], 8 /* PROPS */, _hoisted_8))
+              ], 8 /* PROPS */, _hoisted_9))
             : (openBlock(), createBlock(_component_CnDateRangePicker, {
                 key: 1,
                 value: $data.currentRange,
@@ -244,14 +273,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ], 2 /* CLASS */))
       : createCommentVNode("v-if", true),
     ($props.pageFilters && $props.pageFilters.length)
-      ? (openBlock(), createElementBlock("div", _hoisted_10, [
+      ? (openBlock(), createElementBlock("div", _hoisted_11, [
           (openBlock(true), createElementBlock(Fragment, null, renderList($props.pageFilters, (pf) => {
             return (openBlock(), createElementBlock("label", {
               key: pf.key,
               class: "cn-dashboard-page__page-filter"
             }, [
               (pf.label)
-                ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(pf.label), 1 /* TEXT */))
+                ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(pf.label), 1 /* TEXT */))
                 : createCommentVNode("v-if", true),
               createVNode(_component_NcSelect, {
                 modelValue: $options.selectedPageFilterOption(pf),
@@ -268,7 +297,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : createCommentVNode("v-if", true),
     ($options.hasBodyWidgets)
       ? (openBlock(), createBlock(_component_CnBodySections, {
-          key: 2,
+          key: 4,
           sections: $props.bodyWidgets,
           context: $options.sectionContext,
           placement: "before-grid",
@@ -276,11 +305,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8 /* PROPS */, ["sections", "context"]))
       : createCommentVNode("v-if", true),
     ($props.loading)
-      ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 3 }))
+      ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 5 }))
       : (!$data.widgetConditionsSettled && !$options.gridEditable)
-        ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 4 }))
-        : (!$options.hasWidgets && !$options.hasBodyWidgets)
-          ? (openBlock(), createElementBlock("div", _hoisted_12, [
+        ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 6 }))
+        : (!$options.hasWidgets && !$options.hasBodyWidgets && !_ctx.hasViews)
+          ? (openBlock(), createElementBlock("div", _hoisted_13, [
               renderSlot(_ctx.$slots, "empty", {}, () => [
                 createVNode(_component_NcEmptyContent, { description: $props.emptyLabel }, {
                   icon: withCtx(() => [
@@ -291,7 +320,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             ]))
           : ($options.widgetRefItems.length > 0)
-            ? (openBlock(), createElementBlock("div", _hoisted_13, [
+            ? (openBlock(), createElementBlock("div", _hoisted_14, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.widgetRefItems, (item, idx) => {
                   return (openBlock(), createBlock(_component_CnWidgetRefItem, {
                     key: item.ref + '-' + idx,
@@ -300,216 +329,420 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   }, null, 8 /* PROPS */, ["refUri"]))
                 }), 128 /* KEYED_FRAGMENT */))
               ]))
-            : (openBlock(), createBlock(_component_CnDashboardGrid, {
-                key: `cn-dashboard-grid-${$options.gridEditable ? 'editing' : 'live'}`,
-                layout: $options.displayLayout,
-                editable: $options.gridEditable,
-                columns: $props.columns,
-                cellHeight: $props.cellHeight,
-                margin: $props.gridMargin,
-                onLayoutChange: $options.onLayoutChange
+            : createCommentVNode("v-if", true),
+    ($options.gridSectionsShown && !$props.showHeader && _ctx.showsPageViewSwitch)
+      ? (openBlock(), createElementBlock("div", _hoisted_15, [
+          createVNode(_component_CnSegmentedControl, {
+            class: "cn-page-view-switch",
+            options: _ctx.viewSwitchOptions,
+            modelValue: _ctx.activeViewId,
+            ariaLabel: _ctx.viewSwitchLabel,
+            controls: _ctx.viewRegionId,
+            "data-testid": "cn-dashboard-page-view-switch",
+            "onUpdate:modelValue": _ctx.selectView
+          }, null, 8 /* PROPS */, ["options", "modelValue", "ariaLabel", "controls", "onUpdate:modelValue"])
+        ]))
+      : createCommentVNode("v-if", true),
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.gridSections, (section) => {
+      return (openBlock(), createBlock(_component_CnDashboardGrid, mergeProps({
+        key: `cn-dashboard-grid-${section.key}-${$options.gridEditable ? 'editing' : 'live'}`
+      }, { ref_for: true }, section.attrs, {
+        layout: section.layout,
+        editable: section.editable,
+        columns: $props.columns,
+        cellHeight: $props.cellHeight,
+        margin: $props.gridMargin,
+        onLayoutChange: $event => (section.view ? _ctx.onViewLayoutChange($event) : $options.onLayoutChange($event))
+      }), {
+        widget: withCtx(({ item }) => [
+          ($options.gridEditable)
+            ? (openBlock(), createElementBlock("div", _hoisted_16, [
+                createVNode(_component_NcButton, {
+                  variant: "tertiary",
+                  "aria-label": _ctx.t('nextcloud-vue', 'Configure widget'),
+                  onClick: $event => ($options.configureWidget(item))
+                }, {
+                  icon: withCtx(() => [
+                    createVNode(_component_Cog, { size: 18 })
+                  ]),
+                  _: 1 /* STABLE */
+                }, 8 /* PROPS */, ["aria-label", "onClick"])
+              ]))
+            : createCommentVNode("v-if", true),
+          ($options.missingRequiredApp(item))
+            ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
+                key: 1,
+                title: $options.getWidgetTitle(item),
+                showTitle: $options.widgetShowTitle(item)
               }, {
-                widget: withCtx(({ item }) => [
-                  ($options.gridEditable)
-                    ? (openBlock(), createElementBlock("div", _hoisted_14, [
-                        createVNode(_component_NcButton, {
-                          variant: "tertiary",
-                          "aria-label": _ctx.t('nextcloud-vue', 'Configure widget'),
-                          onClick: $event => ($options.configureWidget(item))
-                        }, {
-                          icon: withCtx(() => [
-                            createVNode(_component_Cog, { size: 18 })
-                          ]),
-                          _: 1 /* STABLE */
-                        }, 8 /* PROPS */, ["aria-label", "onClick"])
-                      ]))
-                    : createCommentVNode("v-if", true),
-                  ($options.missingRequiredApp(item))
-                    ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
-                        key: 1,
-                        title: $options.getWidgetTitle(item),
-                        showTitle: $options.widgetShowTitle(item)
+                default: withCtx(() => [
+                  createVNode(_component_NcEmptyContent, {
+                    name: $options.installAppLabel($options.missingRequiredApp(item)),
+                    description: _ctx.t('nextcloud-vue', 'This widget shows data from another app that isn\'t installed yet.'),
+                    class: "cn-dashboard-page__requires-app cn-requires-app"
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(_component_Download, { size: 24 })
+                    ]),
+                    action: withCtx(() => [
+                      createVNode(_component_NcButton, {
+                        variant: "primary",
+                        href: $options.appInstallUrl($options.missingRequiredApp(item))
                       }, {
+                        icon: withCtx(() => [
+                          createVNode(_component_Download, { size: 18 })
+                        ]),
                         default: withCtx(() => [
-                          createVNode(_component_NcEmptyContent, {
-                            name: $options.installAppLabel($options.missingRequiredApp(item)),
-                            description: _ctx.t('nextcloud-vue', 'This widget shows data from another app that isn\'t installed yet.'),
-                            class: "cn-dashboard-page__requires-app cn-requires-app"
-                          }, {
-                            icon: withCtx(() => [
-                              createVNode(_component_Download, { size: 24 })
-                            ]),
-                            action: withCtx(() => [
-                              createVNode(_component_NcButton, {
-                                variant: "primary",
-                                href: $options.appInstallUrl($options.missingRequiredApp(item))
+                          createTextVNode(" " + toDisplayString($options.installAppLabel($options.missingRequiredApp(item))), 1 /* TEXT */)
+                        ]),
+                        _: 2 /* DYNAMIC */
+                      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["href"])
+                    ]),
+                    _: 2 /* DYNAMIC */
+                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["name", "description"])
+                ]),
+                _: 2 /* DYNAMIC */
+              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["title", "showTitle"]))
+            : ($options.isTile(item))
+              ? (openBlock(), createBlock(_component_CnTileWidget, {
+                  key: 2,
+                  tile: $options.getTileConfig(item)
+                }, null, 8 /* PROPS */, ["tile"]))
+              : ($options.hasWidgetSlot(item.widgetId))
+                ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
+                    key: 3,
+                    widgetId: item.widgetId,
+                    title: $options.getWidgetTitle(item),
+                    iconUrl: $options.getWidgetIconUrl(item),
+                    iconClass: $options.getWidgetIconClass(item),
+                    showTitle: $options.widgetShowTitle(item),
+                    borderless: $options.widgetBorderless(item),
+                    flush: item.flush !== false,
+                    buttons: $options.getWidgetButtons(item),
+                    headerLink: $options.getWidgetHeaderLink(item),
+                    styleConfig: item.styleConfig || {},
+                    titleIconPosition: $options.getWidgetTitleIconPosition(item),
+                    titleIconColor: $options.getWidgetTitleIconColor(item),
+                    titleIconVariant: $options.getWidgetTitleIconVariant(item),
+                    showRefresh: $options.getWidgetShowRefresh(item),
+                    showActions: $options.widgetShowActions(item),
+                    documentationUrl: $options.getWidgetDocumentationUrl(item),
+                    docsAnchor: $options.getWidgetDocsAnchor(item),
+                    onRefresh: $event => ($options.onWidgetRefresh(item)),
+                    onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
+                  }, createSlots({
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, 'widget-' + item.widgetId, {
+                        item: item,
+                        widget: $options.getWidgetDef(item.widgetId)
+                      })
+                    ]),
+                    _: 2 /* DYNAMIC */
+                  }, [
+                    (_ctx.$slots['widget-' + item.widgetId + '-title-icon'])
+                      ? {
+                          name: "title-icon",
+                          fn: withCtx(() => [
+                            renderSlot(_ctx.$slots, 'widget-' + item.widgetId + '-title-icon', {
+                              item: item,
+                              widget: $options.getWidgetDef(item.widgetId)
+                            })
+                          ]),
+                          key: "0"
+                        }
+                      : undefined,
+                    (_ctx.$slots['widget-' + item.widgetId + '-actions'])
+                      ? {
+                          name: "actions",
+                          fn: withCtx(() => [
+                            renderSlot(_ctx.$slots, 'widget-' + item.widgetId + '-actions', {
+                              item: item,
+                              widget: $options.getWidgetDef(item.widgetId)
+                            })
+                          ]),
+                          key: "1"
+                        }
+                      : undefined,
+                    ($options.dateRangeEnabled && item.dateChip === true)
+                      ? {
+                          name: "title-meta",
+                          fn: withCtx(() => [
+                            createVNode(_component_NcActions, {
+                              open: $data.openChipPicker[item.widgetId],
+                              "onUpdate:open": $event => (($data.openChipPicker[item.widgetId]) = $event),
+                              forceMenu: true,
+                              container: "body",
+                              "data-testid": `cn-dashboard-page-date-chip-${item.widgetId}`,
+                              class: "cn-dashboard-page__date-chip-trigger"
+                            }, {
+                              icon: withCtx(() => [
+                                createElementVNode("span", {
+                                  class: "cn-dashboard-page__date-chip",
+                                  title: $data.dateChipTitle
+                                }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_17)
+                              ]),
+                              default: withCtx(() => [
+                                (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
+                                  return (openBlock(), createBlock(_component_NcActionButton, {
+                                    key: preset.id,
+                                    closeAfterClick: true,
+                                    onClick: $event => ($options.onChipPresetPick(preset, item))
+                                  }, {
+                                    icon: withCtx(() => [
+                                      ($data.currentRange.preset === preset.id)
+                                        ? (openBlock(), createBlock(_component_CalendarRange, {
+                                            key: 0,
+                                            size: 16
+                                          }))
+                                        : (openBlock(), createElementBlock("span", _hoisted_18))
+                                    ]),
+                                    default: withCtx(() => [
+                                      createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
+                                    ]),
+                                    _: 2 /* DYNAMIC */
+                                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
+                                }), 128 /* KEYED_FRAGMENT */)),
+                                createVNode(_component_NcActionSeparator),
+                                createVNode(_component_NcActionInput, {
+                                  type: "datetime-local",
+                                  isNativePicker: "",
+                                  modelValue: $options.toPickerDate($data.currentRange.from),
+                                  label: _ctx.t('nextcloud-vue', 'From'),
+                                  "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ($options.onChipDateInput('from', $event)))
+                                }, null, 8 /* PROPS */, ["modelValue", "label"]),
+                                createVNode(_component_NcActionInput, {
+                                  type: "datetime-local",
+                                  isNativePicker: "",
+                                  modelValue: $options.toPickerDate($data.currentRange.to),
+                                  label: _ctx.t('nextcloud-vue', 'To'),
+                                  "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ($options.onChipDateInput('to', $event)))
+                                }, null, 8 /* PROPS */, ["modelValue", "label"])
+                              ]),
+                              _: 2 /* DYNAMIC */
+                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["open", "onUpdate:open", "data-testid"])
+                          ]),
+                          key: "2"
+                        }
+                      : undefined
+                  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "iconUrl", "iconClass", "showTitle", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "showActions", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                : ($options.isChart(item))
+                  ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
+                      key: 4,
+                      widgetId: item.widgetId,
+                      class: normalizeClass({ 'cn-dashboard-page__chart-fit': $options.isChartFitted(item) }),
+                      title: $options.getWidgetTitle(item),
+                      iconUrl: $options.getWidgetIconUrl(item),
+                      iconClass: $options.getWidgetIconClass(item),
+                      showTitle: $options.widgetShowTitle(item),
+                      showActions: $options.widgetShowActions(item),
+                      borderless: $options.widgetBorderless(item),
+                      flush: item.flush !== false,
+                      buttons: $options.getWidgetButtons(item),
+                      headerLink: $options.getWidgetHeaderLink(item),
+                      styleConfig: item.styleConfig || {},
+                      titleIconPosition: $options.getWidgetTitleIconPosition(item),
+                      titleIconColor: $options.getWidgetTitleIconColor(item),
+                      titleIconVariant: $options.getWidgetTitleIconVariant(item),
+                      showRefresh: $options.getWidgetShowRefresh(item),
+                      documentationUrl: $options.getWidgetDocumentationUrl(item),
+                      docsAnchor: $options.getWidgetDocsAnchor(item),
+                      onRefresh: $event => ($options.onWidgetRefresh(item)),
+                      onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
+                    }, createSlots({
+                      default: withCtx(() => [
+                        createVNode(_component_CnChartWidget, mergeProps({ ref_for: true }, $options.getChartProps(item), {
+                          widgetId: item.widgetId,
+                          "data-source": $options.getWidgetDataSource(item)
+                        }), null, 16 /* FULL_PROPS */, ["widgetId", "data-source"])
+                      ]),
+                      _: 2 /* DYNAMIC */
+                    }, [
+                      ($options.dateRangeEnabled && (item.dateChip === true || $options.formatChartDateRange(item)))
+                        ? {
+                            name: "title-meta",
+                            fn: withCtx(() => [
+                              createVNode(_component_NcActions, {
+                                open: $data.openChipPicker[item.widgetId],
+                                "onUpdate:open": $event => (($data.openChipPicker[item.widgetId]) = $event),
+                                forceMenu: true,
+                                container: "body",
+                                "data-testid": `cn-dashboard-page-date-chip-${item.widgetId}`,
+                                class: "cn-dashboard-page__date-chip-trigger"
                               }, {
                                 icon: withCtx(() => [
-                                  createVNode(_component_Download, { size: 18 })
+                                  createElementVNode("span", {
+                                    class: "cn-dashboard-page__date-chip",
+                                    title: $data.dateChipTitle
+                                  }, toDisplayString($options.formatChartDateRange(item) || $options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_19)
                                 ]),
                                 default: withCtx(() => [
-                                  createTextVNode(" " + toDisplayString($options.installAppLabel($options.missingRequiredApp(item))), 1 /* TEXT */)
+                                  (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
+                                    return (openBlock(), createBlock(_component_NcActionButton, {
+                                      key: preset.id,
+                                      closeAfterClick: true,
+                                      onClick: $event => ($options.onChipPresetPick(preset, item))
+                                    }, {
+                                      icon: withCtx(() => [
+                                        ($data.currentRange.preset === preset.id)
+                                          ? (openBlock(), createBlock(_component_CalendarRange, {
+                                              key: 0,
+                                              size: 16
+                                            }))
+                                          : (openBlock(), createElementBlock("span", _hoisted_20))
+                                      ]),
+                                      default: withCtx(() => [
+                                        createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
+                                      ]),
+                                      _: 2 /* DYNAMIC */
+                                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
+                                  }), 128 /* KEYED_FRAGMENT */)),
+                                  createVNode(_component_NcActionSeparator),
+                                  createVNode(_component_NcActionInput, {
+                                    type: "datetime-local",
+                                    isNativePicker: "",
+                                    modelValue: $options.toPickerDate($data.currentRange.from),
+                                    label: _ctx.t('nextcloud-vue', 'From'),
+                                    "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ($options.onChipDateInput('from', $event)))
+                                  }, null, 8 /* PROPS */, ["modelValue", "label"]),
+                                  createVNode(_component_NcActionInput, {
+                                    type: "datetime-local",
+                                    isNativePicker: "",
+                                    modelValue: $options.toPickerDate($data.currentRange.to),
+                                    label: _ctx.t('nextcloud-vue', 'To'),
+                                    "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => ($options.onChipDateInput('to', $event)))
+                                  }, null, 8 /* PROPS */, ["modelValue", "label"])
                                 ]),
                                 _: 2 /* DYNAMIC */
-                              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["href"])
+                              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["open", "onUpdate:open", "data-testid"])
                             ]),
-                            _: 2 /* DYNAMIC */
-                          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["name", "description"])
+                            key: "0"
+                          }
+                        : undefined
+                    ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "class", "title", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                  : ($options.isStatsBlock(item))
+                    ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
+                        key: 5,
+                        widgetId: item.widgetId,
+                        title: $options.getWidgetTitle(item),
+                        iconUrl: $options.getWidgetIconUrl(item),
+                        iconClass: $options.getWidgetIconClass(item),
+                        showTitle: $options.widgetShowTitle(item),
+                        showActions: $options.widgetShowActions(item),
+                        borderless: $options.widgetBorderless(item),
+                        flush: item.flush !== false,
+                        class: normalizeClass({ 'cn-dashboard-page__card-fit': $options.isCardWidget(item) }),
+                        buttons: $options.getWidgetButtons(item),
+                        headerLink: $options.getWidgetHeaderLink(item),
+                        styleConfig: item.styleConfig || {},
+                        documentationUrl: $options.getWidgetDocumentationUrl(item),
+                        docsAnchor: $options.getWidgetDocsAnchor(item),
+                        onRefresh: $event => ($options.onWidgetRefresh(item)),
+                        onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_CnStatsBlockWidget, mergeProps({ ref_for: true }, $options.getStatsBlockProps(item), {
+                            title: $options.getWidgetTitle(item),
+                            "data-source": $options.getWidgetDataSource(item)
+                          }), null, 16 /* FULL_PROPS */, ["title", "data-source"])
                         ]),
                         _: 2 /* DYNAMIC */
-                      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["title", "showTitle"]))
-                    : ($options.isTile(item))
-                      ? (openBlock(), createBlock(_component_CnTileWidget, {
-                          key: 2,
-                          tile: $options.getTileConfig(item)
-                        }, null, 8 /* PROPS */, ["tile"]))
-                      : ($options.hasWidgetSlot(item.widgetId))
+                      }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "class", "buttons", "headerLink", "styleConfig", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                    : ($options.isIntegration(item))
+                      ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
+                          key: 6,
+                          widgetId: item.widgetId,
+                          title: $options.getWidgetTitle(item),
+                          iconUrl: $options.getWidgetIconUrl(item),
+                          iconClass: $options.getWidgetIconClass(item),
+                          showTitle: $options.widgetShowTitle(item),
+                          showActions: $options.widgetShowActions(item),
+                          borderless: $options.widgetBorderless(item),
+                          flush: item.flush !== false,
+                          buttons: $options.getWidgetButtons(item),
+                          headerLink: $options.getWidgetHeaderLink(item),
+                          styleConfig: item.styleConfig || {},
+                          titleIconPosition: $options.getWidgetTitleIconPosition(item),
+                          titleIconColor: $options.getWidgetTitleIconColor(item),
+                          titleIconVariant: $options.getWidgetTitleIconVariant(item),
+                          showRefresh: $options.getWidgetShowRefresh(item),
+                          documentationUrl: $options.getWidgetDocumentationUrl(item),
+                          docsAnchor: $options.getWidgetDocsAnchor(item),
+                          onRefresh: $event => ($options.onWidgetRefresh(item)),
+                          onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
+                        }, {
+                          default: withCtx(() => [
+                            ($options.isMountIntegration(item))
+                              ? (openBlock(), createBlock(_component_CnLeafMountHost, {
+                                  key: 0,
+                                  provider: $options.integrationProviderFor(item),
+                                  mountProps: $options.getIntegrationMountProps(item)
+                                }, null, 8 /* PROPS */, ["provider", "mountProps"]))
+                              : ($options.resolveIntegrationWidget(item))
+                                ? (openBlock(), createBlock(resolveDynamicComponent($options.resolveIntegrationWidget(item)), mergeProps({
+                                    key: 1,
+                                    ref_for: true
+                                  }, $options.getIntegrationProps(item)), null, 16 /* FULL_PROPS */))
+                                : (openBlock(), createElementBlock("div", _hoisted_21, toDisplayString($props.unavailableLabel), 1 /* TEXT */))
+                          ]),
+                          _: 2 /* DYNAMIC */
+                        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "buttons", "headerLink", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                      : ($options.isNcWidget(item))
                         ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
-                            key: 3,
+                            key: 7,
                             widgetId: item.widgetId,
                             title: $options.getWidgetTitle(item),
                             iconUrl: $options.getWidgetIconUrl(item),
                             iconClass: $options.getWidgetIconClass(item),
                             showTitle: $options.widgetShowTitle(item),
-                            borderless: $options.widgetBorderless(item),
-                            flush: item.flush !== false,
+                            showActions: $options.widgetShowActions(item),
                             buttons: $options.getWidgetButtons(item),
+                            headerLink: $options.getWidgetHeaderLink(item),
                             styleConfig: item.styleConfig || {},
-                            titleIconPosition: $options.getWidgetTitleIconPosition(item),
-                            titleIconColor: $options.getWidgetTitleIconColor(item),
-                            titleIconVariant: $options.getWidgetTitleIconVariant(item),
                             showRefresh: $options.getWidgetShowRefresh(item),
-                            showActions: $options.widgetShowActions(item),
                             documentationUrl: $options.getWidgetDocumentationUrl(item),
                             docsAnchor: $options.getWidgetDocsAnchor(item),
                             onRefresh: $event => ($options.onWidgetRefresh(item)),
                             onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
-                          }, createSlots({
+                          }, {
                             default: withCtx(() => [
-                              renderSlot(_ctx.$slots, 'widget-' + item.widgetId, {
-                                item: item,
-                                widget: $options.getWidgetDef(item.widgetId)
-                              })
+                              createVNode(_component_CnWidgetRenderer, {
+                                widget: $options.getWidgetDef(item.widgetId),
+                                unavailableText: $props.unavailableLabel
+                              }, null, 8 /* PROPS */, ["widget", "unavailableText"])
                             ]),
                             _: 2 /* DYNAMIC */
-                          }, [
-                            (_ctx.$slots['widget-' + item.widgetId + '-title-icon'])
-                              ? {
-                                  name: "title-icon",
-                                  fn: withCtx(() => [
-                                    renderSlot(_ctx.$slots, 'widget-' + item.widgetId + '-title-icon', {
-                                      item: item,
-                                      widget: $options.getWidgetDef(item.widgetId)
-                                    })
-                                  ]),
-                                  key: "0"
-                                }
-                              : undefined,
-                            (_ctx.$slots['widget-' + item.widgetId + '-actions'])
-                              ? {
-                                  name: "actions",
-                                  fn: withCtx(() => [
-                                    renderSlot(_ctx.$slots, 'widget-' + item.widgetId + '-actions', {
-                                      item: item,
-                                      widget: $options.getWidgetDef(item.widgetId)
-                                    })
-                                  ]),
-                                  key: "1"
-                                }
-                              : undefined,
-                            ($options.dateRangeEnabled && item.dateChip === true)
-                              ? {
-                                  name: "title-meta",
-                                  fn: withCtx(() => [
-                                    createVNode(_component_NcActions, {
-                                      open: $data.openChipPicker[item.widgetId],
-                                      "onUpdate:open": $event => (($data.openChipPicker[item.widgetId]) = $event),
-                                      forceMenu: true,
-                                      container: "body",
-                                      "data-testid": `cn-dashboard-page-date-chip-${item.widgetId}`,
-                                      class: "cn-dashboard-page__date-chip-trigger"
-                                    }, {
-                                      icon: withCtx(() => [
-                                        createElementVNode("span", {
-                                          class: "cn-dashboard-page__date-chip",
-                                          title: $data.dateChipTitle
-                                        }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_15)
-                                      ]),
-                                      default: withCtx(() => [
-                                        (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
-                                          return (openBlock(), createBlock(_component_NcActionButton, {
-                                            key: preset.id,
-                                            closeAfterClick: true,
-                                            onClick: $event => ($options.onChipPresetPick(preset, item))
-                                          }, {
-                                            icon: withCtx(() => [
-                                              ($data.currentRange.preset === preset.id)
-                                                ? (openBlock(), createBlock(_component_CalendarRange, {
-                                                    key: 0,
-                                                    size: 16
-                                                  }))
-                                                : (openBlock(), createElementBlock("span", _hoisted_16))
-                                            ]),
-                                            default: withCtx(() => [
-                                              createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
-                                            ]),
-                                            _: 2 /* DYNAMIC */
-                                          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
-                                        }), 128 /* KEYED_FRAGMENT */)),
-                                        createVNode(_component_NcActionSeparator),
-                                        createVNode(_component_NcActionInput, {
-                                          type: "datetime-local",
-                                          isNativePicker: "",
-                                          modelValue: $options.toPickerDate($data.currentRange.from),
-                                          label: _ctx.t('nextcloud-vue', 'From'),
-                                          "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => ($options.onChipDateInput('from', $event)))
-                                        }, null, 8 /* PROPS */, ["modelValue", "label"]),
-                                        createVNode(_component_NcActionInput, {
-                                          type: "datetime-local",
-                                          isNativePicker: "",
-                                          modelValue: $options.toPickerDate($data.currentRange.to),
-                                          label: _ctx.t('nextcloud-vue', 'To'),
-                                          "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => ($options.onChipDateInput('to', $event)))
-                                        }, null, 8 /* PROPS */, ["modelValue", "label"])
-                                      ]),
-                                      _: 2 /* DYNAMIC */
-                                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["open", "onUpdate:open", "data-testid"])
-                                  ]),
-                                  key: "2"
-                                }
-                              : undefined
-                          ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "iconUrl", "iconClass", "showTitle", "borderless", "flush", "buttons", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "showActions", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
-                        : ($options.isChart(item))
+                          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "iconUrl", "iconClass", "showTitle", "showActions", "buttons", "headerLink", "styleConfig", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                        : ($options.registryRenderer(item))
                           ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
-                              key: 4,
+                              key: 8,
                               widgetId: item.widgetId,
-                              class: normalizeClass({ 'cn-dashboard-page__chart-fit': $options.isChartFitted(item) }),
                               title: $options.getWidgetTitle(item),
-                              iconUrl: $options.getWidgetIconUrl(item),
-                              iconClass: $options.getWidgetIconClass(item),
                               showTitle: $options.widgetShowTitle(item),
+                              showActions: $options.widgetShowActions(item),
+                              showRefresh: $options.getWidgetShowRefresh(item),
                               borderless: $options.widgetBorderless(item),
                               flush: item.flush !== false,
-                              buttons: $options.getWidgetButtons(item),
-                              styleConfig: item.styleConfig || {},
                               titleIconPosition: $options.getWidgetTitleIconPosition(item),
                               titleIconColor: $options.getWidgetTitleIconColor(item),
                               titleIconVariant: $options.getWidgetTitleIconVariant(item),
-                              showRefresh: $options.getWidgetShowRefresh(item),
+                              class: normalizeClass({ 'cn-dashboard-page__card-fit': $options.isCardWidget(item) }),
+                              buttons: $options.getWidgetButtons(item),
+                              headerLink: $options.getWidgetHeaderLink(item),
+                              styleConfig: item.styleConfig || {},
                               documentationUrl: $options.getWidgetDocumentationUrl(item),
                               docsAnchor: $options.getWidgetDocsAnchor(item),
                               onRefresh: $event => ($options.onWidgetRefresh(item)),
                               onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
                             }, createSlots({
                               default: withCtx(() => [
-                                createVNode(_component_CnChartWidget, mergeProps($options.getChartProps(item), {
+                                (openBlock(), createBlock(resolveDynamicComponent($options.registryRenderer(item)), mergeProps({
                                   widgetId: item.widgetId,
-                                  "data-source": $options.getWidgetDataSource(item)
-                                }), null, 16 /* FULL_PROPS */, ["widgetId", "data-source"])
+                                  content: $options.registryWidgetBindings(item)
+                                }, { ref_for: true }, $options.registryWidgetBindings(item)), null, 16 /* FULL_PROPS */, ["widgetId", "content"]))
                               ]),
                               _: 2 /* DYNAMIC */
                             }, [
-                              ($options.dateRangeEnabled && (item.dateChip === true || $options.formatChartDateRange(item)))
+                              ($options.dateRangeEnabled && item.dateChip === true)
                                 ? {
                                     name: "title-meta",
                                     fn: withCtx(() => [
@@ -525,7 +758,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                           createElementVNode("span", {
                                             class: "cn-dashboard-page__date-chip",
                                             title: $data.dateChipTitle
-                                          }, toDisplayString($options.formatChartDateRange(item) || $options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_17)
+                                          }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_22)
                                         ]),
                                         default: withCtx(() => [
                                           (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
@@ -535,12 +768,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                               onClick: $event => ($options.onChipPresetPick(preset, item))
                                             }, {
                                               icon: withCtx(() => [
-                                                ($data.currentRange.preset === preset.id)
+                                                ($data.currentRange && $data.currentRange.preset === preset.id)
                                                   ? (openBlock(), createBlock(_component_CalendarRange, {
                                                       key: 0,
                                                       size: 16
                                                     }))
-                                                  : (openBlock(), createElementBlock("span", _hoisted_18))
+                                                  : (openBlock(), createElementBlock("span", _hoisted_23))
                                               ]),
                                               default: withCtx(() => [
                                                 createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
@@ -552,16 +785,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                           createVNode(_component_NcActionInput, {
                                             type: "datetime-local",
                                             isNativePicker: "",
-                                            modelValue: $options.toPickerDate($data.currentRange.from),
+                                            modelValue: $options.toPickerDate($data.currentRange && $data.currentRange.from),
                                             label: _ctx.t('nextcloud-vue', 'From'),
-                                            "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => ($options.onChipDateInput('from', $event)))
+                                            "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ($options.onChipDateInput('from', $event)))
                                           }, null, 8 /* PROPS */, ["modelValue", "label"]),
                                           createVNode(_component_NcActionInput, {
                                             type: "datetime-local",
                                             isNativePicker: "",
-                                            modelValue: $options.toPickerDate($data.currentRange.to),
+                                            modelValue: $options.toPickerDate($data.currentRange && $data.currentRange.to),
                                             label: _ctx.t('nextcloud-vue', 'To'),
-                                            "onUpdate:modelValue": _cache[5] || (_cache[5] = $event => ($options.onChipDateInput('to', $event)))
+                                            "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ($options.onChipDateInput('to', $event)))
                                           }, null, 8 /* PROPS */, ["modelValue", "label"])
                                         ]),
                                         _: 2 /* DYNAMIC */
@@ -570,200 +803,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     key: "0"
                                   }
                                 : undefined
-                            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "class", "title", "iconUrl", "iconClass", "showTitle", "borderless", "flush", "buttons", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
-                          : ($options.isStatsBlock(item))
-                            ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
-                                key: 5,
-                                widgetId: item.widgetId,
-                                title: $options.getWidgetTitle(item),
-                                iconUrl: $options.getWidgetIconUrl(item),
-                                iconClass: $options.getWidgetIconClass(item),
-                                showTitle: $options.widgetShowTitle(item),
-                                showActions: $options.widgetShowActions(item),
-                                borderless: $options.widgetBorderless(item),
-                                flush: item.flush !== false,
-                                class: normalizeClass({ 'cn-dashboard-page__card-fit': $options.isCardWidget(item) }),
-                                buttons: $options.getWidgetButtons(item),
-                                styleConfig: item.styleConfig || {},
-                                documentationUrl: $options.getWidgetDocumentationUrl(item),
-                                docsAnchor: $options.getWidgetDocsAnchor(item),
-                                onRefresh: $event => ($options.onWidgetRefresh(item)),
-                                onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
-                              }, {
-                                default: withCtx(() => [
-                                  createVNode(_component_CnStatsBlockWidget, mergeProps($options.getStatsBlockProps(item), {
-                                    title: $options.getWidgetTitle(item),
-                                    "data-source": $options.getWidgetDataSource(item)
-                                  }), null, 16 /* FULL_PROPS */, ["title", "data-source"])
-                                ]),
-                                _: 2 /* DYNAMIC */
-                              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "iconUrl", "iconClass", "showTitle", "showActions", "borderless", "flush", "class", "buttons", "styleConfig", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
-                            : ($options.isIntegration(item))
-                              ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
-                                  key: 6,
-                                  widgetId: item.widgetId,
-                                  title: $options.getWidgetTitle(item),
-                                  iconUrl: $options.getWidgetIconUrl(item),
-                                  iconClass: $options.getWidgetIconClass(item),
-                                  showTitle: $options.widgetShowTitle(item),
-                                  borderless: $options.widgetBorderless(item),
-                                  flush: item.flush !== false,
-                                  buttons: $options.getWidgetButtons(item),
-                                  styleConfig: item.styleConfig || {},
-                                  titleIconPosition: $options.getWidgetTitleIconPosition(item),
-                                  titleIconColor: $options.getWidgetTitleIconColor(item),
-                                  titleIconVariant: $options.getWidgetTitleIconVariant(item),
-                                  showRefresh: $options.getWidgetShowRefresh(item),
-                                  documentationUrl: $options.getWidgetDocumentationUrl(item),
-                                  docsAnchor: $options.getWidgetDocsAnchor(item),
-                                  onRefresh: $event => ($options.onWidgetRefresh(item)),
-                                  onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
-                                }, {
-                                  default: withCtx(() => [
-                                    ($options.isMountIntegration(item))
-                                      ? (openBlock(), createBlock(_component_CnLeafMountHost, {
-                                          key: 0,
-                                          provider: $options.integrationProviderFor(item),
-                                          mountProps: $options.getIntegrationMountProps(item)
-                                        }, null, 8 /* PROPS */, ["provider", "mountProps"]))
-                                      : ($options.resolveIntegrationWidget(item))
-                                        ? (openBlock(), createBlock(resolveDynamicComponent($options.resolveIntegrationWidget(item)), normalizeProps(mergeProps({ key: 1 }, $options.getIntegrationProps(item))), null, 16 /* FULL_PROPS */))
-                                        : (openBlock(), createElementBlock("div", _hoisted_19, toDisplayString($props.unavailableLabel), 1 /* TEXT */))
-                                  ]),
-                                  _: 2 /* DYNAMIC */
-                                }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "iconUrl", "iconClass", "showTitle", "borderless", "flush", "buttons", "styleConfig", "titleIconPosition", "titleIconColor", "titleIconVariant", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
-                              : ($options.isNcWidget(item))
-                                ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
-                                    key: 7,
-                                    widgetId: item.widgetId,
-                                    title: $options.getWidgetTitle(item),
-                                    iconUrl: $options.getWidgetIconUrl(item),
-                                    iconClass: $options.getWidgetIconClass(item),
-                                    showTitle: $options.widgetShowTitle(item),
-                                    buttons: $options.getWidgetButtons(item),
-                                    styleConfig: item.styleConfig || {},
-                                    showRefresh: $options.getWidgetShowRefresh(item),
-                                    documentationUrl: $options.getWidgetDocumentationUrl(item),
-                                    docsAnchor: $options.getWidgetDocsAnchor(item),
-                                    onRefresh: $event => ($options.onWidgetRefresh(item)),
-                                    onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
-                                  }, {
-                                    default: withCtx(() => [
-                                      createVNode(_component_CnWidgetRenderer, {
-                                        widget: $options.getWidgetDef(item.widgetId),
-                                        unavailableText: $props.unavailableLabel
-                                      }, null, 8 /* PROPS */, ["widget", "unavailableText"])
-                                    ]),
-                                    _: 2 /* DYNAMIC */
-                                  }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "iconUrl", "iconClass", "showTitle", "buttons", "styleConfig", "showRefresh", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
-                                : ($options.registryRenderer(item))
-                                  ? (openBlock(), createBlock(_component_CnWidgetWrapper, {
-                                      key: 8,
-                                      widgetId: item.widgetId,
-                                      title: $options.getWidgetTitle(item),
-                                      showTitle: $options.widgetShowTitle(item),
-                                      showActions: $options.widgetShowActions(item),
-                                      showRefresh: $options.getWidgetShowRefresh(item),
-                                      borderless: $options.widgetBorderless(item),
-                                      flush: item.flush !== false,
-                                      titleIconPosition: $options.getWidgetTitleIconPosition(item),
-                                      titleIconColor: $options.getWidgetTitleIconColor(item),
-                                      titleIconVariant: $options.getWidgetTitleIconVariant(item),
-                                      class: normalizeClass({ 'cn-dashboard-page__card-fit': $options.isCardWidget(item) }),
-                                      buttons: $options.getWidgetButtons(item),
-                                      styleConfig: item.styleConfig || {},
-                                      documentationUrl: $options.getWidgetDocumentationUrl(item),
-                                      docsAnchor: $options.getWidgetDocsAnchor(item),
-                                      onRefresh: $event => ($options.onWidgetRefresh(item)),
-                                      onRequestFeature: $event => ($options.onWidgetRequestFeature(item))
-                                    }, createSlots({
-                                      default: withCtx(() => [
-                                        (openBlock(), createBlock(resolveDynamicComponent($options.registryRenderer(item)), mergeProps({
-                                          widgetId: item.widgetId,
-                                          content: $options.registryWidgetBindings(item)
-                                        }, $options.registryWidgetBindings(item)), null, 16 /* FULL_PROPS */, ["widgetId", "content"]))
-                                      ]),
-                                      _: 2 /* DYNAMIC */
-                                    }, [
-                                      ($options.dateRangeEnabled && item.dateChip === true)
-                                        ? {
-                                            name: "title-meta",
-                                            fn: withCtx(() => [
-                                              createVNode(_component_NcActions, {
-                                                open: $data.openChipPicker[item.widgetId],
-                                                "onUpdate:open": $event => (($data.openChipPicker[item.widgetId]) = $event),
-                                                forceMenu: true,
-                                                container: "body",
-                                                "data-testid": `cn-dashboard-page-date-chip-${item.widgetId}`,
-                                                class: "cn-dashboard-page__date-chip-trigger"
-                                              }, {
-                                                icon: withCtx(() => [
-                                                  createElementVNode("span", {
-                                                    class: "cn-dashboard-page__date-chip",
-                                                    title: $data.dateChipTitle
-                                                  }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_20)
-                                                ]),
-                                                default: withCtx(() => [
-                                                  (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
-                                                    return (openBlock(), createBlock(_component_NcActionButton, {
-                                                      key: preset.id,
-                                                      closeAfterClick: true,
-                                                      onClick: $event => ($options.onChipPresetPick(preset, item))
-                                                    }, {
-                                                      icon: withCtx(() => [
-                                                        ($data.currentRange && $data.currentRange.preset === preset.id)
-                                                          ? (openBlock(), createBlock(_component_CalendarRange, {
-                                                              key: 0,
-                                                              size: 16
-                                                            }))
-                                                          : (openBlock(), createElementBlock("span", _hoisted_21))
-                                                      ]),
-                                                      default: withCtx(() => [
-                                                        createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
-                                                      ]),
-                                                      _: 2 /* DYNAMIC */
-                                                    }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]))
-                                                  }), 128 /* KEYED_FRAGMENT */)),
-                                                  createVNode(_component_NcActionSeparator),
-                                                  createVNode(_component_NcActionInput, {
-                                                    type: "datetime-local",
-                                                    isNativePicker: "",
-                                                    modelValue: $options.toPickerDate($data.currentRange && $data.currentRange.from),
-                                                    label: _ctx.t('nextcloud-vue', 'From'),
-                                                    "onUpdate:modelValue": _cache[6] || (_cache[6] = $event => ($options.onChipDateInput('from', $event)))
-                                                  }, null, 8 /* PROPS */, ["modelValue", "label"]),
-                                                  createVNode(_component_NcActionInput, {
-                                                    type: "datetime-local",
-                                                    isNativePicker: "",
-                                                    modelValue: $options.toPickerDate($data.currentRange && $data.currentRange.to),
-                                                    label: _ctx.t('nextcloud-vue', 'To'),
-                                                    "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ($options.onChipDateInput('to', $event)))
-                                                  }, null, 8 /* PROPS */, ["modelValue", "label"])
-                                                ]),
-                                                _: 2 /* DYNAMIC */
-                                              }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["open", "onUpdate:open", "data-testid"])
-                                            ]),
-                                            key: "0"
-                                          }
-                                        : undefined
-                                    ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "showTitle", "showActions", "showRefresh", "borderless", "flush", "titleIconPosition", "titleIconColor", "titleIconVariant", "class", "buttons", "styleConfig", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
-                                  : (openBlock(), createBlock(_component_CnWidgetWrapper, {
-                                      key: 9,
-                                      title: $options.getWidgetTitle(item),
-                                      showTitle: $options.widgetShowTitle(item),
-                                      showRefresh: false
-                                    }, {
-                                      default: withCtx(() => [
-                                        createElementVNode("div", _hoisted_22, toDisplayString($props.unavailableLabel), 1 /* TEXT */)
-                                      ]),
-                                      _: 1 /* STABLE */
-                                    }, 8 /* PROPS */, ["title", "showTitle"]))
-                ]),
-                _: 3 /* FORWARDED */
-              }, 8 /* PROPS */, ["layout", "editable", "columns", "cellHeight", "margin", "onLayoutChange"])),
+                            ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["widgetId", "title", "showTitle", "showActions", "showRefresh", "borderless", "flush", "titleIconPosition", "titleIconColor", "titleIconVariant", "class", "buttons", "headerLink", "styleConfig", "documentationUrl", "docsAnchor", "onRefresh", "onRequestFeature"]))
+                          : (openBlock(), createBlock(_component_CnWidgetWrapper, {
+                              key: 9,
+                              title: $options.getWidgetTitle(item),
+                              showTitle: $options.widgetShowTitle(item),
+                              showRefresh: false
+                            }, {
+                              default: withCtx(() => [
+                                createElementVNode("div", _hoisted_24, toDisplayString($props.unavailableLabel), 1 /* TEXT */)
+                              ]),
+                              _: 1 /* STABLE */
+                            }, 8 /* PROPS */, ["title", "showTitle"]))
+        ]),
+        _: 3 /* FORWARDED */
+      }, 16 /* FULL_PROPS */, ["layout", "editable", "columns", "cellHeight", "margin", "onLayoutChange"]))
+    }), 128 /* KEYED_FRAGMENT */)),
+    ($options.gridSectionsShown && $options.viewIsEmpty)
+      ? (openBlock(), createElementBlock("div", {
+          key: 10,
+          id: _ctx.viewRegionId,
+          role: "region",
+          "aria-label": _ctx.activeView ? _ctx.activeView.label : null,
+          class: "cn-page-view-region cn-page-view-region--empty",
+          "data-testid": "cn-dashboard-page-view-empty"
+        }, [
+          createVNode(_component_NcEmptyContent, { description: _ctx.viewEmptyText }, {
+            icon: withCtx(() => [
+              createVNode(_component_ViewDashboardOutline, { size: 48 })
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["description"])
+        ], 8 /* PROPS */, _hoisted_25))
+      : createCommentVNode("v-if", true),
     ($options.hasBodyWidgets)
       ? (openBlock(), createBlock(_component_CnBodySections, {
-          key: 8,
+          key: 11,
           sections: $props.bodyWidgets,
           context: $options.sectionContext,
           placement: "after-grid",
@@ -772,7 +847,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : createCommentVNode("v-if", true),
     ($options.hasBodyWidgets)
       ? (openBlock(), createBlock(_component_CnBodySections, {
-          key: 9,
+          key: 12,
           sections: $options.endPlacementSections,
           context: $options.sectionContext,
           placement: null,
@@ -781,7 +856,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : createCommentVNode("v-if", true),
     ($data.showWidgetConfig)
       ? (openBlock(), createBlock(_component_CnWidgetStyleEditorModal, {
-          key: 10,
+          key: 13,
           show: $data.showWidgetConfig,
           widget: $options.configWidget,
           deletable: true,