{"_id":"@aw3r1se/vue-focus","_rev":"2-e8afd9000a52d7e992a011630058c915","name":"@aw3r1se/vue-focus","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@aw3r1se/vue-focus","version":"0.0.1","keywords":["drag","resize","svg","vue"],"author":{"name":"aw3r1se"},"license":"GPL-3.0","_id":"@aw3r1se/vue-focus@0.0.1","maintainers":[{"name":"aw3r1se","email":"aw3r1se@gmail.com"}],"homepage":"https://github.com/aw3r1se/vue-focus#readme","bugs":{"url":"https://github.com/aw3r1se/vue-focus/issues"},"dist":{"shasum":"9e74aa6215a2ca5fbc7f7610fb67dcca18764a16","tarball":"https://registry.npmjs.org/@aw3r1se/vue-focus/-/vue-focus-0.0.1.tgz","fileCount":5,"integrity":"sha512-jK6OQ96/VW9XSLHRNiVMy2xP+y69CJIpkMCRezaYY6XzyTQonIKTHSIh2oZ6T9YUQ7hvohJRydZJxl8d9z6Eow==","signatures":[{"sig":"MEUCIEt6inxo0MnjH8ZbbmK42vqDemXdoTREDzYGsftABYywAiEA1cth1HrfUmVuSx7J3KasBnw7OX/kPWV91c/VvKX4G0o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2716},"module":"./src/index.js","gitHead":"cd6d5894c03b8b368bb676c6671d3225a5926605","_npmUser":{"name":"aw3r1se","email":"aw3r1se@gmail.com"},"repository":{"url":"git+https://github.com/aw3r1se/vue-focus.git","type":"git"},"_npmVersion":"10.9.2","description":"Focus and unfocus vue-components","directories":{},"sideEffects":false,"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-focus_0.0.1_1754443261910_0.20812324339114618","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@aw3r1se/vue-focus","version":"1.0.0","description":"Focus and unfocus vue-components","type":"module","main":"./src/index.js","module":"./src/index.js","exports":{".":"./src/index.js"},"sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/aw3r1se/vue-focus.git"},"peerDependencies":{"vue":"^3.0.0"},"keywords":["vue","vue3","composable","focus","blur","click-outside"],"author":{"name":"Bogdan Koch","email":"aw3r1se@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/aw3r1se/vue-focus/issues"},"_id":"@aw3r1se/vue-focus@1.0.0","gitHead":"6fd68700c2b75ce651ca0d48ea9d5470072199c2","homepage":"https://github.com/aw3r1se/vue-focus#readme","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Ze7DlBnE1vxH747qXCHqgEis9iDias+fg0eu5Ua+l1QwJ6wGT63n5rYmoSC0xzqztlwSeTq1P0SuwOpXrE8XSw==","shasum":"c8caa5181e675a06d09b67dfb02fc1ded7cf0dde","tarball":"https://registry.npmjs.org/@aw3r1se/vue-focus/-/vue-focus-1.0.0.tgz","fileCount":5,"unpackedSize":5436,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBX12bC31d2CZ8vGfRT3r4a1YVRgVCTD6WAECR1VI7MhAiA657DtL4r3ea9mJ5RUw5fYiCKumdkAOFvYpgSqRxLhvw=="}]},"_npmUser":{"name":"aw3r1se","email":"aw3r1se@gmail.com"},"directories":{},"maintainers":[{"name":"aw3r1se","email":"aw3r1se@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-focus_1.0.0_1781043535955_0.6608186378760934"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-06T01:21:01.766Z","modified":"2026-06-09T22:18:56.225Z","0.0.1":"2025-08-06T01:21:02.078Z","1.0.0":"2026-06-09T22:18:56.103Z"},"bugs":{"url":"https://github.com/aw3r1se/vue-focus/issues"},"author":{"name":"Bogdan Koch","email":"aw3r1se@gmail.com"},"license":"MIT","homepage":"https://github.com/aw3r1se/vue-focus#readme","keywords":["vue","vue3","composable","focus","blur","click-outside"],"repository":{"type":"git","url":"git+https://github.com/aw3r1se/vue-focus.git"},"description":"Focus and unfocus vue-components","maintainers":[{"name":"aw3r1se","email":"aw3r1se@gmail.com"}],"readme":"# vue-focus\n\nA tiny Vue 3 composable that tells you whether the user's interaction is focused\n**inside** a given element or **outside** of it. Useful for highlighting the\nactive panel, closing dropdowns/menus on outside clicks, and similar UI states.\n\n## 🔧 Installation\n\n```sh\nnpm i @aw3r1se/vue-focus\n```\n\n## ✏️ Usage\n\n```vue\n<script setup>\n  import { ref, watch } from 'vue';\n  import { useFocus } from '@aw3r1se/vue-focus';\n\n  const el = ref();\n  const { isFocused } = useFocus(el);\n\n  watch(isFocused, focused => {\n    focused ? markAsRed()\n            : markAsGrey();\n  });\n</script>\n\n<template>\n  <div ref=\"el\">\n    ...\n  </div>\n</template>\n```\n\n`isFocused` becomes `true` when an interaction starts inside `el` and `false`\nwhen it starts anywhere outside of it.\n\n## 📚 API\n\n### `useFocus(targetRef, options?)`\n\n| Parameter   | Type                       | Description                                  |\n| ----------- | -------------------------- | -------------------------------------------- |\n| `targetRef` | `Ref<HTMLElement \\| null>` | Template ref of the element to watch.        |\n| `options`   | `object`                   | Optional configuration (see below).          |\n\n#### Options\n\n| Option         | Type       | Default                          | Description                                   |\n| -------------- | ---------- | -------------------------------- | --------------------------------------------- |\n| `initialValue` | `boolean`  | `false`                          | Focus state before the first interaction.     |\n| `events`       | `string[]` | `['mousedown', 'touchstart']`    | Document events that update the focus state.  |\n\n#### Returns\n\n| Property    | Type           | Description                                       |\n| ----------- | -------------- | ------------------------------------------------- |\n| `isFocused` | `Ref<boolean>` | Reactive flag, `true` while the element is focused. |\n\nThe composable attaches the listeners on `onMounted` and removes them on\n`onUnmounted`, so there is nothing to clean up manually.\n\n## 🤝 Contributing\nIf you want to add or improve something - you are welcome\n\n* Fork → Branch → Commit with feat: / fix: prefix\n* Test locally\n* Open a pull request\n","readmeFilename":"README.md"}