nuance-ui 0.1.22 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/runtime/components/roving-focus/_lib/context.d.ts +1 -1
- package/dist/runtime/components/roving-focus/_lib/context.js +3 -5
- package/dist/runtime/components/roving-focus/roving-focus-item.vue +10 -10
- package/dist/runtime/components/tree/lib/item-handlers.d.ts +1 -1
- package/dist/runtime/utils/tree.d.ts +1 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { unrefElement } from "@vueuse/core";
|
|
1
|
+
import { createInjectionState, unrefElement } from "@vueuse/core";
|
|
3
2
|
import { nextTick, ref, watch } from "vue";
|
|
4
3
|
const SELECT_ATTR = "data-roving-item";
|
|
5
4
|
const injectionKey = Symbol("roving-focus");
|
|
6
|
-
const [useProvide, useState] =
|
|
5
|
+
const [useProvide, useState] = createInjectionState(({ list, loop, orientation, attr = SELECT_ATTR }) => {
|
|
7
6
|
const activeIx = ref(-1);
|
|
8
7
|
const init = () => activeIx.value = 0;
|
|
9
8
|
const getItems = () => Array.from(
|
|
@@ -83,8 +82,7 @@ const [useProvide, useState] = createStrictInjection(({ list, loop, orientation,
|
|
|
83
82
|
onItemUnmount
|
|
84
83
|
};
|
|
85
84
|
}, {
|
|
86
|
-
injectionKey
|
|
87
|
-
name: "RovingFocus"
|
|
85
|
+
injectionKey
|
|
88
86
|
});
|
|
89
87
|
export const useProvideRovingFocus = useProvide;
|
|
90
88
|
export const useRovingFocus = useState;
|
|
@@ -3,14 +3,14 @@ import { unrefElement } from "@vueuse/core";
|
|
|
3
3
|
import { computed, onBeforeUnmount, useTemplateRef } from "vue";
|
|
4
4
|
import Renderless from "../renderless/renderless.vue";
|
|
5
5
|
import { useRovingFocus } from "./_lib/context";
|
|
6
|
-
const { focus, focusElement, orientation, attr, onItemUnmount } = useRovingFocus();
|
|
6
|
+
const { focus, focusElement, orientation, attr, onItemUnmount } = useRovingFocus() ?? {};
|
|
7
7
|
const isVertical = computed(() => orientation === "vertical" || orientation === "both");
|
|
8
8
|
const isHorizontal = computed(() => orientation === "horizontal" || orientation === "both");
|
|
9
|
-
const attrs = computed(() =>
|
|
9
|
+
const attrs = computed(() => attr ? { [attr]: "" } : {});
|
|
10
10
|
const ref = useTemplateRef("item");
|
|
11
11
|
onBeforeUnmount(() => {
|
|
12
12
|
const el = unrefElement(ref);
|
|
13
|
-
onItemUnmount(el);
|
|
13
|
+
onItemUnmount?.(el);
|
|
14
14
|
});
|
|
15
15
|
</script>
|
|
16
16
|
|
|
@@ -19,13 +19,13 @@ onBeforeUnmount(() => {
|
|
|
19
19
|
v-bind='attrs'
|
|
20
20
|
ref='item'
|
|
21
21
|
:tabindex='-1'
|
|
22
|
-
@keydown.up.prevent='isVertical && focus("prev", $event.currentTarget)'
|
|
23
|
-
@keydown.down.prevent='isVertical && focus("next", $event.currentTarget)'
|
|
24
|
-
@keydown.left.prevent='isHorizontal && focus("prev", $event.currentTarget)'
|
|
25
|
-
@keydown.right.prevent='isHorizontal && focus("next", $event.currentTarget)'
|
|
26
|
-
@keydown.home.prevent='focus("first")'
|
|
27
|
-
@keydown.end.prevent='focus("last")'
|
|
28
|
-
@click.prevent='focusElement($event.currentTarget)'
|
|
22
|
+
@keydown.up.prevent='isVertical && focus?.("prev", $event.currentTarget)'
|
|
23
|
+
@keydown.down.prevent='isVertical && focus?.("next", $event.currentTarget)'
|
|
24
|
+
@keydown.left.prevent='isHorizontal && focus?.("prev", $event.currentTarget)'
|
|
25
|
+
@keydown.right.prevent='isHorizontal && focus?.("next", $event.currentTarget)'
|
|
26
|
+
@keydown.home.prevent='focus?.("first")'
|
|
27
|
+
@keydown.end.prevent='focus?.("last")'
|
|
28
|
+
@click.prevent='focusElement?.($event.currentTarget)'
|
|
29
29
|
>
|
|
30
30
|
<slot />
|
|
31
31
|
</Renderless>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Ref } from 'vue';
|
|
2
2
|
export declare function useTreeItemHandlers(path: string, isFolder: Ref<boolean>, expanded: Ref<boolean>): {
|
|
3
3
|
handleClick: (event: MouseEvent) => void;
|
|
4
|
-
handleKeyDown: (event: KeyboardEvent) =>
|
|
4
|
+
handleKeyDown: (event: KeyboardEvent) => any;
|
|
5
5
|
};
|
|
@@ -56,7 +56,7 @@ export declare function flatTree<T extends string = string>(tree: TreeNode<T>[])
|
|
|
56
56
|
*
|
|
57
57
|
* @template T - The type of node values
|
|
58
58
|
* @param {TreeNode<T>[]} tree - The tree to search in
|
|
59
|
-
* @param {T}
|
|
59
|
+
* @param {T} path - The path of the parent node
|
|
60
60
|
* @returns {T[]} Array of all descendant values (empty if node not found or has no children)
|
|
61
61
|
* @example
|
|
62
62
|
* const tree = [
|