refactor: monorepo+pnpm (removed husky)

packages/hoppscotch-app/components/docs/Request.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="request">
+    <h4 class="heading">
+      <SmartIcon name="file" class="svg-icons" />
+      {{ request.name || $t("state.none") }}
+    </h4>
+    <p v-if="request.url" class="doc-desc">
+      <span>
+        {{ $t("request.url") }}:
+        <code>{{ request.url || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.path" class="doc-desc">
+      <span>
+        {{ $t("request.path") }}:
+        <code>{{ request.path || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.method" class="doc-desc">
+      <span>
+        {{ $t("request.method") }}:
+        <code>{{ request.method || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.auth" class="doc-desc">
+      <span>
+        {{ $t("request.authorization") }}:
+        <code>{{ request.auth.authType || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.httpUser" class="doc-desc">
+      <span>
+        {{ $t("authorization.username") }}:
+        <code>{{ request.httpUser || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.httpPassword" class="doc-desc">
+      <span>
+        {{ $t("authorization.password") }}:
+        <code>{{ request.httpPassword || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.bearerToken" class="doc-desc">
+      <span>
+        {{ $t("authorization.token") }}:
+        <code>{{ request.bearerToken || $t("state.none") }}</code>
+      </span>
+    </p>
+    <h4 v-if="request.headers" class="heading">{{ $t("tab.headers") }}</h4>
+    <span v-if="request.headers">
+      <p
+        v-for="(header, index) in request.headers"
+        :key="`header-${index}`"
+        class="doc-desc"
+      >
+        <span>
+          {{ header.key || $t("state.none") }}:
+          <code>{{ header.value || $t("state.none") }}</code>
+        </span>
+      </p>
+    </span>
+    <h4 v-if="request.params" class="heading">
+      {{ $t("request.parameters") }}
+    </h4>
+    <span v-if="request.params">
+      <p
+        v-for="(parameter, index) in request.params"
+        :key="`parameter-${index}`"
+        class="doc-desc"
+      >
+        <span>
+          {{ parameter.key || $t("state.none") }}:
+          <code>{{ parameter.value || $t("state.none") }}</code>
+        </span>
+      </p>
+    </span>
+    <h4 v-if="request.bodyParams" class="heading">
+      {{ $t("request.payload") }}
+    </h4>
+    <span v-if="request.bodyParams">
+      <p
+        v-for="(payload, index) in request.bodyParams"
+        :key="`payload-${index}`"
+        class="doc-desc"
+      >
+        <span>
+          {{ payload.key || $t("state.none") }}:
+          <code>{{ payload.value || $t("state.none") }}</code>
+        </span>
+      </p>
+    </span>
+    <p v-if="request.rawParams" class="doc-desc">
+      <span>
+        {{ $t("request.parameters") }}:
+        <code>{{ request.rawParams || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.contentType" class="doc-desc">
+      <span>
+        {{ $t("request.content_type") }}:
+        <code>{{ request.contentType || $t("state.none") }}</code>
+      </span>
+    </p>
+    <p v-if="request.requestType" class="doc-desc">
+      <span>
+        {{ $t("request.type") }}:
+        <code>{{ request.requestType || $t("state.none") }}</code>
+      </span>
+    </p>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    request: { type: Object, default: () => {} },
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.request {
+  @apply flex flex-col flex-1;
+  @apply justify-center;
+  @apply p-4;
+  @apply mt-4;
+  @apply border border-divider;
+  @apply rounded;
+
+  h4 {
+    @apply mt-4;
+  }
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+
+.doc-desc {
+  @apply flex flex-col flex-1;
+  @apply justify-center;
+  @apply p-4;
+  @apply m-0;
+  @apply text-secondaryLight;
+  @apply border-b border-divider;
+
+  &:last-child {
+    @apply border-b-0;
+  }
+
+  .material-icons {
+    @apply mr-4;
+  }
+}
+</style>