@scalar/api-client 0.5.0 → 0.5.2

package/src/components/ApiClient/Request/RequestAuth.vue

@@ -1,221 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import { useApiClientRequestStore } from '../../../stores/apiClientRequestStore'
-import { CollapsibleSection } from '../../CollapsibleSection'
-
-const store = useApiClientRequestStore()
-
-const { authState } = store
-
-const show = ref(true)
-
-const authTypeFriendlyString: { [key: string]: string } = {
-  basic: 'Basic Auth',
-  digest: 'Digest Auth',
-  oauthOne: 'OAuth 1.0',
-  oauthTwo: 'OAuth 2.0',
-  bearer: 'Bearer Token',
-  none: 'None',
-}
-
-const authDropdownItems = [
-  {
-    text: 'Basic Auth',
-    type: 'basic',
-  },
-  {
-    text: 'OAuth 2.0',
-    type: 'oauthTwo',
-  },
-  {
-    text: 'Bearer Token',
-    type: 'bearer',
-  },
-  {
-    text: 'None',
-    type: 'none',
-  },
-]
-</script>
-<template>
-  <CollapsibleSection title="Authentication">
-    <template #options>
-      <div>
-        <span>
-          {{ authTypeFriendlyString[authState.type] }}
-          <svg
-            height="18"
-            viewBox="0 0 10 18"
-            width="10"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M5 2.83L8.17 6l1.41-1.41L5 0 .41 4.59 1.83 6 5 2.83zm0 12.34L1.83 12 .42 13.41 5 18l4.59-4.59L8.17 12 5 15.17z"
-              fill="currentColor"
-              fill-rule="nonzero" />
-          </svg>
-        </span>
-        <select
-          v-show="show"
-          v-model="authState.type"
-          @click.prevent>
-          <option
-            v-for="option in authDropdownItems"
-            :key="option.type"
-            :value="option.type">
-            {{ option.text }}
-          </option>
-        </select>
-      </div>
-    </template>
-
-    <template v-if="authState.type === 'none'">
-      <div class="scalar-api-client__empty-state">No Authentication</div>
-    </template>
-    <template v-else>
-      <template v-if="authState.type === 'basic'">
-        <div class="input input__half">
-          <input
-            v-model="authState.basic.userName"
-            autocomplete="off"
-            placeholder="Username"
-            spellcheck="false"
-            type="text" />
-          <label for="Username">Username</label>
-        </div>
-        <div class="input input__half">
-          <input
-            v-model="authState.basic.password"
-            autocomplete="off"
-            placeholder="Username"
-            spellcheck="false"
-            type="password" />
-          <label for="Password">Password</label>
-        </div>
-        <label class="check">
-          <input
-            v-model="authState.basic.active"
-            type="checkbox" />
-          <span class="checkmark" />
-          <p>Enabled</p>
-        </label>
-      </template>
-      <template v-else-if="authState.type === 'digest'">
-        <div class="input input__half">
-          <input
-            v-model="authState.digest.userName"
-            autocomplete="off"
-            placeholder="Username"
-            spellcheck="false"
-            type="text" />
-          <label for="Username">Username</label>
-        </div>
-        <div class="input input__half">
-          <input
-            v-model="authState.digest.password"
-            autocomplete="off"
-            placeholder="Password"
-            spellcheck="false"
-            type="password" />
-          <label for="Password">Password</label>
-        </div>
-        <label class="check">
-          <input
-            v-model="authState.digest.active"
-            type="checkbox" />
-          <span class="checkmark" />
-          <p>Enabled</p>
-        </label>
-      </template>
-      <template v-else-if="authState.type === 'oauthTwo'">
-        <div class="input">
-          <input
-            v-model="authState.oauthTwo.generatedToken"
-            autocomplete="off"
-            placeholder="Generated Token"
-            spellcheck="false"
-            type="text" />
-          <label for="Consumer Key">Generated Token</label>
-        </div>
-        <div class="input">
-          <input
-            v-model="authState.oauthTwo.discoveryURL"
-            autocomplete="off"
-            placeholder="Discovery URL"
-            spellcheck="false"
-            type="text" />
-          <label for="Consumer Key">OIDC Discovery URL</label>
-        </div>
-        <div class="input">
-          <input
-            v-model="authState.oauthTwo.authURL"
-            autocomplete="off"
-            placeholder="Auth URL"
-            spellcheck="false"
-            type="text" />
-          <label for="Consumer Key">Auth URL</label>
-        </div>
-        <div class="input">
-          <input
-            v-model="authState.oauthTwo.accessTokenURL"
-            autocomplete="off"
-            placeholder="Access Token URL"
-            spellcheck="false"
-            type="text" />
-          <label for="Consumer Key">Access Token URL</label>
-        </div>
-        <div class="input input__half">
-          <input
-            v-model="authState.oauthTwo.clientID"
-            autocomplete="off"
-            placeholder="Client ID"
-            spellcheck="false"
-            type="text" />
-          <label for="Consumer Key">Client ID</label>
-        </div>
-        <div class="input input__half">
-          <input
-            v-model="authState.oauthTwo.clientSecret"
-            autocomplete="off"
-            placeholder="Client Secret"
-            spellcheck="false"
-            type="text" />
-          <label for="Consumer Key">Client Secret</label>
-        </div>
-        <div class="input">
-          <input
-            v-model="authState.oauthTwo.scope"
-            autocomplete="off"
-            placeholder="Scope"
-            spellcheck="false"
-            type="text" />
-          <label for="Consumer Key">Scope</label>
-        </div>
-        <!--  @click="generateOauthTwoToken" -->
-        <button
-          class="scalar-api-client__item__content-button"
-          type="button">
-          Generate Token
-        </button>
-      </template>
-      <template v-else-if="authState.type === 'bearer'">
-        <div class="input">
-          <input
-            v-model="authState.bearer.token"
-            autocomplete="off"
-            placeholder="Username"
-            spellcheck="false"
-            type="text" />
-          <label for="Username">Token</label>
-        </div>
-        <label class="check">
-          <input
-            v-model="authState.bearer.active"
-            type="checkbox" />
-          <span class="checkmark" />
-          <p>Enabled</p>
-        </label>
-      </template>
-    </template>
-  </CollapsibleSection>
-</template>

package/src/components/ApiClient/Request/RequestBody.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { CodeMirror } from '@scalar/use-codemirror'
-
-import { useApiClientRequestStore } from '../../../stores/apiClientRequestStore'
-import { CollapsibleSection } from '../../CollapsibleSection'
-import { Grid } from '../../Grid'
-
-defineProps<{
-  body?: string
-  formData?: any[]
-}>()
-
-const { activeRequest, setActiveRequest } = useApiClientRequestStore()
-
-const updateActiveRequest = (value: string) => {
-  if (activeRequest.body !== value) {
-    setActiveRequest({
-      ...activeRequest,
-      body: value,
-    })
-  }
-}
-</script>
-<template>
-  <CollapsibleSection title="Body">
-    <template
-      v-if="body && body.length === 0 && formData && formData.length === 0">
-      <span>No Body</span>
-    </template>
-    <template v-else-if="formData && formData.length > 0">
-      <Grid :items="formData" />
-    </template>
-    <CodeMirror
-      v-else
-      :content="activeRequest.body"
-      :languages="['json']"
-      lineNumbers
-      @change="updateActiveRequest" />
-  </CollapsibleSection>
-</template>

package/src/components/ApiClient/Request/RequestHeaders.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleSection } from '../../CollapsibleSection'
-import { Grid } from '../../Grid'
-
-defineProps<{ headers: any[] }>()
-</script>
-<template>
-  <CollapsibleSection title="Headers">
-    <template v-if="headers.length === 0">
-      <div class="scalar-api-client__empty-state">No Headers</div>
-    </template>
-    <template v-else>
-      <Grid :items="headers" />
-      <!-- @addAnother="addQuery"
-          @deleteItem="deleteQuery"
-          @toggleDescription="toggleDescription"
-          @toggleVisibility="(key, value) => updateQuery(key, 'active', value)"
-          @updateDescription="(key, value) => updateQuery(key, 'description', value)"
-          @updateKey="(key, value) => updateQuery(key, 'key', value)"
-          @updateOrder="updateQueryOrder"
-          @updateValue="(key, value) => updateQuery(key, 'value', value)" -->
-    </template>
-  </CollapsibleSection>
-</template>

package/src/components/ApiClient/Request/RequestQuery.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { Query } from '../../../types'
-import { CollapsibleSection } from '../../CollapsibleSection'
-import { Grid } from '../../Grid'
-
-defineProps<{ queries: Query[] }>()
-</script>
-<template>
-  <CollapsibleSection title="Query Parameters">
-    <template v-if="queries.length === 0">
-      <div class="scalar-api-client__empty-state">No Query Parameters</div>
-    </template>
-    <template v-else>
-      <Grid :items="queries" />
-      <!-- @addAnother="addQuery"
-          @deleteItem="deleteQuery"
-          @toggleDescription="toggleDescription"
-          @toggleVisibility="(key, value) => updateQuery(key, 'active', value)"
-          @updateDescription="(key, value) => updateQuery(key, 'description', value)"
-          @updateKey="(key, value) => updateQuery(key, 'key', value)"
-          @updateOrder="updateQueryOrder"
-          @updateValue="(key, value) => updateQuery(key, 'value', value)" -->
-    </template>
-  </CollapsibleSection>
-</template>

package/src/components/ApiClient/Request/RequestVariables.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { BaseParameter } from '../../../types'
-import { CollapsibleSection } from '../../CollapsibleSection'
-import { Grid } from '../../Grid'
-
-defineProps<{ paths: BaseParameter[] }>()
-</script>
-<template>
-  <CollapsibleSection title="Variables">
-    <template v-if="paths.length === 0">
-      <div class="scalar-api-client__empty-state">No variables</div>
-    </template>
-    <template v-else>
-      <Grid :items="paths" />
-      <!-- @addAnother="addQuery"
-          @deleteItem="deleteQuery"
-          @toggleDescription="toggleDescription"
-          @toggleVisibility="(key, value) => updateQuery(key, 'active', value)"
-          @updateDescription="(key, value) => updateQuery(key, 'description', value)"
-          @updateKey="(key, value) => updateQuery(key, 'key', value)"
-          @updateOrder="updateQueryOrder"
-          @updateValue="(key, value) => updateQuery(key, 'value', value)" -->
-    </template>
-  </CollapsibleSection>
-</template>

package/src/components/ApiClient/Request/index.ts

@@ -1 +0,0 @@
-export { default as Request } from './Request.vue'

package/src/components/ApiClient/RequestHistory.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import { useApiClientRequestStore } from '../../stores/apiClientRequestStore'
-import RequestHistoryItem from './RequestHistoryItem.vue'
-
-defineEmits<{
-  (e: 'toggle'): void
-}>()
-
-const { requestHistoryOrder } = useApiClientRequestStore()
-</script>
-<template>
-  <div class="navigation-content-item">
-    <div class="navtable">
-      <div class="navtable-table">
-        <div class="navtable-item navtable-item__top">
-          <div class="navtable-item-40">
-            <label for="">Request</label>
-          </div>
-          <div class="navtable-item-40">
-            <label for="">Response</label>
-          </div>
-          <div class="navtable-item-20">
-            <label for="">TIME</label>
-          </div>
-        </div>
-        <div class="navtable-radios">
-          <RequestHistoryItem
-            v-for="history in requestHistoryOrder"
-            :key="history"
-            :history="history" />
-        </div>
-        <div class="navtable-mock">
-          <div class="navtable-item">
-            <div class="navtable-item-40" />
-            <div class="navtable-item-40" />
-            <div class="navtable-item-20" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.navtable-mock {
-  background-repeat: repeat;
-  width: 100%;
-  background-image: linear-gradient(
-    0deg,
-    var(--theme-border-color) 1px,
-    --theme-background-1 1px
-  );
-  background-size: 31px 31px;
-  background-position: center 1px;
-  flex: 1;
-  position: relative;
-}
-.navtable-mock .navtable-item {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background: transparent;
-  border-top: none;
-}
-
-.radio {
-  height: 16px;
-  width: 16px;
-  background: transparent;
-  border: var(--border);
-  flex-shrink: 0;
-  margin-right: 6px;
-  margin-left: 4px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-}
-.radio:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-.navtable-item__active .radio:after {
-  content: '';
-  width: 5px;
-  height: 8px;
-  border: solid white;
-  border-width: 0 1.5px 1.5px 0;
-  transform: rotate(45deg) translate3d(-0.5px, -1px, 0);
-}
-.radio.post {
-  background: var(--theme-post-color);
-}
-.radio.delete {
-  background: var(--theme-delete-color);
-}
-.radio.patch {
-  background: var(--theme-patch-color);
-}
-.radio.get {
-  background: var(--theme-get-color);
-}
-.radio.put {
-  background: var(--theme-put-color);
-}
-</style>

package/src/components/ApiClient/RequestHistoryItem.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import TimeAgo from 'javascript-time-ago'
-import en from 'javascript-time-ago/locale/en'
-import prettyBytes from 'pretty-bytes'
-import prettyMilliseconds from 'pretty-ms'
-
-import { useApiClientRequestStore } from '../../stores/apiClientRequestStore'
-import { type ClientResponse } from '../../types'
-
-defineProps<{ history: string }>()
-TimeAgo.addLocale(en)
-const timeAgo = new TimeAgo('en-US')
-
-const { requestHistory, activeRequestId, setActiveResponse } =
-  useApiClientRequestStore()
-
-const getContentLength = (response: ClientResponse) => {
-  if (response?.headers?.['X-API-Client-Content-Length']) {
-    return prettyBytes(
-      parseFloat(response.headers['X-API-Client-Content-Length']),
-    )
-  }
-  return prettyBytes(0)
-}
-</script>
-<template>
-  <div
-    class="navtable-item"
-    :class="{ 'navtable-item__active': activeRequestId === history }"
-    @click="setActiveResponse(history)">
-    <div class="navtable-item-40 navtable-item-request">
-      <button
-        class="radio"
-        :class="requestHistory[history].request.type.toLowerCase()"
-        type="button" />
-      <span>
-        <em>{{ requestHistory[history].request.type }}</em>
-        {{ requestHistory[history].request.url }}
-      </span>
-    </div>
-    <div class="navtable-item-40 navtable-item-response">
-      <span>{{
-        prettyMilliseconds(requestHistory[history].response.duration)
-      }}</span>
-      <span
-        :class="`scalar-api-client__status--${String(
-          requestHistory[history].response.statusCode,
-        ).charAt(0)}xx`">
-        {{ requestHistory[history].response.statusCode }}
-      </span>
-      <span>{{ getContentLength(requestHistory[history].response) }}</span>
-    </div>
-    <div class="navtable-item-20 navtable-item-time">
-      <span>
-        {{ timeAgo.format(requestHistory[history].sentTime) }}
-      </span>
-    </div>
-  </div>
-</template>