@human-synthesis/norns-ui 0.0.8 → 0.0.10
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 +1 -1
- package/src/components/Dialog.n +2 -1
- package/src/components/Window.n +16 -6
package/package.json
CHANGED
package/src/components/Dialog.n
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
| {@render actions()}
|
|
33
33
|
+if('!hideClose')
|
|
34
34
|
button.dialog-close(type="button" aria-label="Close" onclick!="{onClose}")
|
|
35
|
-
|
|
35
|
+
Icon(name="lucide:x" size="size-3.5")
|
|
36
36
|
|
|
37
37
|
<script>
|
|
38
38
|
import { cn } from '@human-synthesis/norns-ui/cn'
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
import { scrollLock } from '@human-synthesis/norns-ui/behaviors/scrollLock.svelte.js'
|
|
41
41
|
import { focusTrap } from '@human-synthesis/norns-ui/behaviors/focusTrap.svelte.js'
|
|
42
42
|
import { escape } from '@human-synthesis/norns-ui/behaviors/escape.svelte.js'
|
|
43
|
+
import Icon from './Icon.n'
|
|
43
44
|
|
|
44
45
|
{
|
|
45
46
|
open = $bindable(false)
|
package/src/components/Window.n
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
.norns-window(class!="{classes}")
|
|
2
2
|
+if('!hideHeader')
|
|
3
|
-
header.norns-window-header
|
|
3
|
+
header.norns-window-header(ondblclick!="{onHeaderDoubleClick}")
|
|
4
4
|
.norns-window-title.truncate {title}
|
|
5
5
|
.norns-window-actions
|
|
6
6
|
+if('actions')
|
|
7
7
|
| {@render actions()}
|
|
8
8
|
+if('onClose')
|
|
9
|
-
button.norns-window-close(type="button" aria-label="Close" onclick!="{onClose}")
|
|
10
|
-
|
|
9
|
+
button.norns-window-close.nodrag(type="button" aria-label="Close" onclick!="{onClose}")
|
|
10
|
+
Icon(name="lucide:x" size="size-3.5")
|
|
11
11
|
section.norns-window-body(class!="{bodyClasses}")
|
|
12
12
|
| {@render children?.()}
|
|
13
13
|
|
|
14
14
|
<script>
|
|
15
15
|
import { cn } from '@human-synthesis/norns-ui/cn'
|
|
16
|
+
import Icon from './Icon.n'
|
|
16
17
|
|
|
17
18
|
// Layout-only window: chrome (header + close + custom actions) wrapping
|
|
18
19
|
// a body slot. Sizing is the caller's responsibility — pass dimensions
|
|
@@ -22,9 +23,17 @@
|
|
|
22
23
|
//
|
|
23
24
|
// Header layout: title on the left (truncated), then a flex row of
|
|
24
25
|
// caller-provided action elements (via the `actions` snippet), then an
|
|
25
|
-
// optional
|
|
26
|
-
// is rendered after the snippet so the snippet can
|
|
27
|
-
// alongside it.
|
|
26
|
+
// optional `lucide:x` close button when `onClose` is supplied. The
|
|
27
|
+
// close button is rendered after the snippet so the snippet can
|
|
28
|
+
// position icons / chips alongside it.
|
|
29
|
+
//
|
|
30
|
+
// The close button carries `.nodrag`; SvelteFlow (and any other drag
|
|
31
|
+
// system that uses that convention) treats clicks on it as non-draggy.
|
|
32
|
+
// Buttons added via the `actions` snippet should be marked the same way
|
|
33
|
+
// by the consumer — they're caller-owned.
|
|
34
|
+
//
|
|
35
|
+
// `onHeaderDoubleClick` fires on dblclick over the header bar. Useful
|
|
36
|
+
// for "double-click title to maximize" patterns in windowed UIs.
|
|
28
37
|
//
|
|
29
38
|
// `hideHeader` removes the entire header bar (useful for windows that
|
|
30
39
|
// already have their own custom chrome but still want the rounded shell).
|
|
@@ -32,6 +41,7 @@
|
|
|
32
41
|
title = ''
|
|
33
42
|
hideHeader = false
|
|
34
43
|
onClose
|
|
44
|
+
onHeaderDoubleClick
|
|
35
45
|
actions
|
|
36
46
|
children
|
|
37
47
|
class: extra = ''
|