- Your current connection is: {{ connection }}
+
+ ({{ code }}):
+ {{ connection.status }},
+ {{ connection.description }}
-
- 0: Not connected
-
-
- 1: Connected
-
-
- 2: Connecting
-
-
- 3: Disconnecting
+
+ ({{ index }}): {{ item.status }}
diff --git a/client/components/CreateResource.vue b/client/components/CreateResource.vue
index 8c1e591..a84ce42 100644
--- a/client/components/CreateResource.vue
+++ b/client/components/CreateResource.vue
@@ -1,4 +1,8 @@
@@ -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"
>
diff --git a/client/components/Notification.vue b/client/components/Notification.vue
new file mode 100644
index 0000000..db4dffd
--- /dev/null
+++ b/client/components/Notification.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
diff --git a/client/components/PanelLeftRight.vue b/client/components/PanelLeftRight.vue
deleted file mode 100644
index ac05943..0000000
--- a/client/components/PanelLeftRight.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/client/components/SplitPanel.vue b/client/components/SplitPanel.vue
new file mode 100644
index 0000000..8ce1c6f
--- /dev/null
+++ b/client/components/SplitPanel.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/composables/dialog.ts b/client/composables/dialog.ts
new file mode 100644
index 0000000..e9fdd68
--- /dev/null
+++ b/client/composables/dialog.ts
@@ -0,0 +1,14 @@
+let _showNotification: typeof showNotification
+
+export function showNotification(data: {
+ message: string
+ icon?: string
+ classes?: string
+ duration?: number
+}) {
+ _showNotification?.(data)
+}
+
+export function provideNotificationFn(fn: typeof showNotification) {
+ _showNotification = fn
+}
diff --git a/client/composables/editor.ts b/client/composables/editor.ts
index f7237a9..cfcbffa 100644
--- a/client/composables/editor.ts
+++ b/client/composables/editor.ts
@@ -1,10 +1,14 @@
import { useClipboard } from '@vueuse/core'
+import { showNotification } from './dialog'
export function useCopy() {
const clipboard = useClipboard()
return (text: string) => {
clipboard.copy(text)
- // TODO: show toast
+ showNotification({
+ message: 'Copied to clipboard',
+ icon: 'carbon-copy',
+ })
}
}
diff --git a/client/composables/rpc.ts b/client/composables/rpc.ts
index 061e945..84223da 100644
--- a/client/composables/rpc.ts
+++ b/client/composables/rpc.ts
@@ -1,59 +1,18 @@
-import { createBirpc } from 'birpc'
-import { parse, stringify } from 'flatted'
-import { createHotContext } from 'vite-hot-client'
+import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import type { BirpcReturn } from 'birpc'
+import { ref } from 'vue'
+import type { NuxtDevtoolsClient } from '@nuxt/devtools-kit/dist/types'
import type { ClientFunctions, ServerFunctions } from '../../src/types'
-import { WS_EVENT_NAME } from '../../src/constants'
+import { RPC_NAMESPACE } from '../../src/constants'
-export const wsConnecting = ref(true)
-export const wsError = ref
()
-export const wsConnectingDebounced = useDebounce(wsConnecting, 2000)
+export const devtools = ref()
+export const devtoolsRpc = ref()
+export const rpc = ref>()
-const connectPromise = connectVite()
-// eslint-disable-next-line @typescript-eslint/ban-types
-let onMessage: Function = () => {}
+onDevtoolsClientConnected(async (client) => {
+ devtoolsRpc.value = client.devtools.rpc
+ devtools.value = client.devtools
-export const clientFunctions = {
- // will be added in app.vue
-} as ClientFunctions
-
-export const extendedRpcMap = new Map()
-
-export const rpc = createBirpc(clientFunctions, {
- post: async (d) => {
- (await connectPromise).send(WS_EVENT_NAME, d)
- },
- on: (fn) => {
- onMessage = fn
- },
- serialize: stringify,
- deserialize: parse,
- resolver(name, fn) {
- if (fn)
- return fn
- if (!name.includes(':'))
- return
- const [namespace, fnName] = name.split(':')
- return extendedRpcMap.get(namespace)?.[fnName]
- },
- onError(error, name) {
- console.error(`[nuxt-devtools] RPC error on executing "${name}":`, error)
- },
- timeout: 120_000,
-})
-
-async function connectVite() {
- const hot = await createHotContext()
-
- if (!hot)
- throw new Error('Unable to connect to devtools')
-
- hot.on(WS_EVENT_NAME, (data) => {
- onMessage(data)
+ rpc.value = client.devtools.extendClientRpc(RPC_NAMESPACE, {
})
-
- // TODO:
- // hot.on('vite:connect', (data) => {})
- // hot.on('vite:disconnect', (data) => {})
-
- return hot
-}
+})
diff --git a/client/composables/state.ts b/client/composables/state.ts
new file mode 100644
index 0000000..243044d
--- /dev/null
+++ b/client/composables/state.ts
@@ -0,0 +1 @@
+export const selectedCollection = useState('mongo:collection', () => '')
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index f3bc53d..3987bec 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -1,10 +1,13 @@
-
+
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index dd2c3d8..e81631a 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -1,5 +1,5 @@
import { resolve } from 'pathe'
-import { PATH_CLIENT } from '../src/constants'
+import { CLIENT_PATH } from '../src/constants'
export default defineNuxtConfig({
ssr: false,
@@ -22,6 +22,6 @@ export default defineNuxtConfig({
},
},
app: {
- baseURL: PATH_CLIENT,
+ baseURL: CLIENT_PATH,
},
})
diff --git a/client/pages/index.vue b/client/pages/index.vue
index 6f7000f..016e78b 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -1,13 +1,17 @@
-
+
@@ -48,13 +47,20 @@ async function refresh() {
-
+
{{ table.name }}
-
+
@@ -72,8 +78,8 @@ async function refresh() {