feat(toast): supports top-center and bottom-center positions

Author: lepture

docs/content/components/toast.md

@@ -56,8 +56,10 @@ By default, toasts appear in the bottom-right corner.
 
 <div class="flex flex-wrap items-center gap-4">
 <Button @click="changePosition('top-left')" variant="surface">Top left</Button>
+<Button @click="changePosition('top-center')" variant="surface">Top center</Button>
 <Button @click="changePosition('top-right')" variant="surface">Top right</Button>
 <Button @click="changePosition('bottom-left')" variant="surface">Bottom left</Button>
+<Button @click="changePosition('bottom-center')" variant="surface">Bottom center</Button>
 <Button @click="changePosition('bottom-right')" variant="surface">Bottom right</Button>
 </div>
 

src/components/toast/ToastItem.vue

@@ -10,8 +10,8 @@ import type { ToastMessage, MessageCategory } from './manager'
 import { useToastManager } from './manager'
 
 export interface ToastItemProps {
-  yPosition: 'top' | 'bottom'
-  xPosition: 'left' | 'right'
+  yPosition: 'top' | 'bottom' | 'center'
+  xPosition: 'left' | 'right' | 'center'
   message: ToastMessage
   index: number
 }
@@ -222,11 +222,11 @@ onMounted(() => {
   --toast-item-swipe-to-x: calc(100% + var(--toast-x-position))
 }
 
-.ui-ToastItem:where([data-swipe-direction="top"]) {
+.ui-ToastItem:where([data-swipe-direction="up"]) {
   --toast-item-swipe-to-y: calc(0 - 100% - var(--toast-y-position))
 }
 
-.ui-ToastItem:where([data-swipe-direction="bottom"]) {
+.ui-ToastItem:where([data-swipe-direction="down"]) {
   --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
 }
 

src/components/toast/ToastProvider.vue

@@ -3,7 +3,7 @@ import type { ToastProviderProps as RekaToastProviderProps } from 'reka-ui'
 
 export interface ToastProviderProps extends RekaToastProviderProps {
   size?: '1' | '2' | '3'
-  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'
 }
 </script>
 
@@ -32,18 +32,21 @@ const forwarded = useForwardPropsWithout(props, ['position', 'size'])
 const { messages } = useToastManager()
 
 const yPosition = computed(() => {
-  return props.position.split('-')[0] as 'top' | 'bottom'
+  return props.position.split('-')[0] as 'top' | 'bottom' | 'center'
 })
 
 const xPosition = computed(() => {
-  return props.position.split('-')[1] as 'left' | 'right'
+  return props.position.split('-')[1] as 'left' | 'right' | 'center'
 })
 
 const swipeDirection = computed(() => {
   if (props.swipeDirection) {
     return props.swipeDirection
   }
-  return xPosition.value
+  if (xPosition.value !== 'center') {
+    return xPosition.value
+  }
+  return yPosition.value === 'top' ? 'up' : 'down'
 })
 </script>
 
@@ -122,6 +125,9 @@ const swipeDirection = computed(() => {
 .ui-ToastViewport:where([data-x-position="right"]) {
   right: var(--toast-x-position);
 }
+.ui-ToastViewport:where([data-x-position="center"]) {
+  left: calc(50% - var(--toast-width) / 2);
+}
 .ui-ToastViewport:where([data-y-position="top"]) {
   top: var(--toast-y-position);
 }