@konomi-app/ui 1.2.1 → 1.2.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/overlay.js
CHANGED
package/dist/overlay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,OAAO,OAAO;IACC,KAAK,CAAiB;IAC/B,MAAM,CAAU;IAChB,oBAAoB,CAAU;IAExC;QACE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAElC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,OAAO,OAAO;IACC,KAAK,CAAiB;IAC/B,MAAM,CAAU;IAChB,oBAAoB,CAAU;IAExC;QACE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAElC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACxC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QACtC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAES,MAAM;QACd,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QACnD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAChE,CAAC;IAED,2CAA2C;IACnC,YAAY,CAAC,KAAwB;QAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC;IACzB,CAAC;IAEO,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBtB,CAAC;IAEF;;OAEG;IACI,KAAK;QACV,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IACD;;OAEG;IACI,IAAI;QACT,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;CACF"}
|
package/package.json
CHANGED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Overlay } from './overlay';
|
|
2
|
-
type Label = string | string[];
|
|
3
|
-
type ConstructorProps = Readonly<Partial<{
|
|
4
|
-
label: Label;
|
|
5
|
-
progress: number;
|
|
6
|
-
}>>;
|
|
7
|
-
export declare class LoadingOverlay extends Overlay {
|
|
8
|
-
#private;
|
|
9
|
-
constructor(props?: ConstructorProps);
|
|
10
|
-
hide(): void;
|
|
11
|
-
set label(label: Label);
|
|
12
|
-
set progress(progress: number);
|
|
13
|
-
render(): void;
|
|
14
|
-
private containerStyle;
|
|
15
|
-
private loaderStyle;
|
|
16
|
-
private progressStyle;
|
|
17
|
-
}
|
|
18
|
-
export {};
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import { css } from '@emotion/css';
|
|
2
|
-
import { Overlay } from './overlay';
|
|
3
|
-
export class LoadingOverlay extends Overlay {
|
|
4
|
-
#label;
|
|
5
|
-
#html;
|
|
6
|
-
#progress;
|
|
7
|
-
#loaderElement;
|
|
8
|
-
#progressElement;
|
|
9
|
-
#contentElement;
|
|
10
|
-
constructor(props = {}) {
|
|
11
|
-
super();
|
|
12
|
-
this.#label = props.label || '';
|
|
13
|
-
this.#html = '';
|
|
14
|
-
this.#progress = props.progress ?? null;
|
|
15
|
-
const container = document.createElement('div');
|
|
16
|
-
container.classList.add(this.containerStyle);
|
|
17
|
-
this._root.append(container);
|
|
18
|
-
const loaderElement = document.createElement('div');
|
|
19
|
-
loaderElement.classList.add(this.loaderStyle);
|
|
20
|
-
this.#loaderElement = loaderElement;
|
|
21
|
-
container.append(loaderElement);
|
|
22
|
-
const progressElement = document.createElement('div');
|
|
23
|
-
progressElement.classList.add(this.progressStyle);
|
|
24
|
-
this.#progressElement = progressElement;
|
|
25
|
-
container.append(progressElement);
|
|
26
|
-
const contentElement = document.createElement('div');
|
|
27
|
-
this.#contentElement = contentElement;
|
|
28
|
-
container.append(contentElement);
|
|
29
|
-
this.render();
|
|
30
|
-
}
|
|
31
|
-
hide() {
|
|
32
|
-
this.#progress = 0;
|
|
33
|
-
super.hide();
|
|
34
|
-
}
|
|
35
|
-
set label(label) {
|
|
36
|
-
this.#label = label;
|
|
37
|
-
this.render();
|
|
38
|
-
}
|
|
39
|
-
set progress(progress) {
|
|
40
|
-
this.#progress = progress;
|
|
41
|
-
this.render();
|
|
42
|
-
}
|
|
43
|
-
render() {
|
|
44
|
-
super.render();
|
|
45
|
-
this.#progressElement.style.width = `${this.#progress}%`;
|
|
46
|
-
this.#loaderElement.style.animationName = this._shown ? 'spin' : 'none';
|
|
47
|
-
if (this.#html) {
|
|
48
|
-
this.#contentElement.innerHTML = this.#html;
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
if (this.#label instanceof Array) {
|
|
52
|
-
this.#contentElement.innerHTML = `<div>${this.#label.join('</div><div>')}</div>`;
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
this.#contentElement.innerText = this.#label;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
containerStyle = css `
|
|
60
|
-
display: flex;
|
|
61
|
-
flex-direction: column;
|
|
62
|
-
align-items: center;
|
|
63
|
-
justify-content: center;
|
|
64
|
-
gap: 32px;
|
|
65
|
-
padding: 32px 64px;
|
|
66
|
-
background-color: #fffc;
|
|
67
|
-
border-radius: 8px;
|
|
68
|
-
box-shadow: 0 5px 24px -6px #0002;
|
|
69
|
-
min-width: 300px;
|
|
70
|
-
max-width: 90vw;
|
|
71
|
-
min-height: 200px;
|
|
72
|
-
position: relative;
|
|
73
|
-
overflow: hidden;
|
|
74
|
-
|
|
75
|
-
@keyframes spin {
|
|
76
|
-
0% {
|
|
77
|
-
transform: rotate(0deg);
|
|
78
|
-
border-radius: 1em;
|
|
79
|
-
}
|
|
80
|
-
20% {
|
|
81
|
-
transform: rotate(0deg);
|
|
82
|
-
}
|
|
83
|
-
30%,
|
|
84
|
-
60% {
|
|
85
|
-
border-radius: 0.25em;
|
|
86
|
-
}
|
|
87
|
-
70% {
|
|
88
|
-
transform: rotate(180deg);
|
|
89
|
-
}
|
|
90
|
-
100% {
|
|
91
|
-
transform: rotate(180deg);
|
|
92
|
-
border-radius: 1em;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
`;
|
|
96
|
-
loaderStyle = css `
|
|
97
|
-
font-size: 48px;
|
|
98
|
-
width: 1em;
|
|
99
|
-
height: 1em;
|
|
100
|
-
position: relative;
|
|
101
|
-
border: 2px solid #2563ebaa;
|
|
102
|
-
border-radius: 1em;
|
|
103
|
-
animation-duration: 2s;
|
|
104
|
-
animation-timing-function: ease;
|
|
105
|
-
animation-delay: 0s;
|
|
106
|
-
animation-iteration-count: infinite;
|
|
107
|
-
animation-direction: normal;
|
|
108
|
-
animation-fill-mode: none;
|
|
109
|
-
animation-play-state: running;
|
|
110
|
-
`;
|
|
111
|
-
progressStyle = css `
|
|
112
|
-
position: absolute;
|
|
113
|
-
bottom: 0px;
|
|
114
|
-
left: 0;
|
|
115
|
-
width: 0%;
|
|
116
|
-
height: 3px;
|
|
117
|
-
background-color: #2563eb;
|
|
118
|
-
transition: all 250ms ease;
|
|
119
|
-
`;
|
|
120
|
-
}
|
|
121
|
-
//# sourceMappingURL=loading-overlay_v2.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"loading-overlay_v2.js","sourceRoot":"","sources":["../src/loading-overlay_v2.ts"],"names":[],"mappings":"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"}
|