@conduction/nextcloud-vue 2.65.0 → 2.66.0

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

@@ -1,4 +1,4 @@
-import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, 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",
@@ -48,31 +48,37 @@ const _hoisted_14 = {
   class: "cn-dashboard-page__content"
 };
 const _hoisted_15 = {
+  key: 9,
+  class: "cn-dashboard-page__view-switch"
+};
+const _hoisted_16 = {
   key: 0,
   class: "cn-dashboard-page__widget-edit"
 };
-const _hoisted_16 = ["title"];
-const _hoisted_17 = {
+const _hoisted_17 = ["title"];
+const _hoisted_18 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_18 = ["title"];
-const _hoisted_19 = {
+const _hoisted_19 = ["title"];
+const _hoisted_20 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_20 = {
+const _hoisted_21 = {
   key: 2,
   class: "cn-dashboard-page__unknown"
 };
-const _hoisted_21 = ["title"];
-const _hoisted_22 = {
+const _hoisted_22 = ["title"];
+const _hoisted_23 = {
   key: 1,
   class: "cn-dashboard-page__date-chip-preset-spacer"
 };
-const _hoisted_23 = { 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");
@@ -122,9 +128,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               : 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: 0,
+                  key: 1,
                   actions: $props.headerActions,
                   "data-testid": "cn-dashboard-page-header-actions"
                 }, null, 8 /* PROPS */, ["actions"]))
@@ -133,7 +151,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "actions"),
             ($props.allowEdit)
               ? (openBlock(), createBlock(_component_NcButton, {
-                  key: 1,
+                  key: 2,
                   variant: $data.isEditing ? 'primary' : 'secondary',
                   onClick: $options.toggleEdit
                 }, {
@@ -290,7 +308,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 5 }))
       : (!$data.widgetConditionsSettled && !$options.gridEditable)
         ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 6 }))
-        : (!$options.hasWidgets && !$options.hasBodyWidgets)
+        : (!$options.hasWidgets && !$options.hasBodyWidgets && !_ctx.hasViews)
           ? (openBlock(), createElementBlock("div", _hoisted_13, [
               renderSlot(_ctx.$slots, "empty", {}, () => [
                 createVNode(_component_NcEmptyContent, { description: $props.emptyLabel }, {
@@ -311,219 +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_15, [
-                        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_16)
-                                      ]),
-                                      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_17))
-                                            ]),
-                                            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))
+                          }, 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),
-                              headerLink: $options.getWidgetHeaderLink(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(() => [
@@ -539,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_18)
+                                          }, toDisplayString($options.dashboardRangeChipLabel), 9 /* TEXT, PROPS */, _hoisted_22)
                                         ]),
                                         default: withCtx(() => [
                                           (openBlock(true), createElementBlock(Fragment, null, renderList($options.effectivePresets, (preset) => {
@@ -549,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_19))
+                                                  : (openBlock(), createElementBlock("span", _hoisted_23))
                                               ]),
                                               default: withCtx(() => [
                                                 createTextVNode(" " + toDisplayString(preset.label), 1 /* TEXT */)
@@ -566,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 */
@@ -584,206 +803,42 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                     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($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", "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)), normalizeProps(mergeProps({ key: 1 }, $options.getIntegrationProps(item))), null, 16 /* FULL_PROPS */))
-                                        : (openBlock(), createElementBlock("div", _hoisted_20, 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: 7,
-                                    widgetId: item.widgetId,
-                                    title: $options.getWidgetTitle(item),
-                                    iconUrl: $options.getWidgetIconUrl(item),
-                                    iconClass: $options.getWidgetIconClass(item),
-                                    showTitle: $options.widgetShowTitle(item),
-                                    showActions: $options.widgetShowActions(item),
-                                    buttons: $options.getWidgetButtons(item),
-                                    headerLink: $options.getWidgetHeaderLink(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", "showActions", "buttons", "headerLink", "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),
-                                      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(() => [
-                                        (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_21)
-                                                ]),
-                                                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_22))
-                                                      ]),
-                                                      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", "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_23, 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: 10,
+          key: 11,
           sections: $props.bodyWidgets,
           context: $options.sectionContext,
           placement: "after-grid",
@@ -792,7 +847,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : createCommentVNode("v-if", true),
     ($options.hasBodyWidgets)
       ? (openBlock(), createBlock(_component_CnBodySections, {
-          key: 11,
+          key: 12,
           sections: $options.endPlacementSections,
           context: $options.sectionContext,
           placement: null,
@@ -801,7 +856,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       : createCommentVNode("v-if", true),
     ($data.showWidgetConfig)
       ? (openBlock(), createBlock(_component_CnWidgetStyleEditorModal, {
-          key: 12,
+          key: 13,
           show: $data.showWidgetConfig,
           widget: $options.configWidget,
           deletable: true,