@alexgyver/component 1.3.10 → 1.4.0
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 +28 -16
- package/Component.min.js +1 -1
- package/package.json +2 -2
package/Component.js
CHANGED
|
@@ -3,7 +3,7 @@ export class EL {
|
|
|
3
3
|
static context;
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* Создать
|
|
6
|
+
* Создать элемент и поместить его в переменную $root
|
|
7
7
|
* @param {string} tag html tag элемента
|
|
8
8
|
* @param {object} data параметры
|
|
9
9
|
* @param {Boolean} svg SVG
|
|
@@ -14,27 +14,28 @@ export class EL {
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
|
-
* Создать
|
|
17
|
+
* Создать элемент
|
|
18
18
|
* @param {string} tag html tag элемента
|
|
19
19
|
* @param {object} data параметры
|
|
20
20
|
* @param {Boolean} svg SVG
|
|
21
21
|
* @returns {Node}
|
|
22
22
|
* @params
|
|
23
23
|
* tag {string} - тег html элемента. Если 'svg' - включится режим SVG на детей
|
|
24
|
-
* context {object} -
|
|
25
|
-
* parent - {Element}
|
|
24
|
+
* context {object} - объект для параметра '$', прокидывается в детей
|
|
25
|
+
* parent - {Element} добавить созданный элемент к указанному элементу
|
|
26
26
|
* text {string} - добавить в textContent
|
|
27
27
|
* html {string} - добавить в innerHTML
|
|
28
28
|
* class {string | Array} - добавить в className
|
|
29
|
-
* style {string | object} - объект в виде { padding: '0px', ... } или строка css
|
|
29
|
+
* style/style_r {string | object} - объект в виде { padding: '0px', ... } или строка css стилей. _r - заменить имеющиеся
|
|
30
30
|
* push {array} - добавить к указанному массиву
|
|
31
|
-
*
|
|
32
|
-
* events {object} -
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
31
|
+
* $ {string} - создать переменную $имя в указанном объекте
|
|
32
|
+
* events {object} - добавить addEventListener'ы {event: e => {}}
|
|
33
|
+
* click, change, input, mousewheel - добавление события без events
|
|
34
|
+
* children/children_r - дети, массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
|
|
35
|
+
* child/child_r - ребенок {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
|
|
36
|
+
* attrs {object} - добавить аттрибуты (как setAttribute())
|
|
36
37
|
* props {object} - добавить свойства (как el[prop])
|
|
37
|
-
* also {function} - вызвать с текущим
|
|
38
|
+
* also {function} - вызвать с текущим элементом: also(el) { console.log(el); }
|
|
38
39
|
* всё остальное будет добавлено как property
|
|
39
40
|
*/
|
|
40
41
|
static make(tag, data = {}, svg = false) {
|
|
@@ -43,6 +44,10 @@ export class EL {
|
|
|
43
44
|
if (tag == 'svg') svg = true;
|
|
44
45
|
return EL.config(svg ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, svg);
|
|
45
46
|
}
|
|
47
|
+
static makeIn(ctx, tag, data = {}, svg = false) {
|
|
48
|
+
data.context = ctx;
|
|
49
|
+
return EL.make(tag, data, svg);
|
|
50
|
+
}
|
|
46
51
|
|
|
47
52
|
/**
|
|
48
53
|
* Настроить элемент
|
|
@@ -84,11 +89,13 @@ export class EL {
|
|
|
84
89
|
continue;
|
|
85
90
|
}
|
|
86
91
|
if (!val) continue;
|
|
92
|
+
|
|
87
93
|
switch (key) {
|
|
88
94
|
case 'class': (Array.isArray(val) ? val : val.split(' ')).map(c => c && el.classList.add(c)); break;
|
|
89
95
|
case 'push': val.push(el); break;
|
|
90
96
|
case '$': case 'var': if (ctx) ctx['$' + val] = el; break;
|
|
91
|
-
case 'events': for (let ev in val) el.addEventListener(ev, val[ev].bind(ctx)); break;
|
|
97
|
+
case 'events': for (let ev in val) el.addEventListener(ev, ctx ? val[ev].bind(ctx) : val[ev]); break;
|
|
98
|
+
case 'click': case 'change': case 'input': case 'mousewheel': el.addEventListener(key, ctx ? val.bind(ctx) : val); break;
|
|
92
99
|
case 'parent': val.appendChild(el); break;
|
|
93
100
|
case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
|
|
94
101
|
case 'props': for (let prop in val) el[prop] = val[prop]; break;
|
|
@@ -96,6 +103,7 @@ export class EL {
|
|
|
96
103
|
case 'child': addChild(val); break;
|
|
97
104
|
case 'children_r': EL.clear(el); // fall
|
|
98
105
|
case 'children': for (let obj of val) addChild(obj); break;
|
|
106
|
+
case 'style_r': el.style.cssText = ''; // fall
|
|
99
107
|
case 'style':
|
|
100
108
|
if (typeof val === 'string') el.style.cssText += val + ';';
|
|
101
109
|
else for (let st in val) if (val[st]) el.style[st] = val[st];
|
|
@@ -106,6 +114,10 @@ export class EL {
|
|
|
106
114
|
if (data.also && ctx) data.also.call(ctx, el);
|
|
107
115
|
return el;
|
|
108
116
|
}
|
|
117
|
+
static configIn(ctx, el, data, svg = false) {
|
|
118
|
+
data.context = ctx;
|
|
119
|
+
return EL.config(el, data, svg);
|
|
120
|
+
}
|
|
109
121
|
|
|
110
122
|
/**
|
|
111
123
|
* Удалить все child ноды
|
|
@@ -116,7 +128,7 @@ export class EL {
|
|
|
116
128
|
}
|
|
117
129
|
|
|
118
130
|
/**
|
|
119
|
-
* Создать массив
|
|
131
|
+
* Создать массив элементов из массива объектов конфигурации
|
|
120
132
|
* @param {array} arr массив объектов конфигурации
|
|
121
133
|
* @param {Boolean} svg SVG
|
|
122
134
|
* @returns {array} of Elements
|
|
@@ -127,7 +139,7 @@ export class EL {
|
|
|
127
139
|
}
|
|
128
140
|
|
|
129
141
|
/**
|
|
130
|
-
* Создать теневой
|
|
142
|
+
* Создать теневой элемент от указанного tag, дети подключатся к нему в shadowRoot
|
|
131
143
|
* @param {string|Node} host html tag теневого элемента или Node
|
|
132
144
|
* @param {object} data параметры внешнего элемента
|
|
133
145
|
* @param {string} sheet css стили
|
|
@@ -224,7 +236,7 @@ export class Sheet {
|
|
|
224
236
|
//#region StyledComponent
|
|
225
237
|
export class StyledComponent extends EL {
|
|
226
238
|
/**
|
|
227
|
-
* Создать
|
|
239
|
+
* Создать элемент и поместить его в переменную $root
|
|
228
240
|
* @param {string} tag html tag элемента
|
|
229
241
|
* @param {object} data параметры
|
|
230
242
|
* @param {string|array} style стили в виде css строки
|
|
@@ -237,7 +249,7 @@ export class StyledComponent extends EL {
|
|
|
237
249
|
}
|
|
238
250
|
|
|
239
251
|
/**
|
|
240
|
-
* Создать
|
|
252
|
+
* Создать элемент
|
|
241
253
|
* @param {string} tag html tag элемента
|
|
242
254
|
* @param {object} data параметры
|
|
243
255
|
* @param {string|array} style стили в виде css строки
|
package/Component.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e={d:(t,a)=>{for(var c in a)e.o(a,c)&&!e.o(t,c)&&Object.defineProperty(t,c,{enumerable:!0,get:a[c]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{EL:()=>a,LV:()=>
|
|
1
|
+
var e={d:(t,a)=>{for(var c in a)e.o(a,c)&&!e.o(t,c)&&Object.defineProperty(t,c,{enumerable:!0,get:a[c]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{EL:()=>a,LV:()=>r,cj:()=>s,t4:()=>n,uA:()=>c});class a{static context;constructor(e,t={},c=!1){a.context=this,this.$root=a.make(e,t,c)}static make(e,t={},c=!1){return e&&"object"==typeof t?t instanceof Node?t:("svg"==e&&(c=!0),a.config(c?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e),t,c)):null}static makeIn(e,t,c={},n=!1){return c.context=e,a.make(t,c,n)}static config(e,t,c=!1){if(Array.isArray(e))return e.forEach(e=>a.config(e,t,c)),null;if(!(e instanceof Node)||"object"!=typeof t)return e;let n=t.context;a.context=null===n?null:n||a.context,n=a.context;let s=t=>{if(t)if(t instanceof Node)e.appendChild(t);else if(t instanceof a)e.appendChild(t.$root);else if("string"==typeof t)e.innerHTML+=t;else if("object"==typeof t){let n=a.make(t.tag??"div",t,c||"svg"==t.tag);n&&e.appendChild(n)}};for(const[c,r]of Object.entries(t)){switch(c){case"text":e.textContent=null==r?"":r+"";continue;case"html":e.innerHTML=null==r?"":r+"";continue;case"tag":case"context":case"get":case"also":continue}if(r)switch(c){case"class":(Array.isArray(r)?r:r.split(" ")).map(t=>t&&e.classList.add(t));break;case"push":r.push(e);break;case"$":case"var":n&&(n["$"+r]=e);break;case"events":for(let t in r)e.addEventListener(t,n?r[t].bind(n):r[t]);break;case"click":case"change":case"input":case"mousewheel":e.addEventListener(c,n?r.bind(n):r);break;case"parent":r.appendChild(e);break;case"attrs":for(let t in r)e.setAttribute(t,r[t]);break;case"props":for(let t in r)e[t]=r[t];break;case"child_r":a.clear(e);case"child":s(r);break;case"children_r":a.clear(e);case"children":for(let e of r)s(e);break;case"style_r":e.style.cssText="";case"style":if("string"==typeof r)e.style.cssText+=r+";";else for(let t in r)r[t]&&(e.style[t]=r[t]);break;default:e[c]=r}}return t.also&&n&&t.also.call(n,e),e}static configIn(e,t,c,n=!1){return c.context=e,a.config(t,c,n)}static clear(e){for(;e.firstChild;)e.removeChild(e.lastChild)}static makeArray(e,t=!1){return e&&Array.isArray(e)?e.map(e=>a.make(e.tag,e,t)):[]}static makeShadow(e,t={},c=null){if(!e||"object"!=typeof t)return null;let n=e instanceof Node?e:document.createElement(e);return n.attachShadow({mode:"open"}),a.config(n.shadowRoot,{context:t.context,children:[{tag:"style",textContent:c??""},t.child??{},...t.children??[]]}),delete t.children,delete t.child,a.config(n,t),n}}const c=a;class n{static make=(e,t)=>a.make(e,t,!0);static config=(e,t)=>a.config(e,t,!0);static makeArray=e=>a.makeArray(e,!0);static svg=(e={},t={})=>n._make("svg",e,t);static rect=(e,t,a,c,s,r,o={},i={})=>n._make("rect",{...o,x:e,y:t,width:a,height:c,rx:s,ry:r},i);static circle=(e,t,a,c={},s={})=>n._make("circle",{...c,cx:e,cy:t,r:a},s);static line=(e,t,a,c,s={},r={})=>n._make("line",{...s,x1:e,y1:t,x2:a,y2:c},r);static polyline=(e,t={},a={})=>n._make("polyline",{...t,points:e},a);static polygon=(e,t={},a={})=>n._make("polygon",{...t,points:e},a);static path=(e,t={},a={})=>n._make("path",{...t,d:e},a);static text=(e,t,a,c={},s={})=>n._make("text",{...c,x:t,y:a},{...s,text:e});static _make=(e,t={},a={})=>n.make(e,{attrs:{...t},...a})}class s{static addStyle(e,t,a=!1){if(e&&t&&("object"==typeof t&&(t=t.constructor.name),!s.#e.has(t)&&!s.#t.has(t)))if(a){let a=document.createElement("style");document.head.appendChild(a),a.textContent=e,s.#t.set(t,a)}else s.#a||(s.#a=document.head.appendChild(document.createElement("style"))),s.#a.textContent+=e+"\r\n",s.#e.add(t)}static removeStyle(e){"object"==typeof e&&(e=e.constructor.name),s.#t.has(e)&&(s.#t.get(e).remove(),s.#t.delete(e))}static#a=null;static#e=new Set;static#t=new Map}class r extends a{constructor(e,t={},a=null,c=null,n=!1){super(e,t),s.addStyle(a,c,n)}static make(e,t={},c=null,n=null,r=!1){return s.addStyle(c,n,r),a.make(e,t)}}const o=t.uA,i=t.EL,l=t.t4,d=t.cj,h=t.LV;export{o as Component,i as EL,l as SVG,d as Sheet,h as StyledComponent};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alexgyver/component",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "Simple HTML&SVG element builder",
|
|
5
5
|
"main": "./Component.js",
|
|
6
6
|
"module": "./Component.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"author": "AlexGyver <alex@alexgyver.ru>",
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"webpack": "^5.
|
|
18
|
+
"webpack": "^5.101.3",
|
|
19
19
|
"webpack-cli": "^6.0.1"
|
|
20
20
|
}
|
|
21
21
|
}
|