{"id":23098960,"url":"https://github.com/malekim/v-idle","last_synced_at":"2025-04-03T03:13:33.887Z","repository":{"id":37493073,"uuid":"200928380","full_name":"malekim/v-idle","owner":"malekim","description":"A Vue.js plugin to detect idle/non-active users","archived":false,"fork":false,"pushed_at":"2024-06-18T22:51:59.000Z","size":1022,"stargazers_count":70,"open_issues_count":5,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T07:02:41.085Z","etag":null,"topics":["idle","loop","nuxt","reminders","timer","typescript","vue","vue-plugin","vuejs"],"latest_commit_sha":null,"homepage":"https://malekim.github.io/v-idle/","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/malekim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2019-08-06T21:43:02.000Z","updated_at":"2025-03-12T15:12:00.000Z","dependencies_parsed_at":"2024-06-18T19:46:00.160Z","dependency_job_id":"b4f10bcb-ce8c-4639-8425-4aa7bf737088","html_url":"https://github.com/malekim/v-idle","commit_stats":{"total_commits":43,"total_committers":4,"mean_commits":10.75,"dds":"0.18604651162790697","last_synced_commit":"475d923342b408bfc48223990d334150b25683c6"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malekim%2Fv-idle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malekim%2Fv-idle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malekim%2Fv-idle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malekim%2Fv-idle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/malekim","download_url":"https://codeload.github.com/malekim/v-idle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246927839,"owners_count":20856198,"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":["idle","loop","nuxt","reminders","timer","typescript","vue","vue-plugin","vuejs"],"created_at":"2024-12-16T23:15:44.686Z","updated_at":"2025-04-03T03:13:33.864Z","avatar_url":"https://github.com/malekim.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"# v-idle\n\n[![codecov](https://codecov.io/gh/malekim/v-idle/branch/master/graph/badge.svg)](https://codecov.io/gh/malekim/v-idle)\n\nV-idle is a universal Vue plugin compatible with Vue 2 and Vue 3 to detect idle/non-active users.\n\n## Installation\n\nThe plugin can be installed by npm, yarn or pnpm. Alternatively it can be used through jsdelivr CDN.\n\n### NPM\n\n```bash\nnpm install v-idle --save\n```\n\n### Yarn\n\n```bash\nyarn add v-idle\n```\n\n### PNPM\n\n```bash\npnpm add v-idle\n```\n\n### Jsdelivr CDN\n\nLatest version of the plugin is available here:\n[https://cdn.jsdelivr.net/npm/v-idle@latest/build/vidle.umd.min.js](https://cdn.jsdelivr.net/npm/v-idle@latest/build/vidle.umd.min.js)\n\n## Basic usage\n\nFrom 1.0.0 version the plugin supports vue 2 and vue 3 with the help of vue-demi package. \n\nStarting with this version, the plugin no longer requires installation via `Vue.use()`. Simply import the 'Vidle' component where needed.\n\n### Vue 2.6+\n\nFor Vue 2.6+, ensure you have the [@vue/composition-api](https://github.com/vuejs/composition-api) installed.\n\n```javascript\nimport Vue from 'vue'\nimport VueCompositionAPI from '@vue/composition-api'\n\nVue.use(VueCompositionAPI)\n```\n\n```javascript\nimport { defineComponent } from '@vue/composition-api'\nimport Vidle from 'v-idle'\n\nexport default defineComponent({\n  components: {\n    Vidle,\n  },\n})\n```\n\n### Vue 2.7.2\n\n```javascript\nimport { defineComponent } from 'vue'\nimport Vidle from 'v-idle'\n\nexport default defineComponent({\n  components: {\n    Vidle,\n  },\n})\n```\n\n### Vue 3\n\n```javascript\nimport { defineComponent } from 'vue'\nimport Vidle from 'v-idle'\n\nexport default defineComponent({\n  components: {\n    Vidle,\n  },\n})\n```\n\n## Component\n\nInside template use v-idle component:\n\n```html\n\u003cVidle /\u003e\n```\n\nIt will show timer counting down from 05:00 by default.\n\n## Options\n\n### @idle\n\nType: Function\n\nDefault: none\n\nExecutes when the timer reaches 00:00\n\n```html\n\u003cVidle @idle=\"onidle\" /\u003e\n```\n\n### @remind\n\nType: Function\n\nDefault: none\n\nExecutes when the timer reaches time in seconds before 00:00\n\n```html\n\u003cVidle\n  @remind=\"onremind\"\n  :reminders=\"[5, 10, 20, 60]\" /\u003e\n```\n\n### @refresh\n\nType: Function\n\nArgument: object with type of event (for example 'mousemove') and key (if timer was refreshed with keyboard)\n\nDefault: none\n\nExecutes when activity is detected\n\n```html\n\u003cVidle @refresh=\"onrefresh\" /\u003e\n```\n\n```javascript\n  methods: {\n    onrefresh(event: {\n      type: string\n      key: string | undefined\n    }) {\n      console.info(event.type)\n      console.info(event.key)\n      if (event.type === 'keydown') {\n        if (event.key !== undefined \u0026\u0026 event.key === 'Escape') {\n          console.error('Escape clicked')\n        }\n      }\n    },\n  }\n```\n\n### reminders\n\nType: Array\n\nDefault: empty array\n\nArray with seconds. Each value will execute @remind\n\n### loop\n\nType: Boolean\n\nDefault: false\n\nIf set to true, timer will start execution again after 00:00\n\n```html\n\u003cVidle :loop=\"true\" /\u003e\n```\n\n### syncKey\n\nType: String\n\nDefault: ''\n\nSetting `syncKey` to a non-empty string activates the propagation of the `refresh` event across all browser tabs and windows for component instances sharing the same `syncKey`.\n\nHowever, it's important to note that while the `refresh` event is synchronized, the internal timer associated with each component instance continues to count independently from the moment when the component is mounted in each tab or window. In fact, the first `refresh` event will reset timer in all the component instances.\n\nThe synchronization feature is implemented using the browser's BroadcastChannel API, which is supported by all major browsers. For environments where BroadcastChannel is not supported, such as in some older browsers, consider integrating a polyfill to ensure compatibility.\n\n```html\n\u003cVidle syncKey=\"key-to-sync-between-tabs-and-windows\" /\u003e\n```\n\n### events\n\nType: Array\n\nDefault: ['mousemove', 'keypress']\n\nEach event will break countdown.\n\n```html\n\u003cVidle :events=\"['mousemove']\" /\u003e\n```\n\n### wait\n\nType: Number\n\nDefault: 0\n\nHow many second to wait before starting countdown.\n\n```html\n\u003cVidle :wait=\"100\" /\u003e\n```\n\n### duration\n\nType: Number\n\nDefault: 60 * 5\n\nShould be in seconds, default value is 60 * 5 seconds, so 5 minutes.\n\n```html\n\u003cVidle :duration=\"300\" /\u003e\n```\n\n## Example\n\nCreate a timer for 300 seconds (5 minutes) with loop, remind 10 and 15 second before 00:00 with function onremind(), wait 5 seconds before showing user the timer, execute function onidle() when the timer reaches 00:00.\n\n```html\n\u003cVidle\n  @idle=\"onidle\"\n  @remind=\"onremind\"\n  :loop=\"true\"\n  :reminders=\"[10, 15]\"\n  :wait=\"5\"\n  :duration=\"300\" /\u003e\n```\n\n```javascript\n  methods: {\n    onidle() {\n      alert('You have been logged out');\n    },\n    onremind(time) {\n      // alert seconds remaining to 00:00\n      alert(time);\n    }\n  }\n```\n\n## Tests\n\nTo run tests type:\n```bash\nnpm run test\n```\n\nTo run particular test type:\n```bash\nnpm run test -- -t \"test_name\"\n```\n\n## Roadmap\n\n- Add option to show seconds timer instead of clock timer\n\n## License\n\n`v-idle` uses the MIT License (MIT). Please see the [license file](https://github.com/malekim/v-idle/blob/master/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalekim%2Fv-idle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalekim%2Fv-idle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalekim%2Fv-idle/lists"}