@cfasim-ui/components 0.1.9 → 0.2.0

package/src/SidebarLayout/SidebarLayout.vue

@@ -1,465 +0,0 @@
-<script setup lang="ts">
-import {
-  ref,
-  computed,
-  watch,
-  onMounted,
-  onUnmounted,
-  getCurrentInstance,
-} from "vue";
-import { TabsRoot, TabsList, TabsTrigger, TabsIndicator } from "reka-ui";
-import Icon from "../Icon/Icon.vue";
-import LightDarkToggle from "../LightDarkToggle/LightDarkToggle.vue";
-
-// Optional vue-router integration (no hard dependency).
-// $router/$route on globalProperties is vue-router's stable public API.
-const instance = getCurrentInstance();
-const router = instance?.appContext.config.globalProperties.$router;
-const route = instance?.appContext.config.globalProperties.$route;
-
-export interface Tab {
-  value: string;
-  label: string;
-  to?: string;
-}
-
-const props = defineProps<{
-  hideTopbar?: boolean;
-  tabs?: Tab[];
-}>();
-
-const tab = defineModel<string>("tab");
-
-const mql = window.matchMedia("(max-width: 767px)");
-const isMobile = ref(mql.matches);
-const collapsed = ref(mql.matches);
-
-function onMediaChange(e: MediaQueryListEvent) {
-  isMobile.value = e.matches;
-  collapsed.value = e.matches;
-}
-
-onMounted(() => {
-  mql.addEventListener("change", onMediaChange);
-});
-
-onUnmounted(() => {
-  mql.removeEventListener("change", onMediaChange);
-});
-
-function toggle() {
-  collapsed.value = !collapsed.value;
-}
-
-const isRouterMode = computed(() => !!router && props.tabs?.some((t) => t.to));
-
-const activeTab = computed({
-  get() {
-    return tab.value ?? props.tabs?.[0]?.value;
-  },
-  set(value: string | undefined) {
-    if (!value) return;
-    tab.value = value;
-    if (isRouterMode.value && router) {
-      const target = props.tabs?.find((t) => t.value === value);
-      if (target?.to) router.push(target.to);
-    }
-  },
-});
-
-// Sync active tab from route changes in router mode
-if (route) {
-  watch(
-    () => route.path,
-    () => {
-      if (isRouterMode.value) {
-        const match = props.tabs?.find((t) => t.to === route.path);
-        if (match) tab.value = match.value;
-      }
-    },
-    { immediate: true },
-  );
-}
-</script>
-
-<template>
-  <div class="SidebarLayout" :data-collapsed="collapsed">
-    <div class="SidebarRail">
-      <aside class="Sidebar">
-        <div class="SidebarScroll">
-          <div class="SidebarHeader">
-            <button
-              type="button"
-              class="Toggle"
-              aria-label="Collapse sidebar"
-              title="Collapse sidebar"
-              @click="toggle"
-            >
-              <Icon icon="keyboard_double_arrow_left" size="sm" />
-            </button>
-          </div>
-          <slot name="sidebar" />
-        </div>
-      </aside>
-      <button
-        type="button"
-        class="Toggle Toggle--expand"
-        aria-label="Expand sidebar"
-        title="Expand sidebar"
-        @click="toggle"
-      >
-        <Icon icon="keyboard_double_arrow_right" size="sm" />
-      </button>
-    </div>
-    <main class="Main">
-      <TabsRoot
-        v-if="tabs?.length"
-        :model-value="activeTab"
-        class="TabsLayout"
-        @update:model-value="activeTab = $event as string"
-      >
-        <div class="TabsBar">
-          <button
-            v-if="isMobile && collapsed"
-            type="button"
-            class="Toggle"
-            aria-label="Expand sidebar"
-            title="Expand sidebar"
-            @click="toggle"
-          >
-            <Icon icon="keyboard_double_arrow_right" size="sm" />
-          </button>
-          <TabsList class="TabsList" aria-label="Tabs">
-            <TabsTrigger
-              v-for="t in tabs"
-              :key="t.value"
-              :value="t.value"
-              class="TabsTrigger"
-            >
-              {{ t.label }}
-            </TabsTrigger>
-            <TabsIndicator
-              class="TabsIndicator"
-              :style="{
-                width: 'var(--reka-tabs-indicator-size)',
-                left: 'var(--reka-tabs-indicator-position)',
-              }"
-            />
-          </TabsList>
-          <div class="TabsBarEnd">
-            <slot name="topbar" />
-            <LightDarkToggle v-if="!hideTopbar" />
-          </div>
-        </div>
-        <div class="MainScroll">
-          <div class="MainContent">
-            <slot />
-          </div>
-        </div>
-      </TabsRoot>
-      <template v-else>
-        <div class="Topbar">
-          <button
-            v-if="isMobile && collapsed"
-            type="button"
-            class="Toggle"
-            aria-label="Expand sidebar"
-            title="Expand sidebar"
-            @click="toggle"
-          >
-            <Icon icon="keyboard_double_arrow_right" size="sm" />
-          </button>
-          <div class="TopbarEnd">
-            <slot name="topbar" />
-            <LightDarkToggle v-if="!hideTopbar" />
-          </div>
-        </div>
-        <div class="MainScroll">
-          <div class="MainContent">
-            <slot />
-          </div>
-        </div>
-      </template>
-    </main>
-  </div>
-</template>
-
-<style scoped>
-.SidebarLayout {
-  --bar-height: 3rem;
-  display: flex;
-  height: 100vh;
-  height: 100dvh;
-  background-color: var(--color-bg-0);
-  color: var(--color-text);
-  font-family: var(--font-family);
-  position: relative;
-}
-
-.SidebarRail {
-  flex-shrink: 0;
-  width: var(--sidebar-width);
-  height: 100%;
-  overflow: hidden;
-  transition: width var(--transition-normal);
-  position: relative;
-}
-
-@media (min-width: 768px) {
-  .SidebarLayout[data-collapsed="true"] .SidebarRail {
-    width: var(--toggle-size);
-    background-color: var(--color-bg-1);
-    border-right: 1px solid var(--color-border);
-    box-shadow: var(--shadow-sm);
-  }
-}
-
-.Sidebar {
-  font-size: var(--font-size-sm);
-  display: flex;
-  width: var(--sidebar-width);
-  height: 100%;
-  transform: translateX(0);
-  transition: transform var(--transition-normal);
-}
-
-.SidebarLayout[data-collapsed="true"] .Sidebar {
-  transform: translateX(-100%);
-}
-
-.SidebarScroll {
-  flex: 1;
-  min-width: 0;
-  overflow-y: auto;
-  padding: var(--space-4);
-  background-color: var(--color-bg-1);
-  border-right: 1px solid var(--color-border);
-  box-shadow: var(--shadow-sm);
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.SidebarScroll:hover {
-  scrollbar-color: var(--color-border) transparent;
-}
-
-.SidebarScroll :deep(h2) {
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-secondary);
-  margin: var(--space-4) 0 var(--space-2);
-}
-
-.SidebarScroll > :deep(h2:first-child) {
-  margin-top: 0;
-}
-
-.Toggle {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--toggle-size);
-  height: var(--toggle-size);
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition:
-    color var(--transition-fast),
-    background-color var(--transition-fast);
-}
-
-.Toggle:hover {
-  color: var(--color-text);
-  background-color: var(--color-bg-2);
-}
-
-.Toggle:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus);
-}
-
-.SidebarHeader {
-  display: flex;
-  justify-content: flex-end;
-  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4))
-    calc(-1 * var(--space-3));
-}
-
-.Toggle--expand {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast);
-}
-
-.SidebarLayout[data-collapsed="true"] .Toggle--expand {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.Main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: var(--color-bg-0);
-  font-size: var(--font-size-md);
-}
-
-.Topbar {
-  display: flex;
-  align-items: center;
-  min-height: var(--bar-height);
-  padding: 0 var(--space-4);
-  flex-shrink: 0;
-}
-
-.TopbarEnd {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-@media (min-width: 768px) {
-  .Topbar {
-    padding: 0 var(--space-4) 0 var(--space-20);
-  }
-}
-
-.MainScroll {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: var(--space-6) 0;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-}
-
-.MainScroll:hover {
-  scrollbar-color: var(--color-border) transparent;
-}
-
-.MainContent {
-  max-width: 1024px;
-  padding: 0 var(--space-4);
-}
-
-@media (min-width: 768px) {
-  .MainContent {
-    padding: 0 var(--space-4) 0 var(--space-20);
-  }
-}
-
-/* Mobile: use transform instead of width resize */
-@media (max-width: 767px) {
-  .SidebarLayout {
-    transition: transform var(--transition-normal);
-  }
-
-  .SidebarLayout[data-collapsed="true"] {
-    transform: translateX(calc(-1 * var(--sidebar-width)));
-  }
-
-  .SidebarLayout[data-collapsed="true"] .Sidebar {
-    transform: translateX(0);
-  }
-
-  .SidebarRail {
-    min-width: var(--sidebar-width);
-  }
-
-  .Main {
-    min-width: 100vw;
-  }
-
-  .Toggle--expand {
-    display: none;
-  }
-}
-
-/* Tabs */
-.TabsLayout {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.TabsBar {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  min-height: var(--bar-height);
-  border-bottom: 1px solid var(--color-border);
-  padding: 0 var(--space-4);
-}
-
-.TabsBarEnd {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-}
-
-.TabsList {
-  display: flex;
-  gap: var(--space-1);
-  position: relative;
-  align-self: stretch;
-}
-
-.TabsTrigger {
-  position: relative;
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  font-family: inherit;
-  color: var(--color-text-secondary);
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition:
-    color var(--transition-fast),
-    background-color var(--transition-fast);
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
-}
-
-.TabsTrigger:hover {
-  color: var(--color-text);
-  background-color: var(--color-bg-1);
-}
-
-.TabsTrigger[data-state="active"] {
-  color: var(--color-text);
-}
-
-.TabsTrigger:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus);
-}
-
-.TabsIndicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: var(--color-text);
-  transition:
-    width var(--transition-fast),
-    left var(--transition-fast);
-}
-</style>

package/src/Spinner/Spinner.md

@@ -1,45 +0,0 @@
-# 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>
-
-<!--@include: ./_api/spinner.md-->

package/src/Spinner/Spinner.spec.ts

@@ -1,9 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("Spinner page renders demos", async ({ page }) => {
-  await page.goto("./cfasim-ui/components/spinner");
-  await expect(page.locator("h1")).toBeVisible();
-  const demos = page.locator(".demo-preview");
-  await expect(demos.first()).toBeVisible();
-  await expect(demos.first().locator('[role="status"]')).toHaveCount(3);
-});

package/src/Spinner/Spinner.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-export type SpinnerSize = "sm" | "md" | "lg";
-
-withDefaults(
-  defineProps<{
-    size?: SpinnerSize;
-    label?: string;
-  }>(),
-  {
-    size: "sm",
-  },
-);
-</script>
-
-<template>
-  <span
-    class="Spinner"
-    :data-size="size"
-    role="status"
-    :aria-label="label ?? 'Loading'"
-  />
-</template>
-
-<style>
-.Spinner {
-  display: inline-block;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: cfa-spin 0.6s linear infinite;
-  vertical-align: middle;
-}
-
-.Spinner[data-size="sm"] {
-  width: 14px;
-  height: 14px;
-}
-
-.Spinner[data-size="md"] {
-  width: 20px;
-  height: 20px;
-}
-
-.Spinner[data-size="lg"] {
-  width: 28px;
-  height: 28px;
-  border-width: 3px;
-}
-
-@keyframes cfa-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>

package/src/TextInput/TextInput.md

@@ -1,41 +0,0 @@
-# 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>
-
-<!--@include: ./_api/text-input.md-->

package/src/TextInput/TextInput.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test("TextInput page renders demos", async ({ page }) => {
-  await page.goto("./cfasim-ui/components/text-input");
-  await expect(page.locator("h1")).toBeVisible();
-  const demos = page.locator(".demo-preview");
-  await expect(demos.first()).toBeVisible();
-  await expect(demos.first().getByText("Model name")).toBeVisible();
-  await expect(demos.first().locator("input")).toBeVisible();
-});

package/src/TextInput/TextInput.test.ts

@@ -1,70 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { mount } from "@vue/test-utils";
-import TextInput from "./TextInput.vue";
-
-describe("TextInput", () => {
-  it("renders with label", () => {
-    const wrapper = mount(TextInput, {
-      props: { modelValue: "hello", label: "Name" },
-    });
-    const label = wrapper.find("label.input-label");
-    expect(label.exists()).toBe(true);
-    expect(label.text()).toContain("Name");
-  });
-
-  it("renders without label", () => {
-    const wrapper = mount(TextInput, {
-      props: { modelValue: "hello" },
-    });
-    expect(wrapper.find("label").exists()).toBe(false);
-    expect(wrapper.find("input").exists()).toBe(true);
-  });
-
-  it("does not emit update on typing, only on blur", async () => {
-    const wrapper = mount(TextInput, {
-      props: {
-        modelValue: "initial",
-        label: "Name",
-        "onUpdate:modelValue": (v: string | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue("changed");
-    expect(wrapper.props("modelValue")).toBe("initial");
-
-    await input.trigger("blur");
-    expect(wrapper.props("modelValue")).toBe("changed");
-  });
-
-  it("emits update on Enter keydown", async () => {
-    const wrapper = mount(TextInput, {
-      props: {
-        modelValue: "initial",
-        label: "Name",
-        "onUpdate:modelValue": (v: string | undefined) =>
-          wrapper.setProps({ modelValue: v }),
-      },
-    });
-
-    const input = wrapper.find("input");
-    await input.setValue("entered");
-    expect(wrapper.props("modelValue")).toBe("initial");
-
-    await input.trigger("keydown.enter");
-    expect(wrapper.props("modelValue")).toBe("entered");
-  });
-
-  it("syncs local value when model changes externally", async () => {
-    const wrapper = mount(TextInput, {
-      props: { modelValue: "original", label: "Name" },
-    });
-
-    const input = wrapper.find("input");
-    expect((input.element as HTMLInputElement).value).toBe("original");
-
-    await wrapper.setProps({ modelValue: "reset" });
-    expect((input.element as HTMLInputElement).value).toBe("reset");
-  });
-});