@budibase/bbui 1.0.105-alpha.16 → 1.0.105-alpha.19
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 +35 -35
- package/dist/bbui.es.js.map +1 -1
- package/package.json +3 -3
- package/src/Layout/Layout.svelte +8 -0
- package/src/Table/InternalRenderer.svelte +12 -33
- package/src/Tabs/Tabs.svelte +1 -1
- package/src/helpers.js +26 -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": "1.0.105-alpha.
|
|
4
|
+
"version": "1.0.105-alpha.19",
|
|
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.105-alpha.
|
|
41
|
+
"@budibase/string-templates": "^1.0.105-alpha.19",
|
|
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": "31d2ae8c6b4628b020dc01f01acfc0b09a401456"
|
|
88
88
|
}
|
package/src/Layout/Layout.svelte
CHANGED
|
@@ -36,6 +36,10 @@
|
|
|
36
36
|
padding-left: var(--spacing-l);
|
|
37
37
|
padding-right: var(--spacing-l);
|
|
38
38
|
}
|
|
39
|
+
.paddingX-XL {
|
|
40
|
+
padding-left: var(--spacing-xl);
|
|
41
|
+
padding-right: var(--spacing-xl);
|
|
42
|
+
}
|
|
39
43
|
.paddingY-S {
|
|
40
44
|
padding-top: var(--spacing-s);
|
|
41
45
|
padding-bottom: var(--spacing-s);
|
|
@@ -48,6 +52,10 @@
|
|
|
48
52
|
padding-top: var(--spacing-l);
|
|
49
53
|
padding-bottom: var(--spacing-l);
|
|
50
54
|
}
|
|
55
|
+
.paddingY-XL {
|
|
56
|
+
padding-top: var(--spacing-xl);
|
|
57
|
+
padding-bottom: var(--spacing-xl);
|
|
58
|
+
}
|
|
51
59
|
.gap-XXS {
|
|
52
60
|
grid-gap: var(--spacing-xs);
|
|
53
61
|
}
|
|
@@ -1,42 +1,21 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import Icon from "../Icon/Icon.svelte"
|
|
3
|
+
import { copyToClipboard } from "../helpers"
|
|
3
4
|
import { notifications } from "../Stores/notifications"
|
|
5
|
+
|
|
4
6
|
export let value
|
|
5
7
|
|
|
6
|
-
const onClick = e => {
|
|
8
|
+
const onClick = async e => {
|
|
7
9
|
e.stopPropagation()
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
// Fall back to the textarea hack
|
|
18
|
-
let textArea = document.createElement("textarea")
|
|
19
|
-
textArea.value = value
|
|
20
|
-
textArea.style.position = "fixed"
|
|
21
|
-
textArea.style.left = "-9999px"
|
|
22
|
-
textArea.style.top = "-9999px"
|
|
23
|
-
document.body.appendChild(textArea)
|
|
24
|
-
textArea.focus()
|
|
25
|
-
textArea.select()
|
|
26
|
-
document.execCommand("copy")
|
|
27
|
-
textArea.remove()
|
|
28
|
-
res()
|
|
29
|
-
}
|
|
30
|
-
})
|
|
31
|
-
.then(() => {
|
|
32
|
-
notifications.success("Copied to clipboard")
|
|
33
|
-
})
|
|
34
|
-
.catch(() => {
|
|
35
|
-
notifications.error(
|
|
36
|
-
"Failed to copy to clipboard. Check the dev console for the value."
|
|
37
|
-
)
|
|
38
|
-
console.warn("Failed to copy the value", value)
|
|
39
|
-
})
|
|
10
|
+
try {
|
|
11
|
+
await copyToClipboard(value)
|
|
12
|
+
notifications.success("Copied to clipboard")
|
|
13
|
+
} catch (error) {
|
|
14
|
+
notifications.error(
|
|
15
|
+
"Failed to copy to clipboard. Check the dev console for the value."
|
|
16
|
+
)
|
|
17
|
+
console.warn("Failed to copy the value", value)
|
|
18
|
+
}
|
|
40
19
|
}
|
|
41
20
|
</script>
|
|
42
21
|
|
package/src/Tabs/Tabs.svelte
CHANGED
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
padding-left: var(--spacing-xl);
|
|
109
109
|
padding-right: var(--spacing-xl);
|
|
110
110
|
position: relative;
|
|
111
|
-
border-bottom: var(--
|
|
111
|
+
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
|
|
112
112
|
}
|
|
113
113
|
.spectrum-Tabs-content {
|
|
114
114
|
margin-top: var(--spectrum-global-dimension-static-size-150);
|
package/src/helpers.js
CHANGED
|
@@ -106,3 +106,29 @@ export const deepSet = (obj, key, value) => {
|
|
|
106
106
|
export const cloneDeep = obj => {
|
|
107
107
|
return JSON.parse(JSON.stringify(obj))
|
|
108
108
|
}
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Copies a value to the clipboard
|
|
112
|
+
* @param value the value to copy
|
|
113
|
+
*/
|
|
114
|
+
export const copyToClipboard = value => {
|
|
115
|
+
return new Promise(res => {
|
|
116
|
+
if (navigator.clipboard && window.isSecureContext) {
|
|
117
|
+
// Try using the clipboard API first
|
|
118
|
+
navigator.clipboard.writeText(value).then(res)
|
|
119
|
+
} else {
|
|
120
|
+
// Fall back to the textarea hack
|
|
121
|
+
let textArea = document.createElement("textarea")
|
|
122
|
+
textArea.value = value
|
|
123
|
+
textArea.style.position = "fixed"
|
|
124
|
+
textArea.style.left = "-9999px"
|
|
125
|
+
textArea.style.top = "-9999px"
|
|
126
|
+
document.body.appendChild(textArea)
|
|
127
|
+
textArea.focus()
|
|
128
|
+
textArea.select()
|
|
129
|
+
document.execCommand("copy")
|
|
130
|
+
textArea.remove()
|
|
131
|
+
res()
|
|
132
|
+
}
|
|
133
|
+
})
|
|
134
|
+
}
|