@budibase/bbui 2.27.3 → 2.27.4
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,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@budibase/bbui",
|
|
3
3
|
"description": "A UI solution used in the different Budibase projects.",
|
|
4
|
-
"version": "2.27.
|
|
4
|
+
"version": "2.27.4",
|
|
5
5
|
"license": "MPL-2.0",
|
|
6
6
|
"svelte": "src/index.js",
|
|
7
7
|
"module": "dist/bbui.es.js",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@adobe/spectrum-css-workflow-icons": "1.2.1",
|
|
38
|
-
"@budibase/shared-core": "2.27.
|
|
39
|
-
"@budibase/string-templates": "2.27.
|
|
38
|
+
"@budibase/shared-core": "2.27.4",
|
|
39
|
+
"@budibase/string-templates": "2.27.4",
|
|
40
40
|
"@spectrum-css/accordion": "3.0.24",
|
|
41
41
|
"@spectrum-css/actionbutton": "1.0.1",
|
|
42
42
|
"@spectrum-css/actiongroup": "1.0.1",
|
|
@@ -103,5 +103,5 @@
|
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
},
|
|
106
|
-
"gitHead": "
|
|
106
|
+
"gitHead": "58c6101ae8cb7c3ae780e10aa5935ebdb7491268"
|
|
107
107
|
}
|
package/src/index.js
CHANGED
|
@@ -89,7 +89,6 @@ export { default as ListItem } from "./List/ListItem.svelte"
|
|
|
89
89
|
export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
|
|
90
90
|
export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
|
|
91
91
|
export { default as Accordion } from "./Accordion/Accordion.svelte"
|
|
92
|
-
export { default as OptionSelectDnD } from "./OptionSelectDnD/OptionSelectDnD.svelte"
|
|
93
92
|
export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
|
|
94
93
|
export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte"
|
|
95
94
|
|
|
@@ -1,252 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { flip } from "svelte/animate"
|
|
3
|
-
import { dndzone } from "svelte-dnd-action"
|
|
4
|
-
import Icon from "../Icon/Icon.svelte"
|
|
5
|
-
import Popover from "../Popover/Popover.svelte"
|
|
6
|
-
import { onMount } from "svelte"
|
|
7
|
-
|
|
8
|
-
const flipDurationMs = 150
|
|
9
|
-
|
|
10
|
-
export let constraints
|
|
11
|
-
export let optionColors = {}
|
|
12
|
-
let options = []
|
|
13
|
-
|
|
14
|
-
let colorPopovers = []
|
|
15
|
-
let anchors = []
|
|
16
|
-
|
|
17
|
-
let colorsArray = [
|
|
18
|
-
"hsla(0, 90%, 75%, 0.3)",
|
|
19
|
-
"hsla(50, 80%, 75%, 0.3)",
|
|
20
|
-
"hsla(120, 90%, 75%, 0.3)",
|
|
21
|
-
"hsla(200, 90%, 75%, 0.3)",
|
|
22
|
-
"hsla(240, 90%, 75%, 0.3)",
|
|
23
|
-
"hsla(320, 90%, 75%, 0.3)",
|
|
24
|
-
]
|
|
25
|
-
const removeInput = idx => {
|
|
26
|
-
delete optionColors[options[idx].name]
|
|
27
|
-
constraints.inclusion = constraints.inclusion.filter((e, i) => i !== idx)
|
|
28
|
-
options = options.filter((e, i) => i !== idx)
|
|
29
|
-
colorPopovers.pop(undefined)
|
|
30
|
-
anchors.pop(undefined)
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const addNewInput = () => {
|
|
34
|
-
options = [
|
|
35
|
-
...options,
|
|
36
|
-
{ name: `Option ${constraints.inclusion.length + 1}`, id: Math.random() },
|
|
37
|
-
]
|
|
38
|
-
constraints.inclusion = [
|
|
39
|
-
...constraints.inclusion,
|
|
40
|
-
`Option ${constraints.inclusion.length + 1}`,
|
|
41
|
-
]
|
|
42
|
-
|
|
43
|
-
colorPopovers.push(undefined)
|
|
44
|
-
anchors.push(undefined)
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
const handleDndConsider = e => {
|
|
48
|
-
options = e.detail.items
|
|
49
|
-
}
|
|
50
|
-
const handleDndFinalize = e => {
|
|
51
|
-
options = e.detail.items
|
|
52
|
-
constraints.inclusion = options.map(option => option.name)
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
const handleColorChange = (optionName, color, idx) => {
|
|
56
|
-
optionColors[optionName] = color
|
|
57
|
-
colorPopovers[idx].hide()
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
const handleNameChange = (optionName, idx, value) => {
|
|
61
|
-
constraints.inclusion[idx] = value
|
|
62
|
-
options[idx].name = value
|
|
63
|
-
optionColors[value] = optionColors[optionName]
|
|
64
|
-
delete optionColors[optionName]
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
const openColorPickerPopover = (optionIdx, target) => {
|
|
68
|
-
colorPopovers[optionIdx].show()
|
|
69
|
-
anchors[optionIdx] = target
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
onMount(() => {
|
|
73
|
-
// Initialize anchor arrays on mount, assuming 'options' is already populated
|
|
74
|
-
colorPopovers = constraints.inclusion.map(() => undefined)
|
|
75
|
-
anchors = constraints.inclusion.map(() => undefined)
|
|
76
|
-
|
|
77
|
-
options = constraints.inclusion.map(value => ({
|
|
78
|
-
name: value,
|
|
79
|
-
id: Math.random(),
|
|
80
|
-
}))
|
|
81
|
-
})
|
|
82
|
-
</script>
|
|
83
|
-
|
|
84
|
-
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
85
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
86
|
-
<div>
|
|
87
|
-
<div
|
|
88
|
-
class="actions"
|
|
89
|
-
use:dndzone={{
|
|
90
|
-
items: options,
|
|
91
|
-
flipDurationMs,
|
|
92
|
-
dropTargetStyle: { outline: "none" },
|
|
93
|
-
}}
|
|
94
|
-
on:consider={handleDndConsider}
|
|
95
|
-
on:finalize={handleDndFinalize}
|
|
96
|
-
>
|
|
97
|
-
{#each options as option, idx (option.id)}
|
|
98
|
-
<div
|
|
99
|
-
class="no-border action-container"
|
|
100
|
-
animate:flip={{ duration: flipDurationMs }}
|
|
101
|
-
>
|
|
102
|
-
<div class="child drag-handle-spacing">
|
|
103
|
-
<Icon name="DragHandle" size="L" />
|
|
104
|
-
</div>
|
|
105
|
-
<div class="child color-picker">
|
|
106
|
-
<div
|
|
107
|
-
id="color-picker"
|
|
108
|
-
bind:this={anchors[idx]}
|
|
109
|
-
style="--color:{optionColors?.[option.name] ||
|
|
110
|
-
'hsla(0, 1%, 50%, 0.3)'}"
|
|
111
|
-
class="circle"
|
|
112
|
-
on:click={e => openColorPickerPopover(idx, e.target)}
|
|
113
|
-
>
|
|
114
|
-
<Popover
|
|
115
|
-
bind:this={colorPopovers[idx]}
|
|
116
|
-
anchor={anchors[idx]}
|
|
117
|
-
align="left"
|
|
118
|
-
offset={0}
|
|
119
|
-
style=""
|
|
120
|
-
popoverTarget={document.getElementById(`color-picker`)}
|
|
121
|
-
animate={false}
|
|
122
|
-
>
|
|
123
|
-
<div class="colors">
|
|
124
|
-
{#each colorsArray as color}
|
|
125
|
-
<div
|
|
126
|
-
on:click={() => handleColorChange(option.name, color, idx)}
|
|
127
|
-
style="--color:{color};"
|
|
128
|
-
class="circle circle-hover"
|
|
129
|
-
/>
|
|
130
|
-
{/each}
|
|
131
|
-
</div>
|
|
132
|
-
</Popover>
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
135
|
-
<div class="child">
|
|
136
|
-
<input
|
|
137
|
-
class="input-field"
|
|
138
|
-
type="text"
|
|
139
|
-
on:change={e => handleNameChange(option.name, idx, e.target.value)}
|
|
140
|
-
value={option.name}
|
|
141
|
-
placeholder="Option name"
|
|
142
|
-
/>
|
|
143
|
-
</div>
|
|
144
|
-
<div class="child">
|
|
145
|
-
<Icon name="Close" hoverable size="S" on:click={removeInput(idx)} />
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
{/each}
|
|
149
|
-
</div>
|
|
150
|
-
<div on:click={addNewInput} class="add-option">
|
|
151
|
-
<Icon hoverable name="Add" />
|
|
152
|
-
<div>Add option</div>
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
|
|
156
|
-
<style>
|
|
157
|
-
.action-container {
|
|
158
|
-
background-color: var(--spectrum-alias-background-color-primary);
|
|
159
|
-
border-radius: 0px;
|
|
160
|
-
border: 1px solid var(--spectrum-global-color-gray-300);
|
|
161
|
-
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
|
162
|
-
border-color 130ms ease-in-out;
|
|
163
|
-
display: flex;
|
|
164
|
-
flex-direction: row;
|
|
165
|
-
align-items: center;
|
|
166
|
-
}
|
|
167
|
-
.no-border {
|
|
168
|
-
border-bottom: none;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.action-container:last-child {
|
|
172
|
-
border-bottom: 1px solid var(--spectrum-global-color-gray-300) !important;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.child {
|
|
176
|
-
height: 30px;
|
|
177
|
-
}
|
|
178
|
-
.child:hover,
|
|
179
|
-
.child:focus {
|
|
180
|
-
background: var(--spectrum-global-color-gray-200);
|
|
181
|
-
}
|
|
182
|
-
.add-option {
|
|
183
|
-
display: flex;
|
|
184
|
-
flex-direction: row;
|
|
185
|
-
align-items: center;
|
|
186
|
-
padding: var(--spacing-m);
|
|
187
|
-
gap: var(--spacing-m);
|
|
188
|
-
cursor: pointer;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.input-field {
|
|
192
|
-
border: none;
|
|
193
|
-
outline: none;
|
|
194
|
-
background-color: transparent;
|
|
195
|
-
width: 100%;
|
|
196
|
-
color: var(--text);
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
.child input[type="text"] {
|
|
200
|
-
padding-left: 10px;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.input-field:hover,
|
|
204
|
-
.input-field:focus {
|
|
205
|
-
background: var(--spectrum-global-color-gray-200);
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.action-container > :nth-child(1) {
|
|
209
|
-
flex-grow: 1;
|
|
210
|
-
justify-content: center;
|
|
211
|
-
display: flex;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.action-container > :nth-child(2) {
|
|
215
|
-
flex-grow: 1;
|
|
216
|
-
display: flex;
|
|
217
|
-
justify-content: center;
|
|
218
|
-
align-items: center;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
.action-container > :nth-child(3) {
|
|
222
|
-
flex-grow: 4;
|
|
223
|
-
display: flex;
|
|
224
|
-
}
|
|
225
|
-
.action-container > :nth-child(4) {
|
|
226
|
-
flex-grow: 1;
|
|
227
|
-
justify-content: center;
|
|
228
|
-
display: flex;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.circle {
|
|
232
|
-
height: 20px;
|
|
233
|
-
width: 20px;
|
|
234
|
-
background-color: var(--color);
|
|
235
|
-
border-radius: 50%;
|
|
236
|
-
display: inline-block;
|
|
237
|
-
box-sizing: border-box;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
.circle-hover:hover {
|
|
241
|
-
border: 1px solid var(--spectrum-global-color-blue-400);
|
|
242
|
-
cursor: pointer;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
.colors {
|
|
246
|
-
display: grid;
|
|
247
|
-
grid-template-columns: 1fr 1fr 1fr;
|
|
248
|
-
gap: var(--spacing-xl);
|
|
249
|
-
justify-items: center;
|
|
250
|
-
margin: var(--spacing-m);
|
|
251
|
-
}
|
|
252
|
-
</style>
|