From 6007ad857635c7747154824e9fab9584a03462e4 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 4 Aug 2022 08:35:44 +0200
Subject: [PATCH] Add dropdown functionality

---
 client/src/components/icons/IconLogout.vue |  6 +++
 client/src/components/ui/ItDropdown.vue    | 60 ++++++++++++++++++++++
 client/src/views/StyelGuideView.vue        | 45 +++++++++++++++-
 3 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/icons/IconLogout.vue
 create mode 100644 client/src/components/ui/ItDropdown.vue

diff --git a/client/src/components/icons/IconLogout.vue b/client/src/components/icons/IconLogout.vue
new file mode 100644
index 00000000..ebc6f65a
--- /dev/null
+++ b/client/src/components/icons/IconLogout.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M26.3292 15.7779C26.3292 15.7625 26.3474 15.7474 26.3536 15.7321C26.3619 15.71 26.3691 15.6877 26.3749 15.6649V15.6222C26.39 15.5448 26.39 15.465 26.3749 15.3876V15.3449C26.3691 15.3221 26.3619 15.2998 26.3536 15.2777C26.3536 15.2623 26.3383 15.2472 26.3292 15.2319C26.32 15.2132 26.3098 15.1949 26.2985 15.1771L26.262 15.1313L26.2315 15.0918L20.9236 9.44226C20.8147 9.31721 20.6597 9.24193 20.494 9.23364C20.3283 9.22556 20.1665 9.2851 20.0457 9.39888C19.9249 9.51244 19.8558 9.67046 19.8541 9.83634C19.8522 10.002 19.9181 10.1615 20.0363 10.2776L24.3779 14.8906H7.47836C7.1417 14.8906 6.86865 15.1634 6.86865 15.5003C6.86865 15.8371 7.14172 16.11 7.47836 16.11H24.3779L20.0363 20.7229C19.8213 20.9698 19.8398 21.3426 20.0782 21.5672C20.3169 21.7916 20.6898 21.7877 20.9236 21.5583L26.2315 15.918L26.2619 15.8784L26.2985 15.8327C26.3098 15.8149 26.32 15.7966 26.3291 15.7779L26.3292 15.7779Z" fill="#0A0A0A"/>
+    <path d="M6.65855 27H11.5884C12.5588 27 13.4894 26.6146 14.1755 25.9286C14.8616 25.2423 15.247 24.3119 15.247 23.3414V21.2926C15.247 20.9559 14.9741 20.6829 14.6372 20.6829C14.3006 20.6829 14.0275 20.956 14.0275 21.2926V23.3506C14.0275 23.9975 13.7706 24.6179 13.3132 25.0753C12.8558 25.5328 12.2354 25.7897 11.5885 25.7897H6.65861C6.01166 25.7897 5.39134 25.5328 4.93386 25.0753C4.47642 24.6179 4.21952 23.9975 4.21952 23.3506V7.65855C4.21952 7.01161 4.47642 6.39129 4.93386 5.93381C5.39131 5.47636 6.01166 5.21946 6.65861 5.21946H11.5885C12.2354 5.21946 12.8557 5.47637 13.3132 5.93381C13.7706 6.39125 14.0275 7.01161 14.0275 7.65855V9.7074C14.0275 10.0441 14.3006 10.3171 14.6372 10.3171C14.9741 10.3171 15.247 10.044 15.247 9.7074V7.65855C15.247 6.68817 14.8616 5.75774 14.1755 5.07143C13.4894 4.38535 12.5588 4 11.5884 4H6.65855C5.68817 4 4.75774 4.38535 4.07143 5.07143C3.38535 5.75768 3 6.68811 3 7.65855V23.3413C3 24.3117 3.38535 25.2422 4.07143 25.9285C4.75768 26.6145 5.68811 26.9999 6.65855 26.9999V27Z" fill="#0A0A0A"/>
+  </svg>
+</template>
diff --git a/client/src/components/ui/ItDropdown.vue b/client/src/components/ui/ItDropdown.vue
new file mode 100644
index 00000000..e479e421
--- /dev/null
+++ b/client/src/components/ui/ItDropdown.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+
+import {reactive} from 'vue'
+import {Menu, MenuButton, MenuItems, MenuItem} from '@headlessui/vue'
+
+const props = defineProps<{
+  buttonClasses: [string],
+  buttonText: string,
+  listItems: [
+    [object]
+  ]
+}>()
+
+const emit = defineEmits<{
+  (e: 'select', data: object): void
+}>()
+
+</script>
+
+<template>
+  <Menu as="div" class="relative inline-block text-left">
+    <div>
+      <MenuButton
+        :class="buttonClasses"
+      >
+        {{buttonText}}
+      </MenuButton>
+    </div>
+
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <MenuItems
+        class="absolute left-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+      >
+        <div class="" v-for="section in listItems" :key="section">
+          <div class="px-1 py-1" v-for="item in section" :key="item">
+            <MenuItem v-slot="{ active }">
+              <button
+                @click="$emit('select', item.data)"
+                :class="[
+                  active ? 'bg-violet-500 text-white' : 'text-gray-900',
+                  'group flex w-full items-center rounded-md px-2 py-2 text-sm',
+                ]"
+              >
+                <component v-if="item.icon" :is="item.icon"></component>
+                {{item.title}}
+              </button>
+            </MenuItem>
+          </div>
+        </div>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
diff --git a/client/src/views/StyelGuideView.vue b/client/src/views/StyelGuideView.vue
index f0d842fd..d24a7600 100644
--- a/client/src/views/StyelGuideView.vue
+++ b/client/src/views/StyelGuideView.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 
-import {reactive} from 'vue'
+import {reactive, shallowRef} from 'vue'
 import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue'
 import ItCheckbox from '@/components/ui/ItCheckbox.vue';
+import ItDropdown from "@/components/ui/ItDropdown.vue";
+import IconLogout from "@/components/icons/IconLogout.vue"
 
 
 const state = reactive({
@@ -22,6 +24,32 @@ const state = reactive({
   dropdownSelected: {id: 8},
 })
 
+const dropdownData = shallowRef([
+    [
+      {
+        title: 'Option 1',
+        icon: IconLogout,
+        data: {}
+      },
+      {
+        title: 'Option 2',
+        icon: null,
+        data: {
+          test: 12
+        }
+      }
+    ],
+    [
+      {
+        title: 'Option 3',
+        icon: null,
+        data: {
+          amount: 34
+        }
+      },
+    ]
+  ])
+
 
 const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
 const colorValues = [100, 200, 300, 400, 500, 600, 700, 800, 900,];
@@ -30,6 +58,10 @@ function colorBgClass(color: string, value: number) {
   return `bg-${color}-${value}`;
 }
 
+function log(data: any) {
+  console.log(data);
+}
+
 </script>
 
 <template>
@@ -298,6 +330,17 @@ function colorBgClass(color: string, value: number) {
 
     <ItCheckbox disabled class="mt-4">Disabled</ItCheckbox>
 
+    <h2 class="mt-8 mb-8">Dropdown</h2>
+
+    <div class="h-60">
+      <ItDropdown
+        :button-classes="['btn-primary']"
+        :list-items="dropdownData"
+        :button-text="'Click me'"
+        @select="log"
+      />
+    </div>
+
   </main>
 </template>