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) =>

layouts/default.vue

@@ -2,11 +2,11 @@
   <div class="wrapper">
     <div class="content">
       <div class="columns">
-        <sidenav />
+        <AppSidenav />
         <main class="container">
-          <pw-header />
+          <AppHeader />
           <nuxt />
-          <pw-footer />
+          <AppFooter />
         </main>
       </div>
     </div>

package.json

@@ -33,7 +33,7 @@
     "graphql": "^15.5.0",
     "graphql-language-service-interface": "^2.8.2",
     "mustache": "^4.1.0",
-    "nuxt": "^2.14.12",
+    "nuxt": "^2.15.2",
     "nuxt-i18n": "^6.20.3",
     "paho-mqtt": "^1.1.0",
     "socket.io-client": "^3.1.1",
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",
-    "@babel/preset-env": "^7.12.17",
+    "@babel/preset-env": "^7.13.8",
     "@nuxtjs/color-mode": "^2.0.3",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/google-fonts": "^1.2.0",

pages/doc.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" :label="$t('import')" ref="import" no-legend>
+        <AppSection class="blue" :label="$t('import')" ref="import" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("collection") }}</label>
             <p class="info">
@@ -27,7 +27,7 @@
                 </button>
               </div>
             </div>
-            <ace-editor
+            <SmartAceEditor
               v-model="collectionJSON"
               :lang="'json'"
               :lint="false"
@@ -45,9 +45,9 @@
               <span>{{ $t("generate_docs") }}</span>
             </button>
           </div>
-        </pw-section>
+        </AppSection>
 
-        <pw-section class="green" :label="$t('documentation')" ref="documentation" no-legend>
+        <AppSection class="green" :label="$t('documentation')" ref="documentation" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("documentation") }}</label>
             <p v-if="this.items.length === 0" class="info">
@@ -277,11 +277,11 @@
               </span>
             </div>
           </div>
-        </pw-section>
+        </AppSection>
       </div>
 
       <aside class="sticky-inner inner-right lg:max-w-md">
-        <collections @use-collection="useSelectedCollection($event)" :doc="true" />
+        <Collections @use-collection="useSelectedCollection($event)" :doc="true" />
       </aside>
     </div>
   </div>

pages/graphql.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" :label="$t('endpoint')" ref="endpoint" no-legend>
+        <AppSection class="blue" :label="$t('endpoint')" ref="endpoint" no-legend>
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
@@ -35,9 +35,9 @@
               </li>
             </div>
           </ul>
-        </pw-section>
+        </AppSection>
 
-        <pw-section class="orange" :label="$t('headers')" ref="headers" no-legend>
+        <AppSection class="orange" :label="$t('headers')" ref="headers" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("headers") }}</label>
             <ul v-if="headers.length !== 0">
@@ -59,7 +59,7 @@
               :class="{ 'border-t': index == 0 }"
             >
               <li>
-                <autocomplete
+                <SmartAutoComplete
                   :placeholder="$t('header_count', { count: index + 1 })"
                   :source="commonHeaders"
                   :spellcheck="false"
@@ -138,9 +138,9 @@
               </li>
             </ul>
           </div>
-        </pw-section>
+        </AppSection>
 
-        <pw-section class="green" :label="$t('schema')" ref="schema" no-legend>
+        <AppSection class="green" :label="$t('schema')" ref="schema" no-legend>
           <div class="row-wrapper">
             <label>{{ $t("schema") }}</label>
             <div v-if="schema">
@@ -174,7 +174,7 @@
               </button>
             </div>
           </div>
-          <ace-editor
+          <SmartAceEditor
             v-if="schema"
             :value="schema"
             :lang="'graphqlschema'"
@@ -198,9 +198,9 @@
             readonly
             type="text"
           />
-        </pw-section>
+        </AppSection>
 
-        <pw-section class="teal" :label="$t('query')" ref="query" no-legend>
+        <AppSection class="teal" :label="$t('query')" ref="query" no-legend>
           <div class="row-wrapper gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
@@ -227,7 +227,7 @@
               </button>
             </div>
           </div>
-          <queryeditor
+          <GraphqlQueryEditor
             ref="queryEditor"
             v-model="gqlQueryString"
             :onRunGQLQuery="runQuery"
@@ -241,12 +241,12 @@
             }"
             styles="rounded-b-lg"
           />
-        </pw-section>
+        </AppSection>
 
-        <pw-section class="yellow" :label="$t('variables')" ref="variables" no-legend>
+        <AppSection class="yellow" :label="$t('variables')" ref="variables" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("variables") }}</label>
-            <ace-editor
+            <SmartAceEditor
               v-model="variableString"
               :lang="'json'"
               :options="{
@@ -260,9 +260,9 @@
               styles="rounded-b-lg"
             />
           </div>
-        </pw-section>
+        </AppSection>
 
-        <pw-section class="purple" :label="$t('response')" ref="response" no-legend>
+        <AppSection class="purple" :label="$t('response')" ref="response" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("response") }}</label>
             <div class="row-wrapper">
@@ -288,7 +288,7 @@
                 </button>
               </div>
             </div>
-            <ace-editor
+            <SmartAceEditor
               v-if="response"
               :value="response"
               :lang="'json'"
@@ -314,11 +314,11 @@
               type="text"
             />
           </div>
-        </pw-section>
+        </AppSection>
       </div>
 
       <aside class="sticky-inner inner-right lg:max-w-md">
-        <pw-section class="purple" :label="$t('docs')" ref="docs" no-legend>
+        <AppSection class="purple" :label="$t('docs')" ref="docs" no-legend>
           <section class="flex-col">
             <input
               type="text"
@@ -326,43 +326,47 @@
               v-model="graphqlFieldsFilterText"
               class="rounded-t-lg"
             />
-            <tabs ref="gqlTabs" styles="m-4">
+            <SmartTabs ref="gqlTabs" styles="m-4">
               <div class="gqlTabs">
-                <tab
+                <SmartTab
                   v-if="queryFields.length > 0"
                   :id="'queries'"
                   :label="$t('queries')"
                   :selected="true"
                 >
                   <div v-for="field in filteredQueryFields" :key="field.name">
-                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
-                </tab>
+                </SmartTab>
 
-                <tab v-if="mutationFields.length > 0" :id="'mutations'" :label="$t('mutations')">
+                <SmartTab
+                  v-if="mutationFields.length > 0"
+                  :id="'mutations'"
+                  :label="$t('mutations')"
+                >
                   <div v-for="field in filteredMutationFields" :key="field.name">
-                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
-                </tab>
+                </SmartTab>
 
-                <tab
+                <SmartTab
                   v-if="subscriptionFields.length > 0"
                   :id="'subscriptions'"
                   :label="$t('subscriptions')"
                 >
                   <div v-for="field in filteredSubscriptionFields" :key="field.name">
-                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
-                </tab>
+                </SmartTab>
 
-                <tab
+                <SmartTab
                   v-if="graphqlTypes.length > 0"
                   :id="'types'"
                   :label="$t('types')"
                   ref="typesTab"
                 >
                   <div v-for="type in filteredGraphqlTypes" :key="type.name">
-                    <type
+                    <GraphqlType
                       :gqlType="type"
                       :gqlTypes="graphqlTypes"
                       :isHighlighted="isGqlTypeHighlighted({ gqlType: type })"
@@ -370,9 +374,9 @@
                       :jumpTypeCallback="handleJumpToType"
                     />
                   </div>
-                </tab>
+                </SmartTab>
               </div>
-            </tabs>
+            </SmartTabs>
           </section>
 
           <p
@@ -386,7 +390,7 @@
           >
             {{ $t("send_request_first") }}
           </p>
-        </pw-section>
+        </AppSection>
       </aside>
     </div>
   </div>

pages/index.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
+        <AppSection class="blue" :label="$t('request')" ref="request" no-legend>
           <ul>
             <li class="shrink">
               <label for="method">{{ $t("method") }}</label>
@@ -50,7 +50,7 @@
                 @input="pathInputHandler"
                 :placeholder="$t('url')"
               />
-              <url-field v-model="uri" v-else />
+              <SmartUrlField v-model="uri" v-else />
             </li>
             <li class="shrink">
               <label class="hide-on-small-screen" for="send">&nbsp;</label>
@@ -84,7 +84,7 @@
             <ul>
               <li>
                 <label for="contentType" class="text-sm">{{ $t("content_type") }}</label>
-                <autocomplete
+                <SmartAutoComplete
                   :source="validContentTypes"
                   :spellcheck="false"
                   v-model="contentType"
@@ -96,14 +96,18 @@
               <li>
                 <div class="row-wrapper">
                   <span>
-                    <pw-toggle v-if="canListParameters" :on="rawInput" @change="rawInput = $event">
+                    <SmartToggle
+                      v-if="canListParameters"
+                      :on="rawInput"
+                      @change="rawInput = $event"
+                    >
                       {{ $t("raw_input") }}
-                    </pw-toggle>
+                    </SmartToggle>
                   </span>
                 </div>
               </li>
             </ul>
-            <http-body-parameters
+            <HttpBodyParameters
               v-if="!rawInput"
               :bodyParams="bodyParams"
               @clear-content="clearContent"
@@ -111,7 +115,7 @@
               @remove-request-body-param="removeRequestBodyParam"
               @add-request-body-param="addRequestBodyParam"
             />
-            <http-raw-body
+            <HttpRawBody
               v-else
               :rawParams="rawParams"
               :contentType="contentType"
@@ -169,42 +173,42 @@
               </button>
             </span>
           </div>
-        </pw-section>
+        </AppSection>
 
         <section id="options">
-          <tabs>
-            <tab
+          <SmartTabs>
+            <SmartTab
               :id="'params'"
               :label="
                 $t('parameters') + `${params.length !== 0 ? ' \xA0 • \xA0 ' + params.length : ''}`
               "
               :selected="true"
             >
-              <http-parameters
+              <HttpParameters
                 :params="params"
                 @clear-content="clearContent"
                 @remove-request-param="removeRequestParam"
                 @add-request-param="addRequestParam"
               />
-            </tab>
+            </SmartTab>
 
-            <tab
+            <SmartTab
               :id="'headers'"
               :label="
                 $t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
               "
             >
-              <http-headers
+              <HttpHeaders
                 :headers="headers"
                 @clear-content="clearContent"
                 @set-route-query-state="setRouteQueryState"
                 @remove-request-header="removeRequestHeader"
                 @add-request-header="addRequestHeader"
               />
-            </tab>
+            </SmartTab>
 
-            <tab :id="'authentication'" :label="$t('authentication')">
-              <pw-section class="teal" :label="$t('authentication')" ref="authentication" no-legend>
+            <SmartTab :id="'authentication'" :label="$t('authentication')">
+              <AppSection class="teal" :label="$t('authentication')" ref="authentication" no-legend>
                 <ul>
                   <li>
                     <div class="row-wrapper">
@@ -276,13 +280,13 @@
                   </li>
                 </ul>
                 <div class="row-wrapper">
-                  <pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
+                  <SmartToggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
                     {{ $t("include_in_url") }}
-                  </pw-toggle>
+                  </SmartToggle>
                 </div>
-              </pw-section>
+              </AppSection>
 
-              <pw-section
+              <AppSection
                 v-if="showTokenRequest"
                 class="red"
                 label="Access Token Request"
@@ -400,11 +404,11 @@
                     </button>
                   </li>
                 </ul>
-              </pw-section>
-            </tab>
+              </AppSection>
+            </SmartTab>
 
-            <tab :id="'pre_request_script'" :label="$t('pre_request_script')">
-              <pw-section
+            <SmartTab :id="'pre_request_script'" :label="$t('pre_request_script')">
+              <AppSection
                 v-if="showPreRequestScript"
                 class="orange"
                 :label="$t('pre_request_script')"
@@ -427,7 +431,7 @@
                         </a>
                       </div>
                     </div>
-                    <js-editor
+                    <SmartJsEditor
                       v-model="preRequestScript"
                       :options="{
                         maxLines: '16',
@@ -442,11 +446,11 @@
                     />
                   </li>
                 </ul>
-              </pw-section>
-            </tab>
+              </AppSection>
+            </SmartTab>
 
-            <tab :id="'tests'" :label="$t('tests')">
-              <pw-section
+            <SmartTab :id="'tests'" :label="$t('tests')">
+              <AppSection
                 v-if="testsEnabled"
                 class="orange"
                 :label="$t('tests')"
@@ -469,7 +473,7 @@
                         </a>
                       </div>
                     </div>
-                    <js-editor
+                    <SmartJsEditor
                       v-model="testScript"
                       :options="{
                         maxLines: '16',
@@ -516,50 +520,50 @@
                     </div>
                   </li>
                 </ul>
-              </pw-section>
-            </tab>
-          </tabs>
+              </AppSection>
+            </SmartTab>
+          </SmartTabs>
         </section>
 
-        <http-response :response="response" :active="runningRequest" ref="response" />
+        <HttpResponse :response="response" :active="runningRequest" ref="response" />
       </div>
 
       <aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
         <section>
-          <tabs>
-            <tab :id="'history'" :label="$t('history')" :selected="true">
-              <history @useHistory="handleUseHistory" ref="historyComponent" />
-            </tab>
+          <SmartTabs>
+            <SmartTab :id="'history'" :label="$t('history')" :selected="true">
+              <HttpHistory @useHistory="handleUseHistory" ref="historyComponent" />
+            </SmartTab>
 
-            <tab :id="'collections'" :label="$t('collections')">
-              <collections />
-            </tab>
+            <SmartTab :id="'collections'" :label="$t('collections')">
+              <Collections />
+            </SmartTab>
 
-            <tab :id="'env'" :label="$t('environments')">
-              <environments @use-environment="useSelectedEnvironment($event)" />
-            </tab>
+            <SmartTab :id="'env'" :label="$t('environments')">
+              <Environments @use-environment="useSelectedEnvironment($event)" />
+            </SmartTab>
 
-            <tab :id="'notes'" :label="$t('notes')">
-              <notes />
-            </tab>
-          </tabs>
+            <SmartTab :id="'notes'" :label="$t('notes')">
+              <HttpNotes />
+            </SmartTab>
+          </SmartTabs>
         </section>
       </aside>
     </div>
 
-    <save-request-as
+    <CollectionsSaveRequest
       :show="showSaveRequestModal"
       @hide-modal="hideRequestModal"
       :editing-request="editRequest"
     />
 
-    <import-curl
+    <HttpImportCurl
       :show="showCurlImportModal"
       @hide-modal="showCurlImportModal = false"
       @handle-import="handleImport"
     />
 
-    <codegen-modal
+    <HttpCodegenModal
       :show="showCodegenModal"
       :requestTypeProp="requestType"
       :requestCode="requestCode"
@@ -567,7 +571,7 @@
       @set-request-type="setRequestType"
     />
 
-    <token-list
+    <HttpTokenList
       :show="showTokenListModal"
       :tokens="tokens"
       @clear-content="clearContent"
@@ -576,7 +580,7 @@
       @hide-modal="showTokenListModal = false"
     />
 
-    <modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
+    <SmartModal v-if="showTokenRequestList" @close="showTokenRequestList = false">
       <div slot="header">
         <div class="row-wrapper">
           <h3 class="title">{{ $t("manage_token_req") }}</h3>
@@ -642,7 +646,7 @@
           </span>
         </div>
       </div>
-    </modal>
+    </SmartModal>
   </div>
 </template>
 
@@ -1652,25 +1656,25 @@ export default {
         }
       }
     },
-    observeRequestButton() {
-      const requestElement = this.$refs.request.$el
-      const sendButtonElement = this.$refs.sendButton
-      const observer = new IntersectionObserver(
-        (entries, observer) => {
-          entries.forEach(({ isIntersecting }) => {
-            if (isIntersecting) sendButtonElement.classList.remove("show")
-            // The button should float when it is no longer visible on screen.
-            // This is done by adding the show class to the button.
-            else sendButtonElement.classList.add("show")
-          })
-        },
-        {
-          rootMargin: "0px",
-          threshold: [0],
-        }
-      )
-      observer.observe(requestElement)
-    },
+    // observeRequestButton() {
+    //   const requestElement = this.$refs.request
+    //   const sendButtonElement = this.$refs.sendButton
+    //   const observer = new IntersectionObserver(
+    //     (entries, observer) => {
+    //       entries.forEach(({ isIntersecting }) => {
+    //         if (isIntersecting) sendButtonElement.classList.remove("show")
+    //         // The button should float when it is no longer visible on screen.
+    //         // This is done by adding the show class to the button.
+    //         else sendButtonElement.classList.add("show")
+    //       })
+    //     },
+    //     {
+    //       rootMargin: "0px",
+    //       threshold: [0],
+    //     }
+    //   )
+    //   observer.observe(requestElement)
+    // },
     handleImport() {
       const { value: text } = document.getElementById("import-curl")
       try {
@@ -1930,7 +1934,7 @@ export default {
     },
   },
   async mounted() {
-    this.observeRequestButton()
+    // this.observeRequestButton()
     this._keyListener = function (e) {
       if (e.key === "g" && (e.ctrlKey || e.metaKey)) {
         e.preventDefault()

pages/realtime.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="page">
     <section id="options">
-      <tabs>
-        <tab :id="'websocket'" :label="$t('websocket')" :selected="true">
-          <websocket />
-        </tab>
+      <SmartTabs>
+        <SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
+          <RealtimeWebsocket />
+        </SmartTab>
 
-        <tab :id="'sse'" :label="$t('sse')">
-          <sse />
-        </tab>
+        <SmartTab :id="'sse'" :label="$t('sse')">
+          <RealtimeSse />
+        </SmartTab>
 
-        <tab :id="'socketio'" :label="$t('socketio')">
-          <socketio />
-        </tab>
+        <SmartTab :id="'socketio'" :label="$t('socketio')">
+          <RealtimeSocketio />
+        </SmartTab>
 
-        <tab :id="'mqtt'" :label="$t('mqtt')">
-          <mqtt />
-        </tab>
-      </tabs>
+        <SmartTab :id="'mqtt'" :label="$t('mqtt')">
+          <RealtimeMqtt />
+        </SmartTab>
+      </SmartTabs>
     </section>
   </div>
 </template>

pages/settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <pw-section class="green" :label="$t('account')" ref="account" no-legend>
+    <AppSection class="green" :label="$t('account')" ref="account" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("account") }}</label>
         <div v-if="fb.currentUser">
@@ -23,16 +23,16 @@
             </span>
           </button>
           <br />
-          <logout />
+          <FirebaseLogout />
           <p v-for="setting in fb.currentSettings" :key="setting.id">
-            <pw-toggle
+            <SmartToggle
               :key="setting.name"
               :on="setting.value"
               @change="toggleSettings(setting.name, setting.value)"
             >
               {{ $t(setting.name) + " " + $t("sync") }}
               {{ setting.value ? $t("enabled") : $t("disabled") }}
-            </pw-toggle>
+            </SmartToggle>
           </p>
           <p v-if="fb.currentSettings.length !== 3">
             <button class="" @click="initSettings">
@@ -44,48 +44,48 @@
         <div v-else>
           <label>{{ $t("login_with") }}</label>
           <p>
-            <login />
+            <FirebaseLogin />
           </p>
         </div>
       </div>
-    </pw-section>
+    </AppSection>
 
-    <pw-section class="teal" :label="$t('theme')" ref="theme" no-legend>
+    <AppSection class="teal" :label="$t('theme')" ref="theme" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("theme") }}</label>
-        <color-mode-picker />
-        <accent-mode-picker />
+        <SmartColorModePicker />
+        <SmartAccentModePicker />
         <span>
-          <pw-toggle
+          <SmartToggle
             :on="settings.FRAME_COLORS_ENABLED"
             @change="toggleSetting('FRAME_COLORS_ENABLED')"
           >
             {{ $t("multi_color") }}
             {{ settings.FRAME_COLORS_ENABLED ? $t("enabled") : $t("disabled") }}
-          </pw-toggle>
+          </SmartToggle>
         </span>
         <span>
-          <pw-toggle
+          <SmartToggle
             :on="settings.SCROLL_INTO_ENABLED"
             @change="toggleSetting('SCROLL_INTO_ENABLED')"
           >
             {{ $t("scrollInto_use_toggle") }}
             {{ settings.SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
-          </pw-toggle>
+          </SmartToggle>
         </span>
       </div>
-    </pw-section>
+    </AppSection>
 
-    <pw-section class="purple" :label="$t('extensions')" ref="extensions" no-legend>
+    <AppSection class="purple" :label="$t('extensions')" ref="extensions" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("extensions") }}</label>
         <div class="row-wrapper">
-          <pw-toggle
+          <SmartToggle
             :on="settings.EXTENSIONS_ENABLED"
             @change="toggleSetting('EXTENSIONS_ENABLED')"
           >
             {{ $t("extensions_use_toggle") }}
-          </pw-toggle>
+          </SmartToggle>
         </div>
         <p v-if="extensionVersion != null" class="info">
           {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
@@ -94,17 +94,17 @@
           {{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
         </p>
       </div>
-    </pw-section>
+    </AppSection>
 
-    <pw-section class="blue" :label="$t('proxy')" ref="proxy" no-legend>
+    <AppSection class="blue" :label="$t('proxy')" ref="proxy" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("proxy") }}</label>
         <div class="row-wrapper">
           <span>
-            <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
+            <SmartToggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
               {{ $t("proxy") }}
               {{ settings.PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
-            </pw-toggle>
+            </SmartToggle>
           </span>
           <a
             href="https://github.com/hoppscotch/hoppscotch/wiki/Proxy"
@@ -158,9 +158,9 @@
 				</li>
 			</ul>
       -->
-    </pw-section>
+    </AppSection>
 
-    <pw-section class="red" :label="$t('experiments')" ref="experiments" no-legend>
+    <AppSection class="red" :label="$t('experiments')" ref="experiments" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("experiments") }}</label>
         <p class="info">
@@ -174,15 +174,15 @@
           >.
         </p>
         <div class="row-wrapper">
-          <pw-toggle
+          <SmartToggle
             :on="settings.EXPERIMENTAL_URL_BAR_ENABLED"
             @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
           >
             {{ $t("use_experimental_url_bar") }}
-          </pw-toggle>
+          </SmartToggle>
         </div>
       </div>
-    </pw-section>
+    </AppSection>
   </div>
 </template>