vue router

add reactivity-transform macro

non major

vue

up

src/WebUI/package.json

@@ -17,17 +17,17 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@geoman-io/leaflet-geoman-free": "^2.15.0",
-    "@oruga-ui/oruga-next": "0.7.0",
+    "@oruga-ui/oruga-next": "0.8.2",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/components": "^10.7.0",
-    "@vueuse/core": "^10.7.0",
+    "@vueuse/components": "^10.7.1",
+    "@vueuse/core": "^10.7.1",
     "@vueuse/head": "^2.0.0",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "clsx": "^2.0.0",
-    "defu": "^6.1.3",
-    "floating-vue": "^2.0.0-beta.24",
+    "clsx": "^2.1.0",
+    "defu": "^6.1.4",
+    "floating-vue": "^5.0.3",
     "http-status-codes": "^2.3.0",
     "itemsjs": "^2.1.24",
     "leaflet": "^1.9.4",
@@ -37,8 +37,8 @@
     "qs": "^6.11.2",
     "ufo": "^1.3.2",
     "uuid": "^9.0.1",
-    "vue": "^3.3.11",
-    "vue-i18n": "^9.8.0",
+    "vue": "^3.4.13",
+    "vue-i18n": "^9.9.0",
     "vue-leaflet-markercluster": "^0.5.1",
     "vue-router": "^4.2.5",
     "vue-slider-component": "^4.1.0-beta.7"
@@ -50,43 +50,44 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/itemsjs": "^2.1.6",
     "@types/leaflet": "^1.9.8",
-    "@types/luxon": "^3.3.7",
-    "@types/qs": "^6.9.10",
+    "@types/luxon": "^3.4.0",
+    "@types/qs": "^6.9.11",
     "@types/uuid": "^9.0.7",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vitest/coverage-v8": "^1.0.4",
-    "@vitest/ui": "^1.0.4",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitest/coverage-v8": "^1.2.0",
+    "@vitest/ui": "^1.2.0",
+    "@vue-macros/reactivity-transform": "^0.4.2",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.3",
     "autoprefixer": "^10.4.16",
-    "cssnano": "^6.0.2",
-    "eslint": "^8.55.0",
+    "cssnano": "^6.0.3",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.20.1",
     "geojson": "^0.5.0",
-    "jsdom": "^23.0.1",
+    "jsdom": "^23.2.0",
     "json5": "^2.2.3",
     "mini-svg-data-uri": "^1.4.4",
-    "postcss": "^8.4.32",
-    "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.5.9",
-    "rollup-plugin-visualizer": "^5.11.0",
+    "postcss": "^8.4.33",
+    "prettier": "^3.2.1",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "rollup-plugin-visualizer": "^5.12.0",
     "tailwind-config-viewer": "^1.7.3",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
-    "unplugin-auto-import": "^0.17.2",
+    "unplugin-auto-import": "^0.17.3",
     "unplugin-vue-components": "^0.26.0",
     "unplugin-vue-router": "^0.7.0",
     "vi-fetch": "^0.8.0",
-    "vite": "4.5.1",
+    "vite": "5.0.11",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-top-level-await": "^1.4.1",
-    "vite-plugin-vue-layouts": "0.8.0",
-    "vitest": "^1.0.4",
-    "vue-tsc": "^1.8.25"
+    "vite-plugin-vue-layouts": "0.11.0",
+    "vitest": "^1.2.0",
+    "vue-tsc": "^1.8.27"
   },
   "engines": {
     "node": ">=18",

src/WebUI/src/boot/oruga-ui.ts

@@ -5,7 +5,7 @@ import {
 } from '@fortawesome/vue-fontawesome';
 import { library, type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import {
-  Config,
+  Oruga,
   OButton,
   OField,
   OCheckbox,
@@ -19,7 +19,7 @@ import {
   OTabItem,
   OIcon,
   OPagination,
-  OPaginationButton,
+  // OPaginationButton,
   ONotification,
   OCollapse,
   ODatetimepicker,
@@ -52,15 +52,15 @@ export const install: BootModule = app => {
     .component('OTabItem', OTabItem)
     .component('OLoading', OLoading)
     .component('OPagination', OPagination)
-    .component('OPaginationButton', OPaginationButton)
+    // .component('OPaginationButton', OPaginationButton)
     .component('FontAwesomeIcon', FontAwesomeIcon)
     .component('FontAwesomeLayers', FontAwesomeLayers)
     .component('FontAwesomeLayersText', FontAwesomeLayersText)
     .component('ONotification', ONotification)
     .component('OCollapse', OCollapse)
     .component('ODateTimePicker', ODatetimepicker)
     .component('VueSlider', VueSlider)
-    .use(Config, {
+    .use(Oruga, {
       // https://oruga.io/components/Icon.html
       iconComponent: 'FontAwesomeIcon',
       iconPack: 'crpg',

src/WebUI/src/pages/characters/[id].vue

@@ -26,7 +26,6 @@ import { useWelcome } from '@/composables/use-welcome';
 definePage({
   props: true,
   meta: {
-    layout: 'default',
     middleware: 'characterValidate',
     roles: ['User', 'Moderator', 'Admin'],
   },

src/WebUI/src/pages/characters/[id]/characteristic.vue

@@ -19,7 +19,6 @@ import { t } from '@/services/translate-service';
 definePage({
   props: true,
   meta: {
-    layout: 'default',
     roles: ['User', 'Moderator', 'Admin'],
   },
 });
@@ -186,12 +185,19 @@ onBeforeRouteUpdate(() => {
             <VTooltip>
               <div
                 class="flex items-center gap-1 text-2xs"
-                :class="{ 'text-status-danger': fieldsGroup.key === 'skills' && !currentSkillRequirementsSatisfied(field.key as SkillKey) }"
+                :class="{
+                  'text-status-danger':
+                    fieldsGroup.key === 'skills' &&
+                    !currentSkillRequirementsSatisfied(field.key as SkillKey),
+                }"
               >
                 {{ $t(`character.characteristic.${fieldsGroup.key}.children.${field.key}.title`) }}
 
                 <OIcon
-                  v-if="fieldsGroup.key === 'skills' && !currentSkillRequirementsSatisfied(field.key as SkillKey)"
+                  v-if="
+                    fieldsGroup.key === 'skills' &&
+                    !currentSkillRequirementsSatisfied(field.key as SkillKey)
+                  "
                   icon="alert-circle"
                   size="xs"
                 />

src/WebUI/src/pages/characters/[id]/index.vue

@@ -38,7 +38,6 @@ import { usePollInterval } from '@/composables/use-poll-interval';
 
 definePage({
   meta: {
-    layout: 'default',
     roles: ['User', 'Moderator', 'Admin'],
   },
 });

src/WebUI/src/pages/characters/[id]/inventory.vue

@@ -50,7 +50,6 @@ import { useClanMembers } from '@/composables/clan/use-clan-members';
 definePage({
   props: true,
   meta: {
-    layout: 'default',
     roles: ['User', 'Moderator', 'Admin'],
   },
 });

src/WebUI/src/pages/characters/index.vue

@@ -2,7 +2,6 @@
 definePage({
   meta: {
     bg: 'background-2.webp',
-    layout: 'default',
     middleware: 'activeCharacterRedirect',
     roles: ['User', 'Moderator', 'Admin'],
   },

src/WebUI/src/pages/moderator/find-user.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 definePage({
   meta: {
-    layout: 'default',
     roles: ['Moderator', 'Admin'],
   },
 });

src/WebUI/src/pages/moderator/index.vue

@@ -3,7 +3,6 @@ import { getRestrictions } from '@/services/restriction-service';
 
 definePage({
   meta: {
-    layout: 'default',
     roles: ['Moderator', 'Admin'],
   },
 });

src/WebUI/src/pages/moderator/user/[id].vue

@@ -5,7 +5,6 @@ import { moderationUserKey } from '@/symbols/moderator';
 definePage({
   props: true,
   meta: {
-    layout: 'default',
     roles: ['Moderator', 'Admin'],
   },
 });

src/WebUI/src/pages/moderator/user/[id]/activity-logs.vue

@@ -7,7 +7,6 @@ import { Sort, useSort } from '@/composables/use-sort';
 definePage({
   props: true,
   meta: {
-    layout: 'default',
     roles: ['Moderator', 'Admin'],
   },
 });

src/WebUI/src/pages/moderator/user/[id]/restrictions.vue

@@ -4,7 +4,6 @@ import { getUserRestrictions } from '@/services/users-service';
 definePage({
   props: true,
   meta: {
-    layout: 'default',
     roles: ['Moderator', 'Admin'],
   },
 });

src/WebUI/tsconfig.json

@@ -27,7 +27,8 @@
       "@intlify/vite-plugin-vue-i18n/client",
       "vi-fetch/matchers",
       "@types/body-scroll-lock",
-      "vite-plugin-svg-icons/client"
+      "vite-plugin-svg-icons/client",
+      "@vue-macros/reactivity-transform/macros-global"
     ]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],

src/WebUI/vite.config.ts

@@ -13,6 +13,7 @@ import Visualizer from 'rollup-plugin-visualizer';
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 import viteCompression from 'vite-plugin-compression';
 import topLevelAwait from 'vite-plugin-top-level-await';
+import ReactivityTransform from '@vue-macros/reactivity-transform/vite';
 import json5 from 'json5';
 
 // TODO: to libs
@@ -58,25 +59,25 @@ export default defineConfig({
   },
 
   plugins: [
-    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
-    Layouts(),
-
     // https://github.com/posva/unplugin-vue-router
     VueRouter({
       extensions: ['.vue'],
       exclude: ['**/*.spec*'],
       dts: 'src/types/typed-router.d.ts',
-      routeBlockLang: 'yaml',
       getRouteName: getPascalCaseRouteName,
     }),
 
     Vue({
-      reactivityTransform: true,
       script: {
         defineModel: true,
       },
     }),
 
+    ReactivityTransform(),
+
+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+    Layouts(),
+
     // https://github.com/antfu/unplugin-auto-import
     AutoImport({
       imports: [