@invopop/popui 0.0.25 → 0.0.26
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/BaseTable.svelte +71 -81
- package/dist/BaseTable.svelte.d.ts +1 -1
- package/dist/GlobalSearch.svelte +2 -4
- package/dist/helpers.d.ts +1 -0
- package/dist/helpers.js +9 -0
- package/package.json +1 -1
package/dist/BaseTable.svelte
CHANGED
|
@@ -5,6 +5,7 @@ import BaseCounter from "./BaseCounter.svelte";
|
|
|
5
5
|
import BaseTableRow from "./BaseTableRow.svelte";
|
|
6
6
|
import BaseTableCell from "./BaseTableCell.svelte";
|
|
7
7
|
import InputCheckbox from "./InputCheckbox.svelte";
|
|
8
|
+
import { isInputFocused } from "./helpers.js";
|
|
8
9
|
const dispatch = createEventDispatcher();
|
|
9
10
|
const callback = (entry) => {
|
|
10
11
|
if (entry.intersectionRatio && entry.isIntersecting) {
|
|
@@ -97,95 +98,84 @@ function selectRange(to) {
|
|
|
97
98
|
const itemsToSelect = flattedData.slice(fromIndex, toIndex + 1);
|
|
98
99
|
selectedRows = [.../* @__PURE__ */ new Set([...selectedRows, ...itemsToSelect])];
|
|
99
100
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
101
|
+
function handleKeydown(event) {
|
|
102
|
+
if (isInputFocused()) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
selectionMode = "keyboard";
|
|
106
|
+
event.preventDefault();
|
|
107
|
+
if (event.key === "Escape" || event.key === "Esc") {
|
|
108
|
+
selectedRows = [];
|
|
109
|
+
lastSelected = {};
|
|
110
|
+
}
|
|
111
|
+
if ((event.code === "Space" || event.key === " ") && lastSelectedIndex >= 0) {
|
|
112
|
+
toggleRow(lastSelected);
|
|
113
|
+
}
|
|
114
|
+
metaKeyPressed = event.metaKey;
|
|
115
|
+
shiftKeyPressed = event.shiftKey;
|
|
116
|
+
if (event.key === "Enter") {
|
|
117
|
+
if (lastSelectedIndex >= 0) {
|
|
118
|
+
dispatch("rowClick", lastSelected);
|
|
114
119
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
if (event.key === "Shift") {
|
|
123
|
+
selectWithArrowPosition = lastSelectedIndex;
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
if (event.key === "ArrowUp") {
|
|
127
|
+
const toIndex = lastSelectedIndex - 1;
|
|
128
|
+
const to = flattedData[toIndex];
|
|
129
|
+
if (!to)
|
|
130
|
+
return;
|
|
131
|
+
if (!shiftKeyPressed) {
|
|
132
|
+
lastSelected = to;
|
|
133
|
+
return;
|
|
118
134
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
shiftKeyPressed = event.shiftKey
|
|
122
|
-
|
|
123
|
-
if (event.key === 'Enter') {
|
|
124
|
-
if (lastSelectedIndex >= 0) {
|
|
125
|
-
dispatch('rowClick', lastSelected)
|
|
126
|
-
}
|
|
127
|
-
return
|
|
135
|
+
if (!rowIsSelected(lastSelected)) {
|
|
136
|
+
selectRow(lastSelected);
|
|
128
137
|
}
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
138
|
+
if (toIndex < selectWithArrowPosition) {
|
|
139
|
+
selectRow(to);
|
|
140
|
+
} else {
|
|
141
|
+
unselectRow(lastSelected);
|
|
133
142
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
if (!shiftKeyPressed) {
|
|
142
|
-
lastSelected = to
|
|
143
|
-
return
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
if (!rowIsSelected(lastSelected)) {
|
|
147
|
-
selectRow(lastSelected)
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
if (toIndex < selectWithArrowPosition) {
|
|
151
|
-
selectRow(to)
|
|
152
|
-
} else {
|
|
153
|
-
unselectRow(lastSelected)
|
|
143
|
+
lastSelected = to;
|
|
144
|
+
}
|
|
145
|
+
if (event.key === "ArrowDown") {
|
|
146
|
+
if (lastSelectedIndex < 0) {
|
|
147
|
+
if (shiftKeyPressed) {
|
|
148
|
+
selectRow(flattedData[0]);
|
|
154
149
|
}
|
|
155
|
-
lastSelected =
|
|
150
|
+
lastSelected = flattedData[0];
|
|
151
|
+
return;
|
|
156
152
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
const toIndex = lastSelectedIndex + 1
|
|
168
|
-
const to = flattedData[toIndex]
|
|
169
|
-
|
|
170
|
-
if (!to) return
|
|
171
|
-
|
|
172
|
-
if (!shiftKeyPressed) {
|
|
173
|
-
lastSelected = to
|
|
174
|
-
return
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
if (!rowIsSelected(lastSelected)) {
|
|
178
|
-
selectRow(lastSelected)
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
if (toIndex > selectWithArrowPosition) {
|
|
182
|
-
selectRow(to)
|
|
183
|
-
} else {
|
|
184
|
-
unselectRow(lastSelected)
|
|
185
|
-
}
|
|
186
|
-
lastSelected = to
|
|
153
|
+
const toIndex = lastSelectedIndex + 1;
|
|
154
|
+
const to = flattedData[toIndex];
|
|
155
|
+
if (!to)
|
|
156
|
+
return;
|
|
157
|
+
if (!shiftKeyPressed) {
|
|
158
|
+
lastSelected = to;
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
if (!rowIsSelected(lastSelected)) {
|
|
162
|
+
selectRow(lastSelected);
|
|
187
163
|
}
|
|
164
|
+
if (toIndex > selectWithArrowPosition) {
|
|
165
|
+
selectRow(to);
|
|
166
|
+
} else {
|
|
167
|
+
unselectRow(lastSelected);
|
|
168
|
+
}
|
|
169
|
+
lastSelected = to;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
</script>
|
|
173
|
+
|
|
174
|
+
<svelte:window
|
|
175
|
+
on:mousemove={() => {
|
|
176
|
+
selectionMode = 'mouse'
|
|
188
177
|
}}
|
|
178
|
+
on:keydown={handleKeydown}
|
|
189
179
|
on:keyup={(event) => {
|
|
190
180
|
metaKeyPressed = false
|
|
191
181
|
shiftKeyPressed = false
|
|
@@ -20,8 +20,8 @@ declare const __propDef: {
|
|
|
20
20
|
orderBy: CustomEvent<any>;
|
|
21
21
|
action: CustomEvent<any>;
|
|
22
22
|
copied: CustomEvent<any>;
|
|
23
|
-
rowClick: CustomEvent<any>;
|
|
24
23
|
rowNewTabClick: CustomEvent<any>;
|
|
24
|
+
rowClick: CustomEvent<any>;
|
|
25
25
|
rowRightClick: CustomEvent<any>;
|
|
26
26
|
tableEndReached: CustomEvent<any>;
|
|
27
27
|
} & {
|
package/dist/GlobalSearch.svelte
CHANGED
|
@@ -4,6 +4,7 @@ import { createEventDispatcher, onDestroy, onMount } from "svelte";
|
|
|
4
4
|
import clsx from "clsx";
|
|
5
5
|
import ShortcutWrapper from "./ShortcutWrapper.svelte";
|
|
6
6
|
import { GLOBAL_SEARCH_KEY } from "./constants.js";
|
|
7
|
+
import { isInputFocused } from "./helpers.js";
|
|
7
8
|
const dispatch = createEventDispatcher();
|
|
8
9
|
export let collapsed = false;
|
|
9
10
|
$:
|
|
@@ -14,10 +15,7 @@ function onKeyDown(event) {
|
|
|
14
15
|
if (event.key !== GLOBAL_SEARCH_KEY) {
|
|
15
16
|
return;
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
-
const isInputText = activeElement?.tagName === "INPUT" && ["text", "search"].includes(activeElement.type);
|
|
19
|
-
const isTextarea = activeElement?.tagName === "TEXTAREA";
|
|
20
|
-
if (isInputText || isTextarea) {
|
|
18
|
+
if (isInputFocused()) {
|
|
21
19
|
return;
|
|
22
20
|
}
|
|
23
21
|
open();
|
package/dist/helpers.d.ts
CHANGED
|
@@ -6,3 +6,4 @@ export declare function getCountryName(code: string): string | undefined;
|
|
|
6
6
|
export declare function getStatusType(status: string): FeedItemStatus;
|
|
7
7
|
export declare function getScrollableContainer(element: HTMLElement): HTMLElement | undefined;
|
|
8
8
|
export declare function scrollIntoTableView(element: HTMLElement): void;
|
|
9
|
+
export declare function isInputFocused(): boolean;
|
package/dist/helpers.js
CHANGED
|
@@ -73,3 +73,12 @@ export function scrollIntoTableView(element) {
|
|
|
73
73
|
});
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
|
+
export function isInputFocused() {
|
|
77
|
+
const activeElement = document.activeElement;
|
|
78
|
+
if (!activeElement)
|
|
79
|
+
return false;
|
|
80
|
+
const isInputText = activeElement.tagName === 'INPUT' &&
|
|
81
|
+
['text', 'search', 'email', 'password', 'url'].includes(activeElement.type);
|
|
82
|
+
const isTextArea = activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable;
|
|
83
|
+
return isInputText || isTextArea;
|
|
84
|
+
}
|