@budibase/bbui 2.4.26 → 2.4.27-alpha.1
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.4.
|
|
4
|
+
"version": "2.4.27-alpha.1",
|
|
5
5
|
"license": "MPL-2.0",
|
|
6
6
|
"svelte": "src/index.js",
|
|
7
7
|
"module": "dist/bbui.es.js",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@adobe/spectrum-css-workflow-icons": "1.2.1",
|
|
41
|
-
"@budibase/shared-core": "
|
|
42
|
-
"@budibase/string-templates": "
|
|
41
|
+
"@budibase/shared-core": "2.4.27-alpha.1",
|
|
42
|
+
"@budibase/string-templates": "2.4.27-alpha.1",
|
|
43
43
|
"@spectrum-css/accordion": "3.0.24",
|
|
44
44
|
"@spectrum-css/actionbutton": "1.0.1",
|
|
45
45
|
"@spectrum-css/actiongroup": "1.0.1",
|
|
@@ -90,5 +90,5 @@
|
|
|
90
90
|
"resolutions": {
|
|
91
91
|
"loader-utils": "1.4.1"
|
|
92
92
|
},
|
|
93
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "6427e02e1854db744eacb5c32312f6caba8e3427"
|
|
94
94
|
}
|
|
@@ -113,6 +113,9 @@
|
|
|
113
113
|
.spectrum-ActionButton--quiet {
|
|
114
114
|
padding: 0 8px;
|
|
115
115
|
}
|
|
116
|
+
.spectrum-ActionButton--quiet.is-selected {
|
|
117
|
+
color: var(--spectrum-global-color-gray-900);
|
|
118
|
+
}
|
|
116
119
|
.is-selected:not(.emphasized) .spectrum-Icon {
|
|
117
120
|
color: var(--spectrum-global-color-gray-900);
|
|
118
121
|
}
|
|
@@ -31,6 +31,7 @@ export default function positionDropdown(element, opts) {
|
|
|
31
31
|
styles.top = anchorBounds.top
|
|
32
32
|
} else if (window.innerHeight - anchorBounds.bottom < 100) {
|
|
33
33
|
styles.top = anchorBounds.top - elementBounds.height - offset
|
|
34
|
+
styles.maxHeight = 240
|
|
34
35
|
} else {
|
|
35
36
|
styles.top = anchorBounds.bottom + offset
|
|
36
37
|
styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import Input from "../Form/Input.svelte"
|
|
3
|
+
import Icon from "../Icon/Icon.svelte"
|
|
4
|
+
import { notifications } from "../Stores/notifications"
|
|
5
|
+
|
|
6
|
+
export let label = null
|
|
7
|
+
export let value
|
|
8
|
+
|
|
9
|
+
const copyToClipboard = val => {
|
|
10
|
+
const dummy = document.createElement("textarea")
|
|
11
|
+
document.body.appendChild(dummy)
|
|
12
|
+
dummy.value = val
|
|
13
|
+
dummy.select()
|
|
14
|
+
document.execCommand("copy")
|
|
15
|
+
document.body.removeChild(dummy)
|
|
16
|
+
notifications.success(`Copied to clipboard`)
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<div>
|
|
21
|
+
<Input readonly {value} {label} />
|
|
22
|
+
<div class="icon" on:click={() => copyToClipboard(value)}>
|
|
23
|
+
<Icon size="S" name="Copy" />
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
div {
|
|
29
|
+
position: relative;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.icon {
|
|
33
|
+
right: 1px;
|
|
34
|
+
bottom: 1px;
|
|
35
|
+
position: absolute;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
align-items: center;
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: row;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
border-left: 1px solid var(--spectrum-alias-border-color);
|
|
42
|
+
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
|
|
43
|
+
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
|
|
44
|
+
width: 31px;
|
|
45
|
+
color: var(--spectrum-alias-text-color);
|
|
46
|
+
background-color: var(--spectrum-global-color-gray-75);
|
|
47
|
+
transition: background-color
|
|
48
|
+
var(--spectrum-global-animation-duration-100, 130ms),
|
|
49
|
+
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
|
|
50
|
+
border-color var(--spectrum-global-animation-duration-100, 130ms);
|
|
51
|
+
height: calc(var(--spectrum-alias-item-height-m) - 2px);
|
|
52
|
+
}
|
|
53
|
+
.icon:hover {
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
color: var(--spectrum-alias-text-color-hover);
|
|
56
|
+
background-color: var(--spectrum-global-color-gray-50);
|
|
57
|
+
border-color: var(--spectrum-alias-border-color-hover);
|
|
58
|
+
}
|
|
59
|
+
</style>
|
package/src/Modal/Modal.svelte
CHANGED
|
@@ -29,6 +29,14 @@
|
|
|
29
29
|
visible = false
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
export function toggle() {
|
|
33
|
+
if (visible) {
|
|
34
|
+
hide()
|
|
35
|
+
} else {
|
|
36
|
+
show()
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
32
40
|
export function cancel() {
|
|
33
41
|
if (!visible) {
|
|
34
42
|
return
|
|
@@ -61,7 +69,7 @@
|
|
|
61
69
|
}
|
|
62
70
|
}
|
|
63
71
|
|
|
64
|
-
setContext(Context.Modal, { show, hide, cancel })
|
|
72
|
+
setContext(Context.Modal, { show, hide, toggle, cancel })
|
|
65
73
|
|
|
66
74
|
onMount(() => {
|
|
67
75
|
document.addEventListener("keydown", handleKey)
|
package/src/index.js
CHANGED
|
@@ -67,6 +67,7 @@ export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
|
|
|
67
67
|
export { default as IconPicker } from "./IconPicker/IconPicker.svelte"
|
|
68
68
|
export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
|
|
69
69
|
export { default as Banner } from "./Banner/Banner.svelte"
|
|
70
|
+
export { default as CopyInput } from "./Input/CopyInput.svelte"
|
|
70
71
|
export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
|
|
71
72
|
export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
|
|
72
73
|
export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
|