refactor: spinner and drawer [skip ci]

src/app.vue

@@ -19,6 +19,7 @@ const isDrawerVisible = computed(() => store.settings.showNavDrawer === true);
 const drawerWidth = computed(() => store.settings.drawerLeftWidth);
 
 function onUpdateDrawerWidth(width: number) {
+	console.log(width);
 	// TODO: can we mutate?
 	store.settings = { ...store.settings, drawerLeftWidth: width };
 }
@@ -27,7 +28,7 @@ function onUpdateDrawerWidth(width: number) {
 <template>
 	<VApp>
 		<template v-if="!isLoggedIn">
-			<VOverlay absolute :opacity="1" :value="!isLoggedIn" :z-index="100">
+			<VOverlay :opacity="1" :value="!isLoggedIn">
 				<LoginForm />
 			</VOverlay>
 		</template>
@@ -39,15 +40,9 @@ function onUpdateDrawerWidth(width: number) {
 			<Prompt />
 
 			<ResizableDrawer
-				app
-				:card="false"
 				class="pa-0"
 				color="background darken-2"
-				:floating="true"
-				left
-				:right="false"
 				mini-variant-width="73"
-				stateless
 				:value="isDrawerVisible"
 				:width="drawerWidth"
 				@update:width="onUpdateDrawerWidth"

src/features/common/login-form.vue

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
+import { isNonEmptyString } from "@acdh-oeaw/lib";
 import { ref } from "vue";
 
 import LoadingSpinner from "@/features/ui/loading-spinner.vue";
 import store from "@/store";
 
 const user = ref("");
 const password = ref("");
-const errorMessage = ref("");
+
 const isLoading = ref(false);
+const errorMessage = ref("");
 const isPasswordVisible = ref(false);
 const passwordInputElement = ref<HTMLInputElement | null>(null);
 
@@ -22,55 +24,59 @@ async function onSubmit() {
 
 	if (!success) {
 		errorMessage.value = "Falsches Passwort oder falscher Nutzername.";
-
-		if (passwordInputElement.value != null) {
-			passwordInputElement.value.select();
-		}
+		// @ts-expect-error FIXME: figure out what vuetify does with the ref
+		passwordInputElement.value?.$el.querySelector("input")?.select();
 	}
 }
+
+const validation = [
+	function required(value: string): boolean | string {
+		if (isNonEmptyString(value)) return true;
+		return "Bitte füllen Sie dieses Feld aus.";
+	},
+];
 </script>
 
 <template>
 	<VCard color="transparent" class="rounded-lg relative" :elevation="0" :width="300">
-		<VOverlay v-if="isLoading" absolute>
+		<VOverlay absolute :value="isLoading">
 			<LoadingSpinner color="white" :size="40" />
 		</VOverlay>
 
 		<VCardText>
-			<VForm @submit.prevent="onSubmit">
+			<VForm class="grid gap-2" @submit.prevent="onSubmit">
 				<VTextField
 					v-model="user"
+					aria-label="User name"
 					:autocomplete="false"
 					autofocus
-					class="input-no-stroke"
+					class="pt-0"
 					dark
 					flat
 					hide-details
 					name="username"
 					placeholder="User name"
-					required
+					:rules="validation"
 				/>
 
-				<VDivider />
-
 				<VTextField
 					ref="passwordInputElement"
 					v-model="password"
 					:append-icon="isPasswordVisible ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+					aria-label="Password"
 					:autocomplete="false"
-					class="input-no-stroke mt-1 pt-0"
+					class="pt-0"
 					dark
 					flat
 					hide-details
 					name="password"
 					placeholder="Password"
-					required
-					style="box-shadow: inset 0 0 20px 20px hsl(0deg 0% 15%)"
+					:rules="validation"
 					:type="isPasswordVisible ? 'text' : 'password'"
 					@click:append="isPasswordVisible = !isPasswordVisible"
 				/>
 
-				<VBtn type="submit" block class="rounded-lg mt-3" :elevation="0">Login</VBtn>
+				<VBtn type="submit" block class="rounded-lg mt-2" :elevation="0">Login</VBtn>
 
 				<VAlert
 					class="mt-2"

src/features/issues/issues-board.vue → src/features/issues/issue-board.vue

@@ -2,7 +2,7 @@
 import Draggable from "vuedraggable";
 
 import { type IssueLemma, type LemmaStatus } from "@/api";
-import IssuesBoardCard from "@/features/issues/issues-board-card.vue";
+import IssueBoardCard from "@/features/issues/issue-board-card.vue";
 import { useVuetify } from "@/lib/use-vuetify";
 import store from "@/store";
 
@@ -78,7 +78,7 @@ const selectedStyle = {
 							:tabindex="(columnIndex + 1) * 100 + itemIndex"
 							@mousedown="emit('select-lemma', item)"
 						>
-							<issues-board-card
+							<issue-board-card
 								:max-labels="store.settings.issueViewOptions.showLabels"
 								:show-editor="store.settings.issueViewOptions.showEditor"
 								:show-author="store.settings.issueViewOptions.showAuthor"

src/features/issues/issues-list.vue → src/features/issues/issue-list.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Draggable from "vuedraggable";
 
-import IssuesListRow from "@/features/issues/issues-list-row.vue";
+import IssueListRow from "@/features/issues/issue-list-row.vue";
 import { useVuetify } from "@/lib/use-vuetify";
 import store from "@/store";
 import { type IssueLemma, type LemmaStatus } from "@/types/issue";
@@ -62,7 +62,7 @@ function onDragStart() {
 					@start="onDragStart"
 				>
 					<!-- <transition-group type="transition" :name="animate ? 'flip-list' : null"> -->
-					<issues-list-row
+					<issue-list-row
 						v-for="(item, itemIndex) in column.items"
 						:key="item.id"
 						v-ripple="false"

src/features/issues/issue-manager.vue

@@ -4,9 +4,9 @@ import { chain } from "lodash";
 import { computed, onMounted, ref, watch } from "vue";
 
 import { type IssueLemma, type LemmaStatus } from "@/api";
+import IssueBoard from "@/features/issues/issue-board.vue";
 import IssueDetail from "@/features/issues/issue-details.vue";
-import IssuesBoard from "@/features/issues/issues-board.vue";
-import IssuesList from "@/features/issues/issues-list.vue";
+import IssueList from "@/features/issues/issue-list.vue";
 import ResizableDrawer from "@/features/ui/resizable-drawer.vue";
 import { getYear } from "@/lib/get-year";
 import store from "@/store";
@@ -530,7 +530,7 @@ onMounted(() => {
 		</ResizableDrawer>
 
 		<VMain class="fill-height rounded-lg">
-			<IssuesBoard
+			<IssueBoard
 				v-if="store.settings.issueLayout === 'board'"
 				:animate="animateLemmas"
 				class="fill-height"
@@ -543,7 +543,7 @@ onMounted(() => {
 				@update-column="onUpdateColumn"
 			/>
 
-			<IssuesList
+			<IssueList
 				v-if="store.settings.issueLayout === 'list'"
 				:animate="animateLemmas"
 				class="fill-height"

src/features/ui/loading-spinner.vue

@@ -1,45 +1,48 @@
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class LoadingSpinner extends Vue {
-	@Prop({ default: "#333" }) color!: string;
-	@Prop({ default: 30 }) size!: number;
-
-	get cssProps() {
-		return {
-			"--loading-spinner-color": this.color,
-			"--loading-spinner-left": this.size / 2 - 1 + "px",
-			"--loading-spinner-top": this.size / 6 + "px",
-			"--loading-spinner-height": this.size / 5 + "px",
-			"--loading-spinner-width": this.size / 15 + "px",
-		};
-	}
-}
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = withDefaults(
+	defineProps<{
+		color?: string;
+		size?: number;
+	}>(),
+	{ color: "#333", size: 30 },
+);
+
+const style = computed(() => {
+	return {
+		"--loading-spinner-color": props.color,
+		"--loading-spinner-size": props.size + "px",
+		"--loading-spinner-left": props.size / 2 - 1 + "px",
+		"--loading-spinner-top": props.size / 6 + "px",
+		"--loading-spinner-height": props.size / 5 + "px",
+		"--loading-spinner-width": props.size / 15 + "px",
+	};
+});
 </script>
 
 <template>
-	<div
-		:style="{ paddingTop: size / 2 + 'px', width: size + 'px', height: size + 'px', ...cssProps }"
-		class="lds-spinner"
-	>
+	<div class="loading-spinner" :style="style">
 		<div v-for="i in 12" :key="i"></div>
 	</div>
 </template>
 
 <style scoped>
-.lds-spinner {
+.loading-spinner {
 	position: relative;
 	display: inline-block;
-	color: black;
+	width: var(--loading-spinner-size);
+	height: var(--loading-spinner-size);
+	padding-top: calc(var(--loading-spinner-size) / 2);
+	color: hsl(0deg 0% 0%);
 }
 
-.lds-spinner div {
+.loading-spinner div {
 	transform-origin: 50% 50%;
-	animation: lds-spinner 1.2s linear infinite;
+	animation: loading-spinner 1.2s linear infinite;
 }
 
-.lds-spinner div::after {
+.loading-spinner div::after {
 	content: " ";
 	position: absolute;
 	top: var(--loading-spinner-top);
@@ -51,67 +54,67 @@ export default class LoadingSpinner extends Vue {
 	background: var(--loading-spinner-color);
 }
 
-.lds-spinner div:nth-child(1) {
+.loading-spinner div:nth-child(1) {
 	transform: rotate(0deg);
 	animation-delay: -1.1s;
 }
 
-.lds-spinner div:nth-child(2) {
+.loading-spinner div:nth-child(2) {
 	transform: rotate(30deg);
 	animation-delay: -1s;
 }
 
-.lds-spinner div:nth-child(3) {
+.loading-spinner div:nth-child(3) {
 	transform: rotate(60deg);
 	animation-delay: -0.9s;
 }
 
-.lds-spinner div:nth-child(4) {
+.loading-spinner div:nth-child(4) {
 	transform: rotate(90deg);
 	animation-delay: -0.8s;
 }
 
-.lds-spinner div:nth-child(5) {
+.loading-spinner div:nth-child(5) {
 	transform: rotate(120deg);
 	animation-delay: -0.7s;
 }
 
-.lds-spinner div:nth-child(6) {
+.loading-spinner div:nth-child(6) {
 	transform: rotate(150deg);
 	animation-delay: -0.6s;
 }
 
-.lds-spinner div:nth-child(7) {
+.loading-spinner div:nth-child(7) {
 	transform: rotate(180deg);
 	animation-delay: -0.5s;
 }
 
-.lds-spinner div:nth-child(8) {
+.loading-spinner div:nth-child(8) {
 	transform: rotate(210deg);
 	animation-delay: -0.4s;
 }
 
-.lds-spinner div:nth-child(9) {
+.loading-spinner div:nth-child(9) {
 	transform: rotate(240deg);
 	animation-delay: -0.3s;
 }
 
-.lds-spinner div:nth-child(10) {
+.loading-spinner div:nth-child(10) {
 	transform: rotate(270deg);
 	animation-delay: -0.2s;
 }
 
-.lds-spinner div:nth-child(11) {
+.loading-spinner div:nth-child(11) {
 	transform: rotate(300deg);
 	animation-delay: -0.1s;
 }
 
-.lds-spinner div:nth-child(12) {
+.loading-spinner div:nth-child(12) {
 	transform: rotate(330deg);
 	animation-delay: 0s;
 }
 
-@keyframes lds-spinner {
+@keyframes loading-spinner {
 	0% {
 		opacity: 100%;
 	}