feat(useIdle): new composable

[Haviles04]

  // Framework
  import { useIdle, useTheme } from '@vuetify/v0'

  // Utilities
  import { shallowRef } from 'vue'

  useTheme().select('dark')

  const timeout = shallowRef(5_000)
  const warnAt = shallowRef<number | undefined>(3_000)

  const log = shallowRef<string[]>([])

  const idle = useIdle(
    stage => log.value = [`${new Date().toLocaleTimeString()} → ${stage}`, ...log.value].slice(0, 8),
    { timeout, warnAt },
  )

  const now = shallowRef(Date.now())
</script>

<template>
  <div class="p-6 max-w-3xl mx-auto">
    <h1 class="text-2xl font-semibold mb-4">useIdle playground</h1>

    <div class="grid grid-cols-2 gap-3 mb-6 p-4 rounded bg-surface-variant text-sm">
      <div>stage: <strong class="text-primary">{{ idle.stage.value }}</strong></div>
      <div>isPaused: <strong>{{ idle.isPaused.value }}</strong></div>
      <div>isWarning: <strong>{{ idle.isWarning.value }}</strong></div>
      <div>isIdle: <strong>{{ idle.isIdle.value }}</strong></div>
      <div class="col-span-2">
         last activity:
        <strong>{{  idle.lastActivity.value }}</strong>
      </div>
    </div>

    <div class="flex gap-2 mb-6">
      <button class="px-3 py-1 rounded bg-primary text-on-primary" @click="idle.reset()">
        reset
      </button>
      <button class="px-3 py-1 rounded bg-surface-variant" @click="idle.pause()">
        pause
      </button>
      <button class="px-3 py-1 rounded bg-surface-variant" @click="idle.resume()">
        resume
      </button>
    </div>

    <div class="flex flex-col gap-3 text-sm mb-6">
      <label class="flex items-center gap-3">
        <span class="w-24">timeout (ms)</span>
        <input
          v-model.number="timeout"
          type="number"
          step="500"
          class="flex-1 px-2 py-1 rounded border border-divider bg-surface"
        >
      </label>
      <label class="flex items-center gap-3">
        <span class="w-24">warnAt (ms)</span>
        <input
          v-model.number="warnAt"
          type="number"
          step="500"
          class="flex-1 px-2 py-1 rounded border border-divider bg-surface"
        >
      </label>
    </div>

    <div class="text-xs">
      <h2 class="font-semibold mb-2 text-on-surface-variant uppercase tracking-wider">
        transitions
      </h2>
      <ul v-if="log.length" class="space-y-1 font-mono">
        <li v-for="(entry, i) in log" :key="i">{{ entry }}</li>
      </ul>
      <p v-else class="text-on-surface-variant italic">
        Stop moving — fired callbacks will appear here.
      </p>
    </div>

    <p class="mt-6 text-xs text-on-surface-variant">
      Move the mouse, type, scroll, or switch tabs to reset. Tweak the inputs live to see
      reactive options take effect on the next cycle.
    </p>
  </div>
</template>

[pkg-pr-new]

Open in StackBlitz

commit: 75da3f1