@everymatrix/ui-skeleton 0.0.0 → 0.0.3
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/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{ui-skeleton-43520ebc.js → ui-skeleton-90aa6db9.js} +18 -18
- package/dist/cjs/ui-skeleton.cjs.entry.js +1 -1
- package/dist/cjs/ui-skeleton.cjs.js +1 -1
- package/dist/collection/components/ui-skeleton/ui-skeleton.js +30 -30
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{ui-skeleton-2473e87c.js → ui-skeleton-7225da70.js} +18 -18
- package/dist/esm/ui-skeleton.entry.js +1 -1
- package/dist/esm/ui-skeleton.js +1 -1
- package/dist/types/components/ui-skeleton/ui-skeleton.d.ts +6 -6
- package/dist/types/components.d.ts +12 -12
- package/dist/ui-skeleton/index.esm.js +1 -1
- package/dist/ui-skeleton/p-63c11533.entry.js +1 -0
- package/dist/ui-skeleton/p-fc8fe766.js +1 -0
- package/dist/ui-skeleton/ui-skeleton.esm.js +1 -1
- package/package.json +1 -1
- package/dist/ui-skeleton/p-75e06c6c.js +0 -1
- package/dist/ui-skeleton/p-933ae591.entry.js +0 -1
package/dist/cjs/index.cjs.js
CHANGED
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[
|
|
11
|
+
return index.bootstrapLazy([["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -44,8 +44,8 @@ const UiSkeleton = class {
|
|
|
44
44
|
}
|
|
45
45
|
renderLogo() {
|
|
46
46
|
const styles = {
|
|
47
|
-
width: `${this.width}
|
|
48
|
-
height: `${this.height}
|
|
47
|
+
width: `${this.width}`,
|
|
48
|
+
height: `${this.height}`,
|
|
49
49
|
'background-color': `${this.color}`,
|
|
50
50
|
'border-radius': `${this.borderRadius}px`,
|
|
51
51
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -53,12 +53,12 @@ const UiSkeleton = class {
|
|
|
53
53
|
'margin-left': `${this.marginLeft}px`,
|
|
54
54
|
'margin-right': `${this.marginRight}px`
|
|
55
55
|
};
|
|
56
|
-
return (index.h("div", { style: styles, class: "
|
|
56
|
+
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Logo " + (this.animation ? 'Skeleton' : '') })));
|
|
57
57
|
}
|
|
58
58
|
renderImage() {
|
|
59
59
|
const styles = {
|
|
60
|
-
width: `${this.width}
|
|
61
|
-
height: `${this.height}
|
|
60
|
+
width: `${this.width}`,
|
|
61
|
+
height: `${this.height}`,
|
|
62
62
|
'background-color': `${this.color}`,
|
|
63
63
|
'border-radius': `${this.borderRadius}px`,
|
|
64
64
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -66,12 +66,12 @@ const UiSkeleton = class {
|
|
|
66
66
|
'margin-left': `${this.marginLeft}px`,
|
|
67
67
|
'margin-right': `${this.marginRight}px`
|
|
68
68
|
};
|
|
69
|
-
return (index.h("div", { style: styles, class: "
|
|
69
|
+
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Image " + (this.animation ? 'Skeleton' : '') })));
|
|
70
70
|
}
|
|
71
71
|
renderTitle() {
|
|
72
72
|
const styles = {
|
|
73
|
-
width: `${this.width}
|
|
74
|
-
height: `${this.height}
|
|
73
|
+
width: `${this.width}`,
|
|
74
|
+
height: `${this.height}`,
|
|
75
75
|
'background-color': `${this.color}`,
|
|
76
76
|
'border-radius': `${this.borderRadius}px`,
|
|
77
77
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -79,12 +79,12 @@ const UiSkeleton = class {
|
|
|
79
79
|
'margin-left': `${this.marginLeft}px`,
|
|
80
80
|
'margin-right': `${this.marginRight}px`
|
|
81
81
|
};
|
|
82
|
-
return (index.h("div", { style: styles, class: "
|
|
82
|
+
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Title " + (this.animation ? 'Skeleton' : '') })));
|
|
83
83
|
}
|
|
84
84
|
renderText() {
|
|
85
85
|
const styles = {
|
|
86
|
-
width: `${this.width}
|
|
87
|
-
height: `${this.height}
|
|
86
|
+
width: `${this.width}`,
|
|
87
|
+
height: `${this.height}`,
|
|
88
88
|
'background-color': `${this.color}`,
|
|
89
89
|
'border-radius': `${this.borderRadius}px`,
|
|
90
90
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -92,25 +92,25 @@ const UiSkeleton = class {
|
|
|
92
92
|
'margin-left': `${this.marginLeft}px`,
|
|
93
93
|
'margin-right': `${this.marginRight}px`
|
|
94
94
|
};
|
|
95
|
-
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { style: styles, key: index$1, class: "
|
|
95
|
+
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { style: styles, key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') }))));
|
|
96
96
|
}
|
|
97
97
|
renderRectangle() {
|
|
98
98
|
const styles = {
|
|
99
|
-
width: `${this.width}
|
|
100
|
-
height: `${this.height}
|
|
101
|
-
'
|
|
99
|
+
width: `${this.width}`,
|
|
100
|
+
height: `${this.height}`,
|
|
101
|
+
'background-color': `${this.color}`,
|
|
102
102
|
'border-radius': `${this.borderRadius}px`,
|
|
103
103
|
'margin-bottom': `${this.marginBottom}px`,
|
|
104
104
|
'margin-top': `${this.marginTop}px`,
|
|
105
105
|
'margin-left': `${this.marginLeft}px`,
|
|
106
106
|
'margin-right': `${this.marginRight}px`
|
|
107
107
|
};
|
|
108
|
-
return (index.h("div", { style: styles, class: "
|
|
108
|
+
return (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
|
|
109
109
|
}
|
|
110
110
|
renderCircle() {
|
|
111
111
|
const styles = {
|
|
112
|
-
width: `${this.size}
|
|
113
|
-
height: `${this.size}
|
|
112
|
+
width: `${this.size}`,
|
|
113
|
+
height: `${this.size}`,
|
|
114
114
|
'background-color': `${this.color}`,
|
|
115
115
|
'margin-bottom': `${this.marginBottom}px`,
|
|
116
116
|
'margin-top': `${this.marginTop}px`,
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[
|
|
22
|
+
return index.bootstrapLazy([["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -40,8 +40,8 @@ export class UiSkeleton {
|
|
|
40
40
|
}
|
|
41
41
|
renderLogo() {
|
|
42
42
|
const styles = {
|
|
43
|
-
width: `${this.width}
|
|
44
|
-
height: `${this.height}
|
|
43
|
+
width: `${this.width}`,
|
|
44
|
+
height: `${this.height}`,
|
|
45
45
|
'background-color': `${this.color}`,
|
|
46
46
|
'border-radius': `${this.borderRadius}px`,
|
|
47
47
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -49,12 +49,12 @@ export class UiSkeleton {
|
|
|
49
49
|
'margin-left': `${this.marginLeft}px`,
|
|
50
50
|
'margin-right': `${this.marginRight}px`
|
|
51
51
|
};
|
|
52
|
-
return (h("div", { style: styles, class: "
|
|
52
|
+
return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Logo " + (this.animation ? 'Skeleton' : '') })));
|
|
53
53
|
}
|
|
54
54
|
renderImage() {
|
|
55
55
|
const styles = {
|
|
56
|
-
width: `${this.width}
|
|
57
|
-
height: `${this.height}
|
|
56
|
+
width: `${this.width}`,
|
|
57
|
+
height: `${this.height}`,
|
|
58
58
|
'background-color': `${this.color}`,
|
|
59
59
|
'border-radius': `${this.borderRadius}px`,
|
|
60
60
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -62,12 +62,12 @@ export class UiSkeleton {
|
|
|
62
62
|
'margin-left': `${this.marginLeft}px`,
|
|
63
63
|
'margin-right': `${this.marginRight}px`
|
|
64
64
|
};
|
|
65
|
-
return (h("div", { style: styles, class: "
|
|
65
|
+
return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Image " + (this.animation ? 'Skeleton' : '') })));
|
|
66
66
|
}
|
|
67
67
|
renderTitle() {
|
|
68
68
|
const styles = {
|
|
69
|
-
width: `${this.width}
|
|
70
|
-
height: `${this.height}
|
|
69
|
+
width: `${this.width}`,
|
|
70
|
+
height: `${this.height}`,
|
|
71
71
|
'background-color': `${this.color}`,
|
|
72
72
|
'border-radius': `${this.borderRadius}px`,
|
|
73
73
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -75,12 +75,12 @@ export class UiSkeleton {
|
|
|
75
75
|
'margin-left': `${this.marginLeft}px`,
|
|
76
76
|
'margin-right': `${this.marginRight}px`
|
|
77
77
|
};
|
|
78
|
-
return (h("div", { style: styles, class: "
|
|
78
|
+
return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Title " + (this.animation ? 'Skeleton' : '') })));
|
|
79
79
|
}
|
|
80
80
|
renderText() {
|
|
81
81
|
const styles = {
|
|
82
|
-
width: `${this.width}
|
|
83
|
-
height: `${this.height}
|
|
82
|
+
width: `${this.width}`,
|
|
83
|
+
height: `${this.height}`,
|
|
84
84
|
'background-color': `${this.color}`,
|
|
85
85
|
'border-radius': `${this.borderRadius}px`,
|
|
86
86
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -88,25 +88,25 @@ export class UiSkeleton {
|
|
|
88
88
|
'margin-left': `${this.marginLeft}px`,
|
|
89
89
|
'margin-right': `${this.marginRight}px`
|
|
90
90
|
};
|
|
91
|
-
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { style: styles, key: index, class: "
|
|
91
|
+
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { style: styles, key: index, class: "Text " + (this.animation ? 'Skeleton' : '') }))));
|
|
92
92
|
}
|
|
93
93
|
renderRectangle() {
|
|
94
94
|
const styles = {
|
|
95
|
-
width: `${this.width}
|
|
96
|
-
height: `${this.height}
|
|
97
|
-
'
|
|
95
|
+
width: `${this.width}`,
|
|
96
|
+
height: `${this.height}`,
|
|
97
|
+
'background-color': `${this.color}`,
|
|
98
98
|
'border-radius': `${this.borderRadius}px`,
|
|
99
99
|
'margin-bottom': `${this.marginBottom}px`,
|
|
100
100
|
'margin-top': `${this.marginTop}px`,
|
|
101
101
|
'margin-left': `${this.marginLeft}px`,
|
|
102
102
|
'margin-right': `${this.marginRight}px`
|
|
103
103
|
};
|
|
104
|
-
return (h("div", { style: styles, class: "
|
|
104
|
+
return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
|
|
105
105
|
}
|
|
106
106
|
renderCircle() {
|
|
107
107
|
const styles = {
|
|
108
|
-
width: `${this.size}
|
|
109
|
-
height: `${this.size}
|
|
108
|
+
width: `${this.size}`,
|
|
109
|
+
height: `${this.size}`,
|
|
110
110
|
'background-color': `${this.color}`,
|
|
111
111
|
'margin-bottom': `${this.marginBottom}px`,
|
|
112
112
|
'margin-top': `${this.marginTop}px`,
|
|
@@ -154,18 +154,18 @@ export class UiSkeleton {
|
|
|
154
154
|
"reflect": false
|
|
155
155
|
},
|
|
156
156
|
"width": {
|
|
157
|
-
"type": "
|
|
157
|
+
"type": "string",
|
|
158
158
|
"mutable": false,
|
|
159
159
|
"complexType": {
|
|
160
|
-
"original": "
|
|
161
|
-
"resolved": "
|
|
160
|
+
"original": "string",
|
|
161
|
+
"resolved": "string",
|
|
162
162
|
"references": {}
|
|
163
163
|
},
|
|
164
164
|
"required": false,
|
|
165
165
|
"optional": false,
|
|
166
166
|
"docs": {
|
|
167
167
|
"tags": [],
|
|
168
|
-
"text": "Width of the element"
|
|
168
|
+
"text": "Width of the element - it can either be a value in px (150px) or in percentage (100%)"
|
|
169
169
|
},
|
|
170
170
|
"getter": false,
|
|
171
171
|
"setter": false,
|
|
@@ -173,18 +173,18 @@ export class UiSkeleton {
|
|
|
173
173
|
"reflect": false
|
|
174
174
|
},
|
|
175
175
|
"height": {
|
|
176
|
-
"type": "
|
|
176
|
+
"type": "string",
|
|
177
177
|
"mutable": false,
|
|
178
178
|
"complexType": {
|
|
179
|
-
"original": "
|
|
180
|
-
"resolved": "
|
|
179
|
+
"original": "string",
|
|
180
|
+
"resolved": "string",
|
|
181
181
|
"references": {}
|
|
182
182
|
},
|
|
183
183
|
"required": false,
|
|
184
184
|
"optional": false,
|
|
185
185
|
"docs": {
|
|
186
186
|
"tags": [],
|
|
187
|
-
"text": "Height of the element"
|
|
187
|
+
"text": "Height of the element - it can either be a value in px (150px) or in percentage (100%)"
|
|
188
188
|
},
|
|
189
189
|
"getter": false,
|
|
190
190
|
"setter": false,
|
|
@@ -326,18 +326,18 @@ export class UiSkeleton {
|
|
|
326
326
|
"reflect": false
|
|
327
327
|
},
|
|
328
328
|
"size": {
|
|
329
|
-
"type": "
|
|
329
|
+
"type": "string",
|
|
330
330
|
"mutable": false,
|
|
331
331
|
"complexType": {
|
|
332
|
-
"original": "
|
|
333
|
-
"resolved": "
|
|
332
|
+
"original": "string",
|
|
333
|
+
"resolved": "string",
|
|
334
334
|
"references": {}
|
|
335
335
|
},
|
|
336
336
|
"required": false,
|
|
337
337
|
"optional": false,
|
|
338
338
|
"docs": {
|
|
339
339
|
"tags": [],
|
|
340
|
-
"text": "The size of the circle - only for `circle"
|
|
340
|
+
"text": "The size of the circle - only for `circle - it can either be a value in px (150px) or in percentage (100%)"
|
|
341
341
|
},
|
|
342
342
|
"getter": false,
|
|
343
343
|
"setter": false,
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { U as UiSkeleton } from './ui-skeleton-
|
|
1
|
+
export { U as UiSkeleton } from './ui-skeleton-7225da70.js';
|
|
2
2
|
import './index-f5cf3f14.js';
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[
|
|
8
|
+
return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -42,8 +42,8 @@ const UiSkeleton = class {
|
|
|
42
42
|
}
|
|
43
43
|
renderLogo() {
|
|
44
44
|
const styles = {
|
|
45
|
-
width: `${this.width}
|
|
46
|
-
height: `${this.height}
|
|
45
|
+
width: `${this.width}`,
|
|
46
|
+
height: `${this.height}`,
|
|
47
47
|
'background-color': `${this.color}`,
|
|
48
48
|
'border-radius': `${this.borderRadius}px`,
|
|
49
49
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -51,12 +51,12 @@ const UiSkeleton = class {
|
|
|
51
51
|
'margin-left': `${this.marginLeft}px`,
|
|
52
52
|
'margin-right': `${this.marginRight}px`
|
|
53
53
|
};
|
|
54
|
-
return (h("div", { style: styles, class: "
|
|
54
|
+
return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Logo " + (this.animation ? 'Skeleton' : '') })));
|
|
55
55
|
}
|
|
56
56
|
renderImage() {
|
|
57
57
|
const styles = {
|
|
58
|
-
width: `${this.width}
|
|
59
|
-
height: `${this.height}
|
|
58
|
+
width: `${this.width}`,
|
|
59
|
+
height: `${this.height}`,
|
|
60
60
|
'background-color': `${this.color}`,
|
|
61
61
|
'border-radius': `${this.borderRadius}px`,
|
|
62
62
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -64,12 +64,12 @@ const UiSkeleton = class {
|
|
|
64
64
|
'margin-left': `${this.marginLeft}px`,
|
|
65
65
|
'margin-right': `${this.marginRight}px`
|
|
66
66
|
};
|
|
67
|
-
return (h("div", { style: styles, class: "
|
|
67
|
+
return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Image " + (this.animation ? 'Skeleton' : '') })));
|
|
68
68
|
}
|
|
69
69
|
renderTitle() {
|
|
70
70
|
const styles = {
|
|
71
|
-
width: `${this.width}
|
|
72
|
-
height: `${this.height}
|
|
71
|
+
width: `${this.width}`,
|
|
72
|
+
height: `${this.height}`,
|
|
73
73
|
'background-color': `${this.color}`,
|
|
74
74
|
'border-radius': `${this.borderRadius}px`,
|
|
75
75
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -77,12 +77,12 @@ const UiSkeleton = class {
|
|
|
77
77
|
'margin-left': `${this.marginLeft}px`,
|
|
78
78
|
'margin-right': `${this.marginRight}px`
|
|
79
79
|
};
|
|
80
|
-
return (h("div", { style: styles, class: "
|
|
80
|
+
return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Title " + (this.animation ? 'Skeleton' : '') })));
|
|
81
81
|
}
|
|
82
82
|
renderText() {
|
|
83
83
|
const styles = {
|
|
84
|
-
width: `${this.width}
|
|
85
|
-
height: `${this.height}
|
|
84
|
+
width: `${this.width}`,
|
|
85
|
+
height: `${this.height}`,
|
|
86
86
|
'background-color': `${this.color}`,
|
|
87
87
|
'border-radius': `${this.borderRadius}px`,
|
|
88
88
|
'margin-bottom': `${this.marginBottom}px`,
|
|
@@ -90,25 +90,25 @@ const UiSkeleton = class {
|
|
|
90
90
|
'margin-left': `${this.marginLeft}px`,
|
|
91
91
|
'margin-right': `${this.marginRight}px`
|
|
92
92
|
};
|
|
93
|
-
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { style: styles, key: index, class: "
|
|
93
|
+
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { style: styles, key: index, class: "Text " + (this.animation ? 'Skeleton' : '') }))));
|
|
94
94
|
}
|
|
95
95
|
renderRectangle() {
|
|
96
96
|
const styles = {
|
|
97
|
-
width: `${this.width}
|
|
98
|
-
height: `${this.height}
|
|
99
|
-
'
|
|
97
|
+
width: `${this.width}`,
|
|
98
|
+
height: `${this.height}`,
|
|
99
|
+
'background-color': `${this.color}`,
|
|
100
100
|
'border-radius': `${this.borderRadius}px`,
|
|
101
101
|
'margin-bottom': `${this.marginBottom}px`,
|
|
102
102
|
'margin-top': `${this.marginTop}px`,
|
|
103
103
|
'margin-left': `${this.marginLeft}px`,
|
|
104
104
|
'margin-right': `${this.marginRight}px`
|
|
105
105
|
};
|
|
106
|
-
return (h("div", { style: styles, class: "
|
|
106
|
+
return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
|
|
107
107
|
}
|
|
108
108
|
renderCircle() {
|
|
109
109
|
const styles = {
|
|
110
|
-
width: `${this.size}
|
|
111
|
-
height: `${this.size}
|
|
110
|
+
width: `${this.size}`,
|
|
111
|
+
height: `${this.size}`,
|
|
112
112
|
'background-color': `${this.color}`,
|
|
113
113
|
'margin-bottom': `${this.marginBottom}px`,
|
|
114
114
|
'margin-top': `${this.marginTop}px`,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { U as ui_skeleton } from './ui-skeleton-
|
|
1
|
+
export { U as ui_skeleton } from './ui-skeleton-7225da70.js';
|
|
2
2
|
import './index-f5cf3f14.js';
|
package/dist/esm/ui-skeleton.js
CHANGED
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[
|
|
19
|
+
return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
|
|
20
20
|
});
|
|
@@ -4,13 +4,13 @@ export declare class UiSkeleton {
|
|
|
4
4
|
*/
|
|
5
5
|
structure: 'logo' | 'image' | 'title' | 'text' | 'rectangle' | 'circle';
|
|
6
6
|
/**
|
|
7
|
-
* Width of the element
|
|
7
|
+
* Width of the element - it can either be a value in px (150px) or in percentage (100%)
|
|
8
8
|
*/
|
|
9
|
-
width:
|
|
9
|
+
width: string;
|
|
10
10
|
/**
|
|
11
|
-
* Height of the element
|
|
11
|
+
* Height of the element - it can either be a value in px (150px) or in percentage (100%)
|
|
12
12
|
*/
|
|
13
|
-
height:
|
|
13
|
+
height: string;
|
|
14
14
|
/**
|
|
15
15
|
* The border radius of the element
|
|
16
16
|
*/
|
|
@@ -40,9 +40,9 @@ export declare class UiSkeleton {
|
|
|
40
40
|
*/
|
|
41
41
|
rows: number;
|
|
42
42
|
/**
|
|
43
|
-
* The size of the circle - only for `circle
|
|
43
|
+
* The size of the circle - only for `circle - it can either be a value in px (150px) or in percentage (100%)
|
|
44
44
|
*/
|
|
45
|
-
size:
|
|
45
|
+
size: string;
|
|
46
46
|
/**
|
|
47
47
|
* Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)
|
|
48
48
|
*/
|
|
@@ -20,9 +20,9 @@ export namespace Components {
|
|
|
20
20
|
*/
|
|
21
21
|
"color": string;
|
|
22
22
|
/**
|
|
23
|
-
* Height of the element
|
|
23
|
+
* Height of the element - it can either be a value in px (150px) or in percentage (100%)
|
|
24
24
|
*/
|
|
25
|
-
"height":
|
|
25
|
+
"height": string;
|
|
26
26
|
/**
|
|
27
27
|
* Margin bottom for the element
|
|
28
28
|
*/
|
|
@@ -52,17 +52,17 @@ export namespace Components {
|
|
|
52
52
|
*/
|
|
53
53
|
"secondaryColor": string;
|
|
54
54
|
/**
|
|
55
|
-
* The size of the circle - only for `circle
|
|
55
|
+
* The size of the circle - only for `circle - it can either be a value in px (150px) or in percentage (100%)
|
|
56
56
|
*/
|
|
57
|
-
"size":
|
|
57
|
+
"size": string;
|
|
58
58
|
/**
|
|
59
59
|
* The structure of the skeleton
|
|
60
60
|
*/
|
|
61
61
|
"structure": 'logo' | 'image' | 'title' | 'text' | 'rectangle' | 'circle';
|
|
62
62
|
/**
|
|
63
|
-
* Width of the element
|
|
63
|
+
* Width of the element - it can either be a value in px (150px) or in percentage (100%)
|
|
64
64
|
*/
|
|
65
|
-
"width":
|
|
65
|
+
"width": string;
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
declare global {
|
|
@@ -91,9 +91,9 @@ declare namespace LocalJSX {
|
|
|
91
91
|
*/
|
|
92
92
|
"color"?: string;
|
|
93
93
|
/**
|
|
94
|
-
* Height of the element
|
|
94
|
+
* Height of the element - it can either be a value in px (150px) or in percentage (100%)
|
|
95
95
|
*/
|
|
96
|
-
"height"?:
|
|
96
|
+
"height"?: string;
|
|
97
97
|
/**
|
|
98
98
|
* Margin bottom for the element
|
|
99
99
|
*/
|
|
@@ -123,17 +123,17 @@ declare namespace LocalJSX {
|
|
|
123
123
|
*/
|
|
124
124
|
"secondaryColor"?: string;
|
|
125
125
|
/**
|
|
126
|
-
* The size of the circle - only for `circle
|
|
126
|
+
* The size of the circle - only for `circle - it can either be a value in px (150px) or in percentage (100%)
|
|
127
127
|
*/
|
|
128
|
-
"size"?:
|
|
128
|
+
"size"?: string;
|
|
129
129
|
/**
|
|
130
130
|
* The structure of the skeleton
|
|
131
131
|
*/
|
|
132
132
|
"structure"?: 'logo' | 'image' | 'title' | 'text' | 'rectangle' | 'circle';
|
|
133
133
|
/**
|
|
134
|
-
* Width of the element
|
|
134
|
+
* Width of the element - it can either be a value in px (150px) or in percentage (100%)
|
|
135
135
|
*/
|
|
136
|
-
"width"?:
|
|
136
|
+
"width"?: string;
|
|
137
137
|
}
|
|
138
138
|
interface IntrinsicElements {
|
|
139
139
|
"ui-skeleton": UiSkeleton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{U as UiSkeleton}from"./p-
|
|
1
|
+
export{U as UiSkeleton}from"./p-fc8fe766.js";import"./p-443310cf.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{U as ui_skeleton}from"./p-fc8fe766.js";import"./p-443310cf.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as e}from"./p-443310cf.js";const r=class{constructor(e){t(this,e),this.animation=!0}handleStructureChange(t,e){e!==t&&this.handleStructure(t)}updateStyles(){this.primaryColor&&this.skeletonContainer.style.setProperty("--emw-skeleton-primary-color",this.primaryColor),this.secondaryColor&&this.skeletonContainer.style.setProperty("--emw-skeleton-secondary-color",this.secondaryColor)}handleStructure(t){switch(t){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle()}}renderLogo(){return e("div",{ref:t=>this.skeletonContainer=t},e("div",{style:{width:`${this.width}`,height:`${this.height}`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return e("div",{ref:t=>this.skeletonContainer=t},e("div",{style:{width:`${this.width}`,height:`${this.height}`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Image "+(this.animation?"Skeleton":"")}))}renderTitle(){return e("div",{ref:t=>this.skeletonContainer=t},e("div",{style:{width:`${this.width}`,height:`${this.height}`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){const t={width:`${this.width}`,height:`${this.height}`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`};return Array.from({length:this.rows>0?this.rows:1}).map(((r,i)=>e("div",{style:t,key:i,class:"Text "+(this.animation?"Skeleton":"")})))}renderRectangle(){return e("div",{ref:t=>this.skeletonContainer=t},e("div",{style:{width:`${this.width}`,height:`${this.height}`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return e("div",{ref:t=>this.skeletonContainer=t},e("div",{style:{width:`${this.size}`,height:`${this.size}`,"background-color":`${this.color}`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Circle "+(this.animation?"Skeleton":"")}))}componentDidLoad(){this.updateStyles()}render(){return this.handleStructure(this.structure)}static get watchers(){return{structure:["handleStructureChange"],primaryColor:["updateStyles"],secondaryColor:["updateStyles"]}}};r.style=".Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 250px);height:var(--emw-skeleton-image-height, 200px);border-radius:var(--emw-skeleton-image-border-radius, 10px)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";export{r as U}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as r,b as o}from"./p-443310cf.js";export{s as setNonce}from"./p-443310cf.js";import{g as t}from"./p-e1255160.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),r(t)})().then((async r=>(await t(),o([["p-
|
|
1
|
+
import{p as r,b as o}from"./p-443310cf.js";export{s as setNonce}from"./p-443310cf.js";import{g as t}from"./p-e1255160.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),r(t)})().then((async r=>(await t(),o([["p-63c11533",[[0,"ui-skeleton",{structure:[1],width:[1],height:[1],borderRadius:[2,"border-radius"],marginBottom:[2,"margin-bottom"],marginTop:[2,"margin-top"],marginLeft:[2,"margin-left"],marginRight:[2,"margin-right"],animation:[4],rows:[2],size:[1],color:[1],primaryColor:[1,"primary-color"],secondaryColor:[1,"secondary-color"]},null,{structure:["handleStructureChange"],primaryColor:["updateStyles"],secondaryColor:["updateStyles"]}]]]],r))));
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,h as t}from"./p-443310cf.js";const r=class{constructor(t){e(this,t),this.animation=!0}handleStructureChange(e,t){t!==e&&this.handleStructure(e)}updateStyles(){this.primaryColor&&this.skeletonContainer.style.setProperty("--emw-skeleton-primary-color",this.primaryColor),this.secondaryColor&&this.skeletonContainer.style.setProperty("--emw-skeleton-secondary-color",this.secondaryColor)}handleStructure(e){switch(e){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle()}}renderLogo(){return t("div",{style:{width:`${this.width}px`,height:`${this.height}px`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Skeleton Logo"})}renderImage(){return t("div",{style:{width:`${this.width}px`,height:`${this.height}px`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Skeleton Image"})}renderTitle(){return t("div",{style:{width:`${this.width}px`,height:`${this.height}px`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Skeleton Title"})}renderText(){const e={width:`${this.width}px`,height:`${this.height}px`,"background-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`};return Array.from({length:this.rows>0?this.rows:1}).map(((r,i)=>t("div",{style:e,key:i,class:"Skeleton Text"})))}renderRectangle(){return t("div",{style:{width:`${this.width}px`,height:`${this.height}px`,"backgroud-color":`${this.color}`,"border-radius":`${this.borderRadius}px`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Skeleton Rectangle"})}renderCircle(){return t("div",{ref:e=>this.skeletonContainer=e},t("div",{style:{width:`${this.size}px`,height:`${this.size}px`,"background-color":`${this.color}`,"margin-bottom":`${this.marginBottom}px`,"margin-top":`${this.marginTop}px`,"margin-left":`${this.marginLeft}px`,"margin-right":`${this.marginRight}px`},class:"Circle "+(this.animation?"Skeleton":"")}))}componentDidLoad(){this.updateStyles()}render(){return this.handleStructure(this.structure)}static get watchers(){return{structure:["handleStructureChange"],primaryColor:["updateStyles"],secondaryColor:["updateStyles"]}}};r.style=".Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 250px);height:var(--emw-skeleton-image-height, 200px);border-radius:var(--emw-skeleton-image-border-radius, 10px)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";export{r as U}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{U as ui_skeleton}from"./p-75e06c6c.js";import"./p-443310cf.js";
|