UNPKG

@ark-ui/vue

Version:

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

70 lines (63 loc) 2.1 kB
'use strict'; Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); const presence = require('@zag-js/presence'); const vue$1 = require('@zag-js/vue'); const vue = require('vue'); function _interopNamespaceDefault(e) { const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } }); if (e) { for (const k in e) { if (k !== 'default') { const d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: () => e[k] }); } } } n.default = e; return Object.freeze(n); } const presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence); const usePresence = (props, emit) => { const wasEverPresent = vue.ref(false); const nodeRef = vue.ref(null); const machineProps = vue.computed(() => { const presenceProps = vue.toValue(props); return { present: presenceProps.present, onExitComplete: () => emit?.("exitComplete") }; }); const service = vue$1.useMachine(presence__namespace.machine, machineProps); const api = vue.computed(() => presence__namespace.connect(service, vue$1.normalizeProps)); vue.watch( () => api.value.present, () => { const isPresent = api.value.present; if (isPresent) wasEverPresent.value = true; } ); vue.watch(nodeRef, () => { if (nodeRef.value) { const node = nodeRef.value.$el ? nodeRef.value.$el : nodeRef.value; if (node) { api.value.setNode(node); } } }); return vue.computed(() => { const localProps = vue.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" } }; }); }; exports.usePresence = usePresence;