feat: add support to select default radio button based on key

also simplifies the radio button code, making it easier to parse

components/Settings/AppSettings/Language.vue

@@ -5,9 +5,8 @@
     <p class="subtitle">TIME FORMAT</p>
     <div class="icons">
       <RadioButtons
-        :button-count="3"
         :text-strings="timeFormatTextStrings"
-        :default-button-index="timeFormatSelectedIndex"
+        :default-button-key='settingsLoad().timeFormat ?? "Auto"'
         :callback="(index: number) => {settingSave('timeFormat', timeFormatTextStrings[index])}"
       />
     </div>
@@ -20,7 +19,6 @@ import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
 import type { TimeFormat } from '~/types/settings';
 
 const timeFormatTextStrings: TimeFormat[] = ["Auto", "4:18 PM", "16:18"]
-const timeFormatSelectedIndex = timeFormatTextStrings.indexOf(settingsLoad().timeFormat ?? "Auto")
 
 </script>
 

components/UserInterface/RadioButtons.vue

@@ -1,8 +1,12 @@
 <template>
 	<div class="radio-buttons-container" ref="radioButtonsContainer">
-		<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)">
+		<div
+			v-for="(textString, index) in props.textStrings"
+			class="radio-button"
+			@click="onClick(index)"
+		>
 			<span class="radio-button-radio"></span>
-			<span class="radio-button-text">{{ textStrings[index] }}</span>
+			<span class="radio-button-text">{{ textString }}</span>
 		</div>
 	</div>
 </template>
@@ -13,42 +17,65 @@ const radioButtonsContainer = ref<HTMLDivElement>()
 
 const props = defineProps<{
 	textStrings: string[],
-	buttonCount: number,
+	defaultButtonKey?: string,
-	defaultButtonIndex: number,
+	defaultButtonIndex?: number,
 	callback: CallableFunction,
 }>();
 
-// makes an array from 0 to buttonCount - 1
-const indices = Array.from({ length: props.buttonCount }, (_, i) => i) 
-
-// select default selected button
 onMounted(async () => {
 	await nextTick()
 	
-	if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
+	// select default selected button
+	if (radioButtonsContainer.value) {
 		const children = radioButtonsContainer.value.children
-		const defaultButton = children.item(props.defaultButtonIndex)
+
-		defaultButton?.classList.add("selected-radio-button")
+		// set the button based on key
-		defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
+		if (props.defaultButtonKey != undefined) {
+			const newIndex = props.textStrings.indexOf(props.defaultButtonKey)
+			const defaultButton = children.item(newIndex)
+			if (defaultButton) {
+				selectButton(defaultButton)
+				return // note the return if you're extending this
+			}
+		}
+		// if that fails, set it based on index, defaulting to 0
+		const defaultButton = children.item(props.defaultButtonIndex ?? 0)
+		if (defaultButton) {
+			selectButton(defaultButton)
+		}
 	}
 })
 
 
 function onClick(clickedIndex: number) {
-	// remove selected-radio-button class from all buttons except the clicked one	
 	if (radioButtonsContainer.value) {
+		// remove selected-radio-button class from all buttons except the clicked one	
 		const children = radioButtonsContainer.value.children
 		for (let i = 0; i < children.length; i++) {
-			children.item(i)?.classList.remove("selected-radio-button")
+			const button = children.item(i)
-			children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
+			if (button) {
+				unSelectButton(button)
+			}
 		}
 
-		children.item(clickedIndex)?.classList.add("selected-radio-button")
+		const button = children.item(clickedIndex)
-		children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
+		if (button) {
+			selectButton(button)
+		}
 	}
 	
 	props.callback(clickedIndex)
 }
+
+function unSelectButton(button: Element) {
+	button.classList.remove("selected-radio-button")
+	button.children.item(0)?.classList.remove("selected-radio-button-radio")	
+}
+
+function selectButton(button: Element) {
+	button.classList.add("selected-radio-button")
+	button.children.item(0)?.classList.add("selected-radio-button-radio")
+}
 </script>
 
 <style scoped>