feat(ui): NNotification component (#443)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Author: arashsheyda

packages/devtools-ui-kit/src/components/NNotification.vue

@@ -0,0 +1,48 @@
+<script setup lang='ts'>
+import { ref } from 'vue'
+
+import type { DevtoolsUiShowNotificationPosition } from '../composables/notification'
+import { devtoolsUiProvideNotificationFn } from '../composables/notification'
+
+const show = ref(false)
+const icon = ref<string>()
+const text = ref<string>()
+const classes = ref<string>()
+const position = ref<DevtoolsUiShowNotificationPosition>('top-center')
+
+devtoolsUiProvideNotificationFn((data) => {
+  text.value = data.message
+  icon.value = data.icon
+  classes.value = data.classes ?? 'text-primary border-primary'
+  icon.value = data.icon
+  show.value = true
+  position.value = data.position ?? 'top-center'
+  setTimeout(() => {
+    show.value = false
+  }, data.duration ?? 1500)
+})
+</script>
+
+<template>
+  <div
+    fixed left-0 right-0 z-999 text-center
+    :class="[
+      { 'pointer-events-none overflow-hidden': !show },
+      { 'top-0': position.startsWith('top') },
+      { 'bottom-0': position.startsWith('bottom') },
+    ]"
+  >
+    <div flex :style="{ justifyContent: position.includes('right') ? 'right' : position.includes('left') ? 'left' : 'center' }">
+      <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(${position.startsWith('top') ? '-' : ''}300%)` }"
+        :class="[show ? 'shadow' : 'shadow-none', classes]"
+      >
+        <div v-if="icon" :class="icon" />
+        <div>{{ text }}</div>
+      </div>
+    </div>
+  </div>
+</template>

packages/devtools-ui-kit/src/composables/notification.ts

@@ -0,0 +1,17 @@
+let _devtoolsUiShowNotification: typeof devtoolsUiShowNotification
+
+export type DevtoolsUiShowNotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+
+export function devtoolsUiShowNotification(data: {
+  message: string
+  icon?: string
+  classes?: string
+  duration?: number
+  position?: DevtoolsUiShowNotificationPosition
+}) {
+  _devtoolsUiShowNotification?.(data)
+}
+
+export function devtoolsUiProvideNotificationFn(fn: typeof devtoolsUiShowNotification) {
+  _devtoolsUiShowNotification = fn
+}

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

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'node:url'
-import { addComponentsDir, createResolver, defineNuxtModule, installModule } from '@nuxt/kit'
+import { addComponentsDir, addImportsDir, createResolver, defineNuxtModule, installModule } from '@nuxt/kit'
 import defu from 'defu'
 import { extendUnocssOptions } from './unocss'
 
@@ -24,6 +24,9 @@ export default defineNuxtModule<ModuleOptions>({
     dev: false,
   },
   async setup(options, nuxt) {
+    // composables
+    addImportsDir(rPath('./composables'))
+
     // Standard components
     addComponentsDir({ path: rPath('./components') })
 

packages/devtools/client/app.vue

@@ -82,7 +82,7 @@ registerCommands(() =>
 <template>
   <div fixed inset-0 h-screen w-screen font-sans>
     <NuxtLoadingIndicator />
-    <Notification />
+    <NNotification />
     <NLoading v-if="waiting">
       Connecting....
     </NLoading>

packages/devtools/client/components/AssetDetails.vue

@@ -42,14 +42,14 @@ async function saveTextContent() {
       }], '')
       editDialog.value = false
       textContentCounter.value++
-      showNotification({
+      devtoolsUiShowNotification({
         message: 'Updated',
         icon: 'i-carbon-checkmark',
         classes: 'text-green',
       })
     }
     catch (error) {
-      showNotification({
+      devtoolsUiShowNotification({
         message: 'Something went wrong!',
         icon: 'i-carbon-warning',
         classes: 'text-red',
@@ -129,14 +129,14 @@ async function deleteAsset() {
     await rpc.deleteStaticAsset(await ensureDevAuthToken(), asset.value.filePath)
     asset.value = undefined as any
     deleteDialog.value = false
-    showNotification({
+    devtoolsUiShowNotification({
       message: 'Asset deleted',
       icon: 'i-carbon-checkmark',
       classes: 'text-green',
     })
   }
   catch (error) {
-    showNotification({
+    devtoolsUiShowNotification({
       message: 'Something went wrong!',
       icon: 'i-carbon-warning',
       classes: 'text-red',
@@ -151,7 +151,7 @@ async function renameAsset() {
   const oldName = parts.slice(-1)[0].split('.').slice(0, -1).join('.')
 
   if (!newName.value || newName.value === oldName) {
-    return showNotification({
+    return devtoolsUiShowNotification({
       message: 'Please enter a new name',
       icon: 'i-carbon-warning',
       classes: 'text-orange',
@@ -164,14 +164,14 @@ async function renameAsset() {
     await rpc.renameStaticAsset(await ensureDevAuthToken(), asset.value.filePath, fullPath)
     asset.value = undefined as any
     renameDialog.value = false
-    showNotification({
+    devtoolsUiShowNotification({
       message: 'Asset renamed',
       icon: 'i-carbon-checkmark',
       classes: 'text-green',
     })
   }
   catch (error) {
-    showNotification({
+    devtoolsUiShowNotification({
       message: 'Something went wrong!',
       icon: 'i-carbon-warning',
       classes: 'text-red',

packages/devtools/client/components/AssetDropZone.vue

@@ -51,7 +51,7 @@ function setFiles(data: FileList | null) {
       }
       else {
         if (file.type === '') {
-          showNotification({
+          devtoolsUiShowNotification({
             message: 'Folders are not supported yet',
             icon: 'carbon:face-dissatisfied',
             classes: 'text-orange',
@@ -61,7 +61,7 @@ function setFiles(data: FileList | null) {
           newFiles.push(file)
         }
         else {
-          showNotification({
+          devtoolsUiShowNotification({
             message: `"${file.type}" file type is not allowed`,
             icon: 'carbon:face-dissatisfied',
             classes: 'text-orange',
@@ -96,14 +96,14 @@ async function uploadFiles() {
   }
   await rpc.writeStaticAssets(await ensureDevAuthToken(), [...uploadFiles], props.folder).then(() => {
     close()
-    showNotification({
+    devtoolsUiShowNotification({
       message: 'Files uploaded successfully!',
       icon: 'i-carbon:checkmark',
     })
   }).catch((error) => {
     console.error(error)
     close()
-    showNotification({
+    devtoolsUiShowNotification({
       message: `Error uploading files: ${error}`,
       icon: 'i-carbon-warning',
       classes: 'text-red',

packages/devtools/client/components/Notification.vue

@@ -37,7 +37,7 @@ export async function ensureDevAuthToken() {
   isDevAuthed.value = await rpc.verifyAuthToken(devAuthToken.value!)
   if (!isDevAuthed.value) {
     devAuthToken.value = null
-    showNotification({
+    devtoolsUiShowNotification({
       message: 'Invalid auth token, action canceled',
       icon: 'i-carbon-warning-alt',
       classes: 'text-red',
@@ -74,7 +74,7 @@ async function authConfirmAction() {
 
   if (result === false) {
     // @unocss-include
-    showNotification({
+    devtoolsUiShowNotification({
       message: 'Action canceled',
       icon: 'carbon-close',
       classes: 'text-orange',

packages/devtools/client/composables/dev-auth.ts

@@ -12,18 +12,3 @@ interface RestartDialog {
 export function useRestartDialogs() {
   return useState<RestartDialog[]>('devtools:restart-dialogs', () => [])
 }
-
-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
-}

packages/devtools/client/composables/dialog.ts

@@ -33,7 +33,7 @@ export function useCopy() {
   return (text: string) => {
     clipboard.copy(text)
 
-    showNotification({
+    devtoolsUiShowNotification({
       message: 'Copied to clipboard',
       icon: 'carbon-checkmark',
     })