WIP

form/res-judicata/package-lock.json

@@ -11725,6 +11725,11 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-click-outside": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.1.2.tgz",
+      "integrity": "sha512-gMdRqfRE6m6XU6SiFi3dyBlFB2MWogiXpof8Aa3LQysrl9pzTndqp/iEaAphLoadaQUFnQ0ec6fLLaxr7LiY6A=="
+    },
     "v8-compile-cache": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",

form/res-judicata/package.json

@@ -11,6 +11,7 @@
     "buefy": "^0.9.0",
     "core-js": "^3.6.5",
     "jspdf": "^2.3.0",
+    "v-click-outside": "^3.1.2",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
   },

form/res-judicata/src/components/edit/Hlava.vue

@@ -2,18 +2,18 @@
     <div id="hlava">
         <div v-on:click="makeactive" v-if="!isactive">
             <p class="mx-6 mt-4 has-text-weight-bold has-text-centered">
-                {{ title }}
+                {{ displaytitle }}
             </p>
             <p>
-                {{ text }}
+                {{ displaytext }}
             </p>
         </div>
-        <div v-if="isactive">
+        <div v-click-outside="makeinactive" v-if="isactive">
             <p class="mx-6 mt-4 has-text-weight-bold has-text-centered">
-                <b-input style="text-align:right;" v-on:blur="makeinactive" v-model="title"></b-input>
+                <b-input placeholder="Název hlavy" style="text-align:right;" v-model="title"></b-input>
             </p>
             <p>
-                <b-input v-on:blur="makeinactive" v-model="text" type="textarea"></b-input>
+                <b-input placeholder="Text hlavy" v-model="text" type="textarea"></b-input>
             </p>
         </div>
     </div>
@@ -29,9 +29,7 @@ export default {
     props: ['title', 'text'],
     data: () => {
         return {
-            isactive: false,
-            istitlefocused: false,
-            istextfocused: false,
+            isactive: false
         }
     },
     methods: {
@@ -40,31 +38,21 @@ export default {
         },
         makeinactive: function () {
             this.isactive = false;
-        },
-        changeFocus: function (how, what) {
-            if (how=="focus") {
-                switch (what) {
-                    case "title":
-                        this.istitlefocused = true
-                        break;
-                    case "text":
-                        this.istextfocused = true
-                        break;
-                }
+        }
+    },
+    computed: {
+        displaytitle: function () {
+            if (!this.title) {
+                return "Název hlavy"
             } else {
-                switch (what) {
-                    case "title":
-                        this.istitlefocused = false
-                        break;
-                    case "text":
-                        this.istextfocused = false
-                        break;
-                }
+                return this.title
             }
-            if (this.istitlefocused||this.istextfocused==true) {
-                this.makeactive()
+        },
+        displaytext: function () {
+            if (!this.text) {
+                return "Text hlavy"
             } else {
-                this.makeinactive()
+                return this.text
             }
         }
     }

form/res-judicata/src/main.js

@@ -3,7 +3,9 @@ import App from './App.vue'
 import router from './router'
 import Buefy from 'buefy'
 import './assets/scss/app.scss'
-
+import vClickOutside from 'v-click-outside'
+ 
+Vue.use(vClickOutside)
 Vue.use(Buefy)
 
 Vue.config.productionTip = false