@budibase/bbui 1.0.50-alpha.4 → 1.0.50-alpha.5
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 +1 -1
- package/dist/bbui.es.js.map +1 -1
- package/package.json +2 -2
- package/src/Button/Button.svelte +76 -25
- package/src/Form/Core/DatePicker.svelte +72 -57
- package/src/Form/DatePicker.svelte +2 -0
- package/src/Table/DateTimeRenderer.svelte +10 -1
- package/src/Tooltip/TooltipWrapper.svelte +2 -1
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.50-alpha.
|
|
4
|
+
"version": "1.0.50-alpha.5",
|
|
5
5
|
"license": "MPL-2.0",
|
|
6
6
|
"svelte": "src/index.js",
|
|
7
7
|
"module": "dist/bbui.es.js",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"svelte-flatpickr": "^3.2.3",
|
|
84
84
|
"svelte-portal": "^1.0.0"
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "091100f9351739438a01e32ab71e6bbc6fc9ebb4"
|
|
87
87
|
}
|
package/src/Button/Button.svelte
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import "@spectrum-css/button/dist/index-vars.css"
|
|
3
|
+
import Tooltip from "../Tooltip/Tooltip.svelte"
|
|
3
4
|
|
|
4
5
|
export let disabled = false
|
|
5
6
|
export let size = "M"
|
|
@@ -11,36 +12,67 @@
|
|
|
11
12
|
export let quiet = false
|
|
12
13
|
export let icon = undefined
|
|
13
14
|
export let active = false
|
|
15
|
+
export let tooltip = undefined
|
|
16
|
+
|
|
17
|
+
let showTooltip = false
|
|
14
18
|
</script>
|
|
15
19
|
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
20
|
+
<div class:container={!!tooltip}>
|
|
21
|
+
<button
|
|
22
|
+
class:spectrum-Button--cta={cta}
|
|
23
|
+
class:spectrum-Button--primary={primary}
|
|
24
|
+
class:spectrum-Button--secondary={secondary}
|
|
25
|
+
class:spectrum-Button--warning={warning}
|
|
26
|
+
class:spectrum-Button--overBackground={overBackground}
|
|
27
|
+
class:spectrum-Button--quiet={quiet}
|
|
28
|
+
class:active
|
|
29
|
+
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
|
|
30
|
+
{disabled}
|
|
31
|
+
on:click|preventDefault
|
|
32
|
+
on:mouseover={() => (showTooltip = true)}
|
|
33
|
+
on:mouseleave={() => (showTooltip = false)}
|
|
34
|
+
>
|
|
35
|
+
{#if icon}
|
|
36
|
+
<svg
|
|
37
|
+
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
|
|
38
|
+
focusable="false"
|
|
39
|
+
aria-hidden="true"
|
|
40
|
+
aria-label={icon}
|
|
41
|
+
>
|
|
42
|
+
<use xlink:href="#spectrum-icon-18-{icon}" />
|
|
43
|
+
</svg>
|
|
44
|
+
{/if}
|
|
45
|
+
{#if $$slots}
|
|
46
|
+
<span class="spectrum-Button-label"><slot /></span>
|
|
47
|
+
{/if}
|
|
48
|
+
{#if !disabled && tooltip}
|
|
49
|
+
<div class="tooltip-icon">
|
|
50
|
+
<svg
|
|
51
|
+
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
|
|
52
|
+
focusable="false"
|
|
53
|
+
aria-hidden="true"
|
|
54
|
+
aria-label="Info"
|
|
55
|
+
>
|
|
56
|
+
<use xlink:href="#spectrum-icon-18-InfoOutline" />
|
|
57
|
+
</svg>
|
|
58
|
+
</div>
|
|
59
|
+
{/if}
|
|
60
|
+
</button>
|
|
61
|
+
{#if showTooltip && tooltip}
|
|
62
|
+
<div class="position">
|
|
63
|
+
<div class="tooltip">
|
|
64
|
+
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
40
67
|
{/if}
|
|
41
|
-
</
|
|
68
|
+
</div>
|
|
42
69
|
|
|
43
70
|
<style>
|
|
71
|
+
.container {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
}
|
|
44
76
|
.spectrum-Button-label {
|
|
45
77
|
white-space: nowrap;
|
|
46
78
|
overflow: hidden;
|
|
@@ -49,4 +81,23 @@
|
|
|
49
81
|
.active {
|
|
50
82
|
color: var(--spectrum-global-color-blue-600) !important;
|
|
51
83
|
}
|
|
84
|
+
.tooltip {
|
|
85
|
+
position: absolute;
|
|
86
|
+
display: flex;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
z-index: 100;
|
|
89
|
+
width: 160px;
|
|
90
|
+
text-align: center;
|
|
91
|
+
transform: translateX(-50%);
|
|
92
|
+
top: -5px;
|
|
93
|
+
}
|
|
94
|
+
.position {
|
|
95
|
+
position: relative;
|
|
96
|
+
width: 0;
|
|
97
|
+
height: 0;
|
|
98
|
+
}
|
|
99
|
+
.tooltip-icon {
|
|
100
|
+
padding-left: var(--spacing-m);
|
|
101
|
+
line-height: 0;
|
|
102
|
+
}
|
|
52
103
|
</style>
|
|
@@ -14,16 +14,20 @@
|
|
|
14
14
|
export let value = null
|
|
15
15
|
export let placeholder = null
|
|
16
16
|
export let appendTo = undefined
|
|
17
|
+
export let timeOnly = false
|
|
17
18
|
|
|
18
19
|
const dispatch = createEventDispatcher()
|
|
19
20
|
const flatpickrId = `${generateID()}-wrapper`
|
|
20
21
|
let open = false
|
|
21
|
-
let flatpickr
|
|
22
|
+
let flatpickr, flatpickrOptions, isTimeOnly
|
|
23
|
+
|
|
24
|
+
$: isTimeOnly = !timeOnly && value ? !isNaN(new Date(`0-${value}`)) : timeOnly
|
|
22
25
|
$: flatpickrOptions = {
|
|
23
26
|
element: `#${flatpickrId}`,
|
|
24
|
-
enableTime: enableTime || false,
|
|
27
|
+
enableTime: isTimeOnly || enableTime || false,
|
|
28
|
+
noCalendar: isTimeOnly || false,
|
|
25
29
|
altInput: true,
|
|
26
|
-
altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
|
|
30
|
+
altFormat: isTimeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
|
|
27
31
|
wrap: true,
|
|
28
32
|
appendTo,
|
|
29
33
|
disableMobile: "true",
|
|
@@ -35,6 +39,11 @@
|
|
|
35
39
|
if (newValue) {
|
|
36
40
|
newValue = newValue.toISOString()
|
|
37
41
|
}
|
|
42
|
+
// if time only set date component to today
|
|
43
|
+
if (timeOnly) {
|
|
44
|
+
const todayDate = new Date().toISOString().split("T")[0]
|
|
45
|
+
newValue = `${todayDate}T${newValue.split("T")[1]}`
|
|
46
|
+
}
|
|
38
47
|
dispatch("change", newValue)
|
|
39
48
|
}
|
|
40
49
|
|
|
@@ -67,7 +76,11 @@
|
|
|
67
76
|
return null
|
|
68
77
|
}
|
|
69
78
|
let date
|
|
70
|
-
|
|
79
|
+
let time = new Date(`0-${val}`)
|
|
80
|
+
// it is a string like 00:00:00, just time
|
|
81
|
+
if (timeOnly || (typeof val === "string" && !isNaN(time))) {
|
|
82
|
+
date = time
|
|
83
|
+
} else if (val instanceof Date) {
|
|
71
84
|
// Use real date obj if already parsed
|
|
72
85
|
date = val
|
|
73
86
|
} else if (isNaN(val)) {
|
|
@@ -77,7 +90,7 @@
|
|
|
77
90
|
// Treat as numerical timestamp
|
|
78
91
|
date = new Date(parseInt(val))
|
|
79
92
|
}
|
|
80
|
-
|
|
93
|
+
time = date.getTime()
|
|
81
94
|
if (isNaN(time)) {
|
|
82
95
|
return null
|
|
83
96
|
}
|
|
@@ -88,69 +101,71 @@
|
|
|
88
101
|
}
|
|
89
102
|
</script>
|
|
90
103
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<div
|
|
101
|
-
id={flatpickrId}
|
|
102
|
-
class:is-disabled={disabled}
|
|
103
|
-
class:is-invalid={!!error}
|
|
104
|
-
class="flatpickr spectrum-InputGroup spectrum-Datepicker"
|
|
105
|
-
class:is-focused={open}
|
|
106
|
-
aria-readonly="false"
|
|
107
|
-
aria-required="false"
|
|
108
|
-
aria-haspopup="true"
|
|
104
|
+
{#key isTimeOnly}
|
|
105
|
+
<Flatpickr
|
|
106
|
+
bind:flatpickr
|
|
107
|
+
value={parseDate(value)}
|
|
108
|
+
on:open={onOpen}
|
|
109
|
+
on:close={onClose}
|
|
110
|
+
options={flatpickrOptions}
|
|
111
|
+
on:change={handleChange}
|
|
112
|
+
element={`#${flatpickrId}`}
|
|
109
113
|
>
|
|
110
114
|
<div
|
|
111
|
-
|
|
112
|
-
class="spectrum-Textfield spectrum-InputGroup-textfield"
|
|
115
|
+
id={flatpickrId}
|
|
113
116
|
class:is-disabled={disabled}
|
|
114
117
|
class:is-invalid={!!error}
|
|
118
|
+
class="flatpickr spectrum-InputGroup spectrum-Datepicker"
|
|
119
|
+
class:is-focused={open}
|
|
120
|
+
aria-readonly="false"
|
|
121
|
+
aria-required="false"
|
|
122
|
+
aria-haspopup="true"
|
|
115
123
|
>
|
|
116
|
-
|
|
124
|
+
<div
|
|
125
|
+
on:click={flatpickr?.open}
|
|
126
|
+
class="spectrum-Textfield spectrum-InputGroup-textfield"
|
|
127
|
+
class:is-disabled={disabled}
|
|
128
|
+
class:is-invalid={!!error}
|
|
129
|
+
>
|
|
130
|
+
{#if !!error}
|
|
131
|
+
<svg
|
|
132
|
+
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
|
|
133
|
+
focusable="false"
|
|
134
|
+
aria-hidden="true"
|
|
135
|
+
>
|
|
136
|
+
<use xlink:href="#spectrum-icon-18-Alert" />
|
|
137
|
+
</svg>
|
|
138
|
+
{/if}
|
|
139
|
+
<input
|
|
140
|
+
data-input
|
|
141
|
+
type="text"
|
|
142
|
+
{disabled}
|
|
143
|
+
class="spectrum-Textfield-input spectrum-InputGroup-input"
|
|
144
|
+
{placeholder}
|
|
145
|
+
{id}
|
|
146
|
+
{value}
|
|
147
|
+
/>
|
|
148
|
+
</div>
|
|
149
|
+
<button
|
|
150
|
+
type="button"
|
|
151
|
+
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
|
|
152
|
+
tabindex="-1"
|
|
153
|
+
{disabled}
|
|
154
|
+
class:is-invalid={!!error}
|
|
155
|
+
on:click={flatpickr?.open}
|
|
156
|
+
>
|
|
117
157
|
<svg
|
|
118
|
-
class="spectrum-Icon spectrum-Icon--sizeM
|
|
158
|
+
class="spectrum-Icon spectrum-Icon--sizeM"
|
|
119
159
|
focusable="false"
|
|
120
160
|
aria-hidden="true"
|
|
161
|
+
aria-label="Calendar"
|
|
121
162
|
>
|
|
122
|
-
<use xlink:href="#spectrum-icon-18-
|
|
163
|
+
<use xlink:href="#spectrum-icon-18-Calendar" />
|
|
123
164
|
</svg>
|
|
124
|
-
|
|
125
|
-
<input
|
|
126
|
-
data-input
|
|
127
|
-
type="text"
|
|
128
|
-
{disabled}
|
|
129
|
-
class="spectrum-Textfield-input spectrum-InputGroup-input"
|
|
130
|
-
{placeholder}
|
|
131
|
-
{id}
|
|
132
|
-
{value}
|
|
133
|
-
/>
|
|
165
|
+
</button>
|
|
134
166
|
</div>
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
|
|
138
|
-
tabindex="-1"
|
|
139
|
-
{disabled}
|
|
140
|
-
class:is-invalid={!!error}
|
|
141
|
-
on:click={flatpickr?.open}
|
|
142
|
-
>
|
|
143
|
-
<svg
|
|
144
|
-
class="spectrum-Icon spectrum-Icon--sizeM"
|
|
145
|
-
focusable="false"
|
|
146
|
-
aria-hidden="true"
|
|
147
|
-
aria-label="Calendar"
|
|
148
|
-
>
|
|
149
|
-
<use xlink:href="#spectrum-icon-18-Calendar" />
|
|
150
|
-
</svg>
|
|
151
|
-
</button>
|
|
152
|
-
</div>
|
|
153
|
-
</Flatpickr>
|
|
167
|
+
</Flatpickr>
|
|
168
|
+
{/key}
|
|
154
169
|
{#if open}
|
|
155
170
|
<div class="overlay" on:mousedown|self={flatpickr?.close} />
|
|
156
171
|
{/if}
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
export let disabled = false
|
|
10
10
|
export let error = null
|
|
11
11
|
export let enableTime = true
|
|
12
|
+
export let timeOnly = false
|
|
12
13
|
export let placeholder = null
|
|
13
14
|
export let appendTo = undefined
|
|
14
15
|
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
{value}
|
|
28
29
|
{placeholder}
|
|
29
30
|
{enableTime}
|
|
31
|
+
{timeOnly}
|
|
30
32
|
{appendTo}
|
|
31
33
|
on:change={onChange}
|
|
32
34
|
/>
|
|
@@ -2,9 +2,18 @@
|
|
|
2
2
|
import dayjs from "dayjs"
|
|
3
3
|
|
|
4
4
|
export let value
|
|
5
|
+
|
|
6
|
+
// adding the 0- will turn a string like 00:00:00 into a valid ISO
|
|
7
|
+
// date, but will make actual ISO dates invalid
|
|
8
|
+
$: time = new Date(`0-${value}`)
|
|
9
|
+
$: isTime = !isNaN(time)
|
|
5
10
|
</script>
|
|
6
11
|
|
|
7
|
-
<div>
|
|
12
|
+
<div>
|
|
13
|
+
{dayjs(isTime ? time : value).format(
|
|
14
|
+
isTime ? "HH:mm:ss" : "MMMM D YYYY, HH:mm"
|
|
15
|
+
)}
|
|
16
|
+
</div>
|
|
8
17
|
|
|
9
18
|
<style>
|
|
10
19
|
div {
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
class:icon-small={size === "M" || size === "S"}
|
|
18
18
|
on:mouseover={() => (showTooltip = true)}
|
|
19
19
|
on:mouseleave={() => (showTooltip = false)}
|
|
20
|
+
on:focus
|
|
20
21
|
>
|
|
21
22
|
<Icon name="InfoOutline" size="S" disabled={true} />
|
|
22
23
|
</div>
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
display: flex;
|
|
48
49
|
justify-content: center;
|
|
49
50
|
top: 15px;
|
|
50
|
-
z-index:
|
|
51
|
+
z-index: 100;
|
|
51
52
|
width: 160px;
|
|
52
53
|
}
|
|
53
54
|
.icon {
|