refactor: json outline ui

assets/scss/styles.scss

@@ -465,9 +465,11 @@ input[type="checkbox"] {
 .CodeMirror {
   @apply !h-auto;
 
-  // &:not(.CodeMirror-focused) .CodeMirror-activeline-background {
+  font-size: var(--body-font-size);
-  //   background: transparent !important;
+
-  // }
+  &:not(.CodeMirror-focused) .CodeMirror-activeline-background {
+    background: transparent !important;
+  }
 
   .CodeMirror-dialog-top {
     @apply bg-primaryLight;

components/lenses/renderers/JSONLensRenderer.vue

@@ -47,12 +47,10 @@
     <div
       v-if="outlinePath"
       class="
-        h-32
         bg-primaryLight
         border-t border-dividerLight
         flex flex-nowrap flex-1
-        py-2
+        px-2
-        px-4
         bottom-0
         z-10
         sticky
@@ -60,48 +58,84 @@
         hide-scrollbar
       "
     >
-      <div v-for="(item, index) in outlinePath" :key="`item-${index}`">
+      <div
-        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+        v-for="(item, index) in outlinePath"
+        :key="`item-${index}`"
+        class="flex items-center"
+      >
+        <tippy
+          ref="outlineOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
           <template #trigger>
-            <ButtonSecondary
+            <div v-if="item.kind === 'RootObject'" class="outline">{}</div>
-              v-if="item.kind === 'RootObject'"
+            <div v-if="item.kind === 'RootArray'" class="outline">[]</div>
-              :label="item.kind"
+            <div v-if="item.kind === 'ArrayMember'" class="outline">
-            />
+              {{ item.index.toString() }}
-            <ButtonSecondary
+            </div>
-              v-if="item.kind === 'RootArray'"
+            <div v-if="item.kind === 'ObjectMember'" class="outline">
-              :label="item.kind"
+              {{ item.name }}
-            />
+            </div>
-            <ButtonSecondary
-              v-if="item.kind === 'ArrayMember'"
-              :label="item.index.toString()"
-            />
-            <ButtonSecondary
-              v-if="item.kind === 'ObjectMember'"
-              :label="item.name"
-            />
           </template>
           <div
             v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
           >
-            <div v-if="item.kind === 'ArrayMember'">
+            <div v-if="item.kind === 'ArrayMember'" class="flex flex-col">
-              <ButtonSecondary
+              <SmartItem
-                v-for="(ast, astIndex) in item.astParent.values"
+                v-for="(arrayMember, astIndex) in item.astParent.values"
                 :key="`ast-${astIndex}`"
                 :label="astIndex.toString()"
-                @click.native="jumpCursor(ast)"
+                @click.native="
+                  () => {
+                    jumpCursor(arrayMember)
+                    outlineOptions[index].tippy().hide()
+                  }
+                "
               />
             </div>
-            <div v-if="item.kind === 'ObjectMember'">
+            <div v-if="item.kind === 'ObjectMember'" class="flex flex-col">
-              <ButtonSecondary
+              <SmartItem
-                v-for="(ast, astIndex) in item.astParent.members"
+                v-for="(objectMember, astIndex) in item.astParent.members"
                 :key="`ast-${astIndex}`"
-                :label="ast.key.value"
+                :label="objectMember.key.value"
-                @click.native="jumpCursor(ast)"
+                @click.native="
+                  () => {
+                    jumpCursor(objectMember)
+                    outlineOptions[index].tippy().hide()
+                  }
+                "
               />
             </div>
           </div>
+          <div v-if="item.kind === 'RootObject'" class="flex flex-col">
+            <SmartItem
+              label="{}"
+              @click.native="
+                () => {
+                  jumpCursor(item.astValue)
+                  outlineOptions[index].tippy().hide()
+                }
+              "
+            />
+          </div>
+          <div v-if="item.kind === 'RootArray'" class="flex flex-col">
+            <SmartItem
+              label="[]"
+              @click.native="
+                () => {
+                  jumpCursor(item.astValue)
+                  outlineOptions[index].tippy().hide()
+                }
+              "
+            />
+          </div>
         </tippy>
-        <i v-if="index + 1 !== outlinePath.length" class="mx-2 material-icons"
+        <i
+          v-if="index + 1 !== outlinePath.length"
+          class="text-secondaryLight opacity-50 material-icons"
           >chevron_right</i
         >
       </div>
@@ -110,13 +144,7 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
-  computed,
-  ref,
-  watchEffect,
-  useContext,
-  reactive,
-} from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import "codemirror/mode/javascript/javascript"
@@ -172,6 +200,7 @@ const ast = computed(() => {
   }
 })
 
+const outlineOptions = ref<any | null>(null)
 const jsonResponse = ref<any | null>(null)
 const linewrapEnabled = ref(true)
 
@@ -190,9 +219,6 @@ const { cursor } = useCodemirror(
 )
 
 const jumpCursor = (ast: JSONValue | JSONObjectMember) => {
-  console.log(jsonBodyText.value)
-  console.log(ast.start)
-  console.log(convertIndexToLineCh(jsonBodyText.value, ast.start))
   cursor.value = convertIndexToLineCh(jsonBodyText.value, ast.start)
 }
 
@@ -226,10 +252,6 @@ const outlinePath = computed(() => {
   } else return null
 })
 
-watchEffect(() => {
-  console.log(outlinePath.value)
-})
-
 const copyResponse = () => {
   copyToClipboard(responseBodyText.value)
   copyIcon.value = "check"
@@ -239,3 +261,17 @@ const copyResponse = () => {
   setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>
+
+<style lang="scss" scoped>
+.outline {
+  @apply cursor-pointer;
+  @apply flex-grow-0 flex-shrink-0;
+  @apply text-secondaryLight;
+  @apply inline-flex;
+  @apply items-center;
+  @apply px-2;
+  @apply py-1;
+  @apply transition;
+  @apply hover:text-secondary;
+}
+</style>

helpers/editor/codemirror.ts

@@ -201,7 +201,6 @@ export function useCodemirror(
   watch(cursor, (value) => {
     if (value !== cm.value?.getCursor()) {
       cm.value?.focus()
-      console.log(value)
       cm.value?.setCursor(value)
     }
   })

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "hoppscotch",
       "version": "2.0.0",
       "dependencies": {
         "@apollo/client": "^3.4.10",