Spaces:
Running
Running
| <script setup lang="ts"> | |
| import type { Character } from "../types"; | |
| import { modelLabel } from "../lib/format"; | |
| /** One tag per base model: lit where the character has a LoRA, dimmed where they don't. */ | |
| const props = defineProps<{ character: Character; models: string[]; filter: string[] }>(); | |
| const has = (m: string) => props.character.variants.some((v) => v.model === m); | |
| </script> | |
| <template> | |
| <ul class="chips" :aria-label="`Available on ${character.variants.map((v) => v.model).join(', ')}`"> | |
| <li v-for="m in models" :key="m" :class="{ on: has(m), focus: filter.includes(m) }" :aria-hidden="!has(m)"> | |
| {{ modelLabel(m) }} | |
| </li> | |
| </ul> | |
| </template> | |
| <style scoped> | |
| .chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 4px; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| li { | |
| padding: 1px 5px; | |
| border: 1px dashed var(--line-strong); | |
| border-radius: 2px; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| line-height: 14px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-3); | |
| opacity: 0.55; | |
| } | |
| li.on { | |
| border-style: solid; | |
| border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); | |
| color: var(--accent); | |
| opacity: 1; | |
| } | |
| li.on.focus { | |
| border-color: var(--accent); | |
| background: var(--accent); | |
| color: var(--accent-ink); | |
| } | |
| </style> | |