{"_id":"@altrex-ui/floating","_rev":"3-605f9a5f994ae24fa4004d39d60a62e8","name":"@altrex-ui/floating","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@altrex-ui/floating","version":"1.0.0","keywords":["vue","vue3","floating","tooltip","popover","dropdown","positioning","composable","floating-ui","altrex"],"author":{"name":"Altrex UI"},"license":"MIT","_id":"@altrex-ui/floating@1.0.0","maintainers":[{"name":"baki121","email":"angelopane22@gmail.com"}],"homepage":"https://github.com/Altrex-ui/altrex-floating#readme","bugs":{"url":"https://github.com/Altrex-ui/altrex-floating/issues"},"dist":{"shasum":"2ac939d52b3b92f91aa6a70a4eeaee6f7f4729f5","tarball":"https://registry.npmjs.org/@altrex-ui/floating/-/floating-1.0.0.tgz","fileCount":51,"integrity":"sha512-C6sASUCcuBYB/MLYTAX7neAhiI6aSTMC/k+uqXLknd70sysKMus7/n+hfEdP1rI3htjgh2cn/XWZZaE6D8+rDQ==","signatures":[{"sig":"MEUCIChTENkODSuKXHtuJiBjhp+Kn1DdxrHc0koVtY7DjZEOAiEA0wTcz7YkjROcyzWSrQj9GNT37DPxlqcuVAtffahxTVY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":97499},"main":"./src/index.js","type":"module","exports":{".":"./src/index.js","./dom":"./src/dom/index.js","./core":"./src/core/index.js","./arrow":"./src/arrow.js","./utils":"./src/utils/index.js","./utils/dom":"./src/utils/dom.js","./useFloating":"./src/useFloating.js"},"gitHead":"72f3f09a203f49e55a43f8106d4c7938962560bf","scripts":{"validate":"node scripts/validate-imports.js"},"_npmUser":{"name":"baki121","email":"angelopane22@gmail.com"},"repository":{"url":"git+https://github.com/Altrex-ui/altrex-floating.git","type":"git","directory":"altrex-floating"},"_npmVersion":"11.6.2","description":"Vue 3 composables for positioning floating elements (tooltips, dropdowns, popovers)","directories":{},"_nodeVersion":"24.12.0","_hasShrinkwrap":false,"devDependencies":{"glob":"^13.0.0"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/floating_1.0.0_1770066055822_0.8479769595032232","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@altrex-ui/floating","version":"2.0.0","keywords":["vue","vue3","floating","tooltip","popover","dropdown","positioning","composable","floating-ui","altrex"],"author":{"name":"Altrex UI"},"license":"MIT","_id":"@altrex-ui/floating@2.0.0","maintainers":[{"name":"baki121","email":"angelopane22@gmail.com"}],"homepage":"https://github.com/Altrex-UI/altrex-floating#readme","bugs":{"url":"https://github.com/Altrex-UI/altrex-floating/issues"},"dist":{"shasum":"caec7d9c09b11bf837961aebbd6fbb7fc5a86285","tarball":"https://registry.npmjs.org/@altrex-ui/floating/-/floating-2.0.0.tgz","fileCount":51,"integrity":"sha512-LOzNc86nrnDIxbRfdpZPdYwLGfIIPAL9kzOUs+Y9myTIWt/hxNa4GE3fFNrWzvBleiMk0W9HMZtenbwCoQqwjQ==","signatures":[{"sig":"MEQCIDOn9IeDGqOigoeQoSjmVu/4ZMhP26x02DD9ehiMKzevAiBfIBwZeSrs0tjCFtltRC2pB+1u/2KlvQtBIkc8wESSeA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":97463},"main":"./src/index.js","type":"module","exports":{".":"./src/index.js","./dom":"./src/dom/index.js","./core":"./src/core/index.js","./arrow":"./src/arrow.js","./utils":"./src/utils/index.js","./utils/dom":"./src/utils/dom.js","./useFloating":"./src/useFloating.js"},"gitHead":"6c5394d19b3f733f691b27654f2dfeefa75c841b","scripts":{"validate":"node scripts/validate-imports.js"},"_npmUser":{"name":"baki121","email":"angelopane22@gmail.com"},"repository":{"url":"git+https://github.com/Altrex-UI/altrex-floating.git","type":"git"},"_npmVersion":"10.8.2","description":"Vue 3 composables for positioning floating elements (tooltips, dropdowns, popovers)","directories":{},"_nodeVersion":"20.20.0","_hasShrinkwrap":false,"devDependencies":{"glob":"^13.0.0"},"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/floating_2.0.0_1770155252959_0.1459278570904825","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@altrex-ui/floating","version":"1.0.1","description":"Vue 3 composables for positioning floating elements (tooltips, dropdowns, popovers)","type":"module","main":"./src/index.js","exports":{".":"./src/index.js","./useFloating":"./src/useFloating.js","./arrow":"./src/arrow.js","./core":"./src/core/index.js","./dom":"./src/dom/index.js","./utils":"./src/utils/index.js","./utils/dom":"./src/utils/dom.js"},"scripts":{"validate":"node scripts/validate-imports.js"},"peerDependencies":{"vue":"^3.5.0"},"keywords":["vue","vue3","floating","tooltip","popover","dropdown","positioning","composable","floating-ui","altrex"],"author":{"name":"Altrex UI"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Altrex-UI/altrex-floating.git"},"devDependencies":{"glob":"^13.0.0"},"_id":"@altrex-ui/floating@1.0.1","gitHead":"fed0b36ebf9af97a98a3d00cec593e06890cbb14","bugs":{"url":"https://github.com/Altrex-UI/altrex-floating/issues"},"homepage":"https://github.com/Altrex-UI/altrex-floating#readme","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-XankyZ/erMj+B5+oXs8mUFviQjIG785ulHD72TRw4h/MgZB830NKmboVbSSmyex51A/Co4nsUMar9qQv18mX7Q==","shasum":"f928013f585f1d8ee8acb7d1d091bc4f4eadc203","tarball":"https://registry.npmjs.org/@altrex-ui/floating/-/floating-1.0.1.tgz","fileCount":51,"unpackedSize":98027,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEi7kalV0GQJPjC0uOUe/7HfEcpJXARyIROPeMs2VelZAiEAozqdntBWecfXnuBf7FXEgxEcKuOLZfQgDGgzrASKYHo="}]},"_npmUser":{"name":"baki121","email":"angelopane22@gmail.com"},"directories":{},"maintainers":[{"name":"baki121","email":"angelopane22@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/floating_1.0.1_1770156918610_0.9572299381258027"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-02T21:00:55.659Z","modified":"2026-02-03T22:15:18.890Z","1.0.0":"2026-02-02T21:00:55.973Z","2.0.0":"2026-02-03T21:47:33.129Z","1.0.1":"2026-02-03T22:15:18.758Z"},"bugs":{"url":"https://github.com/Altrex-UI/altrex-floating/issues"},"author":{"name":"Altrex UI"},"license":"MIT","homepage":"https://github.com/Altrex-UI/altrex-floating#readme","keywords":["vue","vue3","floating","tooltip","popover","dropdown","positioning","composable","floating-ui","altrex"],"repository":{"type":"git","url":"git+https://github.com/Altrex-UI/altrex-floating.git"},"description":"Vue 3 composables for positioning floating elements (tooltips, dropdowns, popovers)","maintainers":[{"name":"baki121","email":"angelopane22@gmail.com"}],"readme":"# @altrex-ui/floating\n\nVue 3 composables for positioning floating elements (tooltips, dropdowns, popovers, modals).\n\nBased on [Floating UI](https://floating-ui.com) - a low-level positioning library.\n\n## Installation\n\n```bash\nnpm install @altrex-ui/floating\n```\n\n## Quick Start\n\n```vue\n<script setup>\nimport { ref } from 'vue'\nimport { useFloating } from '@altrex-ui/floating'\n\nconst reference = ref(null)\nconst floating = ref(null)\n\nconst { floatingStyles } = useFloating(reference, floating, {\n  placement: 'top'\n})\n</script>\n\n<template>\n  <button ref=\"reference\">Hover me</button>\n  <div ref=\"floating\" :style=\"floatingStyles\">\n    Tooltip content\n  </div>\n</template>\n```\n\n## API\n\n### `useFloating(reference, floating, options)`\n\nMain composable for positioning a floating element relative to a reference element.\n\n**Parameters:**\n- `reference` (Ref): Reference element (button, input, etc.)\n- `floating` (Ref): Floating element (tooltip, popover, etc.)\n- `options` (Object): Configuration options\n  - `placement` (String): Preferred placement ('top', 'bottom', 'left', 'right', etc.)\n  - `middleware` (Array): Middleware functions (offset, flip, shift, etc.)\n  - `strategy` (String): Position strategy ('absolute' or 'fixed')\n  - `whileElementsMounted` (Function): Callback when elements are mounted\n\n**Returns:**\n- `x` (Ref<number>): X coordinate\n- `y` (Ref<number>): Y coordinate\n- `placement` (Ref<string>): Final placement\n- `strategy` (Ref<string>): Position strategy\n- `middlewareData` (Ref<object>): Middleware results\n- `isPositioned` (Ref<boolean>): Whether positioned\n- `floatingStyles` (ComputedRef<object>): Ready-to-use styles\n- `update` (Function): Manually trigger update\n\n## Middleware\n\n### Arrow\n\nPositions an arrow element pointing to the reference.\n\n```vue\n<script setup>\nimport { ref, computed } from 'vue'\nimport { useFloating, arrow } from '@altrex-ui/floating'\n\nconst reference = ref(null)\nconst floating = ref(null)\nconst arrowRef = ref(null)\n\nconst { floatingStyles, middlewareData } = useFloating(reference, floating, {\n  placement: 'top',\n  middleware: [\n    arrow({ element: arrowRef })\n  ]\n})\n\nconst arrowX = computed(() => middlewareData.value.arrow?.x ?? 0)\nconst arrowY = computed(() => middlewareData.value.arrow?.y ?? 0)\n</script>\n\n<template>\n  <button ref=\"reference\">Reference</button>\n  <div ref=\"floating\" :style=\"floatingStyles\">\n    <div ref=\"arrowRef\" :style=\"{ left: `${arrowX}px`, top: `${arrowY}px` }\" />\n    Content\n  </div>\n</template>\n```\n\n### Offset\n\nDisplaces the floating element from its reference.\n\n```javascript\nimport { offset } from '@altrex-ui/floating'\n\nuseFloating(reference, floating, {\n  middleware: [\n    offset(10) // 10px offset\n  ]\n})\n```\n\n### Flip\n\nFlips the floating element to opposite side if no space.\n\n```javascript\nimport { flip } from '@altrex-ui/floating'\n\nuseFloating(reference, floating, {\n  middleware: [\n    flip()\n  ]\n})\n```\n\n### Shift\n\nShifts the floating element along the axis to keep it in view.\n\n```javascript\nimport { shift } from '@altrex-ui/floating'\n\nuseFloating(reference, floating, {\n  middleware: [\n    shift({ padding: 5 })\n  ]\n})\n```\n\n### Size\n\nResizes the floating element based on available space.\n\n```javascript\nimport { size } from '@altrex-ui/floating'\n\nuseFloating(reference, floating, {\n  middleware: [\n    size({\n      apply({ availableWidth, availableHeight, elements }) {\n        Object.assign(elements.floating.style, {\n          maxWidth: `${availableWidth}px`,\n          maxHeight: `${availableHeight}px`\n        })\n      }\n    })\n  ]\n})\n```\n\n## Auto Update\n\nAutomatically update position when things change.\n\n```vue\n<script setup>\nimport { useFloating, autoUpdate } from '@altrex-ui/floating'\n\nconst { floatingStyles } = useFloating(reference, floating, {\n  placement: 'top',\n  whileElementsMounted: autoUpdate\n})\n</script>\n```\n\n## Advanced Usage\n\n### Multiple Middleware\n\n```javascript\nimport { useFloating, offset, flip, shift, arrow } from '@altrex-ui/floating'\n\nconst { floatingStyles, middlewareData } = useFloating(reference, floating, {\n  placement: 'top',\n  middleware: [\n    offset(10),\n    flip(),\n    shift({ padding: 5 }),\n    arrow({ element: arrowRef })\n  ]\n})\n```\n\n### Available Placements\n\n- `'top'`, `'top-start'`, `'top-end'`\n- `'bottom'`, `'bottom-start'`, `'bottom-end'`\n- `'left'`, `'left-start'`, `'left-end'`\n- `'right'`, `'right-start'`, `'right-end'`\n\n### Position Strategies\n\n- `'absolute'` (default) - Positioned relative to nearest positioned ancestor\n- `'fixed'` - Positioned relative to viewport\n\n## Package Exports\n\n```javascript\n// Main composable\nimport { useFloating } from '@altrex-ui/floating'\n\n// Arrow middleware\nimport { arrow } from '@altrex-ui/floating'\n\n// Core positioning (framework-agnostic)\nimport { computePosition } from '@altrex-ui/floating/core'\n\n// DOM platform\nimport { autoUpdate } from '@altrex-ui/floating/dom'\n\n// Utilities\nimport { toValue, getDPR } from '@altrex-ui/floating/utils'\nimport { getDocumentElement } from '@altrex-ui/floating/utils/dom'\n```\n\n## Browser Support\n\n- Chrome/Edge (latest)\n- Firefox (latest)\n- Safari (latest)\n- iOS Safari (latest)\n- Chrome Android (latest)\n\n## License\n\nMIT\n\n## Credits\n\nBased on [Floating UI](https://floating-ui.com) by Atomiks.\n\nConverted and adapted for the Altrex Design System.\n","readmeFilename":"README.md"}