@scalar/api-reference 0.5.1 → 0.5.2

package/src/components/SearchModal.vue

@@ -1,305 +0,0 @@
-<script setup lang="ts">
-import { type ParamMap, useOperation } from '@scalar/api-client'
-import { useKeyboardEvent } from '@scalar/use-keyboard-event'
-import Fuse from 'fuse.js'
-import { computed, nextTick, ref, toRef, watch } from 'vue'
-
-import { extractRequestBody } from '../helpers/specHelpers'
-import { useTemplateStore } from '../stores/template'
-import type { Spec } from '../types'
-import FlowModal, { useModalState } from './FlowModal.vue'
-
-const props = defineProps<{ spec: Spec }>()
-const reactiveSpec = toRef(props, 'spec')
-const modalState = useModalState()
-
-type FuseData = {
-  title: string
-  operationId?: string
-  description: string
-  body?: string | string[] | ParamMap
-  httpVerb?: string
-  path?: string
-  tag?: string
-}
-
-let fuseDataArray: FuseData[] = []
-const searchResults = ref<Fuse.FuseResult<FuseData>[]>([])
-const selectedSearchResult = ref<number>(0)
-const searchText = ref<string>('')
-const searchModalRef = ref<HTMLElement | null>(null)
-
-const fuse = new Fuse(fuseDataArray, {
-  keys: ['title', 'description', 'body'],
-})
-
-const { state, setItem, setCollapsedSidebarItem } = useTemplateStore()
-
-const fuseSearch = (): void => {
-  selectedSearchResult.value = 0
-  searchResults.value = fuse.search(searchText.value)
-}
-
-watch(
-  () => state.showSearch,
-  () => {
-    if (state.showSearch) {
-      searchText.value = ''
-      selectedSearchResult.value = 0
-      searchResults.value = []
-      modalState.show()
-    } else {
-      modalState.hide()
-    }
-  },
-)
-
-watch(
-  () => modalState.open,
-  () => {
-    if (!modalState.open) {
-      setItem('showSearch', false)
-    }
-  },
-)
-
-async function openSearchResult(entry: Fuse.FuseResult<FuseData>) {
-  const tag = entry.item.tag
-  const operation = entry.item.operationId
-
-  if (!tag) {
-    return
-  }
-
-  setCollapsedSidebarItem(tag, true)
-
-  modalState.hide()
-  await nextTick()
-
-  const elementId = operation ? `endpoint/${operation}` : `tag/${tag}`
-  const element = document.getElementById(elementId)
-  element?.scrollIntoView()
-}
-
-watch(reactiveSpec.value, () => {
-  fuseDataArray = []
-
-  if (!props.spec.tags.length) {
-    fuse.setCollection([])
-    return
-  }
-
-  // TODO: We need to go through the operations, not the tags. Spec files can have zero tags.
-  props.spec.tags.forEach((tag) => {
-    const tagData = {
-      title: tag.name,
-      description: tag.description,
-      tag: tag.name,
-      body: '',
-    }
-    fuseDataArray.push(tagData)
-
-    if (tag.operations) {
-      tag.operations.forEach((operation) => {
-        const { parameterMap } = useOperation({ operation })
-        const bodyData = extractRequestBody(operation) || parameterMap.value
-        let body = null
-        if (typeof bodyData !== 'boolean') {
-          body = bodyData
-        }
-        const operationData: FuseData = {
-          title: operation.name,
-          operationId: operation.operationId,
-          description: operation.description,
-          httpVerb: operation.httpVerb,
-          path: operation.path,
-          tag: tag.name,
-        }
-
-        if (body) {
-          operationData.body = body
-        }
-
-        fuseDataArray.push(operationData)
-      })
-    }
-  })
-
-  fuse.setCollection(fuseDataArray)
-})
-
-useKeyboardEvent({
-  element: searchModalRef,
-  keyList: ['enter'],
-  active: () => modalState.open,
-  handler: () => {
-    openSearchResult(
-      searchResultsWithPlaceholderResults.value[selectedSearchResult.value],
-    )
-  },
-})
-
-useKeyboardEvent({
-  element: searchModalRef,
-  keyList: ['ArrowDown'],
-  active: () => modalState.open,
-  handler: () => {
-    if (
-      selectedSearchResult.value <
-      searchResultsWithPlaceholderResults.value.length - 1
-    ) {
-      selectedSearchResult.value++
-    } else {
-      selectedSearchResult.value = 0
-    }
-  },
-})
-
-useKeyboardEvent({
-  element: searchModalRef,
-  keyList: ['ArrowUp'],
-  active: () => modalState.open,
-  handler: () => {
-    if (selectedSearchResult.value > 0) {
-      selectedSearchResult.value--
-    } else {
-      selectedSearchResult.value =
-        searchResultsWithPlaceholderResults.value.length - 1
-    }
-  },
-})
-
-const searchResultsWithPlaceholderResults = computed(
-  (): Fuse.FuseResult<FuseData>[] => {
-    if (searchText.value.length === 0) {
-      return fuseDataArray.map((item) => {
-        return {
-          item: item,
-        } as Fuse.FuseResult<FuseData>
-      })
-    }
-
-    return searchResults.value
-  },
-)
-</script>
-<template>
-  <FlowModal :state="modalState">
-    <div ref="searchModalRef">
-      <input
-        v-model="searchText"
-        class="ref-search-input"
-        placeholder="Search …"
-        type="text"
-        @input="fuseSearch" />
-    </div>
-    <div v-if="searchResultsWithPlaceholderResults.length">
-      <button
-        v-for="(entry, index) in searchResultsWithPlaceholderResults"
-        :key="entry.refIndex"
-        class="item-entry"
-        :class="{
-          'item-entry--active': index === selectedSearchResult,
-        }"
-        type="submit"
-        @click="openSearchResult(entry)">
-        <div
-          v-if="entry.item.title || entry.item.operationId"
-          class="item-entry-title">
-          {{ entry.item.title || entry.item.operationId }}
-        </div>
-        <div
-          v-if="entry.item.httpVerb || entry.item.path"
-          class="item-entry-request">
-          <div
-            class="item-entry-http-verb"
-            :class="`item-entry-http-verb--${entry.item.httpVerb}`">
-            {{ entry.item.httpVerb }}
-          </div>
-          <div class="item-entry-path">
-            {{ entry.item.path }}
-          </div>
-        </div>
-        <div v-else-if="entry.item.description">
-          {{ entry.item.description }}
-        </div>
-      </button>
-    </div>
-  </FlowModal>
-</template>
-<style scoped>
-/** Input */
-.ref-search-input {
-  width: 100%;
-  background: transparent;
-  padding: 12px;
-  font-size: 13px;
-  outline: none;
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--theme-radius);
-  color: var(--theme-color-1);
-  font-weight: var(--theme-semibold);
-  font-size: var(--theme-font-size-3);
-  appearance: none;
-  margin-bottom: 12px;
-}
-.ref-search-input::-webkit-input-placeholder,
-.ref-search-input::placeholder {
-  color: var(--theme-color-3);
-  font-family: var(--theme-font);
-  font-weight: var(--theme-regular);
-}
-/** Results */
-.item-entry {
-  appearance: none;
-  background: transparent;
-  border: none;
-  outline: none;
-  padding: 6px 12px;
-  width: 100%;
-  font-size: var(--theme-font-size-3);
-  text-align: left;
-  border-radius: var(--theme-radius);
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.item-entry--active {
-  background: var(--theme-background-2);
-  box-shadow: 0 0 0 1px var(--theme-background-2);
-}
-.item-entry:hover {
-  background: var(--theme-background-2);
-  box-shadow: 0 0 0 1px var(--theme-background-2);
-}
-
-.item-entry-title {
-  font-weight: var(--theme-semibold);
-}
-.item-entry-request {
-  display: flex;
-  gap: 3px;
-  font-family: var(--theme-font-code);
-}
-.item-entry-http-verb {
-  text-transform: uppercase;
-}
-.item-entry-http-verb--post {
-  color: var(--theme-post-color);
-}
-.item-entry-http-verb--patch {
-  color: var(--theme-patch-color);
-}
-.item-entry-http-verb--get {
-  color: var(--theme-get-color);
-}
-.item-entry-http-verb--delete {
-  color: var(--theme-delete-color);
-}
-.item-entry-http-verb--put {
-  color: var(--theme-put-color);
-}
-.item-entry-path {
-  color: var(--theme-color-3);
-}
-</style>

package/src/components/Sidebar.vue

@@ -1,293 +0,0 @@
-<script setup lang="ts">
-import {
-  generateRequest,
-  useApiClientRequestStore,
-  useApiClientStore,
-  useOperation,
-} from '@scalar/api-client'
-import { useKeyboardEvent } from '@scalar/use-keyboard-event'
-import { useMediaQuery } from '@vueuse/core'
-
-import { useTemplateStore } from '../stores/template'
-import type { Operation, Spec } from '../types'
-import FindAnythingButton from './FindAnythingButton.vue'
-import SidebarElement from './SidebarElement.vue'
-import SidebarGroup from './SidebarGroup.vue'
-
-const props = defineProps<{ spec: Spec }>()
-
-const { state, setActiveSidebar, toggleApiClient } = useApiClientStore()
-
-const { setActiveRequest } = useApiClientRequestStore()
-
-function showItemInClient(operation: Operation) {
-  const { parameterMap } = useOperation({ operation })
-  const item = generateRequest(
-    operation,
-    parameterMap.value,
-    props.spec.servers[0],
-  )
-  setActiveRequest(item)
-  toggleApiClient(item, true)
-}
-
-const scrollToEndpoint = (item: Operation) => {
-  setActiveSidebar(item.operationId)
-  if (state.showApiClient) {
-    showItemInClient(item)
-  }
-  document.getElementById(`endpoint/${item.operationId}`)?.scrollIntoView()
-}
-
-const isMobile = useMediaQuery('(max-width: 1000px)')
-
-const {
-  state: templateState,
-  setItem: setTemplateItem,
-  toggleCollapsedSidebarItem,
-  setCollapsedSidebarItem,
-} = useTemplateStore()
-
-useKeyboardEvent({
-  keyList: ['k'],
-  withCtrlCmd: true,
-  handler: () => setTemplateItem('showSearch', !templateState.showSearch),
-})
-</script>
-<template>
-  <div class="sidebar">
-    <FindAnythingButton
-      v-if="!isMobile"
-      @click="setTemplateItem('showSearch', true)" />
-    <div class="pages custom-scroll custom-scroll-self-contain-overflow">
-      <SidebarGroup :level="0">
-        <template v-for="tag in spec.tags">
-          <SidebarElement
-            v-if="tag.operations?.length > 0"
-            :key="tag.name"
-            :hasChildren="true"
-            :isActive="false"
-            :item="{
-              uid: '',
-              title: tag.name.toUpperCase(),
-              type: 'Folder',
-            }"
-            :open="templateState.collapsedSidebarItems[tag.name]"
-            @select="() => toggleCollapsedSidebarItem(tag.name)"
-            @toggleOpen="toggleCollapsedSidebarItem(tag.name)">
-            <SidebarGroup :level="0">
-              <SidebarElement
-                v-for="operation in tag.operations"
-                :key="operation.operationId"
-                :isActive="state.activeSidebar === operation.operationId"
-                :item="{
-                  uid: '',
-                  title: operation.name || operation.path,
-                  type: 'Page',
-                }"
-                @select="
-                  () => {
-                    setCollapsedSidebarItem(tag.name, true)
-                    scrollToEndpoint(operation)
-                  }
-                " />
-            </SidebarGroup>
-          </SidebarElement>
-        </template>
-      </SidebarGroup>
-    </div>
-  </div>
-</template>
-
-<style>
-.sidebar {
-  --theme-sidebar-indent-base: 6px;
-  /* prettier-ignore */
-  background: var(--sidebar-background-1, var(--theme-background-1));
-}
-
-/* ----------------------------------------------------- */
-/* Main sidebar styles */
-
-.sidebar {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  /* prettier-ignore */
-  background: var(--sidebar-background-1, var(--theme-background-1));
-  --sidebar-level: 0;
-}
-
-.pages {
-  padding-top: 9px;
-  padding-bottom: 9px;
-}
-
-.sidebar-group {
-  list-style: none;
-  width: 100%;
-}
-
-.sidebar-heading {
-  display: flex;
-  gap: 6px;
-
-  /* prettier-ignore */
-  color: var(--sidebar-color-2, var(--theme-color-2));
-  font-size: var(--theme-mini);
-  font-weight: var(--theme-semibold);
-  word-break: break-word;
-  line-height: 1.385;
-  display: flex;
-  align-items: center;
-  max-width: 100%;
-  position: relative;
-  cursor: pointer;
-  /* prettier-ignore */
-  border-radius: 0 var(--theme-radius-lg) var(--theme-radius-lg) 0;
-  flex: 1;
-  padding-right: 12px;
-  user-select: none;
-}
-
-/* Folder/page collapse icon */
-.toggle-nested-icon {
-  border: none;
-  position: absolute !important;
-  left: 2px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: currentColor;
-}
-
-.toggle-nested-icon:hover,
-.toggle-nested-icon:focus-visible {
-  color: currentColor;
-  filter: drop-shadow(0 0.125px 0 currentColor)
-    drop-shadow(0 -0.125px 0 currentColor);
-}
-
-/* We indent each level of nesting further */
-.sidebar-indent-nested .sidebar-heading {
-  /* prettier-ignore */
-  padding-left: calc((var(--sidebar-level) * var(--theme-sidebar-indent-base)) + 24px) !important;
-}
-
-/* Collapse/expand icons must also be offset */
-.sidebar-indent-nested .sidebar-heading .toggle-nested-icon {
-  /* prettier-ignore */
-  left: calc((var(--sidebar-level) * var(--theme-sidebar-indent-base)) + 2px) !important;
-}
-
-.sidebar-heading-link {
-  padding-right: 12px;
-  padding: 6px 0;
-  display: flex;
-  align-items: center;
-}
-
-/* Sidebar link icon */
-.link-icon {
-  position: relative;
-  left: 4px;
-}
-
-.sidebar-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 6px;
-
-  width: 13px;
-  height: 13px;
-}
-
-.sidebar-icon > svg {
-  width: 13px;
-  height: 13px;
-}
-
-.sidebar-heading:hover {
-  /* prettier-ignore */
-  color: var(--sidebar-color-1, var(--theme-color-1));
-  /* prettier-ignore */
-  background: var(--sidebar-item-hover-background, var(--theme-background-2));
-}
-
-.active_page.sidebar-heading:hover,
-.active_page.sidebar-heading,
-.marc_active .sidebar-heading {
-  /* prettier-ignore */
-  background: var(--sidebar-item-active-background, var(--theme-background-accent)) !important;
-  /* prettier-ignore */
-  color: var(--theme-color-accent, var(--theme-background-accent)) !important;
-}
-.sidebar-group-item {
-  position: relative;
-}
-
-/* Change font colors and weights for nested items */
-.sidebar-indent-nested .sidebar-heading {
-  /* prettier-ignore */
-  color: var(--sidebar-color-1, var(--theme-color-1));
-}
-.sidebar-indent-nested .sidebar-indent-nested .sidebar-heading {
-  /* prettier-ignore */
-  color: var(--sidebar-color-2, var(--theme-color-2));
-}
-.sidebar-indent-nested > div:has(.active_page) .sidebar-heading {
-  font-weight: var(--theme-bold);
-}
-
-.sidebar-mobile-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 100%;
-  width: 100%;
-  padding: 0 6px;
-}
-
-.sidebar-mobile-breadcrumbs {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: var(--theme-small);
-  font-weight: var(--theme-semibold);
-}
-
-.sidebar-mobile-actions {
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
-  height: 24px;
-  align-items: center;
-  padding: 0 4px;
-}
-
-.sidebar-mobile-actions .sidebar-mobile-darkmode-toggle {
-  height: 16px;
-  width: 16px;
-}
-
-@media (max-width: 1000px) {
-  .sidebar {
-    min-height: 0;
-  }
-
-  .pages {
-    padding-top: 12px;
-  }
-}
-
-@media (max-width: 500px) {
-  .header-item-link.header-item-active,
-  .sidebar-section,
-  .sidebar-heading {
-    font-size: var(--theme-micro);
-  }
-}
-</style>