@budibase/bbui 1.0.176-alpha.0 → 1.0.178-alpha.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": "1.0.
|
|
4
|
+
"version": "1.0.178-alpha.0",
|
|
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.
|
|
41
|
+
"@budibase/string-templates": "^1.0.178-alpha.0",
|
|
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": "c1da01986fb22dcdf29a10d441f0a2f0e35dbc2c"
|
|
88
88
|
}
|
package/src/Layout/Layout.svelte
CHANGED
|
@@ -40,6 +40,10 @@
|
|
|
40
40
|
padding-left: var(--spacing-xl);
|
|
41
41
|
padding-right: var(--spacing-xl);
|
|
42
42
|
}
|
|
43
|
+
.paddingX-XXL {
|
|
44
|
+
padding-left: var(--spectrum-alias-grid-gutter-large);
|
|
45
|
+
padding-right: var(--spectrum-alias-grid-gutter-large);
|
|
46
|
+
}
|
|
43
47
|
.paddingY-S {
|
|
44
48
|
padding-top: var(--spacing-s);
|
|
45
49
|
padding-bottom: var(--spacing-s);
|
|
@@ -56,6 +60,10 @@
|
|
|
56
60
|
padding-top: var(--spacing-xl);
|
|
57
61
|
padding-bottom: var(--spacing-xl);
|
|
58
62
|
}
|
|
63
|
+
.paddingY-XXL {
|
|
64
|
+
padding-top: var(--spectrum-alias-grid-gutter-large);
|
|
65
|
+
padding-bottom: var(--spectrum-alias-grid-gutter-large);
|
|
66
|
+
}
|
|
59
67
|
.gap-XXS {
|
|
60
68
|
grid-gap: var(--spacing-xs);
|
|
61
69
|
}
|
package/src/Layout/Page.svelte
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
export let wide = false
|
|
3
3
|
export let maxWidth = "80ch"
|
|
4
|
+
export let noPadding = false
|
|
4
5
|
</script>
|
|
5
6
|
|
|
6
|
-
<div style="--max-width: {maxWidth}" class:wide>
|
|
7
|
+
<div style="--max-width: {maxWidth}" class:wide class:noPadding>
|
|
7
8
|
<slot />
|
|
8
9
|
</div>
|
|
9
10
|
|
|
@@ -23,4 +24,9 @@
|
|
|
23
24
|
max-width: none;
|
|
24
25
|
margin: 0;
|
|
25
26
|
}
|
|
27
|
+
|
|
28
|
+
.noPadding {
|
|
29
|
+
padding: 0px;
|
|
30
|
+
margin: 0px;
|
|
31
|
+
}
|
|
26
32
|
</style>
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
export let icon = ""
|
|
8
8
|
export let selected = false
|
|
9
9
|
export let disabled = false
|
|
10
|
+
export let dataCy
|
|
10
11
|
</script>
|
|
11
12
|
|
|
12
13
|
<li
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
class:is-selected={selected}
|
|
15
16
|
class:is-disabled={disabled}
|
|
16
17
|
on:click
|
|
18
|
+
data-cy={dataCy}
|
|
17
19
|
>
|
|
18
20
|
{#if heading}
|
|
19
21
|
<h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">
|
package/src/Tabs/Tab.svelte
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
const dispatch = createEventDispatcher()
|
|
8
8
|
let selected = getContext("tab")
|
|
9
|
-
let
|
|
9
|
+
let tab_internal
|
|
10
10
|
let tabInfo
|
|
11
11
|
|
|
12
12
|
const setTabInfo = () => {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
// We just need to get this off the main thread to fix this, by using
|
|
17
17
|
// a 0ms timeout.
|
|
18
18
|
setTimeout(() => {
|
|
19
|
-
tabInfo =
|
|
19
|
+
tabInfo = tab_internal?.getBoundingClientRect()
|
|
20
20
|
if (tabInfo && $selected.title === title) {
|
|
21
21
|
$selected.info = tabInfo
|
|
22
22
|
}
|
|
@@ -27,14 +27,30 @@
|
|
|
27
27
|
setTabInfo()
|
|
28
28
|
})
|
|
29
29
|
|
|
30
|
+
//Ensure that the underline is in the correct location
|
|
31
|
+
$: {
|
|
32
|
+
if ($selected.title === title && tab_internal) {
|
|
33
|
+
if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
|
|
34
|
+
$selected = {
|
|
35
|
+
...$selected,
|
|
36
|
+
info: tab_internal.getBoundingClientRect(),
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
30
42
|
const onClick = () => {
|
|
31
|
-
$selected = {
|
|
43
|
+
$selected = {
|
|
44
|
+
...$selected,
|
|
45
|
+
title,
|
|
46
|
+
info: tab_internal.getBoundingClientRect(),
|
|
47
|
+
}
|
|
32
48
|
dispatch("click")
|
|
33
49
|
}
|
|
34
50
|
</script>
|
|
35
51
|
|
|
36
52
|
<div
|
|
37
|
-
bind:this={
|
|
53
|
+
bind:this={tab_internal}
|
|
38
54
|
on:click={onClick}
|
|
39
55
|
class:is-selected={$selected.title === title}
|
|
40
56
|
class="spectrum-Tabs-item"
|