@konomi-app/kintone-utilities 1.7.3 → 1.7.5
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.
|
@@ -5,8 +5,8 @@ type ConstructorProps = Readonly<Partial<{
|
|
|
5
5
|
export declare class LoadingOverlay {
|
|
6
6
|
#private;
|
|
7
7
|
constructor(props?: ConstructorProps);
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
show(): void;
|
|
9
|
+
hide(): void;
|
|
10
10
|
set label(label: string);
|
|
11
11
|
set progress(progress: number);
|
|
12
12
|
private render;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { css } from '@emotion/css';
|
|
2
|
-
const ROOT_ID = '__🐸🐇__loading-overlay';
|
|
3
2
|
export class LoadingOverlay {
|
|
4
3
|
#shown;
|
|
5
4
|
#label;
|
|
@@ -13,9 +12,7 @@ export class LoadingOverlay {
|
|
|
13
12
|
this.#label = props.label || '';
|
|
14
13
|
this.#html = '';
|
|
15
14
|
this.#progress = props.progress ?? null;
|
|
16
|
-
|
|
17
|
-
const root = document.querySelector(`#${ROOT_ID}`) || document.createElement('div');
|
|
18
|
-
root.id = ROOT_ID;
|
|
15
|
+
const root = document.createElement('div');
|
|
19
16
|
this.#root = root;
|
|
20
17
|
document.body.append(root);
|
|
21
18
|
const container = document.createElement('div');
|
|
@@ -29,15 +26,16 @@ export class LoadingOverlay {
|
|
|
29
26
|
const contentElement = document.createElement('div');
|
|
30
27
|
this.#contentElement = contentElement;
|
|
31
28
|
container.append(contentElement);
|
|
29
|
+
this.addStyle();
|
|
32
30
|
this.render();
|
|
33
31
|
}
|
|
34
|
-
|
|
32
|
+
show() {
|
|
35
33
|
this.#shown = true;
|
|
36
34
|
window.removeEventListener('beforeunload', this.beforeunload);
|
|
37
35
|
document.body.style.overflow = 'hidden';
|
|
38
36
|
this.render();
|
|
39
37
|
}
|
|
40
|
-
|
|
38
|
+
hide() {
|
|
41
39
|
this.#shown = false;
|
|
42
40
|
window.removeEventListener('beforeunload', this.beforeunload);
|
|
43
41
|
document.body.style.overflow = 'auto';
|
|
@@ -72,85 +70,83 @@ export class LoadingOverlay {
|
|
|
72
70
|
event.returnValue = '';
|
|
73
71
|
}
|
|
74
72
|
addStyle() {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
73
|
+
this.#root.classList.add(css `
|
|
74
|
+
font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ',
|
|
75
|
+
'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
|
|
76
|
+
color: #356;
|
|
77
|
+
font-size: 17px;
|
|
78
|
+
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
background-color: #fff6;
|
|
81
|
+
backdrop-filter: blur(10px);
|
|
82
|
+
box-sizing: content-box;
|
|
83
|
+
|
|
84
|
+
position: fixed;
|
|
85
|
+
inset: 0;
|
|
86
|
+
width: 100vw;
|
|
87
|
+
height: 100vh;
|
|
81
88
|
|
|
89
|
+
display: grid;
|
|
90
|
+
place-items: center;
|
|
91
|
+
transition: all 250ms ease;
|
|
92
|
+
z-index: 1000;
|
|
93
|
+
opacity: 0;
|
|
94
|
+
transition: all 250ms ease;
|
|
95
|
+
|
|
96
|
+
.__c {
|
|
97
|
+
display: flex;
|
|
98
|
+
flex-direction: column;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
gap: 32px;
|
|
102
|
+
padding: 32px 64px;
|
|
103
|
+
background-color: #fffc;
|
|
104
|
+
border-radius: 8px;
|
|
105
|
+
box-shadow: 0 5px 24px -6px #0002;
|
|
106
|
+
min-width: 300px;
|
|
107
|
+
max-width: 90vw;
|
|
108
|
+
min-height: 200px;
|
|
109
|
+
position: relative;
|
|
82
110
|
overflow: hidden;
|
|
83
|
-
|
|
84
|
-
backdrop-filter: blur(10px);
|
|
85
|
-
box-sizing: content-box;
|
|
111
|
+
}
|
|
86
112
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
width:
|
|
90
|
-
height:
|
|
113
|
+
.__l {
|
|
114
|
+
font-size: 48px;
|
|
115
|
+
width: 1em;
|
|
116
|
+
height: 1em;
|
|
117
|
+
position: relative;
|
|
118
|
+
border: 2px solid #2563ebaa;
|
|
119
|
+
animation: spin 2s infinite ease;
|
|
120
|
+
}
|
|
91
121
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
122
|
+
.__p {
|
|
123
|
+
position: absolute;
|
|
124
|
+
bottom: 0px;
|
|
125
|
+
left: 0;
|
|
126
|
+
width: 60%;
|
|
127
|
+
height: 3px;
|
|
128
|
+
background-color: #2563eb;
|
|
97
129
|
transition: all 250ms ease;
|
|
130
|
+
}
|
|
98
131
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
justify-content: center;
|
|
104
|
-
gap: 32px;
|
|
105
|
-
padding: 32px 64px;
|
|
106
|
-
background-color: #fffc;
|
|
107
|
-
border-radius: 8px;
|
|
108
|
-
box-shadow: 0 5px 24px -6px #0002;
|
|
109
|
-
min-width: 300px;
|
|
110
|
-
max-width: 90vw;
|
|
111
|
-
min-height: 200px;
|
|
112
|
-
position: relative;
|
|
113
|
-
overflow: hidden;
|
|
132
|
+
@keyframes spin {
|
|
133
|
+
0% {
|
|
134
|
+
transform: rotate(0deg);
|
|
135
|
+
border-radius: 1em;
|
|
114
136
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
font-size: 48px;
|
|
118
|
-
width: 1em;
|
|
119
|
-
height: 1em;
|
|
120
|
-
position: relative;
|
|
121
|
-
border: 2px solid #2563ebaa;
|
|
122
|
-
animation: spin 2s infinite ease;
|
|
137
|
+
20% {
|
|
138
|
+
transform: rotate(0deg);
|
|
123
139
|
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
bottom: 0px;
|
|
128
|
-
left: 0;
|
|
129
|
-
width: 60%;
|
|
130
|
-
height: 3px;
|
|
131
|
-
background-color: #2563eb;
|
|
132
|
-
transition: all 250ms ease;
|
|
140
|
+
30%,
|
|
141
|
+
60% {
|
|
142
|
+
border-radius: 0.25em;
|
|
133
143
|
}
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
20% {
|
|
141
|
-
transform: rotate(0deg);
|
|
142
|
-
}
|
|
143
|
-
30%,
|
|
144
|
-
60% {
|
|
145
|
-
border-radius: 0.25em;
|
|
146
|
-
}
|
|
147
|
-
70% {
|
|
148
|
-
transform: rotate(180deg);
|
|
149
|
-
}
|
|
150
|
-
100% {
|
|
151
|
-
transform: rotate(180deg);
|
|
152
|
-
border-radius: 1em;
|
|
153
|
-
}
|
|
144
|
+
70% {
|
|
145
|
+
transform: rotate(180deg);
|
|
146
|
+
}
|
|
147
|
+
100% {
|
|
148
|
+
transform: rotate(180deg);
|
|
149
|
+
border-radius: 1em;
|
|
154
150
|
}
|
|
155
151
|
}
|
|
156
152
|
`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAInC,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konomi-app/kintone-utilities",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.5",
|
|
4
4
|
"types": "dist/index.d.ts",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"repository": "https://github.com/local-bias/kintone-utilities.git",
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
"license": "MIT",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"build": "tsc",
|
|
11
|
-
"prepare": "yarn run build"
|
|
11
|
+
"prepare": "yarn run build",
|
|
12
|
+
"play": "cd playground && yarn run dev"
|
|
12
13
|
},
|
|
13
14
|
"dependencies": {
|
|
14
15
|
"@emotion/css": "^11.10.6",
|