@ark-ui/vue/dist/components/presence/use-presence.js

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

import * as presence from '@zag-js/presence';
import { useMachine, normalizeProps } from '@zag-js/vue';
import { ref, computed, toValue, watch } from 'vue';

const usePresence = (props, emit) => {
  const wasEverPresent = ref(false);
  const nodeRef = ref(null);
  const machineProps = computed(() => {
    const presenceProps = toValue(props);
    return {
      present: presenceProps.present,
      onExitComplete: () => emit?.("exitComplete")
    };
  });
  const service = useMachine(presence.machine, machineProps);
  const api = computed(() => presence.connect(service, normalizeProps));
  watch(
    () => api.value.present,
    () => {
      const isPresent = api.value.present;
      if (isPresent) wasEverPresent.value = true;
    }
  );
  watch(nodeRef, () => {
    if (nodeRef.value) {
      const node = nodeRef.value.$el ? nodeRef.value.$el : nodeRef.value;
      if (node) {
        api.value.setNode(node);
      }
    }
  });
  return computed(() => {
    const localProps = toValue(props);
    return {
      present: api.value.present,
      unmounted: !api.value.present && !wasEverPresent.value && localProps.lazyMount || localProps?.unmountOnExit && !api.value?.present && wasEverPresent.value,
      presenceProps: {
        ref: nodeRef,
        hidden: !api.value.present,
        "data-state": api.value.skip && localProps.skipAnimationOnMount ? void 0 : localProps?.present ? "open" : "closed"
      }
    };
  });
};

export { usePresence };