From 757682c807a2c82f5b6e3f693d0770c8fb04ad09 Mon Sep 17 00:00:00 2001
From: YuukanOO <julien+github@leicher.me>
Date: Thu, 21 Jan 2021 17:28:00 +0100
Subject: [PATCH] add provide / inject sample

---
 vue2/src/App.vue                    | 42 +++++++++++++++++++++++++++++
 vue2/src/components/CustomTable.vue | 33 +++++++++++++++++++++++
 vue2/src/components/Panel.vue       |  7 +++++
 vue2/src/components/TabItem.vue     | 22 +++++++++++++++
 vue2/src/components/Tabs.vue        | 32 ++++++++++++++++++++++
 5 files changed, 136 insertions(+)
 create mode 100644 vue2/src/components/CustomTable.vue
 create mode 100644 vue2/src/components/Panel.vue
 create mode 100644 vue2/src/components/TabItem.vue
 create mode 100644 vue2/src/components/Tabs.vue

diff --git a/vue2/src/App.vue b/vue2/src/App.vue
index 8f77287..9f79ba4 100644
--- a/vue2/src/App.vue
+++ b/vue2/src/App.vue
@@ -1,5 +1,19 @@
 <template>
   <div id="app">
+    <tabs>
+      <!-- <div> -->
+      <tab-item title="Onglet 1">
+        <p>Contenu 1</p>
+      </tab-item>
+      <tab-item title="Onglet 2">
+        <p>Contenu 2</p>
+      </tab-item>
+      <tab-item title="Onglet 3">
+        <p>Contenu 3</p>
+      </tab-item>
+      <!-- </div> -->
+    </tabs>
+
     <card firstname="john" lastname="doe" />
     <greet />
     <counter :initialValue="58" />
@@ -20,11 +34,35 @@
         />
       </li>
     </ul>
+
+    <panel>
+      <!-- <template v-slot:title>
+        Titre du panneau
+      </template> -->
+      <p>Un élément</p>
+      <p>Un autre élément</p>
+    </panel>
+
+    <custom-table :headers="['Prénom', 'Nom']" :items="people">
+      <template v-slot="{ item }">
+        <td>{{ item.firstname }}</td>
+        <td>{{ item.lastname }}</td>
+      </template>
+      <template v-slot:actions="{ item }">
+        <td>
+          <button>Supprimer {{ item.firstname }}</button>
+        </td>
+      </template>
+    </custom-table>
   </div>
 </template>
 
 <script>
 import Card from "./components/Card";
+import Panel from "./components/Panel";
+import Tabs from "./components/Tabs";
+import TabItem from "./components/TabItem";
+import CustomTable from "./components/CustomTable";
 import Counter from "./components/Counter.vue";
 import AForm from "./components/AForm.vue";
 
@@ -32,6 +70,10 @@ export default {
   name: "App",
   components: {
     // MyCard: Card,
+    CustomTable,
+    Tabs,
+    TabItem,
+    Panel,
     Card,
     Counter,
     AForm,
diff --git a/vue2/src/components/CustomTable.vue b/vue2/src/components/CustomTable.vue
new file mode 100644
index 0000000..7c9ceaa
--- /dev/null
+++ b/vue2/src/components/CustomTable.vue
@@ -0,0 +1,33 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th v-for="header in headers" :key="header">{{ header }}</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(item, idx) in items" :key="idx">
+        <slot :item="item"></slot>
+        <slot name="actions" :item="item"
+          ><td>Aucune action disponible</td></slot
+        >
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  props: {
+    headers: {
+      type: Array,
+      default: () => [],
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
diff --git a/vue2/src/components/Panel.vue b/vue2/src/components/Panel.vue
new file mode 100644
index 0000000..62f2713
--- /dev/null
+++ b/vue2/src/components/Panel.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="panel">
+    <slot name="title">Aucun titre n'a été défini</slot>
+    <hr />
+    <slot></slot>
+  </div>
+</template>
diff --git a/vue2/src/components/TabItem.vue b/vue2/src/components/TabItem.vue
new file mode 100644
index 0000000..6804f8c
--- /dev/null
+++ b/vue2/src/components/TabItem.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="tabitem" v-show="isActive">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+  },
+  inject: ["registerTab", "activeTab"],
+  created() {
+    this.registerTab(this.title);
+  },
+  computed: {
+    isActive() {
+      return this.activeTab.title === this.title;
+    },
+  },
+};
+</script>
diff --git a/vue2/src/components/Tabs.vue b/vue2/src/components/Tabs.vue
new file mode 100644
index 0000000..74c0201
--- /dev/null
+++ b/vue2/src/components/Tabs.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="tabs">
+    <button v-for="tab in tabs" :key="tab" @click="active.title = tab">
+      {{ tab }}
+    </button>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: {
+        title: "",
+      },
+      tabs: [],
+    };
+  },
+  provide() {
+    return {
+      registerTab: (title) => {
+        this.tabs.push(title);
+        if (this.tabs.length === 1) {
+          this.active.title = title;
+        }
+      },
+      activeTab: this.active,
+    };
+  },
+};
+</script>