@alexgyver/component 1.1.2 → 1.1.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 -13
- package/package.json +1 -1
package/Component.js
CHANGED
|
@@ -4,9 +4,9 @@ export class Component {
|
|
|
4
4
|
* @param {string} tag html tag элемента
|
|
5
5
|
* @param {object} data параметры
|
|
6
6
|
*/
|
|
7
|
-
constructor(tag, data = {},
|
|
7
|
+
constructor(tag, data = {}, svg = false) {
|
|
8
8
|
data.context = this;
|
|
9
|
-
this.$root = Component.make(tag, data,
|
|
9
|
+
this.$root = Component.make(tag, data, svg);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
/**
|
|
@@ -32,13 +32,13 @@ export class Component {
|
|
|
32
32
|
* child - DOM, Component, object, html string
|
|
33
33
|
* всё остальное будет добавлено как property
|
|
34
34
|
*/
|
|
35
|
-
static make(tag, data = {},
|
|
35
|
+
static make(tag, data = {}, svg = false) {
|
|
36
36
|
if (!tag || typeof data !== 'object') return null;
|
|
37
37
|
if (data instanceof Node) return data;
|
|
38
|
-
return Component.config(
|
|
38
|
+
return Component.config(svg ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, svg);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
static
|
|
41
|
+
static makeSVG(tag, data = {}) {
|
|
42
42
|
return Component.make(tag, data, true);
|
|
43
43
|
}
|
|
44
44
|
|
|
@@ -76,16 +76,18 @@ export class Component {
|
|
|
76
76
|
* Настроить элемент
|
|
77
77
|
* @param {Node} el элемент
|
|
78
78
|
* @param {object} data параметры
|
|
79
|
-
* @param {object}
|
|
79
|
+
* @param {object} svg SVG
|
|
80
80
|
* @returns {Node}
|
|
81
81
|
*/
|
|
82
|
-
static config(el, data,
|
|
82
|
+
static config(el, data, svg = false) {
|
|
83
83
|
if (Array.isArray(el)) {
|
|
84
|
-
el.forEach(e => Component.config(e, data,
|
|
84
|
+
el.forEach(e => Component.config(e, data, svg));
|
|
85
85
|
return;
|
|
86
86
|
}
|
|
87
87
|
if (!(el instanceof Node) || (typeof data !== 'object')) return el;
|
|
88
|
+
|
|
88
89
|
const context = data.context;
|
|
90
|
+
if ('svg' in data) svg = data.svg;
|
|
89
91
|
|
|
90
92
|
let addChild = (obj) => {
|
|
91
93
|
if (!obj) return;
|
|
@@ -93,7 +95,7 @@ export class Component {
|
|
|
93
95
|
else if (obj instanceof Component) el.appendChild(obj.$root);
|
|
94
96
|
else if (typeof obj === 'object') {
|
|
95
97
|
if (!obj.context) obj.context = context;
|
|
96
|
-
let cmp = Component.make(obj.tag, obj,
|
|
98
|
+
let cmp = Component.make(obj.tag, obj, svg);
|
|
97
99
|
if (cmp) el.appendChild(cmp);
|
|
98
100
|
} else if (typeof obj === 'string') {
|
|
99
101
|
el.innerHTML += obj;
|
|
@@ -105,6 +107,7 @@ export class Component {
|
|
|
105
107
|
switch (key) {
|
|
106
108
|
case 'tag':
|
|
107
109
|
case 'context':
|
|
110
|
+
case 'svg':
|
|
108
111
|
continue;
|
|
109
112
|
case 'text': el.textContent = val; break;
|
|
110
113
|
case 'html': el.innerHTML = val; break;
|
|
@@ -130,7 +133,7 @@ export class Component {
|
|
|
130
133
|
return el;
|
|
131
134
|
}
|
|
132
135
|
|
|
133
|
-
static
|
|
136
|
+
static configSVG(el, data) {
|
|
134
137
|
return Component.config(el, data, true);
|
|
135
138
|
}
|
|
136
139
|
|
|
@@ -139,12 +142,12 @@ export class Component {
|
|
|
139
142
|
* @param {array} arr массив объектов конфигурации
|
|
140
143
|
* @returns {array} of Elements
|
|
141
144
|
*/
|
|
142
|
-
static makeArray(arr,
|
|
145
|
+
static makeArray(arr, svg = false) {
|
|
143
146
|
if (!arr || !Array.isArray(arr)) return [];
|
|
144
|
-
return arr.map(x => Component.make(x.tag, x,
|
|
147
|
+
return arr.map(x => Component.make(x.tag, x, svg));
|
|
145
148
|
}
|
|
146
149
|
|
|
147
|
-
static
|
|
150
|
+
static makeArraySVG(arr) {
|
|
148
151
|
return Component.makeArray(arr, true);
|
|
149
152
|
}
|
|
150
153
|
}
|