<template> <div> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" :horizontal="!(windowInnerWidth.x.value >= 768)" > <Pane class="hide-scrollbar !overflow-auto"> <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal > <Pane class="hide-scrollbar !overflow-auto"> <GraphqlRequest :conn="gqlConn" /> <GraphqlRequestOptions :conn="gqlConn" /> </Pane> <Pane class="hide-scrollbar !overflow-auto"> <GraphqlResponse :conn="gqlConn" /> </Pane> </Splitpanes> </Pane> <Pane v-if="RIGHT_SIDEBAR" max-size="35" size="25" min-size="20" class="hide-scrollbar !overflow-auto" > <GraphqlSidebar :conn="gqlConn" /> </Pane> </Splitpanes> </div> </template> <script lang="ts"> import { defineComponent, watch } from "@nuxtjs/composition-api" import { Splitpanes, Pane } from "splitpanes" import "splitpanes/dist/splitpanes.css" import { useSetting } from "~/newstore/settings" import { GQLConnection } from "~/helpers/GQLConnection" import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables" import useWindowSize from "~/helpers/utils/useWindowSize" export default defineComponent({ components: { Splitpanes, Pane }, beforeRouteLeave(_to, _from, next) { if (this.gqlConn.connected$.value) { this.gqlConn.disconnect() } next() }, setup() { const nuxt = useNuxt() const gqlConn = new GQLConnection() const isLoading = useReadonlyStream(gqlConn.isLoading$, false) watch(isLoading, () => { if (isLoading) nuxt.value.$loading.start() else nuxt.value.$loading.finish() }) return { windowInnerWidth: useWindowSize(), RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"), gqlConn, } }, head() { return { title: `${this.$t("navigation.graphql")} • Hoppscotch`, } }, }) </script>