feat: version 1.0.0 (#21)

client/components/Connection.vue

@@ -1,33 +1,53 @@
 <script lang="ts" setup>
-defineProps({
-  connection: {
+import { computed } from 'vue'
+
+const props = defineProps({
+  code: {
     type: Number,
     default: 0,
   },
 })
+
+const connections = [
+  {
+    color: 'text-red-5',
+    border: 'border-red-5',
+    status: 'Not Connected',
+    description: 'Please Check Your Connection!',
+  },
+  {
+    color: 'text-green-5',
+    border: 'border-green-5',
+    status: 'Connected',
+    description: 'Everything is Working Perfectly!',
+  },
+  {
+    color: 'text-yellow-5',
+    border: 'border-yellow-5',
+    status: 'Connecting',
+    description: 'Just a Moment, We"re Getting There!',
+  },
+  {
+    color: 'text-orange-5',
+    border: 'border-orange-5',
+    status: 'Disconnecting',
+    description: 'Preparing to Safely Disconnect!',
+  },
+]
+
+const connection = computed(() => connections[props.code])
 </script>
 
 <template>
   <NPanelGrids>
-    <div flex="~ gap-2" animate-pulse items-center text-yellow>
-      <NIcon icon="carbon-flow-connection" />
-      Please check your mongodb connection
-    </div>
-    <div flex="~ gap-2" items-center text-light>
-      Your current connection is: {{ connection }}
+    <div flex="~ gap-2" animate-pulse items-center text-lg font-bold :class="connection.color">
+      ({{ code }}):
+      {{ connection.status }},
+      {{ connection.description }}
     </div>
     <div absolute bottom-10 left-10 right-10 flex justify-around>
-      <NCard p2 text-red-5>
-        0: Not connected
-      </NCard>
-      <NCard p2 text-green-5>
-        1: Connected
-      </NCard>
-      <NCard p2 text-yellow-5>
-        2: Connecting
-      </NCard>
-      <NCard p2 text-orange-5>
-        3: Disconnecting
+      <NCard v-for="item, index of connections" :key="index" p2 :class="[item.color, item.status === connection.status ? item.border : '']">
+        ({{ index }}): {{ item.status }}
       </NCard>
     </div>
   </NPanelGrids>

client/components/CreateResource.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import { useRouter } from 'nuxt/app'
+import { computed, reactive, ref } from 'vue'
+import { rpc } from '../composables/rpc'
+
 interface ColumnInterface {
   name: string
   type: string
@@ -115,10 +119,8 @@ const convertedBread = computed(() => {
 const formattedFields = computed(() => {
   return fields.value.map((field) => {
     for (const [key, value] of Object.entries(field)) {
-      if (!value) {
-        // @ts-expect-error - no need for type checking
+      if (!value)
         delete field[key]
-      }
     }
 
     return field
@@ -126,7 +128,7 @@ const formattedFields = computed(() => {
 })
 
 async function generate() {
-  await rpc.generateResource(
+  await rpc.value?.generateResource(
     {
       name: collection.value,
       fields: schema.value ? formattedFields.value : undefined,
@@ -142,6 +144,7 @@ async function generate() {
 const toggleSchema = computed({
   get() {
     if (hasBread.value)
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
       return schema.value = true
     return schema.value
   },
@@ -247,7 +250,7 @@ const toggleSchema = computed({
           </div>
           <div flex justify-center gap2>
             <NIconButton icon="carbon-add" n="cyan" @click="addField(index)" />
-            <NIconButton icon="carbon-delete" n="red" @click="removeField(index)" />
+            <NIconButton icon="carbon-trash-can" n="red" @click="removeField(index)" />
           </div>
         </div>
       </div>
@@ -257,5 +260,3 @@ const toggleSchema = computed({
     </NButton>
   </div>
 </template>
-
-<style></style>

client/components/DatabaseDetail.vue

@@ -1,4 +1,9 @@
 <script lang="ts" setup>
+import { computed, reactive, ref, watch } from 'vue'
+import { computedAsync } from '@vueuse/core'
+import { rpc } from '../composables/rpc'
+import { useCopy } from '../composables/editor'
+
 const props = defineProps({
   collection: {
     type: String,
@@ -10,19 +15,19 @@ const props = defineProps({
 const pagination = reactive({ limit: 20, page: 1 })
 
 const countDocuments = computedAsync(async () => {
-  return await rpc.countDocuments(props.collection)
+  return await rpc.value?.countDocuments(props.collection)
 })
 
 const documents = computedAsync(async () => {
-  return await rpc.listDocuments(props.collection, pagination)
+  return await rpc.value?.listDocuments(props.collection, pagination)
 })
 
 watch(pagination, async () => {
-  documents.value = await rpc.listDocuments(props.collection, pagination)
+  documents.value = await rpc.value?.listDocuments(props.collection, pagination)
 })
 
 const schema = computedAsync<any>(async () => {
-  return await rpc.resourceSchema(props.collection)
+  return await rpc.value?.resourceSchema(props.collection)
 })
 
 const fields = computed(() => {
@@ -79,7 +84,9 @@ function editDocument(document: any) {
 }
 
 async function saveDocument(document: any, create = true) {
-  const method = create ? rpc.createDocument : rpc.updateDocument
+  const method = create ? rpc.value?.createDocument : rpc.value?.updateDocument
+  if (!method)
+    return
   const newDocument = await method(props.collection, document)
   // TODO: show toast
   if (newDocument?.error)
@@ -87,7 +94,7 @@ async function saveDocument(document: any, create = true) {
 
   if (create) {
     if (!documents.value.length) {
-      documents.value = await rpc.listDocuments(props.collection, pagination)
+      documents.value = await rpc.value?.listDocuments(props.collection, pagination)
       return discardEditing()
     }
     documents.value.push({ _id: newDocument.insertedId, ...document })
@@ -105,7 +112,7 @@ function discardEditing() {
 }
 
 async function deleteDocument(document: any) {
-  const newDocument = await rpc.deleteDocument(props.collection, document._id)
+  const newDocument = await rpc.value?.deleteDocument(props.collection, document._id)
   // TODO: show toast
   if (newDocument.deletedCount === 0)
     return
@@ -170,17 +177,17 @@ const copy = useCopy()
               {{ document[field] }}
             </span>
           </td>
-          <td class="actions">
+          <td>
             <div flex justify-center gap2 class="group">
               <template v-if="editing && selectedDocument._id === document._id">
-                <NIconButton icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
-                <NIconButton icon="carbon-close" @click="discardEditing" />
+                <NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument, false)" />
+                <NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
               </template>
               <template v-else>
-                <NIconButton icon="carbon-edit" @click="editDocument(document)" />
-                <NIconButton icon="carbon-delete" @click="deleteDocument(document)" />
-                <NIconButton icon="carbon-document-multiple-02" @click="saveDocument(document)" />
-                <NIconButton absolute right-4 opacity-0 group-hover="opacity-100" transition-all icon="carbon-copy" @click="copy(JSON.stringify(document))" />
+                <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))" />
               </template>
             </div>
           </td>
@@ -190,14 +197,14 @@ const copy = useCopy()
             <input v-if="field !== '_id'" v-model="selectedDocument[field]" :placeholder="field">
             <input v-else placeholder="ObjectId(_id)" disabled>
           </td>
-          <td flex justify-center gap2 class="actions">
-            <NIconButton icon="carbon-save" @click="saveDocument(selectedDocument)" />
-            <NIconButton icon="carbon-close" @click="discardEditing" />
+          <td flex="~ justify-center gap2">
+            <NIconButton title="Save" icon="carbon-save" @click="saveDocument(selectedDocument)" />
+            <NIconButton title="Cancel" icon="carbon-close" @click="discardEditing" />
           </td>
         </tr>
       </tbody>
     </table>
-    <div v-else flex justify-center items-center h-full text-2xl>
+    <div v-else flex="~ justify-center items-center" h-full text-2xl>
       <NIcon icon="carbon-document" mr1 />
       No documents found
     </div>
@@ -205,11 +212,6 @@ const copy = useCopy()
 </template>
 
 <style lang="scss">
-// TODO:
-.actions .n-icon {
-  margin: 0;
-}
-
 table {
   table-layout: fixed;
   tr {

client/components/Drawer.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside, useElementSize } from '@vueuse/core'
+
 const props = defineProps<{
   modelValue?: boolean
   navbar?: HTMLElement
@@ -17,7 +20,7 @@ onClickOutside(el, () => {
   if (props.modelValue && props.autoClose)
     emit('close')
 }, {
-  ignore: ['#open-drawer-right'],
+  ignore: ['a', 'button', 'summary', '[role="dialog"]'],
 })
 </script>
 
@@ -41,7 +44,7 @@ export default {
       ref="el"
       border="l base"
       flex="~ col gap-1"
-      fixed bottom-0 right-0 z-10 z-20 of-auto text-sm backdrop-blur-lg
+      absolute bottom-0 right-0 z-10 z-20 of-auto text-sm glass-effect
       :style="{ top: `${top}px` }"
       v-bind="$attrs"
     >

client/components/Notification.vue

@@ -0,0 +1,34 @@
+<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/PanelLeftRight.vue

@@ -1,36 +0,0 @@
-<script lang="ts" setup>
-import { Pane, Splitpanes } from 'splitpanes'
-import 'splitpanes/dist/splitpanes.css'
-
-const props = defineProps({
-  minLeft: {
-    type: Number,
-    default: 10,
-  },
-  minRight: {
-    type: Number,
-    default: 10,
-  },
-  maxLeft: {
-    type: Number,
-    default: 90,
-  },
-  maxRight: {
-    type: Number,
-    default: 90,
-  },
-})
-
-const size = ref(props.maxLeft)
-</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="minLeft" :max-size="maxLeft">
-      <slot name="left" />
-    </Pane>
-    <Pane relative h-full class="of-auto!" :min-size="minRight">
-      <slot name="right" />
-    </Pane>
-  </Splitpanes>
-</template>

client/components/SplitPanel.vue

@@ -0,0 +1,33 @@
+<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>