Skip to content

Commit e3c49ec

Browse files
LouisMazelLouisMazel
committed
fix(docs): useIdleTimeout - fix JS errors
1 parent 28dbec3 commit e3c49ec

File tree

3 files changed

+165
-124
lines changed

3 files changed

+165
-124
lines changed

‎packages/docs/docs/composables/use-idle-timeout.md‎

Lines changed: 153 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,183 @@
11
---
22
title: useIdleTimeout
3-
description: Plugin to track user activity and manage it
3+
description: A Vue 3 composable that provides an easy way to track user inactivity on your website and execute a callback function when the user becomes idle.
44
---
55

66
# {{ $frontmatter.title }}
77

88
{{ $frontmatter.description }}
99

10-
::: tip
10+
::: info
1111
A plugin to know the amount of time a user has spent on your website
1212
:::
1313

1414
## Demo
1515

16-
<br />
17-
18-
<div class="flex items-start gap-05 items-center flex-wrap">
19-
<MazBtn @click="idle.start()" color="info">
20-
Start
21-
</MazBtn>
22-
<MazBtn @click="idle.pause()" color="warning">
23-
Pause
24-
</MazBtn>
25-
<MazBtn @click="idle.resume()">
26-
Resume
27-
</MazBtn>
28-
<MazBtn @click="idle.reset()" color="secondary">
29-
Reset
30-
</MazBtn>
31-
<MazBtn @click="idle.destroy()" color="danger">
32-
Destroy
33-
</MazBtn>
34-
</div>
35-
36-
<br />
37-
38-
<MazCard overflow-hidden style="width: 100%;">
39-
<div style="display: flex;">
40-
<div style="flex: 1;">isIdle: {{event.isIdle ?? false}}</div>
41-
<div v-if="event.eventType" style="flex: 1; padding-left: 10px;">eventType: {{event.eventType ?? '-' }}</div>
16+
<ComponentDemo>
17+
<div class="flex items-start gap-05 items-center flex-wrap">
18+
<MazBtn @click="idleTimeout.start()" color="info">
19+
Start
20+
</MazBtn>
21+
<MazBtn @click="idleTimeout.pause()" color="warning">
22+
Pause
23+
</MazBtn>
24+
<MazBtn @click="idleTimeout.resume()">
25+
Resume
26+
</MazBtn>
27+
<MazBtn @click="idleTimeout.reset()" color="secondary">
28+
Reset
29+
</MazBtn>
30+
<MazBtn @click="idleTimeout.destroy()" color="danger">
31+
Destroy
32+
</MazBtn>
4233
</div>
43-
</MazCard>
44-
45-
**Wait 3 seconds without any actions to see the idle change to true**
46-
47-
## How to use it?
48-
49-
```vue
50-
<template>
51-
<MazBtn @click="idle.start()" color="info">
52-
Start
53-
</MazBtn>
54-
<MazBtn @click="idle.pause()" color="warning">
55-
Pause
56-
</MazBtn>
57-
<MazBtn @click="idle.resume()">
58-
Resume
59-
</MazBtn>
60-
<MazBtn @click="idle.reset()" color="secondary">
61-
Reset
62-
</MazBtn>
63-
<MazBtn @click="idle.destroy()" color="danger">
64-
Destroy
65-
</MazBtn>
66-
67-
<MazCard overflow-hidden style="width: 100%;">
34+
35+
<br />
36+
37+
<MazCard block>
6838
<div style="display: flex;">
69-
<div style="flex: 1;">
70-
isIdle: {{event.isIdle}}
71-
</div>
72-
<div v-if="event.eventType" style="flex: 1; padding-left: 10px;">
73-
eventType: {{event.eventType}}
74-
</div>
39+
<div style="flex: 1;">isIdle: {{event.isIdle ?? false}}</div>
40+
<div v-if="event.eventType" style="flex: 1; padding-left: 10px;">eventType: {{event.eventType ?? '-' }}</div>
7541
</div>
7642
</MazCard>
77-
</template>
7843

79-
<script lang="ts" setup>
80-
import MazBtn from 'maz-ui/components/MazBtn'
81-
import MazCard from 'maz-ui/components/MazCard'
44+
<br />
45+
<br />
46+
47+
<p class="maz-text-warning">Wait 5 seconds without any actions to see the dialog popup</p>
48+
49+
<template #code>
50+
51+
```vue
52+
<template>
53+
<MazBtn @click="idle.start()" color="info">
54+
Start
55+
</MazBtn>
56+
<MazBtn @click="idle.pause()" color="warning">
57+
Pause
58+
</MazBtn>
59+
<MazBtn @click="idle.resume()">
60+
Resume
61+
</MazBtn>
62+
<MazBtn @click="idle.reset()" color="secondary">
63+
Reset
64+
</MazBtn>
65+
<MazBtn @click="idle.destroy()" color="danger">
66+
Destroy
67+
</MazBtn>
68+
69+
<MazCard block>
70+
<div style="display: flex;">
71+
<div style="flex: 1;">
72+
isIdle: {{event.isIdle}}
73+
</div>
74+
<div v-if="event.eventType" style="flex: 1; padding-left: 10px;">
75+
eventType: {{event.eventType}}
76+
</div>
77+
</div>
78+
</MazCard>
79+
</template>
80+
81+
<script lang="ts" setup>
82+
import MazBtn from 'maz-ui/components/MazBtn'
83+
import MazCard from 'maz-ui/components/MazCard'
84+
85+
import { onMounted, ref, onBeforeUnmount } from 'vue'
86+
87+
import { useIdleTimeout, useDialog } from 'maz-ui'
88+
89+
const dialog = useDialog()
90+
91+
const event = ref({})
92+
93+
const timeout = 5000
94+
95+
const idleTimeout = useIdleTimeout({
96+
callback,
97+
options: {
98+
timeout,
99+
immediate: false,
100+
once: false,
101+
},
102+
})
103+
104+
async function callback({ isIdle, eventType, instance }) {
105+
console.log({ isIdle, eventType })
106+
event.value = { isIdle, eventType }
107+
108+
if (isIdle) {
109+
try {
110+
instance.destroy()
111+
await dialog.open({
112+
title: 'Are you still here?',
113+
message: `You have been inactive for ${timeout / 1000} secondes, do you want to continue?`,
114+
cancelText: 'No',
115+
confirmText: 'Yes',
116+
}).promise
117+
instance.start()
118+
} catch (e) {
119+
// do something like logout the user
120+
}
121+
}
122+
}
123+
124+
onMounted(() => {
125+
// should be executed on client side
126+
idleTimeout.start()
127+
})
128+
129+
onBeforeUnmount(() => {
130+
// Destroy the instance when the component is destroyed to avoid memory leaks
131+
idleTimeout.destroy()
132+
})
133+
</script>
134+
```
135+
136+
</template>
137+
</ComponentDemo>
82138

139+
<script lang="ts" setup>
83140
import { onMounted, ref, onBeforeUnmount } from 'vue'
84141

85-
import { useIdleTimeout } from 'maz-ui'
142+
import { useIdleTimeout, useDialog } from 'maz-ui'
86143

87-
const idleTimeout = useIdleTimeout({
88-
callback,
89-
options,
90-
})
144+
const dialog = useDialog()
91145

92146
const event = ref({})
93147

94-
const callback = ({ isIdle, eventType }) => {
95-
console.log({ isIdle, eventType })
96-
event.value = { isIdle, eventType }
97-
}
98-
99-
const options = {
100-
timeout: 3000,
101-
immediate: false,
102-
once: false,
103-
}
104-
105-
// should be executed on client
106-
const callback = ({ isIdle, event }) => {
107-
console.log({ isIdle, event })
108-
event.value = { isIdle, event }
109-
}
110-
111-
onMounted(() => {
112-
idleTimeout.start()
113-
})
148+
const timeout = 5000
114149

115-
onBeforeUnmount(() => {
116-
idleTimeout.destroy()
150+
const idleTimeout = useIdleTimeout({
151+
callback,
152+
options: {
153+
timeout,
154+
immediate: false,
155+
once: false,
156+
},
117157
})
118-
</script>
119-
```
120158

121-
<script lang="ts" setup>
122-
import { onMounted, ref, onBeforeUnmount } from 'vue'
123-
124-
import { useIdleTimeout } from 'maz-ui'
125-
126-
const event = ref({})
127-
128-
const callback = ({ isIdle, eventType }) => {
159+
async function callback({ isIdle, eventType, instance }) {
129160
console.log({ isIdle, eventType })
130161
event.value = { isIdle, eventType }
131-
}
132162

133-
const options = {
134-
timeout: 3000,
135-
immediate: false,
136-
once: false,
163+
if (isIdle) {
164+
try {
165+
instance.destroy()
166+
await dialog.open({
167+
title: 'Are you still here?',
168+
message: `You have been inactive for ${timeout / 1000} secondes, do you want to continue?`,
169+
data: {
170+
cancelText: 'No',
171+
confirmText: 'Yes',
172+
}
173+
}).promise
174+
instance.start()
175+
} catch (e) {
176+
instance.destroy()
177+
}
178+
}
137179
}
138180

139-
const idleTimeout = useIdleTimeout({
140-
callback,
141-
options,
142-
})
143-
144181
onMounted(() => {
145182
// should be executed on client
146183
idleTimeout.start()
@@ -182,37 +219,37 @@ interface IdleTimeoutStrictOption {
182219
Start tracking user - needed for SSR when `immediate` option is set to false (execute it on client side)
183220

184221
```ts
185-
idle.start()
222+
idleTimeout.start()
186223
```
187224

188225
### Pause
189226

190-
Will pause the timeout and events
227+
Will pause the timeout and events, can't be executed when the timeout has expired
191228

192229
```ts
193-
idle.pause()
230+
idleTimeout.pause()
194231
```
195232

196233
### Resume
197234

198235
Resume the instance will reinit the timeout
199236

200237
```ts
201-
idle.resume()
238+
idleTimeout.resume()
202239
```
203240

204241
### Reset
205242

206243
Reset the timeout of the instance like a restart
207244

208245
```ts
209-
idle.reset()
246+
idleTimeout.reset()
210247
```
211248

212249
### Destroy
213250

214251
Will destroy the instance and stop tracking
215252

216253
```ts
217-
idle.destroy()
254+
idleTimeout.destroy()
218255
```

‎packages/lib/modules/helpers/idle-timeout/idle-timeout-handler.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export class IdleTimeout {
6363
this.resetTimeout()
6464

6565
if (this.options.immediate) {
66-
this.callback({ isIdle: false })
66+
this.callback({ isIdle: false, instance: this })
6767
}
6868
}
6969

@@ -87,7 +87,7 @@ export class IdleTimeout {
8787
}
8888

8989
this.resetTimeout()
90-
this.callback({ isIdle: this.isIdle })
90+
this.callback({ isIdle: this.isIdle, instance: this })
9191
this.remainingTime = 0
9292
}
9393

@@ -96,7 +96,7 @@ export class IdleTimeout {
9696
this.isIdle = false
9797
this.remainingTime = 0
9898
this.resetTimeout()
99-
this.callback({ isIdle: this.isIdle })
99+
this.callback({ isIdle: this.isIdle, instance: this })
100100
}
101101

102102
public destroy(): void {
@@ -153,7 +153,7 @@ export class IdleTimeout {
153153

154154
this.resetTimeout()
155155

156-
this.callback({ isIdle: this.isIdle, eventType: event.type })
156+
this.callback({ isIdle: this.isIdle, eventType: event.type, instance: this })
157157
}
158158
catch (error) {
159159
throw new Error(`[IdleTimeout](handleEvent) ${error}`)
@@ -162,7 +162,7 @@ export class IdleTimeout {
162162

163163
private handleTimeout(): void {
164164
this.isIdle = true
165-
this.callback({ isIdle: this.isIdle })
165+
this.callback({ isIdle: this.isIdle, instance: this })
166166

167167
if (this.options.once) {
168168
this.destroy()
@@ -193,6 +193,6 @@ export class IdleTimeout {
193193
this.reset()
194194
}
195195

196-
this.callback({ isIdle: this.isIdle })
196+
this.callback({ isIdle: this.isIdle, instance: this })
197197
}
198198
}

0 commit comments

Comments
 (0)