From 5b6889cbae65e29622155064979cded9d34e77e0 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Sun, 26 Mar 2023 21:52:14 +0200
Subject: [PATCH] Add Verdict Pillbar

---
 client/src/components/inputs/pillbar.vue | 44 ++++++++++++++++++++++++
 client/src/global-styles/colors.css      |  4 ++-
 client/src/pages/index.vue               |  8 +++--
 3 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/inputs/pillbar.vue

diff --git a/client/src/components/inputs/pillbar.vue b/client/src/components/inputs/pillbar.vue
new file mode 100644
index 0000000..235bee9
--- /dev/null
+++ b/client/src/components/inputs/pillbar.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+
+const props = defineModel<{
+  options: {
+    name: string,
+    icon: Component,
+    selected: boolean,
+  }[],
+}>();
+let { options } = $(props);
+
+const emit = defineEmits<{
+  (event: 'selectionChanged'): void
+}>();
+
+function select(option: any) {
+  for(let opt of options) {
+    opt.selected = false;
+  }
+  option.selected = true;
+  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)">
+      <i class="material-icons" v-if="option.icon">{{ option.icon }}</i>
+      {{ option.name }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+div {
+  flex-flow: nowrap;
+}
+
+.selected {
+  background-color: var(--cl-bg-sl);
+}
+</style>
\ No newline at end of file
diff --git a/client/src/global-styles/colors.css b/client/src/global-styles/colors.css
index 15bfabc..5e4cf4d 100644
--- a/client/src/global-styles/colors.css
+++ b/client/src/global-styles/colors.css
@@ -128,8 +128,9 @@
   /* More can be added as needed. */
   --cl-fg: var(--cl-1-8); /* Foreground (Text, outlines) */
   --cl-bg: var(--cl-1-1); /* Background */
-  --cl-bg-hl: var(--cl-1-2); /* Highlight Background (Component on Hover, select, ...) */
+  --cl-bg-hl: var(--cl-1-2); /* Highlight Background (Component on Hover, ...) */
   --cl-bg-el: var(--cl-1-3); /* Element Background (Component) */
+  --cl-bg-sl: var(--cl-1-4);
 
   /* Table Color Assignments */
   --cl-table-body: var(--cl-1-1);
@@ -150,6 +151,7 @@
   --cl-bg: var(--cl-1-2);
   --cl-bg-hl: var(--cl-1-3);
   --cl-bg-el: var(--cl-1-4);
+  --cl-bg-sl: var(--cl-1-5);
 
   --cl-table-body: var(--cl-1-2);
   --cl-table-head: var(--cl-1-3);
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 2cb5c6a..53e0718 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -8,6 +8,7 @@ async function doShit(){
 let name = $ref("");
 let comment = $ref("");
 let counter = $ref(false);
+let options = $ref([{name: 'Accept'}, {name: 'Drop'}, {name: 'Continue'}]);
 
 </script>
 
@@ -16,7 +17,7 @@ let counter = $ref(false);
     <PageHeader title="Dashboard">
       <button @click="doShit">Example Buttons</button>
     </PageHeader>
-    <form class="cl-secondary">
+    <form @submit="$event => $event.preventDefault()" class="cl-secondary">
       <h3>Create Rule</h3>
       <label for="name" v-text="'Name'"/>
       <input name="name" v-model="name"/>
@@ -24,10 +25,13 @@ let counter = $ref(false);
       <input name="counter" type="checkbox" v-model="counter"/>
       <label for="comment" v-text="'Comment'"/>
       <textarea name="comment" v-model="comment"></textarea>
+      <label for="verdict" v-text="'Verdict'"/>
+      <pillbar :options="options" name="verdict" ></pillbar>
       <button>Submit</button>
     </form>
   </div>
 </template>
 
-<style>
+<style scoped>
+
 </style>
\ No newline at end of file