@cfasim-ui/docs 0.3.11

package/components/Icon/Icon.vue

@@ -0,0 +1,112 @@
+<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/components/LightDarkToggle/LightDarkToggle.vue

@@ -0,0 +1,49 @@
+<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/components/NumberInput/NumberInput.md

@@ -0,0 +1,305 @@
+# 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>
+
+### Decimal places
+
+Display precision is inferred from `step` (e.g. `step="0.001"` in percent mode
+shows tenths of a percent). Set `decimals` explicitly to override.
+
+<ComponentDemo>
+  <div style="width: 300px; display: flex; flex-direction: column; gap: 0.75em">
+    <NumberInput
+      v-model="coverage"
+      label="Coverage (inferred from step)"
+      percent
+      :step="0.001"
+      :max="1"
+    />
+    <NumberInput
+      v-model="r0"
+      label="R0 (explicit decimals)"
+      :decimals="3"
+      :min="0"
+      :max="18"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput
+  v-model="coverage"
+  label="Coverage"
+  percent
+  :step="0.001"
+  :max="1"
+/>
+<NumberInput v-model="r0" label="R0" :decimals="3" :min="0" :max="18" />
+```
+
+  </template>
+</ComponentDemo>
+
+### Required
+
+With `required`, clearing the field shows a validation error on commit.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput v-model="days" label="Days" required />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput v-model="days" label="Days" required />
+```
+
+  </template>
+</ComponentDemo>
+
+Combine `required` with `live` to validate as the user types (debounced).
+
+<ComponentDemo>
+  <div style="width: 300px; display: flex; flex-direction: column; gap: 0.75em">
+    <NumberInput v-model="days" label="Days (on blur)" required />
+    <NumberInput v-model="days" label="Days (live)" required live />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput v-model="days" label="Days (on blur)" required />
+<NumberInput v-model="days" label="Days (live)" required live />
+```
+
+  </template>
+</ComponentDemo>
+
+### Hidden label
+
+Use `hide-label` to visually hide the label while keeping it available to
+screen readers. Useful when a heading or surrounding context already describes
+the input visually.
+
+<ComponentDemo>
+  <div style="width: 300px">
+    <NumberInput v-model="days" label="Days" hide-label />
+  </div>
+
+<template #code>
+
+```vue
+<NumberInput v-model="days" label="Days" hide-label />
+```
+
+  </template>
+</ComponentDemo>
+
+## Model
+
+| Name | Type |
+|------|------|
+| `v-model` | `number` |
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `label` | `string` | No | — |
+| `hideLabel` | `boolean` | No | — |
+| `placeholder` | `string` | No | — |
+| `step` | `number` | No | — |
+| `min` | `number` | No | — |
+| `max` | `number` | No | — |
+| `hint` | `string` | No | — |
+| `percent` | `boolean` | No | — |
+| `slider` | `boolean` | No | — |
+| `live` | `boolean` | No | — |
+| `numberType` | `"integer" \| "float"` | No | — |
+| `required` | `boolean` | No | — |
+| `decimals` | `number` | No | — |
+