From dbd3d31f8e1796edab0f62149d74d6eb4a37457f Mon Sep 17 00:00:00 2001
From: Fuxing Loh <4266087+fuxingloh@users.noreply.github.com>
Date: Fri, 13 Nov 2020 02:33:47 +0800
Subject: [PATCH] Refactor examples/* (#42)

---
 dev/serve.vue                   | 332 --------------------------------
 examples/auto-play.vue          |  42 ++++
 examples/full-width.vue         |  45 +++++
 examples/item-customization.vue |  53 +++++
 examples/left-right-slot.vue    |  65 +++++++
 examples/position-start.vue     |  44 +++++
 examples/responsive.vue         |  50 +++++
 {dev => examples}/serve.js      |   0
 examples/serve.vue              |  92 +++++++++
 examples/simple.vue             |  40 ++++
 package.json                    |   2 +-
 src/vue-horizontal-list.vue     |   1 +
 12 files changed, 433 insertions(+), 333 deletions(-)
 delete mode 100644 dev/serve.vue
 create mode 100644 examples/auto-play.vue
 create mode 100644 examples/full-width.vue
 create mode 100644 examples/item-customization.vue
 create mode 100644 examples/left-right-slot.vue
 create mode 100644 examples/position-start.vue
 create mode 100644 examples/responsive.vue
 rename {dev => examples}/serve.js (100%)
 create mode 100644 examples/serve.vue
 create mode 100644 examples/simple.vue

diff --git a/dev/serve.vue b/dev/serve.vue
deleted file mode 100644
index 38ac2af..0000000
--- a/dev/serve.vue
+++ /dev/null
@@ -1,332 +0,0 @@
-<template>
-  <div id="app">
-    <div class="item">
-      <h5>Non scrollable</h5>
-      <p>For comparison</p>
-    </div>
-
-    <section>
-      <vue-horizontal-list
-        :items="items"
-        :options="{ responsive: [{ size: 1 }], position: { start: 2 } }"
-      >
-        <template v-slot:default="{ item }">
-          <div class="item">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.content }}</p>
-          </div>
-        </template>
-      </vue-horizontal-list>
-    </section>
-
-    <section>
-      <vue-horizontal-list
-        :items="items"
-        :options="{ responsive: [{ end: 576, size: 1 }, { size: 2 }] }"
-      >
-        <template v-slot:default="{ item }">
-          <div class="item">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.content }}</p>
-          </div>
-        </template>
-      </vue-horizontal-list>
-    </section>
-
-    <section>
-      <vue-horizontal-list
-        :items="items"
-        :options="{
-          responsive: [
-            { end: 576, size: 1 },
-            { start: 576, end: 768, size: 2 },
-            { size: 3 },
-          ],
-          autoplay: { play: true, repeat: true },
-        }"
-      >
-        <template v-slot:default="{ item }">
-          <div class="item">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.content }}</p>
-          </div>
-        </template>
-      </vue-horizontal-list>
-    </section>
-
-    <section>
-      <vue-horizontal-list
-        :items="items"
-        :options="{
-          responsive: [
-            { end: 576, size: 1 },
-            { start: 576, end: 768, size: 2 },
-            { size: 3 },
-          ],
-        }"
-      >
-        <template v-slot:start>
-          <div class="start-item">
-            <div class="icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="icon icon-tabler icon-tabler-new-section"
-                width="68"
-                height="68"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="#a0aec0"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <line x1="9" y1="12" x2="15" y2="12" />
-                <line x1="12" y1="9" x2="12" y2="15" />
-                <path
-                  d="M4 6v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1m-5 0h-2m-5 0h-1a1 1 0 0 1 -1 -1v-1m0 -5v-2m0 -5"
-                />
-              </svg>
-            </div>
-          </div>
-        </template>
-        <template v-slot:default="{ item }">
-          <div class="item">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.content }}</p>
-          </div>
-        </template>
-        <template v-slot:end>
-          <div class="start-item">
-            <div class="icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="icon icon-tabler icon-tabler-shield-check"
-                width="68"
-                height="68"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="#a0aec0"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <path d="M9 12l2 2l4 -4" />
-                <path
-                  d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
-                />
-              </svg>
-            </div>
-          </div>
-        </template>
-      </vue-horizontal-list>
-    </section>
-
-    <section>
-      <vue-horizontal-list
-        :items="items"
-        :options="{
-          responsive: [
-            { end: 576, size: 1 },
-            { start: 576, end: 768, size: 2 },
-            { size: 3 },
-          ],
-          autoplay: { play: true, repeat: true, speed: 2500 },
-        }"
-      >
-        <template v-slot:start>
-          <div class="start-item">
-            <div class="icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="icon icon-tabler icon-tabler-new-section"
-                width="68"
-                height="68"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="#a0aec0"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <line x1="9" y1="12" x2="15" y2="12" />
-                <line x1="12" y1="9" x2="12" y2="15" />
-                <path
-                  d="M4 6v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1m-5 0h-2m-5 0h-1a1 1 0 0 1 -1 -1v-1m0 -5v-2m0 -5"
-                />
-              </svg>
-            </div>
-          </div>
-        </template>
-        <template v-slot:default="{ item }">
-          <div class="item">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.content }}</p>
-          </div>
-        </template>
-        <template v-slot:end>
-          <div class="start-item">
-            <div class="icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="icon icon-tabler icon-tabler-shield-check"
-                width="68"
-                height="68"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="#a0aec0"
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                <path d="M9 12l2 2l4 -4" />
-                <path
-                  d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3"
-                />
-              </svg>
-            </div>
-          </div>
-        </template>
-      </vue-horizontal-list>
-    </section>
-
-    <section>
-      <vue-horizontal-list
-        :items="items"
-        :options="{
-          responsive: [
-            { end: 576, size: 1 },
-            { start: 576, end: 768, size: 2 },
-            { start: 768, end: 992, size: 3 },
-            { size: 4 },
-          ],
-        }"
-      >
-        <template v-slot:default="{ item }">
-          <div class="item">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.content }}</p>
-          </div>
-        </template>
-      </vue-horizontal-list>
-    </section>
-
-    <section>
-      <vue-horizontal-list :items="items">
-        <template v-slot:default="{ item }">
-          <div class="item">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.content }}</p>
-          </div>
-        </template>
-      </vue-horizontal-list>
-    </section>
-
-    <section>
-      <vue-horizontal-list :items="items" :options="{ item: { padding: 0 } }">
-        <template v-slot:default="{ item }">
-          <div class="item">
-            <h5>{{ item.title }}</h5>
-            <p>{{ item.content }}</p>
-          </div>
-        </template>
-      </vue-horizontal-list>
-    </section>
-  </div>
-</template>
-
-<script>
-import Vue from "vue";
-import VueHorizontalList from "@/vue-horizontal-list.vue";
-
-export default Vue.extend({
-  name: "ServeDev",
-  components: {
-    VueHorizontalList,
-  },
-  data() {
-    return {
-      items: [
-        { title: "Item 0", content: "Content item with description" },
-        { title: "Item 1", content: "Content item with description" },
-        { title: "Item 2", content: "Content item with description" },
-        { title: "Item 3", content: "Content item with description" },
-        { title: "Item 4", content: "Content item with description" },
-        { title: "Item 5", content: "Content item with description" },
-        { title: "Item 6", content: "Content item with description" },
-        { title: "Item 7", content: "Content item with description" },
-        { title: "Item 8", content: "Content item with description" },
-        { title: "Item 9", content: "Content item with description" },
-      ],
-    };
-  },
-});
-</script>
-
-<style>
-body {
-  margin: 0;
-  padding: 0;
-}
-</style>
-
-<style scoped>
-#app {
-  font-family: "Roboto", sans-serif;
-
-  max-width: 1400px;
-
-  margin-left: auto;
-  margin-right: auto;
-
-  padding: 80px 24px;
-}
-
-@media (min-width: 1200px) {
-  #app {
-    padding-left: 80px;
-    padding-right: 80px;
-  }
-}
-
-h5 {
-  font-size: 18px;
-  line-height: 1.5;
-  margin: 0 0 8px;
-}
-
-p {
-  font-size: 17px;
-  line-height: 1.5;
-  font-weight: 400;
-  margin: 0;
-
-  word-break: break-word;
-}
-.start-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 3px;
-  background: #ffe6e6;
-  height: 92px;
-}
-
-.icon {
-  display: flex;
-  justify-content: center;
-}
-
-.item {
-  padding: 16px 24px;
-  border-radius: 3px;
-  background: #f5f5f5;
-}
-
-section {
-  margin-top: 24px;
-}
-</style>
diff --git a/examples/auto-play.vue b/examples/auto-play.vue
new file mode 100644
index 0000000..9acfc9d
--- /dev/null
+++ b/examples/auto-play.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h2>Autoplay</h2>
+    <vue-horizontal-list :items="items" :options="options">
+      <template v-slot:default="{ item }">
+        <div class="item">
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.content }}</p>
+        </div>
+      </template>
+    </vue-horizontal-list>
+  </div>
+</template>
+
+<script>
+import VueHorizontalList from "@/vue-horizontal-list.vue";
+
+export default {
+  name: "auto-play",
+  components: {
+    VueHorizontalList,
+  },
+  data() {
+    return {
+      items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
+        return { title: `Auto play ${i}`, content: `Auto play, 3000ms.` };
+      }),
+      options: {
+        autoplay: { play: true, repeat: true, speed: 3000 },
+      },
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  padding: 24px;
+  border-radius: 3px;
+  background: #f5f5f5;
+}
+</style>
diff --git a/examples/full-width.vue b/examples/full-width.vue
new file mode 100644
index 0000000..0453fcb
--- /dev/null
+++ b/examples/full-width.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h2>Responsive: simple full width carousel</h2>
+    <vue-horizontal-list :items="items" :options="options">
+      <template v-slot:default="{ item }">
+        <div class="item">
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.content }}</p>
+        </div>
+      </template>
+    </vue-horizontal-list>
+  </div>
+</template>
+
+<script>
+import VueHorizontalList from "@/vue-horizontal-list.vue";
+
+export default {
+  name: "full-width",
+  components: {
+    VueHorizontalList,
+  },
+  data() {
+    return {
+      items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
+        return {
+          title: `Full Width Item ${i}`,
+          content: `A simple full width carousel!`,
+        };
+      }),
+      options: {
+        responsive: [{ size: 1 }],
+      },
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  padding: 32px;
+  border-radius: 3px;
+  background: #f5f5f5;
+}
+</style>
diff --git a/examples/item-customization.vue b/examples/item-customization.vue
new file mode 100644
index 0000000..3ae35ad
--- /dev/null
+++ b/examples/item-customization.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h2>Item Customization</h2>
+    <p>Remove padding and add a css class 'item-custom-name' to item.</p>
+    <vue-horizontal-list :items="items" :options="options">
+      <template v-slot:default="{ item }">
+        <div class="item">
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.content }}</p>
+        </div>
+      </template>
+    </vue-horizontal-list>
+  </div>
+</template>
+
+<script>
+import VueHorizontalList from "@/vue-horizontal-list.vue";
+
+export default {
+  name: "item-customization",
+  components: {
+    VueHorizontalList,
+  },
+  data() {
+    return {
+      items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
+        return { title: `Item Customization ${i}`, content: `Customized Item` };
+      }),
+      options: {
+        item: {
+          class: "item-custom-name",
+          padding: 0,
+        },
+      },
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  padding: 24px;
+  border-radius: 3px;
+  background: #f5f5f5;
+}
+</style>
+
+<style>
+.item-custom-name h3,
+.item-custom-name p {
+  color: red;
+}
+</style>
diff --git a/examples/left-right-slot.vue b/examples/left-right-slot.vue
new file mode 100644
index 0000000..de1af07
--- /dev/null
+++ b/examples/left-right-slot.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <h2>Slots: Left & Right</h2>
+    <vue-horizontal-list :items="items" :options="options">
+      <template v-slot:start>
+        <div class="item item-start-end">
+          <div>
+            <h3>START</h3>
+            <p>-</p>
+          </div>
+        </div>
+      </template>
+      <template v-slot:default="{ item }">
+        <div class="item">
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.content }}</p>
+        </div>
+      </template>
+      <template v-slot:end>
+        <div class="item item-start-end">
+          <div>
+            <h3>END</h3>
+            <p>-</p>
+          </div>
+        </div>
+      </template>
+    </vue-horizontal-list>
+  </div>
+</template>
+
+<script>
+import VueHorizontalList from "@/vue-horizontal-list.vue";
+
+export default {
+  name: "left-right-slot",
+  components: {
+    VueHorizontalList,
+  },
+  data() {
+    return {
+      items: [0, 1, 2, 3, 4, 5].map((i) => {
+        return { title: `Left Right Slot ${i}`, content: `3 slots` };
+      }),
+      options: {},
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  padding: 24px;
+  border-radius: 3px;
+  background: #f5f5f5;
+}
+
+.item-start-end {
+  background: #333;
+  color: #fff;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/examples/position-start.vue b/examples/position-start.vue
new file mode 100644
index 0000000..e88b827
--- /dev/null
+++ b/examples/position-start.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <h2>Position Start From 2</h2>
+    <vue-horizontal-list :items="items" :options="options">
+      <template v-slot:default="{ item }">
+        <div class="item">
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.content }}</p>
+        </div>
+      </template>
+    </vue-horizontal-list>
+  </div>
+</template>
+
+<script>
+import VueHorizontalList from "@/vue-horizontal-list.vue";
+
+export default {
+  name: "position-start",
+  components: {
+    VueHorizontalList,
+  },
+  data() {
+    return {
+      items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
+        return { title: `Item ${i}`, content: `Position Start From 2 - ${i}` };
+      }),
+      options: {
+        position: {
+          start: 1,
+        },
+      },
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  padding: 16px 24px;
+  border-radius: 3px;
+  background: #f5f5f5;
+}
+</style>
diff --git a/examples/responsive.vue b/examples/responsive.vue
new file mode 100644
index 0000000..78c608b
--- /dev/null
+++ b/examples/responsive.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <h2>Responsive: 4, 3, 2, 1</h2>
+    <vue-horizontal-list :items="items" :options="options">
+      <template v-slot:default="{ item }">
+        <div class="item">
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.content }}</p>
+        </div>
+      </template>
+    </vue-horizontal-list>
+  </div>
+</template>
+
+<script>
+import VueHorizontalList from "@/vue-horizontal-list.vue";
+
+export default {
+  name: "responsive",
+  components: {
+    VueHorizontalList,
+  },
+  data() {
+    return {
+      items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => {
+        return {
+          title: `Responsive 4-3-2-1`,
+          content: `Responsive Content ${i}!`,
+        };
+      }),
+      options: {
+        responsive: [
+          { end: 576, size: 1 },
+          { start: 576, end: 768, size: 2 },
+          { start: 768, end: 992, size: 3 },
+          { size: 4 },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  padding: 24px;
+  border-radius: 3px;
+  background: #f5f5f5;
+}
+</style>
diff --git a/dev/serve.js b/examples/serve.js
similarity index 100%
rename from dev/serve.js
rename to examples/serve.js
diff --git a/examples/serve.vue b/examples/serve.vue
new file mode 100644
index 0000000..c683f3d
--- /dev/null
+++ b/examples/serve.vue
@@ -0,0 +1,92 @@
+<template>
+  <div id="app">
+    <simple />
+
+    <position-start />
+
+    <full-width />
+
+    <responsive />
+
+    <left-right-slot />
+
+    <auto-play />
+
+    <item-customization />
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import VueHorizontalList from "@/vue-horizontal-list.vue";
+import Simple from "./simple";
+import PositionStart from "./position-start";
+import FullWidth from "./full-width";
+import Responsive from "./responsive";
+import ItemCustomization from "./item-customization";
+import AutoPlay from "./auto-play";
+import LeftRightSlot from "./left-right-slot";
+
+export default Vue.extend({
+  name: "ServeDev",
+  components: {
+    LeftRightSlot,
+    AutoPlay,
+    ItemCustomization,
+    Responsive,
+    FullWidth,
+    PositionStart,
+    Simple,
+    VueHorizontalList,
+  },
+});
+</script>
+
+<style>
+body {
+  font-family: "-apple-system", "system-ui", "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Helvetica Neue", "Arial", "sans-serif";
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 8px;
+}
+
+p {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.5;
+  font-weight: 500;
+  color: #333;
+  word-break: break-word;
+}
+</style>
+
+<style scoped>
+#app {
+  max-width: 1400px;
+
+  margin-left: auto;
+  margin-right: auto;
+
+  padding: 80px 24px;
+}
+
+@media (min-width: 1200px) {
+  #app {
+    padding-left: 80px;
+    padding-right: 80px;
+  }
+}
+
+#app > div {
+  margin: 48px 0;
+}
+</style>
diff --git a/examples/simple.vue b/examples/simple.vue
new file mode 100644
index 0000000..cf91489
--- /dev/null
+++ b/examples/simple.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h2>Simple</h2>
+    <vue-horizontal-list :items="items" :options="options">
+      <template v-slot:default="{ item }">
+        <div class="item">
+          <h3>{{ item.title }}</h3>
+          <p>{{ item.content }}</p>
+        </div>
+      </template>
+    </vue-horizontal-list>
+  </div>
+</template>
+
+<script>
+import VueHorizontalList from "@/vue-horizontal-list.vue";
+
+export default {
+  name: "simple",
+  components: {
+    VueHorizontalList,
+  },
+  data() {
+    return {
+      items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
+        return { title: `Item ${i}`, content: `🚀 Simple content ${i}` };
+      }),
+      options: {},
+    };
+  },
+};
+</script>
+
+<style scoped>
+.item {
+  padding: 16px 24px;
+  border-radius: 3px;
+  background: #f5f5f5;
+}
+</style>
diff --git a/package.json b/package.json
index f0b3953..1647df9 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "src/**/*.vue"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve dev/serve.js",
+    "serve": "vue-cli-service serve examples/serve.js",
     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
diff --git a/src/vue-horizontal-list.vue b/src/vue-horizontal-list.vue
index 29bc4d5..c8b63f1 100644
--- a/src/vue-horizontal-list.vue
+++ b/src/vue-horizontal-list.vue
@@ -162,6 +162,7 @@ export default {
       return {
         navigation: {
           start: options?.navigation?.start ?? 992,
+          // TODO(fuxing): Deprecate this in favor of navigation slot
           color: options?.navigation?.color ?? "#000",
         },
         item: {