@cfasim-ui/components 0.1.0

package/src/TextInput/TextInput.md

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

@@ -0,0 +1,10 @@
+import { test, expect } from "@playwright/test";
+
+test("TextInput page renders demos", async ({ page }) => {
+  await page.goto("/cfa-simulator/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

@@ -0,0 +1,70 @@
+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");
+  });
+});

package/src/TextInput/TextInput.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import Hint from "../Hint/Hint.vue";
+
+const model = defineModel<string>();
+const local = ref(model.value);
+
+watch(model, (v) => {
+  local.value = v;
+});
+
+function commit() {
+  model.value = local.value;
+}
+
+const props = defineProps<{
+  label?: string;
+  placeholder?: string;
+  hint?: string;
+}>();
+</script>
+
+<template>
+  <label v-if="props.label" class="input-label">
+    <span class="input-label-row">
+      {{ props.label }}
+      <Hint v-if="props.hint" :text="props.hint" />
+    </span>
+    <input
+      type="text"
+      v-model="local"
+      :placeholder="props.placeholder"
+      @blur="commit"
+      @keydown.enter="commit"
+    />
+  </label>
+  <div v-else>
+    <input
+      type="text"
+      v-model="local"
+      :placeholder="props.placeholder"
+      @blur="commit"
+      @keydown.enter="commit"
+    />
+  </div>
+</template>
+
+<style scoped>
+.input-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  font-size: var(--font-size-sm);
+}
+
+.input-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+input {
+  display: block;
+  width: 100%;
+  height: 2.5em;
+  padding: 0 0.75em;
+  font-size: inherit;
+  background-color: var(--color-bg-0);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+input:hover {
+  border-color: var(--color-border-hover);
+}
+
+input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+input::placeholder {
+  color: var(--color-text-tertiary);
+}
+</style>

package/src/Toggle/Toggle.md

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

package/src/Toggle/Toggle.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from "@playwright/test";
+
+test("Toggle page renders demos", async ({ page }) => {
+  await page.goto("/cfa-simulator/cfasim-ui/components/toggle");
+  await expect(page.locator("h1")).toBeVisible();
+  const demos = page.locator(".demo-preview");
+  await expect(demos.first()).toBeVisible();
+  const toggle = demos.first().getByRole("switch");
+  await expect(toggle).toBeVisible();
+  await expect(toggle).toHaveAttribute("data-state", "unchecked");
+  await toggle.click();
+  await expect(toggle).toHaveAttribute("data-state", "checked");
+});

package/src/Toggle/Toggle.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Toggle from "./Toggle.vue";
+
+describe("Toggle", () => {
+  it("renders with label", () => {
+    const wrapper = mount(Toggle, {
+      props: { label: "Dark mode" },
+    });
+    expect(wrapper.text()).toContain("Dark mode");
+  });
+
+  it("toggles on click", async () => {
+    const wrapper = mount(Toggle, {
+      props: {
+        label: "Enable",
+        modelValue: false,
+        "onUpdate:modelValue": (e: boolean | undefined) =>
+          wrapper.setProps({ modelValue: e }),
+      },
+    });
+    const switchEl = wrapper.find("button");
+    expect(switchEl.attributes("data-state")).toBe("unchecked");
+    await switchEl.trigger("click");
+    expect(switchEl.attributes("data-state")).toBe("checked");
+  });
+
+  it("renders as disabled", () => {
+    const wrapper = mount(Toggle, {
+      props: { label: "Disabled toggle", disabled: true },
+    });
+    const switchEl = wrapper.find("button");
+    expect(switchEl.attributes("data-disabled")).toBeDefined();
+  });
+});

package/src/Toggle/Toggle.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb, useId } from "reka-ui";
+import Hint from "../Hint/Hint.vue";
+
+const model = defineModel<boolean>();
+
+const props = defineProps<{
+  label: string;
+  hint?: string;
+  disabled?: boolean;
+}>();
+
+const id = useId();
+</script>
+
+<template>
+  <div class="toggle">
+    <label :for="id">{{ label }}</label>
+    <Hint v-if="props.hint" :text="props.hint" />
+    <SwitchRoot :id="id" v-model="model" :disabled="disabled" class="switch">
+      <SwitchThumb class="thumb" />
+    </SwitchRoot>
+  </div>
+</template>
+
+<style scoped>
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.toggle label {
+  user-select: none;
+}
+
+.switch {
+  --switch-w: 2.25em;
+  --switch-h: 1.25em;
+  --thumb-size: 1em;
+  --thumb-offset: 0.125em;
+
+  position: relative;
+  width: var(--switch-w);
+  height: var(--switch-h);
+  flex-shrink: 0;
+  background: var(--color-border-hover);
+  border-radius: var(--switch-h);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.switch[data-state="checked"] {
+  background: var(--color-primary);
+}
+
+.switch[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.thumb {
+  display: block;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background: white;
+  border-radius: 50%;
+  position: absolute;
+  top: var(--thumb-offset);
+  left: var(--thumb-offset);
+  transition: transform 0.15s;
+}
+
+.switch[data-state="checked"] .thumb {
+  transform: translateX(
+    calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2)
+  );
+}
+</style>

package/src/index.ts

@@ -0,0 +1,13 @@
+export { default as Box } from "./Box/Box.vue";
+export type { BoxVariant } from "./Box/Box.vue";
+export { default as Button } from "./Button/Button.vue";
+export { default as Expander } from "./Expander/Expander.vue";
+export { default as Hint } from "./Hint/Hint.vue";
+export { default as Icon } from "./Icon/Icon.vue";
+export { default as NumberInput } from "./NumberInput/NumberInput.vue";
+export { default as SelectBox } from "./SelectBox/SelectBox.vue";
+export type { SelectOption } from "./SelectBox/SelectBox.vue";
+export { default as SidebarLayout } from "./SidebarLayout/SidebarLayout.vue";
+export { default as Spinner } from "./Spinner/Spinner.vue";
+export { default as TextInput } from "./TextInput/TextInput.vue";
+export { default as Toggle } from "./Toggle/Toggle.vue";