add provide / inject sample

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,

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>

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>

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>

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>