refactor: update to DevTools v1

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>

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>

client/components/Drawer.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { onClickOutside, useElementSize } from '@vueuse/core'
-
-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>

client/components/Navbar.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-defineProps({
-  search: {
-    type: String,
-    default: undefined,
-  },
-  noPadding: {
-    type: Boolean,
-    default: true,
-  },
-  placeholder: {
-    type: String,
-    default: 'Search...',
-  },
-})
-
-const emit = defineEmits<{
-  (event: 'update:search', value: string): void
-}>()
-
-function update(event: any) {
-  emit('update:search', event.target.value)
-}
-</script>
-
-<template>
-  <div flex="~ col gap2" border="b base" flex-1 navbar-glass :class="[{ p4: !noPadding }]">
-    <div flex="~ gap4">
-      <slot name="search">
-        <NTextInput
-          :placeholder="placeholder"
-          icon="carbon-search"
-          n="primary" flex-auto
-          :class="{ 'px-5 py-2': !noPadding }"
-          :value="search"
-          @input="update"
-        />
-      </slot>
-      <slot name="actions" />
-    </div>
-    <slot />
-  </div>
-</template>

client/components/Notification.vue

@@ -1,34 +0,0 @@
-<script setup lang='ts'>
-const show = ref(false)
-const icon = ref<string | undefined>()
-const text = ref<string | undefined>()
-const classes = ref<string | undefined>()
-
-provideNotificationFn((data) => {
-  text.value = data.message
-  icon.value = data.icon
-  classes.value = data.classes ?? 'text-green'
-  show.value = true
-  setTimeout(() => {
-    show.value = false
-  }, data.duration ?? 1500)
-})
-</script>
-
-<template>
-  <div
-    fixed left-0 right-0 top-0 z-999 text-center
-    :class="show ? '' : 'pointer-events-none overflow-hidden'"
-  >
-    <div
-      border="~ base"
-      flex="~ inline gap2"
-      m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
-      :style="show ? {} : { transform: 'translateY(-300%)' }"
-      :class="[show ? 'shadow' : 'shadow-none', classes]"
-    >
-      <div v-if="icon" :class="icon" />
-      <div>{{ text }}</div>
-    </div>
-  </div>
-</template>

client/components/SplitPanel.vue

@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { Pane, Splitpanes } from 'splitpanes'
-import 'splitpanes/dist/splitpanes.css'
-
-const props = defineProps<{
-  storageKey?: string
-  leftSize?: number
-  minSize?: number
-}>()
-
-const DEFAULT = 30
-
-const state = ref()
-const key = props.storageKey
-const size = key
-  ? computed({
-    get: () => state.value[key] || props.leftSize || DEFAULT,
-    set: (v) => { state.value[key] = v },
-  })
-  : ref(props.leftSize || DEFAULT)
-</script>
-
-<template>
-  <Splitpanes h-full of-hidden @resize="size = $event[0].size">
-    <Pane border="r base" h-full class="of-auto!" :size="size" :min-size="$slots.right ? (minSize || 10) : 100">
-      <slot name="left" />
-    </Pane>
-    <Pane v-if="$slots.right" relative h-full class="of-auto!" :min-size="minSize || 10">
-      <slot name="right" />
-    </Pane>
-  </Splitpanes>
-</template>