Rename .vue files to .svelte for diffing

2026-09-23 11:08:11 +08:00 · 2023-03-10 03:53:15 -08:00
parent 9bd319fba4
commit e539e43483
49 changed files with 0 additions and 0 deletions
@@ -0,0 +1,174 @@
+<script lang="ts">
+import { defineComponent, type PropType, toRaw } from "vue";
+
+import { type MenuListEntry } from "@/wasm-communication/messages";
+
+import MenuList from "@/components/floating-menus/MenuList.vue";
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
+import TextLabel from "@/components/widgets/labels/TextLabel.vue";
+
+const DASH_ENTRY = { label: "-" };
+
+export default defineComponent({
+	emits: ["update:selectedIndex"],
+	props: {
+		entries: { type: Array as PropType<MenuListEntry[][]>, required: true },
+		selectedIndex: { type: Number as PropType<number>, required: false }, // When not provided, a dash is displayed
+		drawIcon: { type: Boolean as PropType<boolean>, default: false },
+		interactive: { type: Boolean as PropType<boolean>, default: true },
+		disabled: { type: Boolean as PropType<boolean>, default: false },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+		sharpRightCorners: { type: Boolean as PropType<boolean>, default: false },
+	},
+	data() {
+		return {
+			activeEntry: this.makeActiveEntry(this.selectedIndex),
+			activeEntrySkipWatcher: false,
+			open: false,
+			minWidth: 0,
+		};
+	},
+	watch: {
+		// Called only when `selectedIndex` is changed from outside this component (with v-model)
+		selectedIndex() {
+			this.activeEntrySkipWatcher = true;
+			this.activeEntry = this.makeActiveEntry();
+		},
+		// Called when `activeEntry` is changed by the `v-model` on this component's MenuList component, or by the `selectedIndex()` watcher above (but we want to skip that case)
+		activeEntry(newActiveEntry: MenuListEntry) {
+			if (this.activeEntrySkipWatcher) {
+				this.activeEntrySkipWatcher = false;
+				return;
+			}
+
+			// `toRaw()` pulls it out of the Vue proxy
+			if (toRaw(newActiveEntry) === DASH_ENTRY) return;
+
+			this.$emit("update:selectedIndex", this.entries.flat().indexOf(newActiveEntry));
+		},
+	},
+	methods: {
+		makeActiveEntry(): MenuListEntry {
+			const entries = this.entries.flat();
+
+			if (this.selectedIndex !== undefined && this.selectedIndex >= 0 && this.selectedIndex < entries.length) {
+				return entries[this.selectedIndex];
+			}
+			return DASH_ENTRY;
+		},
+		keydown(e: KeyboardEvent) {
+			(this.$refs.menuList as typeof MenuList | undefined)?.keydown(e, false);
+		},
+		unFocusDropdownBox(e: FocusEvent) {
+			const blurTarget = (e.target as HTMLDivElement | undefined)?.closest("[data-dropdown-input]");
+			const self: HTMLDivElement | undefined = this.$el;
+			if (blurTarget !== self) this.open = false;
+		},
+	},
+	components: {
+		IconLabel,
+		LayoutRow,
+		MenuList,
+		TextLabel,
+	},
+});
+</script>
+
+<template>
+	<LayoutRow class="dropdown-input" data-dropdown-input>
+		<LayoutRow
+			class="dropdown-box"
+			:class="{ disabled, open, 'sharp-right-corners': sharpRightCorners }"
+			:style="{ minWidth: `${minWidth}px` }"
+			:title="tooltip"
+			@click="() => !disabled && (open = true)"
+			@blur="(e: FocusEvent) => unFocusDropdownBox(e)"
+			@keydown="(e: KeyboardEvent) => keydown(e)"
+			:tabindex="disabled ? -1 : 0"
+			data-floating-menu-spawner
+		>
+			<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
+			<TextLabel class="dropdown-label">{{ activeEntry.label }}</TextLabel>
+			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
+		</LayoutRow>
+		<MenuList
+			v-model:activeEntry="activeEntry"
+			v-model:open="open"
+			@naturalWidth="(newNaturalWidth: number) => (minWidth = newNaturalWidth)"
+			:entries="entries"
+			:drawIcon="drawIcon"
+			:interactive="interactive"
+			:direction="'Bottom'"
+			:scrollableY="true"
+			ref="menuList"
+		/>
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.dropdown-input {
+	position: relative;
+
+	.dropdown-box {
+		align-items: center;
+		white-space: nowrap;
+		background: var(--color-1-nearblack);
+		height: 24px;
+		border-radius: 2px;
+
+		.dropdown-label {
+			margin: 0;
+			margin-left: 8px;
+			flex: 1 1 100%;
+		}
+
+		.dropdown-icon {
+			margin: 4px;
+			flex: 0 0 auto;
+
+			& + .dropdown-label {
+				margin-left: 0;
+			}
+		}
+
+		.dropdown-arrow {
+			margin: 6px 2px;
+			flex: 0 0 auto;
+		}
+
+		&:hover,
+		&.open {
+			background: var(--color-6-lowergray);
+
+			span {
+				color: var(--color-f-white);
+			}
+
+			svg {
+				fill: var(--color-f-white);
+			}
+		}
+
+		&.open {
+			border-radius: 2px 2px 0 0;
+		}
+
+		&.disabled {
+			background: var(--color-2-mildblack);
+
+			span {
+				color: var(--color-8-uppergray);
+			}
+
+			svg {
+				fill: var(--color-8-uppergray);
+			}
+		}
+	}
+
+	.menu-list .floating-menu-container .floating-menu-content {
+		max-height: 400px;
+	}
+}
+</style>