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/storage/useCookie/demo.vue
+14 -14
View File
@@ -45,33 +45,33 @@ const accepted = computed(() => Object.values(consent.value).filter(Boolean).len
</script>
<template>
<div class="w-full max-w-sm flex flex-col gap-4">
<div class="demo-stack max-w-sm">
<div class="flex items-center justify-between">
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cookie consent</span>
<span class="inline-flex items-center gap-1.5 rounded-md border border-(--border) bg-(--bg-inset) px-2 py-0.5 text-xs font-medium text-(--fg-muted)">
<span class="h-1.5 w-1.5 rounded-full" :class="isReady ? 'bg-emerald-500' : 'bg-(--fg-subtle) animate-pulse'" />
<span class="demo-label">Cookie consent</span>
<span class="demo-badge">
<span class="h-1.5 w-1.5 rounded-full" :class="isReady ? 'bg-emerald-500' : 'bg-fg-subtle animate-pulse'" />
{{ supportsCookieStore ? 'Cookie Store API' : 'document.cookie' }}
</span>
</div>
<div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4 flex flex-col gap-3">
<div class="demo-card p-4 flex flex-col gap-3">
<button
v-for="category in categories"
:key="category.key"
type="button"
class="flex items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left transition active:scale-[0.99] cursor-pointer"
:class="consent[category.key]
? 'border-transparent bg-(--accent)/10'
: 'border-(--border) bg-(--bg-inset) hover:border-(--border-strong)'"
? 'border-transparent bg-accent/10'
: 'border-border bg-bg-inset hover:border-border-strong'"
@click="toggle(category.key)"
>
<span class="flex flex-col">
<span class="text-sm font-medium text-(--fg)">{{ category.label }}</span>
<span class="text-xs text-(--fg-subtle)">{{ category.hint }}</span>
<span class="text-sm font-medium text-fg">{{ category.label }}</span>
<span class="text-xs text-fg-subtle">{{ category.hint }}</span>
</span>
<span
class="relative h-5 w-9 shrink-0 rounded-full transition"
:class="consent[category.key] ? 'bg-(--accent)' : 'bg-(--border-strong)'"
:class="consent[category.key] ? 'bg-accent' : 'bg-border-strong'"
>
<span
class="absolute top-0.5 h-4 w-4 rounded-full bg-white shadow transition-all"
@@ -81,17 +81,17 @@ const accepted = computed(() => Object.values(consent.value).filter(Boolean).len
</button>
</div>
<div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3 flex flex-col gap-2 font-mono text-xs text-(--fg)">
<div class="rounded-lg border border-border bg-bg-inset p-3 flex flex-col gap-2 font-mono text-xs text-fg">
<div class="flex items-center justify-between">
<span class="text-(--fg-subtle)">second instance</span>
<span class="text-fg-subtle">second instance</span>
<span>{{ accepted }}/{{ categories.length }} accepted · {{ JSON.stringify(mirror) }}</span>
</div>
<div class="truncate text-(--fg-muted)" :title="rawCookie">
<div class="truncate text-fg-muted" :title="rawCookie">
{{ rawCookie }}
</div>
</div>
<p class="text-xs text-(--fg-subtle)">
<p class="text-xs text-fg-subtle">
Both cards bind to the same cookie (24h Max-Age) — toggling one updates the other through cookie change events.
</p>
</div>