From 356dcd77cfac3f414dd436797e01933361bb80e1 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Mon, 3 Apr 2023 22:43:33 +0200
Subject: [PATCH] Make PillBar Properly work with ModelValue

---
 client/src/components/inputs/PillBar.vue | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/client/src/components/inputs/PillBar.vue b/client/src/components/inputs/PillBar.vue
index 9c3e214..6831494 100644
--- a/client/src/components/inputs/PillBar.vue
+++ b/client/src/components/inputs/PillBar.vue
@@ -10,25 +10,17 @@ const props = defineModel<{
 }>();
 let { options, modelValue } = $(props);
 
-const emit = defineEmits<{
-  (event: 'selectionChanged'): void
-}>();
-
-function select(option: any, index: number) {
-  for(let opt of options) {
-    opt.selected = false;
+onMounted(async() => {
+  if (modelValue === undefined) {
+    modelValue = 0
   }
-  option.selected = true;
-  modelValue = index;
-  emit('selectionChanged');
-  console.debug("selected", options);
-}
+});
 
 </script>
 
 <template>
   <div>
-    <button class="option" v-for="(option, index) in options" :key="index" :class="{selected:option.selected}" @click="select(option, index)">
+    <button class="option" v-for="(option, index) in options" :key="index" :class="{selected: modelValue == index}" @click="modelValue = index">
       <i class="material-icons" v-if="option.icon">{{ option.icon }}</i>
       {{ option.name }}
     </button>