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/browser/usePreferredReducedTransparency/demo.vue
+11 -11
View File
@@ -8,9 +8,9 @@ const isReduced = computed(() => transparency.value === 'reduce');
</script>
<template>
<div class="flex w-full max-w-sm 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)">
<span class="demo-label">
prefers-reduced-transparency
</span>
<span
@@ -28,23 +28,23 @@ const isReduced = computed(() => transparency.value === 'reduce');
</div>
<!-- Live preview: a frosted glass panel that flattens when reduce is preferred -->
<div class="relative overflow-hidden rounded-xl border border-(--border) bg-(--bg-inset) p-4">
<div class="relative overflow-hidden rounded-xl border border-border bg-bg-inset p-4">
<div
class="pointer-events-none absolute -left-6 -top-8 size-28 rounded-full bg-(--accent) opacity-60 blur-xl"
class="pointer-events-none absolute -left-6 -top-8 size-28 rounded-full bg-accent opacity-60 blur-xl"
/>
<div
class="pointer-events-none absolute -bottom-10 right-2 size-24 rounded-full bg-sky-500 opacity-50 blur-xl"
/>
<div
class="relative rounded-lg border border-(--border) p-4 transition"
class="relative rounded-lg border border-border p-4 transition"
:class="isReduced
? 'bg-(--bg-elevated)'
: 'bg-(--bg-elevated)/60 backdrop-blur-md'"
? 'bg-bg-elevated'
: 'bg-bg-elevated/60 backdrop-blur-md'"
>
<p class="text-sm font-medium text-(--fg)">
<p class="text-sm font-medium text-fg">
Glass card
</p>
<p class="mt-1 text-sm text-(--fg-muted)">
<p class="mt-1 text-sm text-fg-muted">
{{ isReduced
? 'Translucency removed for clarity.'
: 'Background blurs through the panel.' }}
@@ -52,8 +52,8 @@ const isReduced = computed(() => transparency.value === 'reduce');
</div>
</div>
<p class="text-xs leading-relaxed text-(--fg-subtle)">
Toggle <span class="font-mono text-(--fg-muted)">Reduce transparency</span> in your OS
<p class="text-xs leading-relaxed text-fg-subtle">
Toggle <span class="font-mono text-fg-muted">Reduce transparency</span> in your OS
accessibility settings to see this update live.
</p>
</div>