From f6b593f66042e2361f000a242a99c5300bf69c77 Mon Sep 17 00:00:00 2001
From: Francesco Siddi <francesco.siddi@gmail.com>
Date: Tue, 5 Jul 2022 14:50:21 +0200
Subject: [PATCH] Add Tab components

With these components it is possible organize content through tabs.

Use the following:

<TabsWrapper>
  <TabItem title="Tab 1">Tab 1 content</TabItem>
  <TabItem title="Tab 2">Tab 2 content</TabItem>
</TabsWrapper>

Inspired by work from matheus-alpe.
---
 web/app/src/components/TabItem.vue     | 13 ++++++++
 web/app/src/components/TabsWrapper.vue | 45 ++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 web/app/src/components/TabItem.vue
 create mode 100644 web/app/src/components/TabsWrapper.vue

diff --git a/web/app/src/components/TabItem.vue b/web/app/src/components/TabItem.vue
new file mode 100644
index 00000000..1cddade0
--- /dev/null
+++ b/web/app/src/components/TabItem.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { inject } from "vue";
+const props = defineProps({
+  title: String,
+});
+const selectedTitle = inject("selectedTitle");
+</script>
+
+<template>
+  <div v-show="selectedTitle === title">
+    <slot />
+  </div>
+</template>
diff --git a/web/app/src/components/TabsWrapper.vue b/web/app/src/components/TabsWrapper.vue
new file mode 100644
index 00000000..bf6f8aa8
--- /dev/null
+++ b/web/app/src/components/TabsWrapper.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { useSlots, ref, provide } from "vue";
+const slots = useSlots();
+
+const tabTitles = ref(slots.default().map((tab) => tab.props.title));
+const selectedTitle = ref(tabTitles.value[0]);
+provide("selectedTitle", selectedTitle);
+</script>
+
+<template>
+  <div>
+    <ul class="tabs-header">
+      <li
+        v-for="title in tabTitles"
+        :key="title"
+        class="tab-item"
+        :class="{ selected: selectedTitle === title }"
+        @click="selectedTitle = title"
+      >
+        {{ title }}
+      </li>
+    </ul>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.tabs-header {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 5px;
+}
+.tab-item {
+  flex: 1;
+  padding: 5px 0;
+  cursor: pointer;
+  user-select: none;
+}
+.tab-item.selected {
+  border-bottom: 1px solid white;
+}
+</style>