@budibase/bbui 2.3.1 → 2.3.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/dist/bbui.es.js +1 -1
- package/dist/bbui.es.js.map +1 -1
- package/package.json +3 -3
- package/src/FancyForm/FancyInput.svelte +34 -2
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.3.
|
|
4
|
+
"version": "2.3.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": "^2.3.
|
|
41
|
+
"@budibase/string-templates": "^2.3.2",
|
|
42
42
|
"@spectrum-css/accordion": "3.0.24",
|
|
43
43
|
"@spectrum-css/actionbutton": "1.0.1",
|
|
44
44
|
"@spectrum-css/actiongroup": "1.0.1",
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"resolutions": {
|
|
90
90
|
"loader-utils": "1.4.1"
|
|
91
91
|
},
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "a42002afe58eaf558de2c825c58ad3c49433a02f"
|
|
93
93
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
import { createEventDispatcher } from "svelte"
|
|
2
|
+
import { createEventDispatcher, onMount } from "svelte"
|
|
3
3
|
import FancyField from "./FancyField.svelte"
|
|
4
4
|
import FancyFieldLabel from "./FancyFieldLabel.svelte"
|
|
5
5
|
import { fade } from "svelte/transition"
|
|
@@ -14,8 +14,11 @@
|
|
|
14
14
|
|
|
15
15
|
const dispatch = createEventDispatcher()
|
|
16
16
|
|
|
17
|
+
let ref
|
|
17
18
|
let focused = false
|
|
18
|
-
|
|
19
|
+
let autofilled = false
|
|
20
|
+
|
|
21
|
+
$: placeholder = !autofilled && !focused && !value
|
|
19
22
|
|
|
20
23
|
const onChange = e => {
|
|
21
24
|
const newValue = e.target.value
|
|
@@ -25,6 +28,27 @@
|
|
|
25
28
|
error = validate(newValue)
|
|
26
29
|
}
|
|
27
30
|
}
|
|
31
|
+
|
|
32
|
+
onMount(() => {
|
|
33
|
+
// Start watching for autofill every 100ms
|
|
34
|
+
const interval = setInterval(() => {
|
|
35
|
+
autofilled = ref?.matches(":-webkit-autofill")
|
|
36
|
+
if (autofilled) {
|
|
37
|
+
clearInterval(interval)
|
|
38
|
+
}
|
|
39
|
+
}, 100)
|
|
40
|
+
|
|
41
|
+
// Give up after 2 seconds and assume autofill has not been used
|
|
42
|
+
const timeout = setTimeout(() => {
|
|
43
|
+
clearInterval(interval)
|
|
44
|
+
}, 2000)
|
|
45
|
+
|
|
46
|
+
// Cleanup
|
|
47
|
+
return () => {
|
|
48
|
+
clearInterval(interval)
|
|
49
|
+
clearTimeout(timeout)
|
|
50
|
+
}
|
|
51
|
+
})
|
|
28
52
|
</script>
|
|
29
53
|
|
|
30
54
|
<FancyField {error} {value} {validate} {disabled} {focused}>
|
|
@@ -39,6 +63,7 @@
|
|
|
39
63
|
on:focus={() => (focused = true)}
|
|
40
64
|
on:blur={() => (focused = false)}
|
|
41
65
|
class:placeholder
|
|
66
|
+
bind:this={ref}
|
|
42
67
|
/>
|
|
43
68
|
{#if suffix && !placeholder}
|
|
44
69
|
<div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
|
|
@@ -74,4 +99,11 @@
|
|
|
74
99
|
line-height: 17px;
|
|
75
100
|
font-family: var(--font-sans);
|
|
76
101
|
}
|
|
102
|
+
input:-webkit-autofill {
|
|
103
|
+
border-radius: 2px;
|
|
104
|
+
-webkit-box-shadow: 0 0 0 100px var(--spectrum-global-color-gray-300) inset;
|
|
105
|
+
-webkit-text-fill-color: var(--spectrum-global-color-gray-900);
|
|
106
|
+
transition: -webkit-box-shadow 130ms 200ms, background-color 0s 86400s;
|
|
107
|
+
padding: 3px 8px 4px 8px;
|
|
108
|
+
}
|
|
77
109
|
</style>
|