mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-25 17:30:37 +01:00
chore(Toast): simplify code now that duration is exposed
This commit is contained in:
@@ -4,7 +4,7 @@ import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
|
|||||||
import type { AppConfig } from '@nuxt/schema'
|
import type { AppConfig } from '@nuxt/schema'
|
||||||
import _appConfig from '#build/app.config'
|
import _appConfig from '#build/app.config'
|
||||||
import theme from '#build/ui/toast'
|
import theme from '#build/ui/toast'
|
||||||
import type { AvatarProps, ButtonProps, ToasterContext } from '../types'
|
import type { AvatarProps, ButtonProps } from '../types'
|
||||||
|
|
||||||
const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
|
const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
|
||||||
|
|
||||||
@@ -56,7 +56,7 @@ export interface ToastSlots {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, inject, onMounted } from 'vue'
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'radix-vue'
|
import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'radix-vue'
|
||||||
import { reactivePick } from '@vueuse/core'
|
import { reactivePick } from '@vueuse/core'
|
||||||
import { useAppConfig } from '#imports'
|
import { useAppConfig } from '#imports'
|
||||||
@@ -68,13 +68,10 @@ const props = withDefaults(defineProps<ToastProps>(), {
|
|||||||
const emits = defineEmits<ToastEmits>()
|
const emits = defineEmits<ToastEmits>()
|
||||||
const slots = defineSlots<ToastSlots>()
|
const slots = defineSlots<ToastSlots>()
|
||||||
|
|
||||||
const toaster = inject<ToasterContext>('Toaster')
|
|
||||||
|
|
||||||
const appConfig = useAppConfig()
|
const appConfig = useAppConfig()
|
||||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'duration', 'open', 'type'), emits)
|
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'duration', 'open', 'type'), emits)
|
||||||
|
|
||||||
const multiline = computed(() => !!props.title && !!props.description)
|
const multiline = computed(() => !!props.title && !!props.description)
|
||||||
const duration = computed(() => props.duration || toaster?.value.duration)
|
|
||||||
|
|
||||||
const ui = computed(() => toast({
|
const ui = computed(() => toast({
|
||||||
color: props.color
|
color: props.color
|
||||||
@@ -101,7 +98,7 @@ defineExpose({
|
|||||||
<template>
|
<template>
|
||||||
<ToastRoot
|
<ToastRoot
|
||||||
ref="el"
|
ref="el"
|
||||||
v-slot="{ remaining }"
|
v-slot="{ remaining, duration }"
|
||||||
v-bind="rootProps"
|
v-bind="rootProps"
|
||||||
:class="ui.root({ class: props.class, multiline })"
|
:class="ui.root({ class: props.class, multiline })"
|
||||||
:style="{ '--height': height }"
|
:style="{ '--height': height }"
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { ComputedRef } from 'vue'
|
|
||||||
import { tv, type VariantProps } from 'tailwind-variants'
|
import { tv, type VariantProps } from 'tailwind-variants'
|
||||||
import type { ToastProviderProps } from 'radix-vue'
|
import type { ToastProviderProps } from 'radix-vue'
|
||||||
import type { AppConfig } from '@nuxt/schema'
|
import type { AppConfig } from '@nuxt/schema'
|
||||||
@@ -26,14 +25,10 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
|
|||||||
export interface ToasterSlots {
|
export interface ToasterSlots {
|
||||||
default(props?: {}): any
|
default(props?: {}): any
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ToasterContext = ComputedRef<{
|
|
||||||
duration: number
|
|
||||||
}>
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, provide } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
|
import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
|
||||||
import { reactivePick } from '@vueuse/core'
|
import { reactivePick } from '@vueuse/core'
|
||||||
import { useToast } from '#imports'
|
import { useToast } from '#imports'
|
||||||
@@ -90,8 +85,6 @@ const frontHeight = computed(() => refs.value[refs.value.length - 1]?.height ||
|
|||||||
function getOffset(index: number) {
|
function getOffset(index: number) {
|
||||||
return refs.value.slice(index + 1).reduce((acc, { height }) => acc + height + 16, 0)
|
return refs.value.slice(index + 1).reduce((acc, { height }) => acc + height + 16, 0)
|
||||||
}
|
}
|
||||||
|
|
||||||
provide<ToasterContext>('Toaster', providerProps)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
Reference in New Issue
Block a user