feat(ui): NNavbar component (#442)

Author: arashsheyda

…es/devtools/client/components/Navbar.vue …vtools-ui-kit/src/components/NNavbar.vuepackages/devtools/client/components/Navbar.vue renamed to packages/devtools-ui-kit/src/components/NNavbar.vue packages/devtools/client/components/Navbar.vue renamed to packages/devtools-ui-kit/src/components/NNavbar.vue

@@ -1,14 +1,8 @@
 <script setup lang="ts">
-defineProps({
-  search: {
-    type: String,
-    default: undefined,
-  },
-  noPadding: {
-    type: Boolean,
-    default: false,
-  },
-})
+defineProps<{
+  search?: string
+  noPadding?: boolean
+}>()
 
 const emit = defineEmits<{
   (event: 'update:search', value: string): void
@@ -20,9 +14,9 @@ function update(event: any) {
 </script>
 
 <template>
-  <div flex="~ col gap2" border="b base" flex-1 navbar-glass :class="[{ p4: !noPadding }]">
+  <div flex="~ col gap2" border="b base" flex-1 n-navbar-glass :class="[{ p4: !noPadding }]">
     <div flex="~ gap4" items-center>
-      <slot name="search">
+      <slot v-if="search !== undefined" name="search">
         <NTextInput
           placeholder="Search..."
           icon="carbon-search"

packages/devtools-ui-kit/src/unocss.ts

@@ -154,6 +154,10 @@ export function unocssPreset(): Preset {
       'n-loading': 'flex h-full w-full justify-center items-center',
       'n-panel-grids': 'n-panel-grids-light dark:n-panel-grids-dark',
       'n-panel-grids-center': 'n-panel-grids flex flex-col h-full gap-2 items-center justify-center',
+
+      // glass
+      'n-glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#151515]/90',
+      'n-navbar-glass': 'sticky z-10 top-0 n-glass-effect',
     },
   }
 }

packages/devtools/client/components/ComponentsGraph.vue

@@ -200,7 +200,7 @@ function setFilter() {
 </script>
 
 <template>
-  <Navbar ref="navbar" absolute left-0 right-0 top-0>
+  <NNavbar ref="navbar" absolute left-0 right-0 top-0>
     <template #search>
       <div flex="~ gap-4 wrap" w-full>
         <NCheckbox v-model="showPages" n="primary sm">
@@ -225,7 +225,7 @@ function setFilter() {
       <div flex-auto />
       <slot />
     </template>
-  </Navbar>
+  </NNavbar>
 
   <div relative h-full w-full>
     <div ref="container" h-full w-full />

packages/devtools/client/components/ComponentsList.vue

@@ -85,7 +85,7 @@ const filtered = computed(() => {
 </script>
 
 <template>
-  <Navbar v-model:search="search" pb3>
+  <NNavbar v-model:search="search" pb3>
     <template #actions>
       <slot />
     </template>
@@ -101,7 +101,7 @@ const filtered = computed(() => {
         ]"
       />
     </div>
-  </Navbar>
+  </NNavbar>
   <NSectionBlock
     v-if="filtered.user.length"
     icon="carbon-nominal"

packages/devtools/client/pages/modules/assets.vue

@@ -79,7 +79,7 @@ const navbar = ref<HTMLElement>()
 
 <template>
   <div h-full of-auto>
-    <Navbar ref="navbar" v-model:search="search" pb2>
+    <NNavbar ref="navbar" v-model:search="search" pb2>
       <template #actions>
         <div flex-none flex="~ gap2 items-center">
           <NButton
@@ -95,7 +95,7 @@ const navbar = ref<HTMLElement>()
         <span v-if="search">{{ filtered.length }} matched · </span>
         <span>{{ assets?.length }} assets in total</span>
       </div>
-    </Navbar>
+    </NNavbar>
 
     <AssetDropZone folder="/" />
 

packages/devtools/client/pages/modules/imports.vue

@@ -75,7 +75,7 @@ const filtered = computed(() => {
 
 <template>
   <div v-if="config" relative h-full of-auto>
-    <Navbar v-model:search="search" pb3>
+    <NNavbar v-model:search="search" pb3>
       <div v-if="importsMetadata" flex="~ gap-2 items-center">
         <NIcon icon="carbon-filter" op50 />
         <NSelectTabs
@@ -88,7 +88,7 @@ const filtered = computed(() => {
           ]"
         />
       </div>
-    </Navbar>
+    </NNavbar>
     <NSectionBlock
       v-if="filtered.user.size"
       :open="filtered.count.user <= DETAILS_MAX_ITEMS"

packages/devtools/client/pages/modules/open-graph.vue

@@ -95,7 +95,7 @@ until(router).toBeTruthy().then((v) => {
 <template>
   <div flex="~" h-full w-full of-hidden>
     <div h-full flex-auto of-auto>
-      <Navbar>
+      <NNavbar>
         <template #search>
           <NTextInput
             v-model="routeInput"
@@ -135,7 +135,7 @@ until(router).toBeTruthy().then((v) => {
             />
           </div>
         </template>
-      </Navbar>
+      </NNavbar>
       <div flex="~ col">
         <NSectionBlock
           text="Tags"

packages/devtools/client/pages/modules/server-routes.vue

@@ -133,7 +133,7 @@ function capitalize(str: string) {
 <template>
   <NSplitPane storage-key="tab-server-routes">
     <template #left>
-      <Navbar v-model:search="search" pb2>
+      <NNavbar v-model:search="search" pb2>
         <template #actions>
           <NButton
             v-tooltip="'Toggle View'"
@@ -156,7 +156,7 @@ function capitalize(str: string) {
           <span v-if="search" op50>{{ filtered.length }} matched · </span>
           <span op50>{{ serverRoutes?.length }} routes in total</span>
         </div>
-      </Navbar>
+      </NNavbar>
 
       <ServerRouteListItem
         v-for="item in view === 'tree' ? filterByCollection : filtered"

packages/devtools/client/pages/modules/virtual-files.vue

@@ -63,7 +63,7 @@ const filteredFiles = computed(() => {
 <template>
   <NSplitPane class="virtual-files" storage-key="tab-virtual-files">
     <template #left>
-      <Navbar
+      <NNavbar
         v-model:search="searchString"
         no-padding p3
       />

packages/devtools/client/uno.config.ts

@@ -8,8 +8,6 @@ export default defineConfig({
       'bg-base': 'n-bg-base',
       'bg-active': 'n-bg-active',
       'border-base': 'n-border-base',
-      'glass-effect': 'backdrop-blur-6 bg-white/80 dark:bg-[#151515]/90',
-      'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
       'text-secondary': 'color-black/50 dark:color-white/50',