robonen/tools
1
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

refactor(toolkit): type source any with proper types

Browse Source 
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.
This commit is contained in:
Andrew Robonen
2026-06-15 16:55:07 +07:00
parent 44848bc9e6
commit aa2938cb34
283 changed files with 3505 additions and 3482 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vue/toolkit/src/composables/animation/useIntervalFn/demo.vue
+18 -18
View File
@@ -31,22 +31,22 @@ function clear() {
</script>
<template>
<div class="flex w-full max-w-sm flex-col gap-4">
<div class="flex items-center justify-between rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
<div class="demo-stack max-w-sm">
<div class="demo-card flex items-center justify-between p-4">
<div>
<div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
<div class="demo-label">
Interval callback
</div>
<div class="mt-1 flex items-center gap-2 text-sm text-(--fg-muted)">
<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)'"
:class="isActive ? 'bg-emerald-500' : 'bg-border-strong'"
/>
{{ isActive ? `Firing every ${interval}ms` : 'Stopped' }}
</div>
</div>
<button
class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer"
class="demo-btn-primary"
@click="toggle"
>
{{ isActive ? 'Pause' : 'Start' }}
@@ -54,7 +54,7 @@ function clear() {
</div>
<div class="flex flex-col gap-1.5">
<div class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
<div class="demo-label">
Interval
</div>
<div class="flex gap-2">
@@ -63,24 +63,24 @@ function clear() {
: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)'"
? '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)">
<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="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
<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"
class="text-xs text-accent-text transition hover:underline disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
:disabled="logs.length === 0"
@click="clear"
>
@@ -88,17 +88,17 @@ function 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)">
<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)"
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)" />
<span class="inline-block size-1.5 rounded-full bg-accent" />
{{ log.time }}
</li>
</ul>
@@ -106,14 +106,14 @@ function clear() {
<div class="flex items-center gap-2">
<button
class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
:disabled="isActive"
@click="resume"
>
Resume
</button>
<button
class="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm font-medium text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
:disabled="!isActive"
@click="pause"
>