@scalar/api-reference 0.5.1 → 0.5.3

package/src/components/Content/ReferenceEndpoint/ExampleRequest.vue

@@ -1,331 +0,0 @@
-<script setup lang="ts">
-import {
-  generateRequest,
-  useApiClientRequestStore,
-  useApiClientStore,
-  useOperation,
-} from '@scalar/api-client'
-import { useClipboard } from '@scalar/use-clipboard'
-import { CodeMirror } from '@scalar/use-codemirror'
-import {
-  HTTPSnippet,
-  type HarRequest,
-  type TargetId,
-  availableTargets,
-} from 'httpsnippet-lite'
-import { computed, onMounted, ref, watch } from 'vue'
-
-import {
-  generateAxiosCodeFromRequest,
-  generateLaravelCodeFromRequest,
-} from '../../../helpers'
-import { useTemplateStore } from '../../../stores/template'
-import type { Operation, Server } from '../../../types'
-import { Card, CardContent, CardFooter, CardHeader } from '../../Card'
-import { Icon } from '../../Icon'
-
-const props = defineProps<{ operation: Operation; server: Server }>()
-
-const CodeMirrorValue = ref<string>('')
-
-const { copyToClipboard } = useClipboard()
-
-const { setActiveRequest } = useApiClientRequestStore()
-
-const { toggleApiClient } = useApiClientStore()
-
-const {
-  state: templateState,
-  getLanguageTitleByKey,
-  setItem,
-} = useTemplateStore()
-
-const CodeMirrorLanguages = computed(() => {
-  return [templateState.preferredLanguage]
-})
-
-const { parameterMap } = useOperation(props)
-
-async function generateSnippet() {
-  let path = props.operation.path
-
-  // Replace all variables of the format {something} with the uppercase variable name without the brackets
-  const pathVariables = path.match(/{(.*?)}/g)
-
-  if (pathVariables) {
-    pathVariables.forEach((variable) => {
-      const variableName = variable.replace(/{|}/g, '')
-      path = path.replace(variable, `__${variableName.toUpperCase()}__`)
-    })
-  }
-
-  let url = props.server.url
-
-  // Replace all variables of the format {something} with the uppercase variable name without the brackets
-  const urlVariables = url.match(/{{(.*?)}}/g)
-
-  if (urlVariables) {
-    console.log(urlVariables)
-    urlVariables.forEach((variable) => {
-      const variableName = variable.replace(/{|}/g, '')
-      url = url.replace(variable, `__${variableName}__`)
-    })
-  }
-
-  if (templateState.preferredLanguage === 'axios') {
-    return generateAxiosCodeFromRequest({
-      method: props.operation.httpVerb.toUpperCase(),
-      url: `${url}${path}`,
-    })
-  } else if (templateState.preferredLanguage === 'laravel') {
-    return generateLaravelCodeFromRequest({
-      method: props.operation.httpVerb.toUpperCase(),
-      url: `${url}${path}`,
-    })
-  }
-
-  try {
-    const snippet = new HTTPSnippet({
-      method: props.operation.httpVerb.toUpperCase(),
-      url: `${url}${path}`,
-    } as HarRequest)
-    const output = (await snippet.convert(
-      templateState.preferredLanguage as TargetId,
-    )) as string
-    return output
-  } catch {
-    const snippet = new HTTPSnippet({
-      method: props.operation.httpVerb.toUpperCase(),
-      url: `${window.location.origin}${path}`,
-    } as HarRequest)
-    const output = (await snippet.convert(
-      templateState.preferredLanguage as TargetId,
-    )) as string
-
-    return output
-  }
-}
-
-onMounted(async () => {
-  const initialSnippet = await generateSnippet()
-  CodeMirrorValue.value = initialSnippet
-  watch(
-    () => templateState.preferredLanguage,
-    async () => {
-      const output = await generateSnippet()
-      CodeMirrorValue.value = output
-    },
-  )
-})
-
-const copyExampleRequest = async () => {
-  copyToClipboard(CodeMirrorValue.value)
-}
-
-function showItemInClient() {
-  const item = generateRequest(
-    props.operation,
-    parameterMap.value,
-    props.server,
-  )
-  setActiveRequest(item)
-  toggleApiClient()
-}
-
-// Store selected languages in LocalStorage
-const localStorageKey = 'preferredLanguage'
-const selectLanguage = (language: TargetId) => {
-  setItem('preferredLanguage', language)
-  localStorage.setItem(localStorageKey, language)
-}
-
-const availableLanguages = computed(() => {
-  return [
-    ...availableTargets().filter((target) => target.key !== 'http'),
-    { key: 'axios', title: 'JavaScript (Axios)' },
-    { key: 'laravel', title: 'PHP (Laravel)' },
-  ].sort((a, b) => a.title.localeCompare(b.title))
-})
-</script>
-<template>
-  <Card class="dark-mode">
-    <CardHeader muted>
-      <span :class="`request-method request-method--${operation.httpVerb}`">
-        {{ operation.httpVerb }}
-      </span>
-      <span class="request-path">{{ operation.path }}</span>
-
-      <template #actions>
-        <div class="language-select">
-          <span>{{
-            getLanguageTitleByKey(templateState.preferredLanguage)
-          }}</span>
-          <select
-            class="language-select"
-            :value="templateState.preferredLanguage"
-            @input="event => selectLanguage((event.target as HTMLSelectElement).value as TargetId)">
-            <option
-              v-for="lang in availableLanguages"
-              :key="lang.key"
-              :value="lang.key">
-              {{ lang.title }}
-            </option>
-          </select>
-        </div>
-
-        <button
-          class="copy-button"
-          type="button"
-          @click="copyExampleRequest">
-          <Icon
-            src="solid/interface-copy-clipboard"
-            width="10px" />
-        </button>
-      </template>
-    </CardHeader>
-    <CardContent
-      borderless
-      frameless>
-      <!-- @vue-ignore -->
-      <CodeMirror
-        :content="CodeMirrorValue"
-        :forceDarkMode="true"
-        :languages="CodeMirrorLanguages"
-        lineNumbers
-        readOnly />
-    </CardContent>
-    <CardFooter muted>
-      <button
-        class="show-api-client-button"
-        type="button"
-        @click="showItemInClient">
-        <Icon src="solid/mail-send-email-paper-airplane" />
-        Test {{ operation.httpVerb }} Request in Client
-      </button>
-    </CardFooter>
-  </Card>
-</template>
-<style scoped>
-.request-method--post {
-  color: var(--theme-post-color);
-}
-.request-method--patch {
-  color: var(--theme-patch-color);
-}
-.request-method--get {
-  color: var(--theme-get-color);
-}
-.request-method--delete {
-  color: var(--theme-delete-color);
-}
-.request-method--put {
-  color: var(--theme-put-color);
-}
-.request-path {
-  margin-left: 6px;
-  color: var(--theme-color-2);
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: default;
-  text-overflow: ellipsis;
-  text-transform: none !important;
-}
-
-.language-select {
-  position: relative;
-  padding-right: 9px;
-  border-right: 1px solid var(--theme-border-color);
-}
-.language-select select {
-  border: none;
-  outline: none;
-  cursor: pointer;
-  background: var(--theme-background-3);
-  box-shadow: -2px 0 0 0 var(--theme-background-3);
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  appearance: none;
-}
-.language-select span {
-  font-size: 12px;
-  color: var(--theme-color-3);
-  font-weight: var(--theme-semibold);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.language-select span:after {
-  content: '';
-  width: 7px;
-  height: 7px;
-  transform: rotate(45deg) translate3d(-2px, -2px, 0);
-  display: block;
-  margin-left: 6px;
-  box-shadow: 1px 1px 0 currentColor;
-}
-.language-select span:hover {
-  background: var(--theme-background-2);
-}
-
-.copy-button {
-  appearance: none;
-  -webkit-appearance: none;
-  outline: none;
-  background: transparent;
-  display: flex;
-  cursor: pointer;
-  color: var(--theme-color-3);
-  margin-left: 6px;
-  border: none;
-  border-radius: 3px;
-}
-
-.copy-button:hover {
-  color: var(--theme-color-1);
-}
-
-.copy-button svg {
-  width: 13px;
-  height: 13px;
-}
-
-.show-api-client-button {
-  width: 100%;
-  display: block;
-  appearance: none;
-  outline: none;
-  border: none;
-  border-radius: var(--theme-radius-lg);
-  height: 35px;
-  display: flex;
-  justify-content: center;
-  cursor: pointer;
-  align-items: center;
-  font-weight: var(--theme-bold);
-  font-size: var(--theme-micro);
-  text-transform: uppercase;
-  border: 1px solid currentColor;
-  background: var(--theme-button-1);
-  color: var(--theme-button-1-color);
-}
-.show-api-client-button:hover {
-  background: var(--theme-button-1-hover);
-}
-.show-api-client-button svg {
-  height: 12px;
-  width: auto;
-  margin-right: 6px;
-}
-
-.request-method {
-  font-family: var(--theme-font-code);
-}
-.request-path {
-  font-family: var(--theme-font-code);
-}
-</style>

package/src/components/Content/ReferenceEndpoint/ExampleResponseTab.vue

@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import { httpStatusCodes } from '@scalar/api-client'
-import { useTooltip } from '@scalar/use-tooltip'
-import { computed } from 'vue'
-
-const props = defineProps<{ title: string }>()
-
-const statusText = computed(() => {
-  return httpStatusCodes[props.title]?.name ?? null
-})
-
-const tooltipRef = useTooltip({
-  content: statusText.value,
-})
-</script>
-<template>
-  <span
-    ref="tooltipRef"
-    class="codemenu-item-key">
-    {{ title }}
-  </span>
-</template>

package/src/components/Content/ReferenceEndpoint/ExampleResponses/ExampleResponses.vue

@@ -1,168 +0,0 @@
-<script lang="ts" setup>
-import { useClipboard } from '@scalar/use-clipboard'
-import { CodeMirror } from '@scalar/use-codemirror'
-import { computed, ref } from 'vue'
-
-import type { TransformedOperation } from '../../../../types'
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardTab,
-  CardTabHeader,
-} from '../../../Card'
-import { Icon } from '../../../Icon'
-import Headers from './Headers.vue'
-import SelectExample from './SelectExample.vue'
-
-const props = defineProps<{ operation: TransformedOperation }>()
-
-const { copyToClipboard } = useClipboard()
-
-// Bring the status codes in the right order.
-const orderedStatusCodes = computed(() => {
-  return Object.keys(props?.operation?.responses ?? {}).sort((x) => {
-    if (x === 'default') {
-      return -1
-    }
-
-    return 0
-  })
-})
-
-// Keep track of the current selected tab
-const selectedResponseIndex = ref<number>(0)
-
-// Return the whole response object
-const currentResponse = computed(() => {
-  const currentStatusCode =
-    orderedStatusCodes.value[selectedResponseIndex.value]
-
-  return props.operation.responses?.[currentStatusCode]
-})
-
-const currentResponseExamples = computed(() => {
-  const examples =
-    currentResponse.value?.content?.['application/json']?.examples
-
-  if (examples) {
-    return JSON.parse(examples)
-  }
-
-  return false
-})
-
-const currentResponseExample = computed(() => {
-  return currentResponse.value?.content?.['application/json']?.example
-})
-
-const changeTab = (index: number) => {
-  selectedResponseIndex.value = index
-}
-</script>
-<template>
-  <Card v-if="orderedStatusCodes.length">
-    <CardTabHeader
-      muted
-      @change="changeTab">
-      <CardTab
-        v-for="statusCode in orderedStatusCodes"
-        :key="statusCode">
-        {{ statusCode }}
-      </CardTab>
-
-      <template #actions>
-        <button
-          v-if="currentResponseExample"
-          class="code-copy"
-          type="button"
-          @click="() => copyToClipboard(currentResponseExample)">
-          <Icon
-            src="solid/interface-copy-clipboard"
-            width="10px" />
-        </button>
-      </template>
-    </CardTabHeader>
-    <CardContent
-      v-if="currentResponse.headers"
-      muted>
-      <Headers :headers="currentResponse.headers" />
-    </CardContent>
-    <CardContent muted>
-      <template v-if="currentResponseExamples">
-        <SelectExample :examples="currentResponseExamples" />
-      </template>
-      <template v-else>
-        <CodeMirror
-          v-show="currentResponseExample"
-          :content="currentResponseExample"
-          :languages="['json']"
-          readOnly />
-        <div
-          v-if="!currentResponseExample"
-          class="scalar-api-reference__empty-state">
-          No Body
-        </div>
-      </template>
-    </CardContent>
-    <CardFooter
-      v-if="currentResponse?.description"
-      muted>
-      <div class="description">
-        {{ currentResponse.description }}
-      </div>
-    </CardFooter>
-  </Card>
-</template>
-
-<style scoped>
-.code-copy {
-  display: flex;
-  appearance: none;
-  -webkit-appearance: none;
-  outline: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--theme-color-3);
-  border: none;
-}
-.code-copy:hover {
-  color: var(--theme-color-1);
-}
-.code-copy svg {
-  width: 13px;
-  height: 13px;
-}
-.description {
-  font-weight: var(--theme-semibold);
-  font-size: var(--theme-micro);
-}
-.scalar-api-reference__empty-state {
-  border: 1px dashed var(--theme-border-color);
-  width: 100%;
-  text-align: center;
-  font-size: var(--theme-micro);
-  padding: 20px;
-  color: var(--theme-color-2);
-}
-
-.schema-type {
-  font-size: var(--theme-micro);
-  color: var(--theme-color-2);
-  font-weight: var(--theme-semibold);
-  background: var(--theme-background-3);
-  padding: 2px 4px;
-  border-radius: 4px;
-  margin-right: 4px;
-}
-.schema-example {
-  font-size: var(--theme-micro);
-  color: var(--theme-color-2);
-  font-weight: var(--theme-semibold);
-}
-
-.example-response-tab {
-  display: block;
-  margin: 6px;
-}
-</style>

package/src/components/Content/ReferenceEndpoint/ExampleResponses/Headers.vue

@@ -1,83 +0,0 @@
-<script lang="ts" setup>
-import { type HttpHeader, httpHeaders } from '@scalar/api-client'
-import { computed } from 'vue'
-
-import { mapFromObject } from '../../../../helpers'
-import type { ExampleResponseHeaders } from '../../../../types'
-import {
-  SimpleCell,
-  SimpleHeader,
-  SimpleRow,
-  SimpleTable,
-} from '../../../SimpleTable'
-
-const props = defineProps<{
-  headers: ExampleResponseHeaders
-}>()
-
-const getDocumentationUrlForHttpHeader = (headerName: string) => {
-  return httpHeaders.find((header: HttpHeader) => {
-    return header.name.toLowerCase() === headerName.toLowerCase()
-  })?.url
-}
-
-// Make the first letter and all letters after a - uppercase
-const formatHeaderName = (headerName: string) => {
-  return headerName
-    .split('-')
-    .map((word) => {
-      return word.charAt(0).toUpperCase() + word.slice(1)
-    })
-    .join('-')
-}
-
-const headersHaveDescription = computed(() => {
-  const headers = mapFromObject(props.headers)
-
-  return headers.some((header: any) => {
-    return header.value.description
-  })
-})
-
-const headersHaveSchema = computed(() => {
-  const headers = mapFromObject(props.headers)
-
-  return headers.some((header: any) => {
-    return header.value.schema
-  })
-})
-</script>
-
-<template>
-  <SimpleTable>
-    <SimpleRow>
-      <SimpleHeader>Header</SimpleHeader>
-      <SimpleHeader v-if="headersHaveDescription">Description</SimpleHeader>
-      <SimpleHeader v-if="headersHaveSchema">Value</SimpleHeader>
-    </SimpleRow>
-    <SimpleRow
-      v-for="(data, header) in headers"
-      :key="header">
-      <SimpleCell
-        :href="getDocumentationUrlForHttpHeader(header)"
-        :strong="true"
-        :wrap="false">
-        {{ formatHeaderName(header) }}
-      </SimpleCell>
-      <SimpleCell v-if="headersHaveDescription">{{ data }}</SimpleCell>
-      <SimpleCell v-if="headersHaveSchema">
-        <span v-if="data.schema.example">
-          <code class="schema-example">{{ data.schema.example }}</code>
-        </span>
-        <code
-          v-else-if="data.schema.type"
-          class="schema-type">
-          {{ data.schema.type }}
-        </code>
-        <code v-else>
-          {{ data.schema }}
-        </code>
-      </SimpleCell>
-    </SimpleRow>
-  </SimpleTable>
-</template>