@konomi-app/ui 1.3.2 → 1.5.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/alert.d.ts +3 -0
- package/dist/alert.js +4 -0
- package/dist/alert.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/modal.d.ts +21 -0
- package/dist/modal.js +139 -0
- package/dist/modal.js.map +1 -0
- package/dist/overlay.d.ts +1 -0
- package/dist/overlay.js +7 -0
- package/dist/overlay.js.map +1 -1
- package/package.json +1 -1
package/dist/alert.d.ts
ADDED
package/dist/alert.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.js","sourceRoot":"","sources":["../src/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,OAAO,KAAM,SAAQ,OAAO;CAAG"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC"}
|
package/dist/modal.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Overlay } from './overlay';
|
|
2
|
+
type Mode = 'alert' | 'prompt' | 'loading' | 'custom';
|
|
3
|
+
type Label = string | string[];
|
|
4
|
+
type ConstructorProps = Readonly<Partial<{
|
|
5
|
+
initialMode: Mode;
|
|
6
|
+
}>>;
|
|
7
|
+
type LoadingProps = {
|
|
8
|
+
label: Label;
|
|
9
|
+
html: string;
|
|
10
|
+
progress: number | null;
|
|
11
|
+
};
|
|
12
|
+
export declare class Modal extends Overlay {
|
|
13
|
+
#private;
|
|
14
|
+
constructor(props?: ConstructorProps);
|
|
15
|
+
hide(): void;
|
|
16
|
+
set loading(props: Partial<LoadingProps>);
|
|
17
|
+
changeMode(mode: Mode): void;
|
|
18
|
+
render(): void;
|
|
19
|
+
private containerStyle;
|
|
20
|
+
}
|
|
21
|
+
export {};
|
package/dist/modal.js
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { css } from '@emotion/css';
|
|
2
|
+
import { Overlay } from './overlay';
|
|
3
|
+
export class Modal extends Overlay {
|
|
4
|
+
#mode;
|
|
5
|
+
#containerElement;
|
|
6
|
+
#loadingProps;
|
|
7
|
+
constructor(props = {}) {
|
|
8
|
+
super();
|
|
9
|
+
const { initialMode = 'loading' } = props;
|
|
10
|
+
this.#mode = initialMode;
|
|
11
|
+
this.#loadingProps = {
|
|
12
|
+
label: '',
|
|
13
|
+
html: '',
|
|
14
|
+
progress: null,
|
|
15
|
+
};
|
|
16
|
+
const container = document.createElement('div');
|
|
17
|
+
this.#containerElement = container;
|
|
18
|
+
container.classList.add(this.containerStyle);
|
|
19
|
+
this._root.append(container);
|
|
20
|
+
this.render();
|
|
21
|
+
}
|
|
22
|
+
hide() {
|
|
23
|
+
this.#loadingProps = {
|
|
24
|
+
label: '',
|
|
25
|
+
html: '',
|
|
26
|
+
progress: null,
|
|
27
|
+
};
|
|
28
|
+
super.hide();
|
|
29
|
+
}
|
|
30
|
+
set loading(props) {
|
|
31
|
+
this.#mode = 'loading';
|
|
32
|
+
this.#loadingProps = { ...this.#loadingProps, ...props };
|
|
33
|
+
this.render();
|
|
34
|
+
}
|
|
35
|
+
changeMode(mode) {
|
|
36
|
+
this.#mode = mode;
|
|
37
|
+
this.render();
|
|
38
|
+
}
|
|
39
|
+
render() {
|
|
40
|
+
super.render();
|
|
41
|
+
if (this.#mode === 'loading') {
|
|
42
|
+
const { label, html, progress } = this.#loadingProps;
|
|
43
|
+
this.#containerElement.innerHTML = `
|
|
44
|
+
<div>
|
|
45
|
+
<div class="__l">${html || typeof label === 'string' ? label : label.join('<br />')}</div>
|
|
46
|
+
<div class="__p" style="width: ${progress ?? 0}%"></div>
|
|
47
|
+
</div>
|
|
48
|
+
`;
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
containerStyle = css `
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
gap: 32px;
|
|
59
|
+
padding: 32px 64px;
|
|
60
|
+
background-color: #fffc;
|
|
61
|
+
border-radius: 8px;
|
|
62
|
+
box-shadow: 0 5px 24px -6px #0002;
|
|
63
|
+
min-width: 400px;
|
|
64
|
+
max-width: 90vw;
|
|
65
|
+
min-height: 300px;
|
|
66
|
+
position: relative;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
transition: all 250ms ease;
|
|
69
|
+
|
|
70
|
+
@keyframes spin {
|
|
71
|
+
0% {
|
|
72
|
+
transform: rotate(0deg);
|
|
73
|
+
border-radius: 1em;
|
|
74
|
+
}
|
|
75
|
+
20% {
|
|
76
|
+
transform: rotate(0deg);
|
|
77
|
+
}
|
|
78
|
+
30%,
|
|
79
|
+
60% {
|
|
80
|
+
border-radius: 0.25em;
|
|
81
|
+
}
|
|
82
|
+
70% {
|
|
83
|
+
transform: rotate(180deg);
|
|
84
|
+
}
|
|
85
|
+
100% {
|
|
86
|
+
transform: rotate(180deg);
|
|
87
|
+
border-radius: 1em;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@keyframes show {
|
|
92
|
+
0% {
|
|
93
|
+
opacity: 0;
|
|
94
|
+
transform: scale(0.9);
|
|
95
|
+
}
|
|
96
|
+
100% {
|
|
97
|
+
opacity: 1;
|
|
98
|
+
transform: scale(1);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
@keyframes hide {
|
|
102
|
+
0% {
|
|
103
|
+
opacity: 1;
|
|
104
|
+
transform: scale(1);
|
|
105
|
+
}
|
|
106
|
+
100% {
|
|
107
|
+
opacity: 0;
|
|
108
|
+
transform: scale(0.9);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.__l {
|
|
113
|
+
font-size: 48px;
|
|
114
|
+
width: 1em;
|
|
115
|
+
height: 1em;
|
|
116
|
+
position: relative;
|
|
117
|
+
border: 2px solid #2563ebaa;
|
|
118
|
+
border-radius: 1em;
|
|
119
|
+
animation-duration: 2s;
|
|
120
|
+
animation-timing-function: ease;
|
|
121
|
+
animation-delay: 0s;
|
|
122
|
+
animation-iteration-count: infinite;
|
|
123
|
+
animation-direction: normal;
|
|
124
|
+
animation-fill-mode: none;
|
|
125
|
+
animation-play-state: running;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.__p {
|
|
129
|
+
position: absolute;
|
|
130
|
+
bottom: 0px;
|
|
131
|
+
left: 0;
|
|
132
|
+
width: 0%;
|
|
133
|
+
height: 3px;
|
|
134
|
+
background-color: #2563eb;
|
|
135
|
+
transition: all 250ms ease;
|
|
136
|
+
}
|
|
137
|
+
`;
|
|
138
|
+
}
|
|
139
|
+
//# sourceMappingURL=modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.js","sourceRoot":"","sources":["../src/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAOpC,MAAM,OAAO,KAAM,SAAQ,OAAO;IAChC,KAAK,CAAO;IACZ,iBAAiB,CAAiB;IAClC,aAAa,CAAe;IAE5B,YAAmB,QAA0B,EAAE;QAC7C,KAAK,EAAE,CAAC;QAER,MAAM,EAAE,WAAW,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;QAE1C,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QACzB,IAAI,CAAC,aAAa,GAAG;YACnB,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,IAAI;SACf,CAAC;QAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;QACnC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC7C,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAE7B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEQ,IAAI;QACX,IAAI,CAAC,aAAa,GAAG;YACnB,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,IAAI;SACf,CAAC;QACF,KAAK,CAAC,IAAI,EAAE,CAAC;IACf,CAAC;IAED,IAAW,OAAO,CAAC,KAA4B;QAC7C,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,KAAK,EAAE,CAAC;QACzD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,UAAU,CAAC,IAAU;QAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEQ,MAAM;QACb,KAAK,CAAC,MAAM,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC;YACrD,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG;;2BAEd,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC;2CAChD,QAAQ,IAAI,CAAC;;OAEjD,CAAC;SACH;aAAM;SACN;IACH,CAAC;IAEO,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoF3B,CAAC;CACH"}
|
package/dist/overlay.d.ts
CHANGED
package/dist/overlay.js
CHANGED
|
@@ -68,4 +68,11 @@ export class Overlay {
|
|
|
68
68
|
this.hide();
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
+
let cachedLoadingOverlay = null;
|
|
72
|
+
export const getLoadingOverlay = () => {
|
|
73
|
+
if (cachedLoadingOverlay === null) {
|
|
74
|
+
cachedLoadingOverlay = new Overlay();
|
|
75
|
+
}
|
|
76
|
+
return cachedLoadingOverlay;
|
|
77
|
+
};
|
|
71
78
|
//# sourceMappingURL=overlay.js.map
|
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;IAC7B,CAAC;IAEM,IAAI;QACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3D,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"}
|
|
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,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3D,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;AAED,IAAI,oBAAoB,GAAmB,IAAI,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAY,EAAE;IAC7C,IAAI,oBAAoB,KAAK,IAAI,EAAE;QACjC,oBAAoB,GAAG,IAAI,OAAO,EAAE,CAAC;KACtC;IACD,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC"}
|