@scalar/api-client 0.2.0 → 0.3.0

package/src/components/ApiClient/AddressBar.vue

@@ -0,0 +1,462 @@
+<script setup lang="ts">
+import { useKeyboardEvent } from '@scalar/use-keyboard-event'
+import { useMediaQuery } from '@vueuse/core'
+import TimeAgo from 'javascript-time-ago'
+import en from 'javascript-time-ago/locale/en'
+import { computed, ref } from 'vue'
+
+import { sendRequest } from '../../helpers/sendRequest'
+import { useApiClientRequestStore } from '../../stores/apiClientRequestStore'
+import { CodeMirror } from '../CodeMirror'
+import FlowModal, { useModalState } from '../FlowModal.vue'
+import RequestHistory from './RequestHistory.vue'
+
+const props = defineProps<{
+  proxyUrl: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'onSend'): void
+}>()
+
+TimeAgo.addLocale(en)
+const timeAgo = new TimeAgo('en-US')
+
+const showHistory = ref(false)
+const loading = ref(false)
+
+const {
+  activeRequest,
+  addRequestToHistory,
+  requestHistory,
+  requestHistoryOrder,
+  readOnly,
+  setActiveRequest,
+} = useApiClientRequestStore()
+
+const historyModal = useModalState()
+
+// https://petstore3.swagger.io/api/v3
+const url = computed(() => activeRequest.url)
+// GET, POST …
+const requestType = computed(() => activeRequest.type)
+// /pet/{petId}
+const requestPath = computed(() => activeRequest.path)
+// true|false
+const isSmallScreen = useMediaQuery('(max-width: 820px)')
+
+// https://petstore3.swagger.io/api/v3/pet/{petId} -> /api/v3/pet/{petId}
+function getShortUrl(longURL: string): string {
+  try {
+    const urlObject = new URL(longURL)
+    const { pathname } = urlObject
+
+    return pathname
+  } catch {
+    return longURL
+  }
+}
+
+const formattedUrl = computed(() => {
+  const fullUrl = `${url.value}${requestPath.value}`
+
+  return isSmallScreen.value ? `...${getShortUrl(fullUrl)}` : fullUrl
+})
+
+async function send() {
+  loading.value = true
+  emits('onSend')
+  const result = await sendRequest(activeRequest, props.proxyUrl)
+
+  if (result) {
+    addRequestToHistory(result)
+  }
+  loading.value = false
+}
+
+const lastRequestTimestamp = computed(() => {
+  const lastRequestKey = requestHistoryOrder.value[0]
+  return requestHistory[lastRequestKey]
+    ? timeAgo.format(requestHistory[lastRequestKey].sentTime)
+    : 'History'
+})
+
+useKeyboardEvent({
+  keyList: ['enter'],
+  withCtrlCmd: true,
+  handler: send,
+})
+
+const onChange = (value: string) => {
+  if (activeRequest.url + activeRequest.path === value) {
+    return
+  }
+
+  setActiveRequest({ ...activeRequest, url: value })
+}
+</script>
+
+<template>
+  <div
+    class="scalar-api-client__address-bar"
+    :class="{ 'scalar-api-client__address-bar__on': showHistory }">
+    <div class="scalar-api-client__url-form">
+      <div class="scalar-api-client__field">
+        <div class="scalar-api-client__request-type">
+          <i :class="requestType.toLowerCase()" />
+          <span>{{ requestType }}</span>
+        </div>
+        <CodeMirror
+          class="scalar-api-client__url-input"
+          :content="formattedUrl"
+          :disableEnter="true"
+          :readOnly="readOnly"
+          :withVariables="true"
+          :withoutTheme="true"
+          @change="onChange" />
+      </div>
+      <button
+        class="scalar-api-client__send-request-button"
+        :class="[
+          { 'scalar-api-client__send-request-button--loading': loading },
+        ]"
+        type="submit"
+        @click="send">
+        <svg
+          fill="none"
+          height="48"
+          viewBox="0 0 14 14"
+          width="48"
+          xmlns="http://www.w3.org/2000/svg">
+          <g id="send-email--mail-send-email-paper-airplane">
+            <path
+              id="Subtract"
+              clip-rule="evenodd"
+              d="M11.8215 0.0977331C12.1097 -0.0075178 12.422 -0.0287134 12.7219 0.0367172C13.0248 0.102803 13.3024 0.254481 13.5216 0.473719C13.7409 0.692957 13.8926 0.970537 13.9586 1.27346C14.0241 1.57338 14.0029 1.88566 13.8976 2.17389L10.3236 12.8859L10.3234 12.8866C10.2363 13.15 10.083 13.3867 9.87813 13.5739C9.67383 13.7606 9.42512 13.8917 9.15575 13.9549C8.88633 14.0206 8.60444 14.015 8.33777 13.9388C8.07134 13.8627 7.82929 13.7187 7.63532 13.5209L5.71798 11.6123L3.70392 12.6538C3.54687 12.735 3.3586 12.7272 3.20877 12.6333C3.05895 12.5395 2.96984 12.3734 2.97443 12.1967L3.057 9.01294L10.102 3.89553C10.3812 3.69267 10.4432 3.30182 10.2403 3.02255C10.0375 2.74327 9.64662 2.68133 9.36734 2.88419L2.20286 8.0884L0.473156 6.35869L0.473098 6.35864L0.472971 6.35851C0.285648 6.17132 0.147746 5.94054 0.0716498 5.68688C-0.00390565 5.43503 -0.016181 5.16847 0.0358684 4.91079C0.087985 4.62928 0.213827 4.36658 0.400607 4.14951C0.588668 3.93095 0.831681 3.76658 1.10453 3.67339L1.1079 3.67224L1.1079 3.67225L11.8215 0.0977331Z"
+              fill="currentColor"
+              fill-rule="evenodd"></path>
+          </g>
+        </svg>
+        <span>Send Request</span>
+      </button>
+    </div>
+    <div
+      class="scalar-api-client__address-bar__close"
+      @click="showHistory = false" />
+    <div class="scalar-api-client__address-bar__content">
+      <FlowModal
+        :state="historyModal"
+        title="Request History"
+        variant="large">
+        <RequestHistory
+          :showHistory="showHistory"
+          @toggle="showHistory = !showHistory" />
+      </FlowModal>
+    </div>
+
+    <div
+      v-if="requestHistoryOrder.length"
+      class="scalar-api-client__history">
+      <div
+        class="scalar-api-client__history-toggle"
+        @click="historyModal.show()">
+        <svg
+          fill="none"
+          height="48"
+          viewBox="0 0 14 14"
+          width="48"
+          xmlns="http://www.w3.org/2000/svg">
+          <g id="rewind-clock--back-return-clock-timer-countdown">
+            <path
+              id="Vector 1561 (Stroke)"
+              clip-rule="evenodd"
+              d="M6.99999 2.75C7.4142 2.75 7.74999 3.08579 7.74999 3.5V7.5C7.74999 7.76345 7.61177 8.00758 7.38586 8.14312L4.88586 9.64312C4.53068 9.85623 4.06998 9.74106 3.85687 9.38587C3.64376 9.03069 3.75893 8.56999 4.11412 8.35688L6.24999 7.07536V3.5C6.24999 3.08579 6.58578 2.75 6.99999 2.75Z"
+              fill="currentColor"
+              fill-rule="evenodd"></path>
+            <path
+              id="Union"
+              clip-rule="evenodd"
+              d="M12.5 7C12.5 3.96243 10.0376 1.5 7 1.5C5.24916 1.5 3.68853 2.31796 2.68066 3.59456L3.64645 4.56034C3.96143 4.87533 3.73835 5.4139 3.29289 5.4139H0.5C0.223857 5.4139 0 5.19004 0 4.9139V2.121C0 1.67555 0.53857 1.45247 0.853553 1.76745L1.61439 2.52829C2.89781 0.984301 4.83356 0 7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.68902 14 0.916591 11.702 0.187329 8.61473C0.0921059 8.21161 0.341704 7.80762 0.744824 7.7124C1.14794 7.61717 1.55193 7.86677 1.64715 8.26989C2.22013 10.6955 4.40025 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7Z"
+              fill="currentColor"
+              fill-rule="evenodd"></path>
+          </g>
+        </svg>
+        <span>{{ lastRequestTimestamp }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<style>
+.scalar-api-client__address-bar {
+  width: 100%;
+  padding: 12px 12px 10px 12px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  background: var(--theme-background-1);
+}
+.scalar-api-client__url-form {
+  display: flex;
+  width: 100%;
+  align-items: stretch;
+  border-radius: var(--theme-radius-lg);
+}
+.scalar-api-client__field {
+  border: 1px solid var(--theme-border-color);
+  border-right: 0;
+  border-radius: var(--theme-radius-lg) 0 0 var(--theme-radius-lg);
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+}
+.scalar-api-client__address-bar-data {
+  width: 100%;
+}
+.scalar-api-client__address-bar-data-meta {
+  display: flex;
+  margin-top: 5px;
+}
+.scalar-api-client__request-type {
+  display: flex;
+  align-items: center;
+  background: var(--theme-background-2);
+  color: var(--theme-color-disabled);
+  appearance: none;
+  -webkit-appearance: none;
+  padding: 0 12px;
+  border-right: 1px solid var(--theme-border-color);
+  border-radius: var(--theme-radius-lg) 0 0 var(--theme-radius-lg);
+  position: relative;
+}
+.scalar-api-client__request-type span {
+  font-family: var(--theme-font-code);
+  font-size: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+.scalar-api-client__request-type svg {
+  margin-left: 6px;
+  width: 8px;
+}
+.scalar-api-client__request-type i {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-right: 6px;
+  text-align: center;
+  line-height: 18px;
+  font-style: normal;
+  flex-shrink: 0;
+  display: inline-block;
+  color: var(--theme-color-disabled);
+  background: var(--scalar-api-client-color);
+}
+.meta-request-break {
+  margin: 0 5px;
+}
+.scalar-api-client__history {
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  color: var(--theme-color-2);
+  display: flex;
+  align-items: center;
+  border-radius: var(--theme-radius-lg);
+  height: 100%;
+}
+.scalar-api-client__send-request-button[type='submit'] {
+  font-size: var(--theme-mini);
+  letter-spacing: 0.25px;
+  line-height: 30px;
+  font-weight: var(--theme-semibold);
+  color: white;
+  border: none;
+  white-space: nowrap;
+  padding: 0 10px;
+  text-transform: uppercase;
+  cursor: pointer;
+  outline: none;
+  border-radius: 0 var(--theme-radius-lg) var(--theme-radius-lg) 0;
+  background: var(--scalar-api-client-color);
+  /**  #087f5b */
+  display: flex;
+  align-items: center;
+}
+.scalar-api-client__send-request-button svg {
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
+}
+.scalar-api-client__send-request-button--loading {
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 127px;
+}
+.scalar-api-client__send-request-button--loading svg {
+  display: none;
+}
+.scalar-api-client__send-request-button--loading:before {
+  content: '';
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid white;
+  animation: urlloader 0.45s linear infinite;
+  background: transparent;
+  width: 14px;
+  height: 14px;
+  margin-left: 0;
+  margin-right: 9px;
+  border-radius: 50%;
+}
+.scalar-api-client__send-request-button--loading:after {
+  content: 'Loading';
+  font-size: 12px;
+}
+@keyframes urlloader {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+.scalar-api-client__history-toggle {
+  padding: 0 9px;
+  line-height: 30px;
+  color: var(--theme-color-disabled);
+  font-size: var(--theme-mini);
+  letter-spacing: 0.125px;
+  font-weight: var(--theme-semibold);
+  text-transform: uppercase;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  white-space: nowrap;
+  border: 1px solid var(--theme-border-color);
+  margin-left: 12px;
+  border-radius: var(--theme-radius-lg);
+}
+.scalar-api-client__history-toggle:hover {
+  background: var(--theme-background-2);
+}
+.scalar-api-client__history-toggle svg {
+  height: 13px;
+  width: 13px;
+  margin-right: 6px;
+  color: var(--theme-color-disabled);
+}
+.scalar-api-client__address-bar-close {
+  fill: var(--theme-color-disabled);
+  margin-left: 12px;
+  height: 24px;
+}
+.scalar-api-client__address-bar-close:hover {
+  cursor: pointer;
+  fill: var(--theme-color-1);
+}
+.scalar-api-client__address-bar__content {
+  width: 640px;
+  height: 100%;
+  background: var(--theme-background-1);
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1000;
+  transform: translate3d(640px, 0, 0);
+  opacity: 0;
+  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1),
+    opacity 0.01s ease-in-out 0.5s;
+  pointer-events: none;
+}
+.scalar-api-client__address-bar-content-item {
+  height: 100vh;
+  max-height: 100vh;
+  overflow: auto;
+}
+.scalar-api-client__address-bar__on {
+  z-index: 100000;
+}
+.scalar-api-client__address-bar__on .scalar-api-client__address-bar__content {
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+  pointer-events: all;
+  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.scalar-api-client__address-bar__on .scalar-api-client__address-bar__close {
+  opacity: 1;
+  pointer-events: all;
+  cursor: pointer;
+}
+.scalar-api-client__address-bar .navtable-item__active {
+  background: var(--theme-background-2);
+  cursor: default;
+}
+.scalar-api-client__address-bar .navtable-item__active .radio:before {
+  display: none;
+}
+.navigation-back {
+  stroke: var(--theme-color-2);
+  cursor: pointer;
+}
+.navigation-back:hover {
+  stroke: var(--theme-color-1);
+}
+.scalar-api-client__address-bar__close {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  /* background: rgba(0,0,0,.55);
+	 */
+  pointer-events: none;
+  opacity: 0;
+  transition: all 0.1s ease-in-out;
+  z-index: 1000;
+}
+.navtable-item-request span {
+  padding: 8px 9px 8px 0;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  color: var(--theme-color-1);
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.navtable-item-request span em {
+  text-transform: uppercase;
+  font-style: normal;
+  font-family: var(--theme-font-code);
+  font-size: 11px;
+  margin-right: 6px;
+  font-weight: var(--theme-bold);
+  color: var(--theme-color-disabled);
+}
+.navtable-item-time {
+  font-size: 12px;
+  color: var(--theme-color-1);
+  text-transform: capitalize;
+  padding: 0 9px;
+}
+@media screen and (max-width: 720px) {
+  .scalar-api-client__history-toggle span,
+  .scalar-api-client__send-request-button span {
+    display: none;
+  }
+  .scalar-api-client__history-toggle svg,
+  .scalar-api-client__send-request-button svg {
+    margin-right: 0;
+  }
+  .scalar-api-client__history-toggle,
+  .scalar-api-client__send-request-button {
+    height: 31.5px;
+    width: 31.5px;
+  }
+}
+</style>
+../../../../use-keyboard-event/src

package/src/components/ApiClient/ApiClient.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
+import { useKeyboardEvent } from '@scalar/use-keyboard-event'
+import { useMediaQuery } from '@vueuse/core'
+import { ref } from 'vue'
+
+import { useApiClientRequestStore } from '../../stores'
+import AdressBar from './AddressBar.vue'
+import { Request } from './Request'
+import { Response } from './Response'
+
+defineProps<{
+  proxyUrl: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'escapeKeyPress'): void
+}>()
+
+const { activeRequest } = useApiClientRequestStore()
+
+const isSmallScreen = useMediaQuery('(max-width: 820px)')
+
+const selectedTab = ref(0)
+
+const Tabs = {
+  Request: 0,
+  Response: 1,
+}
+
+function changeTab(index: number) {
+  selectedTab.value = index
+}
+
+useKeyboardEvent({
+  keyList: ['escape'],
+  handler: () => emit('escapeKeyPress'),
+})
+</script>
+
+<template>
+  <div
+    class="scalar-api-client"
+    :class="`scalar-api-client--${activeRequest.type.toLowerCase() || 'get'}`"
+    @keydown.esc="emit('escapeKeyPress')">
+    <AdressBar
+      :proxyUrl="proxyUrl"
+      @onSend="changeTab(Tabs.Response)" />
+    <div class="scalar-api-client__main">
+      <!-- Desktop-->
+      <template v-if="!isSmallScreen">
+        <Request />
+        <Response />
+      </template>
+      <!-- Mobile-->
+      <template v-else>
+        <TabGroup
+          :selectedIndex="selectedTab"
+          @change="changeTab">
+          <TabList class="scalar-api-client__mobile-navigation">
+            <Tab
+              v-slot="{ selected }"
+              class="scalar-api-client__mobile-navigation__toggle">
+              <button
+                :class="{
+                  'scalar-api-client__mobile-navigation--active': selected,
+                }"
+                type="button">
+                Request
+              </button>
+            </Tab>
+            <Tab
+              v-slot="{ selected }"
+              class="scalar-api-client__mobile-navigation__toggle">
+              <button
+                :class="{
+                  'scalar-api-client__mobile-navigation--active': selected,
+                }"
+                type="button">
+                Response
+              </button>
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <Request />
+            </TabPanel>
+            <TabPanel>
+              <Response />
+            </TabPanel>
+          </TabPanels>
+        </TabGroup>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style src="../../../../theme/theme.css"></style>
+
+<style>
+.scalar-api-client {
+  background: var(--theme-background-1);
+  position: relative;
+  height: 100%;
+  overflow: hidden !important;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--theme-font);
+}
+@media screen and (max-width: 1000px) {
+  .scalar-api-client {
+    width: 100%;
+  }
+}
+.scalar-api-client pre {
+  font-family: var(--theme-font-code);
+}
+
+.scalar-api-client--post {
+  --scalar-api-client-color: var(--theme-post-color);
+  --scalar-api-client-background: var(--theme-post-background);
+}
+
+.scalar-api-client--delete {
+  --scalar-api-client-color: var(--theme-delete-color);
+  --scalar-api-client-background: var(--theme-delete-background);
+}
+
+.scalar-api-client--patch {
+  --scalar-api-client-color: var(--theme-patch-color);
+  --scalar-api-client-background: var(--theme-patch-background);
+}
+
+.scalar-api-client--get {
+  --scalar-api-client-color: var(--theme-get-color);
+  --scalar-api-client-background: var(--theme-get-background);
+}
+
+.scalar-api-client--put {
+  --scalar-api-client-color: var(--theme-put-color);
+  --scalar-api-client-background: var(--theme-put-background);
+}
+
+.scalar-api-client__mobile-navigation {
+  padding: 12px 12px 0 12px;
+  display: flex;
+  font-size: var(--theme-small);
+  color: var(--theme-color-2);
+  font-weight: var(--theme-bold);
+}
+
+.scalar-api-client__mobile-navigation__toggle {
+  appearance: none;
+  margin-right: 9px;
+  cursor: pointer;
+}
+
+.scalar-api-client__mobile-navigation--active {
+  color: var(--theme-color-1);
+}
+
+.scalar-api-client__mobile-navigation--active:hover {
+  cursor: pointer;
+}
+
+.scalar-api-client__main {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  background: var(--theme-background-1);
+  border-top: 1px solid var(--theme-border-color);
+}
+
+@media screen and (max-width: 820px) {
+  .scalar-api-client__main {
+    display: block;
+  }
+}
+
+/** TODO: Consider to make a Column component */
+.scalar-api-client__main__content {
+  padding: 12px;
+  background: var(--theme-background-1);
+  top: 0;
+  position: sticky;
+  z-index: 100;
+}
+.scalar-api-client__main__content label {
+  font-size: var(--theme-small);
+  color: var(--theme-color-1);
+  font-weight: var(--theme-bold);
+  display: flex;
+  align-items: center;
+}
+@media screen and (max-width: 820px) {
+  .scalar-api-client__main__content {
+    padding: 0 0 12px 0;
+  }
+
+  .scalar-api-client__main__content label {
+    display: none;
+  }
+}
+
+.meta {
+  display: flex;
+  font-size: var(--theme-font-size-2);
+  font-weight: var(--theme-font-size-2);
+  color: var(--scalar-api-client-color2);
+}
+
+.meta-item svg {
+  fill: var(--theme-color-ghost);
+  height: 14px;
+  width: 14px;
+  margin-right: 6px;
+}
+
+.meta-item {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+  white-space: nowrap;
+  font-weight: var(--theme-bold);
+  font-size: 12px;
+  color: var(--theme-color-disabled);
+  padding: 3px 0;
+}
+
+.meta-item__input {
+  padding: 3px 0;
+  background: transparent;
+  width: 100%;
+  margin-right: 0;
+}
+
+.types {
+  margin: auto;
+  width: 580px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: wrap;
+}
+
+.types-heading {
+  width: 100%;
+  text-align: center;
+}
+
+.types-heading b {
+  font-size: 42px;
+}
+.types-heading p {
+  margin-bottom: 20px;
+  margin-top: 12px;
+  font-size: 24px;
+}
+.scalar-api-client__empty-state {
+  border: 1px dashed var(--theme-border-color);
+  width: 100%;
+  text-align: center;
+  font-size: var(--theme-small);
+  padding: 20px;
+}
+</style>