@scalar/api-reference 0.1.31 → 0.2.1

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

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

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

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

package/src/components/Content/ReferenceTag.vue

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

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

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

package/src/components/FindAnythingButton.vue

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

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

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