rename all components to new namespace (#1515)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/app/Extensions.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("extensions") }}</h3>
@@ -54,7 +54,7 @@
       </div>
     </div>
     <div slot="footer"></div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>
@@ -69,9 +69,9 @@ export default {
   },
   watch: {
     show() {
-      this.hasChromeExtInstalled = hasChromeExtensionInstalled();
-      this.hasFirefoxExtInstalled = hasFirefoxExtensionInstalled();
-    }
+      this.hasChromeExtInstalled = hasChromeExtensionInstalled()
+      this.hasFirefoxExtInstalled = hasFirefoxExtensionInstalled()
+    },
   },
   data() {
     return {

components/app/Header.vue

@@ -54,7 +54,7 @@
             <i class="material-icons">login</i>
           </button>
           <template slot="popover">
-            <login />
+            <FirebaseLogin />
           </template>
         </v-popover>
         <v-popover v-else>
@@ -87,7 +87,7 @@
               </nuxt-link>
             </div>
             <div>
-              <logout />
+              <FirebaseLogout />
             </div>
           </template>
         </v-popover>
@@ -134,9 +134,9 @@
         </v-popover>
       </span>
     </div>
-    <extensions :show="showExtensions" @hide-modal="showExtensions = false" />
-    <shortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
-    <support :show="showSupport" @hide-modal="showSupport = false" />
+    <AppExtensions :show="showExtensions" @hide-modal="showExtensions = false" />
+    <AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
+    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
   </header>
 </template>
 

components/app/Shortcuts.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("shortcuts") }}</h3>
@@ -70,7 +70,7 @@
       </div>
     </div>
     <div slot="footer"></div>
-  </modal>
+  </SmartModal>
 </template>
 
 <style scoped lang="scss">

components/app/Sidenav.vue

@@ -11,7 +11,7 @@
         v-tooltip.right="$t('home')"
         :aria-label="$t('home')"
       >
-        <logo alt class="material-icons" style="height: 24px"></logo>
+        <AppLogo alt class="material-icons" style="height: 24px" />
       </nuxt-link>
       <nuxt-link
         :to="localePath('realtime')"

components/app/Support.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("support_us") }}</h3>
@@ -11,10 +11,10 @@
       </div>
     </div>
     <div slot="body" class="flex flex-col">
-      <contributors />
+      <AppContributors />
     </div>
     <div slot="footer"></div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/collections/Add.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("new_collection") }}</h3>
@@ -33,7 +33,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/collections/AddFolder.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="show = false">
+  <SmartModal v-if="show" @close="show = false">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("new_folder") }}</h3>
@@ -33,7 +33,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/collections/Collection.vue

@@ -62,7 +62,7 @@
           :key="folder.name"
           class="ml-8 border-l border-brdColor"
         >
-          <folder
+          <CollectionsFolder
             :folder="folder"
             :folder-index="index"
             :folder-path="`${collectionIndex}/${index}`"
@@ -81,7 +81,7 @@
           :key="index"
           class="ml-8 border-l border-brdColor"
         >
-          <request
+          <CollectionsRequest
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="-1"
@@ -103,7 +103,7 @@
         </li>
       </ul>
     </div>
-    <confirm-modal
+    <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('are_you_sure_remove_collection')"
       @hide-modal="confirmRemove = false"

components/collections/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("edit_collection") }}</h3>
@@ -33,7 +33,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/collections/EditFolder.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="show = false">
+  <SmartModal v-if="show" @close="show = false">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("edit_folder") }}</h3>
@@ -33,7 +33,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/collections/EditRequest.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("edit_request") }}</h3>
@@ -33,7 +33,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/collections/Folder.vue

@@ -58,7 +58,7 @@
           :key="index"
           class="flex ml-8 border-l border-brdColor"
         >
-          <request
+          <CollectionsRequest
             :request="request"
             :collection-index="collectionIndex"
             :folder-index="folderIndex"
@@ -75,7 +75,7 @@
           :key="subFolder.name"
           class="ml-8 border-l border-brdColor"
         >
-          <folder
+          <CollectionsFolder
             :folder="subFolder"
             :folder-index="subFolderIndex"
             :collection-index="collectionIndex"
@@ -100,7 +100,7 @@
         </li>
       </ul>
     </div>
-    <confirm-modal
+    <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('are_you_sure_remove_folder')"
       @hide-modal="confirmRemove = false"

components/collections/ImportExport.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
@@ -94,9 +94,9 @@
     <div slot="footer">
       <div class="row-wrapper">
         <span>
-          <pw-toggle :on="showJsonCode" @change="showJsonCode = $event">
+          <SmartToggle :on="showJsonCode" @change="showJsonCode = $event">
             {{ $t("show_code") }}
-          </pw-toggle>
+          </SmartToggle>
         </span>
         <span>
           <button class="icon" @click="hideModal">
@@ -108,7 +108,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/collections/Request.vue

@@ -50,7 +50,7 @@
         </template>
       </v-popover>
     </div>
-    <confirm-modal
+    <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('are_you_sure_remove_request')"
       @hide-modal="confirmRemove = false"

components/collections/SaveRequest.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("save_request_as") }}</h3>
@@ -33,7 +33,7 @@
         </li>
       </ul>
       <label>{{ $t("folder") }}</label>
-      <autocomplete
+      <SmartAutoComplete
         :placeholder="$t('search')"
         :source="folders"
         :spellcheck="false"
@@ -66,7 +66,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/collections/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="yellow" :label="$t('collections')" ref="collections" no-legend>
+  <AppSection class="yellow" :label="$t('collections')" ref="collections" no-legend>
     <div class="show-on-large-screen">
       <input
         aria-label="Search"
@@ -9,28 +9,28 @@
         class="rounded-t-lg"
       />
     </div>
-    <add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
-    <edit-collection
+    <CollectionsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <CollectionsEdit
       :show="showModalEdit"
       :editing-collection="editingCollection"
       :editing-collection-index="editingCollectionIndex"
       @hide-modal="displayModalEdit(false)"
     />
-    <add-folder
+    <CollectionsAddFolder
       :show="showModalAddFolder"
       :folder="editingFolder"
       :folder-path="editingFolderPath"
       @add-folder="onAddFolder($event)"
       @hide-modal="displayModalAddFolder(false)"
     />
-    <edit-folder
+    <CollectionsEditFolder
       :show="showModalEditFolder"
       :collection-index="editingCollectionIndex"
       :folder="editingFolder"
       :folder-index="editingFolderIndex"
       @hide-modal="displayModalEditFolder(false)"
     />
-    <edit-request
+    <CollectionsEditRequest
       :show="showModalEditRequest"
       :collection-index="editingCollectionIndex"
       :folder-index="editingFolderIndex"
@@ -39,7 +39,7 @@
       :request-index="editingRequestIndex"
       @hide-modal="displayModalEditRequest(false)"
     />
-    <import-export-collections
+    <CollectionsImportExport
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
@@ -58,7 +58,7 @@
     <div class="virtual-list">
       <ul class="flex-col">
         <li v-for="(collection, index) in filteredCollections" :key="collection.name">
-          <collection
+          <CollectionsCollection
             :name="collection.name"
             :collection-index="index"
             :collection="collection"
@@ -76,7 +76,7 @@
     <p v-if="filterText && filteredCollections.length === 0" class="info">
       <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
     </p>
-  </pw-section>
+  </AppSection>
 </template>
 
 <style scoped lang="scss">

components/environments/Add.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("new_environment") }}</h3>
@@ -33,7 +33,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/environments/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("edit_environment") }}</h3>
@@ -97,7 +97,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/environments/Environment.vue

@@ -27,7 +27,7 @@
         </template>
       </v-popover>
     </div>
-    <confirm-modal
+    <SmartConfirmModal
       :show="confirmRemove"
       :title="$t('are_you_sure_remove_environment')"
       @hide-modal="confirmRemove = false"

components/environments/ImportExport.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
@@ -94,9 +94,9 @@
     <div slot="footer">
       <div class="row-wrapper">
         <span>
-          <pw-toggle :on="showJsonCode" @change="showJsonCode = $event">
+          <SmartToggle :on="showJsonCode" @change="showJsonCode = $event">
             {{ $t("show_code") }}
-          </pw-toggle>
+          </SmartToggle>
         </span>
         <span>
           <button class="icon" @click="hideModal">
@@ -108,7 +108,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/environments/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments" no-legend>
+  <AppSection class="green" icon="history" :label="$t('environments')" ref="environments" no-legend>
     <div class="show-on-large-screen">
       <span class="select-wrapper">
         <select
@@ -17,14 +17,14 @@
         </select>
       </span>
     </div>
-    <add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
-    <edit-environment
+    <EnvironmentsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <EnvironmentsEdit
       :show="showModalEdit"
       :editingEnvironment="editingEnvironment"
       :editingEnvironmentIndex="editingEnvironmentIndex"
       @hide-modal="displayModalEdit(false)"
     />
-    <import-export-environment
+    <EnvironmentsImportExport
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
@@ -47,7 +47,7 @@
     <div class="virtual-list">
       <ul class="flex-col">
         <li v-for="(environment, index) in environments" :key="environment.name">
-          <environment
+          <EnvironmentsEnvironment
             :environmentIndex="index"
             :environment="environment"
             @edit-environment="editEnvironment(environment, index)"
@@ -55,7 +55,7 @@
         </li>
       </ul>
     </div>
-  </pw-section>
+  </AppSection>
 </template>
 
 <style scoped lang="scss">

components/firebase/__tests__/Feeds.spec.js

@@ -1,4 +1,4 @@
-import feeds from "../feeds"
+import feeds from "../Feeds"
 import { shallowMount } from "@vue/test-utils"
 
 jest.mock("~/helpers/fb", () => ({

components/firebase/__tests__/Inputform.spec.js

@@ -1,4 +1,4 @@
-import inputform from "../inputform"
+import inputform from "../Inputform"
 import { shallowMount } from "@vue/test-utils"
 
 jest.mock("~/helpers/fb", () => ({

components/firebase/__tests__/Logout.spec.js

@@ -1,4 +1,4 @@
-import logout from "../logout"
+import logout from "../Logout"
 import { shallowMount, createLocalVue } from "@vue/test-utils"
 
 jest.mock("~/helpers/fb", () => ({

components/graphql/Field.vue

@@ -6,12 +6,12 @@
         (
         <span v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
-          <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
+          <GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
           <span v-if="index !== fieldArgs.length - 1"> , </span>
         </span>
         ) </span
       >:
-      <typelink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
+      <GraphqlTypeLink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
     </div>
     <div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
       {{ gqlField.description }}
@@ -27,7 +27,7 @@
       <div class="px-4 border-l-2 border-acColor">
         <div v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
-          <typelink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
+          <GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
           <div class="mt-2 text-fgLightColor field-desc" v-if="field.description">
             {{ field.description }}
           </div>

components/graphql/Type.vue

@@ -12,19 +12,19 @@
     <div v-if="interfaces.length > 0" class="mb-2">
       <h5>{{ $t("interfaces") }}</h5>
       <div v-for="gqlInterface in interfaces" :key="gqlInterface.name" class="m-2 ml-4">
-        <typelink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
+        <GraphqlTypeLink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
       </div>
     </div>
     <div v-if="children.length > 0" class="mb-2">
       <h5>{{ $t("children") }}</h5>
       <div v-for="child in children" :key="child.name" class="m-2 ml-4">
-        <typelink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
+        <GraphqlTypeLink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
       </div>
     </div>
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
-        <field
+        <GraphqlField
           :gqlField="field"
           :isHighlighted="isFieldHighlighted({ field })"
           :jumpTypeCallback="jumpTypeCallback"

components/graphql/__tests__/Field.spec.js

@@ -1,4 +1,4 @@
-import field from "../field"
+import field from "../Field"
 import { shallowMount } from "@vue/test-utils"
 
 const gqlField = {
@@ -21,7 +21,7 @@ const factory = (props) =>
   shallowMount(field, {
     propsData: props,
     stubs: {
-      typelink: {
+      GraphqlTypeLink: {
         template: "<span>Typelink</span>",
       },
     },

components/graphql/__tests__/Type.spec.js

@@ -1,4 +1,4 @@
-import type from "../type"
+import type from "../Type"
 
 import { shallowMount } from "@vue/test-utils"
 import {GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType, GraphQLObjectType} from "graphql"
@@ -15,7 +15,7 @@ const factory = (props) =>
       $t: (text) => text,
     },
     propsData: { gqlTypes: [], ...props },
-    stubs: ["field", "typelink"],
+    stubs: ["GraphqlField", "GraphqlTypeLink"],
   })
 
 describe("type", () => {
@@ -61,7 +61,7 @@ describe("type", () => {
         getFields: undefined,
       },
     })
-    expect(wrapper.find("field-stub").exists()).toEqual(false)
+    expect(wrapper.find("GraphqlField-stub").exists()).toEqual(false)
   })
 
   test("all fields are rendered if present with props passed properly", () => {
@@ -71,7 +71,7 @@ describe("type", () => {
       },
     })
 
-    expect(wrapper.findAll("field-stub").length).toEqual(2)
+    expect(wrapper.findAll("GraphqlField-stub").length).toEqual(2)
   })
 
   test("prepends 'input' to type name for Input Types", () => {

components/graphql/__tests__/TypeLink.spec.js

@@ -1,4 +1,4 @@
-import typelink from "../typelink"
+import typelink from "../TypeLink.vue"
 import { shallowMount } from "@vue/test-utils"
 import {GraphQLInt} from "graphql"
 

components/http/BodyParameters.vue

@@ -54,13 +54,13 @@
         />
         <div v-else class="file-chips-container">
           <div class="file-chips-wrapper">
-            <deletable-chip
+            <SmartDeletableChip
               v-for="(file, i) in Array.from(bodyParams[index].value)"
               :key="`body-param-${index}-file-${i}`"
               @chip-delete="chipDelete(index, i)"
             >
               {{ file.name }}
-            </deletable-chip>
+            </SmartDeletableChip>
           </div>
         </div>
       </li>

components/http/CodegenModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("generate_code") }}</h3>
@@ -56,7 +56,7 @@
         class="rounded-b-lg"
       ></textarea>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/http/Headers.vue

@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="orange" label="Headers" ref="headers" no-legend>
+  <AppSection class="orange" label="Headers" ref="headers" no-legend>
     <ul v-if="headers.length !== 0">
       <li>
         <div class="row-wrapper">
@@ -23,7 +23,7 @@
       :class="{ 'border-t': index == 0 }"
     >
       <li>
-        <autocomplete
+        <SmartAutoComplete
           :placeholder="$t('header_count', { count: index + 1 })"
           :source="commonHeaders"
           :spellcheck="false"
@@ -98,7 +98,7 @@
         </button>
       </li>
     </ul>
-  </pw-section>
+  </AppSection>
 </template>
 
 <script>

components/http/History.vue

@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="green" icon="history" :label="$t('history')" ref="history" no-legend>
+  <AppSection class="green" icon="history" :label="$t('history')" ref="history" no-legend>
     <div class="show-on-large-screen">
       <input
         aria-label="Search"
@@ -212,7 +212,7 @@
         </div>
       </div>
     </div>
-  </pw-section>
+  </AppSection>
 </template>
 
 <style scoped lang="scss">

components/http/ImportCurl.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("import_curl") }}</h3>
@@ -26,7 +26,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/http/Notes.vue

@@ -1,14 +1,14 @@
 <template>
-  <pw-section class="pink" :label="$t('notes')" ref="sync" no-legend>
+  <AppSection class="pink" :label="$t('notes')" ref="sync" no-legend>
     <div v-if="fb.currentUser">
-      <inputform />
-      <feeds />
+      <FirebaseInputform />
+      <FirebaseFeeds />
     </div>
     <div v-else>
       <p class="info">{{ $t("login_first") }}</p>
-      <login />
+      <FirebaseLogin />
     </div>
-  </pw-section>
+  </AppSection>
 </template>
 
 <script>

components/http/Parameters.vue

@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="pink" label="Parameters" ref="parameters" no-legend>
+  <AppSection class="pink" label="Parameters" ref="parameters" no-legend>
     <ul v-if="params.length !== 0">
       <li>
         <div class="row-wrapper">
@@ -115,7 +115,7 @@
         </button>
       </li>
     </ul>
-  </pw-section>
+  </AppSection>
 </template>
 
 <script>

components/http/RawBody.vue

@@ -30,7 +30,7 @@
           </div>
         </div>
         <div class="relative">
-          <ace-editor
+          <SmartAceEditor
             v-model="rawParamsBody"
             :lang="rawInputEditorLang"
             :options="{

components/http/Response.vue

@@ -1,10 +1,10 @@
 <template>
-  <pw-section class="purple" id="response" :label="$t('response')" ref="response" no-legend>
-    <http-response-meta :response="response" :active="active" />
+  <AppSection class="purple" id="response" :label="$t('response')" ref="response" no-legend>
+    <HttpResponseMeta :response="response" :active="active" />
     <div v-if="response.body && response.body !== $t('loading')">
-      <response-body-renderer :response="response" />
+      <LensesResponseBodyRenderer :response="response" />
     </div>
-  </pw-section>
+  </AppSection>
 </template>
 
 <script>

components/http/TokenList.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("manage_token") }}</h3>
@@ -60,7 +60,7 @@
         {{ $t("empty") }}
       </p>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/lenses/ResponseBodyRenderer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tabs styles="m-4">
-      <tab
+    <SmartTabs styles="m-4">
+      <SmartTab
         v-for="(lens, index) in validLenses"
         :key="lens.lensName"
         :id="lens.lensName"
@@ -9,15 +9,15 @@
         :selected="index === 0"
       >
         <component :is="lens.renderer" :response="response" />
-      </tab>
-      <tab
+      </SmartTab>
+      <SmartTab
         v-if="Object.keys(response.headers).length !== 0"
         id="headers"
         :label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
       >
-        <headers :headers="response.headers" />
-      </tab>
-    </tabs>
+        <LensesHeadersRenderer :headers="response.headers" />
+      </SmartTab>
+    </SmartTabs>
   </div>
 </template>
 

components/lenses/renderers/HTMLLensRenderer.vue

@@ -49,7 +49,7 @@
       </div>
     </div>
     <div id="response-details-wrapper">
-      <ace-editor
+      <SmartAceEditor
         :value="responseBodyText"
         :lang="'html'"
         :options="{

components/lenses/renderers/JSONLensRenderer.vue

@@ -40,7 +40,7 @@
       <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
     </div>
     <div id="response-details-wrapper">
-      <ace-editor
+      <SmartAceEditor
         :value="jsonBodyText"
         :lang="'json'"
         :provideJSONOutline="true"

components/lenses/renderers/RawLensRenderer.vue

@@ -37,7 +37,7 @@
       </div>
     </div>
     <div id="response-details-wrapper">
-      <ace-editor
+      <SmartAceEditor
         :value="responseBodyText"
         :lang="'plain_text'"
         :options="{

components/lenses/renderers/XMLLensRenderer.vue

@@ -37,7 +37,7 @@
       </div>
     </div>
     <div id="response-details-wrapper">
-      <ace-editor
+      <SmartAceEditor
         :value="responseBodyText"
         :lang="'xml'"
         :options="{

components/realtime/Mqtt.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <pw-section class="blue" :label="$t('request')" no-legend>
+    <AppSection class="blue" :label="$t('request')" no-legend>
       <ul>
         <li>
           <label for="mqtt-url">{{ $t("url") }}</label>
@@ -30,12 +30,12 @@
           </li>
         </div>
       </ul>
-    </pw-section>
+    </Appsection>
 
-    <pw-section class="blue" :label="$t('communication')" no-legend>
+    <AppSection class="blue" :label="$t('communication')" no-legend>
       <ul>
         <li>
-          <log :title="$t('log')" :log="this.log" />
+          <RealtimeLog :title="$t('log')" :log="this.log" />
         </li>
       </ul>
       <ul>
@@ -94,7 +94,7 @@
           </li>
         </div>
       </ul>
-    </pw-section>
+    </Appsection>
   </div>
 </template>
 

components/realtime/Socketio.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
+    <AppSection class="blue" :label="$t('request')" ref="request" no-legend>
       <ul>
         <li>
           <label for="socketio-url">{{ $t("url") }}</label>
@@ -41,12 +41,12 @@
           </li>
         </div>
       </ul>
-    </pw-section>
+    </AppSection>
 
-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
+    <AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
       <ul>
         <li>
-          <log :title="$t('log')" :log="communication.log" />
+          <RealtimeLog :title="$t('log')" :log="communication.log" />
         </li>
       </ul>
       <ul>
@@ -113,7 +113,7 @@
           </button>
         </li>
       </ul>
-    </pw-section>
+    </AppSection>
   </div>
 </template>
 

components/realtime/Sse.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
+    <AppSection class="blue" :label="$t('request')" ref="request" no-legend>
       <ul>
         <li>
           <label for="server">{{ $t("server") }}</label>
@@ -34,16 +34,16 @@
           </li>
         </div>
       </ul>
-    </pw-section>
+    </AppSection>
 
-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
+    <AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
       <ul>
         <li>
-          <log :title="$t('events')" :log="events.log" />
+          <RealtimeLog :title="$t('events')" :log="events.log" />
           <div id="result"></div>
         </li>
       </ul>
-    </pw-section>
+    </AppSection>
   </div>
 </template>
 

components/realtime/Websocket.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
+    <AppSection class="blue" :label="$t('request')" ref="request" no-legend>
       <ul>
         <li>
           <label for="websocket-url">{{ $t("url") }}</label>
@@ -35,12 +35,12 @@
           </li>
         </div>
       </ul>
-    </pw-section>
+    </AppSection>
 
-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
+    <AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
       <ul>
         <li>
-          <log :title="$t('log')" :log="communication.log" />
+          <RealtimeLog :title="$t('log')" :log="communication.log" />
         </li>
       </ul>
       <ul>
@@ -76,7 +76,7 @@
           </li>
         </div>
       </ul>
-    </pw-section>
+    </AppSection>
   </div>
 </template>
 

components/smart/ConfirmModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="show" @close="hideModal">
+  <SmartModal v-if="show" @close="hideModal">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("confirm") }}</h3>
@@ -26,7 +26,7 @@
         </span>
       </div>
     </div>
-  </modal>
+  </SmartModal>
 </template>
 
 <script>

components/smart/__tests__/AutoComplete.spec.js

@@ -1,4 +1,4 @@
-import autocomplete from "../autocomplete"
+import autocomplete from "../AutoComplete"
 import { mount } from "@vue/test-utils"
 
 const props = {

components/smart/__tests__/Tab.spec.js

@@ -1,4 +1,4 @@
-import tab from "../tab"
+import tab from "../Tab"
 import { mount } from "@vue/test-utils"
 
 const factory = (props, data) => {

components/smart/__tests__/Tabs.spec.js

@@ -1,5 +1,5 @@
-import tabs from "../tabs"
-import tab from "../tab"
+import tabs from "../Tabs"
+import tab from "../Tab"
 
 import { mount } from "@vue/test-utils"
 
@@ -7,13 +7,13 @@ const factory = () =>
   mount(tabs, {
     slots: {
       default: [
-        `<tab id="tab1" href="#" :label="'tab 1'" :icon="'testicon1'" :selected=true><div id="tab1render">tab1</div></tab>`,
-        `<tab id="tab2" href="#" :label="'tab 2'" :icon="'testicon2'"><div id="tab2render">tab1</div></tab>`,
-        `<tab id="tab3" href="#" :label="'tab 3'" :icon="'testicon3'"><div id="tab3render">tab1</div></tab>`,
+        `<Tab id="tab1" href="#" :label="'tab 1'" :icon="'testicon1'" :selected=true><div id="tab1render">tab1</div></Tab>`,
+        `<Tab id="tab2" href="#" :label="'tab 2'" :icon="'testicon2'"><div id="tab2render">tab1</div></Tab>`,
+        `<Tab id="tab3" href="#" :label="'tab 3'" :icon="'testicon3'"><div id="tab3render">tab1</div></Tab>`,
       ],
     },
     stubs: {
-      tab,
+      "Tab": tab,
     },
   })
 

components/smart/__tests__/Toggle.spec.js

@@ -1,4 +1,4 @@
-import pwToggle from "../pw-toggle"
+import pwToggle from "../Toggle"
 import { mount } from "@vue/test-utils"
 
 const factory = (props, slot) =>

components/smart/__tests__/UrlField.spec.js

@@ -1,4 +1,4 @@
-import urlField from "../url-field"
+import urlField from "../UrlField"
 import { mount } from "@vue/test-utils"
 
 const factory = (props) =>