@ark-ui/vue/dist/components/toast/toaster.js

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

import { defineComponent, useId, computed, createVNode, mergeProps, isVNode } from 'vue';
import * as toast from '@zag-js/toast';
import { useMachine, normalizeProps } from '@zag-js/vue';
import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
import { ark } from '../factory.js';
import { ToastProvider } from './use-toast-context.js';

function _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
const Toaster = /* @__PURE__ */ defineComponent((props, {
  attrs,
  slots
}) => {
  const locale = useLocaleContext();
  const env = useEnvironmentContext();
  const service = useMachine(toast.group.machine, {
    store: props.toaster,
    id: useId(),
    dir: locale?.value.dir,
    getRootNode: env?.value.getRootNode
  });
  const api = computed(() => toast.group.connect(service, normalizeProps));
  return () => {
    let _slot;
    return createVNode(ark.div, mergeProps(api.value.getGroupProps(), attrs), _isSlot(_slot = api.value.getToasts().map((toast, index) => createVNode(ToastItem, {
      "value": toast,
      "key": toast.id,
      "parent": service,
      "index": index
    }, {
      default: toast => slots.default?.(toast)
    }))) ? _slot : {
      default: () => [_slot]
    });
  };
}, {
  name: 'Toaster',
  props: {
    toaster: {
      type: Object,
      required: true
    }
  },
  slots: Object
});
const ToastItem = /* @__PURE__ */ defineComponent((props, {
  slots
}) => {
  const machineProps = computed(() => ({
    ...props.value,
    index: props.index,
    parent: props.parent
  }));
  const service = useMachine(toast.machine, machineProps.value);
  const api = computed(() => toast.connect(service, normalizeProps));
  ToastProvider(api);
  return () => slots.default?.(props.value);
}, {
  name: 'ToastItem',
  props: {
    value: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    parent: {
      type: Object,
      required: true
    }
  }
});

export { Toaster };