Вынес таб в компонент

popup/src/components/ember-tab/main.vue

@@ -0,0 +1,4 @@
+<template src="./template.html"></template>
+<script lang="ts" src="./script.ts"></script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss" src="./style.scss"></style>

popup/src/components/ember-tab/script.ts

@@ -0,0 +1,37 @@
+import { Component, Vue } from 'vue-property-decorator'
+import { Person } from '@/classes/DTO/Person'
+import VueClipboard from 'vue-clipboard2'
+import sender from '@/classes/Service/Browser/Chrome/Sender'
+import { Action } from '@/classes/Enum/Action'
+import notificationCleaner from '@/classes/Service/NotificationCleaner'
+
+Vue.use(VueClipboard)
+
+@Component
+export default class HelloWorld extends Vue {
+  person = new Person()
+  isAutoCleaner = false
+
+  mounted () {
+    /** todo заполнить первоначальное значение */
+    notificationCleaner.state().then((isAutoCleaner) => {
+      this.isAutoCleaner = isAutoCleaner
+      console.log('this.isAutoCleaner = ' + isAutoCleaner)
+    })
+  }
+
+  cleanNotifications (): void {
+    sender.send({
+      action: Action.CLEAN_NOTIFICATION
+    })
+  }
+
+  onChangeAutoCleaner () {
+    console.log(this.isAutoCleaner)
+    if (this.isAutoCleaner) {
+      notificationCleaner.enable()
+    } else {
+      notificationCleaner.disable()
+    }
+  }
+}

popup/src/components/ember-tab/style.scss

@@ -0,0 +1,65 @@
+.container {
+  max-width: 400px;
+  min-width: 400px;
+  border: solid 2px gray;
+
+  .wrapper {
+    padding: 10px;
+
+    .tab-panel {
+      display: flex;
+
+      &__item {
+        flex-grow: 1;
+        padding: 5px;
+        cursor: pointer;
+        border-bottom: solid 2px #cae5fa;
+
+        &_active {
+          border-bottom: solid 2px #298df8;
+        }
+
+        &:hover {
+          border-bottom: solid 2px #298df8;
+        }
+      }
+    }
+
+    .tab-page {
+      padding-top: 10px;
+
+      &__item {
+        display: none;
+
+
+        &_show {
+          display: block;
+        }
+
+        .form-row {
+          display: flex;
+          margin-bottom: 5px;
+
+          &__item {
+            flex-grow: 1;
+            margin-right: 10px;
+
+            &-input {
+              width: 100%;
+            }
+          }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    .memory-panel {
+      text-align: left;
+      padding: 5px;
+      margin-top: 10px;
+    }
+  }
+}

popup/src/components/ember-tab/template.html

@@ -0,0 +1,17 @@
+<div>
+    <div class="form-row">
+        <div class="form-row__item">
+            <label>
+                Use notification cleaner
+                <input @change="onChangeAutoCleaner" type="checkbox" v-model="isAutoCleaner">
+            </label>
+        </div>
+    </div>
+    <div class="form-row">
+        <div class="form-row__item">
+            <button
+                    @click="cleanNotifications"
+            >Clean</button>
+        </div>
+    </div>
+</div>

popup/src/components/script.ts

@@ -1,13 +1,9 @@
 import { Component, Vue } from 'vue-property-decorator'
-import { Person } from '@/classes/DTO/Person'
 import VueClipboard from 'vue-clipboard2'
-import { Target } from '@/classes/Enum/Target'
-import sender from '@/classes/Service/Browser/Chrome/Sender'
-import { Action } from '@/classes/Enum/Action'
-import notificationCleaner from '@/classes/Service/NotificationCleaner'
 import Mocks from '@/components/mocks/main.vue'
 import PersonTab from '@/components/person-tab/main.vue'
 import MocksTab from '@/components/mocks-tab/main.vue'
+import EmberTab from '@/components/ember-tab/main.vue'
 
 Vue.use(VueClipboard)
 
@@ -15,43 +11,10 @@ Vue.use(VueClipboard)
   components: {
     Mocks,
     PersonTab,
-    MocksTab
+    MocksTab,
+    EmberTab
   }
 })
 export default class HelloWorld extends Vue {
   tab = 'person'
-  personalId = ''
-  person = new Person()
-  isAutoCleaner = false
-
-  mounted () {
-    /** todo заполнить первоначальное значение */
-    notificationCleaner.state().then((isAutoCleaner) => {
-      this.isAutoCleaner = isAutoCleaner
-      console.log('this.isAutoCleaner = ' + isAutoCleaner)
-    })
-  }
-
-  insertValueToNode (target: Target, value: string): void {
-    sender.send({
-      action: Action.INSERT,
-      target: target,
-      value: value
-    })
-  }
-
-  cleanNotifications (): void {
-    sender.send({
-      action: Action.CLEAN_NOTIFICATION
-    })
-  }
-
-  onChangeAutoCleaner () {
-    console.log(this.isAutoCleaner)
-    if (this.isAutoCleaner) {
-      notificationCleaner.enable()
-    } else {
-      notificationCleaner.disable()
-    }
-  }
 }

popup/src/components/template.html

@@ -19,21 +19,7 @@
                 <MocksTab/>
             </div>
             <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
-                <div class="form-row">
-                    <div class="form-row__item">
-                        <label>
-                            Use notification cleaner
-                            <input @change="onChangeAutoCleaner" type="checkbox" v-model="isAutoCleaner">
-                        </label>
-                    </div>
-                </div>
-                <div class="form-row">
-                    <div class="form-row__item">
-                        <button
-                            @click="cleanNotifications"
-                        >Clean</button>
-                    </div>
-                </div>
+                <EmberTab/>
             </div>
         </div>
     </div>