docs(vue): add interactive demo for every composable
A beautiful, SSR-safe demo.vue next to each composable, auto-discovered by the docs extractor and rendered client-only on each composable's page.
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useArrayDifference } from './index';
|
||||
|
||||
interface Track {
|
||||
id: number;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const library: Track[] = [
|
||||
{ id: 1, title: 'Midnight City' },
|
||||
{ id: 2, title: 'Strobe' },
|
||||
{ id: 3, title: 'Open Eye Signal' },
|
||||
{ id: 4, title: 'Innerbloom' },
|
||||
{ id: 5, title: 'Teardrop' },
|
||||
{ id: 6, title: 'Resonance' },
|
||||
];
|
||||
|
||||
const list = ref<Track[]>([...library]);
|
||||
const playlist = ref<Track[]>([library[1], library[3]]);
|
||||
const symmetric = ref(false);
|
||||
|
||||
// Compare tracks by their `id` key.
|
||||
const diff = useArrayDifference(list, playlist, 'id', {
|
||||
get symmetric() {
|
||||
return symmetric.value;
|
||||
},
|
||||
});
|
||||
|
||||
function inPlaylist(track: Track) {
|
||||
return playlist.value.some(t => t.id === track.id);
|
||||
}
|
||||
|
||||
function toggle(track: Track) {
|
||||
if (inPlaylist(track))
|
||||
playlist.value = playlist.value.filter(t => t.id !== track.id);
|
||||
else
|
||||
playlist.value = [...playlist.value, track];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-md flex-col gap-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
Library — tap to add / remove from playlist
|
||||
</span>
|
||||
<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)"
|
||||
>
|
||||
Symmetric
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
v-for="track in library"
|
||||
: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)'"
|
||||
@click="toggle(track)"
|
||||
>
|
||||
<span class="truncate">{{ track.title }}</span>
|
||||
<span class="shrink-0 text-xs opacity-70">{{ inPlaylist(track) ? '−' : '+' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-(--border) bg-(--bg-elevated) p-4">
|
||||
<div class="flex items-baseline justify-between">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
{{ symmetric ? 'In exactly one (XOR)' : 'Not in playlist' }}
|
||||
</span>
|
||||
<span class="font-mono text-sm tabular-nums text-(--fg-muted)">
|
||||
{{ diff.length }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul v-if="diff.length" class="mt-3 flex flex-wrap gap-2">
|
||||
<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)"
|
||||
>
|
||||
{{ track.title }}
|
||||
</li>
|
||||
</ul>
|
||||
<p v-else class="mt-3 text-sm text-(--fg-subtle)">
|
||||
No difference — every track matches.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useArrayEvery } from './index';
|
||||
|
||||
interface Check {
|
||||
id: number;
|
||||
label: string;
|
||||
done: boolean;
|
||||
}
|
||||
|
||||
const checklist = ref<Check[]>([
|
||||
{ id: 1, label: 'Build passes', done: true },
|
||||
{ id: 2, label: 'Tests green', done: true },
|
||||
{ id: 3, label: 'Types check', done: false },
|
||||
{ id: 4, label: 'Docs updated', done: false },
|
||||
]);
|
||||
|
||||
// True only when every item is done.
|
||||
const allDone = useArrayEvery(checklist, item => item.done);
|
||||
|
||||
const completed = computed(() => checklist.value.filter(c => c.done).length);
|
||||
|
||||
function toggle(item: Check) {
|
||||
item.done = !item.done;
|
||||
}
|
||||
|
||||
function reset() {
|
||||
checklist.value.forEach(c => (c.done = false));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<div
|
||||
class="rounded-xl border p-4 transition"
|
||||
:class="allDone
|
||||
? 'border-emerald-500/30 bg-emerald-500/10'
|
||||
: 'border-(--border) bg-(--bg-elevated)'"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
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)'"
|
||||
>
|
||||
<span
|
||||
class="size-2 rounded-full"
|
||||
:class="allDone ? 'bg-emerald-500' : 'bg-amber-500'"
|
||||
/>
|
||||
{{ allDone ? 'Ready to ship' : 'Blocked' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mt-2 font-mono text-sm tabular-nums text-(--fg-muted)">
|
||||
{{ completed }} / {{ checklist.length }} complete
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
@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'"
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
<span :class="item.done ? 'line-through text-(--fg-subtle)' : ''">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</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"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useArrayFilter } from './index';
|
||||
|
||||
interface Product {
|
||||
name: string;
|
||||
price: number;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
const products = ref<Product[]>([
|
||||
{ name: 'Mechanical Keyboard', price: 129, inStock: true },
|
||||
{ name: 'USB-C Hub', price: 49, inStock: false },
|
||||
{ name: '4K Monitor', price: 399, inStock: true },
|
||||
{ name: 'Webcam', price: 79, inStock: true },
|
||||
{ name: 'Desk Mat', price: 25, inStock: false },
|
||||
{ name: 'Wireless Mouse', price: 59, inStock: true },
|
||||
]);
|
||||
|
||||
const query = ref('');
|
||||
const maxPrice = ref(400);
|
||||
const inStockOnly = ref(true);
|
||||
|
||||
// Reactive filter: name match + price ceiling + stock toggle.
|
||||
const visible = useArrayFilter(products, (product) => {
|
||||
const matchesName = product.name.toLowerCase().includes(query.value.trim().toLowerCase());
|
||||
const matchesPrice = product.price <= maxPrice.value;
|
||||
const matchesStock = !inStockOnly.value || product.inStock;
|
||||
return matchesName && matchesPrice && matchesStock;
|
||||
});
|
||||
|
||||
const formatted = computed(() =>
|
||||
visible.value.map(p => ({ ...p, priceLabel: `$${p.price}` })),
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-md flex-col gap-4">
|
||||
<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)"
|
||||
>
|
||||
|
||||
<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)">
|
||||
<span>Max price</span>
|
||||
<span class="font-mono text-(--fg) tabular-nums">${{ maxPrice }}</span>
|
||||
</label>
|
||||
<input
|
||||
v-model.number="maxPrice"
|
||||
type="range"
|
||||
min="25"
|
||||
max="400"
|
||||
step="5"
|
||||
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)">
|
||||
<input
|
||||
v-model="inStockOnly"
|
||||
type="checkbox"
|
||||
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)">
|
||||
{{ formatted.length }} / {{ products.length }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul v-if="formatted.length" class="flex flex-col gap-2">
|
||||
<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"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<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"
|
||||
>
|
||||
Out
|
||||
</span>
|
||||
</div>
|
||||
<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)"
|
||||
>
|
||||
No products match your filters.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useArrayFind } from './index';
|
||||
|
||||
interface Product {
|
||||
id: number;
|
||||
name: string;
|
||||
price: number;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
const catalog = ref<Product[]>([
|
||||
{ id: 1, name: 'Mechanical Keyboard', price: 129, inStock: false },
|
||||
{ id: 2, name: 'USB-C Hub', price: 49, inStock: true },
|
||||
{ id: 3, name: 'Desk Mat', price: 24, inStock: true },
|
||||
{ id: 4, name: '4K Monitor', price: 399, inStock: true },
|
||||
{ id: 5, name: 'Webcam', price: 89, inStock: false },
|
||||
]);
|
||||
|
||||
const maxPrice = ref(100);
|
||||
const inStockOnly = ref(true);
|
||||
|
||||
// Reactive Array.prototype.find — re-evaluates when the list, the price
|
||||
// threshold or the toggle change.
|
||||
const firstMatch = useArrayFind(
|
||||
catalog,
|
||||
product =>
|
||||
product.price <= maxPrice.value
|
||||
&& (!inStockOnly.value || product.inStock),
|
||||
);
|
||||
|
||||
const matchIndex = computed(() =>
|
||||
firstMatch.value ? catalog.value.indexOf(firstMatch.value) : -1,
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<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">
|
||||
Max price
|
||||
</label>
|
||||
<span class="font-mono text-sm tabular-nums text-(--fg)">${{ maxPrice }}</span>
|
||||
</div>
|
||||
<input
|
||||
id="maxPrice"
|
||||
v-model.number="maxPrice"
|
||||
type="range"
|
||||
min="20"
|
||||
max="400"
|
||||
step="5"
|
||||
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)">
|
||||
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)">
|
||||
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>
|
||||
</div>
|
||||
<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)">
|
||||
No product matches the filters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="flex flex-col gap-1.5">
|
||||
<li
|
||||
v-for="product in catalog"
|
||||
: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)'"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
{{ product.name }}
|
||||
<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-xs font-medium text-amber-600 dark:text-amber-400"
|
||||
>
|
||||
out of stock
|
||||
</span>
|
||||
</span>
|
||||
<span class="font-mono tabular-nums">${{ product.price }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useArrayFindIndex } from './index';
|
||||
|
||||
interface Step {
|
||||
label: string;
|
||||
done: boolean;
|
||||
}
|
||||
|
||||
const steps = ref<Step[]>([
|
||||
{ label: 'Clone repository', done: true },
|
||||
{ label: 'Install dependencies', done: true },
|
||||
{ label: 'Run database migrations', done: false },
|
||||
{ label: 'Seed sample data', done: false },
|
||||
{ label: 'Start dev server', done: false },
|
||||
]);
|
||||
|
||||
// Reactive Array.prototype.findIndex — points at the first step still pending.
|
||||
const nextIndex = useArrayFindIndex(steps, step => !step.done);
|
||||
|
||||
function toggle(index: number) {
|
||||
steps.value[index]!.done = !steps.value[index]!.done;
|
||||
}
|
||||
</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)">
|
||||
Next pending index
|
||||
</p>
|
||||
<p class="mt-1 font-mono text-3xl font-bold tabular-nums text-(--fg)">
|
||||
{{ nextIndex }}
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-(--fg-subtle)">
|
||||
{{ nextIndex === -1 ? 'All steps complete' : `“${steps[nextIndex]!.label}”` }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ol class="flex flex-col gap-1.5">
|
||||
<li
|
||||
v-for="(step, index) in steps"
|
||||
: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)'"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<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"
|
||||
@click="toggle(index)"
|
||||
>
|
||||
{{ step.done ? 'Undo' : 'Done' }}
|
||||
</button>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useArrayFindLast } from './index';
|
||||
|
||||
interface LogEntry {
|
||||
id: number;
|
||||
level: 'info' | 'warn' | 'error';
|
||||
message: string;
|
||||
}
|
||||
|
||||
let nextId = 6;
|
||||
const log = ref<LogEntry[]>([
|
||||
{ id: 1, level: 'info', message: 'Server started on :3000' },
|
||||
{ id: 2, level: 'warn', message: 'Cache miss for key "user:42"' },
|
||||
{ id: 3, level: 'error', message: 'Failed to reach payments API' },
|
||||
{ id: 4, level: 'info', message: 'Request handled in 12ms' },
|
||||
{ id: 5, level: 'warn', message: 'Deprecated header received' },
|
||||
]);
|
||||
|
||||
const filter = ref<LogEntry['level']>('warn');
|
||||
|
||||
// Reactive Array.prototype.findLast — the most recent entry at this level.
|
||||
const latest = useArrayFindLast(log, entry => entry.level === filter.value);
|
||||
|
||||
const samples: LogEntry['message'][] = [
|
||||
'Disk usage at 82%',
|
||||
'New WebSocket connection',
|
||||
'Token refresh failed',
|
||||
];
|
||||
|
||||
function append(level: LogEntry['level']) {
|
||||
const message = samples[Math.floor(Math.random() * samples.length)]!;
|
||||
log.value.push({ id: nextId++, level, message });
|
||||
}
|
||||
|
||||
const levels: LogEntry['level'][] = ['info', 'warn', 'error'];
|
||||
const tone: Record<LogEntry['level'], string> = {
|
||||
info: 'text-sky-600 dark:text-sky-400',
|
||||
warn: 'text-amber-600 dark:text-amber-400',
|
||||
error: 'text-red-600 dark:text-red-400',
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full max-w-sm flex-col gap-4">
|
||||
<div class="flex gap-1.5">
|
||||
<button
|
||||
v-for="level in levels"
|
||||
:key="level"
|
||||
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)'"
|
||||
@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)">
|
||||
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>
|
||||
</template>
|
||||
<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">
|
||||
<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)' : ''"
|
||||
>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="flex gap-1.5">
|
||||
<button
|
||||
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"
|
||||
@click="append(level)"
|
||||
>
|
||||
+ {{ level }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useArrayIncludes } from './index';
|
||||
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const team = ref<User[]>([
|
||||
{ id: 11, name: 'Ada' },
|
||||
{ id: 22, name: 'Linus' },
|
||||
{ id: 33, name: 'Grace' },
|
||||
{ id: 44, name: 'Dennis' },
|
||||
]);
|
||||
|
||||
// Search by an object key — `id` is compared against the searched value.
|
||||
const searchId = ref(33);
|
||||
const isMember = useArrayIncludes(team, searchId, 'id');
|
||||
|
||||
// Plain primitive membership with a reactive `fromIndex` option.
|
||||
const tags = ref(['vue', 'reactive', 'composable', 'reactive']);
|
||||
const query = ref('reactive');
|
||||
const fromIndex = ref(2);
|
||||
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)">
|
||||
Member by key
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span
|
||||
v-for="user in team"
|
||||
: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)'"
|
||||
>
|
||||
{{ user.name }}
|
||||
<span class="font-mono text-(--fg-subtle)">#{{ user.id }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<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)"
|
||||
>
|
||||
<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)'"
|
||||
>
|
||||
{{ 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)">
|
||||
Primitive search (fromIndex 2)
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span
|
||||
v-for="(tag, i) in tags"
|
||||
: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)'"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
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)"
|
||||
>
|
||||
<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)'"
|
||||
>{{ hasTag }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useArrayJoin } from './index';
|
||||
|
||||
const segments = ref<string[]>(['users', 'robonen', 'projects', 'tools']);
|
||||
const separator = ref('/');
|
||||
const draft = ref('');
|
||||
|
||||
// Reactive Array.prototype.join — recomputes on item edits and separator change.
|
||||
const joined = useArrayJoin(segments, separator);
|
||||
|
||||
const separators: { label: string; value: string }[] = [
|
||||
{ label: 'slash', value: '/' },
|
||||
{ label: 'comma', value: ', ' },
|
||||
{ label: 'dash', value: ' - ' },
|
||||
{ label: 'none', value: '' },
|
||||
];
|
||||
|
||||
function add() {
|
||||
const value = draft.value.trim();
|
||||
if (!value)
|
||||
return;
|
||||
segments.value.push(value);
|
||||
draft.value = '';
|
||||
}
|
||||
|
||||
function remove(index: number) {
|
||||
segments.value.splice(index, 1);
|
||||
}
|
||||
</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)">
|
||||
Joined result
|
||||
</p>
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">Separator</span>
|
||||
<div class="flex gap-1.5">
|
||||
<button
|
||||
v-for="sep in separators"
|
||||
:key="sep.label"
|
||||
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)'"
|
||||
@click="separator = sep.value"
|
||||
>
|
||||
{{ sep.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="flex flex-col gap-1.5">
|
||||
<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)"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<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"
|
||||
@click="remove(index)"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<form class="flex gap-2" @submit.prevent="add">
|
||||
<input
|
||||
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)"
|
||||
>
|
||||
<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"
|
||||
:disabled="!draft.trim()"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useArrayMap } from './index';
|
||||
|
||||
interface Product {
|
||||
name: string;
|
||||
price: number;
|
||||
}
|
||||
|
||||
const products = ref<Product[]>([
|
||||
{ name: 'Mechanical keyboard', price: 129 },
|
||||
{ name: 'Ultrawide monitor', price: 549 },
|
||||
{ name: 'Noise-cancelling headset', price: 299 },
|
||||
{ name: 'Standing desk', price: 419 },
|
||||
]);
|
||||
|
||||
const taxRate = ref(8);
|
||||
|
||||
// Reactive Array.prototype.map — recomputes when products or taxRate change.
|
||||
const priced = useArrayMap(products, (product) => {
|
||||
const gross = product.price * (1 + taxRate.value / 100);
|
||||
return { ...product, gross };
|
||||
});
|
||||
|
||||
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
|
||||
|
||||
const total = computed(() => priced.value.reduce((sum, p) => sum + p.gross, 0));
|
||||
|
||||
function bump(index: number, delta: number) {
|
||||
const next = products.value.slice();
|
||||
next[index] = { ...next[index], price: Math.max(0, next[index].price + delta) };
|
||||
products.value = next;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<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)">
|
||||
Tax {{ taxRate }}%
|
||||
<input
|
||||
v-model.number="taxRate"
|
||||
type="range"
|
||||
min="0"
|
||||
max="25"
|
||||
class="accent-(--accent)"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<ul class="flex flex-col gap-2">
|
||||
<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"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm font-medium text-(--fg)">
|
||||
{{ item.name }}
|
||||
</p>
|
||||
<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"
|
||||
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"
|
||||
aria-label="Increase price"
|
||||
@click="bump(index, 10)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<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)">
|
||||
{{ formatter.format(total) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useArrayReduce } from './index';
|
||||
|
||||
interface Expense {
|
||||
label: string;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
const expenses = ref<Expense[]>([
|
||||
{ label: 'Cloud hosting', amount: 86 },
|
||||
{ label: 'Domain renewal', amount: 18 },
|
||||
{ label: 'Design assets', amount: 42 },
|
||||
{ label: 'Coffee', amount: 7 },
|
||||
]);
|
||||
|
||||
// A reactive seed: the running balance grows as you raise the starting budget.
|
||||
const startingBudget = ref(500);
|
||||
|
||||
// Reactive Array.prototype.reduce with a reactive initial value.
|
||||
const remaining = useArrayReduce(
|
||||
expenses,
|
||||
(balance, expense) => balance - expense.amount,
|
||||
startingBudget,
|
||||
);
|
||||
|
||||
const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
|
||||
|
||||
function add() {
|
||||
expenses.value = [...expenses.value, { label: 'New charge', amount: 25 }];
|
||||
}
|
||||
|
||||
function removeAt(index: number) {
|
||||
expenses.value = expenses.value.filter((_, i) => i !== index);
|
||||
}
|
||||
</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>
|
||||
<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)"
|
||||
>
|
||||
</label>
|
||||
|
||||
<ul class="flex flex-col gap-2">
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
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)">
|
||||
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"
|
||||
@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>
|
||||
<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'"
|
||||
>
|
||||
{{ formatter.format(remaining) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useArraySome } from './index';
|
||||
|
||||
interface Server {
|
||||
name: string;
|
||||
cpu: number;
|
||||
}
|
||||
|
||||
const servers = ref<Server[]>([
|
||||
{ name: 'api-west-1', cpu: 32 },
|
||||
{ name: 'api-east-1', cpu: 54 },
|
||||
{ name: 'worker-1', cpu: 71 },
|
||||
{ name: 'db-primary', cpu: 48 },
|
||||
]);
|
||||
|
||||
const threshold = ref(80);
|
||||
|
||||
// Reactive Array.prototype.some — true if ANY server is over the threshold.
|
||||
const hasOverloaded = useArraySome(servers, server => server.cpu > threshold.value);
|
||||
|
||||
function load(index: number, delta: number) {
|
||||
const next = servers.value.slice();
|
||||
next[index] = { ...next[index], cpu: Math.min(100, Math.max(0, next[index].cpu + delta)) };
|
||||
servers.value = next;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<div
|
||||
class="flex items-center gap-3 rounded-xl border p-4 transition"
|
||||
:class="hasOverloaded
|
||||
? 'border-amber-500/30 bg-amber-500/10'
|
||||
: 'border-emerald-500/30 bg-emerald-500/10'"
|
||||
>
|
||||
<span
|
||||
class="inline-flex size-2.5 rounded-full"
|
||||
:class="hasOverloaded ? 'bg-amber-500' : 'bg-emerald-500'"
|
||||
/>
|
||||
<p class="text-sm font-medium" :class="hasOverloaded ? 'text-amber-700 dark:text-amber-300' : 'text-emerald-700 dark:text-emerald-300'">
|
||||
{{ hasOverloaded ? 'At least one server is overloaded' : 'All servers within limits' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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
|
||||
v-model.number="threshold"
|
||||
type="range"
|
||||
min="40"
|
||||
max="100"
|
||||
class="accent-(--accent)"
|
||||
>
|
||||
<span class="w-10 text-right font-mono tabular-nums text-(--fg)">{{ threshold }}%</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li
|
||||
v-for="(server, index) in servers"
|
||||
:key="server.name"
|
||||
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="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)'"
|
||||
>{{ 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"
|
||||
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"
|
||||
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-full rounded-full transition-all"
|
||||
:class="server.cpu > threshold ? 'bg-amber-500' : 'bg-(--accent)'"
|
||||
:style="{ width: `${server.cpu}%` }"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useArrayUnique } from './index';
|
||||
|
||||
const raw = ref<string[]>([
|
||||
'design',
|
||||
'Design',
|
||||
'frontend',
|
||||
'design',
|
||||
'FRONTEND',
|
||||
'vue',
|
||||
'Vue',
|
||||
'a11y',
|
||||
]);
|
||||
|
||||
const caseInsensitive = ref(true);
|
||||
|
||||
// Switch de-dup strategy reactively:
|
||||
// - identity (===): "Design" and "design" are distinct
|
||||
// - comparator: case-insensitive equality folds them together
|
||||
const exact = useArrayUnique(raw);
|
||||
const folded = useArrayUnique(raw, (a, b) => a.toLowerCase() === b.toLowerCase());
|
||||
|
||||
const unique = computed(() => (caseInsensitive.value ? folded.value : exact.value));
|
||||
|
||||
const draft = ref('');
|
||||
|
||||
function addTag() {
|
||||
const value = draft.value.trim();
|
||||
if (!value)
|
||||
return;
|
||||
raw.value = [...raw.value, value];
|
||||
draft.value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<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)"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
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)">
|
||||
<span>Case-insensitive comparator</span>
|
||||
<input
|
||||
v-model="caseInsensitive"
|
||||
type="checkbox"
|
||||
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)">
|
||||
Source ({{ raw.length }})
|
||||
</span>
|
||||
<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)"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<span class="text-xs font-medium uppercase tracking-wide text-(--fg-subtle)">
|
||||
Unique ({{ unique.length }})
|
||||
</span>
|
||||
<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)"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
<span v-if="unique.length === 0" class="text-xs text-(--fg-subtle)">No tags yet.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useSorted } from './index';
|
||||
|
||||
interface Player {
|
||||
name: string;
|
||||
score: number;
|
||||
level: number;
|
||||
}
|
||||
|
||||
const players = ref<Player[]>([
|
||||
{ name: 'Nova', score: 1840, level: 12 },
|
||||
{ name: 'Echo', score: 2310, level: 9 },
|
||||
{ name: 'Pixel', score: 1840, level: 7 },
|
||||
{ name: 'Drift', score: 990, level: 14 },
|
||||
{ name: 'Sable', score: 2310, level: 11 },
|
||||
]);
|
||||
|
||||
type SortKey = 'score' | 'level' | 'name';
|
||||
|
||||
const sortKey = ref<SortKey>('score');
|
||||
const descending = ref(true);
|
||||
|
||||
// Reactive, stable sorted copy — the source `players` is never mutated.
|
||||
// Stable ordering means ties (equal score) keep their original relative order.
|
||||
const sorted = useSorted(players, (a, b) => {
|
||||
const direction = descending.value ? -1 : 1;
|
||||
if (sortKey.value === 'name')
|
||||
return a.name.localeCompare(b.name) * direction;
|
||||
return (a[sortKey.value] - b[sortKey.value]) * direction;
|
||||
});
|
||||
|
||||
const keys: { id: SortKey; label: string }[] = [
|
||||
{ id: 'score', label: 'Score' },
|
||||
{ id: 'level', label: 'Level' },
|
||||
{ id: 'name', label: 'Name' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full max-w-md flex flex-col gap-4">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<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)'"
|
||||
@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"
|
||||
@click="descending = !descending"
|
||||
>
|
||||
{{ descending ? 'Desc ↓' : 'Asc ↑' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ol class="flex flex-col gap-2">
|
||||
<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"
|
||||
>
|
||||
<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)">
|
||||
Lv {{ player.level }}
|
||||
</span>
|
||||
<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)">
|
||||
Stable sort — players with an equal {{ sortKey }} keep their original order. The source array is left untouched.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user