Переход на Vue 3, в процессе

2021-10-29 12:21:53 +07:00
parent 88d75fb0d8
commit ed46e91432
20 changed files with 505 additions and 338 deletions
--- a/client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue
+++ b/client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue
@@ -18,15 +18,20 @@
            <li>поддерживаемые браузеры: Google Chrome, Mozilla Firefox последних версий</li>
        </ul>

-        <p>В качестве URL книги можно задавать html-страничку с книгой, либо прямую ссылку 
-        на файл из онлайн-библиотеки (например, скопировав адрес ссылки или кнопки "скачать fb2").</p>
+        <p>
+            В качестве URL книги можно задавать html-страничку с книгой, либо прямую ссылку 
+            на файл из онлайн-библиотеки (например, скопировав адрес ссылки или кнопки "скачать fb2").
+        </p>
        <p>Поддерживаемые форматы: <b>fb2, fb2.zip, html, txt</b> и другие.</p>

        <div v-show="mode == 'omnireader' || mode == 'liberama.top'">
-            <p>Вы можете добавить в свой браузер закладку, указав в ее свойствах вместо адреса следующий код:
+            <p>
+                Вы можете добавить в свой браузер закладку, указав в ее свойствах вместо адреса следующий код:
                <br><strong>{{ bookmarkText }}</strong>
                <q-icon class="copy-icon" name="la la-copy" @click="copyText(bookmarkText, 'Код для адреса закладки успешно скопирован в буфер обмена')">
-                    <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                    <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                        Скопировать
+                    </q-tooltip>                    
                </q-icon>

                <br>или перетащив на панель закладок следующую ссылку:
@@ -41,14 +46,11 @@

 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';

 import {copyTextToClipboard} from '../../../../share/utils';

-export default @Component({
-})
-class CommonHelpPage extends Vue {
+class CommonHelpPage {
    created() {
    }

@@ -69,6 +71,8 @@ class CommonHelpPage extends Vue {
            this.$root.notify.error(msg);
    }
 }
+
+export default vueComponent(CommonHelpPage);
 //-----------------------------------------------------------------------------
 </script>

--- a/client/components/Reader/HelpPage/DonateHelpPage/DonateHelpPage.vue
+++ b/client/components/Reader/HelpPage/DonateHelpPage/DonateHelpPage.vue
@@ -1,49 +1,68 @@
 <template>
    <div class="page">
        <div class="box">
-            <p class="p">Вы можете пожертвовать на развитие проекта любую сумму:</p>
+            <p class="p">
+                Вы можете пожертвовать на развитие проекта любую сумму:
+            </p>
            <div class="address">
                <img class="logo" src="./assets/yoomoney.png">
-                <q-btn class="q-ml-sm q-px-sm" dense no-caps @click="donateYooMoney">Пожертвовать</q-btn><br>
-                <div class="para">{{ yooAddress }}
+                <q-btn class="q-ml-sm q-px-sm" dense no-caps @click="donateYooMoney">
+                    Пожертвовать
+                </q-btn><br>
+                <div class="para">
+                    {{ yooAddress }}
                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(yooAddress, 'Кошелёк ЮMoney')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
                    </q-icon>
                </div>
            </div>

            <div class="address">                
                <img class="logo" src="./assets/paypal.png">
-                <div class="para">{{ paypalAddress }}
+                <div class="para">
+                    {{ paypalAddress }}
                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(paypalAddress, 'Paypal-адрес')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
                    </q-icon>
                </div>
            </div>

            <div class="address">                
                <img class="logo" src="./assets/bitcoin.png">
-                <div class="para">{{ bitcoinAddress }}
+                <div class="para">
+                    {{ bitcoinAddress }}
                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(bitcoinAddress, 'Bitcoin-адрес')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
                    </q-icon>
                </div>
            </div>

            <div class="address">                
                <img class="logo" src="./assets/litecoin.png">
-                <div class="para">{{ litecoinAddress }}
+                <div class="para">
+                    {{ litecoinAddress }}
                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(litecoinAddress, 'Litecoin-адрес')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
                    </q-icon>
                </div>
            </div>

            <div class="address">                
                <img class="logo" src="./assets/monero.png">
-                <div class="para">{{ moneroAddress }}
+                <div class="para">
+                    {{ moneroAddress }}
                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(moneroAddress, 'Monero-адрес')">
-                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
                    </q-icon>
                </div>
            </div>
@@ -53,13 +72,11 @@

 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';
+
 import {copyTextToClipboard} from '../../../../share/utils';

-export default @Component({
-})
-class DonateHelpPage extends Vue {
+class DonateHelpPage {
    yooAddress = '410018702323056';
    paypalAddress = 'bookpauk@gmail.com';
    bitcoinAddress = '3EbgZ7MK1UVaN38Gty5DCBtS4PknM4Ut85';
@@ -81,6 +98,8 @@ class DonateHelpPage extends Vue {
            this.$root.notify.error('Копирование не удалось');
    }
 }
+
+export default vueComponent(DonateHelpPage);
 //-----------------------------------------------------------------------------
 </script>

--- a/client/components/Reader/HelpPage/HelpPage.vue
+++ b/client/components/Reader/HelpPage/HelpPage.vue
@@ -14,8 +14,7 @@
            <div class="separator"></div>

            <keep-alive>
-                <component ref="page" class="col" :is="activePage"
-                ></component>
+                <component :is="activePage" ref="page" class="col"></component>
            </keep-alive>
        </div>
    </Window>
@@ -23,8 +22,7 @@

 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';

 import Window from '../../share/Window.vue';
 import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
@@ -49,10 +47,12 @@ const tabs = [
    ['DonateHelpPage', 'Помочь проекту'],
 ];

-export default @Component({
+const componentOptions = {
    components: Object.assign({ Window }, pages),
-})
-class HelpPage extends Vue {
+};
+class HelpPage {
+    _options = componentOptions;
+
    selectedTab = 'CommonHelpPage';

    close() {
@@ -87,6 +87,8 @@ class HelpPage extends Vue {
        return true;
    }
 }
+
+export default vueComponent(HelpPage);
 //-----------------------------------------------------------------------------
 </script>

--- a/client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue
+++ b/client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue
@@ -1,29 +1,34 @@
 <template>
    <div class="page">
        <div style="font-size: 120%">
-            <div class="text-h6 text-bold">Доступны следующие клавиатурные команды:</div>
+            <div class="text-h6 text-bold">
+                Доступны следующие клавиатурные команды:
+            </div>
            <br>
        </div>
        <div class="q-mb-md" style="width: 550px">
-            <div class="text-right text-italic" style="font-size: 80%">* Изменить сочетания клавиш можно в настройках</div>
-            <UserHotKeys v-model="userHotKeys" readonly/>
+            <div class="text-right text-italic" style="font-size: 80%">
+                * Изменить сочетания клавиш можно в настройках
+            </div>
+            <UserHotKeys v-model="userHotKeys" readonly />
        </div>
    </div>
 </template>

 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';

 import UserHotKeys from '../../SettingsPage/UserHotKeys/UserHotKeys.vue';

-export default @Component({
+const componentOptions = {
    components: {
        UserHotKeys,
    },
-})
-class HotkeysHelpPage extends Vue {
+};
+class HotkeysHelpPage {
+    _options = componentOptions;
+
    created() {
    }

@@ -36,6 +41,8 @@ class HotkeysHelpPage extends Vue {
    }

 }
+
+export default vueComponent(HotkeysHelpPage);
 //-----------------------------------------------------------------------------
 </script>

--- a/client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue
+++ b/client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue
@@ -3,21 +3,28 @@
        <span class="text-h6 text-bold">Управление с помощью мыши/тачскрина:</span>
        <ul>
            <li><b>ЛКМ/ТАЧ</b> по экрану в одну из областей - активация действия:</li>
-                <div class="click-map-page">
-                    <ClickMapPage ref="clickMapPage"></ClickMapPage>
-                </div>
+            <div class="click-map-page">
+                <ClickMapPage ref="clickMapPage"></ClickMapPage>
+            </div>
        
            <li><b>ПКМ</b> - показать/скрыть панель управления</li>
            <li><b>СКМ</b> - вкл./выкл. плавный скроллинг текста</li>
            <br>
            <li>Жесты для тачскрина:</li>
            <ul>
-                <li style="list-style-type: square">от центра вверх: на весь экран</li>
-                <li style="list-style-type: square">от центра вниз: плавный скроллинг</li>
-                <li style="list-style-type: square">от центра вправо: увеличить скорость скроллинга</li>
-                <li style="list-style-type: square">от центра влево: уменьшить скорость скроллинга</li>
+                <li style="list-style-type: square">
+                    от центра вверх: на весь экран
+                </li>
+                <li style="list-style-type: square">
+                    от центра вниз: плавный скроллинг
+                </li>
+                <li style="list-style-type: square">
+                    от центра вправо: увеличить скорость скроллинга
+                </li>
+                <li style="list-style-type: square">
+                    от центра влево: уменьшить скорость скроллинга
+                </li>
            </ul>
-
        </ul>
        * Для управления с помощью мыши/тачскрина необходимо установить галочку "Включить управление кликом" в настройках
    </div>
@@ -25,17 +32,18 @@

 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../../vueComponent.js';

 import ClickMapPage from '../../ClickMapPage/ClickMapPage.vue';

-export default @Component({
+const componentOptions = {
    components: {
        ClickMapPage,
    },
-})
-class MouseHelpPage extends Vue {
+};
+class MouseHelpPage {
+    _options = componentOptions;
+
    created() {
    }

@@ -44,6 +52,8 @@ class MouseHelpPage extends Vue {
        this.$refs.clickMapPage.$el.style.backgroundColor = '#478355';
    }
 }
+
+export default vueComponent(MouseHelpPage);
 //-----------------------------------------------------------------------------
 </script>

--- a/client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue
+++ b/client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue
@@ -3,9 +3,9 @@
        <span class="text-h6 text-bold">История версий:</span>
        <br><br>

-        <span class="clickable" v-for="(item, index) in versionHeader" :key="index" @click="showRelease(item)">
+        <span v-for="(item, index) in versionHeader" :key="index" class="clickable" @click="showRelease(item)">
            <p>
-            {{ item }}
+                {{ item }}
            </p>
        </span>

@@ -20,13 +20,11 @@

 <script>
 //-----------------------------------------------------------------------------
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import vueComponent from '../../vueComponent.js';
+
 import {versionHistory} from '../../versionHistory';

-export default @Component({
-})
-class VersionHistoryPage extends Vue {
+class VersionHistoryPage {
    versionHeader = [];
    versionContent = [];

@@ -54,6 +52,8 @@ class VersionHistoryPage extends Vue {
        }
    }
 }
+
+export default vueComponent(VersionHistoryPage);
 //-----------------------------------------------------------------------------
 </script>