@alexgyver/component 1.0.18 → 1.0.19
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 +88 -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
|
/*
|
|
@@ -137,19 +76,6 @@ export class Component {
|
|
|
137
76
|
return $el;
|
|
138
77
|
}
|
|
139
78
|
|
|
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
79
|
/**
|
|
154
80
|
* Создать массив компонентов из массива объектов конфигурации
|
|
155
81
|
* @param {array} arr массив объектов конфигурации
|
|
@@ -158,4 +84,90 @@ export class Component {
|
|
|
158
84
|
static makeArray(arr) {
|
|
159
85
|
return arr.map(x => Component.make(x.tag, x));
|
|
160
86
|
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
export class Sheet {
|
|
90
|
+
/**
|
|
91
|
+
* Добавить стиль с уникальным id в head. ext - стиль можно будет удалить по id
|
|
92
|
+
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
93
|
+
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
|
|
94
|
+
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
95
|
+
*/
|
|
96
|
+
static addStyle(style, id, ext = false) {
|
|
97
|
+
if (!style || !id) return;
|
|
98
|
+
if (typeof id === 'object') id = id.constructor.name;
|
|
99
|
+
|
|
100
|
+
if (!Sheet.#internal.has(id) && !Sheet.#external.has(id)) {
|
|
101
|
+
if (typeof style === 'object') {
|
|
102
|
+
let str = '';
|
|
103
|
+
let f = 0;
|
|
104
|
+
for (const v of style) {
|
|
105
|
+
if (f = !f) {
|
|
106
|
+
str += v;
|
|
107
|
+
} else {
|
|
108
|
+
str += '{';
|
|
109
|
+
for (const rule of v) str += rule + ';';
|
|
110
|
+
str += '}';
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
style = str;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
if (ext) {
|
|
117
|
+
let sheet = document.createElement('style');
|
|
118
|
+
document.head.appendChild(sheet);
|
|
119
|
+
sheet.sheet.insertRule(style);
|
|
120
|
+
Sheet.#external.set(id, sheet);
|
|
121
|
+
} else {
|
|
122
|
+
if (!Sheet.#sheet) {
|
|
123
|
+
Sheet.#sheet = document.head.appendChild(document.createElement('style')).sheet;
|
|
124
|
+
}
|
|
125
|
+
Sheet.#sheet.insertRule(style);
|
|
126
|
+
Sheet.#internal.add(id);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Удалить ext стиль по его id
|
|
133
|
+
* @param {string} id id стиля
|
|
134
|
+
*/
|
|
135
|
+
static removeStyle(id) {
|
|
136
|
+
if (Sheet.#external.has(id)) {
|
|
137
|
+
Sheet.#external.get(id).remove();
|
|
138
|
+
Sheet.#external.delete(id);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
static #sheet;
|
|
143
|
+
static #internal = new Set();
|
|
144
|
+
static #external = new Map();
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
export class StyledComponent extends Component {
|
|
148
|
+
/**
|
|
149
|
+
* Создать компонент и поместить его в переменную $root
|
|
150
|
+
* @param {string} tag html tag элемента
|
|
151
|
+
* @param {object} data параметры
|
|
152
|
+
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
153
|
+
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
|
|
154
|
+
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
155
|
+
*/
|
|
156
|
+
constructor(tag, data = {}, style = null, id = null, ext = false) {
|
|
157
|
+
super(tag, data);
|
|
158
|
+
Sheet.addStyle(style, id, ext);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* Создать компонент
|
|
163
|
+
* @param {string} tag html tag элемента
|
|
164
|
+
* @param {object} data параметры
|
|
165
|
+
* @param {string|array} style стили в виде css строки или [ 'class', ['color: red', 'padding: 0'], ... ]
|
|
166
|
+
* @param {string|this} id уникальный id стиля. При передаче this будет именем класса
|
|
167
|
+
* @param {boolean} ext внешний стиль - может быть удалён по id
|
|
168
|
+
*/
|
|
169
|
+
static make(tag, data = {}, style = null, id = null, ext = false) {
|
|
170
|
+
Sheet.addStyle(style, id, ext);
|
|
171
|
+
return Component.make(tag, data);
|
|
172
|
+
}
|
|
161
173
|
}
|
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));
|