@scalar/api-reference 0.5.0 → 0.5.2

package/src/components/Card/Card.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="card">
-    <slot />
-  </div>
-</template>
-<style scoped>
-.card {
-  border-radius: var(--theme-radius-lg);
-  overflow: hidden;
-  border: 1px solid var(--theme-border-color);
-}
-</style>

package/src/components/Card/CardContent.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    muted?: boolean
-    frameless?: boolean
-    borderless?: boolean
-  }>(),
-  {
-    muted: false,
-    frameless: false,
-    borderless: false,
-  },
-)
-</script>
-<template>
-  <div
-    :class="{
-      'card-content': true,
-      'card--muted': muted,
-      'card--frameless': frameless,
-      'card--borderless': borderless,
-    }">
-    <slot />
-  </div>
-</template>
-<style scoped>
-.card-content {
-  overflow: auto;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--theme-border-color);
-}
-
-.card-content:last-of-type,
-.card-content.card--borderless {
-  border-bottom: none;
-}
-
-.card--muted {
-  background: var(--theme-background-2);
-}
-
-.card--frameless {
-  padding: 0;
-}
-</style>

package/src/components/Card/CardFooter.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import CardContent from './CardContent.vue'
-</script>
-<template>
-  <CardContent>
-    <slot />
-  </CardContent>
-</template>
-<style scoped>
-.card-footer {
-  border-top: 1px solid var(--theme-border-color);
-}
-</style>

package/src/components/Card/CardHeader.vue

@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-import CardContent from './CardContent.vue'
-</script>
-<template>
-  <CardContent class="card-header">
-    <div class="card-header-slots">
-      <div class="card-header-slot card-header-title">
-        <slot />
-      </div>
-      <div class="card-header-slot card-header-actions">
-        <slot name="actions" />
-      </div>
-    </div>
-  </CardContent>
-</template>
-<style scoped>
-.card-header {
-  font-weight: var(--theme-semibold);
-  font-size: var(--theme-mini);
-  color: var(--theme-color-3);
-}
-
-.card-header-title {
-  text-transform: uppercase;
-}
-
-.card-header-slots {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card-header-actions {
-  display: flex;
-  align-items: center;
-}
-</style>

package/src/components/Card/CardTab.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { Tab } from '@headlessui/vue'
-</script>
-<template>
-  <Tab
-    v-slot="{ selected }"
-    as="template">
-    <button
-      :class="{ 'tab': true, 'tab-selected': selected }"
-      type="button">
-      <slot />
-    </button>
-  </Tab>
-</template>
-<style scoped>
-.tab {
-  background: none;
-  border: none;
-  font-size: var(--theme-micro);
-  font-family: var(--theme-font);
-  color: var(--theme-color-2);
-  font-weight: var(--theme-semibold);
-  line-height: calc(var(--theme-micro) + 2px);
-  cursor: pointer;
-}
-
-.tab-selected {
-  color: var(--theme-color-1);
-  text-decoration: underline;
-  text-underline-offset: var(--theme-micro);
-}
-</style>

package/src/components/Card/CardTabHeader.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { TabGroup, TabList } from '@headlessui/vue'
-
-import CardHeader from './CardHeader.vue'
-
-const emit = defineEmits<{
-  (e: 'change', index: number): void
-}>()
-
-const changeTab = (index: number) => {
-  emit('change', index)
-}
-</script>
-<template>
-  <CardHeader>
-    <TabGroup @change="changeTab">
-      <TabList class="tab-list">
-        <slot />
-      </TabList>
-    </TabGroup>
-    <template #actions>
-      <slot name="actions" />
-    </template>
-  </CardHeader>
-</template>
-<style scoped>
-.tab-list {
-  display: flex;
-  gap: 6px;
-  position: relative;
-}
-</style>

package/src/components/Card/index.ts

@@ -1,6 +0,0 @@
-export { default as Card } from './Card.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardFooter } from './CardFooter.vue'
-export { default as CardTabHeader } from './CardTabHeader.vue'
-export { default as CardTab } from './CardTab.vue'

package/src/components/Content/Content.vue

@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import { useResizeObserver } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
-
-import { useRefOnMount } from '../../hooks/useRefOnMount'
-import { useTemplateStore } from '../../stores/template'
-import type { Spec } from '../../types'
-import { FlowIcon } from '../Icon'
-import Introduction from './Introduction'
-import ReferenceEndpoint from './ReferenceEndpoint'
-import ReferenceTag from './ReferenceTag.vue'
-import Spinner from './Spinner.vue'
-
-const props = defineProps<{ ready: boolean; spec: Spec }>()
-
-const referenceEl = ref<HTMLElement | null>(null)
-
-const isNarrow = ref(true)
-
-useResizeObserver(
-  referenceEl,
-  (entries) => (isNarrow.value = entries[0].contentRect.width < 900),
-)
-
-const { state: templateState, setCollapsedSidebarItem } = useTemplateStore()
-
-onMounted(() => {
-  if (props.spec.tags.length > 0) {
-    setCollapsedSidebarItem(props.spec.tags[0].name, true)
-  }
-})
-
-const fallBackServer = useRefOnMount(() => {
-  return {
-    url: window.location.origin,
-  }
-})
-
-const localServers = computed(() => {
-  if (props.spec.servers && props.spec.servers.length > 0) {
-    return props.spec.servers
-  } else if (fallBackServer.value) {
-    return [fallBackServer.value]
-  } else {
-    return [{ url: '' }]
-  }
-})
-</script>
-<template>
-  <div
-    ref="referenceEl"
-    :class="{
-      'references-narrow': isNarrow,
-    }">
-    <template v-if="ready">
-      <Introduction
-        :info="spec.info"
-        :servers="localServers" />
-      <template
-        v-for="(tag, index) in spec.tags"
-        :key="tag.id">
-        <div class="reference">
-          <ReferenceTag
-            :index="index"
-            :tag="tag" />
-          <button
-            v-if="
-              index !== 0 &&
-              !templateState.collapsedSidebarItems[tag.name] &&
-              tag.operations?.length > 1
-            "
-            class="show-more"
-            type="button"
-            @click="setCollapsedSidebarItem(tag.name, true)">
-            Show More
-            <FlowIcon
-              class="show-more-icon"
-              icon="ChevronDown" />
-          </button>
-          <template
-            v-if="index === 0 || templateState.collapsedSidebarItems[tag.name]">
-            <ReferenceEndpoint
-              v-for="operation in tag.operations"
-              :key="operation.operationId"
-              :operation="operation"
-              :parentTag="tag"
-              :server="localServers[0]" />
-          </template>
-        </div>
-      </template>
-    </template>
-    <div
-      v-else
-      class="render-loading">
-      <Spinner />
-    </div>
-  </div>
-</template>
-<style scoped>
-.render-loading {
-  height: calc(
-    var(--scalar-api-reference-full-height) -
-      var(--scalar-api-reference-theme-header-height)
-  );
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.show-more {
-  background: var(--theme-background-1);
-  appearance: none;
-  border: none;
-  border: 1px solid var(--theme-border-color);
-  margin: auto;
-  padding: 8px 12px;
-  border-radius: 30px;
-  color: var(--theme-color-1);
-  font-weight: var(--theme-semibold);
-  font-size: var(--theme-small);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: -48px;
-  margin-bottom: 48px;
-  position: relative;
-}
-.show-more:hover {
-  color: var(--theme-color-2);
-  cursor: pointer;
-}
-.show-more-icon {
-  width: 14px;
-  height: 14px;
-  margin-left: 3px;
-}
-.show-more:active {
-  box-shadow: 0 0 0 1px var(--theme-border-color);
-}
-@media (max-width: 1165px) {
-  .show-more {
-    margin-top: -24px;
-    margin-bottom: 24px;
-  }
-}
-</style>

package/src/components/Content/Introduction/BaseUrl.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { useClipboard } from '@scalar/use-clipboard'
-
-defineProps<{
-  server?: {
-    url: string
-    description?: string
-  }
-}>()
-
-const { copyToClipboard } = useClipboard()
-</script>
-<template>
-  <template v-if="server">
-    <a
-      class="base-url"
-      :title="server.description"
-      @click="copyToClipboard(server.url)">
-      {{ server.url }}
-    </a>
-  </template>
-</template>
-<style scoped>
-.base-url {
-  color: var(--theme-color-2);
-  font-size: var(--theme-mini);
-  cursor: pointer;
-  display: flex;
-  font-family: var(--theme-font-code);
-  flex-direction: column;
-}
-</style>

package/src/components/Content/Introduction/Introduction.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { type TargetId } from 'httpsnippet-lite'
-import { computed } from 'vue'
-
-import { useTemplateStore } from '../../../stores/template'
-import type { Info, Server } from '../../../types'
-import { Card, CardContent, CardFooter, CardHeader } from '../../Card'
-import MarkdownRenderer from '../MarkdownRenderer.vue'
-import BaseUrl from './BaseUrl.vue'
-import LanguageSelector from './LanguageSelector.vue'
-
-defineProps<{
-  info: Info
-  servers: Server[]
-}>()
-
-const { state, getLanguageTitleByKey } = useTemplateStore()
-
-// TODO: Doesn’t work … why?
-// type TargetIdWithoutHttp = Exclude<TargetId, 'http'>
-type TargetIdWithoutHttp = TargetId
-
-const standardLibrary = computed(() => {
-  const standardLibraries: Record<
-    TargetIdWithoutHttp | 'axios' | 'laravel',
-    string
-  > = {
-    shell: 'Curl',
-    ruby: 'Net::HTTP',
-    node: 'HTTPS',
-    php: 'cURL',
-    python: 'http.client',
-    c: 'libcurl',
-    clojure: 'clj-http',
-    csharp: 'RestClient',
-    go: 'net/http',
-    java: 'Unirest',
-    javascript: 'XMLHttpRequest',
-    kotlin: 'OkHttp',
-    objc: 'NSURLSession',
-    ocaml: 'Cohttp',
-    powershell: 'Invoke-WebRequest',
-    r: 'httr',
-    swift: 'NSURLSession',
-    // TODO: Remove, but fix `TargetIdWithoutHttp` first
-    http: '',
-    laravel: '',
-    axios: '',
-  }
-
-  return standardLibraries[state.preferredLanguage] ?? ''
-})
-</script>
-
-<template>
-  <div class="reference">
-    <div class="reference-container">
-      <div class="copy">
-        <div class="editor-heading">
-          <h1
-            class="heading"
-            :class="{ loading: !info.title }">
-            {{ info.title || '&nbsp;' }}
-          </h1>
-        </div>
-        <p class="tag-description">
-          <template v-if="info.description">
-            <MarkdownRenderer :value="info.description" />
-          </template>
-          <!-- @vue-ignore -->
-          <template
-            v-for="index in [...Array(8).keys()]"
-            v-else
-            :key="index">
-            <span class="loading" />
-          </template>
-        </p>
-      </div>
-      <div class="example flex-col gap-1">
-        <Card v-if="servers.length > 0">
-          <CardHeader muted>
-            Base URL{{ servers?.length > 1 ? 's' : '' }}
-          </CardHeader>
-          <CardContent
-            v-for="server in servers"
-            :key="server.url"
-            muted>
-            <BaseUrl :server="server" />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>Client Libraries</CardHeader>
-          <CardContent frameless>
-            <LanguageSelector />
-          </CardContent>
-          <CardFooter
-            class="font-mono"
-            muted
-            style="font-size: var(--theme-mini); color: var(--theme-color-2)">
-            {{ getLanguageTitleByKey(state.preferredLanguage) }}
-            {{ standardLibrary }}
-          </CardFooter>
-        </Card>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped>
-.heading {
-  margin-top: 0px !important;
-}
-.loading {
-  background: var(--theme-background-2);
-  animation: loading-skeleton 2s infinite alternate;
-  border-radius: var(--theme-radius-lg);
-}
-.heading.loading {
-  width: 80%;
-}
-.tag-description .loading {
-  height: 20px;
-  margin-bottom: 4px;
-  width: 100%;
-  display: inline-block;
-}
-.tag-description .loading:first-of-type {
-  margin-top: 12px;
-}
-.tag-description .loading:last-of-type {
-  width: 40%;
-}
-@keyframes loading-skeleton {
-  from {
-    background: var(--theme-background-2);
-  }
-  to {
-    background: var(--theme-background-3);
-  }
-}
-</style>