@techexp/webitem 0.7.2 → 0.8.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/README.md +3 -0
- package/dist/webitem-esm.js +9 -1
- package/dist/webitem-script-min.js +5 -5
- package/dist/webitem-script.js +9 -1
- package/package.json +1 -1
- package/src/test/webitem.test.js +21 -0
- package/src/webitem.js +13 -1
package/README.md
CHANGED
|
@@ -120,6 +120,8 @@ functions supported by this library as follows:
|
|
|
120
120
|
defined in the `eventHandlerList` during element definition are available to all
|
|
121
121
|
instances of the web item. The event handler added using `wi.addEventListener()`
|
|
122
122
|
are available only to the particular instance of the web item in the DOM.
|
|
123
|
+
6. `wi.addCss(css)`: Add CSS text to this web element. The CSS will be added as
|
|
124
|
+
a `CSSStyleSheet` object
|
|
123
125
|
|
|
124
126
|
#### Note About Using Common CSS Files
|
|
125
127
|
CSS applied to a web component (_through shadow DOM_) is scoped to the component, it does not interact
|
|
@@ -362,6 +364,7 @@ In the above example, we change the `color` property in the click listener, whic
|
|
|
362
364
|
callback on the property.
|
|
363
365
|
|
|
364
366
|
## Change Log
|
|
367
|
+
* 2025-04-09: Add `addCss(css)` function.
|
|
365
368
|
* 2021-03-29:
|
|
366
369
|
1. Move all custom properties and function to be inside a single object `wi`. This can
|
|
367
370
|
break code using version <= 0.3.6
|
package/dist/webitem-esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.8.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
@@ -34,6 +34,7 @@ function defineElement({
|
|
|
34
34
|
};
|
|
35
35
|
this.wi.addAction = (name, action) => addAction(root, root.wi.actions, name, action);
|
|
36
36
|
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, { sel, eventName, listener });
|
|
37
|
+
this.wi.addCss = (css2) => addCss(root, css2);
|
|
37
38
|
}
|
|
38
39
|
};
|
|
39
40
|
customElements.define(nameWithDash, el);
|
|
@@ -123,6 +124,13 @@ function displayStyle(display) {
|
|
|
123
124
|
</style>
|
|
124
125
|
`;
|
|
125
126
|
}
|
|
127
|
+
function addCss(root, css) {
|
|
128
|
+
css = Stringer.trim(css);
|
|
129
|
+
if (css.length === 0) return;
|
|
130
|
+
const sheet = new CSSStyleSheet();
|
|
131
|
+
sheet.replaceSync(css);
|
|
132
|
+
root.shadowRoot.adoptedStyleSheets.push(sheet);
|
|
133
|
+
}
|
|
126
134
|
export {
|
|
127
135
|
defineElement
|
|
128
136
|
};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.8.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var webitem=(()=>{var
|
|
7
|
+
var webitem=(()=>{var v=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ue=Object.prototype.hasOwnProperty;var oe=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},fe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ie(t))!ue.call(e,i)&&i!==n&&v(e,i,{get:()=>t[i],enumerable:!(r=re(t,i))||r.enumerable});return e};var se=e=>fe(v({},"__esModule",{value:!0}),e);var lt={};oe(lt,{defineElement:()=>Ze});var ae=Object.defineProperty,p=(e,t)=>{for(var n in t)ae(e,n,{get:t[n],enumerable:!0})},d={};p(d,{add:()=>xe,all:()=>M,classPresentIf:()=>Re,createElement:()=>Le,createElements:()=>_,first:()=>be,getAttributes:()=>Ae,id:()=>Se,removeElements:()=>$e,setContent:()=>Te,tag:()=>W});var m={};p(m,{equals:()=>F,forEachEntry:()=>C,has:()=>de,isDate:()=>A,isFunction:()=>P,isInteger:()=>le,isNil:()=>ce,isNumber:()=>j,isRegExp:()=>q,isString:()=>y});function ce(e){return e==null}function y(e){return h(e,"String")}function P(e){return h(e,"Function")}function A(e){return h(e,"Date")}function j(e){return h(e,"Number")?Number.isNaN(e)?!1:Number.isFinite(e):!y(e)||(e=e.trim(),e==="")?!1:!isNaN(e)}function le(e){return j(e)?Number.isInteger(Number.parseFloat(e)):!1}function q(e){return h(e,"RegExp")}function h(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function C(e,t){if(!(!e||!t)){if(Array.isArray(e)){e.forEach((n,r)=>{t(r,n)});return}Object.entries(e).forEach(n=>t(n[0],n[1]))}}function de(e,t){return!e||!t?!1:Object.prototype.hasOwnProperty.call(e,t)}function F(e,t){return e===t?!0:e===void 0||t===void 0?!1:me(e,t)}function me(e,t){return T(e)||T(t)?e===t:ge(e,t)}var he=new Set(["boolean","number","bigint","string","symbol"]);function T(e){return he.has(typeof e)}function ge(e,t){return pe(e,t)?ye(e,t)?!0:Ee(e,t):!1}function pe(e,t){return $(e)===$(t)}function $(e){return Object.prototype.toString.call(e)}function ye(e,t){return A(e)&&A(t)?e.getTime()===t.getTime():!1}function Ee(e,t){let n=Object.keys(e);return n.length!==Object.keys(t).length?!1:n.every(r=>F(e[r],t[r]))}function Se(e,t=document){return O(t)&&(t=t.shadowRoot),t.getElementById(e)}function M(e,t=document){return O(t)&&(t=t.shadowRoot),Array.from(t.querySelectorAll(e))}function be(e,t=document){return O(t)&&(t=t.shadowRoot),e.includes("/")?we(e,t):t.querySelector(e)}function we(e,t){let n=e.split("/").map(r=>r.trim()).filter(r=>r.length>0);for(let r of n)if(t=ve(r,t),t===null)break;return t}function ve(e,t){return e==="shadowRoot"||e==="shadow-root"?t.shadowRoot:t.querySelector(e)}function O(e){return e&&e.shadowRoot&&e.tagName.includes("-")}function Ae(e){let t={},n=e.attributes;if(!n||n.length===0)return t;for(let r=0;r<n.length;r++){let i=n[r];t[i.name]=i.value}return t}function _(e=""){if(e=e.trim(),!e)return[];let t=document.createElement("template");return t.innerHTML=e,Array.from(t.content.childNodes)}function Le(e,t={},n=""){let r=W(e,t,n),i=_(r);return i.length===0?null:i[0]}function W(e,t={},n=""){if(!e)return"";let r=Ce(t);return`<${e}${r}>${n}</${e}>`}function Ce(e){let t=[];return C(e,(r,i)=>{t.push(`${r}="${i}"`)}),(t.length>0?" ":"")+t.join(" ")}var Oe=new Set(["beforebegin","afterbegin","beforeend","afterend"]);function xe(e,t,n="beforeend"){return n=n.toLowerCase(),Oe.has(n)?(y(t)?e.insertAdjacentHTML(n,t):Ne(e,t,n),!0):!1}function Ne(e,t,n){Array.isArray(t)?t.forEach(r=>e.insertAdjacentElement(n,r)):e.insertAdjacentElement(n,t)}function Te(e,...t){e.innerHTML="",e.append(...t)}function $e(e,t=document){M(e,t).forEach(r=>{r.parentNode.removeChild(r)})}function Re(e,t,n){if(!e)return;let r=n?"add":"remove";e.classList[r](t)}var c={};p(c,{endsWith:()=>H,indexOf:()=>x,indexOfFirstMatch:()=>Pe,indexOfLastMatch:()=>je,isEmpty:()=>E,removePrefix:()=>I,removeSuffix:()=>V,removeSurrounding:()=>qe,replaceAll:()=>k,replaceTemplate:()=>_e,startsWith:()=>D,strip:()=>He,stripEnd:()=>De,stripStart:()=>We,substringAfter:()=>Fe,substringBefore:()=>Me,trim:()=>L});function x(e,t,n=0,r=!1){return e?r?e.toLowerCase().indexOf(t.toLowerCase(),n):e.indexOf(t,n):-1}function Pe(e,t){return!t||!e?-1:e.split("").findIndex(t)}function je(e,t){if(!t||!e)return-1;let n=e.split("");for(let r=n.length;r>=0;--r)if(t(n[r],r))return r;return-1}function D(e="",t=void 0,n=!1){if(n){let r=e.substring(0,t.length).toLowerCase();return t.toLowerCase()===r}return e.startsWith(t)}function H(e,t,n=!1){return n?e.toLowerCase().endsWith(t.toLowerCase()):e.endsWith(t)}function I(e,t,n=!1){return D(e,t,n)&&(e=e.substring(t.length)),e}function V(e,t,n=!1){return H(e,t,n)&&(e=e.substring(0,e.length-t.length)),e}function qe(e,t,n,r=!1){return V(I(e,t,r),n,r)}function Fe(e,t,n=!1){if(!t)return e;let r=x(e,t,0,n);return r<0?"":e.substring(r+t.length)}function Me(e,t,n=!1){if(!t)return"";let r=x(e,t,0,n);return r<0?e:e.substring(0,r)}function L(e){return E(e)?"":(y(e)||(e=String(e)),e.trim(e))}function E(e){return e==null||e===""}function k(e,t,n){if(P(String.prototype.replaceAll))return e.replaceAll(t,n);if(q(t))return e.replace(t,n);let r=new RegExp(t,"g");return e.replace(r,n)}function _e(e="",t={},n="${",r="}"){return C(t,(i,u)=>{u!==void 0&&(i=n+i+r,e=k(e,i,u))}),e}function We(e,t=""){return E(e)?"":t?B(e,new Set(Array.from(t))):e}function B(e,t){for(let n=0;n<e.length;n++)if(!t.has(e.charAt(n)))return e.substring(n);return""}function De(e,t=""){return E(e)?"":t?z(e,new Set(Array.from(t))):e}function z(e,t){for(let n=e.length-1;n>=0;n--)if(!t.has(e.charAt(n)))return e.substring(0,n+1);return""}function He(e,t=""){if(e===void 0||e==="")return"";if(!t)return e;let n=new Set(Array.from(t));return e=B(e,n),e?z(e,n):""}var Ie={};p(Ie,{compareLines:()=>Ve});function Ve(e,t,{trim:n=!0,skipEmpty:r=!0,caseSensitive:i=!0}={trim:!0,skipEmpty:!0,caseSensitive:!0}){return e=R(e,{trim:n,skipEmpty:r}),t=R(t,{trim:n,skipEmpty:r}),e.length!==t.length?`t1 has ${e.length} lines(s) while t2 has ${t.length} line(s).`:ke(e,t,i)}function ke(e,t,n){for(let r=0;r<e.length;r++){let i=Be(e[r],t[r],r,n);if(i.length>0)return i}return""}function Be(e,t,n,r){let i=r?e:e.toLowerCase(),u=r?t:t.toLowerCase();return i!==u?`Line #${n+1} mismatch.
|
|
8
8
|
${e}
|
|
9
|
-
${t}`:""}function
|
|
10
|
-
`),t&&(e=e.map(r=>L(r))),n&&(e=e.filter(r=>!!r)),e}function N({obj:e={},prop:t,sel:n,attr:r,root:i=document,getter:u,setter:o,onChange:f}){Ye(t),Ge(e,t);let g={};return u||(u=()=>Je({prop:t,sel:n,attr:r,root:i,objNotBound:g})),o||(o=s=>Ke({prop:t,value:s,root:i,sel:n,attr:r,objNotBound:g})),ze({obj:e,prop:t,getter:u,setter:o,onChange:f})}function ze({obj:e,prop:t,getter:n,setter:r,onChange:i}){return Object.defineProperty(e,t,{get:()=>n(),set:o=>{if(i){let f=n(t);f!==o&&i(f,o)}r(o)},configurable:!0,enumerable:!0}),e}var
|
|
9
|
+
${t}`:""}function R(e,{trim:t,skipEmpty:n}){return t&&(e=L(e)),e=e.split(`
|
|
10
|
+
`),t&&(e=e.map(r=>L(r))),n&&(e=e.filter(r=>!!r)),e}function N({obj:e={},prop:t,sel:n,attr:r,root:i=document,getter:u,setter:o,onChange:f}){Ye(t),Ge(e,t);let g={};return u||(u=()=>Je({prop:t,sel:n,attr:r,root:i,objNotBound:g})),o||(o=s=>Ke({prop:t,value:s,root:i,sel:n,attr:r,objNotBound:g})),ze({obj:e,prop:t,getter:u,setter:o,onChange:f})}function ze({obj:e,prop:t,getter:n,setter:r,onChange:i}){return Object.defineProperty(e,t,{get:()=>n(),set:o=>{if(i){let f=n(t);f!==o&&i(f,o)}r(o)},configurable:!0,enumerable:!0}),e}var S=e=>e.type==="checkbox",b=e=>e.type==="radio",J=e=>e.nodeName.toLowerCase()==="select",K=e=>e.nodeName.toLowerCase()==="input-field",Q=e=>"value"in e,G=e=>new Set(Array.isArray(e)?e:[e]);function Ge(e,t){let n=e[t];return n!==void 0&&(console.info(`Property '${t}' already exists in object. Will override previous definition but retain old value of ${n}.`),e[t]=n),n}function Je({prop:e,root:t,sel:n,attr:r,objNotBound:i}){return n?Qe(t,n,r):i[e]}function Ke({prop:e,value:t,root:n,sel:r,attr:i,objNotBound:u}){if(r){Ue(n,r,t,i);return}u[e]=t}function Qe(e,t,n){let r=U(e,t);if(r.length===0)return null;let i=r[0];if(n)return i.getAttribute(n);if(!Q(i))return i.innerHTML;if(S(i))return r.filter(u=>S(u)&&u.checked).map(u=>u.value==="on"?u.name:u.value);if(J(i))return[...i.querySelectorAll("option")].filter(o=>o.selected).map(o=>o.value);if(!(b(i)&&(i=r.filter(b).find(u=>u.checked),!i)))return K(i)?i.getAttribute("value"):i.value}function Ue(e,t,n,r){let i=U(e,t);if(i.length===0)return;let u=i[0];if(S(u)){let o=G(n);i.filter(S).forEach(f=>f.checked=o.has(f.value)||o.has(f.name));return}if(J(u)){let o=G(n);u.querySelectorAll("option").forEach(f=>f.selected=o.has(f.value));return}if(b(u)){i.filter(b).forEach(o=>o.checked=o.value===n);return}i.forEach(o=>Xe(o,n,r))}function Xe(e,t,n){n?e.setAttribute(n,t):Q(e)?e.value=t:K(e)?e.setAttribute("value",t):e.innerHTML=t}function U(e,t){let n=e.querySelectorAll(t);return n.length===0&&console.warn(`No elements found matching selector ${t}`),[...n]}function Ye(e){if(typeof e!="string"||e.length===0)throw"'prop' argument must be a String defining the name a property."}function Ze({nameWithDash:e,html:t,css:n,styleSheets:r,display:i,propertyList:u,actionList:o,eventHandlerList:f}){if(customElements.get(e))return!1;let g=class extends HTMLElement{constructor(){super();let s=this;ut(this,t,n,r,i),this.wi={},this.wi.properties=et(this,u),this.wi.actions=rt(this,o),it(this,f),this.wi.addProperty=function(a,l,w,ee,te){let ne={name:a,value:l,sel:w,attr:ee,onChange:te};X(s.wi.properties,ne,s)},this.wi.addAction=(a,l)=>Y(s,s.wi.actions,a,l),this.wi.addEventListener=(a,l,w)=>Z(s,{sel:a,eventName:l,listener:w}),this.wi.addCss=a=>ct(s,a)}};return customElements.define(e,g),!0}function et(e,t){let n={};return nt(t)&&t.forEach(r=>X(n,r,e)),n}function X(e,t,n){let r=tt(t,n);N({obj:e,prop:t.name,sel:t.sel,attr:t.attr,root:n.shadowRoot,onChange:r}),t.value!==void 0&&(e[t.name]=t.value)}function tt(e,t){if(e.onChange)return(n,r)=>e.onChange(t,n,r)}function nt(e){if(!e)return!1;if(!Array.isArray(e))throw"propertyList must be an array of {name, value, [sel], [attr]} objects";return!0}function rt(e,t){let n={};return t&&t.forEach(r=>{Y(e,n,r.name,r.action)}),n}function Y(e,t,n,r){!m.isString(n)||!m.isFunction(r)||(t[n]=r.bind(e))}function it(e,t){if(t){if(!Array.isArray(t))throw"eventHandlerList must be an array of {sel, eventName, listener} objects";t.forEach(n=>Z(e,n))}}function Z(e,{sel:t,eventName:n,listener:r}){d.all(t,e.shadowRoot).forEach(u=>{u.addEventListener(n,o=>{r(o,e)})})}function ut(e,t,n,r,i){t=ot(e,t);let u=e.attachShadow({mode:"open"}),o=d.createElements(ft(n,i)+t);u.append(...o),Array.isArray(r)&&r.length>0&&u.adoptedStyleSheets.push(...r)}function ot(e,t){return m.isFunction(t)?t(e):t}function ft(e,t){return at(t)+st(e)}function st(e){return e=c.trim(e),e.length===0?"":(c.startsWith(e,"<style>",!1)||(e=d.tag("style",{},e)),e)}function at(e){return e=c.trim(e),e.length===0?"":`
|
|
11
11
|
<style>
|
|
12
12
|
:host { display: ${e};}
|
|
13
13
|
:host([hidden]) {display: none;}
|
|
14
14
|
</style>
|
|
15
|
-
`}return se(
|
|
15
|
+
`}function ct(e,t){if(t=c.trim(t),t.length===0)return;let n=new CSSStyleSheet;n.replaceSync(t),e.shadowRoot.adoptedStyleSheets.push(n)}return se(lt);})();
|
package/dist/webitem-script.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.8.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
@@ -597,6 +597,7 @@ ${t2}`;
|
|
|
597
597
|
};
|
|
598
598
|
this.wi.addAction = (name, action) => addAction(root, root.wi.actions, name, action);
|
|
599
599
|
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, { sel, eventName, listener });
|
|
600
|
+
this.wi.addCss = (css2) => addCss(root, css2);
|
|
600
601
|
}
|
|
601
602
|
};
|
|
602
603
|
customElements.define(nameWithDash, el);
|
|
@@ -686,5 +687,12 @@ ${t2}`;
|
|
|
686
687
|
</style>
|
|
687
688
|
`;
|
|
688
689
|
}
|
|
690
|
+
function addCss(root, css) {
|
|
691
|
+
css = Stringer_exports.trim(css);
|
|
692
|
+
if (css.length === 0) return;
|
|
693
|
+
const sheet = new CSSStyleSheet();
|
|
694
|
+
sheet.replaceSync(css);
|
|
695
|
+
root.shadowRoot.adoptedStyleSheets.push(sheet);
|
|
696
|
+
}
|
|
689
697
|
return __toCommonJS(webitem_exports);
|
|
690
698
|
})();
|
package/package.json
CHANGED
package/src/test/webitem.test.js
CHANGED
|
@@ -260,6 +260,27 @@ describe('webitem.defineElement()', () => {
|
|
|
260
260
|
})
|
|
261
261
|
})
|
|
262
262
|
|
|
263
|
+
describe('addCss', ()=> {
|
|
264
|
+
it('adds CSS to the element', ()=> {
|
|
265
|
+
const nameWithDash = 'wi-t16'
|
|
266
|
+
const html = `<h3>${nameWithDash} - addCss</h3>`
|
|
267
|
+
|
|
268
|
+
webitem.defineElement({nameWithDash, html})
|
|
269
|
+
const el = createAndAddElement(nameWithDash)
|
|
270
|
+
|
|
271
|
+
const h3 = Domer.first('h3', el.shadowRoot)
|
|
272
|
+
const initialColor = window.getComputedStyle(h3).color
|
|
273
|
+
|
|
274
|
+
el.wi.addCss(`h3 {color: red !important}`)
|
|
275
|
+
|
|
276
|
+
const newColor = window.getComputedStyle(h3).color
|
|
277
|
+
expect(newColor).to.not.equal(initialColor)
|
|
278
|
+
expect(newColor).to.equal('rgb(255, 0, 0)')
|
|
279
|
+
})
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
})
|
|
283
|
+
|
|
263
284
|
}) // webitem.defineElement()
|
|
264
285
|
|
|
265
286
|
function findElementByName(name) {
|
package/src/webitem.js
CHANGED
|
@@ -30,6 +30,7 @@ import bind from '@techexp/data-bind'
|
|
|
30
30
|
* on the instance of the web element
|
|
31
31
|
* * `addEventListener(sel, eventName, listener)`: a function with the given arguments to
|
|
32
32
|
* add new event listeners on the instance of the web element
|
|
33
|
+
* * `addCss(css)`: a function that will add live css to the current web element
|
|
33
34
|
*/
|
|
34
35
|
export function defineElement({nameWithDash, html, css, styleSheets, display,
|
|
35
36
|
propertyList, actionList, eventHandlerList}) {
|
|
@@ -52,7 +53,7 @@ export function defineElement({nameWithDash, html, css, styleSheets, display,
|
|
|
52
53
|
}
|
|
53
54
|
this.wi.addAction = (name, action) => addAction(root, root.wi.actions, name, action)
|
|
54
55
|
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, {sel, eventName, listener})
|
|
55
|
-
|
|
56
|
+
this.wi.addCss = css => addCss(root, css)
|
|
56
57
|
}
|
|
57
58
|
}
|
|
58
59
|
customElements.define(nameWithDash, el)
|
|
@@ -160,3 +161,14 @@ function displayStyle(display) {
|
|
|
160
161
|
`
|
|
161
162
|
}
|
|
162
163
|
|
|
164
|
+
function addCss(root, css) {
|
|
165
|
+
css = Stringer.trim(css)
|
|
166
|
+
if (css.length === 0) return
|
|
167
|
+
// TODO prevent adding the same CSS if it is already there
|
|
168
|
+
|
|
169
|
+
const sheet = new CSSStyleSheet()
|
|
170
|
+
sheet.replaceSync(css)
|
|
171
|
+
root.shadowRoot.adoptedStyleSheets.push(sheet)
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
|