From 68a6b870fc7850a136ecc493a61ee1edbcca010c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jm=C3=A9no=20P=C5=99=C3=ADjmen=C3=AD?=
 <jmeno.prijmeni@odbornaskola.cz>
Date: Fri, 19 Mar 2021 11:29:40 +0100
Subject: [PATCH] =?UTF-8?q?koloto=C4=8D=20jako=20komponenta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bak/src/components/Kolotoc.vue | 44 ++++++++++++++++++++++++++++++++++
 src/App.vue                    | 30 +++++------------------
 2 files changed, 50 insertions(+), 24 deletions(-)
 create mode 100644 bak/src/components/Kolotoc.vue

diff --git a/bak/src/components/Kolotoc.vue b/bak/src/components/Kolotoc.vue
new file mode 100644
index 0000000..33c3559
--- /dev/null
+++ b/bak/src/components/Kolotoc.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <button v-on:click="index -= 1">&lt;</button>
+    <button v-on:click="index += 1">&gt;</button>
+    <div>
+      {{ images[index].src }}<br>
+      {{ images[index].title }}
+    </div>
+    <button v-on:click="index = i" v-for="(img, i) in images" :key="i" :title="img.title" v-bind:class="{active: i == index}"></button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+      images: {default: () => [{src: "", title: ""}]}
+  },
+  data: function() {
+    return {
+      index: 0
+    }
+  },
+  methods: {
+
+  },
+  watch: {
+    index: function(value) {
+      let total = this.images.length - 1;
+      if (value < 0) {
+        this.index = total;
+      }
+      else if (value > total) {
+        this.index = 0;
+      }
+    }
+  }
+}
+</script>
+
+<style>
+  .active {
+    background-color: green;
+  }
+</style>
diff --git a/src/App.vue b/src/App.vue
index e6159d7..d623254 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,25 +1,20 @@
 <template>
   <div id="app">
     <h1>Kolotoč</h1>
-    <div>
-      <button v-on:click="index -= 1">&lt;</button>
-      <button v-on:click="index += 1">&gt;</button>
-      <div>
-        {{ images[index].src }}<br>
-        {{ images[index].title }}
-      </div>
-      <button v-on:click="index = i" v-for="(img, i) in images" :key="i" :title="img.title" v-bind:class="{active: i == index}"></button>
-    </div>
+    <Kolotoc :images="images" />
   </div>
 </template>
 
 <script>
+import Kolotoc from './components/Kolotoc';
 
 export default {
   name: 'App',
+  components: {
+    Kolotoc
+  },
   data: function() {
     return {
-      index: 0,
       images: [
         {
           src: "/img/image_01.jpg",
@@ -35,23 +30,10 @@ export default {
         }
       ],
     }
-  },
-  watch: {
-    index: function(value) {
-      let total = this.images.length - 1;
-      if (value < 0) {
-        this.index = total;
-      }
-      else if (value > total) {
-        this.index = 0;
-      }
-    }
   }
 }
 </script>
 
 <style>
-  .active {
-    background-color: green;
-  }
+  
 </style>