@cfasim-ui/docs 0.6.4 → 0.7.0

package/charts/DataTable/DataTable.vue

@@ -9,6 +9,7 @@ import {
 import ChartMenu from "../ChartMenu/ChartMenu.vue";
 import type { ChartMenuItem } from "../ChartMenu/ChartMenu.vue";
 import { downloadCsv } from "../ChartMenu/download.js";
+import { escapeCsvField } from "../_shared/seriesCsv.js";
 
 export type TableRecord = Record<string, ArrayLike<number | string | boolean>>;
 export type TableData = TableRecord | ModelOutput;
@@ -193,13 +194,6 @@ function menuFilename() {
   return typeof props.menu === "string" ? props.menu : "data";
 }
 
-function escapeCsvField(val: string): string {
-  if (val.includes(",") || val.includes('"') || val.includes("\n")) {
-    return `"${val.replace(/"/g, '""')}"`;
-  }
-  return val;
-}
-
 function toCsv(): string {
   if (typeof props.csv === "function") return props.csv();
   if (typeof props.csv === "string") return props.csv;

package/charts/_shared/ChartZoomControls.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    canZoomIn?: boolean;
+    canZoomOut?: boolean;
+    /** Reset is a no-op at the identity transform — disable it there. */
+    canReset?: boolean;
+    /** Insets the stack further from the corner while the chart fills the
+     * window, matching the ChartMenu trigger area. */
+    isFullscreen?: boolean;
+  }>(),
+  { canZoomIn: true, canZoomOut: true, canReset: true, isFullscreen: false },
+);
+
+const emit = defineEmits<{
+  (e: "zoomIn"): void;
+  (e: "zoomOut"): void;
+  (e: "reset"): void;
+}>();
+</script>
+
+<template>
+  <div
+    class="chart-zoom-controls"
+    :class="{ 'chart-zoom-controls--expanded': isFullscreen }"
+  >
+    <button
+      type="button"
+      class="chart-zoom-button"
+      aria-label="Zoom in"
+      :disabled="!canZoomIn"
+      @click="emit('zoomIn')"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M7 2v10M2 7h10" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="chart-zoom-button"
+      aria-label="Zoom out"
+      :disabled="!canZoomOut"
+      @click="emit('zoomOut')"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M2 7h10" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="chart-zoom-button"
+      aria-label="Reset view"
+      :disabled="!canReset"
+      @click="emit('reset')"
+    >
+      <!-- Counterclockwise "reset" arrow (rotate-ccw). -->
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path
+          d="M1.75 7a5.25 5.25 0 1 0 5.25-5.25c-1.48 0-2.9.6-3.94 1.6L1.75 4.7"
+        />
+        <path d="M1.75 1.75v2.95h2.95" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.chart-zoom-controls {
+  position: absolute;
+  top: 0.5em;
+  left: 0.5em;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Mirror .chart-menu-trigger-area--expanded: while the chart fills the
+   window the wrapper's padding doesn't move absolute children, so inset
+   further for modal-style breathing room. */
+.chart-zoom-controls--expanded {
+  top: 1.25em;
+  left: 1.25em;
+}
+
+/* Same look as .chart-menu-button, but always visible — no hover reveal. */
+.chart-zoom-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 0.25em;
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text-secondary, #555);
+  cursor: pointer;
+}
+
+.chart-zoom-button:hover:not(:disabled) {
+  background: var(--color-bg-1, rgba(0, 0, 0, 0.05));
+  color: var(--color-text);
+}
+
+.chart-zoom-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+</style>

package/charts/_shared/index.ts

@@ -1,16 +1,9 @@
-export {
-  snap,
-  niceStep,
-  intervalValues,
-  formatTick,
-  type ChartData,
-} from "./axes.js";
+export { snap, formatTick, type ChartData } from "./axes.js";
 export { computeTickValues, type TickValueOptions } from "./computeTicks.js";
 export {
   scaleFraction,
   clampExtentForScale,
   computeLogTickValues,
-  LOG_FLOOR,
   type ScaleType,
 } from "./scale.js";
 export { useChartSize, type ChartSizeOptions } from "./useChartSize.js";
@@ -36,6 +29,8 @@ export {
 } from "./useChartTooltip.js";
 export { useChartMenu, type ChartMenuOptions } from "./useChartMenu.js";
 export { useChartFullscreen } from "./useChartFullscreen.js";
+export { isTouchDevice } from "./touch.js";
+export { default as ChartZoomControls } from "./ChartZoomControls.vue";
 export { seriesToCsv, categoricalToCsv, type CsvSeries } from "./seriesCsv.js";
 export { default as ChartAnnotations } from "./ChartAnnotations.vue";
 export type { ChartAnnotation } from "./annotations.js";
@@ -54,13 +49,7 @@ export type {
   BlendMode,
   LineMarkStyle,
 } from "./chartProps.js";
-export {
-  parseRgb,
-  relativeLuminance,
-  resolveColorToRgb,
-  pickContrastColor,
-  type Rgb,
-} from "./contrast.js";
+export { resolveColorToRgb, pickContrastColor, type Rgb } from "./contrast.js";
 export {
   parseDate,
   isDateLike,

package/charts/_shared/seriesCsv.ts

@@ -51,7 +51,7 @@ export function categoricalToCsv(
       : [categoryHeader, ...series.map((s, i) => s.label || `series_${i}`)];
   const rows = [headers.join(",")];
   for (let r = 0; r < categories.length; r++) {
-    const cells = [escapeCsv(categories[r])];
+    const cells = [escapeCsvField(categories[r])];
     for (const s of series) {
       cells.push(r < s.data.length ? String(s.data[r]) : "");
     }
@@ -60,7 +60,7 @@ export function categoricalToCsv(
   return rows.join("\n");
 }
 
-function escapeCsv(value: string): string {
+export function escapeCsvField(value: string): string {
   if (value.includes(",") || value.includes('"') || value.includes("\n")) {
     return `"${value.replace(/"/g, '""')}"`;
   }

package/charts/_shared/touch.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether the current device has a touch screen. A function (not a
+ * module-level constant) so unit tests can mock it per-case and so SSR
+ * evaluation is deferred until an event actually needs the answer.
+ */
+export function isTouchDevice(): boolean {
+  return typeof window !== "undefined" && "ontouchstart" in window;
+}

package/charts/_shared/useChartFoundation.ts

@@ -153,7 +153,6 @@ export function useChartFoundation(opts: ChartFoundationOptions) {
     fullscreenStyle,
     teleportTarget,
     exitFullscreen,
-    measuredHeight,
   };
 }
 

package/components/MultiSelect/MultiSelect.md

@@ -128,9 +128,9 @@ MultiSelect is built on reka-ui's Combobox, which implements the
 | `label` | `string` | No | — |
 | `hideLabel` | `boolean` | No | — |
 | `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
 | `options` | `MultiSelectOption[]` | Yes | — |
 | `placeholder` | `string` | No | — |
-| `hint` | `string` | No | — |
 
 
 ### MultiSelectOption

package/components/MultiSelect/MultiSelect.vue

@@ -10,11 +10,12 @@ import {
   ComboboxRoot,
   ComboboxTrigger,
   ComboboxViewport,
-  useId,
 } from "reka-ui";
 import { computed, nextTick, ref, watch } from "vue";
 import Icon from "../Icon/Icon.vue";
-import Hint from "../Hint/Hint.vue";
+import FieldLabel from "../_internal/FieldLabel.vue";
+import { useField, type FieldProps } from "../_internal/field";
+import "../_internal/listbox.css";
 
 export interface MultiSelectOption {
   value: string;
@@ -23,16 +24,14 @@ export interface MultiSelectOption {
 
 const model = defineModel<string[]>({ default: () => [] });
 
-const props = defineProps<{
-  label?: string;
-  hideLabel?: boolean;
-  ariaLabel?: string;
+interface Props extends FieldProps {
   options: MultiSelectOption[];
   placeholder?: string;
-  hint?: string;
-}>();
+}
+
+const props = defineProps<Props>();
 
-const id = useId();
+const { labelId, ariaProps } = useField(props);
 const fieldRef = ref<HTMLElement | null>(null);
 
 // In multiple mode the list stays open after a selection, so reka keeps
@@ -70,15 +69,13 @@ function onInputKeydown(event: KeyboardEvent) {
 
 <template>
   <div class="multi-select">
-    <label
-      v-if="label"
-      :id="`${id}-label`"
+    <FieldLabel
       class="multi-select-label"
-      :class="{ 'visually-hidden': hideLabel }"
-    >
-      {{ label }}
-      <Hint v-if="hint && !hideLabel" :text="hint" />
-    </label>
+      :label="label"
+      :label-id="labelId"
+      :hide-label="hideLabel"
+      :hint="hint"
+    />
     <ComboboxRoot
       v-model="model"
       multiple
@@ -107,8 +104,7 @@ function onInputKeydown(event: KeyboardEvent) {
           <ComboboxInput
             class="multi-select-input"
             :placeholder="selectedOptions.length ? undefined : placeholder"
-            :aria-labelledby="label ? `${id}-label` : undefined"
-            :aria-label="!label ? ariaLabel : undefined"
+            v-bind="ariaProps"
             @keydown="onInputKeydown"
           />
         </div>
@@ -117,38 +113,29 @@ function onInputKeydown(event: KeyboardEvent) {
           aria-label="Toggle options"
         >
           <span class="multi-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>
+            <Icon icon="keyboard_arrow_down" :size="16" />
           </span>
         </ComboboxTrigger>
       </ComboboxAnchor>
       <ComboboxPortal>
         <ComboboxContent
-          class="multi-select-content"
+          class="cfasim-listbox-content multi-select-content"
           position="popper"
           :side-offset="4"
           :body-lock="false"
         >
-          <ComboboxViewport class="multi-select-viewport">
-            <ComboboxEmpty class="multi-select-empty">No matches</ComboboxEmpty>
+          <ComboboxViewport class="cfasim-listbox-viewport">
+            <ComboboxEmpty class="cfasim-listbox-empty">
+              No matches
+            </ComboboxEmpty>
             <ComboboxItem
               v-for="opt in options"
               :key="opt.value"
               :value="opt.value"
-              class="multi-select-item"
+              class="cfasim-listbox-item"
             >
               <span>{{ opt.label }}</span>
-              <ComboboxItemIndicator class="multi-select-indicator">
+              <ComboboxItemIndicator class="cfasim-listbox-indicator">
                 <Icon icon="check" :size="14" />
               </ComboboxItemIndicator>
             </ComboboxItem>
@@ -284,55 +271,9 @@ function onInputKeydown(event: KeyboardEvent) {
 </style>
 
 <style>
+/* Sizing only — the dropdown skin lives in _internal/listbox.css. */
 .multi-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);
   width: var(--reka-combobox-trigger-width);
   max-height: var(--reka-combobox-content-available-height);
 }
-
-.multi-select-viewport {
-  padding: 0.25em;
-}
-
-.multi-select-empty {
-  padding: 0.5em;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  text-align: center;
-}
-
-.multi-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;
-}
-
-.multi-select-item[data-highlighted] {
-  background: var(--color-primary);
-  color: white;
-}
-
-.multi-select-item[data-state="checked"] {
-  font-weight: 600;
-}
-
-.multi-select-indicator {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
 </style>

package/components/NumberInput/NumberInput.md

@@ -467,19 +467,19 @@ the input visually.
 |------|------|----------|---------|
 | `label` | `string` | No | — |
 | `hideLabel` | `boolean` | No | — |
+| `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
 | `placeholder` | `string` | No | — |
 | `step` | `number` | No | — |
 | `min` | `number` | No | — |
 | `max` | `number` | No | — |
-| `hint` | `string` | No | — |
-| `percent` | `boolean` | No | — |
+| `percent` | `1"`) may not round-trip through the text input — use
+  // `percent: true` for value scaling and `format` for display shaping.
+  format?: NumberFormat` | Yes | — |
 | `slider` | `boolean` | No | — |
 | `live` | `boolean` | No | — |
 | `numberType` | `"integer" \| "float"` | No | — |
 | `required` | `boolean` | No | — |
 | `decimals` | `number` | No | — |
-| `percent` | `1"`) may not round-trip through the text input — use
-  // `percent: true` for value scaling and `format` for display shaping.
-  format?: NumberFormat` | Yes | — |
 | `sliderDisplay` | `(value: number) => string` | No | — |
 

package/components/NumberInput/NumberInput.vue

@@ -3,6 +3,8 @@ import { ref, watch, computed, onMounted, getCurrentInstance } from "vue";
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
 import { formatNumber, type NumberFormat } from "@cfasim-ui/shared";
 import Hint from "../Hint/Hint.vue";
+import type { FieldProps } from "../_internal/field";
+import "../_internal/input.css";
 
 export type NumberRange = [number, number];
 
@@ -16,14 +18,11 @@ const range = defineModel<NumberRange>("range");
 const lower = defineModel<number>("lower");
 const upper = defineModel<number>("upper");
 
-const props = defineProps<{
-  label?: string;
-  hideLabel?: boolean;
+interface Props extends FieldProps {
   placeholder?: string;
   step?: number;
   min?: number;
   max?: number;
-  hint?: string;
   percent?: boolean;
   slider?: boolean;
   live?: boolean;
@@ -42,7 +41,9 @@ const props = defineProps<{
   /** @deprecated Use `format` instead. Still honored for slider labels
    * when `format` is unset, but will be removed in a future release. */
   sliderDisplay?: (value: number) => string;
-}>();
+}
+
+const props = defineProps<Props>();
 
 function isRangeValue(v: unknown): v is NumberRange {
   return Array.isArray(v) && v.length === 2;
@@ -75,7 +76,7 @@ onMounted(() => {
   }
 });
 
-const sliderMin = computed(() => props.min ?? (props.percent ? 0 : 0));
+const sliderMin = computed(() => props.min ?? 0);
 const sliderMax = computed(() => props.max ?? (props.percent ? 1 : 100));
 const sliderStep = computed(() => props.step ?? (props.percent ? 0.01 : 1));
 
@@ -408,11 +409,11 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
 <template>
   <component
     :is="props.label ? 'label' : 'div'"
-    :class="props.label ? 'input-label' : undefined"
+    :class="props.label ? 'cfasim-input-label' : undefined"
   >
     <span
       v-if="props.label"
-      class="input-label-row"
+      class="cfasim-input-label-row"
       :class="{ 'visually-hidden': props.hideLabel }"
     >
       {{ props.label }}
@@ -421,9 +422,11 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
     <span v-if="!isSlider" class="input-wrapper">
       <input
         type="text"
+        class="cfasim-input"
         :inputmode="props.numberType === 'integer' ? 'numeric' : 'decimal'"
         v-model="local"
         :placeholder="props.placeholder"
+        :aria-label="!props.label ? props.ariaLabel : undefined"
         :aria-invalid="!!validationError"
         :aria-required="props.required || undefined"
         :required="props.required"
@@ -475,67 +478,17 @@ function onArrowStep(event: KeyboardEvent, direction: 1 | -1) {
 </template>
 
 <style scoped>
-.input-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25em;
-}
-
-.input-label-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 .input-wrapper {
   display: flex;
   align-items: center;
   gap: 0.25em;
 }
 
-.input-wrapper input {
+.input-wrapper .cfasim-input {
   flex: 1;
   min-width: 0;
 }
 
-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[aria-invalid="true"] {
-  border-color: var(--color-error);
-}
-
-input[aria-invalid="true"]:focus {
-  border-color: var(--color-error);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent);
-}
-
-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
 .input-suffix {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);

package/components/SelectBox/SelectBox.md

@@ -166,6 +166,7 @@ reka-ui Combobox following the
 | `label` | `string` | No | — |
 | `hideLabel` | `boolean` | No | — |
 | `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
 | `options` | `SelectOption[]` | Yes | — |
 | `placeholder` | `string` | No | — |
 | `autocomplete` | `boolean` | No | — |