@konomi-app/ui 1.0.1 → 1.2.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.
Files changed (10) hide show
  1. package/dist/loading-overlay.d.ts +9 -16
  2. package/dist/loading-overlay.js +65 -126
  3. package/dist/loading-overlay.js.map +1 -1
  4. package/dist/loading-overlay_v2.d.ts +18 -0
  5. package/dist/loading-overlay_v2.js +121 -0
  6. package/dist/loading-overlay_v2.js.map +1 -0
  7. package/dist/overlay.d.ts +20 -0
  8. package/dist/overlay.js +72 -0
  9. package/dist/overlay.js.map +1 -0
  10. package/package.json +1 -1
package/dist/loading-overlay.d.ts CHANGED
@@ -1,25 +1,18 @@
1
+ import { Overlay } from './overlay';
2
+ type Label = string | string[];
1
3
  type ConstructorProps = Readonly<Partial<{
2
- label: string | string[];
4
+ label: Label;
3
5
  progress: number;
4
6
  }>>;
5
- export declare class LoadingOverlay {
7
+ export declare class LoadingOverlay extends Overlay {
6
8
  #private;
7
9
  constructor(props?: ConstructorProps);
8
- show(): void;
9
- /**
10
- * @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。
11
- */
12
- start(): void;
13
10
  hide(): void;
14
- /**
15
- * @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。
16
- */
17
- stop(): void;
18
- set label(label: string);
11
+ set label(label: Label);
19
12
  set progress(progress: number);
20
- private render;
21
- /** JavaScript中にページを離れようとした場合にアラートを表示します */
22
- private beforeunload;
23
- private addStyle;
13
+ render(): void;
14
+ private containerStyle;
15
+ private loaderStyle;
16
+ private progressStyle;
24
17
  }
25
18
  export {};
package/dist/loading-overlay.js CHANGED
@@ -1,64 +1,36 @@
1
1
  import { css } from '@emotion/css';
2
- export class LoadingOverlay {
3
- #shown;
2
+ import { Overlay } from './overlay';
3
+ export class LoadingOverlay extends Overlay {
4
4
  #label;
5
5
  #html;
6
6
  #progress;
7
- #root;
8
7
  #loaderElement;
9
8
  #progressElement;
10
9
  #contentElement;
11
10
  constructor(props = {}) {
12
- this.#shown = false;
11
+ super();
13
12
  this.#label = props.label || '';
14
13
  this.#html = '';
15
14
  this.#progress = props.progress ?? null;
16
- const root = document.createElement('div');
17
- this.#root = root;
18
- document.body.append(root);
19
15
  const container = document.createElement('div');
20
- container.classList.add('__c');
21
- this.#root.append(container);
16
+ container.classList.add(this.containerStyle);
17
+ this._root.append(container);
22
18
  const loaderElement = document.createElement('div');
23
- loaderElement.classList.add('__l');
19
+ loaderElement.classList.add(this.loaderStyle);
24
20
  this.#loaderElement = loaderElement;
25
21
  container.append(loaderElement);
26
22
  const progressElement = document.createElement('div');
27
- progressElement.classList.add('__p');
23
+ progressElement.classList.add(this.progressStyle);
28
24
  this.#progressElement = progressElement;
29
25
  container.append(progressElement);
30
26
  const contentElement = document.createElement('div');
31
27
  this.#contentElement = contentElement;
32
28
  container.append(contentElement);
33
- this.addStyle();
34
29
  this.render();
35
30
  }
36
- show() {
37
- this.#shown = true;
38
- this.#loaderElement.style.animationName = 'spin';
39
- window.removeEventListener('beforeunload', this.beforeunload);
40
- document.body.style.overflow = 'hidden';
41
- this.render();
42
- }
43
- /**
44
- * @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。
45
- */
46
- start() {
47
- this.show();
48
- }
49
31
  hide() {
50
- this.#shown = false;
51
32
  this.#progress = 0;
52
- this.#loaderElement.style.animationName = 'none';
53
- window.removeEventListener('beforeunload', this.beforeunload);
54
- document.body.style.overflow = 'auto';
55
- this.render();
56
- }
57
- /**
58
- * @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。
59
- */
60
- stop() {
61
- this.hide();
33
+ super.hide();
62
34
  }
63
35
  set label(label) {
64
36
  this.#label = label;
@@ -69,9 +41,9 @@ export class LoadingOverlay {
69
41
  this.render();
70
42
  }
71
43
  render() {
72
- this.#root.style.opacity = this.#shown ? '1' : '0';
73
- this.#root.style.pointerEvents = this.#shown ? 'all' : 'none';
44
+ super.render();
74
45
  this.#progressElement.style.width = `${this.#progress}%`;
46
+ this.#loaderElement.style.animationName = this._shown ? 'spin' : 'none';
75
47
  if (this.#html) {
76
48
  this.#contentElement.innerHTML = this.#html;
77
49
  }
@@ -84,99 +56,66 @@ export class LoadingOverlay {
84
56
  }
85
57
  }
86
58
  }
87
- /** JavaScript中にページを離れようとした場合にアラートを表示します */
88
- beforeunload(event) {
89
- event.preventDefault();
90
- event.returnValue = '';
91
- }
92
- addStyle() {
93
- this.#root.classList.add(css `
94
- font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ',
95
- 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
96
- color: #356;
97
- font-size: 17px;
98
-
99
- overflow: hidden;
100
- background-color: #fff6;
101
- backdrop-filter: blur(10px);
102
- box-sizing: content-box;
103
-
104
- position: fixed;
105
- inset: 0;
106
- width: 100vw;
107
- height: 100vh;
108
-
109
- display: grid;
110
- place-items: center;
111
- transition: all 250ms ease;
112
- z-index: 1000;
113
- opacity: 0;
114
- transition: all 250ms ease;
115
-
116
- .__c {
117
- display: flex;
118
- flex-direction: column;
119
- align-items: center;
120
- justify-content: center;
121
- gap: 32px;
122
- padding: 32px 64px;
123
- background-color: #fffc;
124
- border-radius: 8px;
125
- box-shadow: 0 5px 24px -6px #0002;
126
- min-width: 300px;
127
- max-width: 90vw;
128
- min-height: 200px;
129
- position: relative;
130
- overflow: hidden;
131
- }
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;
132
74
 
133
- .__l {
134
- font-size: 48px;
135
- width: 1em;
136
- height: 1em;
137
- position: relative;
138
- border: 2px solid #2563ebaa;
75
+ @keyframes spin {
76
+ 0% {
77
+ transform: rotate(0deg);
139
78
  border-radius: 1em;
140
- animation-duration: 2s;
141
- animation-timing-function: ease;
142
- animation-delay: 0s;
143
- animation-iteration-count: infinite;
144
- animation-direction: normal;
145
- animation-fill-mode: none;
146
- animation-play-state: running;
147
79
  }
148
-
149
- .__p {
150
- position: absolute;
151
- bottom: 0px;
152
- left: 0;
153
- width: 0%;
154
- height: 3px;
155
- background-color: #2563eb;
156
- transition: all 250ms ease;
80
+ 20% {
81
+ transform: rotate(0deg);
157
82
  }
158
-
159
- @keyframes spin {
160
- 0% {
161
- transform: rotate(0deg);
162
- border-radius: 1em;
163
- }
164
- 20% {
165
- transform: rotate(0deg);
166
- }
167
- 30%,
168
- 60% {
169
- border-radius: 0.25em;
170
- }
171
- 70% {
172
- transform: rotate(180deg);
173
- }
174
- 100% {
175
- transform: rotate(180deg);
176
- border-radius: 1em;
177
- }
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;
178
93
  }
179
- `);
180
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
+ `;
181
120
  }
182
121
  //# sourceMappingURL=loading-overlay.js.map
package/dist/loading-overlay.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loading-overlay.js","sourceRoot":"","sources":["../src/loading-overlay.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"loading-overlay.js","sourceRoot":"","sources":["../src/loading-overlay.ts"],"names":[],"mappings":"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"}
package/dist/loading-overlay_v2.d.ts ADDED
@@ -0,0 +1,18 @@
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 {};
package/dist/loading-overlay_v2.js ADDED
@@ -0,0 +1,121 @@
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
package/dist/loading-overlay_v2.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"loading-overlay_v2.js","sourceRoot":"","sources":["../src/loading-overlay_v2.ts"],"names":[],"mappings":"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"}
package/dist/overlay.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ export declare class Overlay {
2
+ protected readonly _root: HTMLDivElement;
3
+ protected _shown: boolean;
4
+ protected _disableBeforeUnload: boolean;
5
+ constructor();
6
+ show(): void;
7
+ hide(): void;
8
+ protected render(): void;
9
+ /** JavaScript中にページを離れようとした場合にアラートを表示します */
10
+ private beforeunload;
11
+ private rootClass;
12
+ /**
13
+ * @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。
14
+ */
15
+ start(): void;
16
+ /**
17
+ * @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。
18
+ */
19
+ stop(): void;
20
+ }
package/dist/overlay.js ADDED
@@ -0,0 +1,72 @@
1
+ import { css } from '@emotion/css';
2
+ export class Overlay {
3
+ _root;
4
+ _shown;
5
+ _disableBeforeUnload;
6
+ constructor() {
7
+ this._shown = false;
8
+ this._disableBeforeUnload = false;
9
+ const root = document.createElement('div');
10
+ this._root = root;
11
+ this._root.classList.add(this.rootClass);
12
+ document.body.append(root);
13
+ this.render();
14
+ }
15
+ show() {
16
+ this._shown = true;
17
+ window.removeEventListener('beforeunload', this.beforeunload);
18
+ document.body.style.overflow = 'hidden';
19
+ this.render();
20
+ }
21
+ hide() {
22
+ this._shown = false;
23
+ window.removeEventListener('beforeunload', this.beforeunload);
24
+ document.body.style.overflow = 'auto';
25
+ this.render();
26
+ }
27
+ render() {
28
+ this._root.style.opacity = this._shown ? '1' : '0';
29
+ this._root.style.pointerEvents = this._shown ? 'all' : 'none';
30
+ }
31
+ /** JavaScript中にページを離れようとした場合にアラートを表示します */
32
+ beforeunload(event) {
33
+ event.preventDefault();
34
+ event.returnValue = '';
35
+ }
36
+ rootClass = css `
37
+ font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',
38
+ Meiryo, sans-serif;
39
+ color: #356;
40
+ font-size: 17px;
41
+
42
+ overflow: hidden;
43
+ background-color: #fff6;
44
+ backdrop-filter: blur(10px);
45
+ box-sizing: content-box;
46
+
47
+ position: fixed;
48
+ inset: 0;
49
+ width: 100vw;
50
+ height: 100vh;
51
+
52
+ display: grid;
53
+ place-items: center;
54
+ transition: all 250ms ease;
55
+ z-index: 1000;
56
+ opacity: 0;
57
+ transition: all 250ms ease;
58
+ `;
59
+ /**
60
+ * @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。
61
+ */
62
+ start() {
63
+ this.show();
64
+ }
65
+ /**
66
+ * @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。
67
+ */
68
+ stop() {
69
+ this.hide();
70
+ }
71
+ }
72
+ //# sourceMappingURL=overlay.js.map
package/dist/overlay.js.map ADDED
@@ -0,0 +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;QAE3B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,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,6 +1,6 @@
1
1
  {
2
2
  "name": "@konomi-app/ui",
3
- "version": "1.0.1",
3
+ "version": "1.2.0",
4
4
  "types": "dist/index.d.ts",
5
5
  "main": "dist/index.js",
6
6
  "author": "adachi",