@budibase/bbui 2.4.12-alpha.0 → 2.4.12-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/dist/bbui.es.js +3 -3
- package/dist/bbui.es.js.map +1 -1
- package/package.json +4 -4
- package/src/Input/CopyInput.svelte +59 -0
- package/src/index.js +1 -0
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.12-alpha.
|
|
4
|
+
"version": "2.4.12-alpha.2",
|
|
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": "2.4.12-alpha.
|
|
42
|
-
"@budibase/string-templates": "2.4.12-alpha.
|
|
41
|
+
"@budibase/shared-core": "2.4.12-alpha.2",
|
|
42
|
+
"@budibase/string-templates": "2.4.12-alpha.2",
|
|
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": "bd6522e1771b938709010069d0563cdb56507818"
|
|
94
94
|
}
|
|
@@ -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/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"
|