Replace the Vue frontend with Svelte

2026-09-29 11:58:11 +08:00 · 2023-03-10 03:54:39 -08:00
parent e539e43483
commit 6e20ea538b
83 changed files with 10013 additions and 19687 deletions
@@ -1,123 +1,119 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import { createEventDispatcher } from "svelte";

-import { type RadioEntries, type RadioEntryData } from "@/wasm-communication/messages";
+	import { type RadioEntries, type RadioEntryData } from "@/wasm-communication/messages";

-import LayoutRow from "@/components/layout/LayoutRow.vue";
-import IconLabel from "@/components/widgets/labels/IconLabel.vue";
-import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
+	import IconLabel from "@/components/widgets/labels/IconLabel.svelte";
+	import TextLabel from "@/components/widgets/labels/TextLabel.svelte";

-export default defineComponent({
-	emits: ["update:selectedIndex"],
-	props: {
-		entries: { type: Array as PropType<RadioEntries>, required: true },
-		disabled: { type: Boolean as PropType<boolean>, default: false },
-		selectedIndex: { type: Number as PropType<number>, required: true },
-		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
-	},
-	methods: {
-		handleEntryClick(radioEntryData: RadioEntryData) {
-			const index = this.entries.indexOf(radioEntryData);
-			this.$emit("update:selectedIndex", index);
+	// emits: ["update:selectedIndex"],
+	const dispatch = createEventDispatcher<{ selectedIndex: number }>();

-			radioEntryData.action?.();
-		},
-	},
-	components: {
-		IconLabel,
-		LayoutRow,
-		TextLabel,
-	},
-});
+	export let entries: RadioEntries;
+	export let selectedIndex: number;
+	export let disabled = false;
+	export let sharpRightCorners = false;
+
+	function handleEntryClick(radioEntryData: RadioEntryData) {
+		const index = entries.indexOf(radioEntryData);
+		dispatch("selectedIndex", index);
+
+		radioEntryData.action?.();
+	}
 </script>

-<template>
-	<LayoutRow class="radio-input" :class="{ disabled }">
+<LayoutRow class="radio-input" classes={{ disabled }}>
+	{#each entries as entry, index (index)}
 		<button
-			:class="{ active: index === selectedIndex, disabled, 'sharp-right-corners': index === entries.length - 1 && sharpRightCorners }"
-			v-for="(entry, index) in entries"
-			:key="index"
-			@click="() => handleEntryClick(entry)"
-			:title="entry.tooltip"
-			:tabindex="index === selectedIndex ? -1 : 0"
-			:disabled="disabled"
+			class:active={index === selectedIndex}
+			class:disabled
+			class:sharp-right-corners={index === entries.length - 1 && sharpRightCorners}
+			on:click={() => handleEntryClick(entry)}
+			title={entry.tooltip}
+			tabindex={index === selectedIndex ? -1 : 0}
+			{disabled}
 		>
-			<IconLabel v-if="entry.icon" :icon="entry.icon" />
-			<TextLabel v-if="entry.label">{{ entry.label }}</TextLabel>
+			{#if entry.icon}
+				<IconLabel icon={entry.icon} />
+			{/if}
+			{#if entry.label}
+				<TextLabel>{entry.label}</TextLabel>
+			{/if}
 		</button>
-	</LayoutRow>
-</template>
+	{/each}
+</LayoutRow>

-<style lang="scss">
-.radio-input {
-	button {
-		background: var(--color-5-dullgray);
-		fill: var(--color-e-nearwhite);
-		height: 24px;
-		margin: 0;
-		padding: 0 4px;
-		border: none;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+<style lang="scss" global>
+	.radio-input {
+		button {
+			background: var(--color-5-dullgray);
+			fill: var(--color-e-nearwhite);
+			height: 24px;
+			margin: 0;
+			padding: 0 4px;
+			border: none;
+			display: flex;
+			align-items: center;
+			justify-content: center;

-		&:hover {
-			background: var(--color-6-lowergray);
-			color: var(--color-f-white);
+			&:hover {
+				background: var(--color-6-lowergray);
+				color: var(--color-f-white);

-			svg {
-				fill: var(--color-f-white);
-			}
-		}
-
-		&.active {
-			background: var(--color-e-nearwhite);
-			color: var(--color-2-mildblack);
-
-			svg {
-				fill: var(--color-2-mildblack);
-			}
-		}
-
-		&.disabled {
-			background: var(--color-4-dimgray);
-			color: var(--color-8-uppergray);
-
-			svg {
-				fill: var(--color-8-uppergray);
+				svg {
+					fill: var(--color-f-white);
+				}
 			}

 			&.active {
-				background: var(--color-8-uppergray);
+				background: var(--color-e-nearwhite);
 				color: var(--color-2-mildblack);

 				svg {
 					fill: var(--color-2-mildblack);
 				}
 			}
+
+			&.disabled {
+				background: var(--color-4-dimgray);
+				color: var(--color-8-uppergray);
+
+				svg {
+					fill: var(--color-8-uppergray);
+				}
+
+				&.active {
+					background: var(--color-8-uppergray);
+					color: var(--color-2-mildblack);
+
+					svg {
+						fill: var(--color-2-mildblack);
+					}
+				}
+			}
+
+			& + button {
+				margin-left: 1px;
+			}
+
+			&:first-of-type {
+				border-radius: 2px 0 0 2px;
+			}
+
+			&:last-of-type {
+				border-radius: 0 2px 2px 0;
+			}
 		}

-		& + button {
-			margin-left: 1px;
+		.text-label {
+			margin: 0 4px;
+			overflow: hidden;
 		}

-		&:first-of-type {
-			border-radius: 2px 0 0 2px;
-		}
-
-		&:last-of-type {
-			border-radius: 0 2px 2px 0;
+		&.combined-before button:first-of-type,
+		&.combined-after button:last-of-type {
+			border-radius: 0;
 		}
 	}
-
-	.text-label {
-		margin: 0 4px;
-		overflow: hidden;
-	}
-
-	&.combined-before button:first-of-type,
-	&.combined-after button:last-of-type {
-		border-radius: 0;
-	}
-}
 </style>