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:
@@ -40,16 +40,16 @@ function toggle(track: Track) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-md flex-col gap-4">
|
||||
<div class="demo-stack max-w-md">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<span class="demo-label">
|
||||
Library — tap to add / remove from playlist
|
||||
</span>
|
||||
<label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
|
||||
<label class="inline-flex cursor-pointer items-center gap-2 text-sm text-fg-muted">
|
||||
<input
|
||||
v-model="symmetric"
|
||||
type="checkbox"
|
||||
class="size-4 cursor-pointer accent-(--accent)"
|
||||
class="size-4 cursor-pointer accent-accent"
|
||||
>
|
||||
Symmetric
|
||||
</label>
|
||||
@@ -61,8 +61,8 @@ function toggle(track: Track) {
|
||||
:key="track.id"
|
||||
class="inline-flex items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
|
||||
:class="inPlaylist(track)
|
||||
? 'border-transparent bg-(--accent) text-(--accent-fg) hover:bg-(--accent-hover)'
|
||||
: 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset) hover:border-(--border-strong)'"
|
||||
? 'border-transparent bg-accent text-accent-fg hover:bg-accent-hover'
|
||||
: 'border-border bg-bg-elevated text-fg hover:bg-bg-inset hover:border-border-strong'"
|
||||
@click="toggle(track)"
|
||||
>
|
||||
<span class="truncate">{{ track.title }}</span>
|
||||
@@ -70,12 +70,12 @@ function toggle(track: Track) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
|
||||
<div class="demo-card p-4">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<span class="demo-label">
|
||||
{{ symmetric ? 'In exactly one (XOR)' : 'Not in playlist' }}
|
||||
</span>
|
||||
<span class="font-mono text-sm tabular-nums text-(--fg-muted)">
|
||||
<span class="font-mono text-sm tabular-nums text-fg-muted">
|
||||
{{ diff.length }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -84,12 +84,12 @@ function toggle(track: Track) {
|
||||
<li
|
||||
v-for="track in diff"
|
||||
:key="track.id"
|
||||
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)"
|
||||
class="demo-badge"
|
||||
>
|
||||
{{ track.title }}
|
||||
</li>
|
||||
</ul>
|
||||
<p v-else class="mt-3 text-sm text-(--fg-subtle)">
|
||||
<p v-else class="mt-3 text-sm text-fg-subtle">
|
||||
No difference — every track matches.
|
||||
</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 two array elements are considered equal.
|
||||
@@ -24,7 +24,7 @@ export interface UseArrayDifferenceOptions<T> {
|
||||
comparator?: UseArrayDifferenceComparatorFn<T> | keyof T;
|
||||
}
|
||||
|
||||
export type UseArrayDifferenceReturn<T = any>
|
||||
export type UseArrayDifferenceReturn<T = unknown>
|
||||
= ComputedRef<T[]>;
|
||||
|
||||
function isArrayDifferenceOptions<T>(value: unknown): value is UseArrayDifferenceOptions<T> {
|
||||
@@ -101,11 +101,11 @@ export function useArrayDifference<T>(
|
||||
// Resolve the comparator once instead of rebuilding it on every recompute.
|
||||
let compare: UseArrayDifferenceComparatorFn<T>;
|
||||
|
||||
if (isString(resolved) || typeof resolved === 'symbol' || typeof resolved === 'number') {
|
||||
if (isString(resolved) || isSymbol(resolved) || isNumber(resolved)) {
|
||||
const key = resolved as keyof T;
|
||||
compare = (value, othVal) => value[key] === othVal[key];
|
||||
}
|
||||
else if (typeof resolved === 'function') {
|
||||
else if (isFunction(resolved)) {
|
||||
compare = resolved;
|
||||
}
|
||||
else {
|
||||
|
||||
@@ -30,22 +30,22 @@ function reset() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<div class="demo-stack max-w-sm">
|
||||
<div
|
||||
class="rounded-xl border p-4 transition"
|
||||
:class="allDone
|
||||
? 'border-emerald-500/30 bg-emerald-500/10'
|
||||
: 'border-(--border) bg-(--bg-elevated)'"
|
||||
: 'border-border bg-bg-elevated'"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<span class="demo-label">
|
||||
Release readiness
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
|
||||
:class="allDone
|
||||
? 'border-emerald-500/30 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-2 rounded-full"
|
||||
@@ -54,7 +54,7 @@ function reset() {
|
||||
{{ allDone ? 'Ready to ship' : 'Blocked' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-2 font-mono text-sm tabular-nums text-(--fg-muted)">
|
||||
<div class="mt-2 font-mono text-sm tabular-nums text-fg-muted">
|
||||
{{ completed }} / {{ checklist.length }} complete
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,18 +62,18 @@ function reset() {
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li v-for="item in checklist" :key="item.id">
|
||||
<button
|
||||
class="flex w-full items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2 text-left text-sm text-(--fg) transition hover:bg-(--bg-inset) hover:border-(--border-strong) active:scale-[0.99] cursor-pointer"
|
||||
class="flex w-full items-center gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2 text-left text-sm text-fg transition hover:bg-bg-inset hover:border-border-strong active:scale-[0.99] cursor-pointer"
|
||||
@click="toggle(item)"
|
||||
>
|
||||
<span
|
||||
class="flex size-5 shrink-0 items-center justify-center rounded-md border text-xs transition"
|
||||
:class="item.done
|
||||
? 'border-transparent bg-(--accent) text-(--accent-fg)'
|
||||
: 'border-(--border-strong) text-transparent'"
|
||||
? 'border-transparent bg-accent text-accent-fg'
|
||||
: 'border-border-strong text-transparent'"
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
<span :class="item.done ? 'line-through text-(--fg-subtle)' : ''">
|
||||
<span :class="item.done ? 'line-through text-fg-subtle' : ''">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</button>
|
||||
@@ -81,7 +81,7 @@ function reset() {
|
||||
</ul>
|
||||
|
||||
<button
|
||||
class="inline-flex items-center justify-center gap-1.5 self-start 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"
|
||||
class="demo-btn self-start"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
|
||||
@@ -35,18 +35,18 @@ const formatted = computed(() =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-md flex-col gap-4">
|
||||
<div class="demo-stack max-w-md">
|
||||
<input
|
||||
v-model="query"
|
||||
type="text"
|
||||
placeholder="Search products…"
|
||||
class="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"
|
||||
>
|
||||
|
||||
<div class="flex flex-col gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
|
||||
<label class="flex items-center justify-between text-sm text-(--fg-muted)">
|
||||
<div class="demo-card flex flex-col gap-3 p-4">
|
||||
<label class="flex items-center justify-between text-sm text-fg-muted">
|
||||
<span>Max price</span>
|
||||
<span class="font-mono text-(--fg) tabular-nums">${{ maxPrice }}</span>
|
||||
<span class="font-mono text-fg tabular-nums">${{ maxPrice }}</span>
|
||||
</label>
|
||||
<input
|
||||
v-model.number="maxPrice"
|
||||
@@ -54,21 +54,21 @@ const formatted = computed(() =>
|
||||
min="25"
|
||||
max="400"
|
||||
step="5"
|
||||
class="h-1.5 w-full cursor-pointer accent-(--accent)"
|
||||
class="h-1.5 w-full cursor-pointer accent-accent"
|
||||
>
|
||||
<label class="inline-flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
|
||||
<label class="inline-flex cursor-pointer items-center gap-2 text-sm text-fg-muted">
|
||||
<input
|
||||
v-model="inStockOnly"
|
||||
type="checkbox"
|
||||
class="size-4 cursor-pointer accent-(--accent)"
|
||||
class="size-4 cursor-pointer accent-accent"
|
||||
>
|
||||
In stock only
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="font-medium uppercase tracking-wide text-(--fg-subtle)">Results</span>
|
||||
<span class="font-mono tabular-nums text-(--fg-muted)">
|
||||
<span class="font-medium uppercase tracking-wide text-fg-subtle">Results</span>
|
||||
<span class="font-mono tabular-nums text-fg-muted">
|
||||
{{ formatted.length }} / {{ products.length }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -77,10 +77,10 @@ const formatted = computed(() =>
|
||||
<li
|
||||
v-for="product in formatted"
|
||||
:key="product.name"
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-medium text-(--fg)">{{ product.name }}</span>
|
||||
<span class="text-sm font-medium text-fg">{{ product.name }}</span>
|
||||
<span
|
||||
v-if="!product.inStock"
|
||||
class="inline-flex items-center rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-600 dark:text-amber-400"
|
||||
@@ -88,12 +88,12 @@ const formatted = computed(() =>
|
||||
Out
|
||||
</span>
|
||||
</div>
|
||||
<span class="font-mono text-sm tabular-nums text-(--fg-muted)">{{ product.priceLabel }}</span>
|
||||
<span class="font-mono text-sm tabular-nums text-fg-muted">{{ product.priceLabel }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
v-else
|
||||
class="rounded-lg border border-dashed border-(--border) bg-(--bg-inset) px-3 py-6 text-center text-sm text-(--fg-subtle)"
|
||||
class="rounded-lg border border-dashed border-border bg-bg-inset px-3 py-6 text-center text-sm text-fg-subtle"
|
||||
>
|
||||
No products match your filters.
|
||||
</div>
|
||||
|
||||
@@ -35,13 +35,13 @@ const matchIndex = computed(() =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<div class="demo-stack max-w-sm">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)" for="maxPrice">
|
||||
<label class="demo-label" for="maxPrice">
|
||||
Max price
|
||||
</label>
|
||||
<span class="font-mono text-sm tabular-nums text-(--fg)">${{ maxPrice }}</span>
|
||||
<span class="font-mono text-sm tabular-nums text-fg">${{ maxPrice }}</span>
|
||||
</div>
|
||||
<input
|
||||
id="maxPrice"
|
||||
@@ -50,28 +50,28 @@ const matchIndex = computed(() =>
|
||||
min="20"
|
||||
max="400"
|
||||
step="5"
|
||||
class="w-full accent-(--accent)"
|
||||
class="w-full accent-accent"
|
||||
>
|
||||
<label class="flex cursor-pointer items-center gap-2 text-sm text-(--fg-muted)">
|
||||
<input v-model="inStockOnly" type="checkbox" class="accent-(--accent)">
|
||||
<label class="flex cursor-pointer items-center gap-2 text-sm text-fg-muted">
|
||||
<input v-model="inStockOnly" type="checkbox" class="accent-accent">
|
||||
In stock only
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
|
||||
<p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<div class="rounded-lg border border-border bg-bg-inset p-3">
|
||||
<p class="demo-label mb-1">
|
||||
First match
|
||||
</p>
|
||||
<template v-if="firstMatch">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<span class="text-sm font-medium text-(--fg)">{{ firstMatch.name }}</span>
|
||||
<span class="font-mono text-sm tabular-nums text-(--fg)">${{ firstMatch.price }}</span>
|
||||
<span class="text-sm font-medium text-fg">{{ firstMatch.name }}</span>
|
||||
<span class="font-mono text-sm tabular-nums text-fg">${{ firstMatch.price }}</span>
|
||||
</div>
|
||||
<p class="mt-1 font-mono text-xs text-(--fg-subtle)">
|
||||
<p class="mt-1 font-mono text-xs text-fg-subtle">
|
||||
index {{ matchIndex }} · id {{ firstMatch.id }}
|
||||
</p>
|
||||
</template>
|
||||
<p v-else class="text-sm text-(--fg-subtle)">
|
||||
<p v-else class="text-sm text-fg-subtle">
|
||||
No product matches the filters
|
||||
</p>
|
||||
</div>
|
||||
@@ -82,8 +82,8 @@ const matchIndex = computed(() =>
|
||||
:key="product.id"
|
||||
class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
|
||||
:class="product.id === firstMatch?.id
|
||||
? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
|
||||
: 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
|
||||
? 'border-accent bg-accent-subtle text-accent-text'
|
||||
: 'border-border bg-bg-elevated text-fg-muted'"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
{{ product.name }}
|
||||
|
||||
@@ -24,15 +24,15 @@ function toggle(index: number) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
|
||||
<p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<div class="demo-stack max-w-sm">
|
||||
<div class="rounded-lg border border-border bg-bg-inset p-3">
|
||||
<p class="demo-label">
|
||||
Next pending index
|
||||
</p>
|
||||
<p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
|
||||
<p class="demo-stat mt-1 text-3xl">
|
||||
{{ nextIndex }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-(--fg-subtle)">
|
||||
<p class="mt-1 text-sm text-fg-subtle">
|
||||
{{ nextIndex === -1 ? 'All steps complete' : `“${steps[nextIndex]!.label}”` }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -43,16 +43,16 @@ function toggle(index: number) {
|
||||
:key="step.label"
|
||||
class="flex items-center justify-between rounded-lg border px-3 py-2 text-sm transition"
|
||||
:class="index === nextIndex
|
||||
? 'border-(--accent) bg-(--accent-subtle) text-(--accent-text)'
|
||||
: 'border-(--border) bg-(--bg-elevated) text-(--fg-muted)'"
|
||||
? 'border-accent bg-accent-subtle text-accent-text'
|
||||
: 'border-border bg-bg-elevated text-fg-muted'"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="font-mono text-xs tabular-nums text-(--fg-subtle)">{{ index }}</span>
|
||||
<span class="font-mono text-xs tabular-nums text-fg-subtle">{{ index }}</span>
|
||||
<span :class="step.done ? 'line-through opacity-60' : ''">{{ step.label }}</span>
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex 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"
|
||||
class="demo-btn"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
{{ step.done ? 'Undo' : 'Done' }}
|
||||
|
||||
@@ -42,7 +42,7 @@ const tone: Record<LogEntry['level'], string> = {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<div class="demo-stack max-w-sm">
|
||||
<div class="flex gap-1.5">
|
||||
<button
|
||||
v-for="level in levels"
|
||||
@@ -50,38 +50,38 @@ const tone: Record<LogEntry['level'], string> = {
|
||||
type="button"
|
||||
class="flex-1 rounded-lg border px-3 py-1.5 text-sm font-medium transition active:scale-[0.98] cursor-pointer"
|
||||
:class="filter === level
|
||||
? 'border-transparent bg-(--accent) text-(--accent-fg)'
|
||||
: 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset)'"
|
||||
? 'border-transparent bg-accent text-accent-fg'
|
||||
: 'border-border bg-bg-elevated text-fg hover:bg-bg-inset'"
|
||||
@click="filter = level"
|
||||
>
|
||||
{{ level }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
|
||||
<p class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<div class="rounded-lg border border-border bg-bg-inset p-3">
|
||||
<p class="demo-label">
|
||||
Latest “{{ filter }}” entry
|
||||
</p>
|
||||
<template v-if="latest">
|
||||
<p class="mt-1 font-mono text-sm text-(--fg)">{{ latest.message }}</p>
|
||||
<p class="mt-1 font-mono text-xs text-(--fg-subtle)">#{{ latest.id }}</p>
|
||||
<p class="mt-1 font-mono text-sm text-fg">{{ latest.message }}</p>
|
||||
<p class="mt-1 font-mono text-xs text-fg-subtle">#{{ latest.id }}</p>
|
||||
</template>
|
||||
<p v-else class="mt-1 text-sm text-(--fg-subtle)">
|
||||
<p v-else class="mt-1 text-sm text-fg-subtle">
|
||||
No “{{ filter }}” entries yet
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="flex max-h-44 flex-col gap-1 overflow-y-auto rounded-lg border border-(--border) bg-(--bg-elevated) p-2">
|
||||
<ul class="flex max-h-44 flex-col gap-1 overflow-y-auto rounded-lg border border-border bg-bg-elevated p-2">
|
||||
<li
|
||||
v-for="entry in log"
|
||||
:key="entry.id"
|
||||
class="flex items-center gap-2 rounded-md px-2 py-1 font-mono text-xs transition"
|
||||
:class="entry.id === latest?.id ? 'bg-(--accent-subtle)' : ''"
|
||||
:class="entry.id === latest?.id ? 'bg-accent-subtle' : ''"
|
||||
>
|
||||
<span class="w-10 shrink-0 font-semibold uppercase" :class="tone[entry.level]">
|
||||
{{ entry.level }}
|
||||
</span>
|
||||
<span class="truncate text-(--fg-muted)">{{ entry.message }}</span>
|
||||
<span class="truncate text-fg-muted">{{ entry.message }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -90,7 +90,7 @@ const tone: Record<LogEntry['level'], string> = {
|
||||
v-for="level in levels"
|
||||
:key="level"
|
||||
type="button"
|
||||
class="flex-1 inline-flex 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"
|
||||
class="demo-btn flex-1"
|
||||
@click="append(level)"
|
||||
>
|
||||
+ {{ level }}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -30,19 +30,19 @@ function remove(index: number) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<div class="rounded-lg border border-(--border) bg-(--bg-inset) p-3">
|
||||
<p class="mb-1 text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<div class="demo-stack max-w-sm">
|
||||
<div class="rounded-lg border border-border bg-bg-inset p-3">
|
||||
<p class="demo-label mb-1">
|
||||
Joined result
|
||||
</p>
|
||||
<p class="break-all font-mono text-sm text-(--fg) tabular-nums">
|
||||
<p class="break-all font-mono text-sm text-fg tabular-nums">
|
||||
<span v-if="joined">{{ joined }}</span>
|
||||
<span v-else class="text-(--fg-subtle)">empty</span>
|
||||
<span v-else class="text-fg-subtle">empty</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Separator</span>
|
||||
<span class="demo-label">Separator</span>
|
||||
<div class="flex gap-1.5">
|
||||
<button
|
||||
v-for="sep in separators"
|
||||
@@ -50,8 +50,8 @@ function remove(index: number) {
|
||||
type="button"
|
||||
class="flex-1 rounded-lg border px-2 py-1.5 text-xs font-medium transition active:scale-[0.98] cursor-pointer"
|
||||
:class="separator === sep.value
|
||||
? 'border-transparent bg-(--accent) text-(--accent-fg)'
|
||||
: 'border-(--border) bg-(--bg-elevated) text-(--fg) hover:bg-(--bg-inset)'"
|
||||
? 'border-transparent bg-accent text-accent-fg'
|
||||
: 'border-border bg-bg-elevated text-fg hover:bg-bg-inset'"
|
||||
@click="separator = sep.value"
|
||||
>
|
||||
{{ sep.label }}
|
||||
@@ -63,16 +63,16 @@ function remove(index: number) {
|
||||
<li
|
||||
v-for="(segment, index) in segments"
|
||||
:key="index"
|
||||
class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-1.5 text-sm text-(--fg)"
|
||||
class="flex items-center justify-between rounded-lg border border-border bg-bg-elevated px-3 py-1.5 text-sm text-fg"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="font-mono text-xs text-(--fg-subtle)">{{ index }}</span>
|
||||
<span class="font-mono text-xs text-fg-subtle">{{ index }}</span>
|
||||
{{ segment }}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Remove segment"
|
||||
class="rounded-md px-2 py-0.5 text-xs font-medium text-(--fg-subtle) transition hover:bg-(--bg-inset) hover:text-(--fg) cursor-pointer"
|
||||
class="rounded-md px-2 py-0.5 text-xs font-medium text-fg-subtle transition hover:bg-bg-inset hover:text-fg cursor-pointer"
|
||||
@click="remove(index)"
|
||||
>
|
||||
✕
|
||||
@@ -85,11 +85,11 @@ function remove(index: number) {
|
||||
v-model="draft"
|
||||
type="text"
|
||||
placeholder="add a segment…"
|
||||
class="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"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40"
|
||||
:disabled="!draft.trim()"
|
||||
>
|
||||
Add
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { computed, toValue } from 'vue';
|
||||
import type { ComputedRef, MaybeRefOrGetter } from 'vue';
|
||||
import { isFunction } from '@robonen/stdlib';
|
||||
|
||||
export type UseArrayJoinReturn = ComputedRef<string>;
|
||||
|
||||
@@ -30,7 +31,7 @@ export function useArrayJoin(
|
||||
// reactive items first lets the computed track per-item ref dependencies.
|
||||
let needsUnwrap = false;
|
||||
for (const item of resolved) {
|
||||
if (typeof item === 'function' || (typeof item === 'object' && item !== null && 'value' in item)) {
|
||||
if (isFunction(item) || (typeof item === 'object' && item !== null && 'value' in item)) {
|
||||
needsUnwrap = true;
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -34,17 +34,17 @@ function bump(index: number, delta: number) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<div class="demo-stack max-w-md">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Cart</span>
|
||||
<label class="flex items-center gap-2 text-sm text-(--fg-muted)">
|
||||
<span class="demo-label">Cart</span>
|
||||
<label class="flex items-center gap-2 text-sm text-fg-muted">
|
||||
Tax {{ taxRate }}%
|
||||
<input
|
||||
v-model.number="taxRate"
|
||||
type="range"
|
||||
min="0"
|
||||
max="25"
|
||||
class="accent-(--accent)"
|
||||
class="accent-accent"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
@@ -53,41 +53,41 @@ function bump(index: number, delta: number) {
|
||||
<li
|
||||
v-for="(item, index) in priced"
|
||||
:key="item.name"
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium text-(--fg)">
|
||||
<p class="truncate text-sm font-medium text-fg">
|
||||
{{ item.name }}
|
||||
</p>
|
||||
<p class="text-xs text-(--fg-subtle)">
|
||||
<p class="text-xs text-fg-subtle">
|
||||
base {{ formatter.format(item.price) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<button
|
||||
class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
|
||||
class="inline-flex size-7 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset active:scale-[0.98] cursor-pointer"
|
||||
aria-label="Decrease price"
|
||||
@click="bump(index, -10)"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex size-7 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
|
||||
class="inline-flex size-7 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset active:scale-[0.98] cursor-pointer"
|
||||
aria-label="Increase price"
|
||||
@click="bump(index, 10)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<span class="w-20 text-right font-mono text-sm tabular-nums text-(--fg)">
|
||||
<span class="w-20 text-right font-mono text-sm tabular-nums text-fg">
|
||||
{{ formatter.format(item.gross) }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Total with tax</span>
|
||||
<span class="font-mono text-xl font-bold tabular-nums text-(--fg)">
|
||||
<div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
|
||||
<span class="demo-label">Total with tax</span>
|
||||
<span class="demo-stat text-xl">
|
||||
{{ formatter.format(total) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -36,14 +36,14 @@ function removeAt(index: number) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<label class="flex items-center justify-between gap-3 rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Starting budget</span>
|
||||
<div class="demo-stack max-w-md">
|
||||
<label class="demo-card flex items-center justify-between gap-3 p-4">
|
||||
<span class="demo-label">Starting budget</span>
|
||||
<input
|
||||
v-model.number="startingBudget"
|
||||
type="number"
|
||||
step="50"
|
||||
class="w-28 rounded-lg border border-(--border) bg-(--bg) px-3 py-1.5 text-right font-mono text-sm tabular-nums text-(--fg) transition focus:border-(--accent) focus:outline-none focus:ring-2 focus:ring-(--ring)"
|
||||
class="w-28 rounded-lg border border-border bg-bg px-3 py-1.5 text-right font-mono text-sm tabular-nums text-fg transition focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
>
|
||||
</label>
|
||||
|
||||
@@ -51,34 +51,34 @@ function removeAt(index: number) {
|
||||
<li
|
||||
v-for="(expense, index) in expenses"
|
||||
:key="index"
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2"
|
||||
class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2"
|
||||
>
|
||||
<span class="flex-1 truncate text-sm text-(--fg)">{{ expense.label }}</span>
|
||||
<span class="flex-1 truncate text-sm text-fg">{{ expense.label }}</span>
|
||||
<span class="font-mono text-sm tabular-nums text-rose-600 dark:text-rose-400">
|
||||
−{{ formatter.format(expense.amount) }}
|
||||
</span>
|
||||
<button
|
||||
class="inline-flex size-6 items-center justify-center rounded-md text-(--fg-subtle) transition hover:bg-(--bg-inset) hover:text-(--fg) active:scale-[0.98] cursor-pointer"
|
||||
class="inline-flex size-6 items-center justify-center rounded-md text-fg-subtle transition hover:bg-bg-inset hover:text-fg active:scale-[0.98] cursor-pointer"
|
||||
aria-label="Remove expense"
|
||||
@click="removeAt(index)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="expenses.length === 0" class="rounded-lg border border-dashed border-(--border) px-3 py-4 text-center text-sm text-(--fg-subtle)">
|
||||
<li v-if="expenses.length === 0" class="rounded-lg border border-dashed border-border px-3 py-4 text-center text-sm text-fg-subtle">
|
||||
No expenses — full budget remains.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button
|
||||
class="inline-flex 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"
|
||||
class="demo-btn"
|
||||
@click="add"
|
||||
>
|
||||
+ Add charge
|
||||
</button>
|
||||
|
||||
<div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--bg-inset) p-3">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Remaining</span>
|
||||
<div class="flex items-center justify-between rounded-lg border border-border bg-bg-inset p-3">
|
||||
<span class="demo-label">Remaining</span>
|
||||
<span
|
||||
class="font-mono text-2xl font-bold tabular-nums"
|
||||
:class="remaining < 0 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400'"
|
||||
|
||||
@@ -27,7 +27,7 @@ function load(index: number, delta: number) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<div class="demo-stack max-w-md">
|
||||
<div
|
||||
class="flex items-center gap-3 rounded-xl border p-4 transition"
|
||||
:class="hasOverloaded
|
||||
@@ -43,7 +43,7 @@ function load(index: number, delta: number) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center justify-between gap-3 text-sm text-(--fg-muted)">
|
||||
<label class="flex items-center justify-between gap-3 text-sm text-fg-muted">
|
||||
<span>Alert threshold</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<input
|
||||
@@ -51,9 +51,9 @@ function load(index: number, delta: number) {
|
||||
type="range"
|
||||
min="40"
|
||||
max="100"
|
||||
class="accent-(--accent)"
|
||||
class="accent-accent"
|
||||
>
|
||||
<span class="w-10 text-right font-mono tabular-nums text-(--fg)">{{ threshold }}%</span>
|
||||
<span class="w-10 text-right font-mono tabular-nums text-fg">{{ threshold }}%</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -61,31 +61,31 @@ function load(index: number, delta: number) {
|
||||
<li
|
||||
v-for="(server, index) in servers"
|
||||
:key="server.name"
|
||||
class="rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5"
|
||||
class="rounded-lg border border-border bg-bg-elevated px-3 py-2.5"
|
||||
>
|
||||
<div class="mb-1.5 flex items-center justify-between">
|
||||
<span class="font-mono text-sm text-(--fg)">{{ server.name }}</span>
|
||||
<span class="font-mono text-sm text-fg">{{ server.name }}</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<span
|
||||
class="font-mono text-sm tabular-nums"
|
||||
:class="server.cpu > threshold ? 'text-amber-600 dark:text-amber-400' : 'text-(--fg-muted)'"
|
||||
:class="server.cpu > threshold ? 'text-amber-600 dark:text-amber-400' : 'text-fg-muted'"
|
||||
>{{ server.cpu }}%</span>
|
||||
<button
|
||||
class="inline-flex size-6 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
|
||||
class="inline-flex size-6 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset active:scale-[0.98] cursor-pointer"
|
||||
aria-label="Decrease load"
|
||||
@click="load(index, -10)"
|
||||
>−</button>
|
||||
<button
|
||||
class="inline-flex size-6 items-center justify-center rounded-md border border-(--border) bg-(--bg-elevated) text-(--fg) transition hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
|
||||
class="inline-flex size-6 items-center justify-center rounded-md border border-border bg-bg-elevated text-fg transition hover:bg-bg-inset active:scale-[0.98] cursor-pointer"
|
||||
aria-label="Increase load"
|
||||
@click="load(index, 10)"
|
||||
>+</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full overflow-hidden rounded-full bg-(--bg-inset)">
|
||||
<div class="h-1.5 w-full overflow-hidden rounded-full bg-bg-inset">
|
||||
<div
|
||||
class="h-full rounded-full transition-all"
|
||||
:class="server.cpu > threshold ? 'bg-amber-500' : 'bg-(--accent)'"
|
||||
:class="server.cpu > threshold ? 'bg-amber-500' : 'bg-accent'"
|
||||
:style="{ width: `${server.cpu}%` }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -35,40 +35,40 @@ function addTag() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<div class="demo-stack max-w-md">
|
||||
<form class="flex gap-2" @submit.prevent="addTag">
|
||||
<input
|
||||
v-model="draft"
|
||||
type="text"
|
||||
placeholder="Add a tag, e.g. TypeScript"
|
||||
class="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"
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
class="demo-btn-primary"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<label class="flex items-center justify-between gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5 text-sm text-(--fg)">
|
||||
<label class="flex items-center justify-between gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2.5 text-sm text-fg">
|
||||
<span>Case-insensitive comparator</span>
|
||||
<input
|
||||
v-model="caseInsensitive"
|
||||
type="checkbox"
|
||||
class="size-4 accent-(--accent) cursor-pointer"
|
||||
class="size-4 accent-accent cursor-pointer"
|
||||
>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<span class="demo-label">
|
||||
Source ({{ raw.length }})
|
||||
</span>
|
||||
<div class="flex flex-wrap gap-1.5 rounded-lg border border-(--border) bg-(--bg-inset) p-3">
|
||||
<div class="flex flex-wrap gap-1.5 rounded-lg border border-border bg-bg-inset p-3">
|
||||
<span
|
||||
v-for="(tag, index) in raw"
|
||||
:key="`${tag}-${index}`"
|
||||
class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-elevated) px-2 py-0.5 text-xs font-medium text-(--fg-muted)"
|
||||
class="inline-flex items-center rounded-md border border-border bg-bg-elevated px-2 py-0.5 text-xs font-medium text-fg-muted"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
@@ -76,18 +76,18 @@ function addTag() {
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
<span class="demo-label">
|
||||
Unique ({{ unique.length }})
|
||||
</span>
|
||||
<div class="flex flex-wrap gap-1.5 rounded-lg border border-(--border) bg-(--bg-elevated) p-3">
|
||||
<div class="flex flex-wrap gap-1.5 rounded-lg border border-border bg-bg-elevated p-3">
|
||||
<span
|
||||
v-for="tag in unique"
|
||||
:key="tag"
|
||||
class="inline-flex items-center gap-1.5 rounded-md border border-(--accent) bg-(--accent-subtle) px-2 py-0.5 text-xs font-medium text-(--accent-text)"
|
||||
class="inline-flex items-center gap-1.5 rounded-md border border-accent bg-accent-subtle px-2 py-0.5 text-xs font-medium text-accent-text"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
<span v-if="unique.length === 0" class="text-xs text-(--fg-subtle)">No tags yet.</span>
|
||||
<span v-if="unique.length === 0" class="text-xs text-fg-subtle">No tags yet.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { computed, toValue } from 'vue';
|
||||
import type { ComputedRef, MaybeRefOrGetter } from 'vue';
|
||||
import { isString, unique } from '@robonen/stdlib';
|
||||
import { isFunction, isNumber, isString, isSymbol, unique } from '@robonen/stdlib';
|
||||
|
||||
/**
|
||||
* Equality comparator deciding whether two array elements are duplicates.
|
||||
@@ -66,12 +66,12 @@ export function useArrayUnique<T>(
|
||||
// Resolve the comparison strategy once, not on every recompute.
|
||||
|
||||
// Key of T (string | number | symbol) -> O(n) first-seen-wins key de-dup.
|
||||
if (isString(comparator) || typeof comparator === 'symbol' || typeof comparator === 'number') {
|
||||
if (isString(comparator) || isSymbol(comparator) || isNumber(comparator)) {
|
||||
const key = comparator as keyof T;
|
||||
return computed<T[]>(() => uniqueByKey(resolve(list), element => element[key] as PropertyKey));
|
||||
}
|
||||
|
||||
if (typeof comparator === 'function') {
|
||||
if (isFunction(comparator)) {
|
||||
// A unary key extractor stays O(n); a binary comparator falls back to O(n²)
|
||||
// pairwise comparison (unavoidable for arbitrary equality). Branch on arity.
|
||||
if (comparator.length <= 1) {
|
||||
|
||||
@@ -38,23 +38,23 @@ const keys: { id: SortKey; label: string }[] = [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<div class="demo-stack max-w-md">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="inline-flex rounded-lg border border-(--border) bg-(--bg-elevated) p-0.5">
|
||||
<div class="inline-flex rounded-lg border border-border bg-bg-elevated p-0.5">
|
||||
<button
|
||||
v-for="key in keys"
|
||||
:key="key.id"
|
||||
class="rounded-md px-3 py-1 text-sm font-medium transition cursor-pointer"
|
||||
:class="sortKey === key.id
|
||||
? 'bg-(--accent) text-(--accent-fg)'
|
||||
: 'text-(--fg-muted) hover:text-(--fg)'"
|
||||
? 'bg-accent text-accent-fg'
|
||||
: 'text-fg-muted hover:text-fg'"
|
||||
@click="sortKey = key.id"
|
||||
>
|
||||
{{ key.label }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex 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"
|
||||
class="demo-btn"
|
||||
@click="descending = !descending"
|
||||
>
|
||||
{{ descending ? 'Desc ↓' : 'Asc ↑' }}
|
||||
@@ -65,22 +65,22 @@ const keys: { id: SortKey; label: string }[] = [
|
||||
<li
|
||||
v-for="(player, index) in sorted"
|
||||
:key="player.name"
|
||||
class="flex items-center gap-3 rounded-lg border border-(--border) bg-(--bg-elevated) px-3 py-2.5"
|
||||
class="flex items-center gap-3 rounded-lg border border-border bg-bg-elevated px-3 py-2.5"
|
||||
>
|
||||
<span class="w-6 text-center font-mono text-sm tabular-nums text-(--fg-subtle)">
|
||||
<span class="w-6 text-center font-mono text-sm tabular-nums text-fg-subtle">
|
||||
{{ index + 1 }}
|
||||
</span>
|
||||
<span class="flex-1 text-sm font-medium text-(--fg)">{{ player.name }}</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="flex-1 text-sm font-medium text-fg">{{ player.name }}</span>
|
||||
<span class="demo-badge">
|
||||
Lv {{ player.level }}
|
||||
</span>
|
||||
<span class="w-16 text-right font-mono text-sm font-semibold tabular-nums text-(--fg)">
|
||||
<span class="w-16 text-right font-mono text-sm font-semibold tabular-nums text-fg">
|
||||
{{ player.score.toLocaleString() }}
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p class="text-xs text-(--fg-subtle)">
|
||||
<p class="text-xs text-fg-subtle">
|
||||
Stable sort — players with an equal {{ sortKey }} keep their original order. The source array is left untouched.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -2,13 +2,13 @@ import { computed, isRef, toValue, watchEffect } from 'vue';
|
||||
import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
|
||||
import { isFunction } from '@robonen/stdlib';
|
||||
|
||||
export type UseSortedCompareFn<T = any>
|
||||
export type UseSortedCompareFn<T = unknown>
|
||||
= (a: T, b: T) => number;
|
||||
|
||||
export type UseSortedFn<T = any>
|
||||
export type UseSortedFn<T = unknown>
|
||||
= (arr: T[], compareFn: UseSortedCompareFn<T>) => T[];
|
||||
|
||||
export interface UseSortedOptions<T = any> {
|
||||
export interface UseSortedOptions<T = unknown> {
|
||||
/**
|
||||
* The sort algorithm to apply. Receives a copy of the array (or the source
|
||||
* itself in `dirty` mode) and the resolved compare function.
|
||||
@@ -101,13 +101,13 @@ const defaultSortFn: UseSortedFn = <T>(source: T[], compareFn: UseSortedCompareF
|
||||
*
|
||||
* @since 0.0.15
|
||||
*/
|
||||
export function useSorted<T = any>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>): Ref<T[]>;
|
||||
export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>): ComputedRef<T[]>;
|
||||
export function useSorted<T = any>(source: Ref<T[]>, options?: UseSortedOptions<T>): Ref<T[]>;
|
||||
export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, options?: UseSortedOptions<T>): ComputedRef<T[]>;
|
||||
export function useSorted<T = any>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): Ref<T[]>;
|
||||
export function useSorted<T = any>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): ComputedRef<T[]>;
|
||||
export function useSorted<T = any>(
|
||||
export function useSorted<T = unknown>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>): Ref<T[]>;
|
||||
export function useSorted<T = unknown>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>): ComputedRef<T[]>;
|
||||
export function useSorted<T = unknown>(source: Ref<T[]>, options?: UseSortedOptions<T>): Ref<T[]>;
|
||||
export function useSorted<T = unknown>(source: MaybeRefOrGetter<T[]>, options?: UseSortedOptions<T>): ComputedRef<T[]>;
|
||||
export function useSorted<T = unknown>(source: Ref<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): Ref<T[]>;
|
||||
export function useSorted<T = unknown>(source: MaybeRefOrGetter<T[]>, compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): ComputedRef<T[]>;
|
||||
export function useSorted<T = unknown>(
|
||||
source: MaybeRefOrGetter<T[]>,
|
||||
compareFnOrOptions?: UseSortedCompareFn<T> | UseSortedOptions<T>,
|
||||
maybeOptions?: Omit<UseSortedOptions<T>, 'compareFn'>,
|
||||
|
||||
Reference in New Issue
Block a user