@cfasim-ui/components 0.1.9 → 0.2.0

package/src/Icon/Icon.md

@@ -1,55 +0,0 @@
-# Icon
-
-Renders a [Material Symbols Outlined](https://fonts.google.com/icons) icon.
-
-## Examples
-
-### Sizes
-
-<ComponentDemo>
-  <Icon icon="help" size="sm" aria-label="help" />
-  <Icon icon="help" size="md" aria-label="help" />
-  <Icon icon="help" size="lg" aria-label="help" />
-
-<template #code>
-
-```vue
-<Icon icon="help" size="sm" aria-label="help" />
-<Icon icon="help" size="md" aria-label="help" />
-<Icon icon="help" size="lg" aria-label="help" />
-```
-
-  </template>
-</ComponentDemo>
-
-### Filled
-
-<ComponentDemo>
-  <Icon icon="favorite" size="lg" aria-label="favorite" />
-  <Icon icon="favorite" size="lg" :fill="true" aria-label="favorite filled" />
-
-<template #code>
-
-```vue
-<Icon icon="favorite" size="lg" aria-label="favorite" />
-<Icon icon="favorite" size="lg" :fill="true" aria-label="favorite filled" />
-```
-
-  </template>
-</ComponentDemo>
-
-### Inline in text
-
-<ComponentDemo>
-  <p style="margin: 0">Click the <Icon icon="help" size="sm" :inline="true" aria-label="help" /> icon for more info.</p>
-
-<template #code>
-
-```vue
-<p>Click the <Icon icon="help" size="sm" :inline="true" aria-label="help" /> icon for more info.</p>
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./_api/icon.md-->

package/src/Icon/Icon.spec.ts

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

package/src/Icon/Icon.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import type { CSSProperties } from "vue";
-import { computed } from "vue";
-
-export type IconSize = "sm" | "md" | "lg" | "xl";
-
-interface Props {
-  icon: string;
-  size?: IconSize | number;
-  fill?: boolean;
-  weight?: number;
-  grade?: number;
-  decorative?: boolean;
-  ariaLabel?: string;
-  inline?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: "md",
-  fill: false,
-  decorative: true,
-  inline: false,
-});
-
-const sizePreset = computed(() =>
-  typeof props.size === "string" ? props.size : undefined,
-);
-const numericSize = computed(() =>
-  typeof props.size === "number" ? props.size : undefined,
-);
-
-const inlineStyle = computed<CSSProperties>(() => {
-  const style: CSSProperties = {};
-  if (numericSize.value !== undefined) {
-    style.fontSize = `${numericSize.value}px`;
-    (style as Record<string, unknown>)["--icon-opsz"] = numericSize.value;
-  }
-  if (props.weight !== undefined) {
-    (style as Record<string, unknown>)["--icon-weight"] = props.weight;
-  }
-  if (props.grade !== undefined) {
-    (style as Record<string, unknown>)["--icon-grade"] = props.grade;
-  }
-  return style;
-});
-</script>
-
-<template>
-  <span
-    class="Icon"
-    :data-size="sizePreset"
-    :data-fill="fill ? 'true' : undefined"
-    :data-inline="inline ? 'true' : undefined"
-    :style="inlineStyle"
-    :aria-hidden="decorative ? true : undefined"
-    :aria-label="decorative ? undefined : ariaLabel"
-    :role="decorative ? undefined : 'img'"
-    >{{ icon }}</span
-  >
-</template>
-
-<style>
-.Icon {
-  font-family: "Material Symbols Outlined", sans-serif;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-  font-variation-settings:
-    "FILL" var(--icon-fill, 0),
-    "wght" var(--icon-weight, 400),
-    "GRAD" var(--icon-grade, 0),
-    "opsz" var(--icon-opsz, 24);
-  color: inherit;
-}
-
-.Icon[data-size="sm"] {
-  font-size: 20px;
-  --icon-opsz: 20;
-}
-.Icon[data-size="md"] {
-  font-size: 24px;
-  --icon-opsz: 24;
-}
-.Icon[data-size="lg"] {
-  font-size: 28px;
-  --icon-opsz: 28;
-}
-.Icon[data-size="xl"] {
-  font-size: 32px;
-  --icon-opsz: 32;
-}
-
-.Icon[data-fill="true"] {
-  --icon-fill: 1;
-}
-
-.Icon[data-inline="true"] {
-  font-size: inherit;
-  vertical-align: middle;
-  transform: scale(1.2) translateY(-0.05em);
-  transform-origin: 50% 50%;
-}
-</style>

package/src/LightDarkToggle/LightDarkToggle.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import Icon from "../Icon/Icon.vue";
-
-const isDark = ref(window.matchMedia("(prefers-color-scheme: dark)").matches);
-
-function apply(dark: boolean) {
-  document.documentElement.classList.toggle("dark", dark);
-  document.documentElement.classList.toggle("light", !dark);
-}
-
-apply(isDark.value);
-
-watch(isDark, apply);
-</script>
-
-<template>
-  <button
-    class="light-dark-toggle"
-    type="button"
-    :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
-    @click="isDark = !isDark"
-  >
-    <Icon :icon="isDark ? 'dark_mode' : 'light_mode'" size="sm" />
-  </button>
-</template>
-
-<style scoped>
-.light-dark-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--color-border);
-  border-radius: 0.25em;
-  background: var(--color-bg-0);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition:
-    color var(--transition-fast),
-    background-color var(--transition-fast);
-}
-
-.light-dark-toggle:hover {
-  color: var(--color-text);
-  background: var(--color-bg-1);
-}
-</style>

package/src/NumberInput/NumberInput.md

@@ -1,187 +0,0 @@
-# NumberInput
-
-A number input field with optional slider, percent mode, and validation.
-
-## Examples
-
-### Basic
-
-<script setup>
-import { ref } from 'vue'
-const days = ref(10)
-const population = ref(100000)
-const coverage = ref(0.5)
-const r0 = ref(3.5)
-</script>
-
-<ComponentDemo>
-  <div style="width: 300px">
-    <NumberInput v-model="days" label="Days" placeholder="Number of days" />
-  </div>
-
-<template #code>
-
-```vue
-<script setup>
-import { ref } from "vue";
-const days = ref(10);
-</script>
-
-<NumberInput v-model="days" label="Days" placeholder="Number of days" />
-```
-
-  </template>
-</ComponentDemo>
-
-### With hint and validation
-
-<ComponentDemo>
-  <div style="width: 300px">
-    <NumberInput
-      v-model="population"
-      label="Population"
-      hint="Total number of individuals"
-      :min="1000"
-      :max="100000"
-      :step="1"
-    />
-  </div>
-
-<template #code>
-
-```vue
-<NumberInput
-  v-model="population"
-  label="Population"
-  hint="Total number of individuals"
-  :min="1000"
-  :max="100000"
-  :step="1"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Percent mode
-
-<ComponentDemo>
-  <div style="width: 300px">
-    <NumberInput
-      v-model="coverage"
-      label="Vaccination coverage"
-      percent
-      :max="1"
-    />
-  </div>
-
-<template #code>
-
-```vue
-<NumberInput v-model="coverage" label="Vaccination coverage" percent :max="1" />
-```
-
-  </template>
-</ComponentDemo>
-
-### Slider
-
-<ComponentDemo>
-  <div style="width: 300px">
-    <NumberInput
-      v-model="r0"
-      label="R0"
-      hint="Basic reproduction number"
-      :step="0.1"
-      :min="1"
-      :max="18"
-      slider
-    />
-  </div>
-
-<template #code>
-
-```vue
-<NumberInput
-  v-model="r0"
-  label="R0"
-  hint="Basic reproduction number"
-  :step="0.1"
-  :min="1"
-  :max="18"
-  slider
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Live slider
-
-With `live`, the model updates while dragging the slider thumb rather than only on release.
-
-<ComponentDemo>
-  <div style="width: 300px">
-    <NumberInput
-      v-model="coverage"
-      label="Vaccination coverage"
-      percent
-      slider
-      live
-      :max="1"
-    />
-  </div>
-
-<template #code>
-
-```vue
-<NumberInput
-  v-model="coverage"
-  label="Vaccination coverage"
-  percent
-  slider
-  live
-  :max="1"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Live input
-
-With `live` on a regular input, the model updates as you type (debounced 300ms). Arrow keys and spinner buttons commit immediately.
-
-<ComponentDemo>
-  <div style="width: 300px">
-    <NumberInput v-model="days" label="Days" live />
-  </div>
-
-<template #code>
-
-```vue
-<NumberInput v-model="days" label="Days" live />
-```
-
-  </template>
-</ComponentDemo>
-
-### Integer type
-
-With `number-type="integer"`, decimal values are truncated to whole numbers on commit. When combined with `percent`, the display value (e.g. 42%) is treated as the integer — so internal values like 0.42 are valid.
-
-<ComponentDemo>
-  <div style="width: 300px">
-    <NumberInput v-model="days" label="Steps" number-type="integer" />
-  </div>
-
-<template #code>
-
-```vue
-<NumberInput v-model="days" label="Steps" number-type="integer" />
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./_api/number-input.md-->

package/src/NumberInput/NumberInput.spec.ts

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