From f37e6503f63a6432c1a6733e4ca6d8676bbebda6 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Sun, 28 Apr 2019 14:14:56 -0700
Subject: [PATCH] improve sandbox layout

---
 docs/.vuepress/components/Sandbox.vue         | 281 ------------------
 docs/.vuepress/config.js                      |   1 -
 docs/.vuepress/theme/components/Sandbox.vue   | 236 +++++++++++++++
 docs/.vuepress/theme/layouts/Layout.vue       |  25 +-
 .../.vuepress/theme/layouts/SandboxLayout.vue |  27 ++
 docs/sandbox.md                               |   4 +-
 6 files changed, 284 insertions(+), 290 deletions(-)
 delete mode 100644 docs/.vuepress/components/Sandbox.vue
 create mode 100644 docs/.vuepress/theme/components/Sandbox.vue
 create mode 100644 docs/.vuepress/theme/layouts/SandboxLayout.vue

diff --git a/docs/.vuepress/components/Sandbox.vue b/docs/.vuepress/components/Sandbox.vue
deleted file mode 100644
index 7e7126c..0000000
--- a/docs/.vuepress/components/Sandbox.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<template>
-  <div id="sandbox-wrap">
-    <div id="config">
-
-      <div class="list-item" v-if="!hideHelp">
-        <p>Use the controls below to adjust the props used
-          by the vue-select components.</p>
-        <p>The API provides
-          more props than are shown here, these are some
-          commonly adjusted settings.</p>
-      </div>
-
-      <h5 class="list-item">Basic Features</h5>
-
-      <div class="list-item">
-        <label for="multiple">
-          <input id="multiple" type="checkbox" v-model="configuration.multiple">
-          <code>:multiple="{{ configuration.multiple ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <div class="list-item">
-        <label for="disabled">
-          <input id="disabled" type="checkbox" v-model="configuration.disabled">
-          <code>:disabled="{{ configuration.disabled ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <div class="list-item">
-        <label for="clearable">
-          <input id="clearable" type="checkbox" v-model="configuration.clearable">
-          <code>:clearable="{{ configuration.clearable ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <div class="list-item">
-        <label for="searchable">
-          <input id="searchable" type="checkbox" v-model="configuration.searchable">
-          <code>:searchable="{{ configuration.searchable ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <div class="list-item">
-        <label for="filterable">
-          <input id="filterable" type="checkbox" v-model="configuration.filterable">
-          <code>:filterable="{{ configuration.searchable ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <h5 class="list-item">Tagging</h5>
-
-      <div class="list-item">
-        <label for="taggable">
-          <input id="taggable" type="checkbox" v-model="configuration.taggable">
-          <code>:taggable="{{ configuration.taggable ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <div class="list-item">
-        <label for="noDrop">
-          <input id="noDrop" type="checkbox" v-model="configuration.noDrop">
-          <code>:no-drop="{{ configuration.noDrop ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <div class="list-item">
-        <label for="pushTags">
-          <input id="pushTags" type="checkbox" v-model="configuration.pushTags">
-          <code>:push-tags="{{ configuration.pushTags ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <h5 class="list-item">UX</h5>
-
-      <div class="list-item">
-        <label for="selectOnTab">
-          <input id="selectOnTab" type="checkbox" v-model="configuration.selectOnTab">
-          <code>:select-on-tab="{{ configuration.selectOnTab ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <div class="list-item">
-        <label for="closeOnSelect">
-          <input id="closeOnSelect" type="checkbox" v-model="configuration.closeOnSelect">
-          <code>:close-on-select="{{ configuration.closeOnSelect ? 'true' : 'false' }}"</code>
-        </label>
-      </div>
-
-      <h5 class="list-item">Localization / i18n</h5>
-
-      <div class="list-item">
-        <label for="rtl">
-          <input id="rtl" type="radio" v-model="configuration.dir" value="rtl">
-          <code>dir="rtl"</code>
-        </label>
-        <label for="ltr">
-          <input id="ltr" type="radio" v-model="configuration.dir" value="ltr">
-          <code>dir="ltr"</code>
-        </label>
-      </div>
-    </div>
-
-    <div id="sandbox">
-      <slot v-bind="configuration">
-        <div class="example">
-          <v-select v-bind="configuration" placeholder="country objects"></v-select>
-        </div>
-
-        <div class="example">
-          <v-select v-bind="configuration" placeholder="country objects, using option scoped slots">
-            <template slot="selected-option" slot-scope="{ label, value }">
-              {{ label }} -- {{ value }}
-            </template>
-            <template slot="option" slot-scope="{ label, value }">
-              {{ label }} ({{ value }})
-            </template>
-          </v-select>
-        </div>
-
-        <div class="example">
-          <v-select v-bind="configuration" :options="['cat', 'dog', 'bear']" placeholder="string options, option slots">
-            <template slot="selected-option" slot-scope="{ label }">
-              {{ label }}
-            </template>
-            <template slot="option" slot-scope="{ label }">
-              {{ label }}
-            </template>
-          </v-select>
-        </div>
-
-        <div class="example">
-          <v-select v-bind="configuration" :options="[1,5,10]" placeholder="options=[1,5,10]"></v-select>
-        </div>
-
-        <div class="example">
-          <v-select v-bind="configuration" label="title" :options="optionDataSets.books" :filter="fuseSearch"
-                    placeholder="advanced filtering w/ fuse.js + scoped slots">
-            <template slot="option" slot-scope="option">
-              <strong>{{ option.title }}</strong><br>
-              <em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
-            </template>
-          </v-select>
-        </div>
-
-        <div class="example">
-          <v-select
-                  v-bind="configuration"
-                  placeholder="search github repositories.."
-                  label="full_name"
-                  @search="search"
-                  :options="ajaxRes"
-          >
-          </v-select>
-        </div>
-
-        <div class="example">
-          <v-select v-bind="configuration" :options="[]" placeholder="options=[]"></v-select>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import Fuse from 'fuse.js';
-import debounce from 'lodash/debounce';
-import vSelect from '../../../src/components/Select.vue';
-import countries from '../data/countryCodes';
-import books from '../data/books';
-
-const defaultConfig = () => ({
-  options: countries,
-  multiple: false,
-  dir: 'ltr',
-  clearable: true,
-  searchable: true,
-  filterable: true,
-  noDrop: false,
-  closeOnSelect: true,
-  disabled: false,
-  selectOntab: false,
-  placeholder: 'Select a Country...',
-});
-
-export default {
-  props: {
-    hideHelp: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {vSelect},
-  data () {
-    return {
-      configuration: defaultConfig(),
-      value: null,
-      ajaxRes: [],
-      people: [],
-      optionDataSet: 'countries',
-      optionDataSets: {
-        countries,
-        books,
-      },
-    };
-  },
-  methods: {
-    search (search, loading) {
-      loading(true);
-      this.getRepositories(search, loading, this);
-    },
-    searchPeople (search, loading) {
-      loading(true);
-      this.getPeople(loading, this);
-    },
-    getPeople: debounce((loading, vm) => {
-      vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
-        vm.people = res.data.data;
-        loading(false);
-      });
-    }, 250),
-    getRepositories: debounce((search, loading, vm) => {
-      vm.$http
-        .get(`https://api.github.com/search/repositories?q=${search}`)
-        .then(res => {
-          vm.ajaxRes = res.data.items;
-          loading(false);
-        });
-    }, 250),
-    fuseSearch (options, search) {
-      return new Fuse(options, {
-        keys: ['title', 'author.firstName', 'author.lastName'],
-      }).search(search);
-    },
-  },
-};
-</script>
-
-<style scoped>
-  #sandbox-wrap {
-    min-height: 100%;
-    display: grid;
-    grid-template-columns: auto 75%;
-    grid-template-rows: auto;
-    grid-template-areas:
-            "sidebar component"
-  }
-
-  #config {
-    grid-area: sidebar;
-    border-right: 1px solid #eaecef;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  #sandbox {
-    grid-area: component;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .list-item {
-    margin-top: 0;
-    margin-bottom: 1rem;
-    padding: 1rem 1rem 0;
-  }
-
-  .list-item:not(:first-child) {
-    border-top: 1px solid #eaecef;
-  }
-
-  .example {
-    margin-bottom: 2rem;
-  }
-
-  .v-select {
-    width: 25em;
-  }
-</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 9f9163e..85681d6 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -21,7 +21,6 @@ let head = [
       rel: 'stylesheet',
       type: 'text/css',
     }],
-  ['link', {rel: 'icon', href: `/vue-logo.png`}],
   ['meta', {name: 'theme-color', content: '#3eaf7c'}],
   ['meta', {name: 'apple-mobile-web-app-capable', content: 'yes'}],
   ['meta', {name: 'apple-mobile-web-app-status-bar-style', content: 'black'}],
diff --git a/docs/.vuepress/theme/components/Sandbox.vue b/docs/.vuepress/theme/components/Sandbox.vue
new file mode 100644
index 0000000..e0fcfc2
--- /dev/null
+++ b/docs/.vuepress/theme/components/Sandbox.vue
@@ -0,0 +1,236 @@
+<template>
+  <div id="sandbox-wrap">
+    <div id="sidebar">
+
+      <div class="list-item" v-if="!hideHelp">
+        <CodeFund/>
+      </div>
+
+      <template v-for="config in configuration">
+        <h5 v-if="config.type === types.HEADING" class="list-item">{{ config.title }}</h5>
+        <div v-else-if="config.type === types.CHECKBOX" class="list-item">
+          <label :for="config.prop">
+            <input :id="config.prop" type="checkbox" v-model="props[config.prop]">
+            <code>:{{ config.prop }}="{{ props[config.prop] ? 'true' : 'false' }}"</code>
+          </label>
+        </div>
+      </template>
+
+      <h5 class="list-item">Localization / i18n</h5>
+
+      <div class="list-item">
+        <label for="rtl">
+          <input id="rtl" type="radio" v-model="configuration.dir" value="rtl">
+          <code>dir="rtl"</code>
+        </label>
+        <label for="ltr">
+          <input id="ltr" type="radio" v-model="configuration.dir" value="ltr">
+          <code>dir="ltr"</code>
+        </label>
+      </div>
+    </div>
+
+
+    <div id="sandbox">
+      <slot v-bind="props">
+        <div class="example">
+          <v-select v-bind="props" placeholder="country objects"></v-select>
+        </div>
+
+        <div class="example">
+          <v-select v-bind="props" placeholder="country objects, using option scoped slots">
+            <template slot="selected-option" slot-scope="{ label, value }">
+              {{ label }} -- {{ value }}
+            </template>
+            <template slot="option" slot-scope="{ label, value }">
+              {{ label }} ({{ value }})
+            </template>
+          </v-select>
+        </div>
+
+        <div class="example">
+          <v-select v-bind="props" :options="['cat', 'dog', 'bear']"
+                    placeholder="string options, option slots">
+            <template slot="selected-option" slot-scope="{ label }">
+              {{ label }}
+            </template>
+            <template slot="option" slot-scope="{ label }">
+              {{ label }}
+            </template>
+          </v-select>
+        </div>
+
+        <div class="example">
+          <v-select v-bind="props" :options="[1,5,10]" placeholder="options=[1,5,10]"></v-select>
+        </div>
+
+        <div class="example">
+          <v-select v-bind="props" label="title" :options="optionDataSets.books"
+                    :filter="fuseSearch"
+                    placeholder="advanced filtering w/ fuse.js + scoped slots">
+            <template slot="option" slot-scope="option">
+              <strong>{{ option.title }}</strong><br>
+              <em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
+            </template>
+          </v-select>
+        </div>
+
+        <div class="example">
+          <v-select
+                  v-bind="props"
+                  placeholder="search github repositories.."
+                  label="full_name"
+                  @search="search"
+                  :options="ajaxRes"
+          >
+          </v-select>
+        </div>
+
+        <div class="example">
+          <v-select v-bind="props" :options="[]" placeholder="options=[]"></v-select>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import Fuse from 'fuse.js';
+import debounce from 'lodash/debounce';
+import CodeFund from './CodeFund';
+import vSelect from '../../../../src/components/Select.vue';
+import countries from '../../data/countryCodes';
+import books from '../../data/books';
+
+const defaultConfig = () => ({
+  options: countries,
+  multiple: false,
+  dir: 'ltr',
+  clearable: true,
+  searchable: true,
+  filterable: true,
+  noDrop: false,
+  closeOnSelect: true,
+  disabled: false,
+  selectOntab: false,
+  placeholder: 'Select a Country...',
+});
+
+const HEADING = 'heading';
+const CHECKBOX = 'checkbox';
+
+export default {
+  props: {
+    hideHelp: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {vSelect, CodeFund},
+  data () {
+    return {
+      props: defaultConfig(),
+      value: null,
+      ajaxRes: [],
+      people: [],
+      optionDataSet: 'countries',
+      optionDataSets: {
+        countries,
+        books,
+      },
+    };
+  },
+  methods: {
+    search (search, loading) {
+      loading(true);
+      this.getRepositories(search, loading, this);
+    },
+    searchPeople (search, loading) {
+      loading(true);
+      this.getPeople(loading, this);
+    },
+    getPeople: debounce((loading, vm) => {
+      vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
+        vm.people = res.data.data;
+        loading(false);
+      });
+    }, 250),
+    getRepositories: debounce((search, loading, vm) => {
+      vm.$http
+        .get(`https://api.github.com/search/repositories?q=${search}`)
+        .then(res => {
+          vm.ajaxRes = res.data.items;
+          loading(false);
+        });
+    }, 250),
+    fuseSearch (options, search) {
+      return new Fuse(options, {
+        keys: ['title', 'author.firstName', 'author.lastName'],
+      }).search(search);
+    },
+  },
+  computed: {
+    types () {
+      return {HEADING, CHECKBOX};
+    },
+    configuration () {
+      return [
+        {
+          type: HEADING,
+          title: 'Basics',
+        },
+        {
+          prop: 'multiple',
+          type: CHECKBOX,
+        },
+        {
+          prop: 'disabled',
+          type: CHECKBOX,
+        },
+        {
+          prop: 'clearable',
+          type: CHECKBOX,
+        },
+        {
+          prop: 'searchable',
+          type: CHECKBOX,
+        },
+
+        {
+          type: HEADING,
+          title: 'Tagging',
+        },
+        {
+          prop: 'taggable',
+          type: CHECKBOX,
+        },
+        {
+          prop: 'noDrop',
+          type: CHECKBOX,
+        },
+        {
+          prop: 'pushTags',
+          type: CHECKBOX,
+        },
+
+        {
+          type: HEADING,
+          title: 'UX',
+        },
+        {
+          prop: 'selectOnTab',
+          type: CHECKBOX,
+        },
+        {
+          prop: 'closeOnSelect',
+          type: CHECKBOX,
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
index cf3d264..f360d80 100644
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -1,19 +1,31 @@
 <template>
-  <ParentLayout>
+  <SandboxLayout v-if="isSandbox"/>
+  <ParentLayout v-else>
     <CodeFund slot="sidebar-top"/>
   </ParentLayout>
 </template>
 
 <script>
-import ParentLayout from '@parent-theme/layouts/Layout.vue'
-import CodeFund from '../components/CodeFund.vue'
+import ParentLayout from '@parent-theme/layouts/Layout.vue';
+import CodeFund from '../components/CodeFund.vue';
+import SandboxLayout from './SandboxLayout';
 
 export default {
+  data: () => ({
+    isSidebarOpen: false,
+  }),
   components: {
+    SandboxLayout,
     ParentLayout,
-    CodeFund
-  }
-}
+    CodeFund,
+  },
+  computed: {
+    isSandbox () {
+      const {frontmatter} = this.$page;
+      return frontmatter.hasOwnProperty('isSandbox');
+    },
+  },
+};
 </script>
 
 <style>
@@ -21,6 +33,7 @@ export default {
     border-bottom: 1px solid #eaecef;
     min-height: 115px;
   }
+
   #codefund + .sidebar-links {
     padding-top: 1rem;
   }
diff --git a/docs/.vuepress/theme/layouts/SandboxLayout.vue b/docs/.vuepress/theme/layouts/SandboxLayout.vue
new file mode 100644
index 0000000..0be6077
--- /dev/null
+++ b/docs/.vuepress/theme/layouts/SandboxLayout.vue
@@ -0,0 +1,27 @@
+<template>
+  <div
+          class="theme-container"
+          :class="pageClasses"
+          @touchstart="onTouchStart"
+          @touchend="onTouchEnd"
+  >
+    <Navbar v-if="shouldShowNavbar"/>
+    <sandbox/>
+  </div>
+</template>
+<script>
+import Navbar from '@parent-theme/components/Navbar.vue';
+import Layout from '@parent-theme/layouts/Layout.vue';
+import Sandbox from '../components/Sandbox.vue';
+
+export default {
+  name: 'SandboxLayout',
+  components: {Navbar, Sandbox},
+  computed: {
+    ...Layout.computed,
+  },
+  methods: {
+    ...Layout.methods,
+  },
+};
+</script>
diff --git a/docs/sandbox.md b/docs/sandbox.md
index e63e774..8d64e70 100644
--- a/docs/sandbox.md
+++ b/docs/sandbox.md
@@ -1,6 +1,6 @@
 ---
 sidebar: false
-editLink: false
-layout: Sandbox
+isSandbox: true
 ---
 
+<sandbox />