@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,238 +0,0 @@
1
- import m from "mithril";
2
- import {ButtonNew} from "./Basic";
3
-
4
- /* eslint-disable no-prototype-builtins,no-nested-ternary */
5
- /* global m, Hammer */
6
-
7
- const
8
-
9
- getInput = (attrs, value, parse = false) => {
10
- if (parse || attrs.type === "number") {
11
- const val = attrs.float ? Number.parseFloat(value) : Number.parseInt(value, 10);
12
- return Number.isNaN(val) ? undefined : val;
13
- }
14
- return value;
15
- },
16
- getValue = (attrs, state, parse) => {
17
- const lastVal = state.hasOwnProperty("value") ? state.value : attrs.value;
18
- return getInput(attrs, lastVal, parse);
19
- },
20
- /*
21
- hammer = new Hammer.Manager(dom, { touchAction: "pan-y" }),
22
- panner = new Hammer.Pan({ direction: Hammer.DIRECTION_VERTICAL }),
23
- singleTap = listenTap && new Hammer.Tap();
24
-
25
- hammer.add(listenTap ? [panner, singleTap] : [panner]);
26
- hammer.on("panstart", (e) => {
27
-
28
- */
29
-
30
- StaticFieldWidget = {
31
- view: (vnode) => {
32
- const {attrs, state} = vnode;
33
- // este vnode NO es el mismo que el del hammer, pero su estado SI !
34
- state.attrs = attrs; // guardamos una copia de los ultimos attrs en el estado
35
-
36
- return m(
37
- ".input-static.w-100.ellipsis",
38
- {
39
- class: (attrs.onDrag ? "withdrag " : "") + (attrs.staticClass || "grows"),
40
- ...attrs.staticTitle && {title: attrs.staticTitle},
41
- ...attrs.onDrag || {onclick: attrs.onClick},
42
- oncreate: ({dom, state}) => {
43
-
44
- if (attrs.onDrag && !attrs.readonly) {
45
-
46
- const
47
- hammer = state.hammer = new Hammer.Manager(dom, {touchAction: "pan-y"}),
48
- panner = new Hammer.Pan({direction: Hammer.DIRECTION_VERTICAL}),
49
- singleTap = new Hammer.Tap();
50
-
51
- hammer.add([panner, singleTap]);
52
- hammer.on("tap", () => vnode.state.attrs.onClick());
53
- hammer.on("panup", (e) => vnode.state.attrs.onDrag(-1, e.srcEvent));
54
- hammer.on("pandown", (e) => vnode.state.attrs.onDrag(1, e.srcEvent));
55
- hammer.on("panend pancancel", (e) => vnode.state.attrs.onDrag(0, e.srcEvent));
56
- }
57
- if (attrs.focus) {
58
- dom.focus();
59
- }
60
- },
61
- onremove: ({state}) => {
62
- state.hammer && state.hammer.destroy();
63
- }
64
- },
65
- attrs.value
66
- );
67
- }
68
- },
69
- InputWidget = {
70
- view: ({attrs, state}) => {
71
- const reset = (redraw) => {
72
- // if (state.value !== undefined && state.showInput) delete state.showInput;
73
- if (state.value && state.showInput) delete state.showInput;
74
- delete state.value;
75
- if (redraw) m.redraw();
76
- };
77
- return m(
78
- ".textfield.flexcol.relative",
79
- {
80
- class: (attrs.label ? "witharia" : "") + (attrs.containerClass ? " " + attrs.containerClass : ""),
81
- ...attrs.label && {"aria-label": attrs.label}
82
- },
83
- [
84
- (attrs.staticField && (attrs.readonly || !state.showInput))
85
- ? m(StaticFieldWidget, {
86
- readonly: attrs.readonly,
87
- staticClass: (state.dragging ? "accent " : "") + (attrs.staticClass || ""),
88
- staticTitle: attrs.staticTitle || attrs.draginc && "Click then drag up and down to modify value, or just click to enter a custom value",
89
- value: attrs.displayTitle || getValue(attrs, state),
90
- focus: attrs.focus,
91
- ...attrs.draginc && !attrs.readonly && {
92
- onDrag: (direction, event) => {
93
- if (direction) {
94
- state.dragging = true;
95
- let value = getValue(attrs, state, true);
96
- if (Number.isNaN(value) || value === undefined) return;
97
- value += direction * attrs.draginc;
98
- if (attrs.max !== undefined && value > attrs.max) value = attrs.max;
99
- if (attrs.min !== undefined && value < attrs.min) value = attrs.min;
100
- state.value = attrs.type === "number" ? value : String(value);
101
- attrs.onchange(state.value, event);
102
- } else {
103
- delete state.dragging;
104
- delete state.value;
105
- m.redraw();
106
- }
107
- }
108
- },
109
- ...attrs.readonly || {
110
- onClick: () => {
111
- state.showInput = true;
112
- state.value = attrs.value;
113
- m.redraw();
114
- }
115
- }
116
- })
117
-
118
- : ((state.multi || attrs.alwaysmulti) && (!attrs.type || attrs.type === "text"))
119
- ? m("textarea.w-100", {
120
- class: attrs.class,
121
- value: getValue(attrs, state),
122
- ...attrs.title && {title: attrs.title},
123
- placeholder: attrs.hint || "",
124
- oninput: (event) => {
125
- state.value = getInput(attrs, event.target.value);
126
- if (attrs.validator) state.isValid = attrs.validator(state.value);
127
- if (attrs.onchange) {
128
- (attrs.oninput || attrs.onchange)(state.value, event, true);
129
- }
130
- },
131
- onchange: (event) => {
132
- if (attrs.onchange) {
133
- if (attrs.validator) state.isValid = attrs.validator(state.value);
134
- const value = getInput(attrs, event.target.value);
135
- reset(false);
136
- attrs.onchange(value, event, true);
137
- }
138
- },
139
- onblur: () => {
140
- if (state.showInput) {
141
- reset(true);
142
- }
143
- },
144
- onkeyup: (event) => {
145
- if (event.key === "Escape" && state.showInput) {
146
- reset(false);
147
- }
148
- }
149
- })
150
- : m("input.w-100", {
151
- ...attrs.id && {id: attrs.id},
152
- type: attrs.type || "text",
153
- ...attrs.max !== undefined && {max: attrs.max},
154
- ...attrs.min !== undefined && {min: attrs.min},
155
- ...attrs.step > 0 && {step: attrs.step},
156
- ...attrs.maxlength && {maxlength: attrs.maxlength},
157
- class: (attrs.class || "") + (attrs.validator ? state.isValid ? " bg-ok" : " bg-error" : ""),
158
- ...attrs.title && {title: attrs.title},
159
- value: getValue(attrs, state),
160
- placeholder: attrs.hint || "",
161
- oninput: (event) => {
162
- state.value = getInput(attrs, event.target.value);
163
- event.fromoninput = true;
164
- if (attrs.validator) state.isValid = attrs.validator(state.value);
165
- if (attrs.onchange) {
166
- (attrs.oninput || attrs.onchange)(state.value, event);
167
- }
168
- },
169
- onchange: (event) => {
170
- if (attrs.onchange) {
171
- if (attrs.validator) state.isValid = attrs.validator(state.value);
172
- event.enterPressed = state.enterPressed;
173
- delete state.enterPressed;
174
- attrs.onchange(getInput(attrs, event.target.value), event);
175
- if (attrs.staticField) {
176
- reset(true);
177
- } else {
178
- delete state.value;
179
- }
180
- }
181
- },
182
- onblur: () => {
183
- if (state.showInput) {
184
- reset(true);
185
- }
186
- },
187
- onkeyup: (event) => {
188
- if (state.showInput) {
189
- if (event.key === "Escape") {
190
- reset(true);
191
- } else if (event.key === "Enter") {
192
- if (state.value === attrs.value || !state.value) {
193
- attrs.onchange(attrs.value, event);
194
- reset(true);
195
- }
196
- }
197
- }
198
- },
199
- onkeypress: (event) => {
200
- if (!state.showInput && event.key === "Enter") {
201
- attrs.onenter && attrs.onenter(event.target.value, event);
202
- }
203
- }
204
- }),
205
-
206
- m(".span.actions.absolute.right.bottom", [
207
- ...(attrs.multi && !attrs.alwaysmulti && (!attrs.type || attrs.type === "text"))
208
- ? [
209
- m(ButtonNew, {
210
- icon: state.multi ? "angle-double-up" : "angle-double-down",
211
- class: "pad-2 transp",
212
- onClick: () => {
213
- state.multi = !state.multi;
214
- m.redraw();
215
- }
216
- })
217
- ]
218
- : [],
219
- ...attrs.actions ? attrs.actions.map((action) => m(ButtonNew, {
220
- ...action,
221
- class: "transp pad-2"
222
- })) : [],
223
- ...attrs.action
224
- ? [
225
- m(ButtonNew, {...attrs.action, class: "transp pad-2"})
226
- ] : []
227
- ])
228
- ]);
229
- },
230
- oninit: ({attrs, state}) => {
231
- if (attrs.staticField && attrs.draginc) {
232
- const value = getValue(attrs, state, true);
233
- state.showInput = (Number.isNaN(value) || value === undefined || value === null);
234
- }
235
- }
236
- };
237
-
238
- export default InputWidget;
@@ -1,32 +0,0 @@
1
- import m from "mithril";
2
- import defineWidget from "../util/widgets.utils";
3
- import {Icon} from "./Basic";
4
-
5
- const
6
- NoticeWidget = defineWidget(
7
- ({attrs, children}) => (
8
- children.length
9
- ? m(
10
- ".notice.cardie.flexcol.pad-3",
11
- {class: attrs.class || "marg-2 font-75"},
12
- m(
13
- ".flexrow",
14
- [
15
- ...attrs.icon ? [m(Icon, attrs)] : [],
16
- m(".pad-2.pad-h", attrs.text)
17
- ]
18
- ),
19
- ...children
20
- )
21
- : m(
22
- ".notice.cardie.flexrow.pad-3",
23
- {class: attrs.class || "marg-2 font-75", onclick: attrs.onClick},
24
- [
25
- ...attrs.icon ? [m(Icon, attrs)] : [],
26
- m(".pad-2.pad-h", attrs.text)
27
- ]
28
- )
29
- )
30
- );
31
-
32
- export default NoticeWidget;