@nebularstreams/libmui 0.1.11 → 0.1.13

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.
@@ -1,335 +0,0 @@
1
- import m from "mithril";
2
-
3
- // ------------------------------------------------------------------------
4
-
5
- function getAttrs(attrs, parentAttrs, panelInitialParams) {
6
- const data = ((typeof attrs === "function") ? attrs(parentAttrs) : attrs) || {};
7
- if (panelInitialParams) data.initialParams = panelInitialParams;
8
- return data;
9
- }
10
-
11
- const
12
-
13
- isCurrent = ({currentIndex}, index) => currentIndex === index,
14
-
15
- Icon = {
16
- view: ({attrs}) => m(
17
- `i.icon.${attrs.pack || "fas"}.fa-${attrs.icon || "cog"}${attrs.size ? ".fa-" + attrs.size + "x" : ""}`,
18
- {
19
- title: attrs.icontitle || undefined,
20
- role: "presentation",
21
- onclick: attrs.onclick || null, ...attrs.iconClass && {class: attrs.iconClass}
22
- }
23
- )
24
- },
25
-
26
- Button = {
27
- view: ({attrs, state, children}) => m((attrs.download || attrs.link) ? "a.button" : "button", {
28
- ...attrs.link && {href: attrs.link},
29
- ...attrs.download && {download: attrs.download},
30
- ...attrs.target && {target: attrs.target},
31
- "aria-label": attrs["aria-label"] || attrs.title || attrs.text,
32
- title: attrs.title || attrs["aria-label"],
33
- class: (attrs.class || "") + (state.busy ? " busy" : ""),
34
- ...state.error && {"data-error": state.error.message},
35
- ...attrs.onclick && {
36
- onclick: (event) => {
37
- clearTimeout(state.debounce);
38
- state.debounce = setTimeout(() => {
39
- const result = attrs.onclick(event, attrs);
40
- if (result && result.then && result.catch) {
41
- state.busy = true;
42
- m.redraw();
43
- result
44
- .then(() => {
45
- state.busy = false;
46
- m.redraw();
47
- })
48
- .catch((error) => {
49
- state.busy = false;
50
- state.error = error;
51
- m.redraw();
52
- });
53
- }
54
- }, 25);
55
- }
56
- }
57
- }, [
58
- ...(attrs.icon && !attrs.right) ? [m(Icon, attrs)] : [],
59
- ...attrs.text ? [m("span.pad-1.pad-h", {class: attrs.textClass || null}, attrs.text)] : [],
60
- ...(attrs.icon && attrs.right) ? [m(Icon, attrs)] : [],
61
- ...children
62
- ])
63
- },
64
-
65
- ButtonNew = {
66
- view: ({attrs, state, children}) => m((attrs.download || attrs.link) ? "a.button" : "button", {
67
- ...attrs.link && {href: attrs.link},
68
- ...attrs.download && {rel: "nofollow", download: attrs.download},
69
- ...attrs.target && {target: attrs.target},
70
- "aria-label": attrs["aria-label"] || attrs.title || attrs.text,
71
- title: attrs.title || attrs["aria-label"],
72
- class: (attrs.class || "") + (state.busy ? " busy" : ""),
73
- ...state.error && {"data-error": state.error.message},
74
- ...attrs.onClick && {
75
- onclick: (event) => {
76
- clearTimeout(state.debounce);
77
- state.debounce = setTimeout(() => {
78
- const result = attrs.onClick(event, attrs);
79
- if (result && result.then && result.catch) {
80
- state.busy = true;
81
- m.redraw();
82
- result
83
- .then(() => {
84
- state.busy = false;
85
- m.redraw();
86
- })
87
- .catch((error) => {
88
- state.busy = false;
89
- state.error = error;
90
- m.redraw();
91
- });
92
- }
93
- }, 25);
94
- }
95
- }
96
- }, [
97
- ...(attrs.icon && !attrs.right) ? [m(Icon, attrs)] : [],
98
- ...attrs.text ? [m("span.pad-1.pad-h", {class: attrs.textClass || null}, attrs.text)] : [],
99
- ...(attrs.icon && attrs.right) ? [m(Icon, attrs)] : [],
100
- ...children
101
- ])
102
- },
103
-
104
- Empty = {
105
-
106
- view: ({attrs, children}) => m(
107
- ".flexcol.flexcenter.al-center.grows.emptywidget",
108
- {
109
- ...attrs.class && {class: attrs.class},
110
- ...attrs.key && {key: attrs.key},
111
- role: "presentation"
112
- },
113
- [
114
- m(Icon, attrs),
115
- ...attrs.message
116
- ? [
117
- m(".marg-2.marg-v",
118
- {
119
- role: "status",
120
- class: attrs.size > 4 ? "font-150" : "font-100",
121
- "aria-label": attrs.message
122
- },
123
- attrs.message.split("\n")
124
- .map((str, idx, all) => all.length === 1 ? str : m("p.msg" + idx, str))
125
- )
126
- ]
127
- : [],
128
- ...children
129
- ? [m(".flexcol.additional", children)]
130
- : []
131
- ]
132
- )
133
- },
134
-
135
- setItem = (attrs, state, index, params) => {
136
-
137
-
138
- const
139
- lastIndex = state.currentIndex,
140
- lastParams = state.currentParams;
141
-
142
- if (index === -1) {
143
- Object.assign(state, {
144
- current: null,
145
- currentIndex: -1,
146
- currentParams: []
147
- });
148
- } else {
149
- Object.assign(state, {
150
- current: attrs.items[index] || null,
151
- currentIndex: state.current ? index : -1,
152
- currentParams: params || []
153
- });
154
- }
155
-
156
- if (attrs.onSelected) attrs.onSelected(state.current, state.currentParams, state.currentIndex !== lastIndex, lastParams);
157
-
158
- m.redraw();
159
- },
160
-
161
- Selector = {
162
-
163
- oninit: ({attrs, state}) => {
164
-
165
- state = attrs.state || state;
166
- state.setItem = (index, ...params) => setItem(attrs, attrs.state || state, index, params);
167
-
168
- const
169
- hasState = !isNaN(state.currentIndex),
170
- selected = hasState ? state.currentIndex : attrs.selected,
171
- currentIndex = (attrs.items && attrs.items.length)
172
- ? (selected !== undefined && attrs.items[selected])
173
- ? selected
174
- : attrs.noinitial ? -1 : 0
175
- : -1,
176
- current = currentIndex !== -1 ? attrs.items[currentIndex] : null;
177
-
178
- Object.assign(state, {currentIndex, current});
179
-
180
- },
181
-
182
- onupdate: ({attrs, state}) => {
183
- (attrs.state || state).setItem = (index, ...params) => setItem(attrs, attrs.state || state, index, params);
184
- },
185
-
186
- view: ({attrs, state}) => {
187
-
188
- state = attrs.state || state;
189
- const {current} = state;
190
-
191
- return m(
192
- (attrs.element || "widget") + ".selector" + (attrs.horizontal ? ".flexrow" : ".flexcol") + (attrs.className ? "." + attrs.className : ""),
193
- {
194
- ...attrs.key && {key: attrs.key},
195
- class: (state.current ? "hascurrent" : "empty") + (attrs.class ? " " + attrs.class : "")
196
- },
197
- [
198
- ...((!attrs.hideonly || (attrs.items.length > 1)) && (!attrs.hidesel))
199
- ? [
200
- /** navigation bar */
201
- m(
202
- "nav.toolbar.fullwidth" + (attrs.horizontal ? ".flexcol" : ".flexrow"),
203
- {
204
- "aria-label": attrs["aria-label"] || attrs.title || "selector",
205
- class: attrs.toolbarClass
206
- },
207
- attrs.items.map((item, index) => m(Button, {
208
- class: (item.class ? item.class + " " : "") + (isCurrent(state, index) ? "accent" : "nel"),
209
- icon: item.icon || null,
210
- ...item.title && {title: item.title},
211
- ...item["aria-label"] && {"aria-label": item["aria-label"]},
212
- ...item.text && {text: item.text},
213
- onclick: () => {
214
- const t = Date.now();
215
- if (t - state.clickts < 200) return;
216
- state.clickts = Date.now();
217
- state.bodyHidden = false;
218
- state.setItem(index);
219
- }
220
- }))
221
- )]
222
- : [],
223
- ...current
224
- ? [
225
- ...(attrs.toggle && !state.bodyHidden)
226
- ? [
227
- m(ButtonNew, {
228
- class: "selectornotch " + (state.bodyHidden ? "bodyhidden" : "bodyshown"),
229
- icon: state.bodyHidden ? "caret-up" : "caret-down",
230
- title: state.bodyHidden ? "expand panel" : "contract panel",
231
- onClick: () => {
232
- state.bodyHidden = !state.bodyHidden;
233
- m.redraw();
234
- }
235
- })
236
- ] : [],
237
- ...(!attrs.toggle || !state.bodyHidden)
238
- ? [
239
- /** body */
240
- m(".grows.flexcol.ohidden", {class: attrs.bodyClass, role: "presentation"}, [
241
- m(
242
- current.widget,
243
- getAttrs(current.attrs, attrs, state.currentParams),
244
- current.children
245
- )
246
- ])
247
- ]
248
- : [],
249
- ...attrs.closeButton
250
- ? [
251
- m(Button, {
252
- class: "closebutton absolute toright",
253
- icon: "times",
254
- onclick: () => {
255
- state.setItem(-1);
256
- },
257
- "aria-label": "close item"
258
- })] : []
259
- ]
260
- : m(Empty, attrs)
261
- ]
262
- );
263
- }
264
- };
265
-
266
- const ICONS = {
267
- info: "info",
268
- error: "exclamation-triangle",
269
- success: "check"
270
- };
271
-
272
- function Notifications(TOAST_SHORT = 5000, altContainer) {
273
-
274
- let
275
- mNotifications = [],
276
- mTimer;
277
-
278
- function render(container, n) {
279
- m.render(
280
- container, m(
281
- Button, {
282
- class: "notification " + n.type,
283
- text: n.text,
284
- icon: ICONS[n.type] || "info",
285
- size: 1,
286
- role: "status",
287
- // eslint-disable-next-line no-use-before-define
288
- onclick: next
289
- }
290
- )
291
- );
292
- }
293
-
294
- function next() {
295
-
296
- const
297
- container = altContainer || document.getElementById("notification-container");
298
-
299
- if (mNotifications.length) {
300
- const n = mNotifications.splice(0, 1)[0];
301
- render(container, n);
302
- clearTimeout(mTimer);
303
- mTimer = setTimeout(next, n.timer || TOAST_SHORT);
304
- } else {
305
- m.render(container, "");
306
- mTimer = null;
307
- }
308
- }
309
-
310
- return {
311
- add: (text, type) => {
312
- mNotifications.push({
313
- text,
314
- type
315
- });
316
- if (!mTimer) next();
317
- },
318
- clear: () => {
319
- mNotifications = [];
320
- next();
321
- }
322
-
323
- };
324
- }
325
-
326
- const Notification = new Notifications();
327
-
328
- export {
329
- Empty,
330
- Icon,
331
- Selector,
332
- Button,
333
- ButtonNew,
334
- Notification
335
- }
@@ -1,168 +0,0 @@
1
- import m from "mithril";
2
- import defineWidget from "../util/widgets.utils";
3
- import {ButtonNew} from "./Basic";
4
-
5
- const
6
- globalState = {},
7
- CARDIE_CLOSED = 0;
8
-
9
- function setCardStatus(cardid, expanded = CARDIE_CLOSED) {
10
- if (cardid) {
11
- const [uniq, subname] = cardid.split("-");
12
- if (expanded && uniq && subname) {
13
- Object.keys(globalState)
14
- .forEach((key) => {
15
- if (key.startsWith(uniq + "-")) {
16
- globalState[key] = CARDIE_CLOSED;
17
- }
18
- });
19
- }
20
- globalState[cardid] = expanded;
21
- }
22
- }
23
-
24
- const CardieWidget = defineWidget(
25
- ({attrs, state, children}) => {
26
-
27
- const
28
-
29
- {
30
- nofold,
31
- cardid,
32
- size,
33
- title,
34
- action,
35
- collapsedAction,
36
- collapsedClass,
37
- expandedClass,
38
- cols,
39
- element,
40
- busy,
41
- expandedView,
42
- collapsedView,
43
- titleWidget: titWidget,
44
- titleAttrs,
45
- titleClass,
46
- bodyClass,
47
- titleExpanded,
48
- titleCollapsed
49
- } = attrs,
50
-
51
- collapsed = nofold
52
- ? false
53
- : cardid
54
- ? !globalState[cardid]
55
- : !!state.collapsed,
56
-
57
- items = (!collapsed)
58
- ? (
59
- expandedView
60
- ? expandedView(attrs, state)
61
- : (children || [])
62
- )
63
- : collapsedView ? collapsedView(attrs, state) : [],
64
-
65
- titleWidget = titWidget
66
- ? m(titWidget, titleAttrs || {})
67
- : title ? m("span.ellipsis.ohidden.unfold", title) : undefined,
68
-
69
- buttonClass = busy
70
- ? "fa-sync"
71
- : `fa-caret-down ${collapsed ? "iscollapsed" : "isexpanded"}`;
72
-
73
- return items.length || !attrs.skipEmpty
74
- ? m(
75
- (element || "ul"),
76
- {
77
- class: "cardie ohidden noshrink "
78
- + (cols ? "flexcol " : "flexrow wrap ")
79
- + (attrs.class ? " " + attrs.class : "")
80
- + (nofold
81
- ? " expanded"
82
- : ` ${collapsed ? "collapsed " + (collapsedClass || "") : "expanded " + (expandedClass || "")}`)
83
- + (size ? " marg-" + size : " marg-2")
84
- + (titWidget ? " withwidget" : "")
85
- + (busy ? " busycard" : "")
86
- },
87
- [
88
-
89
- ...titleWidget
90
- ? [
91
- m(
92
- ".title.grows.fabf.flexrow.pointer.unfold",
93
- nofold
94
- ? {
95
- class: titleClass || "pad-2"
96
- }
97
- : {
98
- class: `${titleClass || "pad-2"} ${buttonClass || ""}`,
99
-
100
- title: collapsed
101
- ? (titleCollapsed || "Click to expand the options")
102
- : (titleExpanded || titleCollapsed || "Click to collapse the options"),
103
-
104
- onclick: (e) => {
105
-
106
- if (e.target.classList.contains("unfold")) {
107
- if (e.shiftKey && attrs.onShiftOpen) {
108
- attrs.onShiftOpen();
109
- } else if (attrs.cardid) {
110
- setCardStatus(cardid, collapsed); // !state
111
- } else {
112
- state.collapsed = !state.collapsed;
113
- }
114
-
115
- m.redraw();
116
- }
117
- }
118
- },
119
- action && (nofold || !collapsed)
120
- ? [
121
- m(ButtonNew, action),
122
- titleWidget
123
- ]
124
- : collapsedAction && collapsed
125
- ? [
126
- m(ButtonNew, collapsedAction),
127
- titleWidget
128
- ]
129
- : titleWidget
130
- )
131
- ]
132
- : [],
133
-
134
- ...items.length
135
- ? [
136
- m(".flexbreak"),
137
- m(
138
- ".cardiebody.fadein-filter.grows",
139
- {
140
- class: (cols ? "flexcol " : "flexrow wrap") + " " + (bodyClass || "")
141
- },
142
- ...items
143
- )
144
- ] : [],
145
-
146
- ...(attrs.alwaysView
147
- ? [attrs.alwaysView({attrs, state})]
148
- : [])
149
-
150
- ]
151
- ) : [];
152
- },
153
- ({attrs, state}) => {
154
- if (!attrs.cardid) {
155
- state.collapsed = attrs.nofold
156
- ? false
157
- : attrs.cardid
158
- ? !globalState[attrs.cardid]
159
- : !!attrs.collapsed;
160
- }
161
- },
162
- undefined,
163
- undefined,
164
- undefined,
165
- {setCardStatus}
166
- );
167
-
168
- export default CardieWidget;
@@ -1,112 +0,0 @@
1
- import m from "mithril";
2
- import defineWidget from "../util/widgets.utils";
3
- import {confirm} from "../util/fuckingconfirm";
4
- import {ButtonNew} from "./Basic"
5
- import {promptOptions} from "./OverflowUtils";
6
-
7
- function storyOverflow(attrs) {
8
-
9
- const
10
- {
11
- title,
12
- items: maybeFunctionItems,
13
- itemsKey,
14
- itemsText,
15
- field,
16
- onchange,
17
- textNew,
18
- textHint,
19
- resolve,
20
- icon
21
- } = attrs,
22
- source = typeof maybeFunctionItems === "function" ? maybeFunctionItems() : maybeFunctionItems,
23
- items = itemsKey ? typeof itemsKey === "function" ? itemsKey() : source[itemsKey] : source;
24
-
25
- return promptOptions(items, onchange, {title, field, icon, textNew, textHint, resolve});
26
- }
27
-
28
- const
29
- ComboPrompt = defineWidget(
30
- ({attrs}) => m(
31
- ".flexcol.combocontainer.grows", {
32
- class: (attrs.outerClass || "") + " " + (attrs.label ? "witharia" : ""),
33
- ...attrs.label && {"aria-label": attrs.label},
34
- title: attrs.hint
35
- }, [
36
-
37
- m(
38
- ".flexrow.combowidget.bg-inputs",
39
- {
40
- class: (attrs.value ? "yesvalue " : "novalue ") + (attrs.class || "")
41
- },
42
- [
43
- m(ButtonNew, {
44
- class: "transp combovalue grows flexrow " + (attrs.buttonClass || "") + (attrs.innerLabel ? " witharia" : ""),
45
- textClass: "grows " + attrs.textClass,
46
- iconClass: "noshrink",
47
- ...attrs.innerLabel && {"aria-label": attrs.innerLabel},
48
- onClick: (e) => {
49
- if (e.shiftKey) {
50
- attrs.onchange(undefined, e);
51
- } else if (!attrs.locked) {
52
- storyOverflow(attrs);
53
- }
54
- },
55
- ...attrs.value
56
- ? {
57
- icon: attrs.value?.icon || attrs.icon,
58
- text: attrs.field || attrs.fieldTitle
59
- ? attrs.value[attrs.fieldTitle || attrs.field]
60
- : attrs.itemsText
61
- ? attrs.itemsText[attrs.value] || attrs.value
62
- : attrs.value
63
- }
64
- : {
65
- icon: attrs.emptyIcon || (attrs.emptyText ? "" : "plus"),
66
- text: attrs.emptyText || ""
67
- }
68
- }),
69
- attrs.value && !attrs.nodelete
70
- ? [
71
- m(
72
- ButtonNew,
73
- {
74
- class: "clrcombo pad-2 pad-h transp " + (attrs.closeClass || "scaff-left"),
75
- onClick: (e) => {
76
-
77
- const {field} = attrs;
78
- if (attrs.confirm && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
79
- const msg = attrs.confirm();
80
- if (msg) {
81
- confirm(msg, () => {
82
- attrs.onchange(field ? undefined : "", e);
83
- });
84
- } else {
85
- attrs.onchange(field ? undefined : "", e);
86
- }
87
- } else {
88
- attrs.onchange(field ? undefined : "", e);
89
- }
90
- m.redraw();
91
- /*
92
- if (attrs.confirm && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
93
- confirm(attrs.confirm, () => {
94
- attrs.onchange(attrs.field ? undefined : "", e);
95
- });
96
- } else {
97
- attrs.onchange(attrs.field ? undefined : "", e);
98
- }
99
- m.redraw();
100
- */
101
- },
102
- icon: attrs.removeIcon || "times",
103
- title: attrs.removeHint || "remove this item"
104
- }
105
- )
106
- ]
107
- : []
108
- ]
109
- )])
110
- );
111
-
112
- export default ComboPrompt;