@alexgyver/component 1.0.20 → 1.0.22
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/component.js +29 -20
- package/package.json +1 -1
package/component.js
CHANGED
|
@@ -30,51 +30,60 @@ export class Component {
|
|
|
30
30
|
* Создать компонент
|
|
31
31
|
* @param {string} tag html tag элемента
|
|
32
32
|
* @param {object} data параметры
|
|
33
|
+
* @returns {Node}
|
|
33
34
|
*/
|
|
34
35
|
static make(tag, data = {}) {
|
|
35
36
|
if (!tag || typeof data !== 'object') return null;
|
|
36
37
|
if (data instanceof Node) return data;
|
|
38
|
+
return Component.config(document.createElement(tag), data);
|
|
39
|
+
}
|
|
37
40
|
|
|
41
|
+
/**
|
|
42
|
+
* Настроить элемент
|
|
43
|
+
* @param {Node} el элемент
|
|
44
|
+
* @param {object} data параметры
|
|
45
|
+
* @returns {Node}
|
|
46
|
+
*/
|
|
47
|
+
static config(el, data) {
|
|
48
|
+
if (!(el instanceof Node)) return el;
|
|
38
49
|
const context = data.context;
|
|
39
|
-
const $el = document.createElement(tag);
|
|
40
|
-
|
|
41
50
|
for (const [key, val] of Object.entries(data)) {
|
|
42
51
|
switch (key) {
|
|
43
52
|
case 'tag':
|
|
44
53
|
case 'context':
|
|
45
54
|
continue;
|
|
46
|
-
case 'text':
|
|
47
|
-
case 'html':
|
|
48
|
-
case 'class':
|
|
49
|
-
case 'also': if (context) val.call(context,
|
|
50
|
-
case 'export': val[0] =
|
|
51
|
-
case 'var': if (context) context['$' + val] =
|
|
52
|
-
case 'events': for (let ev in val) if (val[ev])
|
|
53
|
-
case 'parent': if (val instanceof Element) val.append(
|
|
54
|
-
case 'attrs': for (let attr in val)
|
|
55
|
-
case 'props': for (let prop in val)
|
|
55
|
+
case 'text': el.textContent = val; break;
|
|
56
|
+
case 'html': el.innerHTML = val; break;
|
|
57
|
+
case 'class': el.className = val; break;
|
|
58
|
+
case 'also': if (context) val.call(context, el); break;
|
|
59
|
+
case 'export': val[0] = el; break;
|
|
60
|
+
case 'var': if (context) context['$' + val] = el; break;
|
|
61
|
+
case 'events': for (let ev in val) if (val[ev]) el.addEventListener(ev, val[ev].bind(context)); break;
|
|
62
|
+
case 'parent': if (val instanceof Element) val.append(el); break;
|
|
63
|
+
case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
|
|
64
|
+
case 'props': for (let prop in val) el[prop] = val[prop]; break;
|
|
56
65
|
case 'style':
|
|
57
|
-
if (typeof val === 'string')
|
|
58
|
-
else for (let st in val)
|
|
66
|
+
if (typeof val === 'string') el.style.cssText += (val + ';');
|
|
67
|
+
else for (let st in val) el.style[st] = val[st];
|
|
59
68
|
break;
|
|
60
69
|
case 'children':
|
|
61
70
|
for (const obj of val) {
|
|
62
71
|
if (!obj) continue;
|
|
63
|
-
if (obj instanceof Node)
|
|
64
|
-
else if (obj instanceof Component)
|
|
72
|
+
if (obj instanceof Node) el.appendChild(obj);
|
|
73
|
+
else if (obj instanceof Component) el.appendChild(obj.$root);
|
|
65
74
|
else if (typeof obj === 'object') {
|
|
66
75
|
if (!obj.context) obj.context = context;
|
|
67
76
|
let cmp = Component.make(obj.tag, obj);
|
|
68
|
-
if (cmp)
|
|
77
|
+
if (cmp) el.appendChild(cmp);
|
|
69
78
|
} else if (typeof obj === 'string') {
|
|
70
|
-
|
|
79
|
+
el.innerHTML += obj;
|
|
71
80
|
}
|
|
72
81
|
}
|
|
73
82
|
break;
|
|
74
|
-
default:
|
|
83
|
+
default: el[key] = val; break;
|
|
75
84
|
}
|
|
76
85
|
}
|
|
77
|
-
return
|
|
86
|
+
return el;
|
|
78
87
|
}
|
|
79
88
|
|
|
80
89
|
/**
|