@aejkatappaja/phantom-ui 0.5.0 → 0.5.2
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/custom-elements.json +4 -4
- package/dist/phantom-ui.cdn.js +9 -7
- package/dist/phantom-ui.js +12 -10
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"type": {
|
|
29
29
|
"text": "string"
|
|
30
30
|
},
|
|
31
|
-
"default": "\"rgba(
|
|
31
|
+
"default": "\"rgba(128, 128, 128, 0.3)\"",
|
|
32
32
|
"description": "Color of the animated shimmer gradient wave",
|
|
33
33
|
"attribute": "shimmer-color"
|
|
34
34
|
},
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"type": {
|
|
39
39
|
"text": "string"
|
|
40
40
|
},
|
|
41
|
-
"default": "\"rgba(
|
|
41
|
+
"default": "\"rgba(128, 128, 128, 0.2)\"",
|
|
42
42
|
"description": "Background color of each shimmer block",
|
|
43
43
|
"attribute": "background-color"
|
|
44
44
|
},
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
"type": {
|
|
248
248
|
"text": "string"
|
|
249
249
|
},
|
|
250
|
-
"default": "\"rgba(
|
|
250
|
+
"default": "\"rgba(128, 128, 128, 0.3)\"",
|
|
251
251
|
"description": "Color of the animated shimmer gradient wave",
|
|
252
252
|
"fieldName": "shimmerColor"
|
|
253
253
|
},
|
|
@@ -256,7 +256,7 @@
|
|
|
256
256
|
"type": {
|
|
257
257
|
"text": "string"
|
|
258
258
|
},
|
|
259
|
-
"default": "\"rgba(
|
|
259
|
+
"default": "\"rgba(128, 128, 128, 0.2)\"",
|
|
260
260
|
"description": "Background color of each shimmer block",
|
|
261
261
|
"fieldName": "backgroundColor"
|
|
262
262
|
},
|
package/dist/phantom-ui.cdn.js
CHANGED
|
@@ -5,13 +5,12 @@
|
|
|
5
5
|
display: block;
|
|
6
6
|
position: relative;
|
|
7
7
|
overflow: hidden;
|
|
8
|
-
--shimmer-color: rgba(
|
|
8
|
+
--shimmer-color: rgba(128, 128, 128, 0.3);
|
|
9
9
|
--shimmer-duration: 1.5s;
|
|
10
|
-
--shimmer-bg: rgba(
|
|
10
|
+
--shimmer-bg: rgba(128, 128, 128, 0.2);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
:host([loading]) ::slotted(*) {
|
|
14
|
-
color: transparent !important;
|
|
15
14
|
-webkit-text-fill-color: transparent !important;
|
|
16
15
|
pointer-events: none;
|
|
17
16
|
user-select: none;
|
|
@@ -20,7 +19,9 @@
|
|
|
20
19
|
:host([loading]) ::slotted(img),
|
|
21
20
|
:host([loading]) ::slotted(svg),
|
|
22
21
|
:host([loading]) ::slotted(video),
|
|
23
|
-
:host([loading]) ::slotted(canvas)
|
|
22
|
+
:host([loading]) ::slotted(canvas),
|
|
23
|
+
:host([loading]) ::slotted(button),
|
|
24
|
+
:host([loading]) ::slotted([role="button"]) {
|
|
24
25
|
opacity: 0 !important;
|
|
25
26
|
}
|
|
26
27
|
|
|
@@ -111,7 +112,6 @@
|
|
|
111
112
|
}
|
|
112
113
|
`;var Ot="phantom-ui-loading-styles";function Zt(){if(document.getElementById(Ot))return;let r=document.createElement("style");r.id=Ot,r.textContent=`
|
|
113
114
|
phantom-ui[loading] * {
|
|
114
|
-
color: transparent !important;
|
|
115
115
|
-webkit-text-fill-color: transparent !important;
|
|
116
116
|
pointer-events: none;
|
|
117
117
|
user-select: none;
|
|
@@ -119,10 +119,12 @@
|
|
|
119
119
|
phantom-ui[loading] img,
|
|
120
120
|
phantom-ui[loading] svg,
|
|
121
121
|
phantom-ui[loading] video,
|
|
122
|
-
phantom-ui[loading] canvas
|
|
122
|
+
phantom-ui[loading] canvas,
|
|
123
|
+
phantom-ui[loading] button,
|
|
124
|
+
phantom-ui[loading] [role="button"] {
|
|
123
125
|
opacity: 0 !important;
|
|
124
126
|
}
|
|
125
|
-
`,document.head.appendChild(r)}var p=class extends b{constructor(){super(...arguments);this.loading=!1;this.shimmerColor="rgba(
|
|
127
|
+
`,document.head.appendChild(r)}var p=class extends b{constructor(){super(...arguments);this.loading=!1;this.shimmerColor="rgba(128, 128, 128, 0.3)";this.backgroundColor="rgba(128, 128, 128, 0.2)";this.duration=1.5;this.fallbackRadius=4;this.animation="shimmer";this.stagger=0;this.reveal=0;this.count=1;this.countGap=0;this._blocks=[];this._revealing=!1;this._resizeObserver=null;this._mutationObserver=null;this._loadHandler=null;this._measureScheduled=!1;this._revealTimeout=null}connectedCallback(){super.connectedCallback(),Zt()}disconnectedCallback(){super.disconnectedCallback(),this._teardownObservers(),this._clearRevealTimeout()}willUpdate(e){e.has("loading")&&!this.loading&&this.reveal>0&&this._blocks.length>0&&(this._revealing=!0)}updated(e){(e.has("count")||e.has("countGap"))&&this.loading&&this._scheduleMeasure(),e.has("loading")&&(this.setAttribute("aria-busy",String(this.loading)),this.loading?(this._revealing=!1,this._clearRevealTimeout(),this._scheduleMeasure(),this._setupObservers()):this._revealing?(this._teardownObservers(),this._revealTimeout=setTimeout(()=>{this._revealing=!1,this._blocks=[],this._revealTimeout=null,this.style.minHeight=""},this.reveal*1e3)):(this._blocks=[],this._teardownObservers(),this.style.minHeight=""))}render(){let e=xt({"--shimmer-color":this.shimmerColor,"--shimmer-duration":`${this.duration}s`,"--shimmer-bg":this.backgroundColor,"--reveal-duration":`${this.reveal}s`}),s=this.loading||this._revealing;return j`
|
|
126
128
|
<slot></slot>
|
|
127
129
|
${s?j`
|
|
128
130
|
<div
|
package/dist/phantom-ui.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s)=>{for(var t=s>1?void 0:s?k(r,e):r,i=n.length-1,l;i>=0;i--)(l=n[i])&&(t=(s?l(r,e,t):l(t))||t);return s&&t&&_(r,e,t),t};import{LitElement as T,html as p}from"lit";import{customElement as C,property as
|
|
1
|
+
var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s)=>{for(var t=s>1?void 0:s?k(r,e):r,i=n.length-1,l;i>=0;i--)(l=n[i])&&(t=(s?l(r,e,t):l(t))||t);return s&&t&&_(r,e,t),t};import{LitElement as T,html as p}from"lit";import{customElement as C,property as h,state as f}from"lit/decorators.js";import{styleMap as S}from"lit/directives/style-map.js";var w=new Set(["IMG","SVG","VIDEO","CANVAS","IFRAME","INPUT","TEXTAREA","BUTTON","HR"]),E=new Set(["BR","WBR","HR"]);function x(n){if(w.has(n.tagName))return!0;for(let r of n.children)if(!E.has(r.tagName))return!1;return!0}function O(n){for(let r of n.childNodes)if(r.nodeType===Node.TEXT_NODE&&r.textContent?.trim())return!0;return!1}function b(n,r){let e=[];function s(t){let i=t.getBoundingClientRect();if(i.width===0||i.height===0||t.hasAttribute("data-shimmer-ignore"))return;if(t.hasAttribute("data-shimmer-no-children")||x(t)){let d=getComputedStyle(t).borderRadius;if((t.tagName==="TD"||t.tagName==="TH")&&O(t)){let u=document.createElement("span");u.style.visibility="hidden",u.style.position="absolute",u.textContent=t.textContent,t.appendChild(u);let c=u.getBoundingClientRect();t.removeChild(u),e.push({x:i.left-r.left,y:i.top-r.top,width:Math.min(c.width,i.width),height:i.height,tag:t.tagName.toLowerCase(),borderRadius:d==="0px"?"":d});return}e.push({x:i.left-r.left,y:i.top-r.top,width:i.width,height:i.height,tag:t.tagName.toLowerCase(),borderRadius:d==="0px"?"":d});return}for(let m of t.children)s(m)}return s(n),e}function v(n,r){let e=null,s=new ResizeObserver(()=>{e!==null&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{e=null,r()})});return s.observe(n),s}import{css as R}from"lit";var g=R`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
position: relative;
|
|
5
5
|
overflow: hidden;
|
|
6
|
-
--shimmer-color: rgba(
|
|
6
|
+
--shimmer-color: rgba(128, 128, 128, 0.3);
|
|
7
7
|
--shimmer-duration: 1.5s;
|
|
8
|
-
--shimmer-bg: rgba(
|
|
8
|
+
--shimmer-bg: rgba(128, 128, 128, 0.2);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
:host([loading]) ::slotted(*) {
|
|
12
|
-
color: transparent !important;
|
|
13
12
|
-webkit-text-fill-color: transparent !important;
|
|
14
13
|
pointer-events: none;
|
|
15
14
|
user-select: none;
|
|
@@ -18,7 +17,9 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
18
17
|
:host([loading]) ::slotted(img),
|
|
19
18
|
:host([loading]) ::slotted(svg),
|
|
20
19
|
:host([loading]) ::slotted(video),
|
|
21
|
-
:host([loading]) ::slotted(canvas)
|
|
20
|
+
:host([loading]) ::slotted(canvas),
|
|
21
|
+
:host([loading]) ::slotted(button),
|
|
22
|
+
:host([loading]) ::slotted([role="button"]) {
|
|
22
23
|
opacity: 0 !important;
|
|
23
24
|
}
|
|
24
25
|
|
|
@@ -109,7 +110,6 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
109
110
|
}
|
|
110
111
|
`;var y="phantom-ui-loading-styles";function A(){if(document.getElementById(y))return;let n=document.createElement("style");n.id=y,n.textContent=`
|
|
111
112
|
phantom-ui[loading] * {
|
|
112
|
-
color: transparent !important;
|
|
113
113
|
-webkit-text-fill-color: transparent !important;
|
|
114
114
|
pointer-events: none;
|
|
115
115
|
user-select: none;
|
|
@@ -117,10 +117,12 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
117
117
|
phantom-ui[loading] img,
|
|
118
118
|
phantom-ui[loading] svg,
|
|
119
119
|
phantom-ui[loading] video,
|
|
120
|
-
phantom-ui[loading] canvas
|
|
120
|
+
phantom-ui[loading] canvas,
|
|
121
|
+
phantom-ui[loading] button,
|
|
122
|
+
phantom-ui[loading] [role="button"] {
|
|
121
123
|
opacity: 0 !important;
|
|
122
124
|
}
|
|
123
|
-
`,document.head.appendChild(n)}var o=class extends T{constructor(){super(...arguments);this.loading=!1;this.shimmerColor="rgba(
|
|
125
|
+
`,document.head.appendChild(n)}var o=class extends T{constructor(){super(...arguments);this.loading=!1;this.shimmerColor="rgba(128, 128, 128, 0.3)";this.backgroundColor="rgba(128, 128, 128, 0.2)";this.duration=1.5;this.fallbackRadius=4;this.animation="shimmer";this.stagger=0;this.reveal=0;this.count=1;this.countGap=0;this._blocks=[];this._revealing=!1;this._resizeObserver=null;this._mutationObserver=null;this._loadHandler=null;this._measureScheduled=!1;this._revealTimeout=null}connectedCallback(){super.connectedCallback(),A()}disconnectedCallback(){super.disconnectedCallback(),this._teardownObservers(),this._clearRevealTimeout()}willUpdate(e){e.has("loading")&&!this.loading&&this.reveal>0&&this._blocks.length>0&&(this._revealing=!0)}updated(e){(e.has("count")||e.has("countGap"))&&this.loading&&this._scheduleMeasure(),e.has("loading")&&(this.setAttribute("aria-busy",String(this.loading)),this.loading?(this._revealing=!1,this._clearRevealTimeout(),this._scheduleMeasure(),this._setupObservers()):this._revealing?(this._teardownObservers(),this._revealTimeout=setTimeout(()=>{this._revealing=!1,this._blocks=[],this._revealTimeout=null,this.style.minHeight=""},this.reveal*1e3)):(this._blocks=[],this._teardownObservers(),this.style.minHeight=""))}render(){let e=S({"--shimmer-color":this.shimmerColor,"--shimmer-duration":`${this.duration}s`,"--shimmer-bg":this.backgroundColor,"--reveal-duration":`${this.reveal}s`}),s=this.loading||this._revealing;return p`
|
|
124
126
|
<slot></slot>
|
|
125
127
|
${s?p`
|
|
126
128
|
<div
|
|
@@ -131,7 +133,7 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
131
133
|
${this._renderBlocks()}
|
|
132
134
|
</div>
|
|
133
135
|
`:""}
|
|
134
|
-
`}_scheduleMeasure(){this._measureScheduled||(this._measureScheduled=!0,requestAnimationFrame(()=>{this._measureScheduled=!1,this._measure()}))}_measure(){if(!this.loading)return;let e=this.getBoundingClientRect();if(e.width===0||e.height===0)return;let s=this.shadowRoot?.querySelector("slot");if(!s)return;let t=s.assignedElements({flatten:!0}),i=[];for(let l of t){let
|
|
136
|
+
`}_scheduleMeasure(){this._measureScheduled||(this._measureScheduled=!0,requestAnimationFrame(()=>{this._measureScheduled=!1,this._measure()}))}_measure(){if(!this.loading)return;let e=this.getBoundingClientRect();if(e.width===0||e.height===0)return;let s=this.shadowRoot?.querySelector("slot");if(!s)return;let t=s.assignedElements({flatten:!0}),i=[];for(let l of t){let m=b(l,e);i.push(...m)}if(this.count>1&&i.length>0){let l=0;for(let u of t){let c=u.getBoundingClientRect();l=Math.max(l,c.bottom-e.top)}let m=[...i];for(let u=1;u<this.count;u++)for(let c of m)i.push({...c,y:c.y+u*(l+this.countGap)});let d=this.count*l+(this.count-1)*this.countGap;this.style.minHeight=`${d}px`}else this.style.minHeight="";this._blocks=i}_setupObservers(){this._teardownObservers(),this._resizeObserver=v(this,()=>{this._scheduleMeasure()}),this._mutationObserver=new MutationObserver(()=>{this._scheduleMeasure()}),this._mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0}),this._loadHandler=()=>this._scheduleMeasure(),this.addEventListener("load",this._loadHandler,!0)}_teardownObservers(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null),this._mutationObserver&&(this._mutationObserver.disconnect(),this._mutationObserver=null),this._loadHandler&&(this.removeEventListener("load",this._loadHandler,!0),this._loadHandler=null)}_clearRevealTimeout(){this._revealTimeout!==null&&(clearTimeout(this._revealTimeout),this._revealTimeout=null)}_renderBlocks(){return this._blocks.map((e,s)=>{let t=e.borderRadius||`${this.fallbackRadius}px`,i=this.stagger,l=i>0?`animation-delay: ${s*i}s;`:"";return p`
|
|
135
137
|
<div
|
|
136
138
|
class="shimmer-block"
|
|
137
139
|
style="
|
|
@@ -144,4 +146,4 @@ var _=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=(n,r,e,s
|
|
|
144
146
|
${l}
|
|
145
147
|
"
|
|
146
148
|
></div>
|
|
147
|
-
`})}};o.styles=g,a([
|
|
149
|
+
`})}};o.styles=g,a([h({type:Boolean,reflect:!0})],o.prototype,"loading",2),a([h({attribute:"shimmer-color"})],o.prototype,"shimmerColor",2),a([h({attribute:"background-color"})],o.prototype,"backgroundColor",2),a([h({type:Number})],o.prototype,"duration",2),a([h({type:Number,attribute:"fallback-radius"})],o.prototype,"fallbackRadius",2),a([h({reflect:!0})],o.prototype,"animation",2),a([h({type:Number})],o.prototype,"stagger",2),a([h({type:Number})],o.prototype,"reveal",2),a([h({type:Number,converter:e=>Math.max(1,Math.round(Number(e)||1))})],o.prototype,"count",2),a([h({type:Number,attribute:"count-gap",converter:e=>Math.max(0,Number(e)||0)})],o.prototype,"countGap",2),a([f()],o.prototype,"_blocks",2),a([f()],o.prototype,"_revealing",2),o=a([C("phantom-ui")],o);export{o as PhantomUi};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aejkatappaja/phantom-ui",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.2",
|
|
4
4
|
"description": "Structure-aware shimmer skeleton loader as a universal Web Component built with Lit. Works with React, Vue, Svelte, Angular, Solid, or vanilla JS.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|