Some frontend side refactoring

.gitattributes

@@ -107,7 +107,7 @@ TODO              text
 .gitconfig        text
 .htaccess         text
 *.lock            text -diff
-# package-lock.json text -diff
+package-lock.json text -diff
 *.toml            text
 *.yaml            text
 *.yml             text

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "css.customData": [".vscode/tailwind.json"]
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ],
+  "python.analysis.typeCheckingMode": "off"
 }

package.json

@@ -18,28 +18,28 @@
         "@vueuse/components": "^10.2.1",
         "@vueuse/core": "^10.2.1",
         "font-awesome": "^4.7.0",
-        "vue": "^3.4.15"
+        "vue": "^3.4.29"
     },
     "devDependencies": {
-        "@rushstack/eslint-patch": "^1.3.3",
-        "@tsconfig/node20": "^20.1.2",
-        "@types/node": "^20.11.10",
-        "@vitejs/plugin-vue": "^5.0.3",
-        "@vue/eslint-config-prettier": "^8.0.0",
-        "@vue/eslint-config-typescript": "^12.0.0",
+        "@rushstack/eslint-patch": "^1.8.0",
+        "@tsconfig/node20": "^20.1.4",
+        "@types/node": "^20.14.5",
+        "@vitejs/plugin-vue": "^5.0.5",
+        "@vue/eslint-config-prettier": "^9.0.0",
+        "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/tsconfig": "^0.5.1",
-        "autoprefixer": "^10.4.14",
         "eslint": "latest",
-        "eslint-plugin-vue": "^9.17.0",
-        "tailwind-config-viewer": "^1.7.2",
-        "tailwindcss": "^3.3",
-        "npm-run-all2": "^6.1.1",
-        "prettier": "^3.0.3",
-        "typescript": "~5.3.0",
-        "vite": "^5.0.11",
-        "vue-tsc": "^1.8.27",
+        "eslint-plugin-vue": "^9.23.0",
+        "npm-run-all2": "^6.2.0",
+        "prettier": "^3.2.6",
+        "typescript": "~5.4.0",
+        "vite": "^5.3.1",
+        "vue-tsc": "^2.0.21",
         "vite-plugin-compression": "^0.5.1",
-        "vitest": "^0.34.2"
+        "vitest": "^0.34.2",
+        "autoprefixer": "^10.4.19",
+        "tailwindcss": "^3.4.4",
+        "tailwind-config-viewer": "^2.0.4"
     },
     "prettier": {
         "trailingComma": "es5",

src/App.vue

@@ -54,15 +54,6 @@
                 />
             </div>
         </div>
-
-        <div v-if="false">
-            <!-- Not rendered, prevents color pruning -->
-            <span class="text-primary bg-primary"></span>
-            <span class="text-back bg-back"></span>
-            <span class="text-danger bg-danger"></span>
-            <span class="text-front bg-front"></span>
-            <span class="text-secondary bg-secondary"></span>
-        </div>
     </div>
 </template>
 
@@ -126,6 +117,7 @@ onMounted(async () => {
 watch(attr, (a) => {
     if (a) oc.value = undefined;
 });
+
 watch(oc, (o) => {
     if (o) attr.value = undefined;
 });
@@ -187,7 +179,7 @@ button.btn {
 }
 
 select {
-    background: url(assets/gray_bg.svg) no-repeat right;
+    background: url("assets/gray_bg.svg") no-repeat right;
     appearance: none;
 }
 

tailwind.config.cjs

@@ -1,28 +1,25 @@
 function withOpacityValue(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`
-    }
-    return `rgb(var(${variable}) / ${opacityValue})`
-  }
+    return ({ opacityValue }) => {
+        if (opacityValue === undefined) {
+            return `rgb(var(${variable}))`;
+        }
+        return `rgb(var(${variable}) / ${opacityValue})`;
+    };
 }
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        primary: withOpacityValue('--color-primary'),
-        back: withOpacityValue('--color-back'),
-        danger: withOpacityValue('--color-danger'),
-        front: withOpacityValue('--color-front'),
-        secondary: withOpacityValue('--color-secondary'),
-      }
+    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+    theme: {
+        extend: {
+            colors: {
+                primary: withOpacityValue("--color-primary"),
+                back: withOpacityValue("--color-back"),
+                danger: withOpacityValue("--color-danger"),
+                front: withOpacityValue("--color-front"),
+                secondary: withOpacityValue("--color-secondary"),
+            },
+        },
     },
-  },
-  plugins: [],
-}
+    plugins: [],
+};

vite.config.ts

@@ -1,34 +1,31 @@
-import { defineConfig } from 'vite';
-import { fileURLToPath, URL } from 'node:url';
-import viteCompression from 'vite-plugin-compression';
-import vue from '@vitejs/plugin-vue';
+import { defineConfig } from "vite";
+import { fileURLToPath, URL } from "node:url";
+import viteCompression from "vite-plugin-compression";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  
-  plugins: [
-    vue(),
-    viteCompression()
-  ],
+    plugins: [vue(), viteCompression()],
 
-  base: './',
+    base: "./",
 
-  build: {
-    manifest: true,
-    chunkSizeWarningLimit: 600
-  },
+    build: {
+        manifest: true,
+        chunkSizeWarningLimit: 600,
+    },
 
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  },
-  
-  server: {
-    proxy: {
-      '/api/': {
-        target: 'http://127.0.0.1:5000/'
-      }
-    }
-  }
-})
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./src", import.meta.url)),
+        },
+    },
+
+    server: {
+        port: 6881,
+        proxy: {
+            "/api/": {
+                target: "http://127.0.0.1:6880/",
+            },
+        },
+    },
+});