refactor(toolkit): type source any with proper types
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:
@@ -26,9 +26,9 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<div class="demo-stack max-w-sm">
|
||||
<div class="demo-card p-4">
|
||||
<p class="demo-label mb-2">
|
||||
Member by key
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
@@ -37,11 +37,11 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
|
||||
:key="user.id"
|
||||
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
|
||||
:class="user.id === searchId
|
||||
? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
|
||||
: 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
|
||||
? 'border-accent bg-accent-subtle text-accent-text'
|
||||
: 'border-border bg-bg-inset text-fg-muted'"
|
||||
>
|
||||
{{ user.name }}
|
||||
<span class="font-mono text-(--fg-subtle)">#{{ user.id }}</span>
|
||||
<span class="font-mono text-fg-subtle">#{{ user.id }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -49,21 +49,21 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
|
||||
<input
|
||||
v-model.number="searchId"
|
||||
type="number"
|
||||
class="w-24 rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
|
||||
class="w-24 rounded-lg border border-border bg-bg px-3 py-2 text-sm text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium"
|
||||
:class="isMember
|
||||
? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
|
||||
: 'bg-(--bg-inset) text-(--fg-subtle)'"
|
||||
: 'bg-bg-inset text-fg-subtle'"
|
||||
>
|
||||
{{ isMember ? 'includes id' : 'not found' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
|
||||
<p class="mb-2 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<div class="demo-card p-4">
|
||||
<p class="demo-label mb-2">
|
||||
Primitive search (fromIndex 2)
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
@@ -72,8 +72,8 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
|
||||
:key="i"
|
||||
class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium"
|
||||
:class="i < 2
|
||||
? 'border-(--border) bg-(--bg-inset) text-(--fg-subtle) opacity-50 line-through'
|
||||
: 'border-(--border) bg-(--bg-inset) text-(--fg-muted)'"
|
||||
? 'border-border bg-bg-inset text-fg-subtle opacity-50 line-through'
|
||||
: 'border-border bg-bg-inset text-fg-muted'"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
@@ -83,13 +83,13 @@ const hasTag = useArrayIncludes(tags, query, { fromIndex: fromIndex.value });
|
||||
v-model="query"
|
||||
type="text"
|
||||
placeholder="search a tag…"
|
||||
class="mt-3 w-full rounded-lg border border-(--border) bg-(--bg) px-3 py-2 text-sm text-(--fg) placeholder:text-(--fg-subtle) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
|
||||
class="demo-input mt-3"
|
||||
>
|
||||
<p class="mt-2 text-sm text-(--fg-muted)">
|
||||
<p class="mt-2 text-sm text-fg-muted">
|
||||
Searching from index 2 →
|
||||
<span
|
||||
class="font-mono font-semibold"
|
||||
:class="hasTag ? 'text-emerald-600 dark:text-emerald-400' : 'text-(--fg-subtle)'"
|
||||
:class="hasTag ? 'text-emerald-600 dark:text-emerald-400' : 'text-fg-subtle'"
|
||||
>{{ hasTag }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { computed, toValue } from 'vue';
|
||||
import type { ComputedRef, MaybeRefOrGetter } from 'vue';
|
||||
import { isObject, isString } from '@robonen/stdlib';
|
||||
import { isFunction, isNumber, isObject, isString, isSymbol } from '@robonen/stdlib';
|
||||
|
||||
/**
|
||||
* Comparator deciding whether an array element equals the searched value.
|
||||
@@ -83,11 +83,11 @@ export function useArrayIncludes<T, V = T>(
|
||||
// Resolve the comparator once instead of on every recompute.
|
||||
let compare: UseArrayIncludesComparatorFn<T, V>;
|
||||
|
||||
if (isString(resolved) || typeof resolved === 'symbol' || typeof resolved === 'number') {
|
||||
if (isString(resolved) || isSymbol(resolved) || isNumber(resolved)) {
|
||||
const key = resolved as keyof T;
|
||||
compare = (element, searched) => element[key] === (searched as unknown);
|
||||
}
|
||||
else if (typeof resolved === 'function') {
|
||||
else if (isFunction(resolved)) {
|
||||
compare = resolved;
|
||||
}
|
||||
else {
|
||||
|
||||
Reference in New Issue
Block a user