refactor: update to DevTools v1

arashsheyda · Oct 26, 2023 · 1bec7a7 · 1bec7a7
1 parent 0b575fa
commit 1bec7a7
Show file tree

Hide file tree

Showing 14 changed files with 2,757 additions and 1,527 deletions.
diff --git a/client/app.vue b/client/app.vue
@@ -1,11 +1,6 @@
-<script lang="ts" setup>
-import './styles/global.css'
-</script>
-
 <template>
   <Html>
     <Body h-screen>
-      <Notification />
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>

diff --git a/client/components/CreateResource.vue b/client/components/CreateResource.vue
@@ -249,8 +249,8 @@ const toggleSchema = computed({
             <NTextInput v-else v-model="column.default" n="orange" />
           </div>
           <div flex justify-center gap2>
-            <NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
-            <NIconButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
+            <NButton icon="carbon-add" n="cyan" @click="addField(index)" />
+            <NButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
           </div>
         </div>
       </div>

diff --git a/client/components/DatabaseDetail.vue b/client/components/DatabaseDetail.vue
@@ -125,7 +125,7 @@ const copy = useCopy()
 
 <template>
   <div ref="dbContainer" :class="{ 'h-full': !documents?.length }">
-    <Navbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
+    <NNavbar v-model:search="search" sticky top-0 px4 py2 backdrop-blur z-10>
       <template #actions>
         <NButton icon="carbon:add" n="green" @click="addDocument">
           Add Document
@@ -155,7 +155,7 @@ const copy = useCopy()
           </NSelect>
         </div>
       </div>
-    </Navbar>
+    </NNavbar>
     <table v-if="documents?.length || selectedDocument" w-full mb10 :class="{ 'editing-mode': editing }">
       <thead>
         <tr>
@@ -180,14 +180,14 @@ const copy = useCopy()
           <td>
             <div flex justify-center gap2 class="group">
               <template v-if="editing && selectedDocument._id === document._id">
-                <NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
-                <NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
+                <NButton title="Save" icon="carbon-save" n="blue" @click="saveDocument(selectedDocument, false)" />
+                <NButton title="Cancel" icon="carbon-close" n="red" @click="discardEditing" />
               </template>
               <template v-else>
-                <NIconButton title="Edit" icon="carbon-edit" @click="editDocument(document)" />
-                <NIconButton title="Delete" icon="carbon-trash-can" @click="deleteDocument(document)" />
-                <NIconButton title="Duplicate" icon="carbon-document-multiple-02" @click="saveDocument(document)" />
-                <NIconButton title="Copy" n="xs" absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
+                <NButton title="Edit" icon="carbon-edit" n="blue" @click="editDocument(document)" />
+                <NButton title="Delete" icon="carbon-trash-can" n="red" @click="deleteDocument(document)" />
+                <NButton title="Duplicate" icon="carbon-document-multiple-02" n="cyan" @click="saveDocument(document)" />
+                <NButton title="Copy" n="xs purple" absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
               </template>
             </div>
           </td>
@@ -198,8 +198,8 @@ const copy = useCopy()
             <input v-else placeholder="ObjectId(_id)" disabled>
           </td>
           <td flex="~ justify-center gap2">
-            <NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument)" />
-            <NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
+            <NButton title="Save" icon="carbon-save" n="green" @click="saveDocument(selectedDocument)" />
+            <NButton title="Cancel" icon="carbon-close" n="red" @click="discardEditing" />
           </td>
         </tr>
       </tbody>

diff --git a/client/components/Drawer.vue b/client/components/Drawer.vue
diff --git a/client/components/Navbar.vue b/client/components/Navbar.vue
diff --git a/client/components/Notification.vue b/client/components/Notification.vue
diff --git a/client/components/SplitPanel.vue b/client/components/SplitPanel.vue
diff --git a/client/composables/dialog.ts b/client/composables/dialog.ts
diff --git a/client/composables/editor.ts b/client/composables/editor.ts
@@ -1,14 +1,14 @@
 import { useClipboard } from '@vueuse/core'
-import { showNotification } from './dialog'
+// import {  } from '@nuxt/devtools-ui-kit'
 
 export function useCopy() {
   const clipboard = useClipboard()
 
   return (text: string) => {
     clipboard.copy(text)
-    showNotification({
-      message: 'Copied to clipboard',
-      icon: 'carbon-copy',
-    })
+    // devtoolsUiShowNotification({
+    //   message: 'Copied to clipboard',
+    //   icon: 'carbon-copy',
+    // })
   }
 }
diff --git a/client/pages/index.vue b/client/pages/index.vue
@@ -36,32 +36,32 @@ async function refresh() {
 </script>
 
 <template>
-  <SplitPanel :min-left="13" :max-left="20">
+  <NSplitPane :min-left="13" :max-left="20">
     <template #left>
       <div px4>
-        <Navbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2>
+        <NNavbar v-model:search="search" :placeholder="`${collections?.length ?? '-'} collection in total`" mt2 no-padding>
           <div flex items-center gap2>
-            <NIconButton w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
-            <NIconButton w-full mb1.5 icon="carbon-data-base" title="Default" text-green-5 />
-            <NIconButton id="open-drawer-right" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
+            <NButton n="blue" w-full mb1.5 icon="carbon-reset" title="Refresh" @click="refresh" />
+            <!-- <NButton w-full mb1.5 icon="carbon-data-base" title="Default" n="green" /> -->
+            <NButton n="green" w-full mb1.5 icon="carbon-add" title="Create Collection" @click="drawer = true" />
           </div>
-        </Navbar>
+        </NNavbar>
         <div grid gird-cols-1 my2 mx1>
           <NuxtLink
             v-for="table in filtered"
             :key="table.name"
             :to="{ name: 'index', query: { table: table.name } }"
-            flex justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg
+            flex items-center justify-between p2 my1 hover-bg-green hover-bg-opacity-5 hover-text-green rounded-lg
             :class="{ 'bg-green bg-opacity-5 text-green': selectedCollection === table.name }"
             @click="selectedCollection = table.name"
           >
             <span>
               <NIcon icon="carbon-db2-database" />
               {{ table.name }}
             </span>
-            <div flex gap2>
-              <NIconButton block n="red" icon="carbon-trash-can" @click="dropCollection(table)" />
-              <!-- <NIconButton icon="carbon-overflow-menu-horizontal" /> -->
+            <div flex="~ items-center gap-2">
+              <NButton :border="false" n="red" icon="carbon-trash-can" @click="dropCollection(table)" />
+              <!-- <NButton :border="false" icon="carbon-overflow-menu-horizontal" /> -->
             </div>
           </NuxtLink>
         </div>
@@ -78,8 +78,8 @@ async function refresh() {
         </div>
       </div>
     </template>
-  </SplitPanel>
-  <Drawer v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false">
+  </NSplitPane>
+  <NDrawer v-model="drawer" style="width: calc(80.5%);" auto-close @close="drawer = false" z-20>
     <CreateResource @refresh="refresh" />
-  </Drawer>
+  </NDrawer>
 </template>
diff --git a/client/splitpanes.d.ts b/client/splitpanes.d.ts
diff --git a/client/styles/global.css b/client/styles/global.css