@sit-onyx/headless 1.0.0-beta.20 → 1.0.0-beta.21

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.21",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "files": [
     "src"
   ],
@@ -29,7 +32,7 @@
   "devDependencies": {
     "@vue/compiler-dom": "3.5.16",
     "vue": "3.5.16",
-    "@sit-onyx/shared": "^1.0.0-beta.3"
+    "@sit-onyx/shared": "^1.0.0-beta.4"
   },
   "scripts": {
     "build": "vue-tsc --build --force",

package/src/composables/comboBox/SelectOnlyCombobox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from "vue";
-import { createComboBox } from "./createComboBox";
+import { createComboBox } from "./createComboBox.js";
 
 const options = ["a", "b", "c", "d"];
 const isExpanded = ref(false);

package/src/composables/comboBox/TestCombobox.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { comboboxSelectOnlyTesting, comboboxTesting } from "./createComboBox.testing";
+import { comboboxSelectOnlyTesting, comboboxTesting } from "./createComboBox.testing.js";
 import SelectOnlyCombobox from "./SelectOnlyCombobox.vue";
 import TestCombobox from "./TestCombobox.vue";
 

package/src/composables/comboBox/TestCombobox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from "vue";
-import { createComboBox } from "./createComboBox";
+import { createComboBox } from "./createComboBox.js";
 
 const options = ["a", "b", "c", "d"];
 const isExpanded = ref(false);

package/src/composables/comboBox/createComboBox.ts

@@ -1,14 +1,14 @@
 import { computed, unref, useId, type MaybeRef, type Ref } from "vue";
-import { createBuilder } from "../../utils/builder";
-import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard";
-import type { Nullable } from "../../utils/types";
-import { useOutsideClick } from "../helpers/useOutsideClick";
-import { useTypeAhead } from "../helpers/useTypeAhead";
+import { createBuilder } from "../../utils/builder.js";
+import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard.js";
+import type { Nullable } from "../../utils/types.js";
+import { useOutsideClick } from "../helpers/useOutsideClick.js";
+import { useTypeAhead } from "../helpers/useTypeAhead.js";
 import {
   createListbox,
   type CreateListboxOptions,
   type ListboxValue,
-} from "../listbox/createListbox";
+} from "../listbox/createListbox.js";
 
 /** See https://w3c.github.io/aria/#aria-autocomplete */
 export type ComboboxAutoComplete = "none" | "list" | "both";

package/src/composables/helpers/useDismissible.ts

@@ -1,5 +1,5 @@
 import { computed, type Ref } from "vue";
-import { useGlobalEventListener } from "./useGlobalListener";
+import { useGlobalEventListener } from "./useGlobalListener.js";
 
 type UseDismissibleOptions = { isExpanded: Ref<boolean> };
 

package/src/composables/helpers/useGlobalListener.spec.ts

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ref, type Ref } from "vue";
-import { mockVueLifecycle } from "../../utils/vitest";
-import { useGlobalEventListener } from "./useGlobalListener";
+import { mockVueLifecycle } from "../../utils/vitest.js";
+import { useGlobalEventListener } from "./useGlobalListener.js";
 
 let unmount: () => Promise<void> | undefined;
 

package/src/composables/helpers/useOutsideClick.spec.ts

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ref } from "vue";
-import { mockVueLifecycle } from "../../utils/vitest";
-import { useOutsideClick } from "./useOutsideClick";
+import { mockVueLifecycle } from "../../utils/vitest.js";
+import { useOutsideClick } from "./useOutsideClick.js";
 
 describe("useOutsideClick", () => {
   beforeEach(() => {

package/src/composables/helpers/useOutsideClick.ts

@@ -1,7 +1,7 @@
 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 type { Nullable } from "../../utils/types";
-import { useGlobalEventListener } from "./useGlobalListener";
+import type { Nullable } from "../../utils/types.js";
+import { useGlobalEventListener } from "./useGlobalListener.js";
 
 export type UseOutsideClickOptions<TCheckOnTab extends boolean | undefined = undefined> = {
   /**

package/src/composables/helpers/useTypeAhead.spec.ts

@@ -1,5 +1,5 @@
 import { beforeAll, expect, test, vi } from "vitest";
-import { useTypeAhead } from "./useTypeAhead";
+import { useTypeAhead } from "./useTypeAhead.js";
 
 beforeAll(() => {
   vi.useFakeTimers();

package/src/composables/helpers/useTypeAhead.ts

@@ -1,5 +1,5 @@
-import { isPrintableCharacter } from "../../utils/keyboard";
-import { debounce } from "../../utils/timer";
+import { isPrintableCharacter } from "../../utils/keyboard.js";
+import { debounce } from "../../utils/timer.js";
 
 /**
  * Enhances typeAhead to combine multiple inputs in quick succession and filter out non-printable characters.

package/src/composables/listbox/TestListbox.ct.tsx

@@ -1,6 +1,6 @@
 import { test } from "@playwright/experimental-ct-vue";
 import TestListbox from "./TestListbox.vue";
-import { listboxTesting } from "./createListbox.testing";
+import { listboxTesting } from "./createListbox.testing.js";
 
 test("listbox", async ({ mount, page }) => {
   await mount(<TestListbox />);

package/src/composables/listbox/TestListbox.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { createListbox } from "./createListbox";
+import { createListbox } from "./createListbox.js";
 
 type Options = (typeof options)[number];
 

package/src/composables/listbox/createListbox.ts

@@ -1,7 +1,7 @@
 import { computed, nextTick, ref, unref, useId, watchEffect, type MaybeRef, type Ref } from "vue";
-import { createBuilder, type VBindAttributes } from "../../utils/builder";
-import type { Nullable } from "../../utils/types";
-import { useTypeAhead } from "../helpers/useTypeAhead";
+import { createBuilder, type VBindAttributes } from "../../utils/builder.js";
+import type { Nullable } from "../../utils/types.js";
+import { useTypeAhead } from "../helpers/useTypeAhead.js";
 
 export type ListboxValue = string | number | boolean;
 

package/src/composables/menuButton/TestMenuButton.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { menuButtonTesting } from "./createMenuButton.testing";
+import { menuButtonTesting } from "./createMenuButton.testing.js";
 import TestMenuButton from "./TestMenuButton.vue";
 
 test("menuButton", async ({ mount, page }) => {

package/src/composables/menuButton/TestMenuButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { createMenuButton } from "./createMenuButton";
+import { createMenuButton } from "./createMenuButton.js";
 
 const items = Array.from({ length: 10 }, (_, index) => {
   const id = index + 1;

package/src/composables/menuButton/createMenuButton.ts

@@ -1,8 +1,8 @@
 import { computed, toValue, useId, watch, type MaybeRef, type Ref } from "vue";
-import { createBuilder, createElRef } from "../../utils/builder";
-import { debounce } from "../../utils/timer";
-import { useGlobalEventListener } from "../helpers/useGlobalListener";
-import { useOutsideClick } from "../helpers/useOutsideClick";
+import { createBuilder, createElRef } from "../../utils/builder.js";
+import { debounce } from "../../utils/timer.js";
+import { useGlobalEventListener } from "../helpers/useGlobalListener.js";
+import { useOutsideClick } from "../helpers/useOutsideClick.js";
 
 type CreateMenuButtonOptions = {
   isExpanded: Readonly<Ref<boolean>>;

package/src/composables/navigationMenu/TestMenu.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { navigationTesting } from "./createMenu.testing";
+import { navigationTesting } from "./createMenu.testing.js";
 import TestMenu from "./TestMenu.vue";
 
 test("navigationMenu", async ({ mount, page }) => {

package/src/composables/navigationMenu/TestMenu.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import TestMenuButton from "../menuButton/TestMenuButton.vue";
-import { createNavigationMenu } from "./createMenu";
+import { createNavigationMenu } from "./createMenu.js";
 
 const {
   elements: { nav },

package/src/composables/navigationMenu/createMenu.ts

@@ -1,6 +1,6 @@
 import { unref, useId, type MaybeRef } from "vue";
-import { createBuilder } from "../../utils/builder";
-import { MathUtils } from "../../utils/math";
+import { createBuilder } from "../../utils/builder.js";
+import { MathUtils } from "../../utils/math.js";
 
 type CreateNavigationMenu = {
   /**

package/src/composables/tabs/TestTabs.ct.tsx

@@ -1,6 +1,6 @@
 import { test } from "@playwright/experimental-ct-vue";
 import TestTabs from "./TestTabs.vue";
-import { tabsTesting } from "./createTabs.testing";
+import { tabsTesting } from "./createTabs.testing.js";
 
 test("tabs", async ({ mount, page }) => {
   const component = await mount(<TestTabs />);

package/src/composables/tabs/TestTabs.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { createTabs } from "./createTabs";
+import { createTabs } from "./createTabs.js";
 
 const selectedTab = ref("tab-1");
 

package/src/composables/tabs/createTabs.ts

@@ -1,5 +1,5 @@
 import { computed, unref, useId, type MaybeRef, type Ref } from "vue";
-import { createBuilder } from "../../utils/builder";
+import { createBuilder } from "../../utils/builder.js";
 
 type CreateTabsOptions<TKey extends PropertyKey = PropertyKey> = {
   /**

package/src/composables/tooltip/createToggletip.ts

@@ -1,6 +1,6 @@
 import { computed, toRef, toValue, useId, type MaybeRefOrGetter, type Ref } from "vue";
-import { createBuilder } from "../../utils/builder";
-import { useDismissible } from "../helpers/useDismissible";
+import { createBuilder } from "../../utils/builder.js";
+import { useDismissible } from "../helpers/useDismissible.js";
 
 export type CreateToggletipOptions = {
   toggleLabel: MaybeRefOrGetter<string>;

package/src/composables/tooltip/createTooltip.ts

@@ -1,6 +1,6 @@
 import { computed, toRef, toValue, useId, type MaybeRefOrGetter, type Ref } from "vue";
-import { createBuilder } from "../../utils/builder";
-import { useDismissible } from "../helpers/useDismissible";
+import { createBuilder } from "../../utils/builder.js";
+import { useDismissible } from "../helpers/useDismissible.js";
 
 export type CreateTooltipOptions = {
   /**

package/src/index.ts

@@ -1,11 +1,11 @@
-export * from "./composables/comboBox/createComboBox";
-export * from "./composables/helpers/useGlobalListener";
-export * from "./composables/listbox/createListbox";
-export * from "./composables/menuButton/createMenuButton";
-export * from "./composables/navigationMenu/createMenu";
-export * from "./composables/tabs/createTabs";
-export * from "./composables/tooltip/createToggletip";
-export * from "./composables/tooltip/createTooltip";
-export * from "./utils/builder";
-export { isPrintableCharacter, wasKeyPressed } from "./utils/keyboard";
-export { debounce } from "./utils/timer";
+export * from "./composables/comboBox/createComboBox.js";
+export * from "./composables/helpers/useGlobalListener.js";
+export * from "./composables/listbox/createListbox.js";
+export * from "./composables/menuButton/createMenuButton.js";
+export * from "./composables/navigationMenu/createMenu.js";
+export * from "./composables/tabs/createTabs.js";
+export * from "./composables/tooltip/createToggletip.js";
+export * from "./composables/tooltip/createTooltip.js";
+export * from "./utils/builder.js";
+export { isPrintableCharacter, wasKeyPressed } from "./utils/keyboard.js";
+export { debounce } from "./utils/timer.js";

package/src/playwright.ts

@@ -1,5 +1,5 @@
-export * from "./composables/comboBox/createComboBox.testing";
-export * from "./composables/listbox/createListbox.testing";
-export * from "./composables/menuButton/createMenuButton.testing";
-export * from "./composables/navigationMenu/createMenu.testing";
-export * from "./composables/tabs/createTabs.testing";
+export * from "./composables/comboBox/createComboBox.testing.js";
+export * from "./composables/listbox/createListbox.testing.js";
+export * from "./composables/menuButton/createMenuButton.testing.js";
+export * from "./composables/navigationMenu/createMenu.testing.js";
+export * from "./composables/tabs/createTabs.testing.js";

package/src/utils/builder.ts

@@ -8,7 +8,7 @@ import {
   type WritableComputedOptions,
   type WritableComputedRef,
 } from "vue";
-import type { IfDefined } from "./types";
+import type { IfDefined } from "./types.js";
 
 /**
  * Properties as they can be used by `v-bind` on an HTML element.

package/src/utils/keyboard.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { isPrintableCharacter, wasKeyPressed } from "./keyboard";
+import { isPrintableCharacter, wasKeyPressed } from "./keyboard.js";
 
 test.each([
   // ARRANGE

package/src/utils/keyboard.ts

@@ -1,4 +1,4 @@
-import { isSubsetMatching } from "./object";
+import { isSubsetMatching } from "./object.js";
 
 export type PressedKey =
   | string

package/src/utils/math.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { MathUtils } from "./math";
+import { MathUtils } from "./math.js";
 
 describe("MathUtils.clamp", () => {
   test.each([

package/src/utils/object.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { isSubsetMatching } from "./object";
+import { isSubsetMatching } from "./object.js";
 
 const referenceObj = { a: 42, b: "foo", c: null, d: true };