nuance-ui 0.1.21 → 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/components/tree/model.d.ts +2 -2
- 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
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { NuanceColor } from '@nui/types';
|
|
2
|
-
import type { AsyncData } from '#app';
|
|
2
|
+
import type { AsyncData, NuxtError } from '#app';
|
|
3
3
|
import type { FetchError } from 'ofetch';
|
|
4
4
|
export interface TreeModels {
|
|
5
5
|
active: string | null;
|
|
@@ -14,7 +14,7 @@ export interface TreeEmits {
|
|
|
14
14
|
* Required pass instance of `useFetch`/`useAsyncData` with `{ immediate: false }`
|
|
15
15
|
* Root path will be queried immediate with path `/`
|
|
16
16
|
*/
|
|
17
|
-
export type TreeLoader = (path: string) => AsyncData<TreeItem[], FetchError<any
|
|
17
|
+
export type TreeLoader = (path: string) => AsyncData<TreeItem[] | undefined, FetchError<any> | NuxtError | undefined | null>;
|
|
18
18
|
export type TreeItemType = 'file' | 'directory';
|
|
19
19
|
export interface TreeItem {
|
|
20
20
|
/** @IconifyIcon */
|
|
@@ -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 = [
|