feat: enable naive-ui discrete api

use `useNaiveDiscreteApi()` inside script setup to get access to `MessageApi`, `NotificationApi`, `DialogApi` and `LoadingBarApi` Signed-off-by: Fery Wardiyanto <[email protected]>
creasico · Sep 18, 2023 · 6890392 · 6890392
1 parent 728087b
commit 6890392
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 47 deletions.
diff --git a/resources/client/components/app-wrapper.vue b/resources/client/components/app-wrapper.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { NDialogProvider, NMessageProvider, NNotificationProvider } from 'naive-ui'
-
 const { locale, dateLocale, theme, themeOverrides } = useNaiveConfig()
 </script>
 
@@ -12,21 +10,15 @@ const { locale, dateLocale, theme, themeOverrides } = useNaiveConfig()
     :date-locale="dateLocale"
     class="app-wrapper"
   >
-    <n-message-provider :theme="theme?.Message" :theme-overrides="themeOverrides.Message">
-      <n-notification-provider :theme="theme?.Notification" :theme-overrides="themeOverrides.Notification">
-        <n-dialog-provider :theme="theme?.Dialog" :theme-overrides="themeOverrides.Dialog">
-          <slot />
-        </n-dialog-provider>
-      </n-notification-provider>
-    </n-message-provider>
+    <slot />
   </n-config-provider>
 </template>
 
 <style lang="postcss">
 .app-wrapper {
   .n-layout {
     > & > &-scroll-container {
-      @apply min-h-screen flex;
+      @apply min-h-screen;
     }
   }
 }

diff --git a/resources/client/modules/i18n.ts b/resources/client/modules/i18n.ts
@@ -6,7 +6,7 @@ export const install: AppModuleInstall = ({ app, isClient }): void => {
 
   const i18n = createI18n({
     legacy: false,
-    locale: document.documentElement.lang,
+    locale: appPreference.value.locale,
     messages,
   })
 

diff --git a/resources/client/modules/naive-ui.ts b/resources/client/modules/naive-ui.ts
@@ -0,0 +1,32 @@
+import type { DialogApi, LoadingBarApi, MessageApi, NotificationApi } from 'naive-ui'
+import { createDiscreteApi } from 'naive-ui'
+
+export const install: AppModuleInstall = ({ app, isClient }): void => {
+  if (!isClient)
+    return
+
+  const configProviderProps = useNaiveConfig()
+  const { message, dialog, notification, loadingBar } = createDiscreteApi(
+    ['message', 'dialog', 'notification', 'loadingBar'],
+    { configProviderProps },
+  )
+
+  app.provide('$message', message)
+  app.provide('$dialog', dialog)
+  app.provide('$notification', notification)
+  app.provide('$loading', loadingBar)
+
+  app.config.globalProperties.$message = message
+  app.config.globalProperties.$dialog = dialog
+  app.config.globalProperties.$notification = notification
+  app.config.globalProperties.$loading = loadingBar
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $message: MessageApi
+    $dialog: DialogApi
+    $notification: NotificationApi
+    $loading: LoadingBarApi
+  }
+}
diff --git a/resources/client/modules/pwa.ts b/resources/client/modules/pwa.ts
@@ -1,6 +1,6 @@
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
-export const install: AppModuleInstall = async ({ isClient }) => {
+export const install: AppModuleInstall = async ({ app, isClient }) => {
   if (!isClient)
     return
 
@@ -10,8 +10,10 @@ export const install: AppModuleInstall = async ({ isClient }) => {
 
   const { registerSW } = await import('virtual:pwa-register')
 
-  if (offlineReady.value)
-    logger('Offline ready', 'Your app is offline ready')
+  if (offlineReady.value) {
+    logger(offlineReady.value)
+    app.config.globalProperties.$message.info('Your app is offline ready')
+  }
 
   registerSW({
     immediate: true,

diff --git a/resources/client/pages/test.vue b/resources/client/pages/test.vue
@@ -1,35 +1,26 @@
 <script setup lang="ts">
 import { Head as iHead } from '@inertiajs/vue3'
 import type { NotificationType } from 'naive-ui'
-import { useDialog, useNotification } from 'naive-ui'
 
-const notification = useNotification()
-const dialog = useDialog()
+const { notification } = useNaiveDiscreteApi()
 
 function notify(type: NotificationType) {
   notification[type]({
     content: 'Test',
   })
 }
-
-function confirm() {
-  dialog.warning({
-    title: 'Test Dialog',
-    content: 'Are you sure?',
-  })
-}
 </script>
 
 <template>
   <i-head :title="$t('account.profile.page')" />
 
   <h3>Helps and Supports Goes Here</h3>
 
-  <n-button @click="notify('error')">
-    Notify
+  <n-button @click="$message.info('test')">
+    Notify 1
   </n-button>
 
-  <n-button @click="confirm()">
-    Confirm
+  <n-button @click="notify('error')">
+    Notify 2
   </n-button>
 </template>
diff --git a/resources/client/shim.d.ts b/resources/client/shim.d.ts
@@ -1,4 +1,5 @@
 import type { PageProps, Page } from '@inertiajs/core'
+import type { App } from 'vue'
 
 export {}
 

diff --git a/resources/client/utils/preference.ts b/resources/client/utils/preference.ts
@@ -1,7 +1,6 @@
 import type { BasicColorSchema, RemovableRef } from '@vueuse/core'
-import type { ComputedRef } from 'vue'
 import { darkTheme, dateEnUS, dateIdID, enUS, idID, lightTheme } from 'naive-ui'
-import type { GlobalTheme, GlobalThemeOverrides, NDateLocale, NLocale } from 'naive-ui'
+import type { ConfigProviderProps, DialogApi, GlobalThemeOverrides, LoadingBarApi, MessageApi, NDateLocale, NLocale, NotificationApi } from 'naive-ui'
 
 /**
  * Global application preference.
@@ -11,18 +10,6 @@ export interface AppPreference {
   theme: BasicColorSchema
 }
 
-/**
- * Naive-ui config-provider values.
- *
- * @see https://www.naiveui.com/en-US/os-theme/components/config-provider
- */
-interface NaiveConfig {
-  theme: ComputedRef<GlobalTheme | null>
-  themeOverrides: GlobalThemeOverrides
-  locale: NLocale
-  dateLocale: NDateLocale
-}
-
 /**
  * State of global application preference.
  */
@@ -54,11 +41,22 @@ export function createThemeOverrides(overrides: GlobalThemeOverrides): void {
   Object.assign(themeOverrides, overrides)
 }
 
+/**
+ * Use naive-ui Discrete API
+ */
+export function useNaiveDiscreteApi() {
+  return {
+    message: inject('$message') as MessageApi,
+    notification: inject('$notification') as NotificationApi,
+    dialog: inject('$dialog') as DialogApi,
+    loading: inject('$loading') as LoadingBarApi,
+  }
+}
+
 /**
  * Use naive-ui configuration
  */
-export function useNaiveConfig(): NaiveConfig {
-  const i18n = useI18n()
+export function useNaiveConfig(): ConfigProviderProps {
   const theme = computed(() => appPreference.value.theme === 'dark' ? darkTheme : lightTheme)
 
   const locales: { [k in string]: NLocale } = {
@@ -72,9 +70,9 @@ export function useNaiveConfig(): NaiveConfig {
   }
 
   return {
-    theme,
+    theme: theme.value,
     themeOverrides,
-    locale: locales[i18n.locale.value],
-    dateLocale: dateLocales[i18n.locale.value],
+    locale: locales[appPreference.value.locale],
+    dateLocale: dateLocales[appPreference.value.locale],
   }
 }