@cfasim-ui/components 0.7.7 → 0.8.0

package/src/SelectBox/SelectBox.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from "reka-ui";
+import Icon from "../Icon/Icon.vue";
+import FieldLabel from "../_internal/FieldLabel.vue";
+import { useField, type FieldProps } from "../_internal/field";
+import "../_internal/listbox.css";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+const model = defineModel<string>();
+
+interface Props extends FieldProps {
+  options: SelectOption[];
+  placeholder?: string;
+  /** Turn the field into a filterable single-select autocomplete (combobox). */
+  autocomplete?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { id, labelId, ariaProps } = useField(props);
+
+// Shows the selected option's label in the combobox input when not filtering.
+function displayValue(value: string) {
+  return props.options.find((o) => o.value === value)?.label ?? "";
+}
+</script>
+
+<template>
+  <div class="select-box">
+    <FieldLabel
+      class="select-label"
+      :label="label"
+      :label-id="labelId"
+      :hide-label="hideLabel"
+      :hint="hint"
+      :html-for="autocomplete ? `${id}-input` : undefined"
+    />
+
+    <ComboboxRoot
+      v-if="autocomplete"
+      v-model="model"
+      open-on-click
+      class="select-combobox-root"
+    >
+      <ComboboxAnchor class="select-anchor">
+        <ComboboxInput
+          :id="`${id}-input`"
+          class="select-input"
+          :display-value="displayValue"
+          :placeholder="placeholder"
+          v-bind="ariaProps"
+        />
+        <ComboboxTrigger class="select-icon-button" aria-label="Toggle options">
+          <span class="select-icon" aria-hidden="true">
+            <Icon icon="keyboard_arrow_down" :size="16" />
+          </span>
+        </ComboboxTrigger>
+      </ComboboxAnchor>
+      <ComboboxPortal>
+        <ComboboxContent
+          class="cfasim-listbox-content select-content-autocomplete"
+          position="popper"
+          :side-offset="4"
+          :body-lock="false"
+        >
+          <ComboboxViewport class="cfasim-listbox-viewport">
+            <ComboboxEmpty class="cfasim-listbox-empty">
+              No matches
+            </ComboboxEmpty>
+            <ComboboxItem
+              v-for="opt in options"
+              :key="opt.value"
+              :value="opt.value"
+              class="cfasim-listbox-item"
+            >
+              <span>{{ opt.label }}</span>
+              <ComboboxItemIndicator class="cfasim-listbox-indicator">
+                <Icon icon="check" :size="14" />
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          </ComboboxViewport>
+        </ComboboxContent>
+      </ComboboxPortal>
+    </ComboboxRoot>
+
+    <SelectRoot v-else v-model="model">
+      <SelectTrigger class="select-trigger" v-bind="ariaProps">
+        <SelectValue :placeholder="placeholder" />
+        <span class="select-icon" aria-hidden="true">
+          <Icon icon="keyboard_arrow_down" :size="16" />
+        </span>
+      </SelectTrigger>
+      <SelectPortal>
+        <SelectContent
+          class="cfasim-listbox-content select-content"
+          position="popper"
+          :side-offset="4"
+          :body-lock="false"
+        >
+          <SelectViewport class="cfasim-listbox-viewport">
+            <SelectItem
+              v-for="opt in options"
+              :key="opt.value"
+              :value="opt.value"
+              class="cfasim-listbox-item"
+            >
+              <SelectItemText>{{ opt.label }}</SelectItemText>
+              <SelectItemIndicator class="cfasim-listbox-indicator">
+                <Icon icon="check" :size="14" />
+              </SelectItemIndicator>
+            </SelectItem>
+          </SelectViewport>
+        </SelectContent>
+      </SelectPortal>
+    </SelectRoot>
+  </div>
+</template>
+
+<style scoped>
+.select-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
+.select-label {
+  font-size: var(--font-size-sm);
+}
+
+.select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  font-size: var(--font-size-sm);
+  height: 2.5em;
+  padding: 0 0.75em;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  background: var(--color-bg-0);
+  cursor: pointer;
+  width: auto;
+  font-family: inherit;
+  color: inherit;
+  line-height: 1.4;
+}
+
+.select-trigger:hover {
+  border-color: var(--color-border-hover);
+}
+
+.select-trigger:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -1px;
+}
+
+.select-trigger[data-placeholder] {
+  color: var(--color-text-secondary);
+}
+
+/* Autocomplete (combobox) field */
+.select-anchor {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  height: 2.5em;
+  padding: 0 0.5em 0 0.75em;
+  font-size: var(--font-size-sm);
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.select-anchor:hover {
+  border-color: var(--color-border-hover);
+}
+
+.select-anchor:focus-within {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.select-input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+}
+
+.select-input:focus {
+  outline: none;
+}
+
+.select-input::placeholder {
+  color: var(--color-text-secondary);
+}
+
+.select-icon-button {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.select-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>
+
+<style>
+/* Sizing only — the dropdown skin lives in _internal/listbox.css. */
+.select-content {
+  min-width: var(--reka-select-trigger-width);
+  max-height: var(--reka-select-content-available-height);
+}
+
+/* Combobox exposes the anchor width under its own custom property. */
+.select-content-autocomplete {
+  width: var(--reka-combobox-trigger-width);
+  max-height: var(--reka-combobox-content-available-height);
+}
+</style>

package/src/SidebarLayout/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>
+```