UNPKG

@ark-ui/vue

Version:

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

76 lines (69 loc) 2.62 kB
'use strict'; Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); const floatingPanel = require('@zag-js/floating-panel'); const vue$1 = require('@zag-js/vue'); const vue = require('vue'); const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs'); const useLocaleContext = require('../../providers/locale/use-locale-context.cjs'); const cleanProps = require('../../utils/clean-props.cjs'); 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 floatingPanel__namespace = /*#__PURE__*/_interopNamespaceDefault(floatingPanel); const useFloatingPanel = (props = {}, emit) => { const env = useEnvironmentContext.useEnvironmentContext(useEnvironmentContext.DEFAULT_ENVIRONMENT); const locale = useLocaleContext.useLocaleContext(useLocaleContext.DEFAULT_LOCALE); const id = vue.useId(); const machineProps = vue.computed(() => { const localProps = vue.toValue(props); return { id, dir: locale?.value.dir, getRootNode: env?.value.getRootNode, ...cleanProps.cleanProps(localProps), onOpenChange: (details) => { emit?.("openChange", details); emit?.("update:open", details.open); localProps.onOpenChange?.(details); }, onSizeChange(details) { emit?.("sizeChange", details); emit?.("update:size", details.size); localProps.onSizeChange?.(details); }, onPositionChange(details) { emit?.("positionChange", details); emit?.("update:position", details.position); localProps.onPositionChange?.(details); }, onPositionChangeEnd(details) { emit?.("positionChangeEnd", details); localProps.onPositionChangeEnd?.(details); }, onSizeChangeEnd(details) { emit?.("sizeChangeEnd", details); localProps.onSizeChangeEnd?.(details); }, onStageChange(details) { emit?.("stageChange", details); localProps.onStageChange?.(details); } }; }); const service = vue$1.useMachine(floatingPanel__namespace.machine, machineProps); return vue.computed(() => floatingPanel__namespace.connect(service, vue$1.normalizeProps)); }; exports.useFloatingPanel = useFloatingPanel;