@cfasim-ui/components 0.7.8 → 0.8.1

package/docs/SelectBox.md

@@ -0,0 +1,182 @@
+# SelectBox
+
+A single-select dropdown built on reka-ui. Set `autocomplete` to turn it into a
+filterable single-select combobox: type to narrow the options, just like
+[MultiSelect](./multi-select) but bound to a single `string`.
+
+## Examples
+
+<script setup>
+import { ref } from 'vue'
+const interval = ref('weekly')
+const state = ref('')
+</script>
+
+<ComponentDemo>
+  <div style="width: 200px">
+    <SelectBox
+      v-model="interval"
+      label="Interval"
+      :options="[
+        { value: 'daily', label: 'Daily' },
+        { value: 'weekly', label: 'Weekly' },
+        { value: 'monthly', label: 'Monthly' },
+      ]"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const interval = ref("weekly");
+</script>
+
+<SelectBox
+  v-model="interval"
+  label="Interval"
+  :options="[
+    { value: 'daily', label: 'Daily' },
+    { value: 'weekly', label: 'Weekly' },
+    { value: 'monthly', label: 'Monthly' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Hidden label
+
+Use `hide-label` to visually hide the label while keeping it available to
+screen readers. Prefer this over `aria-label` whenever you have label text,
+since a real `<label>` is translated by browsers and keeps the naming in the
+DOM.
+
+<ComponentDemo>
+  <div style="width: 200px">
+    <SelectBox
+      v-model="interval"
+      label="Interval"
+      hide-label
+      :options="[
+        { value: 'daily', label: 'Daily' },
+        { value: 'weekly', label: 'Weekly' },
+        { value: 'monthly', label: 'Monthly' },
+      ]"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<SelectBox
+  v-model="interval"
+  label="Interval"
+  hide-label
+  :options="[
+    { value: 'daily', label: 'Daily' },
+    { value: 'weekly', label: 'Weekly' },
+    { value: 'monthly', label: 'Monthly' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Autocomplete
+
+Add `autocomplete` to make the field filterable. Type to narrow the list; the
+selected option's label fills the input. `v-model` is still a single `string`.
+
+<ComponentDemo>
+  <div style="width: 240px">
+    <SelectBox
+      v-model="state"
+      autocomplete
+      label="State"
+      placeholder="Search states…"
+      :options="[
+        { value: 'ca', label: 'California' },
+        { value: 'ny', label: 'New York' },
+        { value: 'tx', label: 'Texas' },
+        { value: 'wa', label: 'Washington' },
+        { value: 'fl', label: 'Florida' },
+      ]"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const state = ref("");
+</script>
+
+<SelectBox
+  v-model="state"
+  autocomplete
+  label="State"
+  placeholder="Search states…"
+  :options="[
+    { value: 'ca', label: 'California' },
+    { value: 'ny', label: 'New York' },
+    { value: 'tx', label: 'Texas' },
+    { value: 'wa', label: 'Washington' },
+    { value: 'fl', label: 'Florida' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+## Accessibility
+
+In the default mode the field is a reka-ui Select; with `autocomplete` it's a
+reka-ui Combobox following the
+[ARIA combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/):
+
+- The input has `role="combobox"` with `aria-expanded`, `aria-controls`, and
+  `aria-autocomplete="list"`; the popup is a `role="listbox"` and each option a
+  `role="option"` that reflects its state via `aria-selected`.
+- Keyboard support is handled for you: type to filter, ↑/↓ to move through the
+  list, Enter to select the highlighted option, and Escape to close.
+- Pass `label` so the field is named by a real `<label>`. In autocomplete mode
+  the label is also wired to the input via `for`/`id`, so clicking it focuses
+  the field; use `hide-label` to keep the label for screen readers while hiding
+  it visually, or `aria-label` when there's no visible label text.
+- The chevron is a labelled toggle (`aria-label="Toggle options"`) kept out of
+  the tab order, and native browser autofill is disabled so it can't cover the
+  option list.
+
+## Model
+
+| Name | Type |
+|------|------|
+| `v-model` | `string` |
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | No | — |
+| `hideLabel` | `boolean` | No | — |
+| `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
+| `options` | `SelectOption[]` | Yes | — |
+| `placeholder` | `string` | No | — |
+| `autocomplete` | `boolean` | No | — |
+
+
+### SelectOption
+
+```ts
+interface SelectOption {
+  value: string;
+  label: string;
+}
+```

package/docs/SidebarLayout.md

@@ -0,0 +1,106 @@
+# SidebarLayout
+
+A responsive two-panel layout with a collapsible sidebar and main content area. On mobile, the sidebar becomes an overlay.
+
+When the sidebar is collapsed it is marked [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert), so its contents (including the collapse button) are removed from the tab order and the accessibility tree while visually hidden. The expand button is likewise `inert` while the sidebar is open. This keeps keyboard and screen-reader focus on whichever control is actually visible.
+
+## Demo
+
+<a href="/cfa-simulator/docs/demos/sidebar-layout/index.html" target="_blank">Open in full window ↗</a>
+
+<div style="border: 1px solid var(--vp-c-border); border-radius: 8px; overflow: hidden; height: 500px;">
+  <iframe src="/cfa-simulator/docs/demos/sidebar-layout/index.html" style="width: 100%; height: 100%; border: none;" />
+</div>
+
+## Tabs Demo (Router Mode)
+
+<a href="/cfa-simulator/docs/demos/sidebar-tabs/index.html" target="_blank">Open in full window ↗</a>
+
+<div style="border: 1px solid var(--vp-c-border); border-radius: 8px; overflow: hidden; height: 500px;">
+  <iframe src="/cfa-simulator/docs/demos/sidebar-tabs/index.html" style="width: 100%; height: 100%; border: none;" />
+</div>
+
+## Usage
+
+```vue
+<SidebarLayout>
+  <template #sidebar>
+    <h2>Controls</h2>
+    <NumberInput v-model="value" label="Parameter" slider live />
+  </template>
+  <h1>Main Content</h1>
+  <p>Your charts and data go here.</p>
+</SidebarLayout>
+```
+
+## Slots
+
+| Slot      | Description                                |
+| --------- | ------------------------------------------ |
+| `sidebar` | Content rendered in the left sidebar panel |
+| `default` | Main content area                          |
+
+## Props
+
+| Prop          | Type      | Default     | Description                                          |
+| ------------- | --------- | ----------- | ---------------------------------------------------- |
+| `hideTopbar`  | `boolean` | `false`     | Hides the topbar that contains the light/dark toggle |
+| `tabs`        | `Tab[]`   | `undefined` | Array of tab definitions to render in the main area  |
+| `v-model:tab` | `string`  | `undefined` | The active tab value (two-way binding)               |
+
+### Tab type
+
+```ts
+interface Tab {
+  value: string; // unique identifier
+  label: string; // display text
+  to?: string; // optional route path for vue-router integration
+}
+```
+
+## Tabs
+
+When the `tabs` prop is provided, a tab bar renders at the top of the main content area. Tabs support two modes:
+
+### Local mode
+
+Use `v-model:tab` to control which tab is active. Render content conditionally in the default slot.
+
+```vue
+<script setup>
+import { ref } from "vue";
+const activeTab = ref("chart");
+</script>
+
+<SidebarLayout
+  v-model:tab="activeTab"
+  :tabs="[
+    { value: 'chart', label: 'Chart' },
+    { value: 'data', label: 'Data' },
+  ]"
+>
+  <template #sidebar>
+    <h2>Controls</h2>
+  </template>
+  <div v-if="activeTab === 'chart'">Chart content</div>
+  <div v-if="activeTab === 'data'">Data table</div>
+</SidebarLayout>
+```
+
+### Router mode
+
+When tabs include a `to` property and vue-router is installed, clicking a tab navigates to that route. The active tab is automatically determined from the current route.
+
+```vue
+<SidebarLayout
+  :tabs="[
+    { value: 'chart', label: 'Chart', to: '/model/chart' },
+    { value: 'data', label: 'Data', to: '/model/data' },
+  ]"
+>
+  <template #sidebar>
+    <h2>Controls</h2>
+  </template>
+  <RouterView />
+</SidebarLayout>
+```

package/docs/Spinner.md

@@ -0,0 +1,51 @@
+# Spinner
+
+A loading indicator with accessible labeling.
+
+## Examples
+
+### Sizes
+
+<ComponentDemo>
+  <Spinner size="sm" label="Loading" />
+  <Spinner size="md" label="Loading" />
+  <Spinner size="lg" label="Loading" />
+
+<template #code>
+
+```vue
+<Spinner size="sm" label="Loading" />
+<Spinner size="md" label="Loading" />
+<Spinner size="lg" label="Loading" />
+```
+
+  </template>
+</ComponentDemo>
+
+### In context
+
+<ComponentDemo>
+  <div style="display: flex; align-items: center; gap: 8px;">
+    <Spinner size="sm" label="Running model" />
+    <span>Running model...</span>
+  </div>
+
+<template #code>
+
+```vue
+<div style="display: flex; align-items: center; gap: 8px;">
+  <Spinner size="sm" label="Running model" />
+  <span>Running model...</span>
+</div>
+```
+
+  </template>
+</ComponentDemo>
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `size` | `SpinnerSize` | No | `"sm"` |
+| `label` | `string` | No | — |
+

package/docs/TextInput.md

@@ -0,0 +1,83 @@
+# TextInput
+
+A text input field with optional label and hint.
+
+## Examples
+
+<script setup>
+import { ref } from 'vue'
+const name = ref('')
+</script>
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <TextInput
+      v-model="name"
+      label="Model name"
+      placeholder="e.g. my-model"
+      hint="A short identifier used in URLs"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const name = ref("");
+</script>
+
+<TextInput
+  v-model="name"
+  label="Model name"
+  placeholder="e.g. my-model"
+  hint="A short identifier used in URLs"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Hidden label
+
+Use `hide-label` to visually hide the label while keeping it available to screen
+readers. The label is still a real `<label>` in the DOM, so clicking the input
+area still works and the control is properly named for assistive tech. Prefer
+this over omitting the label whenever the input has no visible text describing
+it.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <TextInput
+      v-model="name"
+      label="Search"
+      placeholder="Search…"
+      hide-label
+    />
+  </div>
+
+<template #code>
+
+```vue
+<TextInput v-model="name" label="Search" placeholder="Search…" hide-label />
+```
+
+  </template>
+</ComponentDemo>
+
+## Model
+
+| Name | Type |
+|------|------|
+| `v-model` | `string` |
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | No | — |
+| `hideLabel` | `boolean` | No | — |
+| `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
+| `placeholder` | `string` | No | — |
+

package/docs/Toggle.md

@@ -0,0 +1,81 @@
+# Toggle
+
+A boolean switch built on reka-ui.
+
+## Examples
+
+<script setup>
+import { ref } from 'vue'
+const enabled = ref(false)
+const disabled = ref(true)
+</script>
+
+### Basic
+
+<ComponentDemo>
+  <Toggle v-model="enabled" label="Enable vaccination" />
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const enabled = ref(false);
+</script>
+
+<Toggle v-model="enabled" label="Enable vaccination" />
+```
+
+  </template>
+</ComponentDemo>
+
+### With hint
+
+<ComponentDemo>
+  <Toggle
+    v-model="enabled"
+    label="Enable isolation"
+    hint="Whether symptomatic individuals are isolated"
+  />
+
+<template #code>
+
+```vue
+<Toggle
+  v-model="enabled"
+  label="Enable isolation"
+  hint="Whether symptomatic individuals are isolated"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Disabled
+
+<ComponentDemo>
+  <Toggle v-model="disabled" label="Locked setting" :disabled="true" />
+
+<template #code>
+
+```vue
+<Toggle v-model="value" label="Locked setting" :disabled="true" />
+```
+
+  </template>
+</ComponentDemo>
+
+## Model
+
+| Name | Type |
+|------|------|
+| `v-model` | `boolean` |
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | Yes | — |
+| `hint` | `string` | No | — |
+| `disabled` | `boolean` | No | — |
+

package/docs/ToggleGroup.md

@@ -0,0 +1,163 @@
+# ToggleGroup
+
+A segmented control that looks like a [`ButtonGroup`](./button-group) but tracks
+which item(s) are pressed. By default it is single-select (like a radio group);
+add `multiple` to let several items be pressed at once. Built on
+[reka-ui's ToggleGroup](https://reka-ui.com/docs/components/toggle-group).
+
+## Examples
+
+### Single select
+
+`v-model` holds the pressed value (a `string`). Clicking the active item again
+clears the selection.
+
+<script setup>
+import { ref } from 'vue'
+const interval = ref('weekly')
+const days = ref(['mon', 'wed'])
+</script>
+
+<ComponentDemo>
+  <ToggleGroup
+    v-model="interval"
+    label="Interval"
+    :options="[
+      { value: 'daily', label: 'Daily' },
+      { value: 'weekly', label: 'Weekly' },
+      { value: 'monthly', label: 'Monthly' },
+    ]"
+  />
+  <p>Selected: {{ interval }}</p>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const interval = ref("weekly");
+</script>
+
+<ToggleGroup
+  v-model="interval"
+  label="Interval"
+  :options="[
+    { value: 'daily', label: 'Daily' },
+    { value: 'weekly', label: 'Weekly' },
+    { value: 'monthly', label: 'Monthly' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Multiple select
+
+With `multiple`, `v-model` is a `string[]` and any number of items can be
+pressed at once.
+
+<ComponentDemo>
+  <ToggleGroup
+    v-model="days"
+    multiple
+    label="Active days"
+    :options="[
+      { value: 'mon', label: 'Mon' },
+      { value: 'tue', label: 'Tue' },
+      { value: 'wed', label: 'Wed' },
+      { value: 'thu', label: 'Thu' },
+      { value: 'fri', label: 'Fri' },
+    ]"
+  />
+  <p>Selected: {{ days.join(', ') || 'none' }}</p>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const days = ref(["mon", "wed"]);
+</script>
+
+<ToggleGroup
+  v-model="days"
+  multiple
+  label="Active days"
+  :options="[
+    { value: 'mon', label: 'Mon' },
+    { value: 'tue', label: 'Tue' },
+    { value: 'wed', label: 'Wed' },
+    { value: 'thu', label: 'Thu' },
+    { value: 'fri', label: 'Fri' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Vertical and disabled options
+
+Set `orientation="vertical"` to stack the items, and mark individual options
+`disabled`.
+
+<ComponentDemo>
+  <ToggleGroup
+    model-value="map"
+    orientation="vertical"
+    aria-label="View"
+    :options="[
+      { value: 'map', label: 'Map' },
+      { value: 'chart', label: 'Chart' },
+      { value: 'table', label: 'Table', disabled: true },
+    ]"
+  />
+
+<template #code>
+
+```vue
+<ToggleGroup
+  v-model="view"
+  orientation="vertical"
+  aria-label="View"
+  :options="[
+    { value: 'map', label: 'Map' },
+    { value: 'chart', label: 'Chart' },
+    { value: 'table', label: 'Table', disabled: true },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+## Model
+
+| Name | Type |
+|------|------|
+| `v-model` | `string \| string[]` |
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | No | — |
+| `hideLabel` | `boolean` | No | — |
+| `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
+| `options` | `ToggleGroupOption[]` | Yes | — |
+| `multiple` | `boolean` | No | — |
+| `disabled` | `boolean` | No | — |
+| `orientation` | `"horizontal" \| "vertical"` | No | `"horizontal"` |
+
+
+### ToggleGroupOption
+
+```ts
+interface ToggleGroupOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+```