Глобальный рефакторинг SettingsPage (в процессе)

client/components/Reader/SettingsPage/ViewTab/ViewTab.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="fit column">
+        <q-tabs
+            v-model="selectedTab"
+            active-color="black"
+            active-bg-color="white"
+            indicator-color="white"
+            dense
+            no-caps
+            class="no-mp bg-grey-4 text-grey-7"
+        >
+            <q-tab name="mode" label="Режим" />
+            <q-tab name="color" label="Цвет" />
+            <q-tab name="font" label="Шрифт" />
+            <q-tab name="text" label="Текст" />
+            <q-tab name="status" label="Строка статуса" />
+        </q-tabs>
+
+        <div class="q-mb-sm" />
+
+        <div class="col sets-tab-panel">
+            <Mode v-if="selectedTab == 'mode'" :form="form" />
+
+            <!--div v-if="selectedViewTab == 'color'">
+                @@include('./ViewTab/Color.inc');
+            </div-->
+
+            <!--div v-if="selectedViewTab == 'font'">
+                @@include('./ViewTab/Font.inc');
+            </div-->
+
+            <!--div v-if="selectedViewTab == 'text'">
+                @@include('./ViewTab/Text.inc');
+            </div-->
+
+            <!--div v-if="selectedViewTab == 'status'">
+                @@include('./ViewTab/Status.inc');
+            </div-->
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../../vueComponent.js';
+
+import Mode from './Mode/Mode.vue';
+
+const componentOptions = {
+    components: {
+        Mode,
+    },
+};
+class ViewTab {
+    _options = componentOptions;
+    _props = {
+        form: Object,
+    };
+
+    selectedTab = 'mode';
+
+    created() {
+    }
+
+    mounted() {
+    }
+
+}
+
+export default vueComponent(ViewTab);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.label {
+    width: 75px;
+}
+
+</style>