@scalar/api-reference 0.5.1 → 0.5.2

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>

package/src/components/FlowLoader.vue

@@ -1,207 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-
-withDefaults(
-  defineProps<{
-    loaderState?: LoadingState
-    size?: string
-  }>(),
-  {
-    size: '24px',
-  },
-)
-</script>
-<script lang="ts">
-export type LoadingState = {
-  valid: boolean
-  invalid: boolean
-  isLoading: boolean
-}
-/**
- * Handles isLoading spinner for the FlowLoader Component
- * stateIsLoading will trigger the spinner
- * isValid or isInvalid will show a check or x and then spin out
- */
-export function useLoaderState() {
-  return reactive({
-    valid: false,
-    invalid: false,
-    isLoading: false,
-    startLoading() {
-      this.isLoading = true
-    },
-    stopLoading() {
-      this.isLoading = false
-    },
-    isValid(time = 800) {
-      this.valid = true
-      const diff = time - 300
-      // Allow chaining after animation
-      return new Promise((res) =>
-        setTimeout(() => this.clear().then(() => res(true)), diff),
-      )
-    },
-    isInvalid(time = 1100) {
-      this.invalid = true
-      const diff = time - 300
-      // Allow chaining after animation
-      return new Promise((res) =>
-        setTimeout(() => this.clear().then(() => res(true)), diff),
-      )
-    },
-    clear(time = 300) {
-      this.valid = false
-      this.invalid = false
-      this.isLoading = false
-      // Allow chaining after animation
-      return new Promise((res) => {
-        setTimeout(() => {
-          res(true)
-        }, time)
-      })
-    },
-  })
-}
-</script>
-<template>
-  <div
-    v-if="loaderState"
-    class="loader-wrapper">
-    <svg
-      class="svg-loader"
-      :class="{
-        'icon-is-valid': loaderState.valid,
-        'icon-is-invalid': loaderState.invalid,
-      }"
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink">
-      <path
-        class="svg-path svg-check-mark"
-        d="m 0 60 l 30 30 l 70 -80" />
-      <path
-        class="svg-path svg-x-mark"
-        d="m 50 50 l 40 -40" />
-      <path
-        class="svg-path svg-x-mark"
-        d="m 50 50 l 40 40" />
-      <path
-        class="svg-path svg-x-mark"
-        d="m 50 50 l -40 -40" />
-      <path
-        class="svg-path svg-x-mark"
-        d="m 50 50 l -40 40" />
-      <g
-        v-if="loaderState.isLoading"
-        class="circular-loader">
-        <circle
-          class="loader-path"
-          :class="{
-            'loader-path-off': loaderState.valid || loaderState.invalid,
-          }"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="20"
-          stroke-width="2" />
-      </g>
-    </svg>
-  </div>
-</template>
-<style scoped>
-.loader-wrapper {
-  position: relative;
-  height: v-bind(size);
-  width: v-bind(size);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  --loader-size: 50%;
-}
-
-/*SVG Positioning for Loader Objects*/
-.svg-loader {
-  width: var(--loader-size);
-  height: var(--loader-size);
-  top: 1rem;
-  right: 0.9rem;
-  overflow: visible;
-
-  fill: none;
-  background-color: transparent;
-  stroke: currentColor;
-}
-
-.svg-path {
-  stroke-width: 14;
-  fill: none;
-  transition: 0.3s;
-}
-
-.svg-x-mark {
-  stroke-dasharray: 57;
-  stroke-dashoffset: 57;
-  transition-delay: 0s;
-}
-
-.svg-check-mark {
-  stroke-dasharray: 149;
-  stroke-dashoffset: 149;
-  transition-delay: 0s;
-}
-
-.icon-is-invalid .svg-x-mark {
-  stroke-dashoffset: 0;
-  transition-delay: 0.3s;
-}
-
-.icon-is-valid .svg-check-mark {
-  stroke-dashoffset: 0;
-  transition-delay: 0.3s;
-}
-
-.circular-loader {
-  animation: rotate 0.7s linear infinite, fade-in 0.4s;
-
-  transform-origin: center center;
-  transform: scale(5);
-
-  background: transparent;
-}
-
-.loader-path {
-  stroke-dasharray: 50, 200;
-  stroke-dashoffset: -100;
-  stroke-linecap: round;
-}
-
-.loader-path-off {
-  stroke-dasharray: 50, 200;
-  stroke-dashoffset: -100;
-  transition: opacity 0.3s;
-  opacity: 0;
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  70% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: scale(5) rotate(0deg);
-  }
-  to {
-    transform: scale(5) rotate(360deg);
-  }
-}
-</style>

package/src/components/FlowModal.vue

@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import {
-  Dialog,
-  DialogDescription,
-  DialogPanel,
-  DialogTitle,
-} from '@headlessui/vue'
-import { reactive } from 'vue'
-
-withDefaults(
-  defineProps<{
-    state: ModalState
-    title?: string
-    bodyClass?: string
-    maxWidth?: string
-    variant?: 'small' | 'normal' | 'large'
-  }>(),
-  {
-    variant: 'normal',
-  },
-)
-</script>
-<script lang="ts">
-export type ModalState = ReturnType<typeof useModalState>
-
-export const useModalState = () =>
-  reactive({
-    open: false,
-    show() {
-      this.open = true
-    },
-    hide() {
-      this.open = false
-    },
-  })
-</script>
-<template>
-  <Dialog
-    :open="state.open"
-    @close="state.hide()">
-    <div class="modal-layout">
-      <DialogPanel
-        class="modal"
-        :class="{
-          'modal-content-large': variant === 'large',
-          'modal-content-normal': variant === 'normal',
-          'modal-content-small': variant === 'small',
-        }"
-        :style="{ maxWidth }">
-        <DialogTitle
-          v-if="title"
-          class="modal-header">
-          {{ title }}
-        </DialogTitle>
-        <DialogDescription
-          class="modal-body custom-scroll"
-          :class="[bodyClass]">
-          <slot />
-        </DialogDescription>
-      </DialogPanel>
-    </div>
-  </Dialog>
-</template>
-<style scoped>
-.modal-layout {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  top: 0;
-  left: 0;
-  z-index: 1001;
-  background: rgba(0, 0, 0, 0.44);
-  padding: 20px;
-  opacity: 0;
-  animation: modal-fade 0.2s forwards;
-}
-.modal-body {
-  padding: 24px 12px 18px 24px;
-  max-height: calc(100vh - 240px);
-  background: var(--theme-background-1);
-  border-radius: var(--theme-radius-lg);
-  font-family: var(--theme-font);
-}
-.modal {
-  margin: 80px auto 0;
-  position: relative;
-  background: var(--theme-background-2);
-  border-radius: var(--theme-radius-lg);
-  color: var(--theme-color-1);
-  width: 100%;
-  text-align: left;
-  line-height: 1.4;
-  opacity: 0;
-  transform: scale(0.98);
-  animation: modal-pop 0.15s 0.15s forwards;
-  display: flex;
-  flex-direction: column;
-}
-.modal-content-large {
-  max-width: 800px;
-}
-.modal-content-normal {
-  max-width: 640px;
-}
-.modal-content-small {
-  max-width: 480px;
-}
-@keyframes modal-fade {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes modal-pop {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-.modal-header {
-  padding: 12px 24px;
-  color: var(--theme-color-1);
-  font-size: var(--theme-font-size-4);
-  text-align: left;
-  font-weight: 600;
-  border-radius: var(--theme-radius-lg) var(--theme-radius-lg) 0 0;
-}
-</style>

package/src/components/HelpfulLink.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-defineProps<{ href: string }>()
-</script>
-<template>
-  <a
-    :href="href"
-    rel="noopener noreferrer"
-    target="_blank">
-    <slot />
-  </a>
-</template>
-<style scoped>
-a {
-  text-decoration: underline;
-  text-decoration-color: var(--theme-border-color);
-  text-underline-offset: 2px;
-  cursor: help;
-}
-</style>

package/src/components/Icon/FlowIcon.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import SvgRenderer from './SvgRenderer'
-import { type Icon, getIcon } from './icons/'
-
-const props = defineProps<{
-  icon: Icon
-}>()
-
-const data = computed(() => getIcon(props.icon))
-</script>
-<template>
-  <SvgRenderer
-    v-if="data"
-    class="flow-icon"
-    height="100%"
-    :raw="data" />
-</template>

package/src/components/Icon/Icon.vue

@@ -1,23 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-
-import SvgRenderer from './SvgRenderer'
-import { getLocalIcon } from './localIcons'
-
-const props = defineProps<{
-  src: string
-  title?: string
-}>()
-
-const data = computed(() => getLocalIcon(props.src))
-</script>
-<template>
-  <SvgRenderer
-    v-if="data"
-    :raw="data" />
-  <!-- Handle fallback -->
-  <img
-    v-else
-    :alt="title"
-    :src="src" />
-</template>

package/src/components/Icon/SvgRenderer.ts

@@ -1,66 +0,0 @@
-import {
-  type FunctionalComponent,
-  type SVGAttributes,
-  defineAsyncComponent,
-  h,
-} from 'vue'
-
-type RendererProps = {
-  raw: string
-  // All other attributes
-} & SVGAttributes
-
-const attrsToObject = (m: NamedNodeMap) =>
-  Object.fromEntries(Array.from(m).map((t) => [t.name, t.value]))
-
-// Can be the native DOMParser, or xmldom's DOMParser
-type DOMParserType = {
-  new (): DOMParser
-  prototype: DOMParser
-}
-
-/**
- * Utility component to convert a raw SVG string to a Vue vnode.
- *
- * @param {string} raw A raw string containing an SVG element.
- * @returns An SVG vnode or `undefined` if unparsable.
- */
-const getRendererComponent =
-  (Parser: DOMParserType): FunctionalComponent<RendererProps> =>
-  ({ raw }) => {
-    const parser = new Parser()
-    const parsed = parser.parseFromString(raw, 'image/svg+xml')
-
-    if (parsed.getElementsByTagName('parsererror').length) {
-      return undefined
-    }
-
-    const svg = parsed.documentElement
-    const attrs = attrsToObject(svg.attributes)
-
-    // Strip width and height attributes
-    const { width, height, ...rest } = attrs
-
-    return h('svg', { ...rest, innerHTML: svg.innerHTML })
-  }
-
-export default defineAsyncComponent(async () => {
-  // Use a DOMParser library if it's not in the browser
-  const Parser =
-    typeof DOMParser === 'undefined'
-      ? (await import('xmldom')).DOMParser
-      : DOMParser
-
-  // Get the actual component, pass the DOMParser
-  const Renderer = getRendererComponent(Parser)
-
-  // Add props to it
-  Renderer.props = {
-    raw: {
-      type: String,
-      required: true,
-    },
-  }
-
-  return Renderer
-})

package/src/components/Icon/brand/brand-adobe.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M23 2H1v20h22V2Zm-9.5 18.5h-11l7.5-17h4l7.5 17H17l-5-11L9 17h3l1.5 3.5Z" clip-rule="evenodd"></path></svg>

package/src/components/Icon/brand/brand-amazon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m16.412 16.24 1.587-1.468a.532.532 0 0 0 .027-.736c-.655-.764-.852-1.401-.852-1.862V6.046c.007-1.025-.973-3.076-4.945-3.076-3.538 0-4.826 2.1-5.115 3.495-.055.263.148.496.416.52l2.09.189c.255.023.483-.152.583-.387.26-.61.867-1.383 2.026-1.383 1.168 0 1.577.895 1.635 1.343V8.13c-5.724 0-7.204 2.492-7.204 4.867 0 2.376 1.733 3.563 3.855 3.563 1.409 0 2.709-.777 3.43-1.364a.547.547 0 0 1 .723.014l1.057 1.022a.5.5 0 0 0 .687.008Zm-3.53-2.578c1.283-.976.988-3.699.988-3.699s-2.412-.16-3.354 1.287c-.514.79-.348 1.862.275 2.412.519.458 1.392.532 2.091 0Zm8.949 3.373c-.155-.176-.868-.115-1.553-.057-.68.058-1.332.113-1.384-.067-.105-.361 3.165-1.198 3.973-.542.703.57-1.112 3.935-1.612 3.664-.1-.054.05-.461.232-.963.274-.751.626-1.716.344-2.035Zm-9.824 2.313c-4.527 0-7.771-1.568-9.447-2.378-.701-.339-1.127-.545-1.258-.447-.441.33 4.724 4.414 10.705 4.414 5.231 0 9.756-2.825 9.094-3.2-.237-.134-.733.033-1.534.304-1.442.486-3.872 1.307-7.56 1.307Z" clip-rule="evenodd"></path></svg>

package/src/components/Icon/brand/brand-browser-firefox.svg

@@ -1,5 +0,0 @@
-<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <title>Firefox Browser</title>
-    <path
-        d="M8.824 7.287c.008 0 .004 0 0 0zm-2.8-1.4c.006 0 .003 0 0 0zm16.754 2.161c-.505-1.215-1.53-2.528-2.333-2.943.654 1.283 1.033 2.57 1.177 3.53l.002.02c-1.314-3.278-3.544-4.6-5.366-7.477-.091-.147-.184-.292-.273-.446a3.545 3.545 0 01-.13-.24 2.118 2.118 0 01-.172-.46.03.03 0 00-.027-.03.038.038 0 00-.021 0l-.006.001a.037.037 0 00-.01.005L15.624 0c-2.585 1.515-3.657 4.168-3.932 5.856a6.197 6.197 0 00-2.305.587.297.297 0 00-.147.37c.057.162.24.24.396.17a5.622 5.622 0 012.008-.523l.067-.005a5.847 5.847 0 011.957.222l.095.03a5.816 5.816 0 01.616.228c.08.036.16.073.238.112l.107.055a5.835 5.835 0 01.368.211 5.953 5.953 0 012.034 2.104c-.62-.437-1.733-.868-2.803-.681 4.183 2.09 3.06 9.292-2.737 9.02a5.164 5.164 0 01-1.513-.292 4.42 4.42 0 01-.538-.232c-1.42-.735-2.593-2.121-2.74-3.806 0 0 .537-2 3.845-2 .357 0 1.38-.998 1.398-1.287-.005-.095-2.029-.9-2.817-1.677-.422-.416-.622-.616-.8-.767a3.47 3.47 0 00-.301-.227 5.388 5.388 0 01-.032-2.842c-1.195.544-2.124 1.403-2.8 2.163h-.006c-.46-.584-.428-2.51-.402-2.913-.006-.025-.343.176-.389.206-.406.29-.787.616-1.136.974-.397.403-.76.839-1.085 1.303a9.816 9.816 0 00-1.562 3.52c-.003.013-.11.487-.19 1.073-.013.09-.026.181-.037.272a7.8 7.8 0 00-.069.667l-.002.034-.023.387-.001.06C.386 18.795 5.593 24 12.016 24c5.752 0 10.527-4.176 11.463-9.661.02-.149.035-.298.052-.448.232-1.994-.025-4.09-.753-5.844z" />
-</svg>

package/src/components/Icon/brand/brand-browser-googlechrome.svg

@@ -1,5 +0,0 @@
-<svg fill="currentColor" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <title>Google Chrome</title>
-    <path
-        d="M12 0C8.21 0 4.831 1.757 2.632 4.501l3.953 6.848A5.454 5.454 0 0 1 12 6.545h10.691A12 12 0 0 0 12 0zM1.931 5.47A11.943 11.943 0 0 0 0 12c0 6.012 4.42 10.991 10.189 11.864l3.953-6.847a5.45 5.45 0 0 1-6.865-2.29zm13.342 2.166a5.446 5.446 0 0 1 1.45 7.09l.002.001h-.002l-5.344 9.257c.206.01.413.016.621.016 6.627 0 12-5.373 12-12 0-1.54-.29-3.011-.818-4.364zM12 16.364a4.364 4.364 0 1 1 0-8.728 4.364 4.364 0 0 1 0 8.728Z" />
-</svg>

package/src/components/Icon/brand/brand-creative-commons.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11ZM8.5 10c-.665 0-1.5.717-1.5 2s.835 2 1.5 2c.459 0 .96-.302 1.265-.934l1.801.868C11.006 15.096 9.892 16 8.5 16 6.404 16 5 14.03 5 12c0-2.03 1.404-4 3.5-4 1.392 0 2.507.904 3.066 2.066l-1.801.868C9.46 10.302 8.959 10 8.5 10Zm6 2c0-1.283.835-2 1.5-2 .459 0 .96.302 1.265.934l1.801-.868C18.506 8.904 17.392 8 16 8c-2.096 0-3.5 1.97-3.5 4 0 2.03 1.404 4 3.5 4 1.392 0 2.506-.904 3.066-2.066l-1.801-.868c-.305.632-.806.934-1.265.934-.665 0-1.5-.717-1.5-2Z" clip-rule="evenodd"></path></svg>