@cfasim-ui/components 0.1.9 → 0.2.0

package/src/SelectBox/SelectBox.vue

@@ -1,190 +0,0 @@
-<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;
-  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">{{
-      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/src/SidebarLayout/SidebarLayout.md

@@ -1,104 +0,0 @@
-# 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>
-```

package/src/SidebarLayout/SidebarLayout.test.ts

@@ -1,86 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { mount } from "@vue/test-utils";
-import SidebarLayout from "./SidebarLayout.vue";
-
-beforeEach(() => {
-  // SidebarLayout uses window.matchMedia
-  window.matchMedia = vi.fn().mockReturnValue({
-    matches: false,
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-  });
-});
-
-const tabs = [
-  { value: "chart", label: "Chart" },
-  { value: "data", label: "Data" },
-  { value: "table", label: "Table" },
-];
-
-describe("SidebarLayout tabs", () => {
-  it("renders without tabs by default", () => {
-    const wrapper = mount(SidebarLayout);
-    expect(wrapper.find("[role='tablist']").exists()).toBe(false);
-  });
-
-  it("renders tab triggers when tabs prop is provided", () => {
-    const wrapper = mount(SidebarLayout, { props: { tabs } });
-    const triggers = wrapper.findAll("[role='tab']");
-    expect(triggers).toHaveLength(3);
-    expect(triggers[0].text()).toBe("Chart");
-    expect(triggers[1].text()).toBe("Data");
-    expect(triggers[2].text()).toBe("Table");
-  });
-
-  it("defaults to first tab as active", () => {
-    const wrapper = mount(SidebarLayout, { props: { tabs } });
-    const triggers = wrapper.findAll("[role='tab']");
-    expect(triggers[0].attributes("data-state")).toBe("active");
-    expect(triggers[1].attributes("data-state")).toBe("inactive");
-  });
-
-  it("activates tab matching v-model:tab", () => {
-    const wrapper = mount(SidebarLayout, {
-      props: { tabs, tab: "data" },
-    });
-    const triggers = wrapper.findAll("[role='tab']");
-    expect(triggers[1].attributes("data-state")).toBe("active");
-  });
-
-  it("emits update:tab when a tab is clicked", async () => {
-    let updated: string | undefined;
-    const wrapper = mount(SidebarLayout, {
-      props: {
-        tabs,
-        tab: "chart",
-        "onUpdate:tab": (v: string | undefined) => {
-          updated = v;
-        },
-      },
-    });
-    const triggers = wrapper.findAll("[role='tab']");
-    // reka-ui triggers need mousedown for activation in happy-dom
-    await triggers[2].trigger("mousedown");
-    await triggers[2].trigger("focus");
-    await triggers[2].trigger("mouseup");
-    await triggers[2].trigger("click");
-    expect(updated).toBe("table");
-  });
-
-  it("renders default slot content inside tabbed layout", () => {
-    const wrapper = mount(SidebarLayout, {
-      props: { tabs },
-      slots: { default: '<p class="test-content">Hello</p>' },
-    });
-    expect(wrapper.find(".test-content").text()).toBe("Hello");
-  });
-
-  it("renders sidebar slot alongside tabs", () => {
-    const wrapper = mount(SidebarLayout, {
-      props: { tabs },
-      slots: { sidebar: '<div class="sidebar-content">Sidebar</div>' },
-    });
-    expect(wrapper.find(".sidebar-content").text()).toBe("Sidebar");
-    expect(wrapper.findAll("[role='tab']")).toHaveLength(3);
-  });
-});