@bysages/svelte 0.2.1 → 0.2.2
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/TreeViewRoot-CWHR4O1k.mjs +946 -0
- package/dist/index.d.mts +128 -160
- package/dist/index.mjs +334 -114
- package/package.json +3 -2
- package/dist/use-mentions-DeF_38di.mjs +0 -93
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bysages/svelte",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "By Sages Elements components for Svelte — styled by the paper-and-ink design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"accessible",
|
|
@@ -46,7 +46,8 @@
|
|
|
46
46
|
"@tanstack/svelte-virtual": "3.13.39",
|
|
47
47
|
"@zag-js/cascade-select": "1.44.0",
|
|
48
48
|
"@zag-js/svelte": "1.44.0",
|
|
49
|
-
"@bysages/
|
|
49
|
+
"@bysages/icons": "0.2.2",
|
|
50
|
+
"@bysages/core": "0.2.2"
|
|
50
51
|
},
|
|
51
52
|
"devDependencies": {
|
|
52
53
|
"@sveltejs/vite-plugin-svelte": "7.3.0",
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import "svelte/internal/disclose-version";
|
|
2
|
-
import * as $ from "svelte/internal/client";
|
|
3
|
-
import { tick } from "svelte";
|
|
4
|
-
//#region src/components/mentions/use-mentions.svelte
|
|
5
|
-
function useMentions(options, textarea, handlers) {
|
|
6
|
-
const state = $.proxy({
|
|
7
|
-
open: false,
|
|
8
|
-
matches: [],
|
|
9
|
-
active: 0
|
|
10
|
-
});
|
|
11
|
-
let anchorIndex = 0;
|
|
12
|
-
let caretIndex = 0;
|
|
13
|
-
function closePopup() {
|
|
14
|
-
state.open = false;
|
|
15
|
-
state.matches = [];
|
|
16
|
-
}
|
|
17
|
-
function detect() {
|
|
18
|
-
const text = handlers.getText();
|
|
19
|
-
const caret = textarea()?.selectionStart ?? text.length;
|
|
20
|
-
caretIndex = caret;
|
|
21
|
-
const head = text.slice(0, caret);
|
|
22
|
-
const char = options().trigger ?? "@";
|
|
23
|
-
const anchor = head.lastIndexOf(char);
|
|
24
|
-
const token = anchor === -1 ? "" : head.slice(anchor + char.length);
|
|
25
|
-
if (anchor === -1 || /\s/.test(token)) {
|
|
26
|
-
closePopup();
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
const found = options().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
|
|
30
|
-
state.matches = found;
|
|
31
|
-
state.active = 0;
|
|
32
|
-
anchorIndex = anchor;
|
|
33
|
-
state.open = found.length > 0;
|
|
34
|
-
}
|
|
35
|
-
async function insert(entry) {
|
|
36
|
-
const text = handlers.getText();
|
|
37
|
-
const char = options().trigger ?? "@";
|
|
38
|
-
const next = text.slice(0, anchorIndex) + char + entry.label + " " + text.slice(caretIndex);
|
|
39
|
-
handlers.setText(next);
|
|
40
|
-
closePopup();
|
|
41
|
-
await tick();
|
|
42
|
-
const el = textarea();
|
|
43
|
-
if (!el) return;
|
|
44
|
-
const caret = anchorIndex + char.length + entry.label.length + 1;
|
|
45
|
-
el.focus();
|
|
46
|
-
el.setSelectionRange(caret, caret);
|
|
47
|
-
}
|
|
48
|
-
/** Feed the field's input events through here — the vessel watches
|
|
49
|
-
* the text as it lands, from the element itself. */
|
|
50
|
-
function onInput() {
|
|
51
|
-
detect();
|
|
52
|
-
}
|
|
53
|
-
/** Arrows move, Enter inserts, Escape dismisses. Answers `true` when
|
|
54
|
-
* the vessel consumed the key. */
|
|
55
|
-
function onKeydown(event) {
|
|
56
|
-
if (!state.open || state.matches.length === 0) return false;
|
|
57
|
-
if (event.key === "ArrowDown") {
|
|
58
|
-
event.preventDefault();
|
|
59
|
-
state.active = (state.active + 1) % state.matches.length;
|
|
60
|
-
} else if (event.key === "ArrowUp") {
|
|
61
|
-
event.preventDefault();
|
|
62
|
-
state.active = (state.active - 1 + state.matches.length) % state.matches.length;
|
|
63
|
-
} else if (event.key === "Enter") {
|
|
64
|
-
event.preventDefault();
|
|
65
|
-
insert(state.matches[state.active]);
|
|
66
|
-
} else if (event.key === "Escape") closePopup();
|
|
67
|
-
else return false;
|
|
68
|
-
return true;
|
|
69
|
-
}
|
|
70
|
-
return {
|
|
71
|
-
get open() {
|
|
72
|
-
return state.open;
|
|
73
|
-
},
|
|
74
|
-
set open(value) {
|
|
75
|
-
state.open = value;
|
|
76
|
-
},
|
|
77
|
-
get matches() {
|
|
78
|
-
return state.matches;
|
|
79
|
-
},
|
|
80
|
-
get active() {
|
|
81
|
-
return state.active;
|
|
82
|
-
},
|
|
83
|
-
set active(value) {
|
|
84
|
-
state.active = value;
|
|
85
|
-
},
|
|
86
|
-
insert,
|
|
87
|
-
close: closePopup,
|
|
88
|
-
onInput,
|
|
89
|
-
onKeydown
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
//#endregion
|
|
93
|
-
export { useMentions as t };
|