@scalar/api-reference 0.5.1 → 0.5.2

package/src/components/SidebarElement.vue

@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import FlowIconButton from '../components/FlowIconButton.vue'
-import { FlowIcon, Icon } from './Icon'
-
-const props = defineProps<{
-  item: {
-    uid: string
-    title: string
-    type: 'Page' | 'Folder' | 'Link'
-    link?: string
-    icon?: {
-      src: string
-    }
-  }
-  isActive?: boolean
-  hasChildren?: boolean
-  open?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'select'): void
-  (e: 'toggleOpen'): void
-}>()
-
-enum ElementType {
-  Page = 'Page',
-  Folder = 'Folder',
-  Link = 'Link',
-}
-
-const linkProps = computed(() => {
-  const item = props.item
-  if (item.type === ElementType.Link) {
-    return {
-      href: item.link,
-      rel: 'noopener noreferrer',
-      target: '_blank',
-    }
-  }
-
-  return {}
-})
-
-function handleClick() {
-  if (props.item.type === ElementType.Link) return
-
-  if (props.item.type === ElementType.Folder) {
-    emit('toggleOpen')
-    return
-  }
-
-  emit('select')
-}
-
-function handleToggleOpen() {
-  // Allow bubbled event to trigger folder open
-  if (props.item.type === ElementType.Folder) return
-
-  emit('toggleOpen')
-}
-</script>
-<template>
-  <li class="sidebar-group-item">
-    <div
-      class="sidebar-heading"
-      :class="{ active_page: isActive }"
-      @click="handleClick">
-      <!-- If children are detected then show the nesting icon -->
-      <FlowIconButton
-        v-if="hasChildren || item.type === ElementType.Folder"
-        class="toggle-nested-icon"
-        :icon="open ? 'ChevronDown' : 'ChevronRight'"
-        label="Toggle group"
-        variant="text"
-        width="20px"
-        @click="handleToggleOpen" />
-      <a
-        class="flex-1 sidebar-heading-link"
-        v-bind="linkProps">
-        <Icon
-          v-if="item?.icon?.src"
-          class="sidebar-icon"
-          :src="item.icon.src" />
-        <p>{{ item.title }}</p>
-      </a>
-      <FlowIcon
-        v-if="item?.type === ElementType.Link"
-        class="link-icon"
-        icon="ExternalLink"
-        width="16px" />
-    </div>
-    <slot v-if="open" />
-    <div
-      v-if="$slots['action-menu']"
-      class="action-menu">
-      <slot name="action-menu"></slot>
-    </div>
-  </li>
-</template>
-<style scoped>
-.action-menu {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  display: flex;
-  gap: 6px;
-}
-/**
-* Some awkwardness to make the dropdown buttons hidden when not hovered
-* but still show when the panel is open and focused
-*/
-.action-menu :deep(.button-wrapper button) {
-  /* Hide the icons by default */
-  opacity: 0;
-  width: 20px;
-  height: 20px;
-  padding: 4px;
-}
-.action-menu:hover :deep(.button-wrapper button),
-.action-menu :deep(.button-wrapper button:hover),
-.sidebar-heading:hover ~ .action-menu :deep(.button-wrapper button),
-.action-menu :deep(.button-wrapper button[aria-expanded='true']) {
-  opacity: 1;
-}
-.sidebar-heading:has(~ .action-menu:hover) {
-  /* prettier-ignore */
-  color: var(--sidebar-color-1, var(--theme-color-1));
-  /* prettier-ignore */
-  background: var(--sidebar-item-hover-background, var(--theme-background-2));
-}
-</style>

package/src/components/SidebarGroup.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  level: number
-}>()
-</script>
-<template>
-  <ul
-    class="sidebar-group sidebar-indent-nested"
-    :style="{ '--sidebar-level': level }">
-    <slot />
-  </ul>
-</template>

package/src/components/SimpleTable/SimpleCell.vue

@@ -1,47 +0,0 @@
-<script lang="ts" setup>
-import HelpfulLink from '../HelpfulLink.vue'
-
-withDefaults(
-  defineProps<{ wrap?: boolean; strong?: boolean; href?: string | null }>(),
-  {
-    wrap: true,
-    strong: false,
-    href: null,
-  },
-)
-</script>
-<template>
-  <td
-    class="simple-cell"
-    :class="{ wrap: wrap, strong: strong }">
-    <template v-if="href">
-      <HelpfulLink :href="href">
-        <slot />
-      </HelpfulLink>
-    </template>
-    <template v-else>
-      <slot />
-    </template>
-  </td>
-</template>
-<style scoped>
-.simple-cell {
-  position: relative;
-  padding: 0.25em 0.5em;
-  color: var(--theme-color-1);
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-.simple-cell:last-of-type {
-  border-right: none;
-}
-
-.simple-cell.wrap {
-  white-space: normal;
-}
-
-.simple-cell.strong {
-  font-weight: var(--theme-semibold);
-}
-</style>

package/src/components/SimpleTable/SimpleHeader.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import SimpleCell from './SimpleCell.vue'
-</script>
-<template>
-  <SimpleCell
-    as="th"
-    class="simple-header">
-    <slot />
-  </SimpleCell>
-</template>
-<style scoped>
-.simple-header {
-  color: var(--theme-color-disabled);
-  font-weight: var(--theme-bold);
-  text-transform: uppercase;
-}
-</style>

package/src/components/SimpleTable/SimpleRow.vue

@@ -1,5 +0,0 @@
-<template>
-  <tr class="simple-row">
-    <slot />
-  </tr>
-</template>

package/src/components/SimpleTable/SimpleTable.vue

@@ -1,13 +0,0 @@
-<template>
-  <table class="simple-table">
-    <slot />
-  </table>
-</template>
-
-<style scoped>
-.simple-table {
-  display: table;
-  width: 100%;
-  font-size: var(--theme-micro);
-}
-</style>

package/src/components/SimpleTable/index.ts

@@ -1,4 +0,0 @@
-export { default as SimpleCell } from './SimpleCell.vue'
-export { default as SimpleHeader } from './SimpleHeader.vue'
-export { default as SimpleRow } from './SimpleRow.vue'
-export { default as SimpleTable } from './SimpleTable.vue'

package/src/declarations/typographic-base.d.ts

@@ -1 +0,0 @@
-declare module 'typographic-base'

package/src/helpers/generateAxiosCodeFromRequest.ts

@@ -1,42 +0,0 @@
-type HarRequestHeader = {
-  name: string
-  value: string
-}
-
-type HarRequest = {
-  url: string
-  method: string
-  headers?: HarRequestHeader[]
-}
-
-export const generateAxiosCodeFromRequest = (request: HarRequest) => {
-  const lines: string[] = []
-
-  lines.push(`import axios from 'axios'`)
-  lines.push(``)
-  lines.push(`axios({`)
-
-  const url = request.url
-  lines.push(`  url: '${url}',`)
-
-  const method = request.method.toLowerCase()
-  lines.push(`  method: '${method}',`)
-
-  if (request.headers) {
-    const headers = request.headers
-      .map((header) => {
-        return `    '${header.name}': '${header.value}',`
-      })
-      .join('\n')
-
-    lines.push(`  headers: [`)
-    lines.push(`${headers}`)
-    lines.push(`  ],`)
-  }
-
-  lines.push(`}).then(response => {`)
-  lines.push(`  console.log(response)`)
-  lines.push(`})`)
-
-  return lines.join('\n')
-}

package/src/helpers/generateLaravelCodeFromRequest.ts

@@ -1,20 +0,0 @@
-type HarRequest = {
-  url: string
-  method: string
-}
-
-export const generateLaravelCodeFromRequest = (request: HarRequest) => {
-  const lines: string[] = []
-
-  lines.push(`<?php`)
-  lines.push(``)
-  lines.push(`use Illuminate\\Support\\Facades\\Http;`)
-  lines.push(``)
-
-  const method = request.method.toLowerCase()
-  const url = request.url
-
-  lines.push(`$response = Http::${method}('${url}');`)
-
-  return lines.join('\n')
-}

package/src/helpers/index.ts

@@ -1,5 +0,0 @@
-export { generateAxiosCodeFromRequest } from './generateAxiosCodeFromRequest'
-export { generateLaravelCodeFromRequest } from './generateLaravelCodeFromRequest'
-export { mapFromObject } from './mapFromObject'
-export { objectMerge } from './objectMerge'
-export { transformToJson } from './transformToJson'

package/src/helpers/mapFromObject.ts

@@ -1,11 +0,0 @@
-/**
- * Map an object to an array of key-value pairs.
- */
-export const mapFromObject = (object: Record<string, any>) => {
-  return Object.keys(object).map((key) => {
-    return {
-      key,
-      value: object[key],
-    }
-  })
-}

package/src/helpers/objectMerge.ts

@@ -1,19 +0,0 @@
-// TODO: This is a copy of packages/core-interface/src/database/utility.ts
-/**
- * Overwrite a target object a new replacement object handling removed keys
- **/
-export function objectMerge<A extends object, B extends object>(
-  target: A,
-  replacement: B,
-) {
-  // Clear any keys that have been removed in the replacement
-  Object.keys(target).forEach((key) => {
-    if (!Object.hasOwn(replacement, key)) {
-      delete target[key as keyof A]
-    }
-  })
-
-  Object.assign(target, replacement)
-
-  return target as unknown as B
-}

package/src/helpers/specHelpers.ts

@@ -1,62 +0,0 @@
-import type { ContentSchema, Operation } from '../types'
-
-type PropertyObject = {
-  required?: string[]
-  properties: {
-    [key: string]: {
-      type: string
-      description?: string
-    }
-  }
-}
-
-function formatProperty(key: string, obj: PropertyObject): string {
-  let output = key
-  const isRequired = obj.required && obj.required.includes(key)
-  output += isRequired ? ' REQUIRED ' : ' optional '
-
-  // Check existence before accessing
-  if (obj.properties[key]) {
-    output += obj.properties[key].type
-    if (obj.properties[key].description) {
-      output += ' ' + obj.properties[key].description
-    }
-  }
-
-  return output
-}
-
-function recursiveLogger(obj: ContentSchema): string[] {
-  const results: string[] = ['Body']
-
-  const properties = obj?.schema?.properties
-  if (properties) {
-    Object.keys(properties).forEach((key) => {
-      results.push(formatProperty(key, obj.schema))
-
-      const property = properties[key]
-      const isNestedObject = property.type === 'object' && !!property.properties
-      if (isNestedObject && property.properties) {
-        Object.keys(property.properties).forEach((subKey) => {
-          results.push(`${subKey} ${property.properties?.[subKey]?.type}`)
-        })
-      }
-    })
-  }
-
-  return results
-}
-
-function extractRequestBody(operation: Operation): string[] | boolean {
-  try {
-    // Using optional chaining here as well
-    const body =
-      operation?.information?.requestBody?.content['application/json']
-    if (!body) throw new Error('Body not found')
-    return recursiveLogger(body)
-  } catch (error) {
-    return false
-  }
-}
-
-export { formatProperty, recursiveLogger, extractRequestBody }

package/src/helpers/transformToJson.test.ts

@@ -1,7 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-describe('example', () => {
-  it('executes tests', () => {
-    expect(true).toBe(true)
-  })
-})

package/src/helpers/transformToJson.ts

@@ -1,22 +0,0 @@
-import yaml from 'js-yaml'
-
-/**
- * This helper is used to transform the content of the swagger file to JSON, even it was YAML.
- */
-export const transformToJson = (value: string) => {
-  try {
-    // JSON
-    JSON.parse(value)
-
-    return value
-  } catch {
-    try {
-      // Yaml to JSON
-      const doc = yaml.load(value)
-      return JSON.stringify(doc)
-    } catch {
-      // Invalid
-      return value
-    }
-  }
-}

package/src/hooks/useRefOnMount.ts

@@ -1,12 +0,0 @@
-import { type Ref, onMounted, ref } from 'vue'
-
-// Set a ref value on mount when needed to access properties that are not SSR friendly
-export function useRefOnMount<T>(setter: () => T) {
-  const value: Ref<T | null> = ref(null)
-
-  onMounted(() => {
-    value.value = setter()
-  })
-
-  return value
-}

package/src/index.ts

@@ -1,9 +0,0 @@
-export {
-  default as ApiClientModal,
-  useApiClientStore,
-} from './components/ApiClientModal.vue'
-export { default as ApiReference } from './components/ApiReference.vue'
-export { default as Sidebar } from './components/Sidebar.vue'
-export { default as RenderedReference } from './components/Content/Content.vue'
-
-export * from './types'

package/src/standalone.ts

@@ -1,27 +0,0 @@
-import { createApp } from 'vue'
-
-import ApiReference from './components/ApiReference.vue'
-
-const specElement = document.querySelector('[data-spec]')
-const specUrlElement = document.querySelector('[data-spec-url]')
-
-if (!specUrlElement && !specElement) {
-  console.error(
-    'Couldn’t find a [data-spec] or [data-spec-url] element. Try adding it like this: %c<div data-spec-url="https://petstore.swagger.io/v2/swagger.json" />',
-    'font-family: monospace;',
-  )
-} else {
-  const properties = specElement
-    ? {
-        spec: specElement.getAttribute('data-spec'),
-      }
-    : {
-        specUrl: specUrlElement?.getAttribute('data-spec-url') ?? '',
-      }
-
-  document.querySelector('body')?.classList.add('light-mode')
-
-  const container = specElement ? '[data-spec]' : '[data-spec-url]'
-
-  createApp(ApiReference, properties).mount(container)
-}

package/src/stores/template.ts

@@ -1,66 +0,0 @@
-/**
- * TODO: This is a copy of projects/web/src/stores/template.ts
- */
-import { type TargetId, availableTargets } from 'httpsnippet-lite'
-import { reactive, readonly } from 'vue'
-
-import { objectMerge } from '../helpers/objectMerge'
-import { setItemFactory, toggleItemFactory } from './utility'
-
-export enum NavState {
-  Guide = 'Guide',
-  Reference = 'Reference',
-}
-
-type TemplateState = {
-  isDark: boolean
-  showSideBar: boolean
-  showSearch: boolean
-  activeNavState: NavState
-  collapsedSidebarItems: Partial<Record<string, boolean>>
-  preferredLanguage: TargetId | 'axios' | 'laravel'
-}
-
-const defaultTemplateState = (): TemplateState => ({
-  isDark: false,
-  showSearch: false,
-  showSideBar: true,
-  activeNavState: NavState.Guide,
-  collapsedSidebarItems: {},
-  preferredLanguage: 'shell',
-})
-
-const state = reactive<TemplateState>(defaultTemplateState())
-
-function resetState() {
-  objectMerge(state, defaultTemplateState())
-}
-
-function toggleCollapsedSidebarItem(key: string) {
-  state.collapsedSidebarItems[key] = !state.collapsedSidebarItems[key] ?? true
-}
-
-function setCollapsedSidebarItem(key: string, value: boolean) {
-  state.collapsedSidebarItems[key] = value
-}
-
-// getLanguageTitleByKey('javascript') => 'JavaScript'
-function getLanguageTitleByKey(language: TargetId | 'axios' | 'laravel') {
-  if (language === 'axios') {
-    return 'JavaScript (Axios)'
-  } else if (language === 'laravel') {
-    return 'PHP (Laravel)'
-  }
-
-  return availableTargets().find((target) => language === target.key)?.title
-}
-
-export const useTemplateStore = () => ({
-  state: readonly(state),
-  resetState,
-  setItem: setItemFactory(state),
-  toggleItem: toggleItemFactory(state),
-  toggleCollapsedSidebarItem,
-  setCollapsedSidebarItem,
-  getLanguageTitleByKey,
-})

package/src/stores/utility.ts

@@ -1,23 +0,0 @@
-/**
- * TODO: This is a copy of projects/web/src/stores/utility.ts
- */
-export type KeyOfType<T, V> = keyof {
-  [P in keyof T as T[P] extends V ? P : never]: any
-}
-
-/** Generic set item for a given store state */
-export function setItemFactory<State extends object>(state: State) {
-  return function setItem<K extends keyof State>(key: K, value: State[K]) {
-    state[key] = value
-  }
-}
-
-export function toggleItemFactory<State extends object>(state: State) {
-  return function toggleItem(key: KeyOfType<State, boolean>) {
-    if (typeof state[key] === 'boolean') {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      state[key] = !state[key]
-    }
-  }
-}