From 92fae728966d00cb04d412fb772ba8efe56cee66 Mon Sep 17 00:00:00 2001
From: KubMakCZ <skrabanek@odbornaskola.cz>
Date: Mon, 1 Dec 2025 13:16:39 +0100
Subject: [PATCH] update

---
 vue/09_bootstrap_intro/src/App.vue            | 17 +++++-
 .../src/components/BootCard.vue               | 41 +++++++++++++++
 .../src/components/EzPocitadlo.vue            | 31 +++++++++++
 .../src/components/FavForm.vue                | 52 +++++++++++++++++++
 .../src/components/HelloWorld.vue             | 27 +---------
 5 files changed, 141 insertions(+), 27 deletions(-)
 create mode 100644 vue/09_bootstrap_intro/src/components/BootCard.vue
 create mode 100644 vue/09_bootstrap_intro/src/components/EzPocitadlo.vue
 create mode 100644 vue/09_bootstrap_intro/src/components/FavForm.vue

diff --git a/vue/09_bootstrap_intro/src/App.vue b/vue/09_bootstrap_intro/src/App.vue
index af68c7c..a8e761b 100644
--- a/vue/09_bootstrap_intro/src/App.vue
+++ b/vue/09_bootstrap_intro/src/App.vue
@@ -14,17 +14,32 @@
     </div>
     
     <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <br>
+    <EzPocitadlo/>
+    <FavForm/>
+    <div class="row">
+      <BootCard class="col-md-3 col-12" name="John Smith" age="43" pos="CEO of Company"/>
+      <BootCard class="col-md-3 col-12" name="Peter Parker" age="18" pos="Fotograf"/>
+      <BootCard class="col-md-3 col-12" name="Franta Pepa" age="50" pos="Uživatel"/>
+      <BootCard class="col-md-3 col-12" name="Luboš Hnízdo" age="3" pos="Kiddo"/>
 
+    </div>
   </div>
 </template>
 
 <script>
+import BootCard from './components/BootCard.vue';
+import EzPocitadlo from './components/EzPocitadlo.vue';
+import FavForm from './components/FavForm.vue';
 import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    HelloWorld,
+    BootCard,
+    EzPocitadlo,
+    FavForm
   }
 }
 </script>
diff --git a/vue/09_bootstrap_intro/src/components/BootCard.vue b/vue/09_bootstrap_intro/src/components/BootCard.vue
new file mode 100644
index 0000000..890cbe3
--- /dev/null
+++ b/vue/09_bootstrap_intro/src/components/BootCard.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">{{ name }} | Věk: {{ age }}</h5>
+        <h6 class="card-subtitle mb-2 text-body-secondary">{{ pos }}</h6>
+        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam pariatur voluptas natus error deleniti saepe odio, aliquam vel beatae eaque nemo, minima laborum, iste provident obcaecati impedit rerum aspernatur magni.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BootCard',
+  props: {
+    name: String,
+    pos: String,
+    age: Number
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/vue/09_bootstrap_intro/src/components/EzPocitadlo.vue b/vue/09_bootstrap_intro/src/components/EzPocitadlo.vue
new file mode 100644
index 0000000..19663dd
--- /dev/null
+++ b/vue/09_bootstrap_intro/src/components/EzPocitadlo.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="card shadow">
+        <div class="header bg-primary text-white">
+            <h5>Počitadlo</h5>
+        </div>
+        <div class="card-body text-center">
+            <h1 class="display-1 tex-primary">{{ count }}</h1>
+            <div class="btn-group mt-3">
+                <button class="btn btn-danger" @click="count--">-1</button>
+                <button class="btn btn-secondary" @click="count = 0">reset</button>
+                <button class="btn btn-success" @click="count++">+1</button>
+            </div>
+
+            <div v-if="count>10" class="alert alert-danger mt-3">
+                ČÍSLO JE VĚTŠÍ NEŽ 10
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EzPocitadlo",
+    data() {
+        return {
+            count:0
+        }
+    }
+}
+
+</script>
\ No newline at end of file
diff --git a/vue/09_bootstrap_intro/src/components/FavForm.vue b/vue/09_bootstrap_intro/src/components/FavForm.vue
new file mode 100644
index 0000000..2a81d7f
--- /dev/null
+++ b/vue/09_bootstrap_intro/src/components/FavForm.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="card shadow">
+        <div class="card-header bg-success text-white">
+            <h5>Formulář</h5>
+        </div>
+        <div class="card-body">
+            <div class="mb-3">
+                <label class="form-label">Jméno:</label>
+                <input type="text" class="form-control"
+                v-model="name" placeholder="Zadej jméno">
+            </div>
+            <div class="mb-3">
+                <label class="form-label">Oblíbená Barva:</label>
+                <select class="form-select" v-model="color">
+                    <option value="">---vyber---</option>
+                    <option value="primary">Modrá</option>
+                    <option value="success">Zelená</option>
+                    <option value="danger">Červená</option>
+                    <option value="warning">Žlutá</option>
+                </select>
+            </div>
+
+            <div v-if="name && color" :class="`alert alert-${color}`">
+                <strong>Ahoj {{ name }}.</strong> Tvoje fav.c je {{ colorName }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default{
+    name:"FavForm",
+    data() {
+        return {
+            name: "",
+            color: ""
+        }
+    },
+    computed:{
+        colorName() {
+            const colors = {
+                "primary": "modrá",
+                "success" : "zelená",
+                "danger" : "červená",
+                "warning" : "žlutá"
+            }
+            return colors[this.color] || ""
+        }
+        
+    }
+}
+</script>
\ No newline at end of file
diff --git a/vue/09_bootstrap_intro/src/components/HelloWorld.vue b/vue/09_bootstrap_intro/src/components/HelloWorld.vue
index 879051a..53fa1a7 100644
--- a/vue/09_bootstrap_intro/src/components/HelloWorld.vue
+++ b/vue/09_bootstrap_intro/src/components/HelloWorld.vue
@@ -1,32 +1,7 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+    
   </div>
 </template>