@budibase/bbui 3.31.8 → 3.32.0
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": "3.
|
|
4
|
+
"version": "3.32.0",
|
|
5
5
|
"license": "MPL-2.0",
|
|
6
6
|
"module": "dist/bbui.mjs",
|
|
7
7
|
"exports": {
|
|
@@ -107,5 +107,5 @@
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
},
|
|
110
|
-
"gitHead": "
|
|
110
|
+
"gitHead": "53fe38782b652197983a8ec2da7761f3135047b6"
|
|
111
111
|
}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import "@spectrum-css/menu/dist/index-vars.css"
|
|
8
8
|
import "@spectrum-css/popover/dist/index-vars.css"
|
|
9
9
|
import { createEventDispatcher } from "svelte"
|
|
10
|
-
import type {
|
|
10
|
+
import type { FormEventHandler } from "svelte/elements"
|
|
11
11
|
import clickOutside from "../../Actions/clickOutside"
|
|
12
12
|
import { PopoverAlignment } from "../../constants"
|
|
13
13
|
import Icon from "../../Icon/Icon.svelte"
|
|
@@ -32,16 +32,34 @@
|
|
|
32
32
|
let open = false
|
|
33
33
|
let focus = false
|
|
34
34
|
let anchor
|
|
35
|
+
let query = ""
|
|
36
|
+
const normalizeForSearch = (value: unknown): string => {
|
|
37
|
+
if (value === null || value === undefined) {
|
|
38
|
+
return ""
|
|
39
|
+
}
|
|
40
|
+
return String(value).toLowerCase()
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
$: query = value || ""
|
|
44
|
+
$: filteredOptions =
|
|
45
|
+
!query.trim() || !options?.length
|
|
46
|
+
? options
|
|
47
|
+
: options.filter(option => {
|
|
48
|
+
const optionLabel = normalizeForSearch(getOptionLabel(option))
|
|
49
|
+
const optionValue = normalizeForSearch(getOptionValue(option))
|
|
50
|
+
const search = normalizeForSearch(query)
|
|
51
|
+
return optionLabel.includes(search) || optionValue.includes(search)
|
|
52
|
+
})
|
|
35
53
|
|
|
36
|
-
const selectOption = (value: string) => {
|
|
54
|
+
const selectOption = (value: string, shouldClose = true) => {
|
|
37
55
|
dispatch("change", value)
|
|
38
|
-
open =
|
|
56
|
+
open = !shouldClose
|
|
39
57
|
}
|
|
40
58
|
|
|
41
|
-
const onType:
|
|
59
|
+
const onType: FormEventHandler<HTMLInputElement> = e => {
|
|
42
60
|
const value = e.currentTarget.value
|
|
43
61
|
dispatch("type", value)
|
|
44
|
-
selectOption(value)
|
|
62
|
+
selectOption(value, false)
|
|
45
63
|
}
|
|
46
64
|
|
|
47
65
|
const onPick = (value: string) => {
|
|
@@ -69,7 +87,7 @@
|
|
|
69
87
|
focus = false
|
|
70
88
|
dispatch("blur")
|
|
71
89
|
}}
|
|
72
|
-
on:
|
|
90
|
+
on:input={onType}
|
|
73
91
|
value={value || ""}
|
|
74
92
|
placeholder={placeholder || ""}
|
|
75
93
|
{disabled}
|
|
@@ -103,8 +121,8 @@
|
|
|
103
121
|
}}
|
|
104
122
|
>
|
|
105
123
|
<ul class="spectrum-Menu" role="listbox">
|
|
106
|
-
{#if
|
|
107
|
-
{#each
|
|
124
|
+
{#if filteredOptions && Array.isArray(filteredOptions) && filteredOptions.length}
|
|
125
|
+
{#each filteredOptions as option}
|
|
108
126
|
<li
|
|
109
127
|
class="spectrum-Menu-item"
|
|
110
128
|
class:is-selected={getOptionValue(option) === value}
|
|
@@ -120,6 +138,8 @@
|
|
|
120
138
|
</div>
|
|
121
139
|
</li>
|
|
122
140
|
{/each}
|
|
141
|
+
{:else}
|
|
142
|
+
<li class="spectrum-Menu-item empty">No results</li>
|
|
123
143
|
{/if}
|
|
124
144
|
</ul>
|
|
125
145
|
</div>
|
|
@@ -139,6 +159,11 @@
|
|
|
139
159
|
.check {
|
|
140
160
|
display: none;
|
|
141
161
|
}
|
|
162
|
+
|
|
163
|
+
.empty {
|
|
164
|
+
opacity: 0.7;
|
|
165
|
+
cursor: default;
|
|
166
|
+
}
|
|
142
167
|
li.is-selected .check {
|
|
143
168
|
display: block;
|
|
144
169
|
}
|