@sit-onyx/headless 1.0.0-beta.15 → 1.0.0-beta.17

package/README.md

@@ -1,9 +1,5 @@
 <div align="center" style="text-align: center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
-    <source media="(prefers-color-scheme: light)" type="image/svg+xml" 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>
+  <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo.svg" height="96px">
 </div>
 
 <br>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@vue/compiler-dom": "3.5.13",
     "vue": "3.5.13",
-    "@sit-onyx/shared": "^0.0.1-beta.0"
+    "@sit-onyx/shared": "^1.0.0-beta.2"
   },
   "scripts": {
     "build": "vue-tsc --build --force",

package/src/composables/helpers/useOutsideClick.ts

@@ -1,13 +1,12 @@
-import type { Arrayable } from "vitest";
-import { toValue, type Ref } from "vue";
-import type { MaybeReactiveSource } from "../../utils/types";
+import type { Arrayable } from "vitest"; // For an unknown reason removing this import will break the build of "demo-app" and "playground"
+import { toValue, type MaybeRefOrGetter, type Ref } from "vue";
 import { useGlobalEventListener } from "./useGlobalListener";
 
 export type UseOutsideClickOptions = {
   /**
    * HTML element of the component where clicks should be ignored
    */
-  inside: MaybeReactiveSource<Arrayable<HTMLElement | undefined>>;
+  inside: MaybeRefOrGetter<Arrayable<HTMLElement | undefined>>;
   /**
    * Callback when an outside click occurred.
    */

package/src/composables/menuButton/createMenuButton.ts

@@ -107,11 +107,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
   };
 
   const triggerEvents = () => {
-    if (options.trigger.value === "click") {
-      return {
-        onClick: () => setExpanded(true),
-      };
-    } else {
+    if (options.trigger.value === "hover") {
       return {
         onMouseenter: () => setExpanded(true),
         onMouseleave: () => setExpanded(false, true),
@@ -142,7 +138,9 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
             "aria-controls": menuId,
             "aria-expanded": options.isExpanded.value,
             "aria-haspopup": true,
-            onFocus: () => setExpanded(true),
+            onFocus: () => setExpanded(true, true),
+            onClick: () =>
+              options.trigger.value == "click" ? setExpanded(!options.isExpanded.value) : undefined,
             id: buttonId,
           }) as const,
       ),

package/src/utils/types.ts

@@ -1,5 +1,3 @@
-import type { ComputedRef, MaybeRefOrGetter } from "vue";
-
 /**
  * Adds the entry with the key `Key` and the value of type `TValue` to a record when it is defined.
  * Then the entry is either undefined or exists without being optional.
@@ -25,6 +23,6 @@ export type IsArray<TValue, TMultiple extends boolean = false> = TMultiple exten
   : TValue;
 
 /**
- * Type for any kind of ref source. Preferably used in combination with vue's `toValue` method
+ * A type that can be wrapped in an array.
  */
-export type MaybeReactiveSource<T> = MaybeRefOrGetter<T> | ComputedRef<T>;
+export type Arrayable<T> = T | Array<T>;