From 40f14f904c6cbe7768d0289dc4a433d2090d493e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 19 Mar 2021 18:36:27 +0100
Subject: [PATCH] add tabs to demos

---
 docs/src/components/Demo/index.vue      | 22 ++++---
 docs/src/components/Demo/style.scss     | 35 +++++++----
 docs/src/components/Demos/index.vue     | 83 +++++++++++++++++++++++++
 docs/src/docPages/examples/community.md |  9 ++-
 docs/src/docPages/examples/default.md   |  9 ++-
 docs/src/main.js                        |  1 +
 6 files changed, 126 insertions(+), 33 deletions(-)
 create mode 100644 docs/src/components/Demos/index.vue

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 9c192d85..341c058e 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -5,16 +5,18 @@
       <template v-if="mainFile">
         <demo-frame class="demo__preview" v-bind="props" />
         <div class="demo__source" v-if="showSource">
-          <div class="demo__tabs" v-if="showFileNames">
-            <button
-              class="demo__tab"
-              :class="{ 'is-active': currentIndex === index}"
-              v-for="(file, index) in files"
-              :key="index"
-              @click="currentIndex = index"
-            >
-              {{ file.name }}
-            </button>
+          <div class="demo__scroller" v-if="showFileNames">
+            <div class="demo__tabs">
+              <button
+                class="demo__tab"
+                :class="{ 'is-active': currentIndex === index}"
+                v-for="(file, index) in files"
+                :key="index"
+                @click="currentIndex = index"
+              >
+                {{ file.name }}
+              </button>
+            </div>
           </div>
           <div class="demo__code" v-if="activeFile" :key="activeFile.path">
             <!-- eslint-disable-next-line -->
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 6403afd0..5e8baaa5 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -18,33 +18,42 @@
     background-color: $colorBlack;
   }
 
-  &__tabs {
-    padding: 0.5rem 1.25rem 0 1.25rem;
-    background-color: rgba($colorBlack, 0.9);
-    white-space: nowrap;
+  &__scroller {
+    display: flex;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 
+  &__tabs {
+    display: flex;
+    flex: 1 1 auto;
+    padding: 0 1.25rem 0 1.25rem;
+    border-bottom: 2px solid rgba($colorWhite, 0.1);
+  }
+
   &__tab {
+    position: relative;
     display: inline-flex;
     position: relative;
     background-color: transparent;
     color: rgba($colorWhite, 0.7);
-    padding: 0.1rem 0.5rem;
-    border-radius: 5px;
-    font-weight: 500;
+    padding: 0.3rem 0 calc(0.3rem + 2px) 0;
+    font: inherit;
+    font-family: "JetBrainsMono", monospace;
+    font-size: 0.85rem;
     border: none;
-    margin-right: 0.5rem;
-
-    &:first-child {
-      margin-left: -0.5rem;
-    }
+    margin-right: 1rem;
+    margin-bottom: -2px;
+    border-bottom: 2px solid transparent;
 
     &.is-active,
     &:hover {
       color: $colorWhite;
-      background-color: rgba($colorWhite, 0.1);
+    }
+
+    &.is-active {
+      font-weight: 700;
+      border-bottom-color: $colorWhite
     }
   }
 
diff --git a/docs/src/components/Demos/index.vue b/docs/src/components/Demos/index.vue
new file mode 100644
index 00000000..d6c9442c
--- /dev/null
+++ b/docs/src/components/Demos/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="demos" :class="{ 'is-first-active': selectedIndex === 0 }">
+    <button
+      class="demos__tab"
+      :class="{ 'is-active': selectedIndex === index }"
+      v-for="(item, index) in formattedItems"
+      :key="index"
+      @click="selectedIndex = index"
+    >
+      {{ item.title }}
+    </button>
+    <demo
+      :name="selectedItem.name"
+      :key="selectedItem.title"
+    />
+  </div>
+</template>
+
+<script>
+import Demo from '@/components/Demo'
+
+export default {
+  components: {
+    Demo,
+  },
+
+  props: {
+    items: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+
+  computed: {
+    formattedItems() {
+      return Object
+        .entries(this.items)
+        .map(([title, name]) => {
+          return {
+            title,
+            name,
+          }
+        })
+    },
+
+    selectedItem() {
+      return this.formattedItems[this.selectedIndex]
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.demos {
+  &__tab {
+    border-radius: 0.4rem 0.4rem 0 0;
+    border: none;
+    background: none;
+    padding: 0.3rem 1.25rem;
+    font: inherit;
+    font-weight: 700;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025rem;
+
+    &.is-active {
+      background-color: $colorBlack;
+      color: $colorWhite;
+      font-weight: 700;
+    }
+  }
+
+  &.is-first-active ::v-deep .demo {
+    border-top-left-radius: 0;
+  }
+}
+</style>
diff --git a/docs/src/docPages/examples/community.md b/docs/src/docPages/examples/community.md
index bcc957d8..fd34d2d5 100644
--- a/docs/src/docPages/examples/community.md
+++ b/docs/src/docPages/examples/community.md
@@ -1,7 +1,6 @@
 # Suggestions
 
-## Vue
-<demo name="Examples/Community/Vue" />
-
-## React
-<demo name="Examples/Community/React" />
+<demos :items="{
+  Vue: 'Examples/Community/Vue',
+  React: 'Examples/Community/React',
+}" />
diff --git a/docs/src/docPages/examples/default.md b/docs/src/docPages/examples/default.md
index 47ff89cd..73ab03ac 100644
--- a/docs/src/docPages/examples/default.md
+++ b/docs/src/docPages/examples/default.md
@@ -1,8 +1,7 @@
 # Default text editor
 Did we mention that you have full control over the rendering of the editor? Here is barebones example without any styling, but packed with a whole set of common extensions.
 
-## Vue
-<demo name="Examples/Default/Vue" />
-
-## React
-<demo name="Examples/Default/React" />
+<demos :items="{
+  Vue: 'Examples/Default/Vue',
+  React: 'Examples/Default/React',
+}" />
diff --git a/docs/src/main.js b/docs/src/main.js
index c5735d8f..70f63040 100644
--- a/docs/src/main.js
+++ b/docs/src/main.js
@@ -51,4 +51,5 @@ export default function (Vue) {
 
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
+  Vue.component('Demos', () => import(/* webpackChunkName: "demos" */ '~/components/Demos'))
 }