@cfasim-ui/docs 0.3.11

package/components/SelectBox/SelectBox.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  useId,
+} from "reka-ui";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+const model = defineModel<string>();
+
+const props = defineProps<{
+  label?: string;
+  hideLabel?: boolean;
+  ariaLabel?: string;
+  options: SelectOption[];
+  placeholder?: string;
+}>();
+
+const id = useId();
+</script>
+
+<template>
+  <div class="select-box">
+    <label
+      v-if="label"
+      :id="`${id}-label`"
+      class="select-label"
+      :class="{ 'visually-hidden': hideLabel }"
+      >{{ label }}</label
+    >
+    <SelectRoot v-model="model">
+      <SelectTrigger
+        class="select-trigger"
+        :aria-labelledby="props.label ? `${id}-label` : undefined"
+        :aria-label="!props.label ? props.ariaLabel : undefined"
+      >
+        <SelectValue :placeholder="placeholder" />
+        <span class="select-icon" aria-hidden="true">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M3 4.5L6 7.5L9 4.5" />
+          </svg>
+        </span>
+      </SelectTrigger>
+      <SelectPortal>
+        <SelectContent
+          class="select-content"
+          position="popper"
+          :side-offset="4"
+          :body-lock="false"
+        >
+          <SelectViewport class="select-viewport">
+            <SelectItem
+              v-for="opt in options"
+              :key="opt.value"
+              :value="opt.value"
+              class="select-item"
+            >
+              <SelectItemText>{{ opt.label }}</SelectItemText>
+              <SelectItemIndicator class="select-indicator">
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 12 12"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M2 6L5 9L10 3" />
+                </svg>
+              </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);
+}
+
+.select-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>
+
+<style>
+.select-content {
+  z-index: 100;
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  min-width: var(--reka-select-trigger-width);
+  max-height: var(--reka-select-content-available-height);
+}
+
+.select-viewport {
+  padding: 0.25em;
+}
+
+.select-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.select-item[data-highlighted] {
+  background: var(--color-primary);
+  color: white;
+}
+
+.select-item[data-state="checked"] {
+  font-weight: 600;
+}
+
+.select-indicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+</style>

package/components/SidebarLayout/SidebarLayout.md

@@ -0,0 +1,104 @@
+# SidebarLayout
+
+A responsive two-panel layout with a collapsible sidebar and main content area. On mobile, the sidebar becomes an overlay.
+
+## 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>
+```