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

popup/src/components/mocks-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/mocks-tab/script.ts

@@ -0,0 +1,14 @@
+import { Component, Vue } from 'vue-property-decorator'
+import VueClipboard from 'vue-clipboard2'
+import Mocks from '@/components/mocks/main.vue'
+
+Vue.use(VueClipboard)
+
+@Component({
+  components: {
+    Mocks
+  }
+})
+export default class MocksTab extends Vue {
+  personalId = ''
+}

popup/src/components/mocks-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/mocks-tab/template.html

@@ -0,0 +1,10 @@
+<div>
+    <label>
+        Personal id
+        <input type="text" v-model="personalId"/>
+    </label>
+    <div v-if="personalId">
+        <hr />
+        <Mocks :personalId="personalId"></Mocks>
+    </div>
+</div>

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

@@ -1,4 +1,4 @@
-<div class="tab-page__item tab-page__item_show">
+<div>
     <div class="form-row">
         <div class="form-row__item">
             <input title="Day" class="form-row__item-input" type="text" v-model="person.birthday.day" placeholder="Day">

popup/src/components/script.ts

@@ -7,13 +7,15 @@ 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'
 
 Vue.use(VueClipboard)
 
 @Component({
   components: {
     Mocks,
-    PersonTab
+    PersonTab,
+    MocksTab
   }
 })
 export default class HelloWorld extends Vue {

popup/src/components/template.html

@@ -16,14 +16,7 @@
                 <PersonTab/>
             </div>
             <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'mocks'}">
-                <label>
+                <MocksTab/>
-                    Personal id
-                    <input type="text" v-model="personalId"/>
-                </label>
-                <div v-if="personalId">
-                    <hr />
-                    <Mocks :personalId="personalId"></Mocks>
-                </div>
             </div>
             <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
                 <div class="form-row">