@alexgyver/component 1.0.18 → 1.0.20
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 +89 -76
- package/example/script.js +5 -5
- package/package.json +1 -1
package/component.js
CHANGED
|
@@ -1,73 +1,12 @@
|
|
|
1
|
-
export class Sheet {
|
|
2
|
-
/**
|
|
3
|
-
* Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
|
|
4
|
-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
5
|
-
* @param {string} id уникальный id стиля
|
|
6
|
-
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
7
|
-
*/
|
|
8
|
-
static addStyle(style, id, ext = false) {
|
|
9
|
-
if (!style || !id) return;
|
|
10
|
-
if (typeof id === 'object') id = id.constructor.name;
|
|
11
|
-
|
|
12
|
-
if (!Sheet.#internal.has(id) && !Sheet.#external.has(id)) {
|
|
13
|
-
if (typeof style === 'object') {
|
|
14
|
-
let str = '';
|
|
15
|
-
let f = 0;
|
|
16
|
-
for (const v of style) {
|
|
17
|
-
if (f = !f) {
|
|
18
|
-
str += v;
|
|
19
|
-
} else {
|
|
20
|
-
str += '{';
|
|
21
|
-
for (const rule of v) str += rule + ';';
|
|
22
|
-
str += '}';
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
style = str;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
if (ext) {
|
|
29
|
-
let sheet = document.createElement('style');
|
|
30
|
-
document.head.appendChild(sheet);
|
|
31
|
-
sheet.sheet.insertRule(style);
|
|
32
|
-
Sheet.#external.set(id, sheet);
|
|
33
|
-
} else {
|
|
34
|
-
if (!Sheet.#sheet) {
|
|
35
|
-
Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
|
|
36
|
-
}
|
|
37
|
-
Sheet.#sheet.insertRule(style);
|
|
38
|
-
Sheet.#internal.add(id);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Удалить ext стиль по его id
|
|
45
|
-
* @param {string} id id стиля
|
|
46
|
-
*/
|
|
47
|
-
static removeStyle(id) {
|
|
48
|
-
if (Sheet.#external.has(id)) {
|
|
49
|
-
Sheet.#external.get(id).remove();
|
|
50
|
-
Sheet.#external.delete(id);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
static #sheet;
|
|
55
|
-
static #internal = new Set();
|
|
56
|
-
static #external = new Map();
|
|
57
|
-
}
|
|
58
|
-
|
|
59
1
|
export class Component {
|
|
60
2
|
/**
|
|
61
3
|
* Создать компонент и поместить его в переменную $root
|
|
62
4
|
* @param {string} tag html tag элемента
|
|
63
5
|
* @param {object} data параметры
|
|
64
|
-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
65
|
-
* @param {string|this} id уникальный id стиля
|
|
66
|
-
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
67
6
|
*/
|
|
68
|
-
constructor(tag, data = {}
|
|
7
|
+
constructor(tag, data = {}) {
|
|
69
8
|
data.context = this;
|
|
70
|
-
this.$root = Component.
|
|
9
|
+
this.$root = Component.make(tag, data);
|
|
71
10
|
}
|
|
72
11
|
|
|
73
12
|
/*
|
|
@@ -120,6 +59,7 @@ export class Component {
|
|
|
120
59
|
break;
|
|
121
60
|
case 'children':
|
|
122
61
|
for (const obj of val) {
|
|
62
|
+
if (!obj) continue;
|
|
123
63
|
if (obj instanceof Node) $el.appendChild(obj);
|
|
124
64
|
else if (obj instanceof Component) $el.appendChild(obj.$root);
|
|
125
65
|
else if (typeof obj === 'object') {
|
|
@@ -137,19 +77,6 @@ export class Component {
|
|
|
137
77
|
return $el;
|
|
138
78
|
}
|
|
139
79
|
|
|
140
|
-
/**
|
|
141
|
-
* Создать компонент со стилем
|
|
142
|
-
* @param {string} tag html tag элемента
|
|
143
|
-
* @param {object} data параметры
|
|
144
|
-
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
145
|
-
* @param {string|this} id уникальный id стиля
|
|
146
|
-
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
147
|
-
*/
|
|
148
|
-
static makeStyled(tag, data = {}, style = null, id = null, ext = false) {
|
|
149
|
-
Sheet.addStyle(style, id, ext);
|
|
150
|
-
return Component.make(tag, data);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
80
|
/**
|
|
154
81
|
* Создать массив компонентов из массива объектов конфигурации
|
|
155
82
|
* @param {array} arr массив объектов конфигурации
|
|
@@ -158,4 +85,90 @@ export class Component {
|
|
|
158
85
|
static makeArray(arr) {
|
|
159
86
|
return arr.map(x => Component.make(x.tag, x));
|
|
160
87
|
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
export class Sheet {
|
|
91
|
+
/**
|
|
92
|
+
* Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
|
|
93
|
+
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
94
|
+
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
|
|
95
|
+
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
96
|
+
*/
|
|
97
|
+
static addStyle(style, id, ext = false) {
|
|
98
|
+
if (!style || !id) return;
|
|
99
|
+
if (typeof id === 'object') id = id.constructor.name;
|
|
100
|
+
|
|
101
|
+
if (!Sheet.#internal.has(id) && !Sheet.#external.has(id)) {
|
|
102
|
+
if (typeof style === 'object') {
|
|
103
|
+
let str = '';
|
|
104
|
+
let f = 0;
|
|
105
|
+
for (const v of style) {
|
|
106
|
+
if (f = !f) {
|
|
107
|
+
str += v;
|
|
108
|
+
} else {
|
|
109
|
+
str += '{';
|
|
110
|
+
for (const rule of v) str += rule + ';';
|
|
111
|
+
str += '}';
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
style = str;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
if (ext) {
|
|
118
|
+
let sheet = document.createElement('style');
|
|
119
|
+
document.head.appendChild(sheet);
|
|
120
|
+
sheet.sheet.insertRule(style);
|
|
121
|
+
Sheet.#external.set(id, sheet);
|
|
122
|
+
} else {
|
|
123
|
+
if (!Sheet.#sheet) {
|
|
124
|
+
Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
|
|
125
|
+
}
|
|
126
|
+
Sheet.#sheet.insertRule(style);
|
|
127
|
+
Sheet.#internal.add(id);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Удалить ext стиль по его id
|
|
134
|
+
* @param {string} id id стиля
|
|
135
|
+
*/
|
|
136
|
+
static removeStyle(id) {
|
|
137
|
+
if (Sheet.#external.has(id)) {
|
|
138
|
+
Sheet.#external.get(id).remove();
|
|
139
|
+
Sheet.#external.delete(id);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
static #sheet;
|
|
144
|
+
static #internal = new Set();
|
|
145
|
+
static #external = new Map();
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
export class StyledComponent extends Component {
|
|
149
|
+
/**
|
|
150
|
+
* Создать компонент и поместить его в переменную $root
|
|
151
|
+
* @param {string} tag html tag элемента
|
|
152
|
+
* @param {object} data параметры
|
|
153
|
+
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
154
|
+
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
|
|
155
|
+
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
156
|
+
*/
|
|
157
|
+
constructor(tag, data = {}, style = null, id = null, ext = false) {
|
|
158
|
+
super(tag, data);
|
|
159
|
+
Sheet.addStyle(style, id, ext);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Создать компонент
|
|
164
|
+
* @param {string} tag html tag элемента
|
|
165
|
+
* @param {object} data параметры
|
|
166
|
+
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
167
|
+
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
|
|
168
|
+
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
169
|
+
*/
|
|
170
|
+
static make(tag, data = {}, style = null, id = null, ext = false) {
|
|
171
|
+
Sheet.addStyle(style, id, ext);
|
|
172
|
+
return Component.make(tag, data);
|
|
173
|
+
}
|
|
161
174
|
}
|
package/example/script.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Sheet } from "../component.js";
|
|
1
|
+
import { Component, Sheet, StyledComponent } from "../component.js";
|
|
2
2
|
|
|
3
3
|
// кнопка наследует, стили добавляются отдельно
|
|
4
4
|
class Button extends Component {
|
|
@@ -26,7 +26,7 @@ class Button extends Component {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
// инпут сразу добавляет стили
|
|
29
|
-
class Input extends
|
|
29
|
+
class Input extends StyledComponent {
|
|
30
30
|
constructor(text) {
|
|
31
31
|
super('input',
|
|
32
32
|
{
|
|
@@ -46,7 +46,7 @@ class Input extends Component {
|
|
|
46
46
|
|
|
47
47
|
class Num {
|
|
48
48
|
constructor(text) {
|
|
49
|
-
return new
|
|
49
|
+
return new StyledComponent('input',
|
|
50
50
|
{
|
|
51
51
|
type: 'number',
|
|
52
52
|
value: text,
|
|
@@ -65,7 +65,7 @@ class Num {
|
|
|
65
65
|
|
|
66
66
|
// функция вернёт элемент
|
|
67
67
|
function Checkbox(name) {
|
|
68
|
-
return
|
|
68
|
+
return StyledComponent.make('div',
|
|
69
69
|
{
|
|
70
70
|
children: [
|
|
71
71
|
{
|
|
@@ -90,7 +90,7 @@ function Container(children) {
|
|
|
90
90
|
document.addEventListener("DOMContentLoaded", () => {
|
|
91
91
|
Component.make('h1', {
|
|
92
92
|
text: 'Hello!',
|
|
93
|
-
|
|
93
|
+
parent: document.body,
|
|
94
94
|
});
|
|
95
95
|
|
|
96
96
|
let b = new Button('b1', () => console.log(123));
|