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

2021-07-27 18:17:41 +05:30
parent 37ad8e08fc
commit 78fccc8583
21 changed files with 120 additions and 129 deletions
--- a/components/app/Header.vue
+++ b/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" />
--- a/components/app/Logo.vue
+++ b/components/app/Logo.vue
@@ -1,19 +1,7 @@
 <template>
-  <svg
-    class="fill-current logo"
-    xmlns="http://www.w3.org/2000/svg"
-    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 class="logo" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+    <circle class="fill-current" r="8" cx="50%" cy="50%" />
+    <circle class="fill-primary" r="6" cx="50%" cy="50%" />
  </svg>
 </template>

--- a/components/button/Secondary.vue
+++ b/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,
--- a/components/http/CodegenModal.vue
+++ b/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',
-            minLines: '8',
+            maxLines: 16,
+            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
-
-      editor.editor.selectAll()
-      editor.editor.focus()
-
-      document.execCommand("copy")
+      this.$clipboard(this.requestCode)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard").toString(), {
        icon: "done",
      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
    },
  },
 })
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -27,8 +27,8 @@
    <SmartJsEditor
      v-model="preRequestScript"
      :options="{
-        maxLines: '16',
-        minLines: '8',
+        maxLines: 16,
+        minLines: 8,
        fontSize: '12px',
        autoScrollEditorIntoView: true,
        showPrintMargin: false,
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -53,8 +53,8 @@
        v-model="rawParamsBody"
        :lang="rawInputEditorLang"
        :options="{
-          maxLines: '16',
-          minLines: '8',
+          maxLines: 16,
+          minLines: 8,
          fontSize: '12px',
          autoScrollEditorIntoView: true,
          showPrintMargin: false,
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -276,12 +276,7 @@ export default defineComponent({
          .then(() => {})
          .catch(() => {})
      } else {
-        const dummy = document.createElement("input")
-        document.body.appendChild(dummy)
-        dummy.value = window.location.href
-        dummy.select()
-        document.execCommand("copy")
-        document.body.removeChild(dummy)
+        this.$clipboard(window.location.href)
        this.$toast.info(this.$t("copied_to_clipboard"), {
          icon: "done",
        })
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -27,8 +27,8 @@
    <SmartJsEditor
      v-model="testScript"
      :options="{
-        maxLines: '16',
-        minLines: '8',
+        maxLines: 16,
+        minLines: 8,
        fontSize: '12px',
        autoScrollEditorIntoView: true,
        showPrintMargin: false,
--- a/components/landing/CTA.vue
+++ b/components/landing/CTA.vue
@@ -1,34 +1,38 @@
 <template>
-  <div class="bg-primaryLight rounded flex p-4">
-    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <div
-        v-for="(cta, index) in ctas"
-        :key="`cta-${index}`"
-        class="flex-col p-8 inline-flex"
-      >
-        <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
-        <div class="flex-grow">
-          <h2
-            class="
-              font-semibold
-              mt-4
-              text-lg text-secondaryDark
-              mb-2
-              transition
-            "
-          >
-            {{ cta.title }}
-          </h2>
-          <p>
-            {{ cta.description }}
-          </p>
-          <p class="mt-2">
-            <SmartLink :to="cta.link.target" class="link" blank>
-              {{ cta.link.title }}
-              <i class="material-icons">chevron_right</i>
-            </SmartLink>
-          </p>
-        </div>
+  <div
+    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}`"
+      class="flex-col p-8 inline-flex"
+    >
+      <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
+      <div class="flex-grow">
+        <h2
+          class="font-semibold mt-4 text-lg text-secondaryDark mb-2 transition"
+        >
+          {{ cta.title }}
+        </h2>
+        <p>
+          {{ cta.description }}
+        </p>
+        <p class="mt-2">
+          <SmartLink :to="cta.link.target" class="link" blank>
+            {{ cta.link.title }}
+            <i class="material-icons">chevron_right</i>
+          </SmartLink>
+        </p>
      </div>
    </div>
  </div>
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col p-6 relative md:flex-row">
-    <div class="my-16 max-w-2xl z-10 relative">
+  <div class="flex flex-col p-6 relative">
+    <div class="flex flex-col mt-16 items-center justify-center">
      <h2
        class="
-          font-semibold
-          text-accent
+          font-extrabold
+          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>
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/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")
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(this.responseBodyText)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/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")
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(this.responseBodyText)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/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")
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(this.responseBodyText)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/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")
-      const copy = this.responseBodyText
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(this.responseBodyText)
      this.copyIcon = "done"
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",
--- a/nuxt.config.js
+++ b/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",
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -41,8 +41,8 @@
                  :lang="'json'"
                  :lint="false"
                  :options="{
-                    maxLines: '16',
-                    minLines: '8',
+                    maxLines: 16,
+                    minLines: 8,
                    fontSize: '12px',
                    autoScrollEditorIntoView: true,
                    showPrintMargin: false,
--- a/pages/graphql.vue
+++ b/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")
-      aux.innerText = content
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
+      this.$clipboard(content)
      this.$toast.success(this.$t("copied_to_clipboard"), {
        icon: "done",
      })
--- a/plugins/v-clipboard.js
+++ b/plugins/v-clipboard.js
@@ -0,0 +1,4 @@
+import Vue from "vue"
+import Clipboard from "v-clipboard"
+
+Vue.use(Clipboard)
--- a/vue-shim.d.ts
+++ b/vue-shim.d.ts
@@ -1,4 +1,5 @@
+import Vue from "vue"
+
 declare module "*.vue" {
-  import Vue from "vue"
  export default Vue
 }