@everymatrix/ui-skeleton 0.0.6 → 0.1.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/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{ui-skeleton-90aa6db9.js → ui-skeleton-43520ebc.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-7225da70.js → ui-skeleton-2473e87c.js} +18 -18
- package/dist/esm/ui-skeleton.entry.js +1 -1
- package/dist/esm/ui-skeleton.js +1 -1
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/stencil.config.d.ts +2 -0
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/stencil.config.dev.d.ts +2 -0
- 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-75e06c6c.js +1 -0
- package/dist/ui-skeleton/p-933ae591.entry.js +1 -0
- package/dist/ui-skeleton/ui-skeleton.esm.js +1 -1
- package/package.json +1 -1
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/stencil.config.d.ts +0 -2
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/stencil.config.dev.d.ts +0 -2
- package/dist/ui-skeleton/p-63c11533.entry.js +0 -1
- package/dist/ui-skeleton/p-fc8fe766.js +0 -1
- /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/storybook/main.d.ts +0 -0
- /package/dist/types/{Users/adrian.pripon/Documents/Work → builds/emfe-widgets}/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/storybook/preview.d.ts +0 -0
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":[2],"height":[2],"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":[2],"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}px`,
|
|
48
|
+
height: `${this.height}px`,
|
|
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", {
|
|
56
|
+
return (index.h("div", { style: styles, class: "Skeleton Logo" }));
|
|
57
57
|
}
|
|
58
58
|
renderImage() {
|
|
59
59
|
const styles = {
|
|
60
|
-
width: `${this.width}`,
|
|
61
|
-
height: `${this.height}`,
|
|
60
|
+
width: `${this.width}px`,
|
|
61
|
+
height: `${this.height}px`,
|
|
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", {
|
|
69
|
+
return (index.h("div", { style: styles, class: "Skeleton Image" }));
|
|
70
70
|
}
|
|
71
71
|
renderTitle() {
|
|
72
72
|
const styles = {
|
|
73
|
-
width: `${this.width}`,
|
|
74
|
-
height: `${this.height}`,
|
|
73
|
+
width: `${this.width}px`,
|
|
74
|
+
height: `${this.height}px`,
|
|
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", {
|
|
82
|
+
return (index.h("div", { style: styles, class: "Skeleton Title" }));
|
|
83
83
|
}
|
|
84
84
|
renderText() {
|
|
85
85
|
const styles = {
|
|
86
|
-
width: `${this.width}`,
|
|
87
|
-
height: `${this.height}`,
|
|
86
|
+
width: `${this.width}px`,
|
|
87
|
+
height: `${this.height}px`,
|
|
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: "Text
|
|
95
|
+
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { style: styles, key: index$1, class: "Skeleton Text" }))));
|
|
96
96
|
}
|
|
97
97
|
renderRectangle() {
|
|
98
98
|
const styles = {
|
|
99
|
-
width: `${this.width}`,
|
|
100
|
-
height: `${this.height}`,
|
|
101
|
-
'
|
|
99
|
+
width: `${this.width}px`,
|
|
100
|
+
height: `${this.height}px`,
|
|
101
|
+
'backgroud-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", {
|
|
108
|
+
return (index.h("div", { style: styles, class: "Skeleton Rectangle" }));
|
|
109
109
|
}
|
|
110
110
|
renderCircle() {
|
|
111
111
|
const styles = {
|
|
112
|
-
width: `${this.size}`,
|
|
113
|
-
height: `${this.size}`,
|
|
112
|
+
width: `${this.size}px`,
|
|
113
|
+
height: `${this.size}px`,
|
|
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":[2],"height":[2],"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":[2],"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}px`,
|
|
44
|
+
height: `${this.height}px`,
|
|
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", {
|
|
52
|
+
return (h("div", { style: styles, class: "Skeleton Logo" }));
|
|
53
53
|
}
|
|
54
54
|
renderImage() {
|
|
55
55
|
const styles = {
|
|
56
|
-
width: `${this.width}`,
|
|
57
|
-
height: `${this.height}`,
|
|
56
|
+
width: `${this.width}px`,
|
|
57
|
+
height: `${this.height}px`,
|
|
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", {
|
|
65
|
+
return (h("div", { style: styles, class: "Skeleton Image" }));
|
|
66
66
|
}
|
|
67
67
|
renderTitle() {
|
|
68
68
|
const styles = {
|
|
69
|
-
width: `${this.width}`,
|
|
70
|
-
height: `${this.height}`,
|
|
69
|
+
width: `${this.width}px`,
|
|
70
|
+
height: `${this.height}px`,
|
|
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", {
|
|
78
|
+
return (h("div", { style: styles, class: "Skeleton Title" }));
|
|
79
79
|
}
|
|
80
80
|
renderText() {
|
|
81
81
|
const styles = {
|
|
82
|
-
width: `${this.width}`,
|
|
83
|
-
height: `${this.height}`,
|
|
82
|
+
width: `${this.width}px`,
|
|
83
|
+
height: `${this.height}px`,
|
|
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: "Text
|
|
91
|
+
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { style: styles, key: index, class: "Skeleton Text" }))));
|
|
92
92
|
}
|
|
93
93
|
renderRectangle() {
|
|
94
94
|
const styles = {
|
|
95
|
-
width: `${this.width}`,
|
|
96
|
-
height: `${this.height}`,
|
|
97
|
-
'
|
|
95
|
+
width: `${this.width}px`,
|
|
96
|
+
height: `${this.height}px`,
|
|
97
|
+
'backgroud-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", {
|
|
104
|
+
return (h("div", { style: styles, class: "Skeleton Rectangle" }));
|
|
105
105
|
}
|
|
106
106
|
renderCircle() {
|
|
107
107
|
const styles = {
|
|
108
|
-
width: `${this.size}`,
|
|
109
|
-
height: `${this.size}`,
|
|
108
|
+
width: `${this.size}px`,
|
|
109
|
+
height: `${this.size}px`,
|
|
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": "number",
|
|
158
158
|
"mutable": false,
|
|
159
159
|
"complexType": {
|
|
160
|
-
"original": "
|
|
161
|
-
"resolved": "
|
|
160
|
+
"original": "number",
|
|
161
|
+
"resolved": "number",
|
|
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"
|
|
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": "number",
|
|
177
177
|
"mutable": false,
|
|
178
178
|
"complexType": {
|
|
179
|
-
"original": "
|
|
180
|
-
"resolved": "
|
|
179
|
+
"original": "number",
|
|
180
|
+
"resolved": "number",
|
|
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"
|
|
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": "number",
|
|
330
330
|
"mutable": false,
|
|
331
331
|
"complexType": {
|
|
332
|
-
"original": "
|
|
333
|
-
"resolved": "
|
|
332
|
+
"original": "number",
|
|
333
|
+
"resolved": "number",
|
|
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"
|
|
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-2473e87c.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":[2],"height":[2],"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":[2],"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}px`,
|
|
46
|
+
height: `${this.height}px`,
|
|
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", {
|
|
54
|
+
return (h("div", { style: styles, class: "Skeleton Logo" }));
|
|
55
55
|
}
|
|
56
56
|
renderImage() {
|
|
57
57
|
const styles = {
|
|
58
|
-
width: `${this.width}`,
|
|
59
|
-
height: `${this.height}`,
|
|
58
|
+
width: `${this.width}px`,
|
|
59
|
+
height: `${this.height}px`,
|
|
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", {
|
|
67
|
+
return (h("div", { style: styles, class: "Skeleton Image" }));
|
|
68
68
|
}
|
|
69
69
|
renderTitle() {
|
|
70
70
|
const styles = {
|
|
71
|
-
width: `${this.width}`,
|
|
72
|
-
height: `${this.height}`,
|
|
71
|
+
width: `${this.width}px`,
|
|
72
|
+
height: `${this.height}px`,
|
|
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", {
|
|
80
|
+
return (h("div", { style: styles, class: "Skeleton Title" }));
|
|
81
81
|
}
|
|
82
82
|
renderText() {
|
|
83
83
|
const styles = {
|
|
84
|
-
width: `${this.width}`,
|
|
85
|
-
height: `${this.height}`,
|
|
84
|
+
width: `${this.width}px`,
|
|
85
|
+
height: `${this.height}px`,
|
|
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: "Text
|
|
93
|
+
return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { style: styles, key: index, class: "Skeleton Text" }))));
|
|
94
94
|
}
|
|
95
95
|
renderRectangle() {
|
|
96
96
|
const styles = {
|
|
97
|
-
width: `${this.width}`,
|
|
98
|
-
height: `${this.height}`,
|
|
99
|
-
'
|
|
97
|
+
width: `${this.width}px`,
|
|
98
|
+
height: `${this.height}px`,
|
|
99
|
+
'backgroud-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", {
|
|
106
|
+
return (h("div", { style: styles, class: "Skeleton Rectangle" }));
|
|
107
107
|
}
|
|
108
108
|
renderCircle() {
|
|
109
109
|
const styles = {
|
|
110
|
-
width: `${this.size}`,
|
|
111
|
-
height: `${this.size}`,
|
|
110
|
+
width: `${this.size}px`,
|
|
111
|
+
height: `${this.size}px`,
|
|
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-2473e87c.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":[2],"height":[2],"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":[2],"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
|
|
8
8
|
*/
|
|
9
|
-
width:
|
|
9
|
+
width: number;
|
|
10
10
|
/**
|
|
11
|
-
* Height of the element
|
|
11
|
+
* Height of the element
|
|
12
12
|
*/
|
|
13
|
-
height:
|
|
13
|
+
height: number;
|
|
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
|
|
44
44
|
*/
|
|
45
|
-
size:
|
|
45
|
+
size: number;
|
|
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
|
|
24
24
|
*/
|
|
25
|
-
"height":
|
|
25
|
+
"height": number;
|
|
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
|
|
56
56
|
*/
|
|
57
|
-
"size":
|
|
57
|
+
"size": number;
|
|
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
|
|
64
64
|
*/
|
|
65
|
-
"width":
|
|
65
|
+
"width": number;
|
|
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
|
|
95
95
|
*/
|
|
96
|
-
"height"?:
|
|
96
|
+
"height"?: number;
|
|
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
|
|
127
127
|
*/
|
|
128
|
-
"size"?:
|
|
128
|
+
"size"?: number;
|
|
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
|
|
135
135
|
*/
|
|
136
|
-
"width"?:
|
|
136
|
+
"width"?: number;
|
|
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-75e06c6c.js";import"./p-443310cf.js";
|
|
@@ -0,0 +1 @@
|
|
|
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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{U as ui_skeleton}from"./p-75e06c6c.js";import"./p-443310cf.js";
|
|
@@ -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-933ae591",[[0,"ui-skeleton",{structure:[1],width:[2],height:[2],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:[2],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
|
-
export{U as ui_skeleton}from"./p-fc8fe766.js";import"./p-443310cf.js";
|
|
@@ -1 +0,0 @@
|
|
|
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}
|
|
File without changes
|