[6.x] Port Dashboard to Vue and Inertia

packages/craftcms-legacy/cpcompat/webpack.config.js

@@ -7,6 +7,10 @@ module.exports = getConfig({
   config: {
     entry: {
       'component-select-input': './component-select-input.js',
+      dashboard: require('path').resolve(
+        __dirname,
+        '../../../yii2-adapter/resources/js/dashboard.js'
+      ),
       'cp-compat': './cp-compat.js',
       'legacy-html-control': './legacy-html-control.js',
     },

packages/craftcms-legacy/dashboard/src/Dashboard.js

@@ -409,7 +409,7 @@ import './dashboard.scss';
       this.storedSettings = storedSettings;
 
       this.$settingsToggle = this.$container.find('[data-settings-toggle]');
-      this.$gridItem = this.$container.parent();
+      this.$gridItem = this.$container.closest('.item');
 
       // Store a reference to this object on the container element
       this.$container.data('widget', this);
@@ -425,11 +425,13 @@ import './dashboard.scss';
       }
 
       this.$front = this.$container.children('.front');
-      this.$settingsBtn = this.$front.find('> .pane > .icon.settings');
-      this.$heading = this.$front.find('> .pane > .widget-heading');
+      const $pane = this.$front.children('.pane, craft-pane');
+
+      this.$settingsBtn = $pane.children('.icon.settings, .widget-settings-button');
+      this.$heading = $pane.children('.widget-heading');
       this.$title = this.$heading.find('> h2');
       this.$subtitle = this.$heading.find('> h5');
-      this.$bodyContainer = this.$front.find('> .pane > .body');
+      this.$bodyContainer = $pane.children('.body');
 
       this.setSettings(settingsHtml, initSettingsFn, settingsForm);
 

packages/craftcms-ui/scripts/generate-vue-wrappers.js

@@ -175,7 +175,7 @@ const VALUE_COMPONENTS = [
     tagName: 'craft-input-file',
     className: 'CraftInputFile',
     fileName: 'CraftInputFile',
-    modelType: 'File[]',
+    modelType: "import('../components/input-file/input-file.ts.mjs').default['modelValue']",
     importPath: '../components/input-file/input-file',
     slots: [
       'label',

resources/js/bootstrap/cp-app.ts

@@ -18,11 +18,13 @@ import SystemMessages from '@/modules/utilities/components/system-messages/Syste
 import CpLink from '@/common/components/CpLink.vue';
 import {cpComponentRegistry} from './components';
 import {registerFormComponents} from '@/modules/forms/register';
+import {registerWidgetComponents} from '@/modules/dashboard/register';
 
 export const config = ConfigService.getInstance();
 export const queue = QueueService.getInstance();
 
 registerFormComponents(cpComponentRegistry);
+registerWidgetComponents(cpComponentRegistry);
 
 export function installCpApp(app: App): void {
   app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-');

resources/js/common/components/HtmlFragmentRenderer.test.ts

@@ -0,0 +1,104 @@
+import {afterEach, expect, it, vi} from 'vite-plus/test';
+import {createApp, h, nextTick, ref, type App} from 'vue';
+import {appendBodyHtml, appendElementHtml} from '@craftcms/ui/utilities/dom';
+import HtmlFragmentRenderer from './HtmlFragmentRenderer.vue';
+
+vi.mock('@craftcms/ui', () => import('@craftcms/ui/utilities/dom'));
+
+let app: App;
+let host: HTMLElement;
+
+afterEach(() => {
+  app?.unmount();
+  host?.remove();
+});
+
+it.each([false, true])(
+  'replaces displayed content with custom rendering: %s',
+  async (custom) => {
+    const fragment = ref({
+      html: '<p>Original content</p>',
+      headHtml: '',
+      bodyHtml: '',
+    });
+    host = document.createElement('div');
+    document.body.append(host);
+    app = createApp({
+      render: () =>
+        h(HtmlFragmentRenderer, {
+          fragment: fragment.value,
+          render: custom
+            ? (value: CraftCms.Cms.View.HtmlFragment, container: HTMLElement) =>
+                appendElementHtml(value.html, container)
+            : undefined,
+        }),
+    });
+    app.mount(host);
+
+    await vi.waitFor(() => expect(host.textContent).toBe('Original content'));
+
+    fragment.value = {
+      ...fragment.value,
+      html: '<a href="/entries">View entries</a>',
+    };
+
+    await vi.waitFor(() => expect(host.textContent).toBe('View entries'));
+    expect(host.querySelector('a')?.getAttribute('href')).toBe('/entries');
+  }
+);
+
+it('removes fragment content outside its container when leaving the page', async () => {
+  host = document.createElement('div');
+  document.body.append(host);
+  app = createApp({
+    render: () =>
+      h(HtmlFragmentRenderer, {
+        fragment: {
+          html: '<p>Widget</p>',
+          headHtml: '',
+          bodyHtml: '<aside id="widget-popup">Widget popup</aside>',
+        },
+      }),
+  });
+  app.mount(host);
+
+  await vi.waitFor(() =>
+    expect(document.querySelector('#widget-popup')?.textContent).toBe(
+      'Widget popup'
+    )
+  );
+  app.unmount();
+
+  expect(document.querySelector('#widget-popup')).toBeNull();
+});
+
+it('does not leave popup content behind when rendering finishes after leaving the page', async () => {
+  let finish!: () => void;
+  const pending = new Promise<void>((resolve) => {
+    finish = resolve;
+  });
+  let rendering!: ReturnType<typeof appendBodyHtml>;
+  host = document.createElement('div');
+  document.body.append(host);
+  app = createApp({
+    render: () =>
+      h(HtmlFragmentRenderer, {
+        fragment: {html: 'Widget', headHtml: '', bodyHtml: ''},
+        render: () => {
+          rendering = pending.then(() =>
+            appendBodyHtml('<aside id="late-widget-popup">Widget popup</aside>')
+          );
+          return rendering;
+        },
+      }),
+  });
+  app.mount(host);
+  await nextTick();
+
+  app.unmount();
+  finish();
+  await rendering;
+  await nextTick();
+
+  expect(document.querySelector('#late-widget-popup')).toBeNull();
+});

resources/js/common/components/HtmlFragmentRenderer.vue

@@ -10,6 +10,12 @@
   const props = withDefaults(
     defineProps<{
       fragment?: CraftCms.Cms.View.HtmlFragment | null;
+      /** Override loading while retaining stale-run cleanup and ready handling. */
+      render?: (
+        fragment: CraftCms.Cms.View.HtmlFragment,
+        container: HTMLElement,
+        active: () => boolean
+      ) => Promise<AppendHtmlDisposer | undefined>;
       /** Tag name for the container element. */
       as?: string;
     }>(),
@@ -37,13 +43,13 @@
   };
 
   const remember = async (
-    promise: Promise<AppendHtmlDisposer>,
+    promise: Promise<AppendHtmlDisposer | undefined>,
     currentRunId: number
   ): Promise<boolean> => {
     const dispose = await promise;
 
-    if (currentRunId !== runId) {
-      dispose();
+    if (!dispose || currentRunId !== runId) {
+      dispose?.();
 
       return false;
     }
@@ -84,25 +90,40 @@
       lastElement = element;
       disposeAll();
 
-      if (
-        headHtml &&
-        !(await remember(appendHeadHtml(headHtml), currentRunId))
-      ) {
-        return;
-      }
-
-      if (
-        html &&
-        !(await remember(appendElementHtml(html, element), currentRunId))
-      ) {
-        return;
-      }
-
-      if (
-        bodyHtml &&
-        !(await remember(appendBodyHtml(bodyHtml), currentRunId))
-      ) {
-        return;
+      if (props.render) {
+        if (
+          !(await remember(
+            props.render(
+              {html, headHtml, bodyHtml},
+              element,
+              () => currentRunId === runId
+            ),
+            currentRunId
+          ))
+        ) {
+          return;
+        }
+      } else {
+        if (
+          headHtml &&
+          !(await remember(appendHeadHtml(headHtml), currentRunId))
+        ) {
+          return;
+        }
+
+        if (
+          html &&
+          !(await remember(appendElementHtml(html, element), currentRunId))
+        ) {
+          return;
+        }
+
+        if (
+          bodyHtml &&
+          !(await remember(appendBodyHtml(bodyHtml), currentRunId))
+        ) {
+          return;
+        }
       }
 
       // Upgrade legacy UI elements (lightswitches, field toggles, menus, …)

resources/js/common/components/MainNav.test.ts

@@ -1,3 +1,4 @@
+import '@craftcms/ui/components/nav-item/nav-item';
 import {expect, it, vi} from 'vite-plus/test';
 import {createApp, nextTick, reactive} from 'vue';
 
@@ -6,10 +7,6 @@ const state = vi.hoisted(() => ({
   page: null as any,
 }));
 
-vi.mock('@/common/composables/useCraftData', () => ({
-  default: () => state.craftData,
-}));
-
 vi.mock('@inertiajs/vue3', async () => ({
   ...(await vi.importActual('@inertiajs/vue3')),
   usePage: () => state.page,
@@ -41,6 +38,7 @@ it('updates the active item when the shared navigation changes', async () => {
   });
   state.page = reactive({
     props: {
+      craft: state.craftData,
       queue: {
         displayedJob: null,
         hasReservedJobs: false,
@@ -55,18 +53,26 @@ it('updates the active item when the shared navigation changes', async () => {
   app.mount(container);
   await nextTick();
 
-  state.craftData.nav = state.craftData.nav.map((item: any) => ({
-    ...item,
-    selected: item.url === '/assets',
-  }));
+  state.page.props.craft = {
+    nav: state.craftData.nav.map((item: any) => ({
+      ...item,
+      selected: item.url === '/assets',
+    })),
+  };
   await nextTick();
 
   const items = Array.from(container.querySelectorAll('craft-nav-item'));
   const entries = items.find((item) => item.textContent?.includes('Entries'));
   const assets = items.find((item) => item.textContent?.includes('Assets'));
 
-  expect((entries as any).active).toBe(false);
-  expect((assets as any).active).toBe(true);
+  await vi.waitFor(() => {
+    expect(
+      entries?.shadowRoot?.querySelector('a')?.getAttribute('aria-current')
+    ).toBe('false');
+    expect(
+      assets?.shadowRoot?.querySelector('a')?.getAttribute('aria-current')
+    ).toBe('page');
+  });
 
   app.unmount();
   container.remove();

resources/js/common/components/MainNav.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-  import useCraftData from '@/common/composables/useCraftData';
+  import type {CraftData} from '@/common/composables/useCraftData';
   import CpLink from '@/common/components/CpLink.vue';
   import {computed} from 'vue';
   import {usePage} from '@inertiajs/vue3';
 
   const page = usePage<{
+    craft: CraftData;
     queue: {
       enabled: boolean;
       displayedJob: any;
       hasReservedJobs: boolean;
       hasWaitingJobs: boolean;
     };
   }>();
-  const craftData = useCraftData();
-  const nav = computed(() => craftData.nav);
+  const nav = computed(() => page.props.craft.nav);
 
   // Renders the nav as a rail: labels drop to tooltips, and subnavs move into
   // a flyout on hover or focus, since there's no room to indent them.

resources/js/modules/dashboard/Feed.test.ts

@@ -0,0 +1,45 @@
+import {expect, it, vi} from 'vite-plus/test';
+import {createApp, h} from 'vue';
+import Feed from './Feed.vue';
+
+vi.mock('@craftcms/ui', () => ({
+  actionClient: {post: vi.fn()},
+  t: (message: string) => message,
+}));
+
+it.each([
+  ['en-US', '9/5/2026'],
+  ['en-GB', '05/09/2026'],
+  ['de-DE', '05.09.2026'],
+])(
+  'formats feed dates for %s with four-digit years',
+  (formattingLocale, expected) => {
+    const container = document.createElement('div');
+    const app = createApp({
+      render: () =>
+        h(Feed, {
+          data: {
+            url: 'https://example.com/feed',
+            limit: 5,
+            formattingLocale,
+            feed: {
+              items: [
+                {
+                  title: 'Example',
+                  permalink: 'https://example.com',
+                  date: '2026-09-05T12:00:00',
+                },
+              ],
+            },
+          },
+        }),
+    });
+    app.mount(container);
+
+    expect(container.querySelector('li span')?.textContent?.trim()).toBe(
+      expected
+    );
+
+    app.unmount();
+  }
+);