@scalar/api-client 0.5.0 → 0.5.2

package/src/components/CollapsibleSection/CollapsibleSection.vue

@@ -1,149 +0,0 @@
-<script lang="ts" setup>
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
-
-defineProps<{
-  title?: string
-}>()
-</script>
-
-<template>
-  <Disclosure
-    v-slot="{ open }"
-    :defaultOpen="true">
-    <div
-      class="scalar-api-client__item"
-      :class="{ 'scalar-api-client__item--open': open }">
-      <DisclosureButton class="scalar-api-client__toggle">
-        <svg
-          class="scalar-api-client__toggle__icon"
-          height="10"
-          viewBox="0 0 5 10"
-          width="5"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M0 10l5-5-5-5z"
-            fill="currentColor"
-            fill-rule="nonzero" />
-        </svg>
-        <span class="scalar-api-client__item__title">
-          {{ title }}
-        </span>
-        <div
-          v-if="$slots.options && open"
-          class="scalar-api-client__item__options">
-          <slot name="options" />
-        </div>
-      </DisclosureButton>
-      <DisclosurePanel>
-        <div class="scalar-api-client__item__content">
-          <slot />
-        </div>
-      </DisclosurePanel>
-    </div>
-  </Disclosure>
-</template>
-
-<style>
-.scalar-api-client__item {
-  border-radius: var(--theme-radius-lg);
-  margin-bottom: 6px;
-  background: var(--theme-background-2);
-  box-shadow: var(--shadow1);
-  position: relative;
-}
-
-.scalar-api-client__item button {
-  background-color: transparent;
-  text-align: left;
-}
-
-.scalar-api-client__item:hover {
-  cursor: pointer;
-}
-
-.scalar-api-client__item--open {
-  background: var(--theme-background-2);
-}
-
-.scalar-api-client__item--open:focus-within {
-  box-shadow: var(--shadow1);
-}
-
-.scalar-api-client__item--open .scalar-api-client__item__content {
-  display: flex;
-}
-
-.scalar-api-client__item--open:hover {
-  cursor: default;
-}
-
-.scalar-api-client__item--open .scalar-api-client__toggle__icon {
-  transform: rotate(90deg);
-}
-.scalar-api-client__toggle {
-  padding: 6px 12px;
-  min-height: 37px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  width: 100%;
-}
-
-.scalar-api-client__item .scalar-api-client__item__title {
-  color: var(--theme-color-1);
-  font-size: var(--theme-small);
-  font-weight: var(--theme-bold);
-  user-select: none;
-  flex: 1;
-}
-
-.scalar-api-client__item .scalar-api-client__item__title:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.scalar-api-client__item .scalar-api-client__toggle__icon {
-  width: 10px;
-  margin-right: 6px;
-  color: var(--theme-color-1);
-}
-
-.scalar-api-client__item__options {
-  position: relative;
-}
-
-.scalar-api-client__item__options span {
-  background: var(--theme-background-3);
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 12px;
-  pointer-events: none;
-  color: var(--theme-color-2);
-  border: 1px solid var(--theme-border-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.scalar-api-client__item__options span svg {
-  width: 9px;
-  height: 9px;
-  margin-left: 3px;
-}
-
-.scalar-api-client__item__options select {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-</style>

package/src/components/CollapsibleSection/index.ts

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

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>