@alexgyver/component 1.3.9 → 1.4.0

package/Component.js

@@ -1,40 +1,41 @@
 //#region EL
 export class EL {
-    static ctx;
+    static context;
 
     /**
-     * Создать компонент и поместить его в переменную $root
+     * Создать элемент и поместить его в переменную $root
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      * @param {Boolean} svg SVG
      */
     constructor(tag, data = {}, svg = false) {
-        EL.ctx = this;
+        EL.context = this;
         this.$root = EL.make(tag, data, svg);
     }
 
     /**
-     * Создать компонент
+     * Создать элемент
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      * @param {Boolean} svg SVG
      * @returns {Node}
      * @params
      * tag {string} - тег html элемента. Если 'svg' - включится режим SVG на детей
-     * context {object} - контекст для параметра 'var' и вызовов, прокидывается в детей. Если указан явно как null - прерывает проброс
-     * parent - {Element} добавляет компонент к указанному элементу
+     * context {object} - объект для параметра '$', прокидывается в детей
+     * parent - {Element} добавить созданный элемент к указанному элементу
      * text {string} - добавить в textContent
      * html {string} - добавить в innerHTML
      * class {string | Array} - добавить в className
-     * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
+     * style/style_r {string | object} - объект в виде { padding: '0px', ... } или строка css стилей. _r - заменить имеющиеся
      * push {array} - добавить к указанному массиву
-     * var | $ {string} - создаёт переменную $имя в указанном контексте
-     * events {object} - добавляет addEventListener'ы {event: e => {}}
-     * children/children_r - массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
-     * child/child_r - {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
-     * attrs {object} - добавить аттрибуты (через setAttribute)
+     * $ {string} - создать переменную $имя в указанном объекте
+     * events {object} - добавить addEventListener'ы {event: e => {}}
+     * click, change, input, mousewheel - добавление события без events
+     * children/children_r - дети, массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
+     * child/child_r - ребенок {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
+     * attrs {object} - добавить аттрибуты (как setAttribute())
      * props {object} - добавить свойства (как el[prop])
-     * also {function} - вызвать с текущим компонентом: also(el) { console.log(el); }
+     * also {function} - вызвать с текущим элементом: also(el) { console.log(el); }
      * всё остальное будет добавлено как property
      */
     static make(tag, data = {}, svg = false) {
@@ -43,6 +44,10 @@ export class EL {
         if (tag == 'svg') svg = true;
         return EL.config(svg ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag), data, svg);
     }
+    static makeIn(ctx, tag, data = {}, svg = false) {
+        data.context = ctx;
+        return EL.make(tag, data, svg);
+    }
 
     /**
      * Настроить элемент
@@ -59,8 +64,8 @@ export class EL {
         if (!(el instanceof Node) || (typeof data !== 'object')) return el;
 
         let ctx = data.context;
-        EL.ctx = (ctx === null) ? null : (ctx ? ctx : EL.ctx);
-        ctx = EL.ctx;
+        EL.context = (ctx === null) ? null : (ctx ? ctx : EL.context);
+        ctx = EL.context;
 
         let addChild = (obj) => {
             if (!obj) return;
@@ -84,11 +89,13 @@ export class EL {
                     continue;
             }
             if (!val) continue;
+
             switch (key) {
                 case 'class': (Array.isArray(val) ? val : val.split(' ')).map(c => c && el.classList.add(c)); break;
                 case 'push': val.push(el); break;
                 case '$': case 'var': if (ctx) ctx['$' + val] = el; break;
-                case 'events': for (let ev in val) el.addEventListener(ev, val[ev].bind(ctx)); break;
+                case 'events': for (let ev in val) el.addEventListener(ev, ctx ? val[ev].bind(ctx) : val[ev]); break;
+                case 'click': case 'change': case 'input': case 'mousewheel': el.addEventListener(key, ctx ? val.bind(ctx) : val); break;
                 case 'parent': val.appendChild(el); break;
                 case 'attrs': for (let attr in val) el.setAttribute(attr, val[attr]); break;
                 case 'props': for (let prop in val) el[prop] = val[prop]; break;
@@ -96,6 +103,7 @@ export class EL {
                 case 'child': addChild(val); break;
                 case 'children_r': EL.clear(el); // fall
                 case 'children': for (let obj of val) addChild(obj); break;
+                case 'style_r': el.style.cssText = ''; // fall
                 case 'style':
                     if (typeof val === 'string') el.style.cssText += val + ';';
                     else for (let st in val) if (val[st]) el.style[st] = val[st];
@@ -106,6 +114,10 @@ export class EL {
         if (data.also && ctx) data.also.call(ctx, el);
         return el;
     }
+    static configIn(ctx, el, data, svg = false) {
+        data.context = ctx;
+        return EL.config(el, data, svg);
+    }
 
     /**
      * Удалить все child ноды
@@ -116,7 +128,7 @@ export class EL {
     }
 
     /**
-     * Создать массив компонентов из массива объектов конфигурации
+     * Создать массив элементов из массива объектов конфигурации
      * @param {array} arr массив объектов конфигурации
      * @param {Boolean} svg SVG
      * @returns {array} of Elements
@@ -127,7 +139,7 @@ export class EL {
     }
 
     /**
-     * Создать теневой компонент от указанного tag, дети подключатся к нему в shadowRoot
+     * Создать теневой элемент от указанного tag, дети подключатся к нему в shadowRoot
      * @param {string|Node} host html tag теневого элемента или Node
      * @param {object} data параметры внешнего элемента
      * @param {string} sheet css стили
@@ -224,7 +236,7 @@ export class Sheet {
 //#region StyledComponent
 export class StyledComponent extends EL {
     /**
-     * Создать компонент и поместить его в переменную $root
+     * Создать элемент и поместить его в переменную $root
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      * @param {string|array} style стили в виде css строки
@@ -237,7 +249,7 @@ export class StyledComponent extends EL {
     }
 
     /**
-     * Создать компонент
+     * Создать элемент
      * @param {string} tag html tag элемента
      * @param {object} data параметры
      * @param {string|array} style стили в виде css строки

package/Component.min.js

@@ -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:()=>r,cj:()=>s,t4:()=>n,uA:()=>c});class a{static ctx;constructor(e,t={},c=!1){a.ctx=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 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.ctx=null===n?null:n||a.ctx,n=a.ctx;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"var":n&&(n["$"+r]=e);break;case"events":for(let t in r)e.addEventListener(t,r[t].bind(n));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":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 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,l={},o={})=>n._make("rect",{...l,x:e,y:t,width:a,height:c,rx:s,ry:r},o);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 l=t.uA,o=t.EL,i=t.t4,d=t.cj,h=t.LV;export{l as Component,o as EL,i as SVG,d as Sheet,h as StyledComponent};
+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/README.md

@@ -26,7 +26,7 @@ EL(tag, data = {}, svg = false);
  * class {string | Array} - добавить в className
  * style {string | object} - объект в виде { padding: '0px', ... } или строка css стилей
  * push {array} - добавить к указанному массиву
- * var {string} - создаёт переменную $имя в указанном контексте
+ * var | $ {string} - создаёт переменную $имя в указанном контексте
  * events {object} - добавляет addEventListener'ы {event: e => {}}
  * children/children_r - массив {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
  * child/child_r - {DOM, EL, object, html string}. _r - заменить имеющиеся. Без тега tag будет div
@@ -143,14 +143,14 @@ EL.make('div', {
 });
 ```
 
-Гораздо интереснее использовать в классе и передавать контекст. Параметр `var` создаст переменную с элементом с указанным именем + префикс `$`:
+Гораздо интереснее использовать в классе и передавать контекст. Параметр `$` создаст переменную с элементом с указанным именем + префикс `$`:
 
 ```js
 class Button {
     constructor(text) {
         EL.make('button', {
             context: this,
-            var: 'button',
+            $: 'button',
             text: text,
             class: 'btn',
             events: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgyver/component",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "description": "Simple HTML&SVG element builder",
   "main": "./Component.js",
   "module": "./Component.js",
@@ -15,7 +15,7 @@
   "author": "AlexGyver <alex@alexgyver.ru>",
   "license": "MIT",
   "devDependencies": {
-    "webpack": "^5.98.0",
+    "webpack": "^5.101.3",
     "webpack-cli": "^6.0.1"
   }
 }