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:
@@ -22,9 +22,9 @@ function addTag() {
|
||||
</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)">useCloned</span>
|
||||
<span class="demo-label">useCloned</span>
|
||||
<span
|
||||
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium transition"
|
||||
:class="isModified
|
||||
@@ -40,40 +40,40 @@ function addTag() {
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<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)">Source</p>
|
||||
<dl class="space-y-1.5 text-sm text-(--fg)">
|
||||
<div class="demo-card p-4">
|
||||
<p class="demo-label mb-2">Source</p>
|
||||
<dl class="space-y-1.5 text-sm text-fg">
|
||||
<div class="flex justify-between gap-2">
|
||||
<dt class="text-(--fg-muted)">name</dt>
|
||||
<dt class="text-fg-muted">name</dt>
|
||||
<dd class="truncate font-medium">{{ original.name }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between gap-2">
|
||||
<dt class="text-(--fg-muted)">role</dt>
|
||||
<dt class="text-fg-muted">role</dt>
|
||||
<dd class="font-medium">{{ original.role }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between gap-2">
|
||||
<dt class="text-(--fg-muted)">tags</dt>
|
||||
<dd class="font-mono text-xs text-(--fg-muted)">{{ original.tags.length }}</dd>
|
||||
<dt class="text-fg-muted">tags</dt>
|
||||
<dd class="font-mono text-xs text-fg-muted">{{ original.tags.length }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</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)">Cloned (editable)</p>
|
||||
<dl class="space-y-1.5 text-sm text-(--fg)">
|
||||
<div class="demo-card p-4">
|
||||
<p class="demo-label mb-2">Cloned (editable)</p>
|
||||
<dl class="space-y-1.5 text-sm text-fg">
|
||||
<div class="flex justify-between gap-2">
|
||||
<dt class="text-(--fg-muted)">name</dt>
|
||||
<dt class="text-fg-muted">name</dt>
|
||||
<dd class="truncate font-medium">{{ cloned.name }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between gap-2">
|
||||
<dt class="text-(--fg-muted)">role</dt>
|
||||
<dt class="text-fg-muted">role</dt>
|
||||
<dd class="font-medium">{{ cloned.role }}</dd>
|
||||
</div>
|
||||
<div class="flex flex-wrap justify-end gap-1">
|
||||
<span
|
||||
v-for="tag in cloned.tags"
|
||||
:key="tag"
|
||||
class="inline-flex items-center rounded-md border border-(--border) bg-(--bg-inset) px-1.5 py-0.5 font-mono text-[0.65rem] text-(--fg-muted)"
|
||||
class="inline-flex items-center rounded-md border border-border bg-bg-inset px-1.5 py-0.5 font-mono text-[0.65rem] text-fg-muted"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
@@ -85,21 +85,21 @@ function addTag() {
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<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:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
|
||||
class="demo-btn"
|
||||
@click="bumpOriginal"
|
||||
>
|
||||
Cycle source role
|
||||
</button>
|
||||
<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:border-(--border-strong) hover:bg-(--bg-inset) active:scale-[0.98] cursor-pointer"
|
||||
class="demo-btn"
|
||||
@click="addTag"
|
||||
>
|
||||
Edit clone
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-transparent bg-(--accent) px-3 py-1.5 text-sm font-medium text-(--accent-fg) transition hover:bg-(--accent-hover) active:scale-[0.98] cursor-pointer disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
||||
class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
||||
:disabled="!isModified"
|
||||
@click="sync()"
|
||||
>
|
||||
@@ -107,7 +107,7 @@ function addTag() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-(--fg-subtle)">
|
||||
<p class="text-xs text-fg-subtle">
|
||||
Editing the source auto-resyncs the clone. Editing the clone marks it modified without touching the source.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user