@budibase/bbui 0.9.185-alpha.0 → 0.9.185-alpha.12
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": "0.9.185-alpha.
|
|
4
|
+
"version": "0.9.185-alpha.12",
|
|
5
5
|
"license": "AGPL-3.0",
|
|
6
6
|
"svelte": "src/index.js",
|
|
7
7
|
"module": "dist/bbui.es.js",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"svelte-flatpickr": "^3.2.3",
|
|
83
83
|
"svelte-portal": "^1.0.0"
|
|
84
84
|
},
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "c48ead6f4930f1dcaa2e6efc974bb38406e31e6d"
|
|
86
86
|
}
|
package/src/Label/Label.svelte
CHANGED
|
@@ -1,16 +1,67 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import "@spectrum-css/fieldlabel/dist/index-vars.css"
|
|
3
|
+
import Tooltip from "../Tooltip/Tooltip.svelte"
|
|
4
|
+
import Icon from "../Icon/Icon.svelte"
|
|
3
5
|
|
|
4
6
|
export let size = "M"
|
|
7
|
+
export let tooltip = ""
|
|
8
|
+
export let showTooltip = false
|
|
5
9
|
</script>
|
|
6
10
|
|
|
7
|
-
|
|
8
|
-
<
|
|
9
|
-
|
|
11
|
+
{#if tooltip}
|
|
12
|
+
<div class="container">
|
|
13
|
+
<label
|
|
14
|
+
for=""
|
|
15
|
+
class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
|
|
16
|
+
>
|
|
17
|
+
<slot />
|
|
18
|
+
</label>
|
|
19
|
+
<div class="icon-container">
|
|
20
|
+
<div
|
|
21
|
+
class="icon"
|
|
22
|
+
on:mouseover={() => (showTooltip = true)}
|
|
23
|
+
on:mouseleave={() => (showTooltip = false)}
|
|
24
|
+
>
|
|
25
|
+
<Icon name="InfoOutline" size="S" disabled={true} />
|
|
26
|
+
</div>
|
|
27
|
+
{#if showTooltip}
|
|
28
|
+
<div class="tooltip">
|
|
29
|
+
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
|
|
30
|
+
</div>
|
|
31
|
+
{/if}
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
{:else}
|
|
35
|
+
<label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
|
|
36
|
+
<slot />
|
|
37
|
+
</label>
|
|
38
|
+
{/if}
|
|
10
39
|
|
|
11
40
|
<style>
|
|
12
41
|
label {
|
|
13
42
|
padding: 0;
|
|
14
43
|
white-space: nowrap;
|
|
15
44
|
}
|
|
45
|
+
.container {
|
|
46
|
+
display: flex;
|
|
47
|
+
}
|
|
48
|
+
.icon-container {
|
|
49
|
+
position: relative;
|
|
50
|
+
display: flex;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
margin-top: 1px;
|
|
53
|
+
margin-left: 5px;
|
|
54
|
+
margin-right: 5px;
|
|
55
|
+
}
|
|
56
|
+
.tooltip {
|
|
57
|
+
position: absolute;
|
|
58
|
+
display: flex;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
top: 15px;
|
|
61
|
+
z-index: 1;
|
|
62
|
+
width: 160px;
|
|
63
|
+
}
|
|
64
|
+
.icon {
|
|
65
|
+
transform: scale(0.75);
|
|
66
|
+
}
|
|
16
67
|
</style>
|
|
@@ -3,12 +3,22 @@
|
|
|
3
3
|
|
|
4
4
|
export let direction = "top"
|
|
5
5
|
export let text = ""
|
|
6
|
+
export let textWrapping = false
|
|
6
7
|
</script>
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<
|
|
9
|
+
<!-- Showing / Hiding a text wrapped tooltip should be handled outside the component -->
|
|
10
|
+
{#if textWrapping}
|
|
11
|
+
<span class="spectrum-Tooltip spectrum-Tooltip--{direction} is-open">
|
|
11
12
|
<span class="spectrum-Tooltip-label">{text}</span>
|
|
12
13
|
<span class="spectrum-Tooltip-tip" />
|
|
13
|
-
</
|
|
14
|
-
|
|
14
|
+
</span>
|
|
15
|
+
{:else}
|
|
16
|
+
<!-- The default show on hover tooltip does not support text wrapping -->
|
|
17
|
+
<span class="u-tooltip-showOnHover tooltip">
|
|
18
|
+
<slot />
|
|
19
|
+
<div class={`spectrum-Tooltip spectrum-Tooltip--${direction}`}>
|
|
20
|
+
<span class="spectrum-Tooltip-label">{text}</span>
|
|
21
|
+
<span class="spectrum-Tooltip-tip" />
|
|
22
|
+
</div>
|
|
23
|
+
</span>
|
|
24
|
+
{/if}
|