@sit-onyx/headless 1.0.0-beta.2 → 1.0.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/composables/comboBox/SelectOnlyCombobox.vue

@@ -26,7 +26,6 @@ const onToggle = () => (isExpanded.value = !isExpanded.value);
 const onTypeAhead = () => {};
 
 const comboBox = createComboBox({
-  inputValue: selectedOption,
   autocomplete: "none",
   label: "some label",
   listLabel: "List",
@@ -51,7 +50,12 @@ defineExpose({ comboBox });
 
 <template>
   <div ref="comboboxRef">
-    <input v-bind="input" readonly @keydown.arrow-down="isExpanded = true" />
+    <input
+      v-bind="input"
+      v-model="selectedOption"
+      readonly
+      @keydown.arrow-down="isExpanded = true"
+    />
 
     <button v-bind="button">
       <template v-if="isExpanded">⬆️</template>

package/src/composables/comboBox/TestCombobox.vue

@@ -30,7 +30,6 @@ const onAutocomplete = (input: string) => (searchTerm.value = input);
 const onToggle = () => (isExpanded.value = !isExpanded.value);
 
 const comboBox = createComboBox({
-  inputValue: searchTerm,
   autocomplete: "list",
   label: "some label",
   listLabel: "List",
@@ -55,7 +54,7 @@ defineExpose({ comboBox });
 
 <template>
   <div ref="comboboxRef">
-    <input v-bind="input" @keydown.arrow-down="isExpanded = true" />
+    <input v-bind="input" v-model="searchTerm" @keydown.arrow-down="isExpanded = true" />
 
     <button v-bind="button">
       <template v-if="isExpanded">⬆️</template>

package/src/composables/comboBox/createComboBox.ts

@@ -41,10 +41,6 @@ export type CreateComboboxOptions<
    * Labels the listbox which displays the available options. E.g. the list label could be "Countries" for a combobox which is labelled "Country".
    */
   listLabel: MaybeRef<string>;
-  /**
-   * The current value of the combobox. Is updated when an option from the controlled listbox is selected or by typing into it.
-   */
-  inputValue: Ref<string | undefined>;
   /**
    * Controls the opened/visible state of the associated pop-up. When expanded the activeOption can be controlled via the keyboard.
    */
@@ -105,7 +101,6 @@ export const createComboBox = createBuilder(
     TAutoComplete extends ComboboxAutoComplete,
     TMultiple extends boolean = false,
   >({
-    inputValue,
     autocomplete: autocompleteRef,
     onAutocomplete,
     onTypeAhead,
@@ -250,7 +245,6 @@ export const createComboBox = createBuilder(
          * 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.
          */
         input: computed(() => ({
-          value: inputValue.value,
           role: "combobox",
           "aria-expanded": isExpanded.value,
           "aria-controls": controlsId,

package/src/composables/navigationMenu/createMenu.testing.ts

@@ -22,22 +22,11 @@ export const navigationTesting = async ({ nav, buttons }: NavigationMenuTestingO
    */
   await expect(nav).toHaveRole("navigation");
   await expect(nav).toHaveAttribute("aria-label");
-  /**
-   * Disclosure buttons should have aria attributes
-   */
-  for (const button of await buttons.all()) {
-    await expect(button, "button must have arial-controls attribute").toHaveAttribute(
-      "aria-controls",
-    );
-    await expect(button, "button must have aria-expanded attribute").toHaveAttribute(
-      "aria-expanded",
-    );
-  }
+
   /**
    * Focus first button
    */
-  await nav.press("Tab");
-  await expect(buttons.nth(0)).toBeFocused();
+  await buttons.first().focus();
   /**
    * Move keyboard focus among top-level buttons using arrow keys
    */

package/src/playwright.ts

@@ -1,3 +1,4 @@
 export * from "./composables/comboBox/createComboBox.testing";
 export * from "./composables/listbox/createListbox.testing";
 export * from "./composables/menuButton/createMenuButton.testing";
+export * from "./composables/navigationMenu/createMenu.testing";