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/reactivity/extendRef/demo.vue
+14 -14
View File
@@ -27,13 +27,13 @@ function toggleMute() {
</script>
<template>
<div class="w-full max-w-sm flex flex-col gap-4">
<div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-4">
<div class="demo-stack max-w-sm">
<div class="demo-card p-4 flex flex-col gap-4">
<div class="flex items-center justify-between">
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Volume</span>
<span class="demo-label">Volume</span>
<span
class="font-mono text-3xl font-bold tabular-nums transition-colors"
:class="volume.isMuted ? 'text-(--fg-subtle)' : 'text-(--fg)'"
:class="volume.isMuted ? 'text-fg-subtle' : 'text-fg'"
>{{ volume.percent }}</span>
</div>
@@ -43,20 +43,20 @@ function toggleMute() {
type="range"
min="0"
max="100"
class="w-full accent-(--accent)"
class="w-full accent-accent"
>
<div class="flex gap-1.5">
<button
type="button"
class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg) 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"
class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-border bg-bg 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"
@click="toggleMute"
>
{{ volume.isMuted ? 'Unmute' : 'Mute' }}
</button>
<button
type="button"
class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-(--border) bg-(--bg) 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"
class="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-border bg-bg 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"
@click="volume.max()"
>
Max
@@ -64,24 +64,24 @@ function toggleMute() {
</div>
</div>
<div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
<div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2 font-mono text-sm tabular-nums">
<div class="flex items-center justify-between">
<span class="text-(--fg-muted)">volume.value</span>
<span class="text-(--fg)">{{ volume.value }}</span>
<span class="text-fg-muted">volume.value</span>
<span class="text-fg">{{ volume.value }}</span>
</div>
<div class="flex items-center justify-between">
<span class="text-(--fg-muted)">volume.percent</span>
<span class="text-(--fg)">{{ volume.percent }}</span>
<span class="text-fg-muted">volume.percent</span>
<span class="text-fg">{{ volume.percent }}</span>
</div>
<div class="flex items-center justify-between">
<span class="text-(--fg-muted)">volume.isMuted</span>
<span class="text-fg-muted">volume.isMuted</span>
<span :class="volume.isMuted ? 'text-amber-600 dark:text-amber-400' : 'text-emerald-600 dark:text-emerald-400'">
{{ volume.isMuted }}
</span>
</div>
</div>
<p class="text-xs text-(--fg-subtle)">
<p class="text-xs text-fg-subtle">
One ref carries its value, derived properties, and methods — no destructuring of an object needed.
</p>
</div>