@cfasim-ui/components 0.7.7 → 0.8.0

package/docs/index.json

@@ -0,0 +1,194 @@
+{
+  "version": "0.8.0",
+  "package": "@cfasim-ui/components",
+  "content": {
+    "components": [
+      {
+        "name": "Box",
+        "slug": "box",
+        "docs": "docs/Box.md",
+        "source": "src/Box/Box.vue",
+        "keywords": []
+      },
+      {
+        "name": "Button",
+        "slug": "button",
+        "docs": "docs/Button.md",
+        "source": "src/Button/Button.vue",
+        "keywords": [
+          "button",
+          "click",
+          "action",
+          "primary",
+          "secondary"
+        ]
+      },
+      {
+        "name": "ButtonGroup",
+        "slug": "button-group",
+        "docs": "docs/ButtonGroup.md",
+        "source": "src/ButtonGroup/ButtonGroup.vue",
+        "keywords": [
+          "button group",
+          "buttons",
+          "group",
+          "toolbar",
+          "segmented",
+          "joined"
+        ]
+      },
+      {
+        "name": "Container",
+        "slug": "container",
+        "docs": "docs/Container.md",
+        "source": "src/Container/Container.vue",
+        "keywords": [
+          "container",
+          "layout",
+          "stack",
+          "row",
+          "flex",
+          "scrollable",
+          "border",
+          "card"
+        ]
+      },
+      {
+        "name": "Expander",
+        "slug": "expander",
+        "docs": "docs/Expander.md",
+        "source": "src/Expander/Expander.vue",
+        "keywords": []
+      },
+      {
+        "name": "Grid",
+        "slug": "grid",
+        "docs": "docs/Grid.md",
+        "source": "src/Grid/Grid.vue",
+        "keywords": [
+          "grid",
+          "columns",
+          "layout",
+          "responsive",
+          "auto-fit",
+          "cards",
+          "side-by-side",
+          "proportional"
+        ]
+      },
+      {
+        "name": "Hint",
+        "slug": "hint",
+        "docs": "docs/Hint.md",
+        "source": "src/Hint/Hint.vue",
+        "keywords": []
+      },
+      {
+        "name": "Icon",
+        "slug": "icon",
+        "docs": "docs/Icon.md",
+        "source": "src/Icon/Icon.vue",
+        "keywords": []
+      },
+      {
+        "name": "MultiSelect",
+        "slug": "multi-select",
+        "docs": "docs/MultiSelect.md",
+        "source": "src/MultiSelect/MultiSelect.vue",
+        "keywords": [
+          "multiselect",
+          "multi-select",
+          "autocomplete",
+          "combobox",
+          "tags",
+          "chips",
+          "filter",
+          "search",
+          "typeahead"
+        ]
+      },
+      {
+        "name": "NumberInput",
+        "slug": "number-input",
+        "docs": "docs/NumberInput.md",
+        "source": "src/NumberInput/NumberInput.vue",
+        "keywords": []
+      },
+      {
+        "name": "ParamEditor",
+        "slug": "param-editor",
+        "docs": "docs/ParamEditor.md",
+        "source": "src/ParamEditor/ParamEditor.vue",
+        "keywords": [
+          "parameters",
+          "editor",
+          "code",
+          "json",
+          "toml",
+          "yaml",
+          "codemirror",
+          "import",
+          "export"
+        ]
+      },
+      {
+        "name": "SelectBox",
+        "slug": "select-box",
+        "docs": "docs/SelectBox.md",
+        "source": "src/SelectBox/SelectBox.vue",
+        "keywords": [
+          "select",
+          "dropdown",
+          "autocomplete",
+          "combobox",
+          "filter",
+          "search",
+          "typeahead"
+        ]
+      },
+      {
+        "name": "SidebarLayout",
+        "slug": "sidebar-layout",
+        "docs": "docs/SidebarLayout.md",
+        "source": "src/SidebarLayout/SidebarLayout.vue",
+        "keywords": []
+      },
+      {
+        "name": "Spinner",
+        "slug": "spinner",
+        "docs": "docs/Spinner.md",
+        "source": "src/Spinner/Spinner.vue",
+        "keywords": []
+      },
+      {
+        "name": "TextInput",
+        "slug": "text-input",
+        "docs": "docs/TextInput.md",
+        "source": "src/TextInput/TextInput.vue",
+        "keywords": []
+      },
+      {
+        "name": "Toggle",
+        "slug": "toggle",
+        "docs": "docs/Toggle.md",
+        "source": "src/Toggle/Toggle.vue",
+        "keywords": []
+      },
+      {
+        "name": "ToggleGroup",
+        "slug": "toggle-group",
+        "docs": "docs/ToggleGroup.md",
+        "source": "src/ToggleGroup/ToggleGroup.vue",
+        "keywords": [
+          "toggle group",
+          "segmented control",
+          "single select",
+          "multi select",
+          "button group",
+          "radio",
+          "pressed"
+        ]
+      }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/components",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "type": "module",
   "description": "Vue 3 UI components for cfasim-ui",
   "license": "Apache-2.0",
@@ -13,7 +13,11 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "docs",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.spec.ts"
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,29 +32,29 @@
     "*.css"
   ],
   "dependencies": {
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-yaml": "^6.1.3",
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/legacy-modes": "^6.5.3",
-    "@codemirror/view": "^6.39.2",
-    "codemirror": "^6.0.2",
-    "reka-ui": "^2.9.2",
-    "smol-toml": "^1.6.1",
-    "vue-codemirror": "^6.1.1",
-    "yaml": "^2.9.0",
-    "@cfasim-ui/shared": "0.7.7"
+    "@codemirror/lang-json": "6.0.2",
+    "@codemirror/lang-yaml": "6.1.3",
+    "@codemirror/language": "6.12.4",
+    "@codemirror/legacy-modes": "6.5.3",
+    "@codemirror/view": "6.43.6",
+    "codemirror": "6.0.2",
+    "reka-ui": "2.10.1",
+    "smol-toml": "1.7.0",
+    "vue-codemirror": "6.1.1",
+    "yaml": "2.9.0",
+    "@cfasim-ui/shared": "0.8.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@material-symbols/svg-400": "^0.44.10",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/test-utils": "^2.4.6",
-    "happy-dom": "^20.8.9",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-svg-loader": "^5.1.1",
-    "vitest": "^4.1.0"
+    "@material-symbols/svg-400": "0.45.8",
+    "@vitejs/plugin-vue": "6.0.8",
+    "@vue/test-utils": "2.4.11",
+    "happy-dom": "20.10.6",
+    "vite-plugin-dts": "5.0.3",
+    "vite-svg-loader": "5.1.1",
+    "vitest": "4.1.10"
   },
   "scripts": {
     "build": "vite build"

package/src/Box/Box.md

@@ -0,0 +1,41 @@
+# Box
+
+A colored container for callouts, alerts, and grouped content.
+
+## Examples
+
+### Variants
+
+<ComponentDemo>
+  <Box variant="info">This is an info box.</Box>
+  <Box variant="success">This is a success box.</Box>
+  <Box variant="warning">This is a warning box.</Box>
+  <Box variant="error">This is an error box.</Box>
+
+<template #code>
+
+```vue
+<Box variant="info">This is an info box.</Box>
+<Box variant="success">This is a success box.</Box>
+<Box variant="warning">This is a warning box.</Box>
+<Box variant="error">This is an error box.</Box>
+```
+
+  </template>
+</ComponentDemo>
+
+### Custom colors
+
+<ComponentDemo>
+  <Box bg-color="#f0e6ff" text-color="#4a1d96">Custom purple box</Box>
+
+<template #code>
+
+```vue
+<Box bg-color="#f0e6ff" text-color="#4a1d96">Custom purple box</Box>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/box.md-->

package/src/Box/Box.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+export type BoxVariant = "info" | "success" | "warning" | "error";
+
+defineProps<{
+  variant?: BoxVariant;
+  bgColor?: string;
+  textColor?: string;
+  role?: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="box"
+    :class="variant ? `box-${variant}` : undefined"
+    :style="{
+      backgroundColor: bgColor,
+      color: textColor,
+    }"
+    :role="role"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.box {
+  padding: 0.75em 1.25em;
+  border-radius: 0.375em;
+  font-size: var(--font-size-sm);
+}
+
+.box-info {
+  background-color: var(--color-box-info-bg);
+  color: var(--color-box-info-text);
+}
+
+.box-success {
+  background-color: var(--color-box-success-bg);
+  color: var(--color-box-success-text);
+}
+
+.box-warning {
+  background-color: var(--color-box-warning-bg);
+  color: var(--color-box-warning-text);
+}
+
+.box-error {
+  background-color: var(--color-box-error-bg);
+  color: var(--color-box-error-text);
+}
+</style>

package/src/Button/Button.md

@@ -0,0 +1,59 @@
+---
+keywords: [button, click, action, primary, secondary]
+---
+
+# Button
+
+A button for triggering actions. Supports primary and secondary variants.
+
+Built on [reka-ui Primitive](https://reka-ui.com/docs/utilities/primitive), so it supports `as` and `asChild` for rendering as different elements.
+
+## Examples
+
+### Variants
+
+<ComponentDemo>
+  <Button>Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+
+<template #code>
+
+```vue
+<Button>Primary</Button>
+<Button variant="secondary">Secondary</Button>
+```
+
+  </template>
+</ComponentDemo>
+
+### Disabled
+
+<ComponentDemo>
+  <Button disabled>Disabled</Button>
+  <Button variant="secondary" disabled>Disabled</Button>
+
+<template #code>
+
+```vue
+<Button disabled>Disabled</Button>
+<Button variant="secondary" disabled>Disabled</Button>
+```
+
+  </template>
+</ComponentDemo>
+
+### With label prop
+
+<ComponentDemo>
+  <Button label="Click me" />
+
+<template #code>
+
+```vue
+<Button label="Click me" />
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/button.md-->

package/src/Button/Button.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { Primitive } from "reka-ui";
+import type { PrimitiveProps } from "reka-ui";
+
+interface Props extends PrimitiveProps {
+  label?: string;
+  variant?: "primary" | "secondary";
+}
+
+withDefaults(defineProps<Props>(), {
+  as: "button",
+  variant: "primary",
+});
+
+defineEmits<{
+  click: [event: MouseEvent];
+}>();
+</script>
+
+<template>
+  <Primitive
+    class="button"
+    :data-variant="variant"
+    :as="as"
+    :as-child="asChild"
+    @click="$emit('click', $event)"
+  >
+    <slot>{{ label }}</slot>
+  </Primitive>
+</template>
+
+<style scoped>
+.button {
+  display: inline-flex;
+  border: none;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+  min-height: 2.5em;
+  padding: 0 1em;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  border-radius: 0.375em;
+  background-color: var(--color-primary);
+  color: var(--color-text-on-primary);
+}
+
+.button:hover {
+  cursor: pointer;
+  background-color: var(--color-primary-hover);
+}
+
+.button:active {
+  background-color: var(--color-primary-active);
+}
+
+.button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button[data-variant="secondary"] {
+  background-color: transparent;
+  color: var(--color-primary);
+  border: 1px solid var(--color-primary);
+}
+
+.button[data-variant="secondary"]:hover {
+  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+
+.button[data-variant="secondary"]:active {
+  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
+}
+</style>

package/src/ButtonGroup/ButtonGroup.md

@@ -0,0 +1,62 @@
+---
+keywords: [button group, buttons, group, toolbar, segmented, joined]
+---
+
+# ButtonGroup
+
+A container that visually joins a set of [`Button`](./button)s (or any
+elements) into a single connected unit. It only handles layout and styling —
+each button keeps its own click handler and state. For a stateful "pick one (or
+more)" control that looks like a button group, use
+[`ToggleGroup`](./toggle-group) instead.
+
+## Examples
+
+### Joined buttons
+
+<ComponentDemo>
+  <ButtonGroup aria-label="Document actions">
+    <Button variant="secondary">Cut</Button>
+    <Button variant="secondary">Copy</Button>
+    <Button variant="secondary">Paste</Button>
+  </ButtonGroup>
+
+<template #code>
+
+```vue
+<ButtonGroup aria-label="Document actions">
+  <Button variant="secondary">Cut</Button>
+  <Button variant="secondary">Copy</Button>
+  <Button variant="secondary">Paste</Button>
+</ButtonGroup>
+```
+
+  </template>
+</ComponentDemo>
+
+### Vertical
+
+Set `orientation="vertical"` to stack the buttons. They stretch to a common
+width so the dividers line up.
+
+<ComponentDemo>
+  <ButtonGroup orientation="vertical" aria-label="Zoom">
+    <Button>Zoom in</Button>
+    <Button>Reset</Button>
+    <Button>Zoom out</Button>
+  </ButtonGroup>
+
+<template #code>
+
+```vue
+<ButtonGroup orientation="vertical" aria-label="Zoom">
+  <Button>Zoom in</Button>
+  <Button>Reset</Button>
+  <Button>Zoom out</Button>
+</ButtonGroup>
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./_api/button-group.md-->

package/src/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    ariaLabel?: string;
+    orientation?: "horizontal" | "vertical";
+  }>(),
+  { orientation: "horizontal" },
+);
+</script>
+
+<template>
+  <div
+    class="button-group"
+    role="group"
+    :data-orientation="orientation"
+    :aria-label="ariaLabel"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.button-group {
+  display: inline-flex;
+}
+
+.button-group[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+/* Children butt directly against each other; only the outer corners stay
+ * rounded and all children stretch to a common size. */
+.button-group :deep(> *) {
+  border-radius: 0;
+  align-self: stretch;
+}
+
+/* Pull each child onto its neighbour so a pair of adjacent borders collapses
+ * into a single shared 1px divider (instead of two borders + a gap). */
+.button-group[data-orientation="horizontal"] :deep(> *:not(:first-child)) {
+  margin-left: -1px;
+}
+
+.button-group[data-orientation="vertical"] :deep(> *:not(:first-child)) {
+  margin-top: -1px;
+}
+
+/* Lift the active child so its full border / focus ring shows above the
+ * overlapping neighbour. */
+.button-group :deep(> *:hover),
+.button-group :deep(> *:focus-visible),
+.button-group :deep(> *:focus) {
+  position: relative;
+  z-index: 1;
+}
+
+/* Bordered buttons share their border as the divider. The solid `Button`
+ * variant has no border, so give adjacent solid buttons a divider of their
+ * own (a contrast-derived hairline that reads on the button colour). */
+.button-group[data-orientation="horizontal"]
+  :deep(.button[data-variant="primary"] + .button[data-variant="primary"]) {
+  border-left: 1px solid
+    color-mix(in srgb, var(--color-text-on-primary) 35%, transparent);
+}
+
+.button-group[data-orientation="vertical"]
+  :deep(.button[data-variant="primary"] + .button[data-variant="primary"]) {
+  border-top: 1px solid
+    color-mix(in srgb, var(--color-text-on-primary) 35%, transparent);
+}
+
+.button-group[data-orientation="horizontal"] :deep(> *:first-child) {
+  border-top-left-radius: 0.375em;
+  border-bottom-left-radius: 0.375em;
+}
+
+.button-group[data-orientation="horizontal"] :deep(> *:last-child) {
+  border-top-right-radius: 0.375em;
+  border-bottom-right-radius: 0.375em;
+}
+
+.button-group[data-orientation="vertical"] :deep(> *:first-child) {
+  border-top-left-radius: 0.375em;
+  border-top-right-radius: 0.375em;
+}
+
+.button-group[data-orientation="vertical"] :deep(> *:last-child) {
+  border-bottom-left-radius: 0.375em;
+  border-bottom-right-radius: 0.375em;
+}
+</style>