fuma 2.0.39 → 2.0.41
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.
|
@@ -8,7 +8,7 @@ type Params = {
|
|
|
8
8
|
keyDownEvent?: KeyboardEvent | undefined;
|
|
9
9
|
keyDownPreventDefault?: boolean;
|
|
10
10
|
};
|
|
11
|
-
export declare function selector(node: HTMLElement, { trigger, focusIndex, listQuerySelector, itemsQuerySelector, onSelect, onFocus, keyDownEvent, keyDownPreventDefault
|
|
11
|
+
export declare function selector(node: HTMLElement, { trigger, focusIndex, listQuerySelector, itemsQuerySelector, onSelect, onFocus, keyDownEvent, keyDownPreventDefault }: Params): {
|
|
12
12
|
update(props: Partial<Params>): void;
|
|
13
13
|
destroy(): void;
|
|
14
14
|
};
|
package/dist/action/selector.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
export function selector(node, { trigger, focusIndex = -1, listQuerySelector = 'ul', itemsQuerySelector = 'li', onSelect = () => { }, onFocus = () => { }, keyDownEvent = undefined, keyDownPreventDefault = true
|
|
1
|
+
export function selector(node, { trigger, focusIndex = -1, listQuerySelector = 'ul', itemsQuerySelector = 'li', onSelect = () => { }, onFocus = () => { }, keyDownEvent = undefined, keyDownPreventDefault = true }) {
|
|
2
2
|
trigger?.addEventListener('keydown', handleKeydown);
|
|
3
3
|
function handleKeydown(event) {
|
|
4
4
|
const items = node.querySelectorAll(itemsQuerySelector);
|
|
5
|
+
console.log('DEBUG', { items });
|
|
5
6
|
if (event.key === 'Enter') {
|
|
6
7
|
if (keyDownPreventDefault)
|
|
7
8
|
event.preventDefault();
|
|
@@ -31,11 +32,13 @@ export function selector(node, { trigger, focusIndex = -1, listQuerySelector = '
|
|
|
31
32
|
}
|
|
32
33
|
function scrollToSelected(items) {
|
|
33
34
|
const list = node.tagName === 'UL' ? node : node.querySelector(listQuerySelector);
|
|
35
|
+
console.log('DEBUG', { list });
|
|
34
36
|
if (!(list instanceof HTMLElement)) {
|
|
35
37
|
console.error('wrapper element not found');
|
|
36
38
|
return;
|
|
37
39
|
}
|
|
38
40
|
const item = items[focusIndex];
|
|
41
|
+
console.log('DEBUG', { item });
|
|
39
42
|
if (!item)
|
|
40
43
|
return;
|
|
41
44
|
const top = item.offsetTop - 4;
|
|
@@ -66,6 +69,6 @@ export function selector(node, { trigger, focusIndex = -1, listQuerySelector = '
|
|
|
66
69
|
},
|
|
67
70
|
destroy() {
|
|
68
71
|
trigger?.removeEventListener('keydown', handleKeydown);
|
|
69
|
-
}
|
|
72
|
+
}
|
|
70
73
|
};
|
|
71
74
|
}
|
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
|
|
50
50
|
let isLoading = false
|
|
51
51
|
let isError = false
|
|
52
|
+
let isFocus = false
|
|
52
53
|
let focusIndex = 0
|
|
53
54
|
let searchValue = ''
|
|
54
55
|
|
|
@@ -91,9 +92,11 @@
|
|
|
91
92
|
const searchItemsDebounce = debounce(searchItems, 150)
|
|
92
93
|
|
|
93
94
|
function handleFocus() {
|
|
95
|
+
isFocus = true
|
|
94
96
|
searchItems()
|
|
95
97
|
}
|
|
96
98
|
async function handleBlur() {
|
|
99
|
+
isFocus = false
|
|
97
100
|
searchValue = ''
|
|
98
101
|
}
|
|
99
102
|
</script>
|
|
@@ -119,7 +122,7 @@
|
|
|
119
122
|
{...input}
|
|
120
123
|
/>
|
|
121
124
|
<RelationAfter {isLoading} {createUrl} {createTitle} {createIcon} />
|
|
122
|
-
{#if shortcutKey}
|
|
125
|
+
{#if shortcutKey && !isFocus}
|
|
123
126
|
<kbd class="kbd kbd-xs text-base-content/50 shrink-0">
|
|
124
127
|
{shortcutKey}
|
|
125
128
|
</kbd>
|
|
@@ -137,11 +140,7 @@
|
|
|
137
140
|
on:click|stopPropagation={() => clear()}
|
|
138
141
|
class="input h-auto min-h-10 w-full grow items-start pt-2 pr-2"
|
|
139
142
|
>
|
|
140
|
-
<svelte:component this={Icon} class="h-5 opacity-70" />
|
|
141
143
|
{@render slotItem(item)}
|
|
142
|
-
{#if shortcutKey}
|
|
143
|
-
<kbd class="kbd kbd-xs text-base-content/50">{shortcutKey}</kbd>
|
|
144
|
-
{/if}
|
|
145
144
|
</button>
|
|
146
145
|
{/if}
|
|
147
146
|
<input
|