saniti-vue

A Vue 3 component library. Components ship as ESM source and are compiled by the consumer's Vite/Vue toolchain.

usage

import "saniti-vue/style.css"
import { Button } from "saniti-vue"

development

npm install
npm run dev

npm run dev opens the Histoire showcase. Stories live in stories/*.story.vue, components in src/components/, tokens in src/style.css.

FadeLabel

<FadeLabel :text="title" :fade="28" />

A single-line label that fades out at its clipped edge instead of ending in an ellipsis. Hovering its parent glides the text to its end, slowing to a stop there, and leaving glides it back. fade is the width of the fade in pixels. SideNav uses it for every row label.

SideNav

<SideNav :sections="sections" :active-key="active" :collapsed="false" @select="active = $event.key" @toggle="onToggle" />

sections is an array of { title?, hint?, clickable?, items }; hint shows as a tooltip on the title, and a clickable title is a button that emits title with its section. Each item accepts:

| field | type | meaning | | --- | --- | --- | | key | string | identity, matched against activeKey | | label | string | row text, fades where clipped and glides to its end on hover (see FadeLabel) | | icon | string | iconify name, overridable through the icon slot | | badge | string, number | trailing badge | | href | string | renders the row as a link | | active | boolean | forces the active state regardless of activeKey | | children | item[] | makes the row a collapsible group | | defaultOpen | boolean | group opens the first time it appears | | selectable | boolean | clicking a group row emits select for the row; only its caret toggles |

A group opens automatically when it contains the active item. Open state is seeded once per group, so a collapse the user made survives later changes to sections.

Events: select with the clicked item, toggle with { item, open }. Every row element carries data-key, so a host can find the row under a pointer event (a context menu, for instance).

Slots: icon (scoped { item }) replaces the row icon, for children too; header and footer (scoped { collapsed }) render above and below the sections.

Completions

<Completions :items="items" v-model="index" @pick="apply" />

An anchored list of completions for what the user is typing (files after @, commands after /). The host owns the input and the keyboard: it filters items, moves v-model (the highlighted index) on arrow keys, and calls the picked item on enter. The list glides the highlight between rows and keeps the highlighted row scrolled into view.

Items accept id, label, meta, icon, and hits (indices into label to render bold). emptyText renders when there are no items. Give the wrapper a max-height; the list scrolls inside it.

Lightbox

<Lightbox v-model:open="open" v-model:index="index" :images="images" />

A full-window image viewer. images is an array of { src, label? }. The current image fits the window; click or scroll zooms around the pointer, drag pans when zoomed, 0 refits. Left and right arrows (and the edge buttons) move through the list, escape or the backdrop closes. The bar shows the label, natural size, zoom, and position in the list.

StageTrack

<StageTrack :stages="stages" :current="index" label="Compacting" done-label="Compacted" :failed="stopped" fail-label="Cancelled" />

A segmented progress track for work that moves through named stages. stages are the labels, current is the index in progress (equal to stages.length when everything is done, which shows doneLabel). failed freezes the track at the current stage, colours that segment as an error, and shows failLabel instead of the stage name.

ActivityTrail steps may carry thought: true: such a step is listed like the others but left out of the tool count and the timing, and a trail made only of thoughts shows no footer.

Exchange

<Exchange :turns="turns" proposer-label="Proposer" reviewer-label="Reviewer">
  <template #text="{ turn }"><Markdown :source="turn.text" /></template>
</Exchange>

A two-party deliberation laid out as a back-and-forth. turns is an array of { role, round?, text?, steps?, active?, interrupted? } where role is proposer, reviewer, or synthesis. Proposer turns sit on the left and reviewer turns on the right, each capped at 78% width, with a mono caption ("Reviewer, round 2"), an ActivityTrail when the turn has steps (active while active is set), and the text in a bubble. A turn with steps and no text is in progress and shows only its trail. A synthesis turn spans the full width under a "Synthesis" divider and renders its text plain. interrupted appends "(interrupted)" to the caption. The text scoped slot receives { turn } so a host can render markdown; without it the text is rendered as is.