@rokkit/ui 1.1.13 → 1.1.15
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokkit/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.15",
|
|
4
4
|
"description": "Data driven UI components for Rokkit applications",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dropdown"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@rokkit/core": "1.1.
|
|
48
|
-
"@rokkit/data": "1.1.
|
|
49
|
-
"@rokkit/states": "1.1.
|
|
50
|
-
"@rokkit/actions": "1.1.
|
|
47
|
+
"@rokkit/core": "1.1.15",
|
|
48
|
+
"@rokkit/data": "1.1.15",
|
|
49
|
+
"@rokkit/states": "1.1.15",
|
|
50
|
+
"@rokkit/actions": "1.1.15",
|
|
51
51
|
"marked": "^15.0.0",
|
|
52
52
|
"dompurify": "^3.0.0"
|
|
53
53
|
},
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { commands, messages } from '@rokkit/states'
|
|
3
|
+
import { dismissable } from '@rokkit/actions'
|
|
4
|
+
|
|
5
|
+
/** @type {{ open?: boolean, placeholder?: string }} */
|
|
6
|
+
let { open = $bindable(false), placeholder } = $props()
|
|
7
|
+
|
|
8
|
+
let query = $state('')
|
|
9
|
+
let activeIndex = $state(0)
|
|
10
|
+
|
|
11
|
+
const labels = $derived({
|
|
12
|
+
placeholder: placeholder ?? messages.command.placeholder,
|
|
13
|
+
noResults: messages.command.noResults,
|
|
14
|
+
label: messages.command.label
|
|
15
|
+
})
|
|
16
|
+
|
|
17
|
+
function score(cmd, q) {
|
|
18
|
+
const hay = `${cmd.label} ${cmd.id} ${(cmd.keywords ?? []).join(' ')}`.toLowerCase()
|
|
19
|
+
return hay.includes(q)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const results = $derived.by(() => {
|
|
23
|
+
const q = query.trim().toLowerCase()
|
|
24
|
+
return q ? commands.all.filter((c) => score(c, q)) : commands.all
|
|
25
|
+
})
|
|
26
|
+
|
|
27
|
+
function close() {
|
|
28
|
+
open = false
|
|
29
|
+
query = ''
|
|
30
|
+
activeIndex = 0
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function runAt(index) {
|
|
34
|
+
const cmd = results[index]
|
|
35
|
+
if (!cmd) return
|
|
36
|
+
close()
|
|
37
|
+
commands.execute(cmd.id)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function onkeydown(event) {
|
|
41
|
+
if (event.key === 'ArrowDown') {
|
|
42
|
+
event.preventDefault()
|
|
43
|
+
activeIndex = Math.min(activeIndex + 1, results.length - 1)
|
|
44
|
+
} else if (event.key === 'ArrowUp') {
|
|
45
|
+
event.preventDefault()
|
|
46
|
+
activeIndex = Math.max(activeIndex - 1, 0)
|
|
47
|
+
} else if (event.key === 'Enter') {
|
|
48
|
+
event.preventDefault()
|
|
49
|
+
runAt(activeIndex)
|
|
50
|
+
} else if (event.key === 'Escape') {
|
|
51
|
+
close()
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
{#if open}
|
|
57
|
+
<div data-command-backdrop>
|
|
58
|
+
<div
|
|
59
|
+
data-command-palette
|
|
60
|
+
role="dialog"
|
|
61
|
+
aria-modal="true"
|
|
62
|
+
aria-label={labels.label}
|
|
63
|
+
use:dismissable
|
|
64
|
+
ondismiss={close}
|
|
65
|
+
>
|
|
66
|
+
<!-- svelte-ignore a11y_autofocus -->
|
|
67
|
+
<input
|
|
68
|
+
data-command-input
|
|
69
|
+
type="text"
|
|
70
|
+
autofocus
|
|
71
|
+
placeholder={labels.placeholder}
|
|
72
|
+
bind:value={query}
|
|
73
|
+
{onkeydown}
|
|
74
|
+
oninput={() => (activeIndex = 0)}
|
|
75
|
+
/>
|
|
76
|
+
{#if results.length === 0}
|
|
77
|
+
<p data-command-empty>{labels.noResults}</p>
|
|
78
|
+
{:else}
|
|
79
|
+
<ul data-command-list role="listbox">
|
|
80
|
+
{#each results as cmd, i (cmd.id)}
|
|
81
|
+
<li
|
|
82
|
+
data-command-item
|
|
83
|
+
data-active={i === activeIndex || undefined}
|
|
84
|
+
role="option"
|
|
85
|
+
aria-selected={i === activeIndex}
|
|
86
|
+
onclick={() => runAt(i)}
|
|
87
|
+
onkeydown={(e) => e.key === 'Enter' && runAt(i)}
|
|
88
|
+
onmousemove={() => (activeIndex = i)}
|
|
89
|
+
>
|
|
90
|
+
<span data-command-label>{cmd.label}</span>
|
|
91
|
+
{#if cmd.shortcut}<span data-command-shortcut>{cmd.shortcut}</span>{/if}
|
|
92
|
+
</li>
|
|
93
|
+
{/each}
|
|
94
|
+
</ul>
|
|
95
|
+
{/if}
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
{/if}
|
package/src/components/index.ts
CHANGED
|
@@ -27,6 +27,7 @@ export { default as BreadCrumbs } from './BreadCrumbs.svelte'
|
|
|
27
27
|
export { default as Card } from './Card.svelte'
|
|
28
28
|
export { default as ProgressBar } from './ProgressBar.svelte'
|
|
29
29
|
export { default as Carousel } from './Carousel.svelte'
|
|
30
|
+
export { default as CommandPalette } from './CommandPalette.svelte'
|
|
30
31
|
export { default as Pill } from './Pill.svelte'
|
|
31
32
|
export { default as Rating } from './Rating.svelte'
|
|
32
33
|
export { default as Stepper } from './Stepper.svelte'
|