nuance-ui 0.1.22 → 0.1.24

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.22",
+  "version": "0.1.24",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/roving-focus/_lib/context.d.ts

@@ -47,5 +47,5 @@ export declare const useRovingFocus: () => {
     getItems: () => HTMLElement[];
     focusElement: (element?: HTMLElement) => void;
     onItemUnmount: (element: HTMLElement | null | undefined) => void;
-};
+} | undefined;
 export {};

package/dist/runtime/components/roving-focus/_lib/context.js

@@ -1,9 +1,8 @@
-import { createStrictInjection } from "@nui/helpers";
-import { unrefElement } from "@vueuse/core";
+import { createInjectionState, unrefElement } from "@vueuse/core";
 import { nextTick, ref, watch } from "vue";
 const SELECT_ATTR = "data-roving-item";
 const injectionKey = Symbol("roving-focus");
-const [useProvide, useState] = createStrictInjection(({ list, loop, orientation, attr = SELECT_ATTR }) => {
+const [useProvide, useState] = createInjectionState(({ list, loop, orientation, attr = SELECT_ATTR }) => {
   const activeIx = ref(-1);
   const init = () => activeIx.value = 0;
   const getItems = () => Array.from(
@@ -83,8 +82,7 @@ const [useProvide, useState] = createStrictInjection(({ list, loop, orientation,
     onItemUnmount
   };
 }, {
-  injectionKey,
-  name: "RovingFocus"
+  injectionKey
 });
 export const useProvideRovingFocus = useProvide;
 export const useRovingFocus = useState;

package/dist/runtime/components/roving-focus/roving-focus-item.vue

@@ -3,14 +3,14 @@ import { unrefElement } from "@vueuse/core";
 import { computed, onBeforeUnmount, useTemplateRef } from "vue";
 import Renderless from "../renderless/renderless.vue";
 import { useRovingFocus } from "./_lib/context";
-const { focus, focusElement, orientation, attr, onItemUnmount } = useRovingFocus();
+const { focus, focusElement, orientation, attr, onItemUnmount } = useRovingFocus() ?? {};
 const isVertical = computed(() => orientation === "vertical" || orientation === "both");
 const isHorizontal = computed(() => orientation === "horizontal" || orientation === "both");
-const attrs = computed(() => ({ [attr]: "" }));
+const attrs = computed(() => attr ? { [attr]: "" } : {});
 const ref = useTemplateRef("item");
 onBeforeUnmount(() => {
   const el = unrefElement(ref);
-  onItemUnmount(el);
+  onItemUnmount?.(el);
 });
 </script>
 
@@ -19,13 +19,13 @@ onBeforeUnmount(() => {
 		v-bind='attrs'
 		ref='item'
 		:tabindex='-1'
-		@keydown.up.prevent='isVertical && focus("prev", $event.currentTarget)'
-		@keydown.down.prevent='isVertical && focus("next", $event.currentTarget)'
-		@keydown.left.prevent='isHorizontal && focus("prev", $event.currentTarget)'
-		@keydown.right.prevent='isHorizontal && focus("next", $event.currentTarget)'
-		@keydown.home.prevent='focus("first")'
-		@keydown.end.prevent='focus("last")'
-		@click.prevent='focusElement($event.currentTarget)'
+		@keydown.up.prevent='isVertical && focus?.("prev", $event.currentTarget)'
+		@keydown.down.prevent='isVertical && focus?.("next", $event.currentTarget)'
+		@keydown.left.prevent='isHorizontal && focus?.("prev", $event.currentTarget)'
+		@keydown.right.prevent='isHorizontal && focus?.("next", $event.currentTarget)'
+		@keydown.home.prevent='focus?.("first")'
+		@keydown.end.prevent='focus?.("last")'
+		@click.prevent='focusElement?.($event.currentTarget)'
 	>
 		<slot />
 	</Renderless>

package/dist/runtime/components/tree/lib/item-handlers.js

@@ -2,7 +2,7 @@ import { useRovingFocus } from "@nui/components";
 import { useTreeState } from "./context.js";
 export function useTreeItemHandlers(path, isFolder, expanded) {
   const ctx = useTreeState();
-  const { focus } = useRovingFocus();
+  const { focus } = useRovingFocus() ?? {};
   function handleClick(event) {
     if (event.shiftKey)
       ctx.toggle("select", path, "range");

package/dist/runtime/utils/tree.d.ts

@@ -56,7 +56,7 @@ export declare function flatTree<T extends string = string>(tree: TreeNode<T>[])
  *
  * @template T - The type of node values
  * @param {TreeNode<T>[]} tree - The tree to search in
- * @param {T} value - The value of the parent node
+ * @param {T} path - The path of the parent node
  * @returns {T[]} Array of all descendant values (empty if node not found or has no children)
  * @example
  * const tree = [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.22",
+	"version": "0.1.24",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",