@cfasim-ui/docs 0.5.0 → 0.6.0

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.0",
+  "version": "0.6.0",
   "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",
@@ -134,6 +165,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.0",
+  "version": "0.6.0",
   "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;
-}