Adjustments to examples

src/examples/Example01.vue

@@ -20,12 +20,5 @@ import Tab from "../components/Tab.vue"
 export default {
   name: "Example01",
   components: { Tabs, Tab },
-  data () {
-    return {}
-  },
 }
 </script>
-
-<style>
-
-</style>

src/examples/Example02.vue

@@ -30,7 +30,7 @@
         {{ slotProps.tab.title }}
         <div
           class="closeButton"
-          @click="closeTab(slotProps.index)">
+          @click.stop="closeTab(slotProps.index)">
           x
         </div>
       </template>
@@ -48,8 +48,8 @@ export default {
   data () {
     return {
       tabIndex: 0,
-      tabs: ["A tab", "Another tab"],
-      hiddenTabs: [],
+      tabs: ["A tab", "Hidden by default", "Another tab"],
+      hiddenTabs: [1],
       tabCount: 0,
     }
   },
@@ -61,6 +61,8 @@ export default {
   methods: {
     prependTab() {
       this.tabs = [`Tab ${this.tabCount}`].concat(this.tabs)
+      // Increase hidden tab indexes by 1
+      this.hiddenTabs = this.hiddenTabs.map(i => i + 1)
     },
     appendTab() {
       this.tabs = this.tabs.concat(`Tab ${this.tabCount}`)
@@ -72,7 +74,12 @@ export default {
       console.log("[Example02] Tab changed to index", index, "with tab", tab)
     },
     closeTab(index) {
-      this.tabs.splice(index, 1)
+      this.tabs = [
+        ...this.tabs.slice(0, index),
+        ...this.tabs.slice(index + 1),
+      ]
+      // Decrease hidden tab indexes by 1 (for all tabs after the closed tab)
+      this.hiddenTabs = this.hiddenTabs.map(i => i - (i >= index ? 1 : 0))
     },
   },
 }

src/examples/Example03.vue

@@ -8,11 +8,16 @@
     <tab
       title="Second Tab"
       active>
-      Content of second tab
+      Content of second tab (which is active by default); there is also an absolutely positioned element in the content window for all tabs.
     </tab>
     <tab title="Third Tab">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend hendrerit felis, sit amet convallis risus sollicitudin id. Donec nec mollis enim. Aliquam porttitor in ligula eu malesuada. Etiam id condimentum nisl, ut rutrum diam. Pellentesque quis odio mollis massa facilisis aliquam ut vitae nisi. Ut eleifend nibh justo, id commodo ipsum auctor at. Maecenas pellentesque ligula eget iaculis rutrum. Morbi pellentesque urna sit amet accumsan aliquet. Ut eget elit vel odio venenatis tempus non at libero. Morbi quis sem ac ante vestibulum gravida vitae id nulla. Aenean ac laoreet lorem, ac tincidunt enim. Nam vitae dignissim neque. Phasellus ipsum nunc, molestie at fermentum eu, tincidunt ut nibh. Suspendisse quis molestie risus. Nam dictum massa sit amet turpis vulputate ultrices. Duis sodales semper iaculis.
     </tab>
+    <!-- Have something absolutely positioned in the content window -->
+    <div
+      style="position: absolute; bottom: 0; right: 0;">
+      🚀
+    </div>
   </tabs>
 </template>
 
@@ -23,12 +28,5 @@ import Tab from "../components/Tab.vue"
 export default {
   name: "Example03",
   components: { Tabs, Tab },
-  data () {
-    return {}
-  },
 }
 </script>
-
-<style>
-
-</style>

src/examples/Example04.vue

@@ -43,12 +43,5 @@ import Tab from "../components/Tab.vue"
 export default {
   name: "Example03",
   components: { Tabs, Tab },
-  data () {
-    return {}
-  },
 }
 </script>
-
-<style>
-
-</style>

src/examples/Example05.vue

@@ -22,12 +22,5 @@ import Tab from "../components/Tab.vue"
 export default {
   name: "Example05",
   components: { Tabs, Tab },
-  data () {
-    return {}
-  },
 }
 </script>
-
-<style>
-
-</style>

src/examples/Example06.vue

@@ -22,12 +22,5 @@ import Tab from "../components/Tab.vue"
 export default {
   name: "Example06",
   components: { Tabs, Tab },
-  data () {
-    return {}
-  },
 }
 </script>
-
-<style>
-
-</style>