feat(ui): NDrawer component (#435)

Author: arashsheyda

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>

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>

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>

packages/devtools/client/components/DrawerBottom.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>

packages/devtools/client/components/DrawerRight.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>
 

packages/devtools/client/components/TimelineView.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>