feat(VaToast #4373): add bottom-center, top-center position options

packages/docs/page-config/ui-elements/toast/examples/Position.vue

@@ -5,6 +5,12 @@
   >
     top-right
   </VaButton>
+  <VaButton
+    class="mr-2 mb-2"
+    @click="$vaToast.init({ message: 'Top-center', position: 'top-center' })"
+  >
+    top-center
+  </VaButton>
   <VaButton
     class="mr-2 mb-2"
     @click="$vaToast.init({ message: 'Top-left', position: 'top-left' })"
@@ -19,6 +25,14 @@
   >
     bottom-right
   </VaButton>
+  <VaButton
+    class="mr-2 mb-2"
+    @click="
+      $vaToast.init({ message: 'Bottom-center', position: 'bottom-center' })
+    "
+  >
+    bottom-center
+  </VaButton>
   <VaButton
     class="mr-2 mb-2"
     @click="$vaToast.init({ message: 'Bottom-left', position: 'bottom-left' })"

packages/docs/page-config/ui-elements/toast/index.ts

@@ -79,7 +79,7 @@ export default definePageConfig({
     }),
     block.example("Position", {
       title: "Position",
-      description: "Use `position` property to set the custom position of the toast. Available are `top-right`, `top-left`, `bottom-right`, `bottom-left`."
+      description: "Use `position` property to set the custom position of the toast. Available are `top-right`, `top-center`, `top-left`, `bottom-right`,  `bottom-center`, `bottom-left`."
     }),
     block.example("Close", {
       title: "Close",

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

@@ -47,6 +47,7 @@ import { PropType, ref, computed, onMounted, shallowRef, defineComponent, Comput
 import { useComponentPresetProp, useColors, useTimer, useTextColor, useTranslation, useTranslationProp, useNumericProp } from '../../composables'
 
 import { ToastPosition } from './types'
+import { useToastService } from './hooks/useToastService'
 
 import { StringWithAutocomplete } from '../../utils/types/prop-type'
 </script>
@@ -86,7 +87,7 @@ const props = defineProps({
   position: {
     type: String as PropType<ToastPosition>,
     default: 'top-right',
-    validator: (value: string) => ['top-right', 'top-left', 'bottom-right', 'bottom-left'].includes(value),
+    validator: (value: string) => ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left'].includes(value),
   },
   render: { type: Function },
   ariaCloseLabel: useTranslationProp('$t:close'),
@@ -107,20 +108,22 @@ const durationComputed = useNumericProp('duration') as ComputedRef<number>
 
 const visible = ref(false)
 
+const yOffset = useToastService(props)
+
 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`,
+      [vertical]: `${offsetYComputed.value + yOffset.value}px`,
       left: '50%',
       transform: 'translateX(-50%)',
     }
   }
 
   return {
-    [vertical]: `${offsetYComputed.value}px`,
+    [vertical]: `${offsetYComputed.value + yOffset.value}px`,
     [horizontal]: `${offsetXComputed.value}px`,
   }
 }
@@ -216,19 +219,6 @@ onMounted(() => {
     min-height: 70px;
   }
 
-  &--right {
-    right: 16px;
-  }
-
-  &--left {
-    left: 16px;
-  }
-
-  &__group {
-    margin-left: var(--va-toast-group-margin-left);
-    margin-right: var(--va-toast-group-margin-right);
-  }
-
   &__title {
     font-weight: var(--va-toast-title-font-weight);
     font-size: var(--va-toast-title-font-size);
@@ -267,6 +257,11 @@ onMounted(() => {
       opacity: 1;
     }
   }
+
+  &.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
 }
 
 .va-toast-fade-enter {

packages/ui/src/components/va-toast/_variables.scss

@@ -2,7 +2,7 @@
 :host {
   --va-toast-display: flex;
   --va-toast-width: 330px;
-  --va-toast-padding: 14px 26px 14px 13px;
+  --va-toast-padding: 14px 1.25rem 14px 1.25rem;
   --va-toast-border-radius: 8px;
   --va-toast-border-color: transparent;
   --va-toast-border: 1px solid var(--va-toast-border-color);
@@ -11,10 +11,6 @@
   --va-toast-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
   --va-toast-z-index: calc(var(--va-z-index-teleport-overlay) + 100);
 
-  /* Group */
-  --va-toast-group-margin-left: 13px;
-  --va-toast-group-margin-right: 8px;
-
   /* Title */
   --va-toast-title-font-weight: bold;
   --va-toast-title-font-size: 1rem;

packages/ui/src/components/va-toast/hooks/useToastService.ts

@@ -0,0 +1,56 @@
+import { computed, getCurrentInstance, onBeforeUnmount, onMounted, Ref, ref, VNode } from 'vue'
+import { ToastOptions } from '../types'
+
+const GAP = 5
+
+// Expect as client-side used only
+const toastInstances = ref([]) as Ref<VNode[]>
+
+type OptionKeys = keyof ToastOptions;
+
+const getNodeProps = (vNode: VNode): Record<OptionKeys, any> => {
+  return (vNode.component?.props as Record<OptionKeys, any>) || {}
+}
+
+const getTranslateValue = (item: VNode) => {
+  if (item.el) {
+    return (item.el.offsetHeight + GAP)
+  }
+  return 0
+}
+
+export const useToastService = (props: {
+  position: NonNullable<ToastOptions['position']>,
+}) => {
+  const currentInstance = getCurrentInstance()!
+
+  const yOffset = computed(() => {
+    const currentIndex = toastInstances.value.findIndex((instance) => instance === currentInstance.vnode)
+
+    if (currentIndex === -1) { return 0 }
+
+    return toastInstances.value.slice(currentIndex + 1).reduce((acc, instance) => {
+      const {
+        position: itemPosition,
+      } = getNodeProps(instance)
+
+      const { position } = props
+
+      if (position === itemPosition) {
+        return getTranslateValue(instance) + acc
+      }
+
+      return acc
+    }, 0)
+  })
+
+  onMounted(() => {
+    toastInstances.value.unshift(currentInstance.vnode)
+  })
+
+  onBeforeUnmount(() => {
+    toastInstances.value = toastInstances.value.filter((item) => item !== currentInstance.vnode)
+  })
+
+  return yOffset
+}

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

@@ -8,7 +8,6 @@ import { withConfigTransport } from '../../services/config-transport'
 
 export const VaToast = withConfigTransport(_VaToast)
 
-const GAP = 5
 let seed = 1
 
 declare global {
@@ -23,19 +22,6 @@ type OptionKeys = keyof ToastOptions;
 
 export type VaToastId = string
 
-const getTranslateValue = (item: VNode, position: string) => {
-  if (item.el) {
-    const direction = position.includes('bottom') ? -1 : 1
-    return (item.el.offsetHeight + GAP) * direction
-  }
-  return 0
-}
-
-const getNewTranslateValue = (transformY: string, redundantHeight: number, position: string) => {
-  const direction = position.includes('bottom') ? -1 : 1
-  return parseInt(transformY, 10) - (redundantHeight + GAP) * direction
-}
-
 const getNodeProps = (vNode: VNode): Record<OptionKeys, any> => {
   return (vNode.component?.props as Record<OptionKeys, any>) || {}
 }
@@ -52,30 +38,13 @@ const closeNotification = (targetInstance: VNode | null, destroyElementFn: () =>
 
   if (targetInstanceIndex < 0) { return }
 
-  const nodeProps = getNodeProps(targetInstance)
-
-  const {
-    offsetX: targetOffsetX,
-    offsetY: targetOffsetY,
-    position: targetPosition,
-  } = nodeProps
-  const redundantHeight: number | null = targetInstance.el?.offsetHeight
-
   destroyElementFn()
 
   getGlobal().vaToastInstances = getGlobal().vaToastInstances.reduce((acc: any[], instance, index) => {
     if (instance === targetInstance) {
       return acc
     }
-    if (instance.component) {
-      const { offsetX, offsetY, position } = getNodeProps(instance)
-      const isNextInstance = index > targetInstanceIndex && targetOffsetX === offsetX && targetOffsetY === offsetY && targetPosition === position
-      if (isNextInstance && instance.el && redundantHeight) {
-        const [_, transformY] = instance.el.style.transform.match(/[\d-]+(?=px)/g)
-        const transformYNew = getNewTranslateValue(transformY, redundantHeight, position)
-        instance.el.style.transform = `translate(0, ${transformYNew}px)`
-      }
-    }
+
     return [...acc, instance]
   }, [])
 
@@ -112,7 +81,7 @@ const mount = (component: any, {
     }
   }
 
-  vNode = createVNode(component, { ...props, onClose }, children)
+  vNode = createVNode(component, { ...props, onClose, ...(props?.position?.includes('center') && { class: 'center' }) }, children)
 
   if (appContext) {
     vNode.appContext = appContext
@@ -163,25 +132,9 @@ export const createToastInstance = (customProps: ToastOptions | string, appConte
 
   if (el && vNode.el && nodeProps) {
     document.body.appendChild(el.childNodes[0])
-    const { offsetX, offsetY, position } = nodeProps
 
-    vNode.el.style.display = 'flex'
     vNode.el.id = 'notification_' + seed
 
-    let transformY = 0
-    getGlobal().vaToastInstances.filter(item => {
-      const {
-        offsetX: itemOffsetX,
-        offsetY: itemOffsetY,
-        position: itemPosition,
-      } = getNodeProps(item)
-
-      return itemOffsetX === offsetX && itemOffsetY === offsetY && position === itemPosition
-    }).forEach((item) => {
-      transformY += getTranslateValue(item, position)
-    })
-    vNode.el.style.transform = `translate(0, ${transformY}px)`
-
     seed += 1
 
     getGlobal().vaToastInstances.push(vNode)

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

@@ -2,8 +2,10 @@ import { VNode } from 'vue'
 
 export type ToastPosition =
   'top-right'
+  | 'top-center'
   | 'top-left'
   | 'bottom-right'
+  | 'bottom-center'
   | 'bottom-left'
   | 'top-center'
   | 'bottom-center'