125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import type { BlueprintFunction } from "@/data/listBlueprint"
|
|
|
|
defineProps<{ fn: BlueprintFunction }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex flex-wrap items-baseline gap-2">
|
|
<span class="text-lg font-bold tracking-wide text-accent">{{ fn.name }}</span>
|
|
<span
|
|
v-for="c in fn.caps"
|
|
:key="c"
|
|
class="chip"
|
|
:class="c === 'List' ? 'chip-core' : 'chip-cap'"
|
|
>{{ c }}</span
|
|
>
|
|
</div>
|
|
<p class="mb-4 mt-1 text-xs text-base-content/50">{{ fn.verb }}</p>
|
|
|
|
<section v-if="fn.state.length" class="block-sec">
|
|
<div class="k"><span>State touched</span><span class="rule" /></div>
|
|
<div v-for="[name, type] in fn.state" :key="name" class="flex gap-2">
|
|
<span>{{ name }}</span
|
|
><span class="text-base-content/40">:</span><span class="text-secondary">{{ type }}</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="fn.behaviors.length" class="block-sec">
|
|
<div class="k">
|
|
<span>Behavior{{ fn.behaviors.length > 1 ? "s" : "" }}</span
|
|
><span class="rule" />
|
|
</div>
|
|
<div v-for="b in fn.behaviors" :key="b.sig" class="beh">
|
|
<div class="text-accent">{{ b.sig }}</div>
|
|
<div class="flex gap-2 text-xs text-base-content/70">
|
|
<span class="w-7 shrink-0 text-base-content/40">pre</span
|
|
><span class="text-base-content">{{ b.pre }}</span>
|
|
</div>
|
|
<div class="flex gap-2 text-xs text-base-content/70">
|
|
<span class="w-7 shrink-0 text-base-content/40">eff</span
|
|
><span class="text-base-content">{{ b.eff }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section v-if="fn.invariants.length" class="block-sec">
|
|
<div class="k">
|
|
<span>Invariant{{ fn.invariants.length > 1 ? "s" : "" }}</span
|
|
><span class="rule" />
|
|
</div>
|
|
<ul class="tight">
|
|
<li v-for="i in fn.invariants" :key="i">{{ i }}</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section v-if="fn.failures.length" class="block-sec">
|
|
<div class="k text-error/80">
|
|
<span>⚠ Failure mode{{ fn.failures.length > 1 ? "s" : "" }}</span
|
|
><span class="rule" />
|
|
</div>
|
|
<ul class="tight text-error">
|
|
<li v-for="x in fn.failures" :key="x">{{ x }}</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section v-if="fn.perf.length" class="block-sec">
|
|
<div class="k text-warning/80"><span>⚡ Critical performance</span><span class="rule" /></div>
|
|
<ul class="tight text-warning">
|
|
<li v-for="x in fn.perf" :key="x">{{ x }}</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<p v-for="n in fn.notes" :key="n" class="text-[11px] italic text-base-content/40">— {{ n }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.chip {
|
|
border: 1px solid;
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
.chip-cap {
|
|
border-color: var(--color-secondary);
|
|
color: var(--color-secondary);
|
|
}
|
|
.chip-core {
|
|
border-color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
|
|
color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
|
|
}
|
|
.block-sec {
|
|
margin-bottom: 0.875rem;
|
|
}
|
|
.k {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 10px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
.k .rule {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: color-mix(in srgb, var(--color-base-content) 15%, transparent);
|
|
}
|
|
.beh {
|
|
border-left: 2px solid color-mix(in srgb, var(--color-base-content) 30%, transparent);
|
|
padding-left: 0.625rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.tight {
|
|
margin: 0;
|
|
padding-left: 1rem;
|
|
list-style: disc;
|
|
}
|
|
.tight li {
|
|
margin: 0.125rem 0;
|
|
}
|
|
</style>
|