Переход на Vue 3

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)
+            if (this.inited) {
-                this.commit('reader/setSettings', newValue);
+                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)
+        for (const prop in rstore.settingDefaults) {
-            this.unwatch = {};
+            this[prop] = _.cloneDeep(this.form[prop]);
-
-        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});
-            });
         }
 
         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) {

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)"
+        <q-checkbox size="xs" v-model="showToolButton[item.name]" :label="rstore.readerActions[item.name]"
-            :value="showToolButton[item.name]" :label="rstore.readerActions[item.name]"
         />
     </div>
 </div>

client/components/share/NumInput.vue

@@ -10,8 +10,8 @@
         <slot></slot>
         <template #prepend>
             <q-icon
-                v-ripple="validate(value - step)" 
+                v-ripple="validate(modelValue - step)" 
-                :class="(validate(value - step) ? '' : 'disable')" 
+                :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)"
+                v-ripple="validate(modelValue + step)"
-                :class="(validate(value + step) ? '' : 'disable')"
+                :class="(validate(modelValue + step) ? '' : 'disable')"
                 name="la la-plus-circle"
                 class="button"
                 @click="plus"

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',
+        } else if ( ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'activated',//life cycle hooks
-                    'deactivated', 'beforeUnmount', 'unmounted', 'errorCaptured', 'renderTracked', 'renderTriggered'].includes(method)) {//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];