@scalar/api-client 0.5.0 → 0.5.2

package/src/components/Grid/Grid.vue

@@ -1,511 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ items: any[] }>()
-
-const showDescription = ref(false)
-</script>
-<template>
-  <div class="table">
-    <div class="table-row">
-      <div class="table-row-item">
-        <label>Key</label>
-      </div>
-      <div class="table-row-item">
-        <label>Value</label>
-      </div>
-      <div
-        v-show="showDescription"
-        class="table-row-item">
-        <label>Description</label>
-      </div>
-      <div
-        class="table-row-meta"
-        @click="showDescription = !showDescription">
-        <svg
-          fill="currentColor"
-          height="12"
-          viewBox="0 0 18 12"
-          width="18"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M0 12h12v-2H0v2zM0 0v2h18V0H0zm0 7h18V5H0v2z"
-            fill-rule="nonzero" />
-        </svg>
-      </div>
-    </div>
-    <div
-      v-for="item in items"
-      :key="item.id"
-      class="table-row"
-      :class="item.customClass">
-      <div class="table-row-item">
-        <input
-          disabled
-          :value="item.name" />
-        <!-- <MultilineEditor
-          :elID="`key_${item}`"
-          :focus="newlyAdded === `key_${item}` ? true : false"
-          :placeholder="''"
-          :singleLineEditor="true"
-          :value="dataObject[item].key"
-          @update="value => $emit('updateKey', item, value)" /> -->
-        <!-- <input :value="dataObject[item].key" @input="$emit('updateKey', item, $event.target.value)" type="text"> -->
-      </div>
-      <div class="table-row-item">
-        <input
-          v-model="item.value"
-          placeholder="value" />
-        <!-- <MultilineEditor
-          :elID="`value_${item}`"
-          :focus="newlyAdded === `value_${item}` ? true : false"
-          :placeholder="''"
-          :singleLineEditor="true"
-          :value="dataObject[item].value"
-          @update="value => $emit('updateValue', item, value)" /> -->
-        <!-- <input :ref="`value_${item}`" :value="dataObject[item].value" @input="$emit('updateValue', item, $event.target.value)" type="text"> -->
-        <div class="table-row-item-menu">
-          <svg
-            height="16"
-            viewBox="0 0 4 16"
-            width="4"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              d="M2 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-              fill-rule="nonzero" />
-          </svg>
-        </div>
-      </div>
-      <div
-        v-show="showDescription"
-        class="table-row-item">
-        <!-- <input
-          :ref="`description_${item}`"
-          type="text"
-          :value="dataObject[item].description"
-          @input="$emit('updateDescription', item, $event.target.value)"> -->
-      </div>
-      <div class="table-row-meta">
-        <label class="meta-check">
-          <input type="checkbox" />
-          <span class="meta-checkmark" />
-        </label>
-        <!-- @click="$emit('deleteItem', item)">
-          <polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"  -->
-      </div>
-    </div>
-  </div>
-</template>
-<style>
-.table {
-  border: 1px solid var(--theme-border-color);
-  background: transparent;
-  border-radius: var(--theme-radius-lg);
-  width: 100%;
-}
-.table-row {
-  border-bottom: 1px solid var(--theme-border-color);
-  display: flex;
-  position: relative;
-}
-.table-row__add {
-  border-radius: 0 0 var(--theme-radius-lg) var(--theme-radius-lg);
-  border-bottom: none;
-}
-.table-row.required-parameter .table-row-item:nth-of-type(2):after {
-  content: 'Required';
-  position: absolute;
-  top: 4px;
-  right: 0;
-  padding: 5px 9px 5px 6px;
-  font-weight: var(--theme-semibold);
-  font-size: 12px;
-  background: var(--theme-background-2);
-  box-shadow: -2px 0 4px var(--theme-background-2);
-}
-.table-row.required-parameter
-  .table-row-item:nth-of-type(2):focus-within:after {
-  display: none;
-}
-.table-row:last-of-type {
-  border-bottom: none;
-}
-.table-row__active {
-  border-radius: 0 0 var(--theme-radius-lg) var(--theme-radius-lg);
-}
-.table-row-drag {
-  width: 20px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--theme-border-color);
-  align-items: center;
-  justify-content: center;
-  display: none;
-}
-.table-row-drag svg {
-  width: 6px;
-  fill: var(--theme-color-disabled);
-}
-.table-row-drag .table-row-drag-add {
-  width: 8px;
-}
-.table-row-item {
-  width: 100%;
-  border-right: 1px solid var(--theme-border-color);
-  position: relative;
-}
-.table-row-item-menu {
-  position: absolute;
-  right: 12px;
-  background: var(--theme-background-3);
-  border: 1px solid var(--theme-border-color);
-  width: 24px;
-  height: 24px;
-  top: 50%;
-  transform: translate3d(0, -50%, 0);
-  border-radius: var(--theme-radius-lg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  cursor: pointer;
-}
-.table-row-item input:focus + .table-row-item-menu,
-.table-row-item:hover .table-row-item-menu {
-  opacity: 1;
-}
-.table-row-item-menu svg {
-  height: 12px;
-  width: initial;
-  fill: var(--theme-color-disabled);
-}
-.table-row-item input {
-  border: none;
-  appearance: none;
-  outline: none;
-  padding: 9px;
-  width: 100%;
-  color: var(--theme-color-1);
-  font-size: 12px;
-}
-.table-row-item input[disabled] {
-  background: transparent;
-  font-family: var(--theme-font-code);
-}
-.table-row-item input:focus {
-  background: var(--theme-background-2);
-}
-.table-row-item label {
-  background: transparent;
-  text-transform: uppercase;
-  display: block;
-  padding: 9px;
-  font-weight: var(--theme-bold);
-  color: var(--theme-color-disabled);
-  font-size: 12px;
-}
-.table-row-meta {
-  overflow: hidden;
-  flex-shrink: 0;
-  transition: all 0.15s ease-in-out;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  user-select: none;
-}
-.table-row-meta-check {
-  width: 18px;
-  height: 18px;
-  border-radius: var(--theme-radius-lg);
-  background: rgba(47, 177, 228, 0.1);
-}
-.table-row-meta svg {
-  width: 13px;
-  height: 13px;
-  margin: 0 1px;
-  color: var(--theme-color-disabled);
-  cursor: pointer;
-}
-.table-row-meta svg:hover {
-  color: var(--theme-color-2);
-}
-.meta-check {
-  display: flex;
-  position: relative;
-  cursor: pointer;
-  align-items: center;
-  font-size: 12px;
-  border-radius: var(--theme-radius-lg);
-  user-select: none;
-  margin: 0 1px;
-  transition: all 0.15s ease-in-out;
-}
-.meta-check input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-.meta-checkmark {
-  height: 15px;
-  width: 15px;
-  background: var(--theme-background-1);
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-.meta-check .meta-checkmark:after {
-  content: '';
-  display: none;
-  width: 5px;
-  height: 8px;
-  border: solid var(--theme-color-1);
-  border-width: 0 1.5px 1.5px 0;
-  transform: rotate(45deg) translate3d(0, -1px, 0);
-}
-.meta-check input:checked ~ .meta-checkmark:after {
-  display: block;
-}
-</style>
-<style>
-.navtable {
-  width: 100%;
-}
-.navtable-follow {
-  background-color: black;
-  color: white;
-  font-size: 9px;
-  padding: 6px;
-  display: -webkit-box;
-  max-width: 250px;
-  -webkit-line-clamp: 12;
-  border-radius: 3px;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  line-height: 1.24;
-  transform: translate3d(10px, 0, 0);
-}
-.navtable-follow:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 6px;
-  background-color: black;
-}
-.navtable-follow * {
-  font-family: var(--theme-font-code) !important;
-}
-.navtable-table {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-height: 381px;
-}
-.navtable-item {
-  display: flex;
-  position: relative;
-  color: var(--theme-color-1);
-  border-top: 1px solid var(--theme-border-color);
-  font-weight: var(--theme-semibold);
-}
-.navtable-item > div {
-  word-wrap: break-word;
-}
-.navtable-item > div:not(:first-child) {
-  border-left: 1px solid var(--theme-border-color);
-}
-.navtable-item-action {
-  color: var(--theme-color-2);
-  font-size: 12px;
-  font-weight: var(--theme-bold);
-  background: var(--scalar-api-client-bg3);
-  border: none;
-  border-radius: 30px;
-  appearance: none;
-  max-height: 25px;
-  margin-left: 12px;
-  margin-right: 6px;
-  padding: 4px 8px;
-  outline: none;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s ease-in-out;
-  white-space: nowrap;
-  position: relative;
-}
-.navtable-item-action:hover {
-  color: var(--theme-color-1);
-  background: var(--scalar-api-client-gradient);
-  box-shadow: 0 0 0 1px var(--theme-border-color);
-}
-.navtable-item-action:focus {
-  background: var(--theme-background-2);
-}
-.navtable-item:hover,
-.navtable-item:focus-within .navtable-item-action {
-  opacity: 1;
-}
-.navtable-item-add {
-  display: flex;
-  align-items: center;
-  padding: 9px;
-  font-weight: var(--theme-bold);
-  outline: none;
-  border: none;
-  appearance: none;
-  background: transparent;
-  color: var(--theme-color-1);
-}
-.navtable-item-add:hover {
-  background: var(--theme-background-2);
-  cursor: pointer;
-}
-.navtable-item-25 {
-  width: 25%;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-}
-.navtable-item-33 {
-  width: 33.33333%;
-  display: flex;
-  font-size: 12px;
-  align-items: center;
-}
-.navtable-item-66 {
-  width: 66.6666%;
-  display: flex;
-  font-size: 12px;
-  align-items: center;
-}
-.navtable-item-75 {
-  width: 75%;
-  display: flex;
-  align-items: center;
-}
-.navtable-item-75:focus-within {
-  background: var(--theme-background-2);
-}
-.navtable-item-40 {
-  width: 40%;
-  display: flex;
-  align-items: center;
-}
-.navtable-item-20 {
-  width: 20%;
-  display: flex;
-  align-items: center;
-}
-.navtable-item-50 {
-  width: 50%;
-  display: flex;
-  align-items: center;
-}
-.navtable-item-50:focus-within {
-  background: var(--theme-background-2);
-}
-.navtable-item p {
-  padding: 9px;
-}
-.navtable-item input {
-  padding: 12px 6px;
-  border: none;
-  outline: none;
-  appearance: none;
-  font-size: 12px;
-  color: var(--theme-color-1);
-  background: transparent;
-  width: 100%;
-}
-.navtable-item input:focus {
-  background: var(--theme-background-2);
-}
-.navtable-item-select {
-  position: relative;
-}
-.navtable-item-select select {
-  background: transparent;
-  outline: none;
-  border: none;
-  font-size: 12px;
-  appearance: none;
-  width: 100%;
-  padding: 12px 6px;
-  top: 0;
-  position: relative;
-  cursor: pointer;
-  color: var(--theme-color-2);
-}
-.navtable-item-select svg {
-  position: absolute;
-  right: 6px;
-  color: var(--theme-color-ghost);
-  width: 6px;
-  top: 12px;
-  pointer-events: none;
-}
-.navtable-item .option {
-  padding: 12px 6px;
-  font-size: 12px;
-  color: var(--theme-color-1);
-  width: 100%;
-}
-.navtable-item label {
-  color: var(--theme-color-disabled);
-  font-size: 12px;
-  font-weight: var(--theme-bold);
-  text-transform: uppercase;
-  padding: 9px;
-  display: block;
-  width: 100%;
-}
-.navtable-item-response {
-  padding: 0 9px;
-}
-.navtable-item-response span {
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  margin-right: 6px;
-  min-width: 50px;
-}
-.scalar-api-client__status--1xx:before,
-.scalar-api-client__status--2xx:before,
-.scalar-api-client__status--3xx:before,
-.scalar-api-client__status--4xx:before,
-.scalar-api-client__status--5xx:before,
-.scalar-api-client__status--6xx:before {
-  content: '';
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  margin-right: 4px;
-  background: var(--theme-background-2);
-}
-.scalar-api-client__status--2xx:before {
-  background: green;
-}
-.scalar-api-client__status--3xx:before {
-  background: orange;
-}
-.scalar-api-client__status--4xx:before {
-  background: red;
-}
-.navtable-item-response span:empty {
-  display: none;
-}
-.simpletable.navtable {
-  padding: 0;
-}
-.simpletable.navtable .navtable-item-66,
-.simpletable.navtable .navtable-item-33 {
-  display: block;
-}
-.simpletable.navtable .navtable-table {
-  height: fit-content;
-}
-</style>

package/src/components/Grid/SimpleGrid.vue

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-defineProps<{ items: any[] }>()
-</script>
-
-<template>
-  <div class="navtable simpletable">
-    <div class="navtable-table">
-      <div class="navtable-item navtable-item__top">
-        <div class="navtable-item-33">
-          <label for="">Name</label>
-        </div>
-        <div class="navtable-item-66">
-          <label for="">Value</label>
-        </div>
-      </div>
-      <div
-        v-for="item in items"
-        :key="item.id"
-        class="navtable-item">
-        <div class="navtable-item-33">
-          <p>
-            {{ item.name }}
-          </p>
-        </div>
-        <div class="navtable-item-66">
-          <p>
-            {{ item.value }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/Grid/index.ts

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

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/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 {
-  border-right: 1px solid var(--theme-border-color);
-  position: relative;
-  padding: 0.75em;
-  color: var(--theme-color-1);
-  white-space: nowrap;
-}
-
-.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,14 +0,0 @@
-<template>
-  <tr class="simple-row">
-    <slot />
-  </tr>
-</template>
-<style scoped>
-.simple-row {
-  border-top: 1px solid var(--theme-border-color);
-}
-
-.simple-row:last-of-type {
-  border-bottom: 1px solid var(--theme-border-color);
-}
-</style>

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%;
-  margin: 1em 0;
-}
-</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'