@konomi-app/ui 2.2.1 → 2.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/loading-overlay/index.d.ts +1 -0
- package/dist/loading-overlay/index.js +5 -3
- package/dist/loading-overlay/index.js.map +1 -1
- package/dist/loading-overlay/style.js +2 -1
- package/dist/loading-overlay/style.js.map +1 -1
- package/dist/overlay/index.d.ts +2 -0
- package/dist/overlay/index.js +7 -5
- package/dist/overlay/index.js.map +1 -1
- package/dist/overlay/style.js +3 -2
- package/dist/overlay/style.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ type ConstructorProps = Readonly<Partial<{
|
|
|
4
4
|
label: Label;
|
|
5
5
|
progress: number;
|
|
6
6
|
}>>;
|
|
7
|
+
export declare const ATTRIBUTE_ANIMATION = "data-animation";
|
|
7
8
|
export declare class LoadingOverlay extends Overlay {
|
|
8
9
|
#private;
|
|
9
10
|
protected readonly _loaderElement: HTMLDivElement;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Overlay } from '../overlay';
|
|
2
2
|
import { containerStyle, loaderStyle, progressStyle } from './style';
|
|
3
|
+
export const ATTRIBUTE_ANIMATION = 'data-animation';
|
|
3
4
|
export class LoadingOverlay extends Overlay {
|
|
4
5
|
#label;
|
|
5
6
|
#html;
|
|
@@ -30,14 +31,15 @@ export class LoadingOverlay extends Overlay {
|
|
|
30
31
|
this.render();
|
|
31
32
|
}
|
|
32
33
|
show() {
|
|
33
|
-
|
|
34
|
+
super.show();
|
|
35
|
+
this._loaderElement.setAttribute(ATTRIBUTE_ANIMATION, '');
|
|
34
36
|
}
|
|
35
37
|
hide() {
|
|
36
|
-
|
|
38
|
+
super.hide();
|
|
39
|
+
this._loaderElement.removeAttribute(ATTRIBUTE_ANIMATION);
|
|
37
40
|
this.#progress = 0;
|
|
38
41
|
this.#html = '';
|
|
39
42
|
this.#label = '';
|
|
40
|
-
super.hide();
|
|
41
43
|
}
|
|
42
44
|
set label(label) {
|
|
43
45
|
this.#label = label;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAKrE,MAAM,OAAO,cAAe,SAAQ,OAAO;IACzC,MAAM,CAAQ;IACd,KAAK,CAAS;IACd,SAAS,CAAgB;IAEN,cAAc,CAAiB;IAC/B,gBAAgB,CAAiB;IACjC,eAAe,CAAiB;IAEnD,YAAmB,QAA0B,EAAE;QAC7C,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QAChC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC;QAExC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAE7B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,aAAa,CAAC,SAAS,GAAG,wBAAwB,CAAC;QACnD,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QAEhC,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtD,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAC7C,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAElC,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC;QACtC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QAEjC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEQ,IAAI;QACX,IAAI,CAAC,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { css } from '@emotion/css';
|
|
2
|
+
import { ATTRIBUTE_ANIMATION } from '.';
|
|
2
3
|
export const containerStyle = css `
|
|
3
4
|
display: flex;
|
|
4
5
|
flex-direction: column;
|
|
@@ -31,7 +32,7 @@ export const loaderStyle = css `
|
|
|
31
32
|
position: relative;
|
|
32
33
|
|
|
33
34
|
animation: none;
|
|
34
|
-
&[
|
|
35
|
+
&[${ATTRIBUTE_ANIMATION}] {
|
|
35
36
|
animation: rotate 1.2s infinite linear;
|
|
36
37
|
}
|
|
37
38
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/loading-overlay/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/loading-overlay/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,GAAG,CAAC;AAExC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBhC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;MASxB,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;CAQ/B,CAAC"}
|
package/dist/overlay/index.d.ts
CHANGED
package/dist/overlay/index.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { getBodyStyle, getRootStyle } from './style';
|
|
2
|
+
export const ATTRIBUTE_KEY = 'data-konomi-ui-overlay';
|
|
3
|
+
export const ATTRIBUTE_SHOWN = 'data-shown';
|
|
2
4
|
export class Overlay {
|
|
3
5
|
_root;
|
|
4
6
|
_shown;
|
|
@@ -10,20 +12,20 @@ export class Overlay {
|
|
|
10
12
|
this._root = root;
|
|
11
13
|
this._root.classList.add(getRootStyle());
|
|
12
14
|
document.body.classList.add(getBodyStyle());
|
|
13
|
-
this._root.
|
|
15
|
+
this._root.setAttribute(ATTRIBUTE_KEY, '');
|
|
14
16
|
document.body.append(root);
|
|
15
17
|
}
|
|
16
18
|
show() {
|
|
17
19
|
this._shown = true;
|
|
18
|
-
this._root.
|
|
19
|
-
document.body.
|
|
20
|
+
this._root.setAttribute(ATTRIBUTE_SHOWN, '');
|
|
21
|
+
document.body.setAttribute(ATTRIBUTE_KEY, '');
|
|
20
22
|
window.addEventListener('beforeunload', this.beforeunload);
|
|
21
23
|
this.render();
|
|
22
24
|
}
|
|
23
25
|
hide() {
|
|
24
26
|
this._shown = false;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
this._root.removeAttribute(ATTRIBUTE_SHOWN);
|
|
28
|
+
document.body.removeAttribute(ATTRIBUTE_KEY);
|
|
27
29
|
window.removeEventListener('beforeunload', this.beforeunload);
|
|
28
30
|
this.render();
|
|
29
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErD,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,YAAY,EAAE,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,CAAC,MAAM,aAAa,GAAG,wBAAwB,CAAC;AACtD,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC;AAE5C,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,YAAY,EAAE,CAAC,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC;QAC5C,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAC3C,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAC7C,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAC9C,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3D,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC5C,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;QAC7C,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9D,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAES,MAAM,KAAU,CAAC;IAE3B,2CAA2C;IACnC,YAAY,CAAC,KAAwB;QAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC;IACzB,CAAC;IAED,wDAAwD;IACjD,KAAK;QACV,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IACD,wDAAwD;IACjD,IAAI;QACT,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;CACF"}
|
package/dist/overlay/style.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { css } from '@emotion/css';
|
|
2
|
+
import { ATTRIBUTE_KEY, ATTRIBUTE_SHOWN } from '.';
|
|
2
3
|
export const getBodyStyle = () => css `
|
|
3
4
|
overflow: visible;
|
|
4
|
-
&[
|
|
5
|
+
&[${ATTRIBUTE_KEY}] {
|
|
5
6
|
overflow: hidden;
|
|
6
7
|
}
|
|
7
8
|
`;
|
|
@@ -35,7 +36,7 @@ export const getRootStyle = () => css `
|
|
|
35
36
|
|
|
36
37
|
opacity: 0;
|
|
37
38
|
pointer-events: none;
|
|
38
|
-
&[
|
|
39
|
+
&[${ATTRIBUTE_SHOWN}] {
|
|
39
40
|
opacity: 1;
|
|
40
41
|
pointer-events: all;
|
|
41
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,GAAG,CAAC;AAEnD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,GAAG,CAAA;;MAE/B,aAAa;;;CAGlB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8B/B,eAAe;;;;CAIpB,CAAC"}
|