| 1 | <template> |
| 2 | <n-config-provider |
| 3 | :rtl="rtlOptions" |
| 4 | :theme |
| 5 | :theme-overrides |
| 6 | :locale="providerLocale" |
| 7 | :date-locale="providerDateLocale" |
| 8 | preflight-style-disabled |
| 9 | inline-theme-disabled |
| 10 | > |
| 11 | <n-loading-bar-provider container-class="h-0.75!"> |
| 12 | <n-message-provider> |
| 13 | <n-notification-provider> |
| 14 | <n-dialog-provider> |
| 15 | <GlobalListener> |
| 16 | <slot /> |
| 17 | </GlobalListener> |
| 18 | </n-dialog-provider> |
| 19 | </n-notification-provider> |
| 20 | </n-message-provider> |
| 21 | </n-loading-bar-provider> |
| 22 | <n-global-style /> |
| 23 | </n-config-provider> |
| 24 | </template> |
| 25 | |
| 26 | <script lang="ts" setup> |
| 27 | import type { GlobalThemeOverrides } from "naive-ui" |
| 28 | import type { RtlItem } from "naive-ui/es/config-provider/src/internal-interface" |
| 29 | import { |
| 30 | NConfigProvider, |
| 31 | NDialogProvider, |
| 32 | NGlobalStyle, |
| 33 | NLoadingBarProvider, |
| 34 | NMessageProvider, |
| 35 | NNotificationProvider |
| 36 | } from "naive-ui" |
| 37 | import { computed, onBeforeMount } from "vue" |
| 38 | import GlobalListener from "@/app-layouts/common/GlobalListener.vue" |
| 39 | import { useLocalesStore } from "@/stores/i18n" |
| 40 | import { useThemeStore } from "@/stores/theme" |
| 41 | import { rtlStyles } from "./rtlProvider" |
| 42 | |
| 43 | const localesStore = useLocalesStore() |
| 44 | const themeStore = useThemeStore() |
| 45 | const theme = computed(() => themeStore.naiveTheme) |
| 46 | const themeOverrides = computed<GlobalThemeOverrides>(() => themeStore.themeOverrides) |
| 47 | const isRTL = computed(() => themeStore.isRTL) |
| 48 | const rtlOptions = computed<RtlItem[] | undefined>(() => (isRTL.value ? rtlStyles : undefined)) |
| 49 | const providerLocale = computed(() => localesStore.naiveuiLocale) |
| 50 | const providerDateLocale = computed(() => localesStore.naiveuiDateLocale) |
| 51 | |
| 52 | onBeforeMount(() => { |
| 53 | themeStore.initTheme() |
| 54 | }) |
| 55 | </script> |