fix(ui config): enable vitepress support in editors; upgrade to vue v3.5

This fix enables destructuring for `defineModel` and `defineProps` used
in the ui components

front/package.json

@@ -45,6 +45,7 @@
     "jsmediatags": "3.9.7",
     "lodash-es": "4.17.21",
     "lru-cache": "10.2.0",
+    "magic-regexp": "0.8.0",
     "moment": "2.29.4",
     "music-metadata-browser": "2.5.10",
     "nanoid": "5.0.4",
@@ -56,7 +57,7 @@
     "transliteration": "2.3.5",
     "universal-cookie": "4.0.4",
     "vite-plugin-pwa": "0.14.4",
-    "vue": "3.3.11",
+    "vue": "3.5.13",
     "vue-gettext": "2.1.12",
     "vue-i18n": "9.9.1",
     "vue-router": "4.2.5",
@@ -85,13 +86,13 @@
     "@types/showdown": "2.0.6",
     "@types/vue-virtual-scroller": "npm:@earltp/vue-virtual-scroller",
     "@typescript-eslint/eslint-plugin": "7.1.0",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@vitejs/plugin-vue": "5.1.4",
     "@vitest/coverage-v8": "1.3.1",
-    "@vue-macros/volar": "0.13.3",
+    "@vue-macros/volar": "0.17.2",
     "@vue/compiler-sfc": "3.3.11",
     "@vue/eslint-config-standard": "8.0.1",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.2.7",
+    "@vue/test-utils": "2.4.1",
     "@vue/tsconfig": "0.6.0",
     "cypress": "13.6.4",
     "eslint": "8.57.0",
@@ -108,12 +109,12 @@
     "msw-auto-mock": "0.18.0",
     "patch-package": "8.0.0",
     "rollup-plugin-visualizer": "5.9.0",
-    "sass": "1.57.1",
+    "sass": "1.68.0",
     "sinon": "15.0.2",
     "standardized-audio-context-mock": "9.6.32",
     "typescript": "5.3.3",
     "unocss": "0.58.0",
-    "unplugin-vue-macros": "2.4.6",
+    "unplugin-vue-macros": "2.6.2",
     "utility-types": "3.10.0",
     "vite": "5.2.12",
     "vite-plugin-node-polyfills": "0.17.0",

front/tsconfig.json

@@ -20,6 +20,7 @@
     }
   },
   "include": [
+    "**/*.md",
     "src/**/*.ts",
     "src/**/*.vue",
     "vite.config.ts",
@@ -28,6 +29,7 @@
     "src/docs/**/*.ts"
   ],
   "vueCompilerOptions": {
+    "vitePressExtensions": [".md"],
     "plugins": [
       "@vue-macros/volar/define-options",
       "@vue-macros/volar/define-models",

front/ui-docs/.vitepress/config.ts

@@ -51,7 +51,7 @@ export default defineConfig({
           },
           {
             text: 'Layout', link: '/components/ui/layout/',
-            items: [{ text: "Spacer", link: "../../src/components/ui/layout/spacer" }]
+            items: [{ text: "Spacer", link: "/components/ui/layout/spacer" }]
           },
           { text: 'Loader', link: '/components/ui/loader' },
           { text: 'Modal', link: '/components/ui/modal' },

front/ui-docs/index.md

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Layout from '../src/components/ui/Layout.vue'
 import Card from '../src/components/ui/Card.vue'
+import Spacer from '../src/components/ui/layout/Spacer.vue'
 
 // import { RouterLink, RouterView } from "vue-router";
 
@@ -29,17 +30,32 @@ import Card from '../src/components/ui/Card.vue'
 Welcome to the Funkwhale design component library. This repository contains a collection of reusable components written
 in [Vue.js](https://vuejs.org) and [Sass](https://sass-lang.com).
 
-<p>
+## Develop Ui components and Views
+
+**Prerequisites:** If you are using vscode, [enable `Vue` code hints in the `.md`
+docs](https://vitepress.dev/guide/using-vue#vs-code-intellisense-support):
+
+> **.vscode/settings.json**
+>
+> ```json
+> "vue.server.includeLanguages": ["vue", "markdown"]
+> ```
+
+<!-- <p>
   <strong>Current route path:</strong>
-  <!-- {{ $route.fullPath }} -->
-</p>
+  {{ $route.fullPath }}
+</p> -->
 <!-- <nav>
   <RouterLink to="/">Go to Home</RouterLink>
   <RouterLink to="/about">Go to About</RouterLink>
 </nav> -->
-<main>
-  <!-- <RouterView /> -->
-</main>
+<!-- <main>
+  <RouterView />
+</main> -->
+
+---
+
+<Spacer />
 
 <Layout stack>
 

front/ui-docs/vite.config.ts

@@ -9,17 +9,19 @@ export default defineConfig({
   resolve: {
     alias: {
       '~': fileURLToPath(new URL('../src', import.meta.url)),
+      '#': fileURLToPath(new URL('../src/ui/workers', import.meta.url)),
       '/node_modules': fileURLToPath(new URL('../node_modules', import.meta.url))
     }
   },
+
   css: {
     preprocessorOptions: {
       scss: {
-        // additionalData: `
-        //   @import "~/styles/inc/theme";
-        //   @import "~/styles/inc/docs";
-        //   $docs: ${!!process.env.VP_DOCS};
-        // `,
+        additionalData: `
+          @import "~/style/inc/docs";
+          @import "~/style/inc/theme";
+          $docs: ${!!process.env.VP_DOCS};
+        `,
       },
     },
   },

front/vite.config.ts

@@ -70,6 +70,16 @@ export default defineConfig(({ mode }) => ({
       { find: '~', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
     ]
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @import "~/style/inc/theme";
+          $docs: ${!!process.env.VP_DOCS};
+        `
+      }
+    }
+  },
   build: {
     sourcemap: true,
     // https://rollupjs.org/configuration-options/