✨ ui: BulmaDrawer opening can't be cancelled now

`yarn upgrade-interactive --latest`

ui/.devcontainer/devcontainer.json

@@ -2,15 +2,19 @@
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
 {
   "name": "Advent22 UI",
+
   // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:1-18-bookworm",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:4-20-trixie",
+
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {
+    "ghcr.io/devcontainers/features/git-lfs:1": {},
     "ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
-      "packages": "git-flow, git-lfs"
+      "packages": "git-flow"
     },
     "ghcr.io/devcontainers-extra/features/vue-cli:2": {}
   },
+
   // Configure tool-specific properties.
   "customizations": {
     // Configure properties specific to VS Code.
@@ -29,11 +33,16 @@
       ]
     }
   },
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
+
   // Use 'postCreateCommand' to run commands after the container is created.
   // "postCreateCommand": "yarn install",
-  "postStartCommand": "yarn install --production false",
-  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "node"
+
+  // Use 'postStartCommand' to run commands after the container is started.
+	"postStartCommand": "npx --yes update-browserslist-db@latest && yarn install --production false"
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
 }

ui/.eslintrc.js

@@ -30,6 +30,9 @@ module.exports = {
       env: {
         mocha: true,
       },
+      rules: {
+        "@typescript-eslint/no-unused-expressions": "off",
+      }
     },
   ],
 };

ui/.vscode/settings.json

@@ -1,21 +1,23 @@
 {
-  "editor.formatOnSave": true,
-  "[vue]": {
+  "[scss][vue][typescript][javascript][json][jsonc][jsonl]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+
+  "[jsonc]": {
+    "editor.formatOnSave": false,
   },
+
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit"
   },
+
   "git.closeDiffOnOperation": true,
+  "editor.formatOnSave": true,
   "editor.tabSize": 2,
+
   "sass.disableAutoIndent": true,
   "sass.format.convert": false,
   "sass.format.deleteWhitespace": true,
-  "volar.inlayHints.eventArgumentInInlineHandlers": false
+
+  "prettier.trailingComma": "all",
 }

ui/babel.config.json

@@ -1,3 +1,5 @@
 {
-  "presets": ["@vue/cli-plugin-babel/preset"]
+  "presets": [
+    "@vue/cli-plugin-babel/preset"
+  ]
 }

ui/package.json

@@ -3,46 +3,44 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --host 0.0.0.0 --port 8080",
+    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:unit-watch": "vue-cli-service test:unit --watch",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "ui": "vue ui --host 0.0.0.0 --headless"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@fortawesome/vue-fontawesome": "^3.0.8",
-    "@types/chai": "^4.3.17",
-    "@types/luxon": "^3.4.2",
-    "@types/mocha": "^10.0.7",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-plugin-unit-mocha": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "^3.1.3",
+    "@types/chai": "^5.2.3",
+    "@types/luxon": "^3.7.1",
+    "@types/mocha": "^10.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@typescript-eslint/parser": "^8.55.0",
+    "@vue/cli-plugin-babel": "^5.0.9",
+    "@vue/cli-plugin-eslint": "^5.0.9",
+    "@vue/cli-plugin-typescript": "^5.0.9",
+    "@vue/cli-plugin-unit-mocha": "^5.0.9",
+    "@vue/cli-service": "^5.0.9",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
     "animate.css": "^4.1.1",
-    "axios": "^1.7.3",
-    "bulma": "^1.0.2",
+    "axios": "^1.13.5",
+    "bulma": "^1.0.4",
     "bulma-toast": "2.4.3",
-    "chai": "^5.1.1",
-    "core-js": "^3.38.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.27.0",
-    "luxon": "^3.5.0",
-    "pinia": "^2.2.1",
-    "sass": "^1.77.8",
+    "chai": "^6.2.2",
+    "core-js": "^3.48.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-vue": "^9.33.0",
+    "luxon": "^3.7.2",
+    "pinia": "^3.0.4",
+    "sass": "~1.94.3",
     "sass-loader": "^16.0.0",
-    "typescript": "~5.5.4",
+    "typescript": "^5.9.3",
     "vue": "^3.5.25",
-    "vue-class-component": "^8.0.0-0"
-  },
-  "dependencies": {},
-  "prettier": {
-    "trailingComma": "all"
+    "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0"
   }
 }

ui/src/components/AdminButton.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { APIError } from "@/lib/api_error";
-import { Credentials } from "@/lib/model";
+import type { Credentials } from "@/lib/model";
 import { advent22Store } from "@/lib/store";
 import { ref } from "vue";
 

ui/src/components/Calendar.vue

@@ -49,15 +49,15 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import { VueLike, name_door, unwrap_loading } from "@/lib/helpers";
-import { ImageData } from "@/lib/model";
+import { type VueLike, name_door, unwrap_loading } from "@/lib/helpers";
+import type { ImageData } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import { onBeforeUnmount } from "vue";
-import MultiModal, { HMultiModal } from "./MultiModal.vue";
+import MultiModal, { type HMultiModal } from "./MultiModal.vue";
 import BulmaButton from "./bulma/Button.vue";
-import BulmaToast, { HBulmaToast } from "./bulma/Toast.vue";
+import BulmaToast, { type HBulmaToast } from "./bulma/Toast.vue";
 import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 

ui/src/components/LoginModal.vue

@@ -16,7 +16,7 @@
               ref="username_input"
               class="input"
               type="text"
-              v-model="creds[0]"
+              v-model="creds.username"
             />
           </div>
         </div>
@@ -24,7 +24,7 @@
         <div class="field">
           <label class="label">Passwort</label>
           <div class="control">
-            <input class="input" type="password" v-model="creds[1]" />
+            <input class="input" type="password" v-model="creds.password" />
           </div>
         </div>
       </section>
@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
 import { wait_for } from "@/lib/helpers";
-import { Credentials } from "@/lib/model";
+import type { Credentials } from "@/lib/model";
 import { onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
 import BulmaButton from "./bulma/Button.vue";
 
@@ -60,7 +60,10 @@ const emit = defineEmits<{
   (event: "cancel"): void;
 }>();
 
-const creds = ref<Credentials>(["", ""]);
+const creds = ref<Credentials>({
+  username: "",
+  password: "",
+});
 
 function submit(): void {
   emit("submit", creds.value);

ui/src/components/admin/CalendarAssistant.vue

@@ -48,10 +48,10 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { name_door, objForEach } from "@/lib/helpers";
-import { ImageData, NumStrDict } from "@/lib/model";
+import type { ImageData, NumStrDict } from "@/lib/model";
 import { ref } from "vue";
 
-import MultiModal, { HMultiModal } from "../MultiModal.vue";
+import MultiModal, { type HMultiModal } from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
 import BulmaDrawer from "../bulma/Drawer.vue";
 

ui/src/components/admin/ConfigView.vue

@@ -191,7 +191,7 @@
 
 <script setup lang="ts">
 import { API } from "@/lib/api";
-import { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
+import type { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
 import { advent22Store } from "@/lib/store";
 import { DateTime } from "luxon";
 import { ref } from "vue";

ui/src/components/admin/DoorMapEditor.vue

@@ -71,11 +71,11 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import { DoorSaved } from "@/lib/model";
+import type { DoorSaved } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { toast } from "bulma-toast";
 import { ref } from "vue";
-import { BCStep } from "../bulma/Breadcrumbs.vue";
+import type { BCStep } from "../bulma/Breadcrumbs.vue";
 
 import Calendar from "../Calendar.vue";
 import BulmaBreadcrumbs from "../bulma/Breadcrumbs.vue";

ui/src/components/bulma/Drawer.vue

@@ -58,10 +58,19 @@ const state = ref<"closed" | "loading" | "ok" | "err">("closed");
 const is_open = computed(() => state.value !== "closed");
 
 async function toggle(): Promise<void> {
-  if (is_open.value) {
-    state.value = "closed";
-  } else {
+  switch (state.value) {
+    case "closed":
+      // start opening when closed
       await load();
+      break;
+
+    case "loading":
+      // don't toggle when loading
+      break;
+
+    default:
+      state.value = "closed";
+      break;
   }
 }
 

ui/src/components/bulma/Toast.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { Options as ToastOptions, toast } from "bulma-toast";
+import { type Options as ToastOptions, toast } from "bulma-toast";
 import { onMounted, useTemplateRef } from "vue";
 
 export type HBulmaToast = {

ui/src/components/calendar/CalendarDoor.vue

@@ -17,7 +17,7 @@
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
-import { VueLike } from "@/lib/helpers";
+import type { VueLike } from "@/lib/helpers";
 import SVGRect from "./SVGRect.vue";
 
 const store = advent22Store();

ui/src/components/calendar/SVGRect.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { VueLike, unwrap_loading } from "@/lib/helpers";
+import { type VueLike, unwrap_loading } from "@/lib/helpers";
 import { Rectangle } from "@/lib/rects/rectangle";
 import { advent22Store } from "@/lib/store";
 import { computed } from "vue";

ui/src/components/editor/DoorCanvas.vue

@@ -29,7 +29,7 @@ import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/vector2d";
 import { computed, ref } from "vue";
 
-import { VueLike } from "@/lib/helpers";
+import type { VueLike } from "@/lib/helpers";
 import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
 import ThouCanvas from "../calendar/ThouCanvas.vue";

ui/src/components/editor/DoorChooser.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { VueLike, unwrap_loading } from "@/lib/helpers";
+import { type VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 

ui/src/components/editor/DoorPlacer.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { VueLike, unwrap_loading } from "@/lib/helpers";
+import { type VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 

ui/src/components/editor/PreviewDoor.vue

@@ -26,7 +26,7 @@
 import { Door } from "@/lib/rects/door";
 import { ref, useTemplateRef } from "vue";
 
-import { VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
+import { type VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
 import SVGRect from "../calendar/SVGRect.vue";
 
 const model = defineModel<VueLike<Door>>({ required: true });

ui/src/lib/api.ts

@@ -1,9 +1,10 @@
-import axios, {
+import type {
   AxiosBasicCredentials,
-  type AxiosRequestConfig,
-  type Method,
-  type RawAxiosRequestHeaders,
+  AxiosRequestConfig,
+  Method,
+  RawAxiosRequestHeaders,
 } from "axios";
+import axios from "axios";
 import { APIError } from "./api_error";
 
 interface Params {
@@ -21,7 +22,8 @@ export class API {
       return `${window.location.protocol}//${window.location.host}/api`;
     } else if (process.env.NODE_ENV !== "development") {
       // not in prouction or development mode
-      console.warn("Unexpected NODE_ENV value");
+      // eslint-disable-next-line no-console
+      console.warn("Unexpected NODE_ENV value: ", process.env.NODE_ENV);
     }
 
     // in development mode, return "proto://hostname:8000/api"
@@ -82,6 +84,7 @@ export class API {
       const response = await this.axios.request<T>(this.get_axios_config(p));
       return response.data;
     } catch (reason) {
+      // eslint-disable-next-line no-console
       console.error(`Failed to query ${p.endpoint}: ${reason}`);
       throw new APIError(reason, p.endpoint);
     }

ui/src/lib/helpers.ts

@@ -1,4 +1,4 @@
-import { nextTick, UnwrapRef } from "vue";
+import { nextTick, type UnwrapRef } from "vue";
 import { APIError } from "./api_error";
 
 export function objForEach<T>(
@@ -42,6 +42,7 @@ export function handle_error(error: unknown): void {
   if (error instanceof APIError) {
     error.alert();
   } else {
+    // eslint-disable-next-line no-console
     console.error(error);
   }
 }

ui/src/lib/rects/door.ts

@@ -1,5 +1,5 @@
-import { VueLike, unwrap_vuelike } from "../helpers";
-import { DoorSaved } from "../model";
+import { type VueLike, unwrap_vuelike } from "../helpers";
+import type { DoorSaved } from "../model";
 import { Rectangle } from "./rectangle";
 import { Vector2D } from "./vector2d";
 

ui/src/lib/store.ts

@@ -1,7 +1,7 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { API } from "./api";
-import { Loading } from "./helpers";
-import { Credentials, DoorSaved, ImageData, SiteConfigModel } from "./model";
+import type { Loading } from "./helpers";
+import type { Credentials, DoorSaved, ImageData, SiteConfigModel } from "./model";
 import { Door } from "./rects/door";
 
 declare global {
@@ -20,9 +20,7 @@ type State = {
   next_door_target: number | null;
 };
 
-export const advent22Store = defineStore({
-  id: "advent22",
-
+export const advent22Store = defineStore("advent22", {
   state: (): State => ({
     on_initialized: [],
     is_touch_device:
@@ -64,7 +62,7 @@ export const advent22Store = defineStore({
         link.href = favicon.data_url;
 
         if (link.parentElement === null)
-          document.getElementsByTagName("head")[0].appendChild(link);
+          document.getElementsByTagName("head")[0]!.appendChild(link);
       } catch { }
 
       try {

ui/src/main.scss

@@ -20,4 +20,4 @@
 // main imports
 //==============
 
-@import "animate.css/animate";
+@forward "animate.css/animate";

ui/tsconfig.json

@@ -1,30 +1,33 @@
 {
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "moduleResolution": "node",
     "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": true,
-    "sourceMap": true,
+    "lib": [
+      "es2020",
+      "dom",
+      "dom.iterable",
+      "es2022.object",
+      "es2023.array",
+    ],
+    // "moduleResolution": "node",
+    // "sourceMap": true,
     "baseUrl": ".",
-    "types": ["webpack-env", "mocha", "chai"],
+    "types": [
+      "webpack-env",
+      "mocha",
+      "chai",
+    ],
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*",
+      ]
     },
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
     "src/**/*.vue",
+    "src/**/*.ts",
+    // "src/**/*.tsx",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    // "tests/**/*.tsx",
   ],
-  "exclude": ["node_modules"]
 }

ui/vue.config.js

@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 const { defineConfig } = require("@vue/cli-service");
 const webpack = require("webpack");
 
 module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
-    host: "localhost",
+    host: "0.0.0.0",
   },
   pages: {
     index: {