glimpse-sdk 0.5.0 → 0.7.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/README.md +1 -1
- package/dist/src/app.d.ts +16 -12
- package/dist/src/app.js +83 -7
- package/dist/src/events.d.ts +1 -1
- package/dist/src/events.js +1 -1
- package/dist/src/index.d.ts +4 -4
- package/dist/src/index.js +4 -4
- package/dist/src/protocol.d.ts +2 -15
- package/dist/src/protocol.js +1 -18
- package/dist/src/widgets.d.ts +415 -256
- package/dist/src/widgets.js +379 -457
- package/package.json +1 -1
- package/src/app.ts +94 -17
- package/src/events.ts +2 -2
- package/src/index.ts +39 -36
- package/src/protocol.ts +2 -23
- package/src/widgets.ts +334 -787
package/dist/src/widgets.js
CHANGED
|
@@ -1,680 +1,602 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
if (props.vexpand !== undefined)
|
|
9
|
-
payload.vexpand = props.vexpand;
|
|
10
|
-
if (props.halign !== undefined)
|
|
11
|
-
payload.halign = props.halign;
|
|
12
|
-
if (props.valign !== undefined)
|
|
13
|
-
payload.valign = props.valign;
|
|
14
|
-
if (props.tooltip !== undefined)
|
|
15
|
-
payload.tooltip = props.tooltip;
|
|
16
|
-
if (props.variant !== undefined)
|
|
17
|
-
payload.variant = props.variant;
|
|
18
|
-
return payload;
|
|
19
|
-
}
|
|
20
|
-
class WidgetBase {
|
|
1
|
+
export class InlineHandlerRegistry {
|
|
2
|
+
handlers = new Map();
|
|
3
|
+
add(event, id, handler) {
|
|
4
|
+
this.handlers.set(`${event}:${id}`, handler);
|
|
5
|
+
}
|
|
6
|
+
}
|
|
7
|
+
export class WidgetBase {
|
|
21
8
|
common;
|
|
22
9
|
constructor(common = {}) {
|
|
23
10
|
this.common = common;
|
|
24
11
|
}
|
|
25
|
-
|
|
26
|
-
|
|
12
|
+
bindHandlers(_registry, _path) { }
|
|
13
|
+
toProtocol() {
|
|
14
|
+
return { type: this.type, data: this.data() };
|
|
15
|
+
}
|
|
16
|
+
commonData() {
|
|
17
|
+
const out = {};
|
|
18
|
+
if (this.common.visible !== undefined)
|
|
19
|
+
out.visible = this.common.visible;
|
|
20
|
+
if (this.common.tooltip !== undefined)
|
|
21
|
+
out.tooltip = this.common.tooltip;
|
|
22
|
+
if (this.common.css_classes?.length)
|
|
23
|
+
out.css_classes = this.common.css_classes;
|
|
24
|
+
if (this.common.styles && Object.keys(this.common.styles).length > 0)
|
|
25
|
+
out.styles = this.common.styles;
|
|
26
|
+
return out;
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
+
const child = (node) => node?.toProtocol();
|
|
30
|
+
const children = (nodes) => nodes.map((node) => node.toProtocol());
|
|
29
31
|
export class Label extends WidgetBase {
|
|
30
|
-
|
|
32
|
+
type = "label";
|
|
31
33
|
options;
|
|
32
|
-
constructor(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
this.options =
|
|
34
|
+
constructor(options) {
|
|
35
|
+
const normalized = typeof options === "string" ? { label: options } : options;
|
|
36
|
+
super(normalized);
|
|
37
|
+
this.options = normalized;
|
|
36
38
|
}
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
if (this.options.wrap !== undefined)
|
|
40
|
-
payload.wrap = this.options.wrap;
|
|
39
|
+
data() {
|
|
40
|
+
const out = { ...this.commonData(), label: this.options.label };
|
|
41
41
|
if (this.options.xalign !== undefined)
|
|
42
|
-
|
|
43
|
-
if (this.options.
|
|
44
|
-
|
|
45
|
-
return
|
|
42
|
+
out.xalign = this.options.xalign;
|
|
43
|
+
if (this.options.wrap !== undefined)
|
|
44
|
+
out.wrap = this.options.wrap;
|
|
45
|
+
return out;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
export class
|
|
49
|
-
icon;
|
|
48
|
+
export class Header extends WidgetBase {
|
|
50
49
|
options;
|
|
51
|
-
|
|
50
|
+
type = "header";
|
|
51
|
+
constructor(options) {
|
|
52
52
|
super(options);
|
|
53
|
-
this.icon = icon;
|
|
54
53
|
this.options = options;
|
|
55
54
|
}
|
|
56
|
-
|
|
57
|
-
const payload = this.withCommon({ icon: this.icon.toProtocol() });
|
|
58
|
-
if (this.options.pixel_size !== undefined)
|
|
59
|
-
payload.pixel_size = this.options.pixel_size;
|
|
60
|
-
return { type: "image", data: payload };
|
|
61
|
-
}
|
|
55
|
+
data() { return { ...this.commonData(), label: this.options.label }; }
|
|
62
56
|
}
|
|
63
|
-
export class
|
|
57
|
+
export class Hero extends WidgetBase {
|
|
64
58
|
options;
|
|
59
|
+
type = "hero";
|
|
65
60
|
constructor(options) {
|
|
66
61
|
super(options);
|
|
67
62
|
this.options = options;
|
|
68
63
|
}
|
|
69
|
-
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
if (
|
|
77
|
-
|
|
78
|
-
return
|
|
64
|
+
data() {
|
|
65
|
+
const out = { ...this.commonData(), title: this.options.title, subtitle: this.options.subtitle ?? "" };
|
|
66
|
+
for (const key of ["id", "icon", "icon_size", "toggle", "toggle_sensitive", "separator"]) {
|
|
67
|
+
if (this.options[key] !== undefined)
|
|
68
|
+
out[key] = this.options[key];
|
|
69
|
+
}
|
|
70
|
+
const trailing = child(this.options.trailing);
|
|
71
|
+
if (trailing)
|
|
72
|
+
out.trailing = trailing;
|
|
73
|
+
return out;
|
|
74
|
+
}
|
|
75
|
+
bindHandlers(registry, path) {
|
|
76
|
+
if (this.options.id && this.options.on_toggle)
|
|
77
|
+
registry.add("toggle", this.options.id, this.options.on_toggle);
|
|
78
|
+
this.options.trailing?.bindHandlers(registry, [...path, 0]);
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
|
-
export class
|
|
81
|
+
export class Badge extends WidgetBase {
|
|
82
82
|
options;
|
|
83
|
+
type = "badge";
|
|
83
84
|
constructor(options) {
|
|
84
85
|
super(options);
|
|
85
86
|
this.options = options;
|
|
86
87
|
}
|
|
87
|
-
|
|
88
|
-
return {
|
|
89
|
-
type: "level_bar",
|
|
90
|
-
data: this.withCommon({
|
|
91
|
-
value: this.options.value,
|
|
92
|
-
min: this.options.min ?? 0,
|
|
93
|
-
max: this.options.max ?? 1,
|
|
94
|
-
mode: this.options.mode ?? "continuous",
|
|
95
|
-
}),
|
|
96
|
-
};
|
|
97
|
-
}
|
|
88
|
+
data() { return { ...this.commonData(), label: this.options.label, kind: this.options.kind ?? "default" }; }
|
|
98
89
|
}
|
|
99
|
-
export class
|
|
90
|
+
export class StatusDot extends WidgetBase {
|
|
100
91
|
options;
|
|
101
|
-
|
|
92
|
+
type = "status_dot";
|
|
93
|
+
constructor(options = {}) {
|
|
102
94
|
super(options);
|
|
103
95
|
this.options = options;
|
|
104
96
|
}
|
|
105
|
-
|
|
106
|
-
const payload = this.withCommon({ path: this.options.path });
|
|
107
|
-
if (this.options.content_fit !== undefined)
|
|
108
|
-
payload.content_fit = this.options.content_fit;
|
|
109
|
-
return { type: "picture", data: payload };
|
|
110
|
-
}
|
|
97
|
+
data() { return { ...this.commonData(), status: this.options.status ?? "neutral" }; }
|
|
111
98
|
}
|
|
112
|
-
export class
|
|
99
|
+
export class PanelIndicator extends WidgetBase {
|
|
113
100
|
options;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
super(
|
|
101
|
+
type = "panel_indicator";
|
|
102
|
+
constructor(options) {
|
|
103
|
+
super(options);
|
|
117
104
|
this.options = options;
|
|
118
105
|
}
|
|
119
|
-
|
|
120
|
-
const {
|
|
121
|
-
const
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
106
|
+
data() {
|
|
107
|
+
const out = { ...this.commonData(), active: this.options.active ?? false, checked: this.options.checked ?? false, needs_attention: this.options.needs_attention ?? false };
|
|
108
|
+
for (const key of ["id", "icon", "label"])
|
|
109
|
+
if (this.options[key] !== undefined)
|
|
110
|
+
out[key] = this.options[key];
|
|
111
|
+
const extra = child(this.options.extra);
|
|
112
|
+
if (extra)
|
|
113
|
+
out.extra = extra;
|
|
114
|
+
return out;
|
|
115
|
+
}
|
|
116
|
+
bindHandlers(registry, path) {
|
|
117
|
+
if (this.options.id && this.options.on_click)
|
|
118
|
+
registry.add("click", this.options.id, this.options.on_click);
|
|
119
|
+
this.options.extra?.bindHandlers(registry, [...path, 0]);
|
|
131
120
|
}
|
|
132
121
|
}
|
|
133
|
-
export class
|
|
122
|
+
export class EmptyState extends WidgetBase {
|
|
134
123
|
options;
|
|
124
|
+
type = "empty_state";
|
|
135
125
|
constructor(options) {
|
|
136
126
|
super(options);
|
|
137
127
|
this.options = options;
|
|
138
128
|
}
|
|
139
|
-
|
|
140
|
-
const
|
|
141
|
-
if (this.options.
|
|
142
|
-
|
|
143
|
-
return
|
|
129
|
+
data() {
|
|
130
|
+
const out = { ...this.commonData(), title: this.options.title };
|
|
131
|
+
if (this.options.subtitle !== undefined)
|
|
132
|
+
out.subtitle = this.options.subtitle;
|
|
133
|
+
return out;
|
|
144
134
|
}
|
|
145
135
|
}
|
|
146
|
-
export class
|
|
136
|
+
export class Spinner extends WidgetBase {
|
|
147
137
|
options;
|
|
148
|
-
|
|
138
|
+
type = "spinner";
|
|
139
|
+
constructor(options = {}) {
|
|
149
140
|
super(options);
|
|
150
141
|
this.options = options;
|
|
151
142
|
}
|
|
152
|
-
|
|
153
|
-
return {
|
|
154
|
-
type: "expander",
|
|
155
|
-
data: this.withCommon({
|
|
156
|
-
label: this.options.label,
|
|
157
|
-
expanded: this.options.expanded ?? false,
|
|
158
|
-
child: this.options.child.toProtocol(),
|
|
159
|
-
}),
|
|
160
|
-
};
|
|
161
|
-
}
|
|
143
|
+
data() { return { ...this.commonData(), spinning: this.options.spinning ?? true }; }
|
|
162
144
|
}
|
|
163
|
-
export class
|
|
145
|
+
export class Meter extends WidgetBase {
|
|
164
146
|
options;
|
|
165
|
-
|
|
147
|
+
type = "meter";
|
|
148
|
+
constructor(options = {}) {
|
|
166
149
|
super(options);
|
|
167
150
|
this.options = options;
|
|
168
151
|
}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
152
|
+
data() {
|
|
153
|
+
const out = {
|
|
154
|
+
...this.commonData(),
|
|
155
|
+
label: this.options.label ?? "",
|
|
156
|
+
value: this.options.value ?? 0,
|
|
157
|
+
min: this.options.min ?? 0,
|
|
158
|
+
max: this.options.max ?? 1,
|
|
159
|
+
step: this.options.step ?? 0.01,
|
|
160
|
+
interactive: this.options.interactive ?? this.options.on_change !== undefined,
|
|
178
161
|
};
|
|
162
|
+
for (const key of ["id", "icon", "text"])
|
|
163
|
+
if (this.options[key] !== undefined)
|
|
164
|
+
out[key] = this.options[key];
|
|
165
|
+
return out;
|
|
166
|
+
}
|
|
167
|
+
bindHandlers(registry, _path) {
|
|
168
|
+
if (this.options.id && this.options.on_change)
|
|
169
|
+
registry.add("change", this.options.id, this.options.on_change);
|
|
179
170
|
}
|
|
180
171
|
}
|
|
181
|
-
export class
|
|
172
|
+
export class Separator extends WidgetBase {
|
|
173
|
+
type = "separator";
|
|
174
|
+
constructor(common = {}) { super(common); }
|
|
175
|
+
data() { return this.commonData(); }
|
|
176
|
+
}
|
|
177
|
+
export class Scroll extends WidgetBase {
|
|
182
178
|
options;
|
|
179
|
+
type = "scroll";
|
|
183
180
|
constructor(options) {
|
|
184
181
|
super(options);
|
|
185
182
|
this.options = options;
|
|
186
183
|
}
|
|
187
|
-
toProtocol()
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
payload.label = this.options.label;
|
|
191
|
-
if (this.options.icon !== undefined)
|
|
192
|
-
payload.icon = this.options.icon;
|
|
193
|
-
return { type: "menu_button", data: payload };
|
|
184
|
+
data() { return { ...this.commonData(), child: this.options.child.toProtocol() }; }
|
|
185
|
+
bindHandlers(registry, path) {
|
|
186
|
+
this.options.child.bindHandlers(registry, [...path, 0]);
|
|
194
187
|
}
|
|
195
188
|
}
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
toProtocol() {
|
|
203
|
-
const payload = this.withCommon({ active: this.options.active ?? false });
|
|
204
|
-
if (this.options.label !== undefined)
|
|
205
|
-
payload.label = this.options.label;
|
|
206
|
-
return { type: "switch", data: payload };
|
|
189
|
+
class ChildrenWidget extends WidgetBase {
|
|
190
|
+
constructor(common = {}) { super(common); this.kids = common.children ?? []; }
|
|
191
|
+
kids;
|
|
192
|
+
data() { return { ...this.commonData(), children: children(this.kids) }; }
|
|
193
|
+
bindHandlers(registry, path) {
|
|
194
|
+
this.kids.forEach((kid, index) => kid.bindHandlers(registry, [...path, index]));
|
|
207
195
|
}
|
|
208
196
|
}
|
|
209
|
-
export class
|
|
197
|
+
export class Row extends ChildrenWidget {
|
|
198
|
+
type = "row";
|
|
199
|
+
}
|
|
200
|
+
export class Column extends ChildrenWidget {
|
|
201
|
+
type = "column";
|
|
202
|
+
}
|
|
203
|
+
export class BoxedList extends ChildrenWidget {
|
|
204
|
+
type = "boxed_list";
|
|
205
|
+
}
|
|
206
|
+
export class ButtonRow extends ChildrenWidget {
|
|
207
|
+
type = "button_row";
|
|
208
|
+
}
|
|
209
|
+
export class CircleBox extends WidgetBase {
|
|
210
210
|
options;
|
|
211
|
-
|
|
211
|
+
type = "circle_box";
|
|
212
|
+
constructor(options) {
|
|
212
213
|
super(options);
|
|
213
214
|
this.options = options;
|
|
214
215
|
}
|
|
215
|
-
|
|
216
|
-
const
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
return { type: "toggle_button", data: payload };
|
|
216
|
+
data() {
|
|
217
|
+
const out = this.commonData();
|
|
218
|
+
out.color = this.options.color;
|
|
219
|
+
return out;
|
|
220
220
|
}
|
|
221
221
|
}
|
|
222
|
-
export class
|
|
222
|
+
export class Container extends ChildrenWidget {
|
|
223
|
+
type = "container";
|
|
224
|
+
}
|
|
225
|
+
export class PopoverShell extends ChildrenWidget {
|
|
223
226
|
options;
|
|
227
|
+
type = "popover_shell";
|
|
224
228
|
constructor(options = {}) {
|
|
225
229
|
super(options);
|
|
226
230
|
this.options = options;
|
|
227
231
|
}
|
|
228
|
-
|
|
229
|
-
const
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
return { type: "slider", data: payload };
|
|
232
|
+
data() {
|
|
233
|
+
const out = { ...super.data(), size: this.options.size ?? "medium" };
|
|
234
|
+
if ((this.options.footer ?? []).length > 0)
|
|
235
|
+
out.footer = children(this.options.footer ?? []);
|
|
236
|
+
if (this.options.footer_visible)
|
|
237
|
+
out.footer_visible = this.options.footer_visible;
|
|
238
|
+
return out;
|
|
239
|
+
}
|
|
240
|
+
bindHandlers(registry, path) {
|
|
241
|
+
super.bindHandlers(registry, path);
|
|
242
|
+
(this.options.footer ?? []).forEach((kid, index) => kid.bindHandlers(registry, [...path, this.kids.length + index]));
|
|
240
243
|
}
|
|
241
244
|
}
|
|
242
|
-
export class
|
|
245
|
+
export class Tile extends WidgetBase {
|
|
243
246
|
options;
|
|
244
|
-
|
|
247
|
+
type = "tile";
|
|
248
|
+
constructor(options) {
|
|
245
249
|
super(options);
|
|
246
250
|
this.options = options;
|
|
247
251
|
}
|
|
248
|
-
|
|
249
|
-
const
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
this.label = label;
|
|
252
|
+
data() {
|
|
253
|
+
const out = { ...this.commonData(), primary: this.options.primary, activatable: this.options.activatable ?? false };
|
|
254
|
+
for (const key of ["id", "secondary", "left_icon"])
|
|
255
|
+
if (this.options[key] !== undefined)
|
|
256
|
+
out[key] = this.options[key];
|
|
257
|
+
const left = child(this.options.left);
|
|
258
|
+
const right = child(this.options.right);
|
|
259
|
+
if (left)
|
|
260
|
+
out.left = left;
|
|
261
|
+
if (right)
|
|
262
|
+
out.right = right;
|
|
263
|
+
return out;
|
|
261
264
|
}
|
|
262
|
-
|
|
263
|
-
|
|
265
|
+
bindHandlers(registry, path) {
|
|
266
|
+
if (this.options.id && this.options.on_click)
|
|
267
|
+
registry.add("click", this.options.id, this.options.on_click);
|
|
268
|
+
this.options.left?.bindHandlers(registry, [...path, 0]);
|
|
269
|
+
this.options.right?.bindHandlers(registry, [...path, 1]);
|
|
264
270
|
}
|
|
265
271
|
}
|
|
266
|
-
export class
|
|
272
|
+
export class SegmentedTile extends Tile {
|
|
267
273
|
options;
|
|
268
|
-
|
|
274
|
+
type = "segmented_tile";
|
|
275
|
+
constructor(options) {
|
|
269
276
|
super(options);
|
|
270
277
|
this.options = options;
|
|
271
278
|
}
|
|
272
|
-
|
|
273
|
-
const
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
return
|
|
279
|
+
data() {
|
|
280
|
+
const out = super.data();
|
|
281
|
+
const nested = child(this.options.child);
|
|
282
|
+
if (nested)
|
|
283
|
+
out.child = nested;
|
|
284
|
+
out.expanded = this.options.expanded ?? false;
|
|
285
|
+
return out;
|
|
286
|
+
}
|
|
287
|
+
bindHandlers(registry, path) {
|
|
288
|
+
super.bindHandlers(registry, path);
|
|
289
|
+
if (this.options.id && this.options.on_toggle)
|
|
290
|
+
registry.add("toggle", this.options.id, this.options.on_toggle);
|
|
291
|
+
this.options.child?.bindHandlers(registry, [...path, 2]);
|
|
279
292
|
}
|
|
280
293
|
}
|
|
281
|
-
export class
|
|
294
|
+
export class SwitchTile extends WidgetBase {
|
|
282
295
|
options;
|
|
283
|
-
|
|
296
|
+
type = "switch_tile";
|
|
297
|
+
constructor(options) {
|
|
284
298
|
super(options);
|
|
285
299
|
this.options = options;
|
|
286
300
|
}
|
|
287
|
-
|
|
288
|
-
const
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
constructor(child, options = {}) {
|
|
297
|
-
super(options);
|
|
298
|
-
this.child = child;
|
|
301
|
+
data() {
|
|
302
|
+
const out = { ...this.commonData(), id: this.options.id, primary: this.options.primary, active: this.options.active ?? false };
|
|
303
|
+
for (const key of ["secondary", "left_icon"])
|
|
304
|
+
if (this.options[key] !== undefined)
|
|
305
|
+
out[key] = this.options[key];
|
|
306
|
+
const left = child(this.options.left);
|
|
307
|
+
if (left)
|
|
308
|
+
out.left = left;
|
|
309
|
+
return out;
|
|
299
310
|
}
|
|
300
|
-
|
|
301
|
-
|
|
311
|
+
bindHandlers(registry, path) {
|
|
312
|
+
if (this.options.on_toggle)
|
|
313
|
+
registry.add("toggle", this.options.id, this.options.on_toggle);
|
|
314
|
+
this.options.left?.bindHandlers(registry, [...path, 0]);
|
|
302
315
|
}
|
|
303
316
|
}
|
|
304
|
-
export class
|
|
317
|
+
export class ExpanderTile extends WidgetBase {
|
|
305
318
|
options;
|
|
319
|
+
type = "expander_tile";
|
|
306
320
|
constructor(options) {
|
|
307
321
|
super(options);
|
|
308
322
|
this.options = options;
|
|
309
323
|
}
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
324
|
+
data() {
|
|
325
|
+
const out = { ...this.commonData(), primary: this.options.primary, expanded: this.options.expanded ?? false };
|
|
326
|
+
for (const key of ["id", "secondary", "left_icon"])
|
|
327
|
+
if (this.options[key] !== undefined)
|
|
328
|
+
out[key] = this.options[key];
|
|
329
|
+
const left = child(this.options.left);
|
|
330
|
+
const nested = child(this.options.child);
|
|
331
|
+
if (left)
|
|
332
|
+
out.left = left;
|
|
333
|
+
if (nested)
|
|
334
|
+
out.child = nested;
|
|
335
|
+
return out;
|
|
336
|
+
}
|
|
337
|
+
bindHandlers(registry, path) {
|
|
338
|
+
if (this.options.id && this.options.on_toggle)
|
|
339
|
+
registry.add("toggle", this.options.id, this.options.on_toggle);
|
|
340
|
+
this.options.left?.bindHandlers(registry, [...path, 0]);
|
|
341
|
+
this.options.child?.bindHandlers(registry, [...path, 1]);
|
|
318
342
|
}
|
|
319
343
|
}
|
|
320
|
-
export class
|
|
344
|
+
export class SliderTile extends WidgetBase {
|
|
321
345
|
options;
|
|
322
|
-
|
|
346
|
+
type = "slider_tile";
|
|
347
|
+
constructor(options) {
|
|
323
348
|
super(options);
|
|
324
349
|
this.options = options;
|
|
325
350
|
}
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
351
|
+
data() {
|
|
352
|
+
const out = { ...this.commonData(), id: this.options.id, value: this.options.value ?? 0, min: this.options.min ?? 0, max: this.options.max ?? 1, step: this.options.step ?? 0.01, page: this.options.page ?? 0.1, digits: this.options.digits ?? 0 };
|
|
353
|
+
for (const key of ["label", "left_icon", "snap_step"])
|
|
354
|
+
if (this.options[key] !== undefined)
|
|
355
|
+
out[key] = this.options[key];
|
|
356
|
+
const left = child(this.options.left);
|
|
357
|
+
if (left)
|
|
358
|
+
out.left = left;
|
|
359
|
+
return out;
|
|
333
360
|
}
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
child;
|
|
339
|
-
width;
|
|
340
|
-
height;
|
|
341
|
-
constructor(row, column, child, width = 1, height = 1) {
|
|
342
|
-
this.row = row;
|
|
343
|
-
this.column = column;
|
|
344
|
-
this.child = child;
|
|
345
|
-
this.width = width;
|
|
346
|
-
this.height = height;
|
|
347
|
-
}
|
|
348
|
-
toProtocol() {
|
|
349
|
-
return {
|
|
350
|
-
row: this.row,
|
|
351
|
-
column: this.column,
|
|
352
|
-
width: this.width,
|
|
353
|
-
height: this.height,
|
|
354
|
-
child: this.child.toProtocol(),
|
|
355
|
-
};
|
|
361
|
+
bindHandlers(registry, path) {
|
|
362
|
+
if (this.options.on_change)
|
|
363
|
+
registry.add("change", this.options.id, this.options.on_change);
|
|
364
|
+
this.options.left?.bindHandlers(registry, [...path, 0]);
|
|
356
365
|
}
|
|
357
366
|
}
|
|
358
|
-
export class
|
|
367
|
+
export class ChoiceTile extends WidgetBase {
|
|
359
368
|
options;
|
|
360
|
-
|
|
369
|
+
type = "choice_tile";
|
|
370
|
+
constructor(options) {
|
|
361
371
|
super(options);
|
|
362
372
|
this.options = options;
|
|
363
373
|
}
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
374
|
+
data() {
|
|
375
|
+
const out = { ...this.commonData(), primary: this.options.primary, selected: this.options.selected ?? false };
|
|
376
|
+
for (const key of ["id", "secondary", "left_icon"])
|
|
377
|
+
if (this.options[key] !== undefined)
|
|
378
|
+
out[key] = this.options[key];
|
|
379
|
+
const left = child(this.options.left);
|
|
380
|
+
if (left)
|
|
381
|
+
out.left = left;
|
|
382
|
+
return out;
|
|
383
|
+
}
|
|
384
|
+
bindHandlers(registry, path) {
|
|
385
|
+
if (this.options.id && this.options.on_click)
|
|
386
|
+
registry.add("click", this.options.id, this.options.on_click);
|
|
387
|
+
this.options.left?.bindHandlers(registry, [...path, 0]);
|
|
373
388
|
}
|
|
374
389
|
}
|
|
375
|
-
export class
|
|
390
|
+
export class Choice {
|
|
376
391
|
options;
|
|
377
392
|
constructor(options) {
|
|
378
|
-
super(options);
|
|
379
393
|
this.options = options;
|
|
380
394
|
}
|
|
381
395
|
toProtocol() {
|
|
382
|
-
const
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
});
|
|
396
|
+
const out = { id: this.options.id, primary: this.options.primary };
|
|
397
|
+
if (this.options.secondary !== undefined)
|
|
398
|
+
out.secondary = this.options.secondary;
|
|
386
399
|
if (this.options.icon !== undefined)
|
|
387
|
-
|
|
388
|
-
return
|
|
400
|
+
out.icon = this.options.icon;
|
|
401
|
+
return out;
|
|
389
402
|
}
|
|
390
403
|
}
|
|
391
|
-
export class
|
|
404
|
+
export class ChoiceList extends WidgetBase {
|
|
392
405
|
options;
|
|
393
|
-
|
|
406
|
+
type = "choice_list";
|
|
407
|
+
constructor(options) {
|
|
394
408
|
super(options);
|
|
395
409
|
this.options = options;
|
|
396
410
|
}
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
411
|
+
data() {
|
|
412
|
+
const out = { ...this.commonData(), id: this.options.id, choices: (this.options.choices ?? []).map((choice) => choice.toProtocol()) };
|
|
413
|
+
if (this.options.active !== undefined)
|
|
414
|
+
out.active = this.options.active;
|
|
415
|
+
return out;
|
|
416
|
+
}
|
|
417
|
+
bindHandlers(registry, _path) {
|
|
418
|
+
if (this.options.on_change)
|
|
419
|
+
registry.add("change", this.options.id, this.options.on_change);
|
|
404
420
|
}
|
|
405
421
|
}
|
|
406
|
-
export class
|
|
422
|
+
export class KeyValueGrid extends WidgetBase {
|
|
407
423
|
options;
|
|
408
|
-
|
|
424
|
+
type = "key_value_grid";
|
|
425
|
+
constructor(options = {}) {
|
|
409
426
|
super(options);
|
|
410
427
|
this.options = options;
|
|
411
428
|
}
|
|
412
|
-
|
|
413
|
-
const payload = {
|
|
414
|
-
title: this.options.title ?? "",
|
|
415
|
-
children: (this.options.children ?? []).map((child) => child.toProtocol()),
|
|
416
|
-
};
|
|
417
|
-
if (this.options.subtitle !== undefined && this.options.subtitle !== "") {
|
|
418
|
-
payload.subtitle = this.options.subtitle;
|
|
419
|
-
}
|
|
420
|
-
return {
|
|
421
|
-
type: "section",
|
|
422
|
-
data: this.withCommon(payload),
|
|
423
|
-
};
|
|
424
|
-
}
|
|
429
|
+
data() { return { ...this.commonData(), rows: this.options.rows ?? [] }; }
|
|
425
430
|
}
|
|
426
|
-
export class
|
|
431
|
+
export class PagerItem extends WidgetBase {
|
|
427
432
|
options;
|
|
433
|
+
type = "pager_item";
|
|
428
434
|
constructor(options) {
|
|
429
435
|
super(options);
|
|
430
436
|
this.options = options;
|
|
431
437
|
}
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
value: this.options.value,
|
|
436
|
-
min: this.options.min ?? 0,
|
|
437
|
-
max: this.options.max ?? 1,
|
|
438
|
-
step: this.options.step ?? 0.01,
|
|
439
|
-
interactive: this.options.interactive ?? false,
|
|
440
|
-
});
|
|
441
|
-
if (this.options.icon !== undefined)
|
|
442
|
-
payload.icon = this.options.icon.toProtocol();
|
|
443
|
-
if (this.options.text !== undefined)
|
|
444
|
-
payload.text = this.options.text;
|
|
445
|
-
return { type: "meter", data: payload };
|
|
446
|
-
}
|
|
438
|
+
data() { return { ...this.commonData(), id: this.options.id, label: this.options.label ?? "", appearance: this.options.appearance ?? "dots", active: this.options.active ?? false, inactive: this.options.inactive ?? false, occupied: this.options.occupied ?? false, urgent: this.options.urgent ?? false }; }
|
|
439
|
+
bindHandlers(registry, _path) { if (this.options.on_click)
|
|
440
|
+
registry.add("click", String(this.options.id), this.options.on_click); }
|
|
447
441
|
}
|
|
448
|
-
export class
|
|
442
|
+
export class PagerStrip extends WidgetBase {
|
|
449
443
|
options;
|
|
450
|
-
|
|
444
|
+
type = "pager_strip";
|
|
445
|
+
constructor(options = {}) {
|
|
451
446
|
super(options);
|
|
452
447
|
this.options = options;
|
|
453
448
|
}
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
449
|
+
data() {
|
|
450
|
+
const out = { ...this.commonData(), placeholder: this.options.placeholder ?? false, items: (this.options.items ?? []).map((item) => item.data()) };
|
|
451
|
+
if (this.options.id !== undefined)
|
|
452
|
+
out.id = this.options.id;
|
|
453
|
+
return out;
|
|
454
|
+
}
|
|
455
|
+
bindHandlers(registry, path) {
|
|
456
|
+
if (this.options.id && this.options.on_change)
|
|
457
|
+
registry.add("change", this.options.id, this.options.on_change);
|
|
458
|
+
(this.options.items ?? []).forEach((item, index) => item.bindHandlers(registry, [...path, index]));
|
|
462
459
|
}
|
|
463
460
|
}
|
|
464
|
-
|
|
461
|
+
class ActiveIndicator extends WidgetBase {
|
|
465
462
|
options;
|
|
466
463
|
constructor(options = {}) {
|
|
467
464
|
super(options);
|
|
468
465
|
this.options = options;
|
|
469
466
|
}
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
spacing: this.options.spacing ?? 0,
|
|
475
|
-
children: (this.options.children ?? []).map((child) => child.toProtocol()),
|
|
476
|
-
}),
|
|
477
|
-
};
|
|
478
|
-
}
|
|
467
|
+
data() { return { ...this.commonData(), active: this.options.active ?? false }; }
|
|
468
|
+
}
|
|
469
|
+
export class CameraIndicator extends ActiveIndicator {
|
|
470
|
+
type = "camera_indicator";
|
|
479
471
|
}
|
|
480
|
-
export class
|
|
472
|
+
export class MicIndicator extends ActiveIndicator {
|
|
473
|
+
type = "mic_indicator";
|
|
474
|
+
}
|
|
475
|
+
export class MutedIndicator extends ActiveIndicator {
|
|
476
|
+
type = "muted_indicator";
|
|
477
|
+
}
|
|
478
|
+
export class LocationIndicator extends ActiveIndicator {
|
|
479
|
+
type = "location_indicator";
|
|
480
|
+
}
|
|
481
|
+
export class ScreenCastIndicator extends ActiveIndicator {
|
|
481
482
|
options;
|
|
483
|
+
type = "screencast_indicator";
|
|
482
484
|
constructor(options = {}) {
|
|
483
485
|
super(options);
|
|
484
486
|
this.options = options;
|
|
485
487
|
}
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
children: (this.options.children ?? []).map((child) => child.toProtocol()),
|
|
492
|
-
}),
|
|
493
|
-
};
|
|
488
|
+
data() {
|
|
489
|
+
const out = super.data();
|
|
490
|
+
if (this.options.timer_text !== undefined)
|
|
491
|
+
out.timer_text = this.options.timer_text;
|
|
492
|
+
return out;
|
|
494
493
|
}
|
|
495
494
|
}
|
|
496
|
-
export class
|
|
495
|
+
export class Calendar extends WidgetBase {
|
|
497
496
|
options;
|
|
498
|
-
|
|
497
|
+
type = "calendar";
|
|
498
|
+
constructor(options) {
|
|
499
499
|
super(options);
|
|
500
500
|
this.options = options;
|
|
501
501
|
}
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
502
|
+
data() {
|
|
503
|
+
const out = { ...this.commonData(), selected_date: this.options.selected_date, event_days: this.options.event_days ?? [] };
|
|
504
|
+
if (this.options.id !== undefined)
|
|
505
|
+
out.id = this.options.id;
|
|
506
|
+
return out;
|
|
507
507
|
}
|
|
508
|
+
bindHandlers(registry, _path) { if (this.options.id && this.options.on_change)
|
|
509
|
+
registry.add("change", this.options.id, this.options.on_change); }
|
|
508
510
|
}
|
|
509
|
-
export class
|
|
511
|
+
export class BatteryHero extends WidgetBase {
|
|
510
512
|
options;
|
|
511
|
-
|
|
513
|
+
type = "battery_hero";
|
|
514
|
+
constructor(options) {
|
|
512
515
|
super(options);
|
|
513
516
|
this.options = options;
|
|
514
517
|
}
|
|
515
|
-
|
|
516
|
-
const payload = {
|
|
517
|
-
rows: Object.entries(this.options.rows ?? {}).map(([key, value]) => ({ key, value })),
|
|
518
|
-
};
|
|
519
|
-
if (this.options.title !== undefined && this.options.title !== "") {
|
|
520
|
-
payload.title = this.options.title;
|
|
521
|
-
}
|
|
522
|
-
return {
|
|
523
|
-
type: "property_list",
|
|
524
|
-
data: this.withCommon(payload),
|
|
525
|
-
};
|
|
526
|
-
}
|
|
518
|
+
data() { return { ...this.commonData(), icon: this.options.icon, percentage: this.options.percentage, fraction: this.options.fraction, state: this.options.state }; }
|
|
527
519
|
}
|
|
528
|
-
export class
|
|
520
|
+
export class DateHero extends WidgetBase {
|
|
529
521
|
options;
|
|
522
|
+
type = "date_hero";
|
|
530
523
|
constructor(options) {
|
|
531
524
|
super(options);
|
|
532
525
|
this.options = options;
|
|
533
526
|
}
|
|
534
|
-
|
|
535
|
-
const payload = {
|
|
536
|
-
label: this.options.label,
|
|
537
|
-
};
|
|
538
|
-
if (this.options.icon !== undefined && this.options.icon !== "") {
|
|
539
|
-
payload.icon = this.options.icon;
|
|
540
|
-
}
|
|
541
|
-
if (this.options.sublabel !== undefined && this.options.sublabel !== "") {
|
|
542
|
-
payload.sublabel = this.options.sublabel;
|
|
543
|
-
}
|
|
544
|
-
if (this.options.right !== undefined) {
|
|
545
|
-
payload.right = this.options.right.toProtocol();
|
|
546
|
-
}
|
|
547
|
-
return {
|
|
548
|
-
type: "item",
|
|
549
|
-
data: this.withCommon(payload),
|
|
550
|
-
};
|
|
551
|
-
}
|
|
527
|
+
data() { return { ...this.commonData(), weekday: this.options.weekday, date: this.options.date }; }
|
|
552
528
|
}
|
|
553
|
-
export class
|
|
529
|
+
export class EventItem {
|
|
554
530
|
options;
|
|
555
531
|
constructor(options) {
|
|
556
|
-
super(options);
|
|
557
532
|
this.options = options;
|
|
558
533
|
}
|
|
559
534
|
toProtocol() {
|
|
560
|
-
const
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
payload.icon = this.options.icon;
|
|
565
|
-
}
|
|
566
|
-
if (this.options.sublabel !== undefined && this.options.sublabel !== "") {
|
|
567
|
-
payload.sublabel = this.options.sublabel;
|
|
568
|
-
}
|
|
569
|
-
if (this.options.right !== undefined) {
|
|
570
|
-
payload.right = this.options.right.toProtocol();
|
|
571
|
-
}
|
|
572
|
-
if (this.options.enabled !== undefined) {
|
|
573
|
-
payload.enabled = this.options.enabled;
|
|
574
|
-
}
|
|
575
|
-
return {
|
|
576
|
-
type: "action_item",
|
|
577
|
-
data: this.withCommon(payload),
|
|
578
|
-
};
|
|
535
|
+
const out = { id: this.options.id, title: this.options.title, start: this.options.start, end: this.options.end ?? "", all_day: this.options.all_day ?? false };
|
|
536
|
+
if (this.options.location !== undefined)
|
|
537
|
+
out.location = this.options.location;
|
|
538
|
+
return out;
|
|
579
539
|
}
|
|
580
540
|
}
|
|
581
|
-
export class
|
|
541
|
+
export class Events extends WidgetBase {
|
|
582
542
|
options;
|
|
543
|
+
type = "events";
|
|
583
544
|
constructor(options) {
|
|
584
545
|
super(options);
|
|
585
546
|
this.options = options;
|
|
586
547
|
}
|
|
587
|
-
toProtocol()
|
|
588
|
-
return {
|
|
589
|
-
type: "empty_state",
|
|
590
|
-
data: this.withCommon({
|
|
591
|
-
title: this.options.title,
|
|
592
|
-
subtitle: this.options.subtitle ?? "",
|
|
593
|
-
}),
|
|
594
|
-
};
|
|
595
|
-
}
|
|
548
|
+
data() { return { ...this.commonData(), date: this.options.date, loading: this.options.loading ?? false, events: (this.options.events ?? []).map((event) => event.toProtocol()) }; }
|
|
596
549
|
}
|
|
597
|
-
export class
|
|
550
|
+
export class WeatherForecastItem {
|
|
598
551
|
options;
|
|
599
552
|
constructor(options) {
|
|
600
|
-
super(options);
|
|
601
553
|
this.options = options;
|
|
602
554
|
}
|
|
603
|
-
toProtocol() {
|
|
604
|
-
return {
|
|
605
|
-
type: "badge",
|
|
606
|
-
data: this.withCommon({
|
|
607
|
-
label: this.options.label,
|
|
608
|
-
}),
|
|
609
|
-
};
|
|
610
|
-
}
|
|
555
|
+
toProtocol() { return { day_name: this.options.day_name, icon: this.options.icon, condition: this.options.condition, temperatures: this.options.temperatures, is_today: this.options.is_today ?? false }; }
|
|
611
556
|
}
|
|
612
|
-
export class
|
|
557
|
+
export class WeatherForecastList extends WidgetBase {
|
|
558
|
+
options;
|
|
559
|
+
type = "weather_forecast_list";
|
|
613
560
|
constructor(options = {}) {
|
|
614
561
|
super(options);
|
|
562
|
+
this.options = options;
|
|
615
563
|
}
|
|
616
|
-
toProtocol()
|
|
617
|
-
|
|
564
|
+
data() { return { ...this.commonData(), items: (this.options.items ?? []).map((item) => item.toProtocol()) }; }
|
|
565
|
+
}
|
|
566
|
+
export class WeatherHourlyItem {
|
|
567
|
+
options;
|
|
568
|
+
constructor(options) {
|
|
569
|
+
this.options = options;
|
|
618
570
|
}
|
|
571
|
+
toProtocol() { return { time: this.options.time, icon: this.options.icon, temperature: this.options.temperature }; }
|
|
619
572
|
}
|
|
620
|
-
export class
|
|
573
|
+
export class WeatherHourlyStrip extends WidgetBase {
|
|
621
574
|
options;
|
|
575
|
+
type = "weather_hourly_strip";
|
|
622
576
|
constructor(options = {}) {
|
|
623
577
|
super(options);
|
|
624
578
|
this.options = options;
|
|
625
579
|
}
|
|
626
|
-
|
|
627
|
-
return this.withCommon({
|
|
628
|
-
appearance: this.options.appearance ?? "dots",
|
|
629
|
-
label: this.options.label ?? "",
|
|
630
|
-
active: this.options.active ?? false,
|
|
631
|
-
inactive: this.options.inactive ?? false,
|
|
632
|
-
occupied: this.options.occupied ?? false,
|
|
633
|
-
urgent: this.options.urgent ?? false,
|
|
634
|
-
});
|
|
635
|
-
}
|
|
636
|
-
toProtocol() {
|
|
637
|
-
return {
|
|
638
|
-
type: "pager_item",
|
|
639
|
-
data: this.toData(),
|
|
640
|
-
};
|
|
641
|
-
}
|
|
580
|
+
data() { return { ...this.commonData(), items: (this.options.items ?? []).map((item) => item.toProtocol()) }; }
|
|
642
581
|
}
|
|
643
|
-
export class
|
|
582
|
+
export class WorldClockRow {
|
|
644
583
|
options;
|
|
645
|
-
constructor(options
|
|
646
|
-
super(options);
|
|
584
|
+
constructor(options) {
|
|
647
585
|
this.options = options;
|
|
648
586
|
}
|
|
649
587
|
toProtocol() {
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
}),
|
|
655
|
-
};
|
|
588
|
+
const out = { name: this.options.name, timezone: this.options.timezone, time: this.options.time, offset: this.options.offset };
|
|
589
|
+
if (this.options.day_label !== undefined)
|
|
590
|
+
out.day_label = this.options.day_label;
|
|
591
|
+
return out;
|
|
656
592
|
}
|
|
657
593
|
}
|
|
658
|
-
export class
|
|
594
|
+
export class WorldClock extends WidgetBase {
|
|
659
595
|
options;
|
|
596
|
+
type = "world_clock";
|
|
660
597
|
constructor(options = {}) {
|
|
661
598
|
super(options);
|
|
662
599
|
this.options = options;
|
|
663
600
|
}
|
|
664
|
-
|
|
665
|
-
return new Box({ ...options, orientation: "vertical", spacing, children });
|
|
666
|
-
}
|
|
667
|
-
static horizontal(children, spacing = 0, options = {}) {
|
|
668
|
-
return new Box({ ...options, orientation: "horizontal", spacing, children });
|
|
669
|
-
}
|
|
670
|
-
toProtocol() {
|
|
671
|
-
return {
|
|
672
|
-
type: "box",
|
|
673
|
-
data: this.withCommon({
|
|
674
|
-
orientation: this.options.orientation ?? "vertical",
|
|
675
|
-
spacing: this.options.spacing ?? 0,
|
|
676
|
-
children: (this.options.children ?? []).map((child) => child.toProtocol()),
|
|
677
|
-
}),
|
|
678
|
-
};
|
|
679
|
-
}
|
|
601
|
+
data() { return { ...this.commonData(), rows: (this.options.rows ?? []).map((row) => row.toProtocol()) }; }
|
|
680
602
|
}
|