{"id":16259462,"url":"https://github.com/justintaddei/vue-haptic","last_synced_at":"2025-03-19T22:30:37.028Z","repository":{"id":36990631,"uuid":"246720144","full_name":"justintaddei/vue-haptic","owner":"justintaddei","description":"Declarative haptics for Vue.js using navigator.vibrate","archived":false,"fork":false,"pushed_at":"2023-12-20T00:36:23.000Z","size":86,"stargazers_count":8,"open_issues_count":13,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T11:21:33.459Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/justintaddei.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"buymeacoffee.com/justintaddei"}},"created_at":"2020-03-12T01:53:39.000Z","updated_at":"2024-10-10T11:04:50.000Z","dependencies_parsed_at":"2023-10-03T01:08:50.955Z","dependency_job_id":"d7b33730-1202-498a-b0e8-955065fddf1b","html_url":"https://github.com/justintaddei/vue-haptic","commit_stats":{"total_commits":42,"total_committers":2,"mean_commits":21.0,"dds":"0.23809523809523814","last_synced_commit":"23062db4a377b11cd369ffcab68843f92e5436dd"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":"justintaddei/npm-ts-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintaddei%2Fvue-haptic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintaddei%2Fvue-haptic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintaddei%2Fvue-haptic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justintaddei%2Fvue-haptic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justintaddei","download_url":"https://codeload.github.com/justintaddei/vue-haptic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244515597,"owners_count":20464917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T16:02:51.433Z","updated_at":"2025-03-19T22:30:36.774Z","avatar_url":"https://github.com/justintaddei.png","language":"TypeScript","funding_links":["buymeacoffee.com/justintaddei"],"categories":[],"sub_categories":[],"readme":"# vue-haptic \u003c!-- omit in toc --\u003e\n\n![](https://img.shields.io/github/issues-raw/justintaddei/vue-haptic.svg?style=flat)\n![](https://img.shields.io/npm/v/vue-haptic.svg?style=flat)\n![](https://img.shields.io/npm/dt/vue-haptic.svg?style=flat)\n![](https://img.shields.io/npm/l/vue-haptic.svg?style=flat)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier)\n![](https://img.shields.io/badge/language-typescript-blue.svg?style=flat)\n\nFlexible, declarative, haptics for Vue.js using `navigator.vibrate`\n\n**Contents**\n- [Install](#install)\n- [Usage](#usage)\n- [Pattern Presets](#pattern-presets)\n- [Other Global Options](#other-global-options)\n  - [defaultHapticTrigger](#defaulthaptictrigger)\n  - [disabled](#disabled)\n- [Event Modifiers/Custom Triggers](#event-modifierscustom-triggers)\n  - [Event modifiers](#event-modifiers)\n  - [Custom trigger functions](#custom-trigger-functions)\n- [vm.\\$haptics.cancel()](#vmhapticscancel)\n\n## Install\n\n---\n\n```bash\n$ npm install vue-haptic\n```\n\n```js\n// main.js\nimport Vue from 'vue'\nimport VueHaptic from 'vue-haptic';\n\nVue.use(VueHaptic, {\n  // Required. vue-haptic does not provide\n  // any out-of-the-box patterns\n  patterns: {\n    success: [10, 100, 30],\n    failure: [10, 50, 10, 50, 50, 100, 10],\n    long: 200,\n    default: 10,\n  },\n});\n\n// ...\n```\n\nA `pointer-events` polyfill is recommended to be used alongside `vue-haptic` to support older browsers.  \nPEP is good choice: https://github.com/jquery/PEP  \n\nHave a look at the [caniuse.com data](https://caniuse.com/pointer) for more info.\n\n## Usage\n\n---\n\n```html\n\u003c!-- Uses the global \"default\" pattern (defined by you, see below) --\u003e\n\u003cbutton v-haptic\u003eVibrate!\u003c/button\u003e\n\n\u003c!-- Use with a different trigger event --\u003e\n\u003cbutton v-haptic.pointerup\u003eVibrate!\u003c/button\u003e\n\n\u003c!-- Use a global pattern preset (see below) --\u003e\n\u003cbutton v-haptic:preset\u003eVibrate!\u003c/button\u003e\n\u003cbutton v-haptic=\"preset\"\u003eVibrate!\u003c/button\u003e\n\n\u003c!-- Set a one-off pattern on the element --\u003e\n\u003cbutton v-haptic=\"200\"\u003eVibrate!\u003c/button\u003e\n\u003cbutton v-haptic=\"[10,50,10,50,10]\"\u003eVibrate!\u003c/button\u003e\n\n\u003c!-- Use a custom \"trigger function\"\nto control when the haptic feedback occurs --\u003e\n\u003cbutton v-haptic=\"customTrigger\"\u003eVibrate!\u003c/button\u003e\n\n\u003c!-- Pass options using an object --\u003e\n\u003cbutton\n  v-haptic=\"{\n    pattern: [20,100,20],\n    trigger: customTriggerFunction | event-name\n  }\"\n\u003e\n  Vibrate!\n\u003c/button\u003e\n```\n\n## Pattern Presets\n\n---\n\nPattern presets are defined globally. You can name them anything that can be used as an argument for a Vue directive.\n\n\u003e The \"default\" preset is special. It is used if you don't specify a preset for `v-haptic`.\n\n```js\n// main.js\nVue.use(VueHaptic, {\n  patterns: {\n    foo: 200,\n    bar: [10, 100, 30],\n    // Special\n    default: 10,\n  },\n});\n```\n\nPresets are also available in components as `vm.$haptics.patterns`\n\n```js\nexport default {\n    //...\n    mounted() {\n        console.log(this.$haptics.patterns.bar)\n        // \u003e [10, 100, 30]\n    }\n}\n```\n\n## Other Global Options\n\n---\n\n### defaultHapticTrigger\nUse this to configure the default event used to trigger haptic feedback. By default, `\"pointerdown\"` is used.\n\n```js\n// main.js\nVue.use(VueHaptic, {\n  // patterns: {...},\n\n  defaultHapticTrigger: 'touchstart',\n});\n```\n\n---\n\n### disabled\nUsed to globally disable haptic feedback.  \nThis can also be changed from any component by setting `vm.$haptics.disabled`.  \nThe default is `false` (haptics are enabled).\n\n```js\n// main.js\nVue.use(VueHaptic, {\n  // patterns: {...},\n\n  disabled: false,\n});\n```\n\n## Event Modifiers/Custom Triggers\n\n---\n\n### Event modifiers\n\nYou can use a directive modifier to change the trigger event for a givin element/component:\n\n```html\n\u003cinput type=\"checkbox\" v-haptic.change\u003e\n\u003cinput type=\"text\" v-haptic.input\u003e\n\u003cbutton v-haptic.pointerup\u003eVibrate!\u003c/button\u003e\n\u003c!-- etc. --\u003e\n```\n\nThis also supports custom events emitted from Vue Components:\n```html\n\u003cCustomComponent v-haptic.success /\u003e\n```\n\nYou can use event modifiers and presets at the same time:\n```html\n\u003cbutton v-haptic:foo.click\u003eVibrate!\u003c/button\u003e\n```\n\nThe trigger event can also be set using the trigger option:\n```html\n\u003cbutton v-haptic=\"{\n  trigger: 'click'\n}\"\u003e\n```\n---\n\n### Custom trigger functions\n\nCustom trigger functions can be used when you need to trigger haptics based on something other than an event. Think of these at lifecycle hooks, in that they are called when the directive is bound an element and allow you to do setup work.\n\nA trigger function as the following signature:\n\n`tiggerFunction: (activator: (pattern?) =\u003e boolean, el: Element) =\u003e void`\n\n\n- `activator` - a function that, when called, will activate the haptic feedback. It takes a `pattern` as an optional argument. The `pattern` can be a `number`, `number[]`, or the name of a preset. If the `pattern` is omitted, the preset defined in the markup is used instead (or the default pattern if one is not defined in the markup)\n- `el` - the `Element` that the directive is bound to.\n\n```html\n\u003cinput v-haptic=\"customTrigger\" v-model=\"value\" /\u003e\n\u003c!-- or --\u003e\n\u003cinput v-haptic=\"{trigger:customTrigger}\" v-model=\"value\" /\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return { value: '' };\n    },\n    methods: {\n      customTrigger(activate, el) {\n        this.$watch('value', value =\u003e {\n          // When the input's value is \"vibrate\" the haptics will be triggered.\n          if (value === 'vibrate') activate(this.$haptics.patterns.bar);\n        });\n      },\n    },\n  };\n\u003c/script\u003e\n```\n\n## Miscellaneous\n\n### cancellationPeriod  \nDefines the period of time (in milliseconds) after the haptic trigger is fired but before the haptic feedback is actually activated. During this period the haptic feedback will be canceled if the user moves their finger or otherwise causes a `\"pointercancel\"` or `\"touchcancel\"` event to fire. This option is only applicable if the haptic trigger is `\"pointerdown\"` or `\"touchstart\"`.  \n\n**Default:** 75\n\n```html\n\u003c!-- It can be used per-directive --\u003e\n\u003cbutton v-haptic=\"{\n  cancellationPeriod: 100\n}\"\u003eVibrate!\u003c/button\u003e\n```\n```js\n// or globally\nVue.use(VueHaptic, {\n  // patterns: {...},\n\n  cancellationPeriod: 100\n});\n```\n\n## vm.\\$haptics.cancel()\n\n---\n\nFrom any component, the `vm.$haptics.cancel()` method can be called to stop any currently running haptics\n\n\n# Contributing\n\nIf you've found a bug, or have an idea for a feature, please create in issue!\n\n\n# License\n\nThis project is distributed under the [MIT License](https://github.com/justintaddei/vue-haptics/blob/master/LICENSE.md).\n\nThe MIT License (MIT)\nCopyright (c) 2020 Justin Taddei\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustintaddei%2Fvue-haptic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustintaddei%2Fvue-haptic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustintaddei%2Fvue-haptic/lists"}