From 2fb089ba73d42493a13309355c8c24fa90bc1e00 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Sun, 2 Apr 2023 19:22:45 +0200
Subject: [PATCH] Add Pillbar modelValue

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

diff --git a/client/src/components/inputs/PillBar.vue b/client/src/components/inputs/PillBar.vue
index 235bee9..9c3e214 100644
--- a/client/src/components/inputs/PillBar.vue
+++ b/client/src/components/inputs/PillBar.vue
@@ -6,18 +6,20 @@ const props = defineModel<{
     icon: Component,
     selected: boolean,
   }[],
+  modelValue: number,
 }>();
-let { options } = $(props);
+let { options, modelValue } = $(props);
 
 const emit = defineEmits<{
   (event: 'selectionChanged'): void
 }>();
 
-function select(option: any) {
+function select(option: any, index: number) {
   for(let opt of options) {
     opt.selected = false;
   }
   option.selected = true;
+  modelValue = index;
   emit('selectionChanged');
   console.debug("selected", options);
 }
@@ -26,7 +28,7 @@ function select(option: any) {
 
 <template>
   <div>
-    <button class="option" v-for="(option, index) in options" :key="index" :class="{selected:option.selected}" @click="select(option)">
+    <button class="option" v-for="(option, index) in options" :key="index" :class="{selected:option.selected}" @click="select(option, index)">
       <i class="material-icons" v-if="option.icon">{{ option.icon }}</i>
       {{ option.name }}
     </button>