@scalar/api-client 0.2.0 → 0.3.0

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

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import { useApiClientRequestStore } from '../../../stores/apiClientRequestStore'
+import RequestAuth from './RequestAuth.vue'
+import RequestBody from './RequestBody.vue'
+import RequestHeaders from './RequestHeaders.vue'
+import RequestQuery from './RequestQuery.vue'
+import RequestVariables from './RequestVariables.vue'
+
+const { activeRequest, readOnly } = useApiClientRequestStore()
+</script>
+<template>
+  <div class="scalar-api-client__main__left custom-scroll">
+    <div class="scalar-api-client__main__content">
+      <label>Request</label>
+      <div class="meta">
+        <div class="meta-item meta-item__input">
+          <input
+            v-model="activeRequest.name"
+            class="scalar-api-client__request-name"
+            :disabled="readOnly"
+            placeholder="Request Name"
+            type="text" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <RequestAuth />
+      <RequestVariables :paths="activeRequest.parameters" />
+      <RequestQuery :queries="activeRequest.query" />
+      <RequestHeaders :headers="activeRequest.headers" />
+      <RequestBody
+        :body="activeRequest.body"
+        :formData="activeRequest.formData"
+        :requestBody="activeRequest.body" />
+      <div class="scalar-api-client__main__scroll-container" />
+    </div>
+  </div>
+</template>
+<style>
+.scalar-api-client__main__left {
+  width: 50%;
+  border-right: 1px solid var(--theme-border-color);
+  padding: 0 0 12px 12px;
+}
+@media screen and (max-width: 820px) {
+  .scalar-api-client__main__left {
+    width: 100%;
+    border-right: none;
+  }
+}
+.scalar-api-client__item__content {
+  flex-flow: wrap;
+  padding: 0 12px 12px;
+  border-radius: 3px;
+  color: var(--theme-color-disabled);
+  font-size: 12px;
+  margin-top: -3px;
+  justify-content: space-between;
+}
+.scalar-api-client__item__content .cm-s-default {
+  border: 1px solid var(--theme-border-color);
+  border-radius: var(--theme-radius-lg);
+}
+.scalar-api-client__item__content .scalar-api-client__item__content--code {
+  width: 100%;
+  max-height: calc(100vh - 200px);
+  overflow: auto;
+}
+.scalar-api-client__item__content .cm-scroller {
+  border: 1px solid var(--theme-border-color);
+  border-radius: 3px;
+}
+.scalar-api-client__item__content .cm-editor {
+  outline: none !important;
+}
+.scalar-api-client__item__content .cm-editor .cm-gutters {
+  background: transparent;
+}
+.scalar-api-client__item__content .cm-scroll {
+  background: transparent;
+}
+.scalar-api-client__item__content .cm-editor * {
+  font-size: 11px;
+}
+.scalar-api-client__item__content .cm-editor .cm-line {
+  color: var(--theme-color-1);
+}
+.scalar-api-client__item__content-button {
+  width: 100%;
+  appearance: none;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  background: var(--scalar-api-client-color) !important;
+  text-align: center;
+  font-weight: var(--theme-bold);
+  padding: 12px;
+  text-transform: uppercase;
+  border-radius: var(--theme-radius-lg);
+  color: white;
+  cursor: pointer;
+}
+.scalar-api-client__item__content__split {
+  justify-content: space-between;
+}
+.scalar-collapsible-section-flex {
+  width: 100%;
+}
+.input {
+  background: var(--theme-background-2);
+  border: 1px solid var(--theme-border-color);
+  border-radius: 3px;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  margin-bottom: 6px;
+}
+.input__half {
+  width: calc(50% - 3px);
+}
+.input:focus-within {
+  background: var(--theme-background-3);
+}
+.input label,
+.input input {
+  padding: 12px;
+  border: 0;
+  outline: none;
+  font-size: 12px;
+  color: var(--theme-color-1);
+  width: 100%;
+  background: transparent;
+  appearance: none;
+  -webkit-appearance: none;
+  left: 0;
+}
+.input label {
+  position: absolute;
+  color: var(--theme-color-2);
+}
+.input input {
+  opacity: 0;
+  position: relative;
+  z-index: 99;
+  padding: 18px 12px 6px 12px;
+}
+.input input:not(:placeholder-shown),
+.input:focus-within input {
+  opacity: 1;
+}
+.input input:not(:placeholder-shown) + label,
+.input:focus-within label {
+  font-size: 10px;
+  top: -6px;
+  color: var(--theme-color-1);
+}
+.input input:not(:placeholder-shown) + label {
+  color: var(--theme-color-2);
+}
+.select {
+  background: --theme-background-1;
+  border-radius: var(--theme-radius-lg);
+  font-size: 12px;
+  border: 1px solid var(--theme-border-color);
+  width: 100%;
+  position: relative;
+  margin-bottom: 6px;
+}
+.select:focus-within {
+  background: var(--theme-background-3);
+}
+.select:hover {
+  background: var(--theme-background-3);
+}
+.select svg {
+  position: absolute;
+  right: 12px;
+  pointer-events: none;
+  color: var(--theme-color-2);
+  width: 6px;
+  top: 10px;
+}
+.select label {
+  display: block;
+  font-size: 10px;
+  color: var(--theme-color-2);
+  position: absolute;
+  left: 12px;
+  top: 6px;
+}
+.select select {
+  background: transparent;
+  outline: none;
+  border: none;
+  -webkit-appearance: none;
+  font-size: 12px;
+  color: var(--theme-color-1);
+  appearance: none;
+  width: 100%;
+  padding: 18px 12px 6px 12px;
+  top: 0;
+  position: relative;
+  cursor: pointer;
+}
+
+.check {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+  align-items: center;
+  font-size: 12px;
+  border: 1px solid var(--theme-border-color);
+  border-radius: 3px;
+  padding: 10px 12px;
+  user-select: none;
+  width: 100%;
+}
+.check p {
+  color: var(--theme-color-2);
+}
+.check input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  height: 15px;
+  width: 15px;
+  background: var(--theme-background-3);
+  margin-right: 10px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.check input:checked ~ p {
+  color: var(--theme-color-1);
+}
+.check .checkmark:after {
+  content: '';
+  display: none;
+  width: 5px;
+  height: 8px;
+  border: solid var(--theme-color-disabled);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translate3d(0, -1px, 0);
+}
+.check input:checked ~ .checkmark:after {
+  display: block;
+}
+.scalar-api-client__main__scroll-container {
+  height: calc(100vh - 320px);
+}
+.scalar-api-client__request-name {
+  outline: none;
+  border: none;
+  appearance: none;
+  -webkit-appearance: none;
+  color: var(--theme-color-disabled);
+  border-radius: var(--theme-radius-lg);
+  font-size: var(--theme-mini);
+  font-weight: var(--theme-bold);
+  width: 100%;
+  background: transparent;
+}
+</style>

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

@@ -0,0 +1,221 @@
+<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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useApiClientRequestStore } from '../../../stores/apiClientRequestStore'
+import { CodeMirror } from '../../CodeMirror'
+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="true"
+      @change="updateActiveRequest" />
+  </CollapsibleSection>
+</template>

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

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,25 @@
+<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

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