From e2db5460667fbc46303527f21ec88f85b1354e39 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Sun, 31 Oct 2021 21:28:31 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20Vue=203?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/SettingsPage/SettingsPage.vue      | 38 +++++++++----------
 .../SettingsPage/include/ButtonsTab.inc       |  3 +-
 client/components/share/NumInput.vue          |  8 ++--
 client/components/vueComponent.js             |  5 ++-
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue
index c4128c1c..a88515f3 100644
--- a/client/components/Reader/SettingsPage/SettingsPage.vue
+++ b/client/components/Reader/SettingsPage/SettingsPage.vue
@@ -74,6 +74,7 @@
 
 <script>
 //-----------------------------------------------------------------------------
+import { ref, watch } from 'vue';
 import vueComponent from '../../vueComponent.js';
 
 import _ from 'lodash';
@@ -104,8 +105,9 @@ const componentOptions = {
             this.settingsChanged();
         },
         form: function(newValue) {
-            if (this.inited)
-                this.commit('reader/setSettings', newValue);
+            if (this.inited) {
+                this.commit('reader/setSettings', _.cloneDeep(newValue));
+            }
         },
         fontBold: function(newValue) {
             this.fontWeight = (newValue ? 'bold' : '');
@@ -172,7 +174,6 @@ class SettingsPage {
     selectedTab = 'profiles';
     selectedViewTab = 'mode';
     selectedKeysTab = 'mouse';
-    form = {};
     fontBold = false;
     fontItalic = false;
     vertShift = 0;
@@ -188,6 +189,19 @@ class SettingsPage {
     toolButtons = [];
     rstore = {};
 
+    setup() {
+        const settingsProps = { form: ref({}) };
+
+        for (let prop in rstore.settingDefaults) {
+            settingsProps[prop] = ref(_.cloneDeep(rstore.settingDefaults[prop]));
+            watch(settingsProps[prop], (newValue) => {
+                settingsProps.form.value = Object.assign({}, settingsProps.form.value, {[prop]: newValue});
+            }, {deep: true});
+        }
+
+        return settingsProps;
+    }
+
     created() {
         this.commit = this.$store.commit;
         this.reader = this.$store.state.reader;
@@ -217,18 +231,8 @@ class SettingsPage {
             return;
 
         this.form = Object.assign({}, this.settings);
-        if (!this.unwatch)
-            this.unwatch = {};
-
-        for (let prop in rstore.settingDefaults) {
-            if (this.unwatch && this.unwatch[prop])
-                this.unwatch[prop]();
-
-            this[prop] = this.form[prop];
-
-            this.unwatch[prop] = this.$watch(prop, (newValue) => {
-                this.form = Object.assign({}, this.form, {[prop]: newValue});
-            });
+        for (const prop in rstore.settingDefaults) {
+            this[prop] = _.cloneDeep(this.form[prop]);
         }
 
         this.fontBold = (this.fontWeight == 'bold');
@@ -423,10 +427,6 @@ class SettingsPage {
         }
     }
 
-    changeShowToolButton(buttonName) {
-        this.showToolButton = Object.assign({}, this.showToolButton, {[buttonName]: !this.showToolButton[buttonName]});
-    }
-
     async addProfile() {
         try {
             if (Object.keys(this.profiles).length >= 100) {
diff --git a/client/components/Reader/SettingsPage/include/ButtonsTab.inc b/client/components/Reader/SettingsPage/include/ButtonsTab.inc
index e874a177..27a6e818 100644
--- a/client/components/Reader/SettingsPage/include/ButtonsTab.inc
+++ b/client/components/Reader/SettingsPage/include/ButtonsTab.inc
@@ -3,8 +3,7 @@
 <div class="item row" v-for="item in toolButtons" :key="item.name" v-show="item.name != 'libs' || mode == 'liberama.top'">
     <div class="label-3"></div>
     <div class="col row">
-        <q-checkbox size="xs" @input="changeShowToolButton(item.name)"
-            :value="showToolButton[item.name]" :label="rstore.readerActions[item.name]"
+        <q-checkbox size="xs" v-model="showToolButton[item.name]" :label="rstore.readerActions[item.name]"
         />
     </div>
 </div>
diff --git a/client/components/share/NumInput.vue b/client/components/share/NumInput.vue
index 236a4f69..9cf2ed37 100644
--- a/client/components/share/NumInput.vue
+++ b/client/components/share/NumInput.vue
@@ -10,8 +10,8 @@
         <slot></slot>
         <template #prepend>
             <q-icon
-                v-ripple="validate(value - step)" 
-                :class="(validate(value - step) ? '' : 'disable')" 
+                v-ripple="validate(modelValue - step)" 
+                :class="(validate(modelValue - step) ? '' : 'disable')" 
                 name="la la-minus-circle" 
                 class="button" 
                 @click="minus"
@@ -25,8 +25,8 @@
         </template>
         <template #append>
             <q-icon
-                v-ripple="validate(value + step)"
-                :class="(validate(value + step) ? '' : 'disable')"
+                v-ripple="validate(modelValue + step)"
+                :class="(validate(modelValue + step) ? '' : 'disable')"
                 name="la la-plus-circle"
                 class="button"
                 @click="plus"
diff --git a/client/components/vueComponent.js b/client/components/vueComponent.js
index 0fae341d..8c23310e 100644
--- a/client/components/vueComponent.js
+++ b/client/components/vueComponent.js
@@ -35,8 +35,9 @@ export default function(componentClass) {
             computed[method] = {get: desc.get};
             if (desc.set)
                 computed[method].set = desc.set;
-        } else if (['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'activated',
-                    'deactivated', 'beforeUnmount', 'unmounted', 'errorCaptured', 'renderTracked', 'renderTriggered'].includes(method)) {//life cycle hooks
+        } else if ( ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'activated',//life cycle hooks
+                    'deactivated', 'beforeUnmount', 'unmounted', 'errorCaptured', 'renderTracked', 'renderTriggered',//life cycle hooks
+                    'setup'].includes(method) ) {
             comp[method] = obj[method];
         } else if (method !== 'constructor') {//usual
             methods[method] = obj[method];