@scalar/api-client 0.2.0 → 0.2.1

package/src/components/Grid/Grid.vue

@@ -0,0 +1,511 @@
+<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

@@ -0,0 +1,33 @@
+<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

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

package/src/components/HelpfulLink.vue

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,13 @@
+<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

@@ -0,0 +1,4 @@
+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'