feat(toast): introduce Toast component with context management and swipe functionality

Author: honghuangdc

headless/src/components/toast/context.ts

@@ -0,0 +1,50 @@
+import { shallowRef } from 'vue';
+import { useCollection, useContext } from '../../composables';
+import type { ToastProviderContextParams, ToastRootContextParams, ToastThemeContextParams } from './types';
+
+export const { provideCollectionContext, useCollectionContext, useCollectionItem } = useCollection('Toast');
+
+export const [provideToastProviderContext, useToastProviderContext] = useContext(
+  'ToastProvider',
+  (params: ToastProviderContextParams) => {
+    const viewportElement = shallowRef<HTMLElement | null>(null);
+
+    const onViewportElementChange = (element: HTMLElement | null) => {
+      viewportElement.value = element;
+    };
+
+    const isFocusedToastEscapeKeyDownRef = shallowRef(false);
+    const isClosePausedRef = shallowRef(false);
+
+    const toastCount = shallowRef(0);
+
+    const onToastAdd = () => {
+      toastCount.value++;
+    };
+
+    const onToastRemove = () => {
+      toastCount.value--;
+    };
+
+    return {
+      ...params,
+      viewportElement,
+      onViewportElementChange,
+      isFocusedToastEscapeKeyDownRef,
+      isClosePausedRef,
+      toastCount,
+      onToastAdd,
+      onToastRemove
+    };
+  }
+);
+
+export const [provideToastRootContext, useToastRootContext] = useContext(
+  'ToastRoot',
+  (params: ToastRootContextParams) => params
+);
+
+export const [provideToastThemeContext, useToastThemeContext] = useContext(
+  'ToastTheme',
+  (params: ToastThemeContextParams) => params
+);

headless/src/components/toast/index.ts

@@ -0,0 +1,23 @@
+export { default as ToastPortal } from '../portal/portal.vue';
+export { default as ToastRoot } from './toast-root.vue';
+export { default as ToastViewport } from './toast-viewport.vue';
+export { default as ToastClose } from './toast-close.vue';
+export { default as ToastAction } from './toast-action.vue';
+export { default as ToastTitle } from './toast-title.vue';
+export { default as ToastDescription } from './toast-description.vue';
+
+export { provideToastThemeContext } from './context';
+
+export type { PortalProps as ToastPortalProps } from '../portal/types';
+export type {
+  ToastProviderProps,
+  ToastRootProps,
+  ToastRootEmits,
+  ToastViewportProps,
+  ToastCloseProps,
+  ToastActionProps,
+  ToastTitleProps,
+  ToastDescriptionProps,
+  ToastThemeSlot,
+  ToastUi
+} from './types';

headless/src/components/toast/shared.ts

@@ -0,0 +1,56 @@
+import { isHTMLElement } from '../../shared';
+
+export const toastCssVars = {
+  swipeMoveX: '--soybean-toast-swipe-move-x',
+  swipeMoveY: '--soybean-toast-swipe-move-y',
+  swipeEndX: '--soybean-toast-swipe-end-x',
+  swipeEndY: '--soybean-toast-swipe-end-y'
+};
+
+export const TOAST_DATA_SWIPE = 'data-swipe';
+
+export const toastSwipe = {
+  start: 'start',
+  move: 'move',
+  cancel: 'cancel',
+  end: 'end'
+} as const;
+
+export const TOAST_SWIPE_START = 'toast.swipeStart';
+export const TOAST_SWIPE_MOVE = 'toast.swipeMove';
+export const TOAST_SWIPE_CANCEL = 'toast.swipeCancel';
+export const TOAST_SWIPE_END = 'toast.swipeEnd';
+
+export const VIEWPORT_NAME = 'ToastViewport';
+export const VIEWPORT_DEFAULT_HOTKEY = ['F8'];
+export const VIEWPORT_PAUSE = 'toast.viewportPause';
+export const VIEWPORT_RESUME = 'toast.viewportResume';
+
+export function getAnnounceTextContent(container: HTMLElement) {
+  const textContent: string[] = [];
+  const childNodes = Array.from(container.childNodes);
+
+  childNodes.forEach(node => {
+    if (node.nodeType === node.TEXT_NODE && node.textContent) {
+      textContent.push(node.textContent);
+    }
+
+    if (!isHTMLElement(node)) return;
+    const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none';
+    const isExcluded = node.dataset.soybeanToastAnnounceExclude === '';
+
+    if (isHidden) return;
+
+    if (isExcluded) {
+      const altText = node.dataset.soybeanToastAnnounceAlt;
+      if (altText) {
+        textContent.push(altText);
+      }
+    } else {
+      textContent.push(...getAnnounceTextContent(node));
+    }
+  });
+  // We return a collection of text rather than a single concatenated string.
+  // This allows SR VO to naturally pause break between nodes while announcing.
+  return textContent;
+}

headless/src/components/toast/toast-action.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useToastRootContext, useToastThemeContext } from './context';
+import type { ToastActionProps } from './types';
+
+defineOptions({
+  name: 'ToastAction'
+});
+
+const props = withDefaults(defineProps<ToastActionProps>(), {
+  as: 'button'
+});
+
+const themeContext = useToastThemeContext();
+const { onClose } = useToastRootContext('ToastAction');
+
+const cls = computed(() => themeContext?.ui?.value?.action);
+
+const tag = computed(() => (props.as === 'button' ? 'button' : undefined));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cls"
+    :type="tag"
+    :data-soybean-toast-announce-alt="altText"
+    data-soybean-toast-announce-exclude
+    @click="onClose"
+  >
+    <slot />
+  </Primitive>
+</template>

headless/src/components/toast/toast-announce.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { useTimeout } from '@vueuse/shared';
+import { useRafFn } from '@vueuse/core';
+import { VisuallyHidden } from '../visually-hidden';
+import { useToastProviderContext } from './context';
+
+defineOptions({
+  name: 'ToastAnnounce'
+});
+
+const { label } = useToastProviderContext('ToastAnnounce');
+
+const isAnnounced = useTimeout(1000);
+const renderAnnounceText = shallowRef(false);
+
+useRafFn(() => {
+  renderAnnounceText.value = true;
+});
+</script>
+
+<template>
+  <VisuallyHidden v-if="isAnnounced || renderAnnounceText">
+    {{ label }}
+    <slot />
+  </VisuallyHidden>
+</template>

headless/src/components/toast/toast-close.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from '../primitive';
+import { useToastRootContext, useToastThemeContext } from './context';
+import type { ToastCloseProps } from './types';
+
+defineOptions({
+  name: 'ToastClose'
+});
+
+const props = withDefaults(defineProps<ToastCloseProps>(), {
+  as: 'button'
+});
+
+const themeContext = useToastThemeContext();
+const { onClose } = useToastRootContext('ToastClose');
+
+const cls = computed(() => themeContext?.ui?.value?.close);
+
+const tag = computed(() => (props.as === 'button' ? 'button' : undefined));
+</script>
+
+<template>
+  <Primitive :as="as" :as-child="asChild" :class="cls" :type="tag" data-soybean-toast-announce-exclude @click="onClose">
+    <slot />
+  </Primitive>
+</template>

headless/src/components/toast/toast-description.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useToastThemeContext } from './context';
+import type { ToastDescriptionProps } from './types';
+
+defineOptions({
+  name: 'ToastDescription'
+});
+
+defineProps<ToastDescriptionProps>();
+
+const themeContext = useToastThemeContext();
+
+const cls = computed(() => themeContext?.ui?.value?.description);
+</script>
+
+<template>
+  <div :class="cls">
+    <slot />
+  </div>
+</template>

headless/src/components/toast/toast-focus-proxy.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { VisuallyHidden } from '../visually-hidden';
+import { useToastProviderContext } from './context';
+import type { ToastFocusProxyEmits } from './types';
+
+defineOptions({
+  name: 'ToastFocusProxy'
+});
+
+const emit = defineEmits<ToastFocusProxyEmits>();
+
+const { viewportElement } = useToastProviderContext('ToastFocusProxy');
+
+const onFocus = (event: FocusEvent) => {
+  const prevFocusedElement = event.relatedTarget as HTMLElement | null;
+  const isFocusFromOutsideViewport = !viewportElement.value?.contains(prevFocusedElement);
+  if (isFocusFromOutsideViewport) {
+    emit('focusFromOutsideViewport');
+  }
+};
+</script>
+
+<template>
+  <VisuallyHidden aria-hidden="true" tabindex="0" style="position: fixed" @focus="onFocus">
+    <slot />
+  </VisuallyHidden>
+</template>

headless/src/components/toast/toast-provider.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { transformPropsToContext } from '../../shared';
+import { provideCollectionContext, provideToastProviderContext } from './context';
+import type { ToastProviderProps } from './types';
+
+defineOptions({
+  name: 'ToastProvider'
+});
+
+const props = withDefaults(defineProps<ToastProviderProps>(), {
+  label: 'Notification',
+  duration: 5000,
+  swipeDirection: 'right',
+  swipeThreshold: 50
+});
+
+provideCollectionContext();
+provideToastProviderContext(transformPropsToContext(props));
+</script>
+
+<template>
+  <slot />
+</template>