@cfasim-ui/docs 0.5.1 → 0.6.0

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/ToggleGroup/ToggleGroup.md

@@ -0,0 +1,163 @@
+# ToggleGroup
+
+A segmented control that looks like a [`ButtonGroup`](./button-group) but tracks
+which item(s) are pressed. By default it is single-select (like a radio group);
+add `multiple` to let several items be pressed at once. Built on
+[reka-ui's ToggleGroup](https://reka-ui.com/docs/components/toggle-group).
+
+## Examples
+
+### Single select
+
+`v-model` holds the pressed value (a `string`). Clicking the active item again
+clears the selection.
+
+<script setup>
+import { ref } from 'vue'
+const interval = ref('weekly')
+const days = ref(['mon', 'wed'])
+</script>
+
+<ComponentDemo>
+  <ToggleGroup
+    v-model="interval"
+    label="Interval"
+    :options="[
+      { value: 'daily', label: 'Daily' },
+      { value: 'weekly', label: 'Weekly' },
+      { value: 'monthly', label: 'Monthly' },
+    ]"
+  />
+  <p>Selected: {{ interval }}</p>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const interval = ref("weekly");
+</script>
+
+<ToggleGroup
+  v-model="interval"
+  label="Interval"
+  :options="[
+    { value: 'daily', label: 'Daily' },
+    { value: 'weekly', label: 'Weekly' },
+    { value: 'monthly', label: 'Monthly' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Multiple select
+
+With `multiple`, `v-model` is a `string[]` and any number of items can be
+pressed at once.
+
+<ComponentDemo>
+  <ToggleGroup
+    v-model="days"
+    multiple
+    label="Active days"
+    :options="[
+      { value: 'mon', label: 'Mon' },
+      { value: 'tue', label: 'Tue' },
+      { value: 'wed', label: 'Wed' },
+      { value: 'thu', label: 'Thu' },
+      { value: 'fri', label: 'Fri' },
+    ]"
+  />
+  <p>Selected: {{ days.join(', ') || 'none' }}</p>
+
+<template #code>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const days = ref(["mon", "wed"]);
+</script>
+
+<ToggleGroup
+  v-model="days"
+  multiple
+  label="Active days"
+  :options="[
+    { value: 'mon', label: 'Mon' },
+    { value: 'tue', label: 'Tue' },
+    { value: 'wed', label: 'Wed' },
+    { value: 'thu', label: 'Thu' },
+    { value: 'fri', label: 'Fri' },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+### Vertical and disabled options
+
+Set `orientation="vertical"` to stack the items, and mark individual options
+`disabled`.
+
+<ComponentDemo>
+  <ToggleGroup
+    model-value="map"
+    orientation="vertical"
+    aria-label="View"
+    :options="[
+      { value: 'map', label: 'Map' },
+      { value: 'chart', label: 'Chart' },
+      { value: 'table', label: 'Table', disabled: true },
+    ]"
+  />
+
+<template #code>
+
+```vue
+<ToggleGroup
+  v-model="view"
+  orientation="vertical"
+  aria-label="View"
+  :options="[
+    { value: 'map', label: 'Map' },
+    { value: 'chart', label: 'Chart' },
+    { value: 'table', label: 'Table', disabled: true },
+  ]"
+/>
+```
+
+  </template>
+</ComponentDemo>
+
+## Model
+
+| Name | Type |
+|------|------|
+| `v-model` | `string \| string[]` |
+
+## Props
+
+| Prop | Type | Required | Default |
+|------|------|----------|---------|
+| `options` | `ToggleGroupOption[]` | Yes | — |
+| `multiple` | `boolean` | No | — |
+| `label` | `string` | No | — |
+| `hideLabel` | `boolean` | No | — |
+| `ariaLabel` | `string` | No | — |
+| `hint` | `string` | No | — |
+| `disabled` | `boolean` | No | — |
+| `orientation` | `"horizontal" \| "vertical"` | No | `"horizontal"` |
+
+
+### ToggleGroupOption
+
+```ts
+interface ToggleGroupOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+```