robonen
aa2938cb34
Genuinely type composable any usages (useStepper/useStorage/useForm/ createEventHook/useSorted/etc.) as proper generics/unknown; keep idiomatic any-function and overload-impl signatures with comments; skipped test -> .todo.
125 lines
3.5 KiB
Vue
125 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useIntervalFn } from './index';
|
|
|
|
const interval = ref(800);
|
|
const logs = ref<{ id: number; time: string }[]>([]);
|
|
let nextId = 0;
|
|
|
|
const { isActive, pause, resume, toggle } = useIntervalFn(
|
|
() => {
|
|
logs.value.unshift({
|
|
id: nextId++,
|
|
time: new Date().toLocaleTimeString(undefined, { hour12: false }),
|
|
});
|
|
if (logs.value.length > 6)
|
|
logs.value.length = 6;
|
|
},
|
|
interval,
|
|
{ immediate: false },
|
|
);
|
|
|
|
const speeds = [
|
|
{ value: 1500, label: 'Slow' },
|
|
{ value: 800, label: 'Normal' },
|
|
{ value: 300, label: 'Fast' },
|
|
] as const;
|
|
|
|
function clear() {
|
|
logs.value = [];
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-stack max-w-sm">
|
|
<div class="demo-card flex items-center justify-between p-4">
|
|
<div>
|
|
<div class="demo-label">
|
|
Interval callback
|
|
</div>
|
|
<div class="mt-1 flex items-center gap-2 text-sm text-fg-muted">
|
|
<span
|
|
class="inline-block size-2 rounded-full transition"
|
|
:class="isActive ? 'bg-emerald-500' : 'bg-border-strong'"
|
|
/>
|
|
{{ isActive ? `Firing every ${interval}ms` : 'Stopped' }}
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="demo-btn-primary"
|
|
@click="toggle"
|
|
>
|
|
{{ isActive ? 'Pause' : 'Start' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<div class="demo-label">
|
|
Interval
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button
|
|
v-for="speed in speeds"
|
|
:key="speed.value"
|
|
class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
|
|
:class="interval === speed.value
|
|
? 'border-transparent bg-accent text-accent-fg'
|
|
: 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
|
|
@click="interval = speed.value"
|
|
>
|
|
{{ speed.label }}
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-fg-subtle">
|
|
Changing the interval while running restarts the timer with the new duration.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="demo-label">
|
|
Tick log
|
|
</div>
|
|
<button
|
|
class="text-xs text-accent-text transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
|
|
:disabled="logs.length === 0"
|
|
@click="clear"
|
|
>
|
|
Clear
|
|
</button>
|
|
</div>
|
|
|
|
<div class="min-h-32 rounded-lg border border-border bg-bg-inset p-3">
|
|
<p v-if="logs.length === 0" class="py-6 text-center text-sm text-fg-subtle">
|
|
No ticks yet — press Start.
|
|
</p>
|
|
<ul v-else class="flex flex-col gap-1.5">
|
|
<li
|
|
v-for="log in logs"
|
|
:key="log.id"
|
|
class="flex items-center gap-2 font-mono text-sm tabular-nums text-fg"
|
|
>
|
|
<span class="inline-block size-1.5 rounded-full bg-accent" />
|
|
{{ log.time }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
|
:disabled="isActive"
|
|
@click="resume"
|
|
>
|
|
Resume
|
|
</button>
|
|
<button
|
|
class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
|
:disabled="!isActive"
|
|
@click="pause"
|
|
>
|
|
Pause
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|