feat(toast#4373): add bottom-center and top-center positions

packages/ui/src/components/va-toast/VaToast.stories.ts

@@ -3,6 +3,7 @@ import VaToastDemo from './VaToast.demo.vue'
 import VaToast from './VaToast.vue'
 import { StoryFn } from '@storybook/vue3'
 import { expect } from '@storybook/jest'
+import { useToast } from './index'
 
 export default {
   title: 'VaToast',
@@ -30,3 +31,31 @@ export const Color: StoryFn = () => ({
 <VaToast inline color="danger" title="Title" message="Message" :duration="99999999" />
 `,
 })
+
+export const PositionTopenter: StoryFn = () => ({
+  components: { VaToast: VaToast },
+
+  setup () {
+    const { notify } = useToast()
+
+    return {
+      notify,
+    }
+  },
+
+  template: '<button @click="notify({ message: \'Test\', position: \'top-center\' })">Show</button>',
+})
+
+export const PositionBottomCenter: StoryFn = () => ({
+  components: { VaToast: VaToast },
+
+  setup () {
+    const { notify } = useToast()
+
+    return {
+      notify,
+    }
+  },
+
+  template: '<button @click="notify({ message: \'Test\', position: \'bottom-center\' })">Show</button>',
+})

packages/ui/src/components/va-toast/VaToast.vue

@@ -107,13 +107,23 @@ const durationComputed = useNumericProp('duration') as ComputedRef<number>
 
 const visible = ref(false)
 
-const positionX = computed(() => {
-  return props.position.includes('right') ? 'right' : 'left'
-})
+const getPositionStyle = () => {
+  const vertical = props.position.includes('top') ? 'top' : 'bottom'
+  const horizontal = props.position.includes('center') ? 'center' : props.position.includes('right') ? 'right' : 'left'
+
+  if (horizontal === 'center') {
+    return {
+      [vertical]: `${offsetYComputed.value}px`,
+      left: '50%',
+      transform: 'translateX(-50%)',
+    }
+  }
 
-const positionY = computed(() => {
-  return props.position.includes('top') ? 'top' : 'bottom'
-})
+  return {
+    [vertical]: `${offsetYComputed.value}px`,
+    [horizontal]: `${offsetXComputed.value}px`,
+  }
+}
 
 const toastClasses = computed(() => [
   props.customClass,
@@ -122,8 +132,7 @@ const toastClasses = computed(() => [
 ])
 
 const toastStyles = computed(() => ({
-  [positionY.value]: `${offsetYComputed.value}px`,
-  [positionX.value]: `${offsetXComputed.value}px`,
+  ...getPositionStyle(),
   backgroundColor: getColor(props.color),
   color: textColorComputed.value,
 }))

packages/ui/src/components/va-toast/types.ts

@@ -5,6 +5,8 @@ export type ToastPosition =
   | 'top-left'
   | 'bottom-right'
   | 'bottom-left'
+  | 'top-center'
+  | 'bottom-center'
 
 export interface ToastOptions {
   /** Title */