{"_id":"@affino/popover-vue","_rev":"2-932350ac0b3af2128987bb22468c2bd4","name":"@affino/popover-vue","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@affino/popover-vue","version":"1.0.0","keywords":["vue","popover","headless","controller","surface"],"author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"license":"MIT","_id":"@affino/popover-vue@1.0.0","maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"homepage":"https://affino.dev","bugs":{"url":"https://github.com/affinio/affinio/issues"},"dist":{"shasum":"260417ebb6db8feced37f3bb6437b17ef7749bb1","tarball":"https://registry.npmjs.org/@affino/popover-vue/-/popover-vue-1.0.0.tgz","fileCount":12,"integrity":"sha512-f6S+KKsOeBhmqgXKEhuFRSr5tIZ3G3zCobIoZbe/8V5q3u9KbIDoKiOFlBiWoAIwvFBFXKVK1Lp6ybu23koZKQ==","signatures":[{"sig":"MEYCIQDxy9St3a3TxaS+2tTvNufywn5g1EndTsF3M0Nv/efV6gIhAJcTWx8EUtL6+nHDJMMCsD4vEoQD9u84ZO5z1Bkci3eA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19118},"main":"dist/index.js","type":"module","_from":"file:affino-popover-vue-1.0.0.tgz","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"test":"vitest run","build":"tsc --build tsconfig.json"},"_npmUser":{"name":"affino","email":"anton.pavlov.personal@gmail.com"},"_resolved":"/tmp/c4924a14a50e361b07c4099c0b4e6d78/affino-popover-vue-1.0.0.tgz","_integrity":"sha512-f6S+KKsOeBhmqgXKEhuFRSr5tIZ3G3zCobIoZbe/8V5q3u9KbIDoKiOFlBiWoAIwvFBFXKVK1Lp6ybu23koZKQ==","repository":{"url":"git+https://github.com/affinio/affinio.git#main","type":"git"},"_npmVersion":"10.8.2","description":"Vue 3 composables for the @affino/popover-core controller","directories":{},"sideEffects":false,"_nodeVersion":"20.19.6","dependencies":{"@affino/overlay-host":"^1.0.0","@affino/popover-core":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0"},"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/popover-vue_1.0.0_1769943406281_0.7371989152312104","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@affino/popover-vue","version":"1.1.0","author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"type":"module","description":"Vue 3 composables for the @affino/popover-core controller","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"main":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"peerDependencies":{"vue":"^3.3.0"},"dependencies":{"@affino/popover-core":"^1.1.0","@affino/overlay-kernel":"^0.2.0","@affino/overlay-host":"^1.1.0"},"devDependencies":{"vue":"^3.4.0"},"repository":{"type":"git","url":"git+https://github.com/affinio/affinio.git#main"},"homepage":"https://affino.dev","keywords":["vue","popover","headless","controller","surface"],"license":"MIT","bugs":{"url":"https://github.com/affinio/affinio/issues"},"module":"dist/index.js","scripts":{"build":"tsc --build tsconfig.json","test":"vitest run"},"_id":"@affino/popover-vue@1.1.0","_integrity":"sha512-7sqZuhoGc/aJggYUJ0pU8FqAMdrAcK/utcYGovP9+jiNqOxAraxopowjDFCyj5830RoJJ2epbxV3sM/VZ5h+QA==","_resolved":"/tmp/9b324087e3e5d817af813e7dfebfd1df/affino-popover-vue-1.1.0.tgz","_from":"file:affino-popover-vue-1.1.0.tgz","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-7sqZuhoGc/aJggYUJ0pU8FqAMdrAcK/utcYGovP9+jiNqOxAraxopowjDFCyj5830RoJJ2epbxV3sM/VZ5h+QA==","shasum":"c5642c42c949e92e3f791368fe4c470b1214e28c","tarball":"https://registry.npmjs.org/@affino/popover-vue/-/popover-vue-1.1.0.tgz","fileCount":12,"unpackedSize":21479,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCqkLx9bvZilWF6iODPlGIzf4SRJ8Y85K5Vrlw5/ERQDgIgHCO9UaMvQ9vRwaDkkSHQ3GWC5MQGR2XDq3irAxfi3/s="}]},"_npmUser":{"name":"affino","email":"anton.pavlov.personal@gmail.com"},"directories":{},"maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/popover-vue_1.1.0_1771104602735_0.8040120643714554"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-01T10:56:46.153Z","modified":"2026-02-14T21:30:03.048Z","1.0.0":"2026-02-01T10:56:46.437Z","1.1.0":"2026-02-14T21:30:02.892Z"},"bugs":{"url":"https://github.com/affinio/affinio/issues"},"author":{"name":"Anton Pavlov","email":"a.pavlov@affino.dev"},"license":"MIT","homepage":"https://affino.dev","keywords":["vue","popover","headless","controller","surface"],"repository":{"type":"git","url":"git+https://github.com/affinio/affinio.git#main"},"description":"Vue 3 composables for the @affino/popover-core controller","maintainers":[{"name":"affino","email":"anton.pavlov.personal@gmail.com"}],"readme":"# @affino/popover-vue\n\nRenderless Vue 3 helpers that wrap `@affino/popover-core`. Keep ownership of your DOM while the controller manages ARIA wiring, outside clicks, Escape handling, and floating geometry.\n\n## Install\n\n```bash\npnpm add @affino/popover-vue\n# or\nyarn add @affino/popover-vue\n# or\nnpm install @affino/popover-vue\n```\n\n## Quick start\n\n```vue\n<script setup lang=\"ts\">\nimport { usePopoverController, useFloatingPopover } from \"@affino/popover-vue\"\n\nconst controller = usePopoverController({ id: \"filters\" })\nconst floating = useFloatingPopover(controller, { placement: \"bottom\", gutter: 10 })\n</script>\n\n<template>\n  <button ref=\"floating.triggerRef\" v-bind=\"controller.getTriggerProps()\">\n    Filters\n  </button>\n\n  <Teleport :to=\"floating.teleportTarget\">\n    <div\n      v-if=\"controller.state.value.open\"\n      ref=\"floating.contentRef\"\n      class=\"PopoverPanel\"\n      v-bind=\"controller.getContentProps()\"\n      :style=\"floating.contentStyle\"\n    >\n      <span v-if=\"floating.arrowProps\" class=\"PopoverArrow\" v-bind=\"floating.arrowProps\" :style=\"floating.arrowProps.style\" />\n      <slot />\n    </div>\n  </Teleport>\n</template>\n```\n\n- `usePopoverController()` exposes the headless controller + prop helpers.\n- `useFloatingPopover()` wires DOM refs to `computePosition()`, teleports into the overlay host, and closes on outside clicks when enabled.\n\n## Overlay kernel integration\n\nEvery controller created by `usePopoverController` registers with the shared `@affino/overlay-kernel` manager whenever `document` is available. Pass `overlayKind`, `overlayEntryTraits`, `overlayManager`, or `getOverlayManager` through the hook options to customize ownership, priorities, or provide a bespoke manager. During SSR the hook defers registration until hydration, so server renders remain DOM-free while clients stay in sync with the global overlay stack.\n\n## Controller API\n\n| Method | Description |\n| --- | --- |\n| `controller.state` | `ShallowRef<PopoverState>` updated whenever the surface opens/closes |\n| `controller.getTriggerProps(options?)` | Returns ARIA + event handlers for the trigger button |\n| `controller.getContentProps(options?)` | Returns attributes + Escape handling for the floating surface |\n| `controller.interactOutside(event)` | Close manually when you detect pointer/focus outside |\n| `controller.open(reason?) / close(reason?) / toggle()` | Imperative controls |\n| `controller.dispose()` | Tears everything down on unmount |\n\n## Floating helper options\n\n`useFloatingPopover(controller, options?)` accepts:\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `placement` / `align` / `gutter` | See `computePosition()` | `\"bottom\" / \"center\" / 8` | Geometry inputs |\n| `viewportPadding` | `number` | `8` | Collision padding |\n| `strategy` | `'fixed' | 'absolute'` | `fixed` | Positioning strategy |\n| `teleportTo` | `string | HTMLElement | false` | overlay host | Where the panel Teleport renders |\n| `zIndex` | `number | string` | `120` | Applied to inline styles |\n| `arrow` | `PopoverArrowOptions` | `undefined` | Arrow helper config |\n| `closeOnInteractOutside` | `boolean` | `controller.core.shouldCloseOnInteractOutside()` | Auto-close on outside pointer/focus |\n| `returnFocus` | `boolean` | `true` | Moves focus back to trigger after closing |\n| `lockScroll` | `boolean` | `controller.core.isModal()` | Uses the overlay host scroll-lock helper |\n\nThe binding returns:\n\n- `triggerRef`, `contentRef`, `contentStyle`, `teleportTarget`\n- `arrowProps`, `updatePosition()`\n\nIt also wires document-level pointer/focus listeners to close the popover when the user clicks or tabs outside.\n\n## Outside interactions\n\nThe helper already calls `controller.core.interactOutside()` when it detects pointer/focus outside. If you need custom analytics, pass a callback into the controller constructor.\n\n## Accessibility hints\n\n- Prefer `role=\"dialog\"` for modal experiences. For menu-like popovers, pass `{ role: 'menu' }`.\n- Keep the trigger focusable (button or custom element with `tabindex=\"0\"`).\n- When `lockScroll` is enabled, the helper uses `@affino/overlay-host` to freeze `body` scroll and restore it afterward.\n","readmeFilename":"README.md"}