@cfasim-ui/docs 0.5.1 → 0.6.1

package/components/SelectBox/SelectBox.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
 import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
   SelectContent,
   SelectItem,
   SelectItemIndicator,
@@ -25,9 +35,16 @@ const props = defineProps<{
   ariaLabel?: string;
   options: SelectOption[];
   placeholder?: string;
+  /** Turn the field into a filterable single-select autocomplete (combobox). */
+  autocomplete?: boolean;
 }>();
 
 const id = useId();
+
+// Shows the selected option's label in the combobox input when not filtering.
+function displayValue(value: string) {
+  return props.options.find((o) => o.value === value)?.label ?? "";
+}
 </script>
 
 <template>
@@ -35,11 +52,81 @@ const id = useId();
     <label
       v-if="label"
       :id="`${id}-label`"
+      :for="autocomplete ? `${id}-input` : undefined"
       class="select-label"
       :class="{ 'visually-hidden': hideLabel }"
       >{{ label }}</label
     >
-    <SelectRoot v-model="model">
+
+    <ComboboxRoot
+      v-if="autocomplete"
+      v-model="model"
+      open-on-click
+      class="select-combobox-root"
+    >
+      <ComboboxAnchor class="select-anchor">
+        <ComboboxInput
+          :id="`${id}-input`"
+          class="select-input"
+          :display-value="displayValue"
+          :placeholder="placeholder"
+          :aria-labelledby="props.label ? `${id}-label` : undefined"
+          :aria-label="!props.label ? props.ariaLabel : undefined"
+        />
+        <ComboboxTrigger class="select-icon-button" aria-label="Toggle options">
+          <span class="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="select-content select-content-autocomplete"
+          position="popper"
+          :side-offset="4"
+          :body-lock="false"
+        >
+          <ComboboxViewport class="select-viewport">
+            <ComboboxEmpty class="select-empty">No matches</ComboboxEmpty>
+            <ComboboxItem
+              v-for="opt in options"
+              :key="opt.value"
+              :value="opt.value"
+              class="select-item"
+            >
+              <span>{{ opt.label }}</span>
+              <ComboboxItemIndicator class="select-indicator">
+                <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="M2 6L5 9L10 3" />
+                </svg>
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          </ComboboxViewport>
+        </ComboboxContent>
+      </ComboboxPortal>
+    </ComboboxRoot>
+
+    <SelectRoot v-else v-model="model">
       <SelectTrigger
         class="select-trigger"
         :aria-labelledby="props.label ? `${id}-label` : undefined"
@@ -140,6 +227,62 @@ const id = useId();
   color: var(--color-text-secondary);
 }
 
+/* Autocomplete (combobox) field */
+.select-anchor {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  height: 2.5em;
+  padding: 0 0.5em 0 0.75em;
+  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);
+}
+
+.select-anchor:hover {
+  border-color: var(--color-border-hover);
+}
+
+.select-anchor:focus-within {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.select-input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+}
+
+.select-input:focus {
+  outline: none;
+}
+
+.select-input::placeholder {
+  color: var(--color-text-secondary);
+}
+
+.select-icon-button {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
 .select-icon {
   display: flex;
   align-items: center;
@@ -160,10 +303,23 @@ const id = useId();
   max-height: var(--reka-select-content-available-height);
 }
 
+/* Combobox exposes the anchor width under its own custom property. */
+.select-content-autocomplete {
+  width: var(--reka-combobox-trigger-width);
+  max-height: var(--reka-combobox-content-available-height);
+}
+
 .select-viewport {
   padding: 0.25em;
 }
 
+.select-empty {
+  padding: 0.5em;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
 .select-item {
   display: flex;
   align-items: center;

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;
+}
+```

package/components/ToggleGroup/ToggleGroup.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { ToggleGroupItem, ToggleGroupRoot, useId } from "reka-ui";
+import { computed } from "vue";
+import Hint from "../Hint/Hint.vue";
+
+export interface ToggleGroupOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+// `string` in single mode, `string[]` in multiple mode.
+const model = defineModel<string | string[]>();
+
+const props = withDefaults(
+  defineProps<{
+    options: ToggleGroupOption[];
+    multiple?: boolean;
+    label?: string;
+    hideLabel?: boolean;
+    ariaLabel?: string;
+    hint?: string;
+    disabled?: boolean;
+    orientation?: "horizontal" | "vertical";
+  }>(),
+  { orientation: "horizontal" },
+);
+
+const id = useId();
+const type = computed<"single" | "multiple">(() =>
+  props.multiple ? "multiple" : "single",
+);
+</script>
+
+<template>
+  <div class="toggle-group-field">
+    <label
+      v-if="label"
+      :id="`${id}-label`"
+      class="toggle-group-label"
+      :class="{ 'visually-hidden': hideLabel }"
+    >
+      {{ label }}
+      <Hint v-if="hint && !hideLabel" :text="hint" />
+    </label>
+    <ToggleGroupRoot
+      v-model="model"
+      :type="type"
+      :disabled="disabled"
+      :orientation="orientation"
+      :class="['toggle-group', `toggle-group--${orientation}`]"
+      :aria-labelledby="label ? `${id}-label` : undefined"
+      :aria-label="!label ? ariaLabel : undefined"
+    >
+      <ToggleGroupItem
+        v-for="opt in options"
+        :key="opt.value"
+        :value="opt.value"
+        :disabled="opt.disabled"
+        class="toggle-group-item"
+      >
+        {{ opt.label }}
+      </ToggleGroupItem>
+    </ToggleGroupRoot>
+  </div>
+</template>
+
+<style scoped>
+.toggle-group-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+  align-items: flex-start;
+}
+
+.toggle-group-label {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  font-size: var(--font-size-sm);
+}
+
+.toggle-group {
+  display: inline-flex;
+  /* 1px gaps reveal the group background as dividers between items. */
+  gap: 1px;
+  background: var(--color-border);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375em;
+  /* Clip items to the rounded outer corners. Focus uses an inset outline
+   * (below) so it isn't clipped away. */
+  overflow: hidden;
+}
+
+.toggle-group--vertical {
+  flex-direction: column;
+}
+
+.toggle-group-item {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5em;
+  padding: 0 1em;
+  margin: 0;
+  border: none;
+  background: var(--color-bg-0);
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.toggle-group-item:hover:not([data-disabled]) {
+  background: var(--color-bg-2);
+}
+
+.toggle-group-item[data-state="on"] {
+  background: var(--color-primary);
+  color: var(--color-text-on-primary);
+}
+
+.toggle-group-item[data-state="on"]:hover:not([data-disabled]) {
+  background: var(--color-primary-hover);
+}
+
+.toggle-group-item:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.toggle-group-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Box } from "./Box/Box.vue";
 export type { BoxVariant } from "./Box/Box.vue";
 export { default as Button } from "./Button/Button.vue";
+export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.vue";
 export { default as Container } from "./Container/Container.vue";
 export type { ContainerGap } from "./Container/Container.vue";
 export { default as Expander } from "./Expander/Expander.vue";
@@ -12,6 +13,8 @@ export type { IconSize } from "./Icon/Icon.vue";
 export { registerIcons, hasIcon } from "./Icon/registry";
 export type { IconRegistration, IconVariants } from "./Icon/registry";
 export { default as LightDarkToggle } from "./LightDarkToggle/LightDarkToggle.vue";
+export { default as MultiSelect } from "./MultiSelect/MultiSelect.vue";
+export type { MultiSelectOption } from "./MultiSelect/MultiSelect.vue";
 export { default as NumberInput } from "./NumberInput/NumberInput.vue";
 export type { NumberRange } from "./NumberInput/NumberInput.vue";
 export { default as ParamEditor } from "./ParamEditor/ParamEditor.vue";
@@ -26,3 +29,5 @@ export type { Tab } from "./SidebarLayout/SidebarLayout.vue";
 export { default as Spinner } from "./Spinner/Spinner.vue";
 export { default as TextInput } from "./TextInput/TextInput.vue";
 export { default as Toggle } from "./Toggle/Toggle.vue";
+export { default as ToggleGroup } from "./ToggleGroup/ToggleGroup.vue";
+export type { ToggleGroupOption } from "./ToggleGroup/ToggleGroup.vue";

package/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.1",
+  "version": "0.6.1",
   "package": "@cfasim-ui/docs",
   "content": {
     "components": [
@@ -23,6 +23,20 @@
           "secondary"
         ]
       },
+      {
+        "name": "ButtonGroup",
+        "slug": "button-group",
+        "docs": "components/ButtonGroup/ButtonGroup.md",
+        "source": "components/ButtonGroup/ButtonGroup.vue",
+        "keywords": [
+          "button group",
+          "buttons",
+          "group",
+          "toolbar",
+          "segmented",
+          "joined"
+        ]
+      },
       {
         "name": "Container",
         "slug": "container",
@@ -76,6 +90,23 @@
         "source": "components/Icon/Icon.vue",
         "keywords": []
       },
+      {
+        "name": "MultiSelect",
+        "slug": "multi-select",
+        "docs": "components/MultiSelect/MultiSelect.md",
+        "source": "components/MultiSelect/MultiSelect.vue",
+        "keywords": [
+          "multiselect",
+          "multi-select",
+          "autocomplete",
+          "combobox",
+          "tags",
+          "chips",
+          "filter",
+          "search",
+          "typeahead"
+        ]
+      },
       {
         "name": "NumberInput",
         "slug": "number-input",
@@ -105,7 +136,15 @@
         "slug": "select-box",
         "docs": "components/SelectBox/SelectBox.md",
         "source": "components/SelectBox/SelectBox.vue",
-        "keywords": []
+        "keywords": [
+          "select",
+          "dropdown",
+          "autocomplete",
+          "combobox",
+          "filter",
+          "search",
+          "typeahead"
+        ]
       },
       {
         "name": "SidebarLayout",
@@ -134,6 +173,21 @@
         "docs": "components/Toggle/Toggle.md",
         "source": "components/Toggle/Toggle.vue",
         "keywords": []
+      },
+      {
+        "name": "ToggleGroup",
+        "slug": "toggle-group",
+        "docs": "components/ToggleGroup/ToggleGroup.md",
+        "source": "components/ToggleGroup/ToggleGroup.vue",
+        "keywords": [
+          "toggle group",
+          "segmented control",
+          "single select",
+          "multi select",
+          "button group",
+          "radio",
+          "pressed"
+        ]
       }
     ],
     "charts": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/docs",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "LLM-friendly component and chart documentation for cfasim-ui",
   "license": "Apache-2.0",
   "repository": {

package/charts/_shared/fullscreen.css

@@ -1,51 +0,0 @@
-/* Shared chart styles for the Expand / fullscreen menu item.
-   Bundled into @cfasim-ui/charts/style.css via index.ts so it ships
-   once for the whole package instead of repeating in every chart SFC. */
-
-.line-chart-wrapper:hover .chart-menu-button,
-.bar-chart-wrapper:hover .chart-menu-button,
-.choropleth-wrapper:hover .chart-menu-button,
-.line-chart-wrapper:focus-within .chart-menu-button,
-.bar-chart-wrapper:focus-within .chart-menu-button,
-.choropleth-wrapper:focus-within .chart-menu-button,
-.line-chart-wrapper.is-fullscreen .chart-menu-button,
-.bar-chart-wrapper.is-fullscreen .chart-menu-button,
-.choropleth-wrapper.is-fullscreen .chart-menu-button {
-  opacity: 1;
-}
-
-.line-chart-wrapper.is-fullscreen,
-.bar-chart-wrapper.is-fullscreen,
-.choropleth-wrapper.is-fullscreen {
-  position: fixed;
-  inset: 0;
-  z-index: var(--cfasim-z-fullscreen, 1000);
-  background: var(--color-bg-0, #fff);
-  color: var(--color-text, inherit);
-  padding: 2em;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-/* ChoroplethMap doesn't go through useChartFoundation, so its SVG keeps
-   its prop-driven width/height. Stretch it to fill the expanded box. */
-.choropleth-wrapper.is-fullscreen svg {
-  flex: 1 1 auto;
-  min-height: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.chart-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}