@scalar/api-reference 0.5.0 → 0.5.2

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

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-import type { ContentProperties } from '../../../types'
-import RequestBodyPropertiesChild from './RequestBodyPropertiesChild.vue'
-
-defineProps<{ contentProperties: ContentProperties; required: string[] }>()
-
-const open = ref(true)
-</script>
-<template>
-  <li
-    v-for="name in Object.keys(contentProperties || {})"
-    :key="contentProperties[name].type">
-    <span class="parameter-name">{{ name }}</span>
-    <span
-      class="parameter-required"
-      :class="required?.includes(name) ? 'marc_required' : ''">
-      {{ required?.includes(name) ? 'required' : 'optional' }}
-    </span>
-    <span class="parameter-type">{{ contentProperties[name].type }}</span>
-    <p
-      v-if="contentProperties[name].description"
-      class="parameter-description">
-      description
-    </p>
-    <div
-      v-if="Object.keys(contentProperties[name].properties || {}).length > 0"
-      class="parameter-child"
-      :class="{ 'parameter-child__open': open }">
-      <div
-        class="parameter-child-trigger"
-        @click="open = !open">
-        <svg
-          fill="currentColor"
-          height="14"
-          viewBox="0 0 14 14"
-          width="14"
-          xmlns="http://www.w3.org/2000/svg">
-          <polygon
-            fill-rule="nonzero"
-            points="14 8 8 8 8 14 6 14 6 8 0 8 0 6 6 6 6 0 8 0 8 6 14 6" />
-        </svg>
-        <span>Child Attributes</span>
-      </div>
-      <ul
-        v-show="open"
-        class="parameter">
-        <RequestBodyPropertiesChild
-          :contentProperties="contentProperties[name].properties || {}" />
-      </ul>
-    </div>
-  </li>
-</template>

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

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { ContentProperties } from '../../../types'
-
-defineProps<{ contentProperties: ContentProperties }>()
-</script>
-<template>
-  <li
-    v-for="(value, key) in contentProperties"
-    :key="key">
-    <div class="param-editor">
-      <div class="param-editor-flex">
-        <span class="parameter-name">{{ key }}</span>
-        <span class="parameter-type">{{ value.type }}</span>
-      </div>
-      <p
-        v-if="value.description"
-        class="parameter-description">
-        {{ value.description }}
-      </p>
-      <div
-        v-if="value.type === 'object'"
-        class="parameter-child parameter-child__on">
-        <div class="parameter-child-trigger">
-          <svg
-            fill="currentColor"
-            height="14"
-            viewBox="0 0 14 14"
-            width="14"
-            xmlns="http://www.w3.org/2000/svg">
-            <polygon
-              fill-rule="nonzero"
-              points="14 8 8 8 8 14 6 14 6 8 0 8 0 6 6 6 6 0 8 0 8 6 14 6" />
-          </svg>
-          <span>Child Attributes</span>
-        </div>
-      </div>
-    </div>
-  </li>
-</template>

package/src/components/Content/ReferenceEndpoint/index.ts

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

package/src/components/Content/ReferenceTag.vue

@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { useApiClientStore } from '@scalar/api-client'
-import { useIntersectionObserver } from '@vueuse/core'
-import { nextTick, onMounted, ref } from 'vue'
-
-import { useTemplateStore } from '../../stores/template'
-import type { Operation, Tag } from '../../types'
-import { Card, CardContent, CardHeader } from '../Card'
-import MarkdownRenderer from './MarkdownRenderer.vue'
-
-const props = defineProps<{ tag: Tag; index: number }>()
-
-const { setCollapsedSidebarItem } = useTemplateStore()
-
-const { setActiveSidebar } = useApiClientStore()
-
-const scrollToEndpoint = async (item: Operation) => {
-  setCollapsedSidebarItem(props.tag.name, true)
-  await nextTick()
-  setActiveSidebar(item.operationId)
-  document.getElementById(`endpoint/${item.operationId}`)?.scrollIntoView()
-}
-
-onMounted(() => {
-  const root = document.getElementById('tippy')
-
-  const tagHeader = ref<HTMLElement>()
-
-  useIntersectionObserver(
-    tagHeader,
-    ([{ isIntersecting }]) => {
-      if (isIntersecting) {
-        if (props.index === 0) {
-          const newUrl = `${window.location.origin}${window.location.pathname}`
-          window.history.replaceState({}, '', newUrl)
-          setCollapsedSidebarItem(props.tag.name, true)
-        }
-      }
-    },
-    {
-      rootMargin: '0px 0px 0px 0px', // Trigger when the header touches the top of the viewport
-      threshold: 0,
-      root,
-    },
-  )
-})
-</script>
-
-<template>
-  <div
-    :id="`tag/${tag.name}`"
-    class="reference-container"
-    :data-section-id="tag.name">
-    <div class="copy">
-      <div class="editor-heading">
-        <h1
-          ref="tagHeader"
-          class="heading">
-          {{ tag.name }}
-        </h1>
-      </div>
-      <div
-        v-if="tag.description"
-        class="tag-description">
-        <MarkdownRenderer :value="tag.description" />
-      </div>
-    </div>
-    <div
-      v-if="tag.operations?.length > 0"
-      class="example">
-      <Card>
-        <CardHeader muted>Endpoints</CardHeader>
-        <CardContent muted>
-          <div class="endpoints custom-scroll">
-            <a
-              v-for="child in tag.operations"
-              :key="child.operationId"
-              class="endpoint"
-              @click="scrollToEndpoint(child)">
-              <span :class="child.httpVerb">{{ child.httpVerb }}</span>
-              <span>{{ child.path }}</span>
-            </a>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  </div>
-</template>
-<style scoped>
-.endpoints {
-  overflow: auto;
-  background: var(--theme-background-2);
-}
-.endpoints span + span {
-  text-align: left;
-  margin-left: 12px;
-  text-transform: initial;
-}
-</style>

package/src/components/Content/Spinner.vue

@@ -1,51 +0,0 @@
-<template>
-  <span class="scalar-logo-animation scalar-logo-animation-load">
-    <i class="line line-1"></i>
-    <i class="line line-2"></i>
-    <i class="line line-3"></i>
-    <i class="line line-4"></i>
-  </span>
-</template>
-<style scoped>
-.scalar-logo-animation {
-  width: 38px;
-  height: 38px;
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.scalar-logo-animation .line:before {
-  content: '';
-  width: 100%;
-  height: 100%;
-  background: #4c4316;
-  display: block;
-  position: absolute;
-}
-.scalar-logo-animation .line {
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  overflow: hidden;
-}
-.scalar-logo-animation .line-2 {
-  transform: rotate(90deg);
-}
-.scalar-logo-animation .line-3 {
-  transform: rotate(45deg);
-}
-.scalar-logo-animation .line-4 {
-  transform: rotate(-45deg);
-}
-.scalar-logo-animation-load {
-  animation: rotate 2s linear infinite;
-}
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>

package/src/components/Content/index.ts

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

package/src/components/FindAnythingButton.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { isMacOS } from '@scalar/use-tooltip'
-
-import FlowIcon from './Icon/FlowIcon.vue'
-</script>
-<template>
-  <button
-    class="sidebar-search"
-    type="button">
-    <FlowIcon
-      class="search-icon"
-      icon="Search" />
-    <div class="sidebar-search-input">
-      <span
-        class="sidebar-search-placeholder"
-        type="text">
-        Search
-      </span>
-      <span class="sidebar-search-shortcut">
-        <span class="sidebar-search-key">{{ isMacOS() ? '⌘' : '⌃' }}</span>
-        <span class="sidebar-search-key">k</span>
-      </span>
-    </div>
-  </button>
-</template>
-<style scoped>
-.sidebar-search {
-  display: flex;
-  align-items: center;
-  position: relative;
-  /* Sub */
-  --margin-x: 12px;
-  width: calc(100% - 2 * var(--margin-x));
-  margin: 12px var(--margin-x) 6px var(--margin-x);
-  padding: 0 3px 0 12px;
-
-  color: var(--sidebar-color-2, var(--theme-color-2));
-  outline: none;
-  border-radius: var(--theme-radius-lg);
-  border: 1px solid var(--theme-border-color);
-  /* prettier-ignore */
-  background: var(--scalar-api-reference-sidebar-search-background, var(--theme-background-1));
-  cursor: pointer;
-  appearance: none;
-}
-
-.sidebar-search-input {
-  font-size: var(--theme-small);
-  font-weight: var(--theme-semibold);
-  height: 31px;
-
-  user-select: none;
-  z-index: 10;
-  position: relative;
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-}
-.sidebar-search-shortcut {
-  text-transform: uppercase;
-}
-.sidebar-search-key {
-  background-color: var(--theme-background-2);
-  padding: 3px 5px;
-  margin: 2px;
-  border-radius: var(--theme-radius);
-  color: var(--theme-color-3);
-}
-
-.search-icon {
-  padding: 0;
-  margin-right: 9px;
-  width: 12px;
-}
-</style>

package/src/components/FlowButton.vue

@@ -1,184 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  label: string
-  error?: boolean
-  loaderState?: LoadingState
-  variant?: ButtonVariant
-  title?: string
-  icon?: boolean
-}>()
-</script>
-<script lang="ts">
-import FlowLoader, {
-  type LoadingState,
-  useLoaderState as useLoadButtonState,
-} from './FlowLoader.vue'
-
-export type ButtonVariant = 'solid' | 'outlined' | 'clear' | 'text'
-export { useLoadButtonState }
-</script>
-<template>
-  <button
-    class="flow-button"
-    :class="{
-      'flow-button-outlined': !error && variant === 'outlined',
-      'flow-button-clear': !error && variant === 'clear',
-      'flow-button-text': !error && variant === 'text',
-      'flow-button--delete': error,
-      'flow-button-icon-only': icon,
-    }"
-    :title="title || label"
-    type="button">
-    <div
-      v-if="$slots.default"
-      class="flow-button-decorator">
-      <slot />
-    </div>
-    <span :class="{ 'sr-only': icon }">{{ label }}</span>
-    <div class="flow-button-loader">
-      <FlowLoader
-        v-if="loaderState"
-        :loaderState="loaderState" />
-    </div>
-  </button>
-</template>
-<style scoped>
-.flow-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-  position: relative;
-  appearance: none;
-  -webkit-appearance: none;
-  height: 40px;
-  padding: 0px 24px;
-  border-radius: var(--theme-radius-lg);
-  color: var(--theme-button-1-color);
-  font-size: var(--theme-small);
-  font-weight: 500;
-  cursor: pointer;
-  background: var(--theme-button-1);
-  border: none;
-  width: 100%;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
-}
-
-.flow-button:hover,
-.flow-button:focus-visible {
-  background: var(--theme-button-1-hover);
-}
-.flow-button:active {
-  box-shadow: none;
-  background: var(--theme-button-1);
-}
-.flow-button[disabled] {
-  background: var(--theme-background-2);
-  color: var(--theme-color-3);
-  cursor: unset;
-  box-shadow: none;
-}
-
-.flow-button.flow-button-icon-only {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-}
-
-/* ----------------------------------------------------- */
-.flow-button-outlined {
-  background: var(--theme-background-1);
-  color: var(--theme-color-1);
-  padding: 11px 23px;
-  border: 1px solid var(--theme-border-color);
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px;
-}
-.flow-button-outlined:hover,
-.flow-button-outlined:focus-visible {
-  background: var(--theme-background-2);
-}
-.flow-button-outlined:active {
-  background: var(--theme-background-2);
-}
-.flow-button-outlined[disabled] {
-  background: var(--theme-background-2);
-  color: var(--theme-color-3);
-  cursor: unset;
-  box-shadow: none;
-}
-
-/* ----------------------------------------------------- */
-.flow-button-clear {
-  background: transparent;
-  box-shadow: none;
-  color: var(--theme-color-3);
-}
-.flow-button-clear:active {
-  background: transparent;
-}
-.flow-button-clear:hover,
-.flow-button-clear:focus-visible {
-  background: var(--theme-background-2);
-  box-shadow: none;
-}
-.flow-button-clear[disabled] {
-  background: var(--theme-background-2);
-  color: var(--theme-color-3);
-  cursor: unset;
-  box-shadow: none;
-}
-
-/* ----------------------------------------------------- */
-.flow-button-text {
-  background: transparent;
-  box-shadow: none;
-  color: var(--theme-color-3);
-}
-.flow-button-text:active {
-  background: transparent;
-}
-.flow-button-text:hover,
-.flow-button-text:focus-visible {
-  color: var(--theme-color-2);
-  background: transparent;
-  box-shadow: none;
-}
-.flow-button-text[disabled] {
-  background: transparent;
-  color: var(--theme-color-ghost);
-  cursor: unset;
-  box-shadow: none;
-}
-
-/* ----------------------------------------------------- */
-
-.flow-button--delete {
-  background: var(--theme-error-color);
-  color: white;
-}
-.flow-button--delete:active {
-  background: var(--theme-error-color);
-}
-.flow-button--delete:hover {
-  background: var(--theme-error-color);
-  opacity: 0.86;
-}
-
-/* ----------------------------------------------------- */
-
-.flow-button-loader {
-  position: absolute;
-  right: 8px;
-}
-.flow-button-decorator {
-  margin-right: 9px;
-  color: currentColor;
-  display: flex;
-  align-items: center;
-  height: 14px;
-  width: 14px;
-}
-.flow-button-icon-only .flow-button-decorator {
-  margin-right: 0;
-}
-</style>

package/src/components/FlowIconButton.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import FlowButton, { type ButtonVariant } from './FlowButton.vue'
-import { FlowIcon } from './Icon'
-import { type Icon } from './Icon/icons'
-
-withDefaults(
-  defineProps<{
-    label: string
-    icon: Icon
-    variant?: ButtonVariant
-  }>(),
-  {
-    variant: 'clear',
-  },
-)
-</script>
-<template>
-  <FlowButton
-    class="icon-button"
-    icon
-    :label="label"
-    :variant="variant">
-    <FlowIcon :icon="icon" />
-  </FlowButton>
-</template>