@alexgyver/component 1.0.2 → 1.0.3
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 +16 -7
- package/package.json +1 -1
package/component.js
CHANGED
|
@@ -31,7 +31,9 @@ export class Sheet {
|
|
|
31
31
|
sheet.sheet.insertRule(style);
|
|
32
32
|
Sheet.#external.set(id, sheet);
|
|
33
33
|
} else {
|
|
34
|
-
if (!Sheet.#sheet)
|
|
34
|
+
if (!Sheet.#sheet) {
|
|
35
|
+
Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
|
|
36
|
+
}
|
|
35
37
|
Sheet.#sheet.insertRule(style);
|
|
36
38
|
Sheet.#internal.add(id);
|
|
37
39
|
}
|
|
@@ -69,11 +71,16 @@ export class Component {
|
|
|
69
71
|
}
|
|
70
72
|
|
|
71
73
|
/*
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
tag {string} тег html элемента (для указания в children например)
|
|
75
|
+
context {object} контекст для параметра 'var' и вызовов 'also'
|
|
76
|
+
text {string} добавить в textContent
|
|
77
|
+
html {string} добавить в innerHTML
|
|
78
|
+
class {string} добавить в className
|
|
79
|
+
also {function} - вызвать с текущим компонентом: { ... , also(el) { console.log(el); }, }
|
|
80
|
+
var {string} создаёт переменную $имя в указанном контексте
|
|
81
|
+
events {object} добавляет addEventListener'ы {event: handler}
|
|
82
|
+
append - {Element} добавляет компонент к указанному элементу (имеет смысл только для корневого компонента)
|
|
83
|
+
style {string | object} объект в виде { padding: '0px', ... } или строка css стилей
|
|
77
84
|
children - массив DOM, Component, object, html string
|
|
78
85
|
*/
|
|
79
86
|
/**
|
|
@@ -87,14 +94,15 @@ export class Component {
|
|
|
87
94
|
static make(tag, data = {}, style = null, id = null, ext = false) {
|
|
88
95
|
Sheet.addStyle(style, id, ext);
|
|
89
96
|
if (!tag || typeof data !== 'object') return null;
|
|
97
|
+
if (data instanceof Node) return data;
|
|
90
98
|
|
|
91
99
|
const context = data.context;
|
|
92
100
|
const $el = document.createElement(tag);
|
|
93
101
|
|
|
94
102
|
for (const [key, val] of Object.entries(data)) {
|
|
95
103
|
switch (key) {
|
|
96
|
-
case 'context':
|
|
97
104
|
case 'tag':
|
|
105
|
+
case 'context':
|
|
98
106
|
continue;
|
|
99
107
|
case 'text': $el.textContent = val; break;
|
|
100
108
|
case 'html': $el.innerHTML = val; break;
|
|
@@ -102,6 +110,7 @@ export class Component {
|
|
|
102
110
|
case 'also': if (context) val.call(context, $el); break;
|
|
103
111
|
case 'var': if (context) context['$' + val] = $el; break;
|
|
104
112
|
case 'events': for (const [ev, handler] of Object.entries(val)) $el.addEventListener(ev, handler.bind(context)); break;
|
|
113
|
+
case 'append': if (val instanceof Element) val.append($el); break;
|
|
105
114
|
case 'style':
|
|
106
115
|
if (typeof val === 'string') $el.style = val + ';';
|
|
107
116
|
else for (const [skey, sval] of Object.entries(val)) $el.style[skey] = sval;
|