@cfasim-ui/docs 0.5.1 → 0.6.1

package/components/MultiSelect/MultiSelect.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  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";
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+const model = defineModel<string[]>({ default: () => [] });
+
+const props = defineProps<{
+  label?: string;
+  hideLabel?: boolean;
+  ariaLabel?: string;
+  options: MultiSelectOption[];
+  placeholder?: string;
+  hint?: string;
+}>();
+
+const id = useId();
+const fieldRef = ref<HTMLElement | null>(null);
+
+// In multiple mode the list stays open after a selection, so reka keeps
+// `isUserInputted` true and suppresses its own `resetSearchTermOnSelect`. Clear
+// the typed text (and the underlying filter) ourselves on every selection
+// change by dispatching a native input event the combobox listens for.
+watch(model, () => {
+  nextTick(() => {
+    const input = fieldRef.value?.querySelector("input");
+    if (input?.value) {
+      input.value = "";
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  });
+});
+
+const selectedOptions = computed(() =>
+  model.value
+    .map((v) => props.options.find((o) => o.value === v))
+    .filter((o): o is MultiSelectOption => Boolean(o)),
+);
+
+function remove(value: string) {
+  model.value = model.value.filter((v) => v !== value);
+}
+
+// Backspace in an empty input removes the last selected chip.
+function onInputKeydown(event: KeyboardEvent) {
+  const target = event.target as HTMLInputElement;
+  if (event.key === "Backspace" && !target.value && model.value.length) {
+    remove(model.value[model.value.length - 1]);
+  }
+}
+</script>
+
+<template>
+  <div class="multi-select">
+    <label
+      v-if="label"
+      :id="`${id}-label`"
+      class="multi-select-label"
+      :class="{ 'visually-hidden': hideLabel }"
+    >
+      {{ label }}
+      <Hint v-if="hint && !hideLabel" :text="hint" />
+    </label>
+    <ComboboxRoot
+      v-model="model"
+      multiple
+      open-on-click
+      class="multi-select-root"
+    >
+      <ComboboxAnchor class="multi-select-anchor">
+        <div ref="fieldRef" class="multi-select-field">
+          <ul v-if="selectedOptions.length" class="multi-select-chips">
+            <li
+              v-for="opt in selectedOptions"
+              :key="opt.value"
+              class="multi-select-chip"
+            >
+              <span class="multi-select-chip-label">{{ opt.label }}</span>
+              <button
+                type="button"
+                class="multi-select-chip-remove"
+                :aria-label="`Remove ${opt.label}`"
+                @click="remove(opt.value)"
+              >
+                <Icon icon="close" :size="14" />
+              </button>
+            </li>
+          </ul>
+          <ComboboxInput
+            class="multi-select-input"
+            :placeholder="selectedOptions.length ? undefined : placeholder"
+            :aria-labelledby="label ? `${id}-label` : undefined"
+            :aria-label="!label ? ariaLabel : undefined"
+            @keydown="onInputKeydown"
+          />
+        </div>
+        <ComboboxTrigger
+          class="multi-select-trigger"
+          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>
+          </span>
+        </ComboboxTrigger>
+      </ComboboxAnchor>
+      <ComboboxPortal>
+        <ComboboxContent
+          class="multi-select-content"
+          position="popper"
+          :side-offset="4"
+          :body-lock="false"
+        >
+          <ComboboxViewport class="multi-select-viewport">
+            <ComboboxEmpty class="multi-select-empty">No matches</ComboboxEmpty>
+            <ComboboxItem
+              v-for="opt in options"
+              :key="opt.value"
+              :value="opt.value"
+              class="multi-select-item"
+            >
+              <span>{{ opt.label }}</span>
+              <ComboboxItemIndicator class="multi-select-indicator">
+                <Icon icon="check" :size="14" />
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          </ComboboxViewport>
+        </ComboboxContent>
+      </ComboboxPortal>
+    </ComboboxRoot>
+  </div>
+</template>
+
+<style scoped>
+.multi-select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
+.multi-select-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--font-size-sm);
+}
+
+.multi-select-anchor {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  min-height: 2.5em;
+  padding: 0.25em 0.5em;
+  font-size: var(--font-size-sm);
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.multi-select-anchor:hover {
+  border-color: var(--color-border-hover);
+}
+
+.multi-select-anchor:focus-within {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.multi-select-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25em;
+  flex: 1;
+  min-width: 0;
+}
+
+.multi-select-chips {
+  display: contents;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.multi-select-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  /* Reset list margins (e.g. a consumer's `li + li` spacing) so chips line up. */
+  margin: 0;
+  padding: 0.125em 0.25em 0.125em 0.5em;
+  background: var(--color-bg-2);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  line-height: 1.4;
+}
+
+.multi-select-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  border-radius: 0.25em;
+}
+
+.multi-select-chip-remove:hover {
+  color: var(--color-text);
+}
+
+.multi-select-chip-remove:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 1px;
+}
+
+.multi-select-input {
+  flex: 1;
+  min-width: 3em;
+  height: 1.75em;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-text);
+  font: inherit;
+}
+
+.multi-select-input:focus {
+  outline: none;
+}
+
+.multi-select-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.multi-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.multi-select-icon {
+  display: flex;
+  align-items: center;
+}
+</style>
+
+<style>
+.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/ParamEditor/ParamEditor.md

@@ -8,6 +8,8 @@ The editor is **lazy-loaded**: the underlying CodeMirror bundle and YAML/TOML pa
 
 Users can switch formats from the dropdown; the editor round-trips the current value through the new format. Apply emits an `apply` event with the parsed value — the parent decides what to do with it (typically merge back into its own parameter state).
 
+Set the editor font size with the `fontSize` prop (any CSS length, e.g. `"16px"` or `"1rem"`); it defaults to `var(--font-size-sm)`.
+
 ## Examples
 
 <script setup>
@@ -61,6 +63,22 @@ function onApply(v) {
   </template>
 </ComponentDemo>
 
+### Custom font size
+
+<ComponentDemo>
+  <div style="width: 100%">
+    <ParamEditor :value="params" font-size="16px" @apply="onApply" />
+  </div>
+
+<template #code>
+
+```vue
+<ParamEditor :value="params" font-size="16px" @apply="onApply" />
+```
+
+  </template>
+</ComponentDemo>
+
 ## Props
 
 | Prop | Type | Required | Default |
@@ -68,6 +86,7 @@ function onApply(v) {
 | `value` | `ParamEditorValue` | Yes | — |
 | `format` | `ParamEditorFormat` | No | — |
 | `height` | `string` | No | — |
+| `fontSize` | `string` | No | — |
 | `filename` | `string` | No | — |
 
 ## Events

package/components/ParamEditor/ParamEditor.vue

@@ -9,6 +9,9 @@ defineProps<{
   value: ParamEditorValue;
   format?: ParamEditorFormat;
   height?: string;
+  /** Editor font size, as any CSS length (e.g. `"16px"`, `"1rem"`).
+   *  Defaults to `var(--font-size-sm)`. */
+  fontSize?: string;
   /** Basename for the Export download (no extension). Defaults to
    *  `params-YYYYMMDD-HHMMSS` computed at click time. */
   filename?: string;
@@ -33,6 +36,7 @@ const Impl = defineAsyncComponent({
     :value="value"
     :format="format"
     :height="height"
+    :font-size="fontSize"
     :filename="filename"
     @apply="$emit('apply', $event)"
   />

package/components/ParamEditor/ParamEditorImpl.vue

@@ -27,9 +27,10 @@ const props = withDefaults(
     value: Value;
     format?: Format;
     height?: string;
+    fontSize?: string;
     filename?: string;
   }>(),
-  { format: "json", height: "320px" },
+  { format: "json", height: "320px", fontSize: "var(--font-size-sm)" },
 );
 
 const emit = defineEmits<{ apply: [value: Value] }>();
@@ -264,7 +265,7 @@ async function onFileChange(e: Event) {
     <Codemirror
       v-model="text"
       :extensions="extensions"
-      :style="{ height }"
+      :style="{ height, fontSize }"
       :indent-with-tab="false"
       :tab-size="2"
       class="param-editor-cm"
@@ -317,7 +318,6 @@ async function onFileChange(e: Event) {
 .param-editor-cm {
   border: 1px solid var(--color-border);
   border-radius: 0.375em;
-  font-size: var(--font-size-sm);
   overflow: hidden;
 }
 

package/components/SelectBox/SelectBox.md

@@ -1,12 +1,15 @@
 # SelectBox
 
-A dropdown select built on reka-ui.
+A single-select dropdown built on reka-ui. Set `autocomplete` to turn it into a
+filterable single-select combobox: type to narrow the options, just like
+[MultiSelect](./multi-select) but bound to a single `string`.
 
 ## Examples
 
 <script setup>
 import { ref } from 'vue'
 const interval = ref('weekly')
+const state = ref('')
 </script>
 
 <ComponentDemo>
@@ -83,6 +86,73 @@ DOM.
   </template>
 </ComponentDemo>
 
+### Autocomplete
+
+Add `autocomplete` to make the field filterable. Type to narrow the list; the
+selected option's label fills the input. `v-model` is still a single `string`.
+
+<ComponentDemo>
+  <div style="width: 240px">
+    <SelectBox
+      v-model="state"
+      autocomplete
+      label="State"
+      placeholder="Search states…"
+      :options="[
+        { value: 'ca', label: 'California' },
+        { value: 'ny', label: 'New York' },
+        { value: 'tx', label: 'Texas' },
+        { value: 'wa', label: 'Washington' },
+        { value: 'fl', label: 'Florida' },
+      ]"
+    />
+  </div>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const state = ref("");
+</script>
+
+<SelectBox
+  v-model="state"
+  autocomplete
+  label="State"
+  placeholder="Search states…"
+  :options="[
+    { value: 'ca', label: 'California' },
+    { value: 'ny', label: 'New York' },
+    { value: 'tx', label: 'Texas' },
+    { value: 'wa', label: 'Washington' },
+    { value: 'fl', label: 'Florida' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+## Accessibility
+
+In the default mode the field is a reka-ui Select; with `autocomplete` it's a
+reka-ui Combobox following the
+[ARIA combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/):
+
+- The input has `role="combobox"` with `aria-expanded`, `aria-controls`, and
+  `aria-autocomplete="list"`; the popup is a `role="listbox"` and each option a
+  `role="option"` that reflects its state via `aria-selected`.
+- Keyboard support is handled for you: type to filter, ↑/↓ to move through the
+  list, Enter to select the highlighted option, and Escape to close.
+- Pass `label` so the field is named by a real `<label>`. In autocomplete mode
+  the label is also wired to the input via `for`/`id`, so clicking it focuses
+  the field; use `hide-label` to keep the label for screen readers while hiding
+  it visually, or `aria-label` when there's no visible label text.
+- The chevron is a labelled toggle (`aria-label="Toggle options"`) kept out of
+  the tab order, and native browser autofill is disabled so it can't cover the
+  option list.
+
 ## Model
 
 | Name | Type |
@@ -98,6 +168,7 @@ DOM.
 | `ariaLabel` | `string` | No | — |
 | `options` | `SelectOption[]` | Yes | — |
 | `placeholder` | `string` | No | — |
+| `autocomplete` | `boolean` | No | — |
 
 
 ### SelectOption