feat(SelectionBox): Add clear/select-all options

CHANGELOG.md

@@ -16,6 +16,7 @@ tech changes will usually be stripped from release notes for the public
     -   This is used to indicate how shapes with size info dropped on the map should be resized
     -   (e.g. a goblin_2x2 will take op 2x2 cells in any setup with dropRatio 1, with dropRatio 0.5 however it would only take up 1x1)
     -   This addresses an issue where this was not properly working with non ft setups
+-   Selection Box UI now offers a 'clear' and 'select all' option if it's a multi-select popup
 
 ### Changed
 

client/src/core/components/modals/SelectionBox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from "vue";
+import { computed, reactive, watch } from "vue";
 import VueMarkdown from "vue-markdown-render";
 
 import { i18n } from "../../../i18n";
@@ -35,6 +35,17 @@ const customButton = computed(() => props.options?.customButton ?? "");
 const defaultButton = computed(() => props.options?.defaultButton ?? t("common.select"));
 const text = computed(() => props.options?.text ?? "");
 
+watch(
+    () => props.visible,
+    (visible) => {
+        if (visible) {
+            for (const option of props.options?.defaultSelect ?? []) {
+                state.activeSelection.add(props.choices.indexOf(option));
+            }
+        }
+    },
+);
+
 function close(): void {
     emit("close");
     state.activeSelection.clear();
@@ -70,6 +81,16 @@ function create(): void {
 function submit(): void {
     emit("submit", [...map(state.activeSelection, (i) => props.choices[i]!)]);
 }
+
+function clear(): void {
+    state.activeSelection.clear();
+}
+
+function selectAll(): void {
+    for (let i = 0; i < props.choices.length; i++) {
+        state.activeSelection.add(i);
+    }
+}
 </script>
 
 <template>
@@ -90,6 +111,10 @@ function submit(): void {
                         </div>
                     </template>
                 </div>
+                <div v-if="options?.multiSelect" class="small-actions">
+                    <div @click="clear">clear</div>
+                    <div @click="selectAll">select all</div>
+                </div>
                 <div class="button" @click="submit">{{ defaultButton }}</div>
                 <template v-if="customButton.length > 0">
                     <h4>
@@ -157,6 +182,23 @@ function submit(): void {
     }
 }
 
+.small-actions {
+    display: flex;
+
+    margin-top: 0.25rem;
+    margin-left: 0.5rem;
+
+    font-size: small;
+
+    div:first-child {
+        margin-right: 0.5rem;
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
 .selected,
 .button:hover,
 #selectionbox div:hover {
@@ -171,6 +213,7 @@ function submit(): void {
     padding: 5px 10px;
     margin: 10px;
     margin-right: 0;
+    margin-top: 0.5rem;
     align-self: flex-end;
 }
 

client/src/core/plugins/modals/selectionBox.ts

@@ -6,6 +6,7 @@ export interface SelectionBoxOptions {
     defaultButton?: string;
     customButton?: string;
     multiSelect?: boolean;
+    defaultSelect?: string[];
 }
 
 export type SelectionBoxFunction = (