@lavalogic/scoria 0.40.13 → 0.40.14
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/Components/CollapsibleCard.svelte +1 -2
- package/dist/Components/CollapsibleMenuGroup.svelte +1 -1
- package/dist/Components/PopoverButton.svelte +164 -0
- package/dist/Components/PopoverButton.svelte.d.ts +9 -0
- package/dist/Components/PopoverButtonProps.d.ts +21 -0
- package/dist/Components/PopoverButtonProps.js +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -73,6 +73,7 @@
|
|
|
73
73
|
<div
|
|
74
74
|
id={contentId}
|
|
75
75
|
class="content"
|
|
76
|
+
style="overflow: {cardMaxHeight != null ? 'auto' : 'visible'};"
|
|
76
77
|
transition:slide={{ duration: slideDuration, easing: cubicOut }}
|
|
77
78
|
>
|
|
78
79
|
{#if children}
|
|
@@ -91,7 +92,6 @@
|
|
|
91
92
|
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
|
|
92
93
|
padding: 1.5rem;
|
|
93
94
|
max-height: 100%;
|
|
94
|
-
overflow: hidden;
|
|
95
95
|
}
|
|
96
96
|
.collapsible-card.grow {
|
|
97
97
|
flex: 1;
|
|
@@ -144,5 +144,4 @@ div.content {
|
|
|
144
144
|
height: max-content;
|
|
145
145
|
min-height: 0;
|
|
146
146
|
width: 100%;
|
|
147
|
-
overflow: auto;
|
|
148
147
|
}</style>
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
<svelte:options runes />
|
|
2
|
+
|
|
3
|
+
<!--
|
|
4
|
+
@component
|
|
5
|
+
An icon button that toggles a floating popover anchored beneath it, with a
|
|
6
|
+
caret pointing back at the button. The popover holds arbitrary content (the
|
|
7
|
+
default snippet) and closes on click-outside or Escape.
|
|
8
|
+
-->
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import { Colour } from '../scss/colours.js';
|
|
11
|
+
import { Size } from '../Types/Internal/Size.js';
|
|
12
|
+
import Icon from './Icon.svelte';
|
|
13
|
+
import type { PopoverButtonProps } from './PopoverButtonProps.js';
|
|
14
|
+
|
|
15
|
+
let {
|
|
16
|
+
icon,
|
|
17
|
+
label,
|
|
18
|
+
children,
|
|
19
|
+
align = 'center',
|
|
20
|
+
borderless = false,
|
|
21
|
+
open = $bindable(false),
|
|
22
|
+
}: PopoverButtonProps = $props();
|
|
23
|
+
|
|
24
|
+
let wrapper: HTMLDivElement | undefined = $state();
|
|
25
|
+
|
|
26
|
+
function onWindowPointerDown(e: MouseEvent) {
|
|
27
|
+
if (!open) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
if (wrapper && e.target instanceof Node && !wrapper.contains(e.target)) {
|
|
31
|
+
open = false;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function onWindowKeydown(e: KeyboardEvent) {
|
|
36
|
+
if (open && e.key === 'Escape') {
|
|
37
|
+
open = false;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<svelte:window
|
|
43
|
+
onpointerdown={onWindowPointerDown}
|
|
44
|
+
onkeydown={onWindowKeydown}
|
|
45
|
+
/>
|
|
46
|
+
|
|
47
|
+
<div
|
|
48
|
+
class="popover-button"
|
|
49
|
+
bind:this={wrapper}
|
|
50
|
+
>
|
|
51
|
+
<button
|
|
52
|
+
type="button"
|
|
53
|
+
class="trigger"
|
|
54
|
+
class:open
|
|
55
|
+
class:borderless
|
|
56
|
+
aria-label={label}
|
|
57
|
+
aria-expanded={open}
|
|
58
|
+
aria-haspopup="dialog"
|
|
59
|
+
onclick={() => {
|
|
60
|
+
open = !open;
|
|
61
|
+
}}
|
|
62
|
+
>
|
|
63
|
+
<Icon
|
|
64
|
+
name={icon}
|
|
65
|
+
size={Size.Large}
|
|
66
|
+
colour={open ? Colour['$brand-primary'] : Colour['$font-secondary']}
|
|
67
|
+
/>
|
|
68
|
+
</button>
|
|
69
|
+
|
|
70
|
+
{#if open}
|
|
71
|
+
<div
|
|
72
|
+
class="popover align-{align}"
|
|
73
|
+
role="dialog"
|
|
74
|
+
aria-label={label}
|
|
75
|
+
>
|
|
76
|
+
<span class="caret"></span>
|
|
77
|
+
<div class="popover-inner">
|
|
78
|
+
{@render children()}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
{/if}
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<style>.popover-button {
|
|
85
|
+
position: relative;
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.trigger {
|
|
90
|
+
display: inline-flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: center;
|
|
93
|
+
padding: 0.75rem;
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
background-color: #ffffff;
|
|
96
|
+
border: solid 1px #cbd4da;
|
|
97
|
+
border-radius: 4px;
|
|
98
|
+
}
|
|
99
|
+
.trigger:hover {
|
|
100
|
+
background-color: #f4f7f9;
|
|
101
|
+
}
|
|
102
|
+
.trigger.open:not(.borderless) {
|
|
103
|
+
border-color: #259fc7;
|
|
104
|
+
}
|
|
105
|
+
.trigger.borderless {
|
|
106
|
+
border: none;
|
|
107
|
+
border-radius: 0;
|
|
108
|
+
background-color: transparent;
|
|
109
|
+
width: 100%;
|
|
110
|
+
height: 100%;
|
|
111
|
+
}
|
|
112
|
+
.trigger.borderless:hover {
|
|
113
|
+
background-color: #f4f7f9;
|
|
114
|
+
}
|
|
115
|
+
.trigger.borderless.open {
|
|
116
|
+
background-color: #f4fbfd;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.popover {
|
|
120
|
+
position: absolute;
|
|
121
|
+
top: calc(100% + 0.6rem);
|
|
122
|
+
z-index: 100;
|
|
123
|
+
background-color: #ffffff;
|
|
124
|
+
border: solid 1px #cbd4da;
|
|
125
|
+
border-radius: 4px;
|
|
126
|
+
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
|
|
127
|
+
padding: 1.25rem;
|
|
128
|
+
width: max-content;
|
|
129
|
+
max-width: 80vw;
|
|
130
|
+
}
|
|
131
|
+
.popover.align-center {
|
|
132
|
+
left: 50%;
|
|
133
|
+
transform: translateX(-50%);
|
|
134
|
+
}
|
|
135
|
+
.popover.align-start {
|
|
136
|
+
left: 0;
|
|
137
|
+
}
|
|
138
|
+
.popover.align-end {
|
|
139
|
+
right: 0;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.caret {
|
|
143
|
+
position: absolute;
|
|
144
|
+
top: -6px;
|
|
145
|
+
width: 12px;
|
|
146
|
+
height: 12px;
|
|
147
|
+
background-color: #ffffff;
|
|
148
|
+
border-left: solid 1px #cbd4da;
|
|
149
|
+
border-top: solid 1px #cbd4da;
|
|
150
|
+
transform: rotate(45deg);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.align-center .caret {
|
|
154
|
+
left: 50%;
|
|
155
|
+
margin-left: -6px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.align-start .caret {
|
|
159
|
+
left: 1.5rem;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.align-end .caret {
|
|
163
|
+
right: 1.5rem;
|
|
164
|
+
}</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { PopoverButtonProps } from './PopoverButtonProps.js';
|
|
2
|
+
/**
|
|
3
|
+
* An icon button that toggles a floating popover anchored beneath it, with a
|
|
4
|
+
* caret pointing back at the button. The popover holds arbitrary content (the
|
|
5
|
+
* default snippet) and closes on click-outside or Escape.
|
|
6
|
+
*/
|
|
7
|
+
declare const PopoverButton: import("svelte").Component<PopoverButtonProps, {}, "open">;
|
|
8
|
+
type PopoverButton = ReturnType<typeof PopoverButton>;
|
|
9
|
+
export default PopoverButton;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { icons } from './Icons.js';
|
|
3
|
+
/**
|
|
4
|
+
* Props for {@link PopoverButton} — an icon button that toggles a floating
|
|
5
|
+
* popover (with a caret pointing back at the button) holding arbitrary
|
|
6
|
+
* content. Closes on click-outside or Escape.
|
|
7
|
+
*/
|
|
8
|
+
export interface PopoverButtonProps {
|
|
9
|
+
/** Icon shown in the trigger button. */
|
|
10
|
+
icon: keyof typeof icons;
|
|
11
|
+
/** Accessible label for the trigger button. */
|
|
12
|
+
label: string;
|
|
13
|
+
/** Popover contents. */
|
|
14
|
+
children: Snippet;
|
|
15
|
+
/** Horizontal alignment of the popover relative to the button. Defaults to `'center'`. */
|
|
16
|
+
align?: 'center' | 'start' | 'end';
|
|
17
|
+
/** Drop the trigger's border so it can sit flush inside a grouped bar. */
|
|
18
|
+
borderless?: boolean;
|
|
19
|
+
/** Two-way bindable open state. */
|
|
20
|
+
open?: boolean;
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,8 @@ export { default as CollapsibleCard } from './Components/CollapsibleCard.svelte'
|
|
|
24
24
|
export type { CollapsibleCardProps } from './Components/CollapsibleCardProps.js';
|
|
25
25
|
export { default as CollapsibleMenuGroup } from './Components/CollapsibleMenuGroup.svelte';
|
|
26
26
|
export type { CollapsibleMenuGroupProps } from './Components/CollapsibleMenuGroupProps.js';
|
|
27
|
+
export { default as PopoverButton } from './Components/PopoverButton.svelte';
|
|
28
|
+
export type { PopoverButtonProps } from './Components/PopoverButtonProps.js';
|
|
27
29
|
export { default as SidebarPanel } from './Components/SidebarPanel.svelte';
|
|
28
30
|
export type { SidebarPanelProps } from './Components/SidebarPanelProps.js';
|
|
29
31
|
export { default as ConditionBuilder } from './Components/ConditionBuilder/ConditionBuilder.svelte';
|
package/dist/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export { default as Button } from './Components/Button.svelte';
|
|
|
15
15
|
export { default as Checkbox } from './Components/Checkbox.svelte';
|
|
16
16
|
export { default as CollapsibleCard } from './Components/CollapsibleCard.svelte';
|
|
17
17
|
export { default as CollapsibleMenuGroup } from './Components/CollapsibleMenuGroup.svelte';
|
|
18
|
+
export { default as PopoverButton } from './Components/PopoverButton.svelte';
|
|
18
19
|
export { default as SidebarPanel } from './Components/SidebarPanel.svelte';
|
|
19
20
|
export { default as ConditionBuilder } from './Components/ConditionBuilder/ConditionBuilder.svelte';
|
|
20
21
|
export { makeGroup, makeLeaf, } from './Components/ConditionBuilder/ConditionTree.js';
|