@budibase/bbui 1.0.158 → 1.0.159-alpha.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/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": "1.0.
|
|
4
|
+
"version": "1.0.159-alpha.2",
|
|
5
5
|
"license": "MPL-2.0",
|
|
6
6
|
"svelte": "src/index.js",
|
|
7
7
|
"module": "dist/bbui.es.js",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@adobe/spectrum-css-workflow-icons": "^1.2.1",
|
|
41
|
-
"@budibase/string-templates": "^1.0.
|
|
41
|
+
"@budibase/string-templates": "^1.0.159-alpha.2",
|
|
42
42
|
"@spectrum-css/actionbutton": "^1.0.1",
|
|
43
43
|
"@spectrum-css/actiongroup": "^1.0.1",
|
|
44
44
|
"@spectrum-css/avatar": "^3.0.2",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"svelte-flatpickr": "^3.2.3",
|
|
85
85
|
"svelte-portal": "^1.0.0"
|
|
86
86
|
},
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "7ec4487324ae804efd67096a399484adba14f4a9"
|
|
88
88
|
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import "@spectrum-css/fieldgroup/dist/index-vars.css"
|
|
3
|
+
import "@spectrum-css/radio/dist/index-vars.css"
|
|
4
|
+
import { createEventDispatcher } from "svelte"
|
|
5
|
+
|
|
6
|
+
export let direction = "vertical"
|
|
7
|
+
export let value = []
|
|
8
|
+
export let options = []
|
|
9
|
+
export let error = null
|
|
10
|
+
export let disabled = false
|
|
11
|
+
export let getOptionLabel = option => option
|
|
12
|
+
export let getOptionValue = option => option
|
|
13
|
+
|
|
14
|
+
const dispatch = createEventDispatcher()
|
|
15
|
+
const onChange = e => {
|
|
16
|
+
let tempValue = value
|
|
17
|
+
let isChecked = e.target.checked
|
|
18
|
+
if (!tempValue.includes(e.target.value) && isChecked) {
|
|
19
|
+
tempValue.push(e.target.value)
|
|
20
|
+
}
|
|
21
|
+
value = tempValue
|
|
22
|
+
dispatch(
|
|
23
|
+
"change",
|
|
24
|
+
tempValue.filter(val => val !== e.target.value || isChecked)
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
|
|
30
|
+
{#if options && Array.isArray(options)}
|
|
31
|
+
{#each options as option}
|
|
32
|
+
<div
|
|
33
|
+
title={getOptionLabel(option)}
|
|
34
|
+
class="spectrum-Checkbox spectrum-FieldGroup-item"
|
|
35
|
+
class:is-invalid={!!error}
|
|
36
|
+
>
|
|
37
|
+
<label
|
|
38
|
+
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
|
|
39
|
+
>
|
|
40
|
+
<input
|
|
41
|
+
on:change={onChange}
|
|
42
|
+
value={getOptionValue(option)}
|
|
43
|
+
type="checkbox"
|
|
44
|
+
class="spectrum-Checkbox-input"
|
|
45
|
+
{disabled}
|
|
46
|
+
checked={value.includes(getOptionValue(option))}
|
|
47
|
+
/>
|
|
48
|
+
<span class="spectrum-Checkbox-box">
|
|
49
|
+
<svg
|
|
50
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
|
|
51
|
+
focusable="false"
|
|
52
|
+
aria-hidden="true"
|
|
53
|
+
>
|
|
54
|
+
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
55
|
+
</svg>
|
|
56
|
+
</span>
|
|
57
|
+
<span class="spectrum-Checkbox-label">{getOptionLabel(option)}</span>
|
|
58
|
+
</label>
|
|
59
|
+
</div>
|
|
60
|
+
{/each}
|
|
61
|
+
{/if}
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<style>
|
|
65
|
+
.spectrum-Checkbox-input {
|
|
66
|
+
opacity: 0;
|
|
67
|
+
}
|
|
68
|
+
</style>
|
|
@@ -156,8 +156,8 @@
|
|
|
156
156
|
<input
|
|
157
157
|
data-input
|
|
158
158
|
type="text"
|
|
159
|
-
{disabled}
|
|
160
159
|
class="spectrum-Textfield-input spectrum-InputGroup-input"
|
|
160
|
+
class:is-disabled={disabled}
|
|
161
161
|
{placeholder}
|
|
162
162
|
{id}
|
|
163
163
|
{value}
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
type="button"
|
|
168
168
|
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
|
|
169
169
|
tabindex="-1"
|
|
170
|
-
{disabled}
|
|
170
|
+
class:is-disabled={disabled}
|
|
171
171
|
class:is-invalid={!!error}
|
|
172
172
|
on:click={flatpickr?.open}
|
|
173
173
|
>
|
|
@@ -212,4 +212,7 @@
|
|
|
212
212
|
:global(.flatpickr-calendar) {
|
|
213
213
|
font-family: "Source Sans Pro", sans-serif;
|
|
214
214
|
}
|
|
215
|
+
.is-disabled {
|
|
216
|
+
pointer-events: none !important;
|
|
217
|
+
}
|
|
215
218
|
</style>
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
return
|
|
44
44
|
}
|
|
45
45
|
searchTerm = null
|
|
46
|
-
open =
|
|
46
|
+
open = !open
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
const getSortedOptions = (options, getLabel, sort) => {
|
|
@@ -71,105 +71,73 @@
|
|
|
71
71
|
}
|
|
72
72
|
</script>
|
|
73
73
|
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
{#if fieldIcon}
|
|
85
|
-
<span class="icon-Placeholder-Padding">
|
|
86
|
-
<img src={fieldIcon} alt="icon" width="20" height="15" />
|
|
87
|
-
</span>
|
|
88
|
-
{/if}
|
|
89
|
-
|
|
90
|
-
<span
|
|
91
|
-
class="spectrum-Picker-label"
|
|
92
|
-
class:is-placeholder={isPlaceholder}
|
|
93
|
-
class:auto-width={autoWidth}
|
|
74
|
+
<div use:clickOutside={() => (open = false)}>
|
|
75
|
+
<button
|
|
76
|
+
{id}
|
|
77
|
+
class="spectrum-Picker spectrum-Picker--sizeM"
|
|
78
|
+
class:spectrum-Picker--quiet={quiet}
|
|
79
|
+
{disabled}
|
|
80
|
+
class:is-invalid={!!error}
|
|
81
|
+
class:is-open={open}
|
|
82
|
+
aria-haspopup="listbox"
|
|
83
|
+
on:mousedown={onClick}
|
|
94
84
|
>
|
|
95
|
-
{
|
|
96
|
-
|
|
97
|
-
|
|
85
|
+
{#if fieldIcon}
|
|
86
|
+
<span class="icon-Placeholder-Padding">
|
|
87
|
+
<img src={fieldIcon} alt="icon" width="20" height="15" />
|
|
88
|
+
</span>
|
|
89
|
+
{/if}
|
|
90
|
+
|
|
91
|
+
<span
|
|
92
|
+
class="spectrum-Picker-label"
|
|
93
|
+
class:is-placeholder={isPlaceholder}
|
|
94
|
+
class:auto-width={autoWidth}
|
|
95
|
+
>
|
|
96
|
+
{fieldText}
|
|
97
|
+
</span>
|
|
98
|
+
{#if error}
|
|
99
|
+
<svg
|
|
100
|
+
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
|
|
101
|
+
focusable="false"
|
|
102
|
+
aria-hidden="true"
|
|
103
|
+
aria-label="Folder"
|
|
104
|
+
>
|
|
105
|
+
<use xlink:href="#spectrum-icon-18-Alert" />
|
|
106
|
+
</svg>
|
|
107
|
+
{/if}
|
|
98
108
|
<svg
|
|
99
|
-
class="spectrum-Icon spectrum-
|
|
109
|
+
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
|
|
100
110
|
focusable="false"
|
|
101
111
|
aria-hidden="true"
|
|
102
|
-
aria-label="Folder"
|
|
103
112
|
>
|
|
104
|
-
<use xlink:href="#spectrum-icon-
|
|
113
|
+
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
105
114
|
</svg>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
{
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
class:auto-width={autoWidth}
|
|
121
|
-
>
|
|
122
|
-
{#if autocomplete}
|
|
123
|
-
<Search
|
|
124
|
-
value={searchTerm}
|
|
125
|
-
on:change={event => (searchTerm = event.detail)}
|
|
126
|
-
{disabled}
|
|
127
|
-
placeholder="Search"
|
|
128
|
-
/>
|
|
129
|
-
{/if}
|
|
130
|
-
<ul class="spectrum-Menu" role="listbox">
|
|
131
|
-
{#if placeholderOption}
|
|
132
|
-
<li
|
|
133
|
-
class="spectrum-Menu-item placeholder"
|
|
134
|
-
class:is-selected={isPlaceholder}
|
|
135
|
-
role="option"
|
|
136
|
-
aria-selected="true"
|
|
137
|
-
tabindex="0"
|
|
138
|
-
on:click={() => onSelectOption(null)}
|
|
139
|
-
>
|
|
140
|
-
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
|
|
141
|
-
<svg
|
|
142
|
-
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
143
|
-
focusable="false"
|
|
144
|
-
aria-hidden="true"
|
|
145
|
-
>
|
|
146
|
-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
147
|
-
</svg>
|
|
148
|
-
</li>
|
|
115
|
+
</button>
|
|
116
|
+
{#if open}
|
|
117
|
+
<div
|
|
118
|
+
transition:fly|local={{ y: -20, duration: 200 }}
|
|
119
|
+
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
|
|
120
|
+
class:auto-width={autoWidth}
|
|
121
|
+
>
|
|
122
|
+
{#if autocomplete}
|
|
123
|
+
<Search
|
|
124
|
+
value={searchTerm}
|
|
125
|
+
on:change={event => (searchTerm = event.detail)}
|
|
126
|
+
{disabled}
|
|
127
|
+
placeholder="Search"
|
|
128
|
+
/>
|
|
149
129
|
{/if}
|
|
150
|
-
|
|
151
|
-
{#
|
|
130
|
+
<ul class="spectrum-Menu" role="listbox">
|
|
131
|
+
{#if placeholderOption}
|
|
152
132
|
<li
|
|
153
|
-
class="spectrum-Menu-item"
|
|
154
|
-
class:is-selected={
|
|
133
|
+
class="spectrum-Menu-item placeholder"
|
|
134
|
+
class:is-selected={isPlaceholder}
|
|
155
135
|
role="option"
|
|
156
136
|
aria-selected="true"
|
|
157
137
|
tabindex="0"
|
|
158
|
-
on:click={() => onSelectOption(
|
|
138
|
+
on:click={() => onSelectOption(null)}
|
|
159
139
|
>
|
|
160
|
-
{
|
|
161
|
-
<span class="icon-Padding">
|
|
162
|
-
<img
|
|
163
|
-
src={getOptionIcon(option, idx)}
|
|
164
|
-
alt="icon"
|
|
165
|
-
width="20"
|
|
166
|
-
height="15"
|
|
167
|
-
/>
|
|
168
|
-
</span>
|
|
169
|
-
{/if}
|
|
170
|
-
<span class="spectrum-Menu-itemLabel">
|
|
171
|
-
{getOptionLabel(option, idx)}
|
|
172
|
-
</span>
|
|
140
|
+
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
|
|
173
141
|
<svg
|
|
174
142
|
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
175
143
|
focusable="false"
|
|
@@ -178,11 +146,44 @@
|
|
|
178
146
|
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
179
147
|
</svg>
|
|
180
148
|
</li>
|
|
181
|
-
{/
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
149
|
+
{/if}
|
|
150
|
+
{#if filteredOptions.length}
|
|
151
|
+
{#each filteredOptions as option, idx}
|
|
152
|
+
<li
|
|
153
|
+
class="spectrum-Menu-item"
|
|
154
|
+
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
|
|
155
|
+
role="option"
|
|
156
|
+
aria-selected="true"
|
|
157
|
+
tabindex="0"
|
|
158
|
+
on:click={() => onSelectOption(getOptionValue(option, idx))}
|
|
159
|
+
>
|
|
160
|
+
{#if getOptionIcon(option, idx)}
|
|
161
|
+
<span class="icon-Padding">
|
|
162
|
+
<img
|
|
163
|
+
src={getOptionIcon(option, idx)}
|
|
164
|
+
alt="icon"
|
|
165
|
+
width="20"
|
|
166
|
+
height="15"
|
|
167
|
+
/>
|
|
168
|
+
</span>
|
|
169
|
+
{/if}
|
|
170
|
+
<span class="spectrum-Menu-itemLabel">
|
|
171
|
+
{getOptionLabel(option, idx)}
|
|
172
|
+
</span>
|
|
173
|
+
<svg
|
|
174
|
+
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
|
|
175
|
+
focusable="false"
|
|
176
|
+
aria-hidden="true"
|
|
177
|
+
>
|
|
178
|
+
<use xlink:href="#spectrum-css-icon-Checkmark100" />
|
|
179
|
+
</svg>
|
|
180
|
+
</li>
|
|
181
|
+
{/each}
|
|
182
|
+
{/if}
|
|
183
|
+
</ul>
|
|
184
|
+
</div>
|
|
185
|
+
{/if}
|
|
186
|
+
</div>
|
|
186
187
|
|
|
187
188
|
<style>
|
|
188
189
|
.spectrum-Popover {
|
package/src/Form/Core/index.js
CHANGED
|
@@ -3,6 +3,7 @@ export { default as CoreSelect } from "./Select.svelte"
|
|
|
3
3
|
export { default as CoreMultiselect } from "./Multiselect.svelte"
|
|
4
4
|
export { default as CoreCheckbox } from "./Checkbox.svelte"
|
|
5
5
|
export { default as CoreRadioGroup } from "./RadioGroup.svelte"
|
|
6
|
+
export { default as CoreCheckboxGroup } from "./CheckboxGroup.svelte"
|
|
6
7
|
export { default as CoreTextArea } from "./TextArea.svelte"
|
|
7
8
|
export { default as CoreCombobox } from "./Combobox.svelte"
|
|
8
9
|
export { default as CoreSwitch } from "./Switch.svelte"
|