@nyaruka/temba-components 0.24.1 → 0.25.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/CHANGELOG.md +6 -0
- package/demo/index.html +136 -98
- package/dist/e4bb741a.js +356 -0
- package/dist/index.js +1 -1
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/dialog/Dialog.js +1 -1
- package/out-tsc/src/dialog/Dialog.js.map +1 -1
- package/out-tsc/src/options/Options.js +28 -4
- package/out-tsc/src/options/Options.js.map +1 -1
- package/out-tsc/src/select/Select.js +83 -40
- package/out-tsc/src/select/Select.js.map +1 -1
- package/out-tsc/test/temba-select.test.js +2 -1
- package/out-tsc/test/temba-select.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/select/expressions.png +0 -0
- package/screenshots/truth/select/functions.png +0 -0
- package/src/dialog/Dialog.ts +1 -1
- package/src/options/Options.ts +32 -8
- package/src/select/Select.ts +86 -42
- package/static/css/temba-components.css +1 -2
- package/test/temba-select.test.ts +3 -1
- package/test-assets/style.css +1 -1
- package/dist/85f2e730.js +0 -356
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [v0.25.0](https://github.com/nyaruka/temba-components/compare/v0.24.1...v0.25.0)
|
|
8
|
+
|
|
9
|
+
> 26 January 2022
|
|
10
|
+
|
|
11
|
+
- Add info text to select widget, animate open and close [`#148`](https://github.com/nyaruka/temba-components/pull/148)
|
|
12
|
+
|
|
7
13
|
#### [v0.24.1](https://github.com/nyaruka/temba-components/compare/v0.24.0...v0.24.1)
|
|
8
14
|
|
|
9
15
|
> 15 January 2022
|
package/demo/index.html
CHANGED
|
@@ -1,117 +1,155 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!DOCTYPE html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link
|
|
6
|
+
href="/sitestatic/css/temba-components.css"
|
|
7
|
+
rel="stylesheet"
|
|
8
|
+
type="text/css"
|
|
9
|
+
/>
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
<link
|
|
12
|
+
href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
|
|
13
|
+
rel="stylesheet"
|
|
14
|
+
/>
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
16
|
+
<style>
|
|
17
|
+
.example {
|
|
18
|
+
border: 0px solid gray;
|
|
19
|
+
padding: 10px;
|
|
20
|
+
max-width: 500px;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
<script type="module">
|
|
24
|
+
import '../out-tsc/temba-modules.js';
|
|
25
|
+
</script>
|
|
26
|
+
<script>
|
|
27
|
+
function handleColorChange(event) {
|
|
28
|
+
var color = event.target.values[0].name;
|
|
29
|
+
if (color == 'Green') {
|
|
30
|
+
event.target.infoText = 'Green is super dangerous!';
|
|
31
|
+
} else {
|
|
32
|
+
event.target.infoText = null;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
</head>
|
|
37
|
+
<body>
|
|
38
|
+
<temba-store
|
|
31
39
|
completion="/static/api/completion.json"
|
|
32
40
|
functions="/static/api/functions.json"
|
|
33
41
|
fields="/static/api/fields.json"
|
|
34
42
|
globals="/static/api/globals.json"
|
|
35
43
|
groups="/static/api/groups.json"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
<div class="example">
|
|
39
|
-
<temba-omnibox
|
|
40
|
-
placeholder='Contacts or Groups'
|
|
41
|
-
label="Recipients"
|
|
42
|
-
help_text="This is the helpful friendly book"
|
|
43
|
-
endpoint="/contact/omnibox/?v=2"
|
|
44
|
-
groups
|
|
45
|
-
contacts
|
|
46
|
-
></temba-omnibox>
|
|
47
|
-
</div>
|
|
48
|
-
<div class="example">
|
|
49
|
-
<temba-checkbox label="you betcha" checked></temba-checkbox>
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
<div class="example">
|
|
53
|
-
<temba-textinput value="plain text"></temba-textinput>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<div class="example">
|
|
57
|
-
<temba-completion value="you complete me @cont"></temba-completion>
|
|
58
|
-
</div>
|
|
59
|
-
|
|
44
|
+
></temba-store>
|
|
60
45
|
|
|
46
|
+
<div class="example">
|
|
47
|
+
<temba-omnibox
|
|
48
|
+
placeholder="Contacts or Groups"
|
|
49
|
+
label="Recipients"
|
|
50
|
+
help_text="This is the helpful friendly book"
|
|
51
|
+
endpoint="/contact/omnibox/?v=2"
|
|
52
|
+
groups
|
|
53
|
+
contacts
|
|
54
|
+
></temba-omnibox>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="example">
|
|
57
|
+
<temba-checkbox label="you betcha" checked></temba-checkbox>
|
|
58
|
+
</div>
|
|
61
59
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<temba-option name="Green" value="1"></temba-option>
|
|
66
|
-
<temba-option name="Blue" value="2"></temba-option>
|
|
67
|
-
</temba-select>
|
|
68
|
-
</div>
|
|
60
|
+
<div class="example">
|
|
61
|
+
<temba-textinput value="plain text"></temba-textinput>
|
|
62
|
+
</div>
|
|
69
63
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<temba-option name="Green" value="1"></temba-option>
|
|
74
|
-
<temba-option name="Blue" value="2"></temba-option>
|
|
75
|
-
</temba-select>
|
|
76
|
-
</div>
|
|
64
|
+
<div class="example">
|
|
65
|
+
<temba-completion value="you complete me @cont"></temba-completion>
|
|
66
|
+
</div>
|
|
77
67
|
|
|
68
|
+
<div class="example">
|
|
69
|
+
<temba-select
|
|
70
|
+
placeholder="Select a color"
|
|
71
|
+
info_text="Some colors are very dangerous, choose wisely"
|
|
72
|
+
onchange="handleColorChange(event)"
|
|
73
|
+
>
|
|
74
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
75
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
76
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
77
|
+
</temba-select>
|
|
78
|
+
</div>
|
|
78
79
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
<div class="example">
|
|
81
|
+
<temba-select placeholder="Select a color" clearable>
|
|
82
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
83
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
84
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
85
|
+
</temba-select>
|
|
86
|
+
</div>
|
|
86
87
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
88
|
+
<div class="example">
|
|
89
|
+
<temba-select
|
|
90
|
+
placeholder="Select a color"
|
|
91
|
+
expressions="message"
|
|
92
|
+
values='[{"name":"Red","value":"0"}]'
|
|
93
|
+
searchable
|
|
94
|
+
multi
|
|
95
|
+
disabled
|
|
96
|
+
>
|
|
97
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
98
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
99
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
100
|
+
</temba-select>
|
|
100
101
|
</div>
|
|
101
|
-
</div>
|
|
102
102
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
103
|
+
<div class="example">
|
|
104
|
+
<temba-select
|
|
105
|
+
name="Color"
|
|
106
|
+
label="Color"
|
|
107
|
+
help_text="I'm not really enabled at the moment"
|
|
108
|
+
placeholder="Select a color"
|
|
109
|
+
expressions="message"
|
|
110
|
+
values='[{"name":"Red","value":"0"}]'
|
|
111
|
+
searchable
|
|
112
|
+
multi
|
|
113
|
+
disabled
|
|
114
|
+
>
|
|
115
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
116
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
117
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
118
|
+
</temba-select>
|
|
119
|
+
</div>
|
|
114
120
|
|
|
121
|
+
<div class="example">
|
|
122
|
+
<script>
|
|
123
|
+
function toggleSelect(evt) {
|
|
124
|
+
document.getElementById('select-toggle').disabled = !evt.currentTarget
|
|
125
|
+
.checked;
|
|
126
|
+
}
|
|
127
|
+
</script>
|
|
128
|
+
<div style="display: flex; align-items: center">
|
|
129
|
+
<temba-checkbox onchange="toggleSelect(event)" checked></temba-checkbox>
|
|
130
|
+
<temba-select
|
|
131
|
+
style="margin-left: 10px"
|
|
132
|
+
id="select-toggle"
|
|
133
|
+
placeholder="Select a color"
|
|
134
|
+
expressions="message"
|
|
135
|
+
>
|
|
136
|
+
<temba-option name="Red" value="0"></temba-option>
|
|
137
|
+
<temba-option name="Green" value="1"></temba-option>
|
|
138
|
+
<temba-option name="Blue" value="2"></temba-option>
|
|
139
|
+
</temba-select>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
115
142
|
|
|
116
|
-
|
|
143
|
+
<div class="example">
|
|
144
|
+
<temba-textinput
|
|
145
|
+
name="start"
|
|
146
|
+
label="Start Time"
|
|
147
|
+
help_text="This is something you should think long and hard about"
|
|
148
|
+
placeholder="Put something down, for real"
|
|
149
|
+
value="2020-11-28 15:03"
|
|
150
|
+
clearable
|
|
151
|
+
datetimepicker
|
|
152
|
+
></temba-textinput>
|
|
153
|
+
</div>
|
|
154
|
+
</body>
|
|
117
155
|
</html>
|