From 9e140052431c38af4f463a1f5334406cbb9b7a50 Mon Sep 17 00:00:00 2001
From: Arash Sheyda <sheidaeearash1999@gmail.com>
Date: Sun, 24 Sep 2023 22:47:24 -0600
Subject: [PATCH 1/2] feat(ui): NDrawer component

---
 .../src/components/NDrawer.vue                | 77 +++++++++++++++++++
 .../client/components/ComponentsGraph.vue     |  8 +-
 .../client/components/DataSchemaDrawer.vue    |  4 +-
 .../client/components/DrawerBottom.vue        | 54 -------------
 .../client/components/DrawerRight.vue         | 54 -------------
 .../client/components/TimelineView.vue        |  6 +-
 .../devtools/client/pages/modules/assets.vue  |  6 +-
 .../client/pages/modules/server-routes.vue    |  4 +-
 .../client/pages/modules/timeline.vue         |  2 +-
 9 files changed, 93 insertions(+), 122 deletions(-)
 create mode 100644 packages/devtools-ui-kit/src/components/NDrawer.vue
 delete mode 100644 packages/devtools/client/components/DrawerBottom.vue
 delete mode 100644 packages/devtools/client/components/DrawerRight.vue

diff --git a/packages/devtools-ui-kit/src/components/NDrawer.vue b/packages/devtools-ui-kit/src/components/NDrawer.vue
new file mode 100644
index 0000000000..c19b7e9bf8
--- /dev/null
+++ b/packages/devtools-ui-kit/src/components/NDrawer.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside, useElementSize } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  top?: HTMLElement | string
+  left?: HTMLElement | string
+  autoClose?: boolean
+  transition?: 'right' | 'bottom' | 'top'
+}>(), {
+  transition: 'right',
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const el = ref<HTMLElement>()
+
+const { height } = useElementSize(() => props.top as HTMLElement, undefined, { box: 'border-box' })
+
+const width = typeof props.left === 'string' && props.left.startsWith('#')
+  ? document.querySelector(props.left)?.getBoundingClientRect().width
+  : useElementSize(() => props.left as HTMLElement, undefined, { box: 'border-box' }).width
+
+onClickOutside(el, () => {
+  if (props.modelValue && props.autoClose)
+    emit('close')
+}, {
+  ignore: ['a', 'button', 'summary', '[role="dialog"]'],
+})
+
+const transitionType = {
+  right: {
+    'enter-from-class': 'transform translate-x-1/1',
+    'leave-to-class': 'transform translate-x-1/1',
+  },
+  top: {
+    'enter-from-class': 'transform translate-y--1/1',
+    'leave-to-class': 'transform translate-y--1/1',
+  },
+  bottom: {
+    'enter-from-class': 'transform translate-y-1/1',
+    'leave-to-class': 'transform translate-y-1/1',
+  },
+}
+</script>
+
+<template>
+  <Transition
+    v-bind="transitionType[transition]"
+    enter-active-class="duration-200 ease-in"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-200 ease-out"
+    leave-from-class="opacity-100"
+  >
+    <div
+      v-if="modelValue"
+      ref="el"
+      :border="`${transition === 'right' ? 'l' : transition === 'bottom' ? 't' : 'b'} base`"
+      flex="~ col gap-1"
+      :class="{ 'right-0': transition === 'right' || transition === 'bottom' }"
+      absolute bottom-0 z-10 z-20 of-auto text-sm glass-effect
+      :style="{
+        top: transition === 'bottom' ? 'auto' : `${height}px`,
+        left: transition === 'right' && !width ? 'auto' : `${width}px`,
+      }"
+      v-bind="$attrs"
+    >
+      <NIconButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" @click="$emit('close')" />
+      <div relative h-full w-full of-auto>
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>
diff --git a/packages/devtools/client/components/ComponentsGraph.vue b/packages/devtools/client/components/ComponentsGraph.vue
index a738d355ba..89974f9aa6 100644
--- a/packages/devtools/client/components/ComponentsGraph.vue
+++ b/packages/devtools/client/components/ComponentsGraph.vue
@@ -259,10 +259,10 @@ function setFilter() {
         </div>
       </div>
     </NCard>
-    <DrawerRight
+    <NDrawer
       :model-value="!!(selected && selected.component)"
-      :navbar="navbar"
-      w-80
+      :top="navbar"
+      border="t l base" w-80
       @close="selected = undefined"
     >
       <div v-if="selected && selected.component" py4 pt4 flex="~ col">
@@ -277,6 +277,6 @@ function setFilter() {
           </NButton>
         </div>
       </div>
-    </DrawerRight>
+    </NDrawer>
   </div>
 </template>
diff --git a/packages/devtools/client/components/DataSchemaDrawer.vue b/packages/devtools/client/components/DataSchemaDrawer.vue
index 331e82059a..a5d8896325 100644
--- a/packages/devtools/client/components/DataSchemaDrawer.vue
+++ b/packages/devtools/client/components/DataSchemaDrawer.vue
@@ -72,7 +72,7 @@ function copyToClipboard() {
 
 <template>
   <Teleport v-if="language" to="body">
-    <DrawerRight :model-value="!!input?.input" auto-close max-w-screen w-2xl n-code-block @close="input = null">
+    <NDrawer :model-value="!!input?.input" auto-close max-w-screen w-2xl n-code-block @close="input = null">
       <div border="b base" flex="~ items-center gap-2" sticky left-0 right-0 top-0 z-1 p3 bg-base>
         <p mr-2>
           Schema
@@ -106,6 +106,6 @@ function copyToClipboard() {
         <NIconButton icon="carbon-copy" border="~ base" mr-6 p3.1 @click="copyToClipboard()" />
       </div>
       <NCodeBlock v-if="generatedJson" :lang="shikiLanguage" :code="generatedJson" />
-    </DrawerRight>
+    </NDrawer>
   </Teleport>
 </template>
diff --git a/packages/devtools/client/components/DrawerBottom.vue b/packages/devtools/client/components/DrawerBottom.vue
deleted file mode 100644
index 622481a196..0000000000
--- a/packages/devtools/client/components/DrawerBottom.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  modelValue?: boolean
-  navbar?: HTMLElement
-  autoClose?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-const el = ref<HTMLElement>()
-
-onClickOutside(el, () => {
-  if (props.modelValue && props.autoClose)
-    emit('close')
-}, {
-  ignore: ['a', 'button', 'summary'],
-})
-
-const left = document.querySelector('#nuxt-devtools-side-nav')?.getBoundingClientRect().width
-</script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <Transition
-    enter-active-class="duration-200 ease-in"
-    enter-from-class="transform translate-y-1/1"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-200 ease-out"
-    leave-from-class="opacity-100"
-    leave-to-class="transform translate-y-1/1"
-  >
-    <div
-      v-if="modelValue"
-      ref="el"
-      border="t base"
-      flex="~ col gap-1"
-      absolute bottom-0 right-0 z-10 z-20 of-auto text-sm glass-effect
-      :style="{ left: `${left}px` }"
-      v-bind="$attrs"
-    >
-      <NIconButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" @click="$emit('close')" />
-      <div relative h-full w-full of-auto>
-        <slot />
-      </div>
-    </div>
-  </Transition>
-</template>
diff --git a/packages/devtools/client/components/DrawerRight.vue b/packages/devtools/client/components/DrawerRight.vue
deleted file mode 100644
index c67065982a..0000000000
--- a/packages/devtools/client/components/DrawerRight.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  modelValue?: boolean
-  navbar?: HTMLElement
-  autoClose?: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'close'): void
-}>()
-
-const el = ref<HTMLElement>()
-
-const { height: top } = useElementSize(() => props.navbar, undefined, { box: 'border-box' })
-
-onClickOutside(el, () => {
-  if (props.modelValue && props.autoClose)
-    emit('close')
-}, {
-  ignore: ['a', 'button', 'summary', '[role="dialog"]'],
-})
-</script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
-<template>
-  <Transition
-    enter-active-class="duration-200 ease-in"
-    enter-from-class="transform translate-x-1/1"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-200 ease-out"
-    leave-from-class="opacity-100"
-    leave-to-class="transform translate-x-1/1"
-  >
-    <div
-      v-if="modelValue"
-      ref="el"
-      border="l base"
-      flex="~ col gap-1"
-      absolute bottom-0 right-0 z-10 z-20 of-auto text-sm glass-effect
-      :style="{ top: `${top}px` }"
-      v-bind="$attrs"
-    >
-      <NIconButton absolute right-2 top-2 z-20 text-xl icon="carbon-close" @click="$emit('close')" />
-      <div relative h-full w-full of-auto>
-        <slot />
-      </div>
-    </div>
-  </Transition>
-</template>
diff --git a/packages/devtools/client/components/TimelineView.vue b/packages/devtools/client/components/TimelineView.vue
index 1b787ab71f..54fa3a7dfa 100644
--- a/packages/devtools/client/components/TimelineView.vue
+++ b/packages/devtools/client/components/TimelineView.vue
@@ -93,15 +93,17 @@ function toggleView() {
         @select="s => selected = s"
       />
     </div>
-    <DrawerBottom
+    <NDrawer
       :model-value="!!selected"
       auto-close
+      transition="bottom"
+      left="#nuxt-devtools-side-nav"
       @close="selected = undefined"
     >
       <div min-h-50 px3 py2>
         <TimelineDetailsFunction v-if="selected?.type === 'function'" :record="selected" />
         <TimelineDetailsRoute v-else-if="selected?.type === 'route'" :record="selected" />
       </div>
-    </DrawerBottom>
+    </NDrawer>
   </div>
 </template>
diff --git a/packages/devtools/client/pages/modules/assets.vue b/packages/devtools/client/pages/modules/assets.vue
index e0df41a08d..0397fa9fbf 100644
--- a/packages/devtools/client/pages/modules/assets.vue
+++ b/packages/devtools/client/pages/modules/assets.vue
@@ -125,14 +125,14 @@ const navbar = ref<HTMLElement>()
         :item="item"
       />
     </div>
-    <DrawerRight
+    <NDrawer
       :model-value="!!selected"
       auto-close w-120
-      :navbar="navbar"
+      :top="navbar"
       @close="selected = undefined"
     >
       <AssetDetails v-if="selected" v-model="selected" />
-    </DrawerRight>
+    </NDrawer>
   </div>
 </template>
 
diff --git a/packages/devtools/client/pages/modules/server-routes.vue b/packages/devtools/client/pages/modules/server-routes.vue
index 51bbf3ef4e..ec7a6bfd31 100644
--- a/packages/devtools/client/pages/modules/server-routes.vue
+++ b/packages/devtools/client/pages/modules/server-routes.vue
@@ -178,7 +178,7 @@ function capitalize(str: string) {
       </NPanelGrids>
     </template>
   </PanelLeftRight>
-  <DrawerRight v-model="inputDefaultsDrawer" auto-close max-w-xl min-w-xl @close="inputDefaultsDrawer = false">
+  <NDrawer v-model="inputDefaultsDrawer" auto-close max-w-xl min-w-xl @close="inputDefaultsDrawer = false">
     <div>
       <div p4 border="b base">
         <span text-lg>Default Inputs</span>
@@ -195,5 +195,5 @@ function capitalize(str: string) {
         <ServerRouteInputs v-model="inputDefaults[tab]" py0 :default="{ type: 'string' }" />
       </NSectionBlock>
     </div>
-  </DrawerRight>
+  </NDrawer>
 </template>
diff --git a/packages/devtools/client/pages/modules/timeline.vue b/packages/devtools/client/pages/modules/timeline.vue
index b3de52062f..a08b9f0d21 100644
--- a/packages/devtools/client/pages/modules/timeline.vue
+++ b/packages/devtools/client/pages/modules/timeline.vue
@@ -21,7 +21,7 @@ async function showPopup() {
 </script>
 
 <template>
-  <TimelineView v-if="options?.timeline?.enabled" />
+  <TimelineView v-if="!options?.timeline?.enabled" />
   <template v-else>
     <NPanelGrids>
       <LaunchPage

From 38ab90def9d01a5fdf7e867342280004b7d3a5f9 Mon Sep 17 00:00:00 2001
From: Arash <38922203+arashsheyda@users.noreply.github.com>
Date: Mon, 25 Sep 2023 19:11:17 +0300
Subject: [PATCH 2/2] chore

---
 packages/devtools/client/pages/modules/timeline.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devtools/client/pages/modules/timeline.vue b/packages/devtools/client/pages/modules/timeline.vue
index a08b9f0d21..b3de52062f 100644
--- a/packages/devtools/client/pages/modules/timeline.vue
+++ b/packages/devtools/client/pages/modules/timeline.vue
@@ -21,7 +21,7 @@ async function showPopup() {
 </script>
 
 <template>
-  <TimelineView v-if="!options?.timeline?.enabled" />
+  <TimelineView v-if="options?.timeline?.enabled" />
   <template v-else>
     <NPanelGrids>
       <LaunchPage