feat: migrate all copy to clipboard actions to v-clipboard

components/app/Header.vue

@@ -10,7 +10,7 @@
         items-center
       "
     >
-      Hoppscotch
+      <AppLogo />
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="mt-1 mr-2" />

components/app/Logo.vue

@@ -1,19 +1,7 @@
 <template>
-  <svg
+  <svg class="logo" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
-    class="fill-current logo"
+    <circle class="fill-current" r="8" cx="50%" cy="50%" />
-    xmlns="http://www.w3.org/2000/svg"
+    <circle class="fill-primary" r="6" cx="50%" cy="50%" />
-    width="20"
-    height="20"
-    viewBox="0 0 612 612"
-  >
-    <g xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M4.283 208.326c-28.015 71.685 84.358 182.589 250.992 247.71 166.634 65.121 324.428 59.801 352.442-11.884 17.432-44.606-19.496-104.396-90.027-158.893-.489 22.675-4.952 44.944-13.309 66.328-3.559 9.108-11.697 21.519-30.254 28.923-10.853 4.33-24.392 6.526-40.242 6.526-40.758 0-99.372-14.662-156.792-39.22-27.484-11.755-52.967-25.125-73.694-38.665-23.871-15.594-41.229-31.196-51.592-46.373-15.399-22.551-13.289-40.954-8.807-52.421 8.368-21.412 20.275-40.884 35.185-57.777-88.789-7.765-156.47 11.143-173.902 55.746zm542.506 203.868c7.682-5.648 19.708-2.339 26.861 7.39 7.153 9.729 6.724 22.194-.958 27.842s-19.709 2.339-26.861-7.39c-7.153-9.729-6.724-22.194.958-27.842zm-297.979-5.647c3.842-9.832 16.98-13.886 29.344-9.054 12.363 4.832 19.271 16.719 15.428 26.552-3.842 9.832-16.98 13.887-29.344 9.054-12.363-4.832-19.269-16.72-15.428-26.552zM51.312 246.776c-11.854 2.301-22.937-3.422-24.754-12.782-1.817-9.361 6.321-18.813 18.174-21.114 11.854-2.301 22.937 3.422 24.754 12.782 1.817 9.36-6.319 18.813-18.174 21.114z"
-      />
-      <path
-        d="M433.885 363.563c24.904 0 42.999-6.106 48.633-20.52 9.669-24.741 13.162-50.371 11.229-75.19-4.919-63.176-45.008-121.096-107.987-145.708-20.393-7.97-41.378-11.745-62.027-11.744-43.118.003-84.718 16.481-116.132 45.623-18.252 16.932-33.069 38.136-42.738 62.878-21.567 55.188 173.67 144.661 269.022 144.661z"
-      />
-    </g>
   </svg>
 </template>
 

components/button/Secondary.vue

@@ -17,10 +17,11 @@
       color
         ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
         : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
-      label ? 'px-3' : 'px-2',
+      label ? 'px-4' : 'px-2',
       rounded ? 'rounded-full' : 'rounded',
       { 'opacity-75 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
+      { 'px-6 py-4 text-lg': large },
       {
         'border border-divider hover:border-dividerDark focus:border-dividerDark':
           outline,
@@ -106,6 +107,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    large: {
+      type: Boolean,
+      default: false,
+    },
     outline: {
       type: Boolean,
       default: false,

components/http/CodegenModal.vue

@@ -53,13 +53,6 @@
           <label for="generatedCode" class="font-semibold px-4 pt-4 pb-4">
             {{ $t("generated_code") }}
           </label>
-          <ButtonSecondary
-            ref="copyRequestCode"
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('copy')"
-            :icon="copyIcon"
-            @click.native="copyRequestCode"
-          />
         </div>
         <SmartAceEditor
           v-if="codegenType"
@@ -67,8 +60,8 @@
           :value="requestCode"
           :lang="codegens.find((x) => x.id === codegenType).language"
           :options="{
-            maxLines: '16',
+            maxLines: 16,
-            minLines: '8',
+            minLines: 8,
             fontSize: '12px',
             autoScrollEditorIntoView: true,
             readOnly: true,
@@ -79,6 +72,15 @@
         />
       </div>
     </template>
+    <template #footer>
+      <ButtonPrimary
+        ref="copyRequestCode"
+        :label="$t('copy')"
+        :icon="copyIcon"
+        @click.native="copyRequestCode"
+      />
+      <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+    </template>
   </SmartModal>
 </template>
 
@@ -149,16 +151,12 @@ export default defineComponent({
       this.$emit("handle-import")
     },
     copyRequestCode() {
-      const editor: any = this.$refs.generatedCode
+      this.$clipboard(this.requestCode)
-
-      editor.editor.selectAll()
-      editor.editor.focus()
-
-      document.execCommand("copy")
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard").toString(), {
         icon: "done",
       })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
 })

components/http/PreRequestScript.vue

@@ -27,8 +27,8 @@
     <SmartJsEditor
       v-model="preRequestScript"
       :options="{
-        maxLines: '16',
+        maxLines: 16,
-        minLines: '8',
+        minLines: 8,
         fontSize: '12px',
         autoScrollEditorIntoView: true,
         showPrintMargin: false,

components/http/RawBody.vue

@@ -53,8 +53,8 @@
         v-model="rawParamsBody"
         :lang="rawInputEditorLang"
         :options="{
-          maxLines: '16',
+          maxLines: 16,
-          minLines: '8',
+          minLines: 8,
           fontSize: '12px',
           autoScrollEditorIntoView: true,
           showPrintMargin: false,

components/http/Request.vue

@@ -276,12 +276,7 @@ export default defineComponent({
           .then(() => {})
           .catch(() => {})
       } else {
-        const dummy = document.createElement("input")
+        this.$clipboard(window.location.href)
-        document.body.appendChild(dummy)
-        dummy.value = window.location.href
-        dummy.select()
-        document.execCommand("copy")
-        document.body.removeChild(dummy)
         this.$toast.info(this.$t("copied_to_clipboard"), {
           icon: "done",
         })

components/http/Tests.vue

@@ -27,8 +27,8 @@
     <SmartJsEditor
       v-model="testScript"
       :options="{
-        maxLines: '16',
+        maxLines: 16,
-        minLines: '8',
+        minLines: 8,
         fontSize: '12px',
         autoScrollEditorIntoView: true,
         showPrintMargin: false,

components/landing/CTA.vue

@@ -1,6 +1,17 @@
 <template>
-  <div class="bg-primaryLight rounded flex p-4">
+  <div
-    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    class="
+      bg-primaryLight
+      rounded
+      flex
+      grid
+      p-4
+      gap-4
+      grid-cols-1
+      md:grid-cols-2
+      lg:grid-cols-3
+    "
+  >
     <div
       v-for="(cta, index) in ctas"
       :key="`cta-${index}`"
@@ -9,13 +20,7 @@
       <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
       <div class="flex-grow">
         <h2
-            class="
+          class="font-semibold mt-4 text-lg text-secondaryDark mb-2 transition"
-              font-semibold
-              mt-4
-              text-lg text-secondaryDark
-              mb-2
-              transition
-            "
         >
           {{ cta.title }}
         </h2>
@@ -31,7 +36,6 @@
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>

components/landing/Hero.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col p-6 relative md:flex-row">
+  <div class="flex flex-col p-6 relative">
-    <div class="my-16 max-w-2xl z-10 relative">
+    <div class="flex flex-col mt-16 items-center justify-center">
       <h2
         class="
-          font-semibold
+          font-extrabold
-          text-accent
+          text-accent text-center
           leading-none
           tracking-tighter
           text-4xl
@@ -14,20 +14,32 @@
       >
         Open Source
       </h2>
-      <h3 class="my-4 text-secondaryDark text-3xl md:text-4xl lg:text-5xl">
+      <h3
+        class="
+          font-extrabold
+          my-4
+          text-center text-secondaryDark
+          leading-none
+          tracking-tighter
+          text-3xl
+          md:text-4xl
+          lg:text-5xl
+        "
+      >
         API Development Ecosystem
       </h3>
-      <p class="my-4 text-lg">
+      <p class="my-4 text-lg text-center max-w-2xl">
         Thousands of developers and companies build, ship, and maintain their
         APIs on Hoppscotch — the transparent and most flexible API development
         ecosystem in the world.
       </p>
-      <div class="flex space-x-4 my-8 items-center">
+      <div class="flex space-x-4 my-8 justify-center items-center">
         <ButtonPrimary
           label="Get Started"
           icon="arrow_forward"
           rounded
           reverse
+          large
           @click.native="showLogin = true"
         />
         <ButtonSecondary
@@ -41,9 +53,9 @@
           :shortcut="['30k Stars']"
         />
       </div>
-      <LandingStats />
+      <!-- <LandingStats /> -->
     </div>
-    <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"></div>
+    <div class="flex flex-col items-center justify-center"></div>
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -47,7 +47,7 @@
         :lang="'html'"
         :options="{
           maxLines: Infinity,
-          minLines: '16',
+          minLines: 16,
           fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
@@ -102,13 +102,7 @@ export default {
       }, 1000)
     },
     copyResponse() {
-      const aux = document.createElement("textarea")
+      this.$clipboard(this.responseBodyText)
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",

components/lenses/renderers/JSONLensRenderer.vue

@@ -41,7 +41,7 @@
         :provide-j-s-o-n-outline="true"
         :options="{
           maxLines: Infinity,
-          minLines: '16',
+          minLines: 16,
           fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
@@ -113,13 +113,7 @@ export default {
       }, 1000)
     },
     copyResponse() {
-      const aux = document.createElement("textarea")
+      this.$clipboard(this.responseBodyText)
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",

components/lenses/renderers/RawLensRenderer.vue

@@ -40,7 +40,7 @@
         :lang="'plain_text'"
         :options="{
           maxLines: Infinity,
-          minLines: '16',
+          minLines: 16,
           fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
@@ -104,13 +104,7 @@ export default {
       }, 1000)
     },
     copyResponse() {
-      const aux = document.createElement("textarea")
+      this.$clipboard(this.responseBodyText)
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",

components/lenses/renderers/XMLLensRenderer.vue

@@ -40,7 +40,7 @@
         :lang="'xml'"
         :options="{
           maxLines: Infinity,
-          minLines: '16',
+          minLines: 16,
           fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
@@ -95,13 +95,7 @@ export default {
       }, 1000)
     },
     copyResponse() {
-      const aux = document.createElement("textarea")
+      this.$clipboard(this.responseBodyText)
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",

nuxt.config.js

@@ -94,6 +94,7 @@ export default {
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   plugins: [
     "~/plugins/v-tippy",
+    "~/plugins/v-clipboard",
     "~/plugins/vuex-persist",
     "~/plugins/vue-rx",
     "~/plugins/vue-apollo",

package-lock.json

@@ -34,6 +34,7 @@
         "socketio-wildcard": "^2.0.0",
         "splitpanes": "^2.3.8",
         "tern": "^0.24.3",
+        "v-clipboard": "^2.2.3",
         "vue-apollo": "^3.0.7",
         "vue-cli-plugin-apollo": "^0.22.2",
         "vue-functional-data-merge": "^3.1.0",
@@ -28822,6 +28823,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v-clipboard": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.3.tgz",
+      "integrity": "sha512-Wg+ObZoYK6McHb5OOCFWvm0R7xHp0/p0G1ocx/8bO22jvA/yVY05rADbfiztwCokXBNfQuGv/XSd1ozcTFgekw=="
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -55442,6 +55448,11 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
+    "v-clipboard": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.3.tgz",
+      "integrity": "sha512-Wg+ObZoYK6McHb5OOCFWvm0R7xHp0/p0G1ocx/8bO22jvA/yVY05rADbfiztwCokXBNfQuGv/XSd1ozcTFgekw=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

package.json

@@ -50,6 +50,7 @@
     "socketio-wildcard": "^2.0.0",
     "splitpanes": "^2.3.8",
     "tern": "^0.24.3",
+    "v-clipboard": "^2.2.3",
     "vue-apollo": "^3.0.7",
     "vue-cli-plugin-apollo": "^0.22.2",
     "vue-functional-data-merge": "^3.1.0",

pages/documentation.vue

@@ -41,8 +41,8 @@
                   :lang="'json'"
                   :lint="false"
                   :options="{
-                    maxLines: '16',
+                    maxLines: 16,
-                    minLines: '8',
+                    minLines: 8,
                     fontSize: '12px',
                     autoScrollEditorIntoView: true,
                     showPrintMargin: false,

pages/graphql.vue

@@ -75,7 +75,7 @@
                         v-tippy="{ theme: 'tooltip' }"
                         :title="`${$t(
                           'prettify_query'
-                        )} (${getSpecialKey()}-P)`"
+                        )} <kbd>${getSpecialKey()}</kbd><kbd>P</kbd>`"
                         :icon="prettifyQueryIcon"
                         @click.native="prettifyQuery"
                       />
@@ -94,7 +94,7 @@
                     :on-run-g-q-l-query="runQuery"
                     :options="{
                       maxLines: Infinity,
-                      minLines: '16',
+                      minLines: 16,
                       fontSize: '12px',
                       autoScrollEditorIntoView: true,
                       showPrintMargin: false,
@@ -146,7 +146,7 @@
                     :lang="'json'"
                     :options="{
                       maxLines: Infinity,
-                      minLines: '16',
+                      minLines: 16,
                       fontSize: '12px',
                       autoScrollEditorIntoView: true,
                       showPrintMargin: false,
@@ -333,7 +333,7 @@
                 :lint="false"
                 :options="{
                   maxLines: Infinity,
-                  minLines: '16',
+                  minLines: 16,
                   fontSize: '12px',
                   autoScrollEditorIntoView: true,
                   readOnly: true,
@@ -541,7 +541,7 @@
                   :lang="'graphqlschema'"
                   :options="{
                     maxLines: Infinity,
-                    minLines: '16',
+                    minLines: 16,
                     fontSize: '12px',
                     autoScrollEditorIntoView: true,
                     readOnly: true,
@@ -879,12 +879,7 @@ export default defineComponent({
       setTimeout(() => (this.copyVariablesIcon = "content_copy"), 1000)
     },
     copyToClipboard(content) {
-      const aux = document.createElement("textarea")
+      this.$clipboard(content)
-      aux.innerText = content
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })

plugins/v-clipboard.js

@@ -0,0 +1,4 @@
+import Vue from "vue"
+import Clipboard from "v-clipboard"
+
+Vue.use(Clipboard)

vue-shim.d.ts

@@ -1,4 +1,5 @@
+import Vue from "vue"
+
 declare module "*.vue" {
-  import Vue from "vue"
   export default Vue
 }