update WebUI deps

namidaka · Mar 13, 2024 · 70032fc · 70032fc
1 parent 888b2d8
commit 70032fc
Show file tree

Hide file tree

Showing 32 changed files with 1,678 additions and 3,175 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -24,7 +24,6 @@
         "esbenp.prettier-vscode",
         "eamodio.gitlens",
         "Vue.volar",
-        "Vue.vscode-typescript-vue-plugin",
         "bradlc.vscode-tailwindcss",
         "naumovs.color-highlight",
         "streetsidesoftware.code-spell-checker",

diff --git a/src/WebUI/package-lock.json b/src/WebUI/package-lock.json
diff --git a/src/WebUI/package.json b/src/WebUI/package.json
@@ -15,80 +15,80 @@
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^2.1.2",
     "@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",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@geoman-io/leaflet-geoman-free": "^2.16.0",
+    "@oruga-ui/oruga-next": "^0.8.6",
     "@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.9.0",
+    "@vueuse/core": "^10.9.0",
     "@vueuse/head": "^2.0.0",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "clsx": "^2.0.0",
-    "defu": "^6.1.3",
-    "echarts": "^5.4.3",
-    "floating-vue": "^2.0.0-beta.24",
+    "clsx": "^2.1.0",
+    "defu": "^6.1.4",
+    "echarts": "^5.5.0",
+    "floating-vue": "^5.2.2",
     "http-status-codes": "^2.3.0",
     "itemsjs": "^2.1.24",
     "leaflet": "^1.9.4",
     "luxon": "^3.4.4",
-    "oidc-client-ts": "^2.4.0",
+    "oidc-client-ts": "^3.0.1",
     "pinia": "^2.1.7",
-    "qs": "^6.11.2",
-    "ufo": "^1.3.2",
+    "qs": "^6.12.0",
+    "ufo": "^1.4.0",
     "uuid": "^9.0.1",
-    "vue": "^3.3.13",
-    "vue-echarts": "^6.6.5",
-    "vue-i18n": "^9.8.0",
-    "vue-leaflet-markercluster": "^0.5.1",
-    "vue-router": "^4.2.5",
+    "vue": "^3.4.21",
+    "vue-echarts": "^6.6.9",
+    "vue-i18n": "^9.10.1",
+    "vue-leaflet-markercluster": "^0.6.0",
+    "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"
   },
   "devDependencies": {
-    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@intlify/unplugin-vue-i18n": "^3.0.1",
     "@pinia/testing": "^0.1.3",
     "@tailwindcss/typography": "^0.5.10",
     "@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.11",
-    "@types/uuid": "^9.0.7",
-    "@vitejs/plugin-vue": "^4.5.2",
-    "@vitest/coverage-v8": "^1.1.0",
-    "@vitest/ui": "^1.1.0",
-    "@vue/eslint-config-prettier": "^8.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.56.0",
+    "@types/luxon": "^3.4.2",
+    "@types/qs": "^6.9.12",
+    "@types/uuid": "^9.0.8",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.3.1",
+    "@vitest/ui": "^1.3.1",
+    "@vue-macros/reactivity-transform": "^0.4.3",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.4",
+    "autoprefixer": "^10.4.18",
+    "cssnano": "^6.1.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.2",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.23.0",
     "geojson": "^0.5.0",
-    "jsdom": "^23.0.1",
+    "jsdom": "^24.0.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.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "rollup-plugin-visualizer": "^5.12.0",
     "tailwind-config-viewer": "^1.7.3",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.3.3",
-    "unplugin-auto-import": "^0.17.2",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2",
+    "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "unplugin-vue-router": "^0.7.0",
+    "unplugin-vue-router": "^0.8.4",
     "vi-fetch": "^0.8.0",
-    "vite": "4.5.1",
+    "vite": "^5.1.6",
     "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.1.0",
-    "vue-tsc": "^1.8.26"
+    "vite-plugin-vue-layouts": "0.11.0",
+    "vitest": "^1.3.1",
+    "vue-tsc": "^2.0.6"
   },
   "engines": {
     "node": ">=18",

diff --git a/src/WebUI/src/assets/themes/oruga-tailwind/components/checkbox.css b/src/WebUI/src/assets/themes/oruga-tailwind/components/checkbox.css
@@ -2,20 +2,17 @@
   @apply relative inline-flex gap-2;
 }
 
-.o-chk--checked {
-}
-
-.o-chk__check {
+.o-chk__input {
   @apply h-4.5 w-4.5;
   @apply rounded-sm border-2 border-content-500 hover:border-content-100;
   @apply cursor-pointer;
 }
 
-.o-chk__check--checked {
+.o-chk__input--checked {
   @apply border-content-100 bg-content-100 hover:border-content-300 hover:bg-content-300;
 }
 
-.o-chk__check--indeterminate {
+.o-chk__input--indeterminate {
 }
 
 .o-chk__label {

diff --git a/src/WebUI/src/assets/themes/oruga-tailwind/components/input.css b/src/WebUI/src/assets/themes/oruga-tailwind/components/input.css
@@ -1,12 +1,12 @@
-.o-ctrl-input {
+.o-input__wrapper {
   @apply relative block;
 }
 
-.o-ctrl-input--expanded {
+.o-input__wrapper--expanded {
   @apply w-full;
 }
 
-.o-ctrl-input--expanded .o-input {
+.o-input__wrapper--expanded .o-input {
   @apply w-full;
 }
 
@@ -23,35 +23,35 @@
   @apply py-2 px-3 text-2xs;
 }
 
-.o-input--xs.o-input-iconspace-left {
+.o-input--xs.o-input--iconspace-left {
   @apply pl-7;
 }
 
-.o-input--xs.o-input-iconspace-right {
+.o-input--xs.o-input--iconspace-right {
   @apply pr-7;
 }
 
 .o-input--sm {
   @apply py-3 px-4.5 text-2xs;
 }
 
-.o-input--sm.o-input-iconspace-left {
+.o-input--sm.o-input--iconspace-left {
   @apply pl-8;
 }
 
-.o-input--sm.o-input-iconspace-right {
+.o-input--sm.o-input--iconspace-right {
   @apply pr-8;
 }
 
 .o-input--lg {
   @apply py-3.5 px-4 text-sm;
 }
 
-.o-input--lg.o-input-iconspace-left {
+.o-input--lg.o-input--iconspace-left {
   @apply pl-12;
 }
 
-.o-input--lg.o-input-iconspace-right {
+.o-input--lg.o-input--iconspace-right {
   @apply pr-12;
 }
 

diff --git a/src/WebUI/src/assets/themes/oruga-tailwind/components/radio.css b/src/WebUI/src/assets/themes/oruga-tailwind/components/radio.css
@@ -26,21 +26,21 @@
 .o-radio--disabled {
 }
 
-.o-radio__check {
+.o-radio__input {
   @apply relative inline-block h-5 w-5 rounded-full p-0 align-middle;
   @apply border-2 border-solid border-content-300;
   @apply cursor-pointer select-none appearance-none;
 }
 
-.o-radio__check:focus-visible {
+.o-radio__input:focus-visible {
   @apply select-none outline-none;
 }
 
-.o-radio__check--checked {
+.o-radio__input--checked {
   @apply border-content-100;
 }
 
-.o-radio__check--checked:after {
+.o-radio__input--checked:after {
   content: '';
   @apply absolute top-1/2 left-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-content-100;
 }

diff --git a/src/WebUI/src/assets/themes/oruga-tailwind/components/table.css b/src/WebUI/src/assets/themes/oruga-tailwind/components/table.css
@@ -142,6 +142,7 @@
   @apply hidden;
 }
 
+/* TODO: */
 .o-table__wrapper--sticky-header thead {
   @apply sticky left-0 top-0 z-50 bg-base-100;
 }

diff --git a/src/WebUI/src/assets/themes/oruga-tailwind/forms.js b/src/WebUI/src/assets/themes/oruga-tailwind/forms.js
@@ -66,7 +66,7 @@ module.exports = plugin(({ addBase, theme }) => {
         backgroundPosition: 'center',
       },
     },
-    [`[type = 'checkbox']:checked`]: {
+    [`[type='checkbox']:checked`]: {
       backgroundRepeat: 'no-repeat',
       backgroundSize: '75%',
       backgroundImage: `url("${svgToDataUri(

diff --git a/src/WebUI/src/boot/oruga-ui.ts b/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,
+  ConfigPlugin,
   OButton,
   OField,
   OCheckbox,
@@ -19,7 +19,6 @@ import {
   OTabItem,
   OIcon,
   OPagination,
-  OPaginationButton,
   ONotification,
   OCollapse,
   ODatetimepicker,
@@ -52,15 +51,14 @@ export const install: BootModule = app => {
     .component('OTabItem', OTabItem)
     .component('OLoading', OLoading)
     .component('OPagination', OPagination)
-    .component('OPaginationButton', OPaginationButton)
-    .component('FontAwesomeIcon', FontAwesomeIcon)
-    .component('FontAwesomeLayers', FontAwesomeLayers)
-    .component('FontAwesomeLayersText', FontAwesomeLayersText)
     .component('ONotification', ONotification)
     .component('OCollapse', OCollapse)
     .component('ODateTimePicker', ODatetimepicker)
+    .component('FontAwesomeIcon', FontAwesomeIcon)
+    .component('FontAwesomeLayers', FontAwesomeLayers)
+    .component('FontAwesomeLayersText', FontAwesomeLayersText)
     .component('VueSlider', VueSlider)
-    .use(Config, {
+    .use(ConfigPlugin, {
       // https://oruga.io/components/Icon.html
       iconComponent: 'FontAwesomeIcon',
       iconPack: 'crpg',

diff --git a/src/WebUI/src/components/character/CharacterEditForm.vue b/src/WebUI/src/components/character/CharacterEditForm.vue
@@ -57,7 +57,7 @@ const wasChange = computed(() => nameModel.value !== props.character.name);
           size="lg"
           class="w-full"
           :maxlength="32"
-          hasCounter
+          counter
           @blur="$v.$touch"
           @focus="$v.$reset"
         />

diff --git a/src/WebUI/src/components/character/CharacterSelectItem.vue b/src/WebUI/src/components/character/CharacterSelectItem.vue
@@ -11,8 +11,9 @@ const modelValue = defineModel<boolean>();
 <template>
   <div class="flex flex-1 items-center gap-2">
     <VTooltip placement="auto">
-      <OSwitch v-model="modelValue" @click.stop />
-
+      <div @click.stop>
+        <OSwitch v-model="modelValue" />
+      </div>
       <template #popper>
         <div class="prose prose-invert">
           <h5 class="text-content-100">