@sit-onyx/headless 0.1.0-alpha.0 → 0.1.0-alpha.2

package/README.md

@@ -1,57 +1,21 @@
-<p>
-  <a href="https://gruppe.schwarz">
-  <div align="center">
-    <img src="../../.github/schwarz-group.svg" width="400px" />
-    </div>
-  </a>
-</p>
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
+    <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
+  </picture>
+</div>
+
+<br>
 
 # onyx Headless
 
 A composable headless library for Vue created by [Schwarz IT](https://it.schwarz).
 
-Inspired by [Melt UI](https://melt-ui.com/).
-
 > **Work in progress**: This library is currently in early / active development.
 
 <br />
 
-## Getting Started
-
-Install the npm package with your corresponding package manager:
-
-### pnpm
-
-```sh
-pnpm add @sit-onyx/headless
-```
-
-### npm
-
-```sh
-npm install @sit-onyx/headless
-```
-
-### yarn
-
-```sh
-yarn install @sit-onyx/headless
-```
-
-Composables are now ready to be used, e.g.:
-
-```vue
-<script lang="ts" setup>
-import { createCombobox } from "@sit-onyx/headless";
-
-const {
-  elements: {
-    ...
-  }
- } = createCombobox();
-</script>
-```
-
-<br />
+## Documentation
 
-## [Contributing](../../CONTRIBUTING.md)
+You can find our documentation [here](https://onyx.schwarz/development/packages/headless.html).

package/package.json

@@ -1,20 +1,26 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
   "files": [
     "src"
   ],
+  "types": "./src/index.ts",
   "exports": {
-    ".": {
-      "default": "./src/index.ts"
-    },
-    "./playwright": {
-      "default": "./src/playwright.ts"
-    }
+    ".": "./src/index.ts",
+    "./playwright": "./src/playwright.ts"
+  },
+  "homepage": "https://onyx.schwarz/development/packages/headless.html",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchwarzIT/onyx",
+    "directory": "packages/headless"
+  },
+  "bugs": {
+    "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "peerDependencies": {
     "typescript": ">= 5",

package/src/composables/comboBox/createComboBox.ts

@@ -1,6 +1,6 @@
 import { computed, ref, type Ref } from "vue";
+import { createBuilder } from "../../utils/builder";
 import { createId } from "../../utils/id";
-import { createBuilder, computeIterated } from "../../utils/builder";
 
 // TODO: https://w3c.github.io/aria/#aria-autocomplete
 // TODO: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
@@ -92,16 +92,16 @@ export const createComboBox = createBuilder(
           role: "listbox",
           id: controlsId,
         })),
-        option: computeIterated<{ key: string; label: string; disabled: boolean }>(
-          ({ key, label, disabled }) => ({
+        option: computed(() => {
+          return ({ key, label, disabled }: { key: string; label: string; disabled: boolean }) => ({
             role: "option",
             id: getOptionId(key),
             "aria-selected": activeKey.value === key,
             "aria-label": label,
             "aria-disabled": disabled,
             onClick: () => onSelect(key),
-          }),
-        ),
+          });
+        }),
         /**
          * An input that controls another element, that can dynamically pop-up to help the user set the value of the input.
          * The input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.

package/src/composables/listbox/createListbox.ts

@@ -0,0 +1,59 @@
+import { computed, unref, type MaybeRef } from "vue";
+import { createBuilder } from "../../utils/builder";
+
+export type CreateListboxOptions = {
+  /**
+   * Aria label for the listbox.
+   */
+  label: MaybeRef<string>;
+  /**
+   * Whether the listbox is multiselect.
+   */
+  multiselect?: MaybeRef<boolean | undefined>;
+  /**
+   * Hook when an option is selected.
+   */
+  onSelect?: (id: ListboxValue) => void;
+};
+
+export type ListboxValue = string | number | boolean;
+
+export const createListbox = createBuilder((options: CreateListboxOptions) => {
+  const isMultiselect = computed(() => unref(options.multiselect) ?? false);
+
+  return {
+    elements: {
+      listbox: computed(() => ({
+        role: "listbox",
+        "aria-multiselectable": isMultiselect.value,
+        "aria-label": unref(options.label),
+        tabindex: "0",
+      })),
+      group: computed(() => {
+        return (options: { label: string }) => ({
+          role: "group",
+          "aria-label": options.label,
+        });
+      }),
+      option: computed(() => {
+        return (data: {
+          label: string;
+          id: ListboxValue;
+          selected?: boolean;
+          disabled?: boolean;
+        }) => {
+          const isSelected = data.selected ?? false;
+          return {
+            role: "option",
+            "aria-label": data.label,
+            "aria-checked": isMultiselect.value ? isSelected : undefined,
+            "aria-selected": !isMultiselect.value ? isSelected : undefined,
+            "aria-disabled": data.disabled,
+            onClick: () => options.onSelect?.(data.id),
+          } as const;
+        };
+      }),
+    },
+    state: {},
+  };
+});

package/src/index.ts

@@ -1 +1,3 @@
 export * from "./composables/comboBox/createComboBox";
+export * from "./composables/listbox/createListbox";
+export { createId } from "./utils/id";

package/src/utils/builder.ts

@@ -1,4 +1,4 @@
-import { computed, type ComputedRef, type HtmlHTMLAttributes, type Ref } from "vue";
+import type { ComputedRef, HtmlHTMLAttributes, Ref } from "vue";
 
 export type IteratedHeadlessElementFunc<T extends Record<string, unknown>> = (
   opts: T,
@@ -25,19 +25,3 @@ export type HeadlessComposable<Elements extends HeadlessElements, State extends
 export const createBuilder = <P, Elements extends HeadlessElements, State extends HeadlessState>(
   builder: (props: P) => HeadlessComposable<Elements, State>,
 ) => builder;
-
-/**
- * Shorthand function for creating a typed IteratedHeadlessElementFunction
- * @example
- * ```ts
- * {
- *   option: computeIterated<{ key: string; label: string; disabled: boolean }>(
- *     ({ key, label, disabled }) => ({
- *       // Do something with the typed props
- *     }),
- * }
- * ```
- */
-export const computeIterated = <P extends Record<string, unknown>>(
-  iteratedFunc: IteratedHeadlessElementFunc<P>,
-) => computed(() => iteratedFunc);

package/src/utils/id.ts

@@ -7,4 +7,8 @@ const nextId = (() => {
   return () => globalCounter++;
 })();
 
+/**
+ * Creates a globally unique string using a counter.
+ * The given name is the prefix.
+ */
 export const createId = (name: string) => `${name}-${nextId()}`;