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/useFullscreen/demo.vue
+10 -10
View File
@@ -7,7 +7,7 @@ const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target)
</script>
<template>
<div class="flex w-full max-w-sm flex-col gap-4">
<div class="demo-stack max-w-sm">
<div
v-if="!isSupported"
class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
@@ -17,27 +17,27 @@ const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target)
<div
ref="target"
class="relative flex h-44 flex-col items-center justify-center gap-3 overflow-hidden rounded-xl border border-(--border) bg-(--bg-elevated) transition-colors"
:class="isFullscreen && 'bg-(--bg-inset)'"
class="demo-card relative flex h-44 flex-col items-center justify-center gap-3 overflow-hidden transition-colors"
:class="isFullscreen && 'bg-bg-inset'"
>
<span
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
:class="isFullscreen
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
: 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
: 'border-border bg-bg-inset text-fg-muted'"
>
<span class="size-1.5 rounded-full" :class="isFullscreen ? 'bg-emerald-500' : 'bg-(--fg-subtle)'" />
<span class="size-1.5 rounded-full" :class="isFullscreen ? 'bg-emerald-500' : 'bg-fg-subtle'" />
{{ isFullscreen ? 'Fullscreen' : 'Windowed' }}
</span>
<p class="px-6 text-center text-sm text-(--fg-muted)">
<p class="px-6 text-center text-sm text-fg-muted">
This panel becomes the fullscreen target. Press
<kbd class="rounded border border-(--border) bg-(--bg) px-1.5 py-0.5 font-mono text-xs text-(--fg)">Esc</kbd>
<kbd class="rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-xs text-fg">Esc</kbd>
to leave.
</p>
<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 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
:disabled="!isSupported"
@click="toggle"
>
@@ -55,14 +55,14 @@ const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target)
<div class="flex gap-2">
<button
class="inline-flex flex-1 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="!isSupported || isFullscreen"
@click="enter"
>
Enter
</button>
<button
class="inline-flex flex-1 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="!isSupported || !isFullscreen"
@click="exit"
>
vue/toolkit/src/composables/browser/useFullscreen/index.ts
+14 -11
View File
@@ -146,7 +146,7 @@ export function useFullscreen(
const isCurrentElementFullScreen = (): boolean => {
if (fullscreenElementMethod)
return (document as any)?.[fullscreenElementMethod] === targetRef.value;
return (document as Record<string, unknown> | undefined)?.[fullscreenElementMethod] === targetRef.value;
return false;
};
@@ -155,12 +155,12 @@ export function useFullscreen(
if (!flag)
return false;
const docFlag = document && (document as any)[flag];
const docFlag = document && (document as unknown as Record<string, unknown>)[flag];
if (docFlag !== null && docFlag !== undefined)
return Boolean(docFlag);
// Fallback for WebKit / iOS Safari, where the flag lives on the element itself.
const elFlag = (targetRef.value as any)?.[flag];
const elFlag = (targetRef.value as unknown as Record<string, unknown> | null | undefined)?.[flag];
if (elFlag !== null && elFlag !== undefined)
return Boolean(elFlag);
@@ -173,13 +173,15 @@ export function useFullscreen(
const method = exitMethod.value;
if (method) {
if (typeof (document as any)?.[method] === 'function')
await (document as any)[method]();
const docMethod = (document as unknown as Record<string, unknown> | undefined)?.[method];
if (isFunction(docMethod))
await docMethod.call(document);
else {
// Fallback for Safari iOS, where exit lives on the element.
const el = targetRef.value as any;
if (isFunction(el?.[method]))
await el[method]();
const el = targetRef.value as unknown as Record<string, unknown> | null | undefined;
const elMethod = el?.[method];
if (isFunction(elMethod))
await elMethod.call(targetRef.value);
}
}
@@ -193,10 +195,11 @@ export function useFullscreen(
if (isElementFullScreen())
await exit();
const el = targetRef.value as any;
const el = targetRef.value as unknown as Record<string, unknown> | null | undefined;
const method = requestMethod.value;
if (method && isFunction(el?.[method])) {
await el[method]();
const elMethod = method ? el?.[method] : undefined;
if (isFunction(elMethod)) {
await elMethod.call(targetRef.value);
isFullscreen.value = true;
}
}