diff --git a/docs/app/app.vue b/docs/app/app.vue index be2d15cc..0c9f7d66 100644 --- a/docs/app/app.vue +++ b/docs/app/app.vue @@ -53,7 +53,7 @@ provide('navigation', mappedNavigation) diff --git a/docs/app/components/content/ComponentPropsSchema.vue b/docs/app/components/content/ComponentPropsSchema.vue index 5867f8b4..91d1728c 100644 --- a/docs/app/components/content/ComponentPropsSchema.vue +++ b/docs/app/components/content/ComponentPropsSchema.vue @@ -38,7 +38,7 @@ const schemaProps = computed(() => { diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue index a689829d..4b04cb32 100644 --- a/src/runtime/components/Toaster.vue +++ b/src/runtime/components/Toaster.vue @@ -17,6 +17,11 @@ export interface ToasterProps extends Omit * @defaultValue true */ expand?: boolean + /** + * Whether to show the progress bar on all toasts. + * @defaultValue true + */ + progress?: boolean /** * Render the toaster in a portal. * @defaultValue true @@ -49,7 +54,8 @@ import UToast from './Toast.vue' const props = withDefaults(defineProps(), { expand: true, portal: true, - duration: 5000 + duration: 5000, + progress: true }) defineSlots() @@ -109,6 +115,7 @@ function getOffset(index: number) { v-for="(toast, index) of toasts" :key="toast.id" ref="refs" + :progress="progress" v-bind="omit(toast, ['id', 'close'])" :close="(toast.close as boolean)" :data-expanded="expanded" @@ -121,9 +128,7 @@ function getOffset(index: number) { '--translate': expanded ? 'calc(var(--offset) * var(--translate-factor))' : 'calc(var(--before) * var(--gap))', '--transform': 'translateY(var(--translate)) scale(var(--scale))' }" - :class="[ui.base(), { - 'cursor-pointer': !!toast.onClick - }]" + :class="ui.base({ class: [props.ui?.base, toast.onClick ? 'cursor-pointer' : undefined] })" @update:open="onUpdateOpen($event, toast.id)" @click="toast.onClick && toast.onClick(toast)" /> diff --git a/src/runtime/vue/composables/useAppConfig.ts b/src/runtime/vue/composables/useAppConfig.ts index a06491cf..27199fc9 100644 --- a/src/runtime/vue/composables/useAppConfig.ts +++ b/src/runtime/vue/composables/useAppConfig.ts @@ -1,3 +1,6 @@ +import { reactive } from 'vue' import appConfig from '#build/app.config' -export const useAppConfig = () => appConfig +const _appConfig = reactive(appConfig) + +export const useAppConfig = () => _appConfig diff --git a/src/runtime/vue/stubs.ts b/src/runtime/vue/stubs.ts index a2e35db4..24713b3b 100644 --- a/src/runtime/vue/stubs.ts +++ b/src/runtime/vue/stubs.ts @@ -9,6 +9,7 @@ import { useColorMode as useColorModeVueUse } from '@vueuse/core' export { useHead } from '@unhead/vue' export { useRoute, useRouter } from 'vue-router' +export { useAppConfig } from './composables/useAppConfig' export { defineShortcuts } from '../composables/defineShortcuts' export { defineLocale } from '../composables/defineLocale' export { useLocale } from '../composables/useLocale' @@ -30,8 +31,6 @@ export const useColorMode = () => { } } -export const useAppConfig = () => appConfig - export const useCookie = ( _name: string, _options: Record = {}