@konomi-app/ui 1.7.0 → 2.0.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/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from './loading-overlay';
2
2
  export * from './task-list-overlay';
3
+ export * from './modal';
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './loading-overlay';
2
2
  export * from './task-list-overlay';
3
+ export * from './modal';
3
4
  //# sourceMappingURL=index.js.map
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;AAClC,cAAc,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}
@@ -1,4 +1,4 @@
1
- import { Overlay } from './overlay';
1
+ import { Overlay } from '../overlay';
2
2
  type Label = string | string[];
3
3
  type ConstructorProps = Readonly<Partial<{
4
4
  label: Label;
@@ -15,8 +15,5 @@ export declare class LoadingOverlay extends Overlay {
15
15
  set html(html: string);
16
16
  set progress(progress: number);
17
17
  render(): void;
18
- private containerStyle;
19
- private loaderStyle;
20
- private progressStyle;
21
18
  }
22
19
  export {};
@@ -1,5 +1,5 @@
1
- import { css } from '@emotion/css';
2
- import { Overlay } from './overlay';
1
+ import { Overlay } from '../overlay';
2
+ import { containerStyle, loaderStyle, progressStyle } from './style';
3
3
  export class LoadingOverlay extends Overlay {
4
4
  #label;
5
5
  #html;
@@ -13,15 +13,15 @@ export class LoadingOverlay extends Overlay {
13
13
  this.#html = '';
14
14
  this.#progress = props.progress ?? null;
15
15
  const container = document.createElement('div');
16
- container.classList.add(this.containerStyle);
16
+ container.classList.add(containerStyle);
17
17
  this._root.append(container);
18
18
  const loaderElement = document.createElement('div');
19
19
  loaderElement.innerHTML = '<div><div></div></div>';
20
- loaderElement.classList.add(this.loaderStyle);
20
+ loaderElement.classList.add(loaderStyle);
21
21
  this._loaderElement = loaderElement;
22
22
  container.append(loaderElement);
23
23
  const progressElement = document.createElement('div');
24
- progressElement.classList.add(this.progressStyle);
24
+ progressElement.classList.add(progressStyle);
25
25
  this._progressElement = progressElement;
26
26
  container.append(progressElement);
27
27
  const contentElement = document.createElement('div');
@@ -63,67 +63,5 @@ export class LoadingOverlay extends Overlay {
63
63
  }
64
64
  }
65
65
  }
66
- containerStyle = css `
67
- display: flex;
68
- flex-direction: column;
69
- align-items: center;
70
- justify-content: center;
71
- gap: 32px;
72
- padding: 32px 64px;
73
- background-color: #fffc;
74
- border-radius: 8px;
75
- box-shadow: 0 5px 24px -6px #0002;
76
- width: 300px;
77
- max-width: 90vw;
78
- min-height: 200px;
79
- position: relative;
80
- overflow: hidden;
81
- transition: all 250ms ease;
82
- `;
83
- loaderStyle = css `
84
- font-size: 60px;
85
- width: 1em;
86
- height: 1em;
87
- border-radius: 50%;
88
- box-shadow: inset 0 0 0 1px #3b82f633;
89
- position: relative;
90
- > div {
91
- position: absolute;
92
- left: 50%;
93
- top: 50%;
94
- width: 0.5em;
95
- height: 1em;
96
- margin-left: -0.5em;
97
- margin-top: -0.5em;
98
- overflow: hidden;
99
- transform-origin: 0.5em 0.5em;
100
- mask-image: linear-gradient(top, #000f, #0000);
101
- -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
102
-
103
- > div {
104
- width: 1em;
105
- height: 1em;
106
- border-radius: 50%;
107
- box-shadow: inset 0 0 0 1px #3b82f6;
108
- }
109
- }
110
- @keyframes rotate {
111
- 0% {
112
- transform: rotate(0deg);
113
- }
114
- 100% {
115
- transform: rotate(360deg);
116
- }
117
- }
118
- `;
119
- progressStyle = css `
120
- position: absolute;
121
- bottom: 0px;
122
- left: 0;
123
- width: 0%;
124
- height: 2px;
125
- background-color: #2563eb;
126
- transition: all 350ms ease;
127
- `;
128
66
  }
129
- //# sourceMappingURL=loading-overlay.js.map
67
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/loading-overlay/index.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ export declare const containerStyle: string;
2
+ export declare const loaderStyle: string;
3
+ export declare const progressStyle: string;
@@ -0,0 +1,70 @@
1
+ import { css } from '@emotion/css';
2
+ export const containerStyle = css `
3
+ display: flex;
4
+ flex-direction: column;
5
+ align-items: center;
6
+ justify-content: center;
7
+ gap: 32px;
8
+ padding: 24px;
9
+ background-color: #fff;
10
+ border-radius: 0;
11
+ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
12
+ border: 1px solid #f3f4f6;
13
+ min-height: 200px;
14
+ position: relative;
15
+ overflow: hidden;
16
+ transition: all 250ms ease;
17
+
18
+ @media (min-width: 640px) {
19
+ width: 400px;
20
+ max-width: 90vw;
21
+ border-radius: 4px;
22
+ padding: 32px;
23
+ }
24
+ `;
25
+ export const loaderStyle = css `
26
+ font-size: 60px;
27
+ width: 1em;
28
+ height: 1em;
29
+ border-radius: 50%;
30
+ box-shadow: inset 0 0 0 1px #3b82f633;
31
+ position: relative;
32
+ > div {
33
+ position: absolute;
34
+ left: 50%;
35
+ top: 50%;
36
+ width: 0.5em;
37
+ height: 1em;
38
+ margin-left: -0.5em;
39
+ margin-top: -0.5em;
40
+ overflow: hidden;
41
+ transform-origin: 0.5em 0.5em;
42
+ mask-image: linear-gradient(top, #000f, #0000);
43
+ -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
44
+
45
+ > div {
46
+ width: 1em;
47
+ height: 1em;
48
+ border-radius: 50%;
49
+ box-shadow: inset 0 0 0 1px #3b82f6;
50
+ }
51
+ }
52
+ @keyframes rotate {
53
+ 0% {
54
+ transform: rotate(0deg);
55
+ }
56
+ 100% {
57
+ transform: rotate(360deg);
58
+ }
59
+ }
60
+ `;
61
+ export const progressStyle = css `
62
+ position: absolute;
63
+ bottom: 0px;
64
+ left: 0;
65
+ width: 0%;
66
+ height: 2px;
67
+ background-color: #2563eb;
68
+ transition: all 350ms ease;
69
+ `;
70
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/loading-overlay/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBhC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC7B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;CAQ/B,CAAC"}
@@ -1,22 +1,29 @@
1
- import { Overlay } from './overlay';
1
+ import { Overlay } from '../overlay';
2
2
  type Label = string | string[];
3
3
  type ConstructorProps = Readonly<Partial<{
4
4
  label: Label;
5
5
  progress: number;
6
6
  }>>;
7
- export declare class LoadingOverlay extends Overlay {
7
+ export declare class Modal extends Overlay {
8
8
  #private;
9
9
  protected readonly _iconElement: HTMLDivElement;
10
+ protected readonly _titleElement: HTMLDivElement;
11
+ protected readonly _loaderElement: HTMLDivElement;
10
12
  protected readonly _progressElement: HTMLDivElement;
11
13
  protected readonly _contentElement: HTMLDivElement;
14
+ protected readonly _actionsElement: HTMLDivElement;
12
15
  constructor(props?: ConstructorProps);
16
+ alert(params: {
17
+ title?: string;
18
+ text?: string;
19
+ icon?: string;
20
+ }): void;
21
+ loading(): void;
13
22
  hide(): void;
14
23
  set label(label: Label);
15
24
  set html(html: string);
16
25
  set progress(progress: number);
26
+ private changeState;
17
27
  render(): void;
18
- private containerStyle;
19
- private loaderStyle;
20
- private progressStyle;
21
28
  }
22
29
  export {};
@@ -0,0 +1,124 @@
1
+ import { Overlay } from '../overlay';
2
+ import { actionsStyle, containerStyle, iconStyle, loaderStyle, progressStyle, titleStyle, } from './style';
3
+ export class Modal extends Overlay {
4
+ #title;
5
+ #html;
6
+ #label;
7
+ #progress;
8
+ #state;
9
+ _iconElement;
10
+ _titleElement;
11
+ _loaderElement;
12
+ _progressElement;
13
+ _contentElement;
14
+ _actionsElement;
15
+ constructor(props = {}) {
16
+ super();
17
+ this.#title = '';
18
+ this.#html = '';
19
+ this.#label = props.label ?? '';
20
+ this.#progress = props.progress ?? null;
21
+ this.#state = 'hidden';
22
+ const container = document.createElement('div');
23
+ container.classList.add(containerStyle);
24
+ this._root.append(container);
25
+ const iconElement = document.createElement('div');
26
+ iconElement.classList.add(iconStyle);
27
+ this._iconElement = iconElement;
28
+ container.append(iconElement);
29
+ const titleElement = document.createElement('div');
30
+ titleElement.classList.add(titleStyle);
31
+ this._titleElement = titleElement;
32
+ container.append(titleElement);
33
+ const loaderElement = document.createElement('div');
34
+ loaderElement.innerHTML = '<div><div></div></div>';
35
+ loaderElement.classList.add(loaderStyle);
36
+ this._loaderElement = loaderElement;
37
+ const progressElement = document.createElement('div');
38
+ progressElement.classList.add(progressStyle);
39
+ this._progressElement = progressElement;
40
+ container.append(progressElement);
41
+ const contentElement = document.createElement('div');
42
+ this._contentElement = contentElement;
43
+ container.append(contentElement);
44
+ const actionsElement = document.createElement('div');
45
+ actionsElement.classList.add(actionsStyle);
46
+ this._actionsElement = actionsElement;
47
+ container.append(actionsElement);
48
+ this.render();
49
+ }
50
+ alert(params) {
51
+ this.#title = params.title ?? '';
52
+ this.#label = params.text ?? '';
53
+ this.changeState('alert');
54
+ this.show();
55
+ }
56
+ loading() {
57
+ this._iconElement.append(this._loaderElement);
58
+ this.changeState('loading');
59
+ this.show();
60
+ }
61
+ hide() {
62
+ this.#progress = 0;
63
+ this.#html = '';
64
+ this.#label = '';
65
+ this.changeState('hidden');
66
+ super.hide();
67
+ }
68
+ set label(label) {
69
+ this.#label = label;
70
+ this.render();
71
+ }
72
+ set html(html) {
73
+ this.#html = html;
74
+ this.render();
75
+ }
76
+ set progress(progress) {
77
+ this.#progress = progress;
78
+ this.render();
79
+ }
80
+ changeState(state) {
81
+ this.#state = state;
82
+ const elements = [
83
+ this._root,
84
+ this._actionsElement,
85
+ this._contentElement,
86
+ this._iconElement,
87
+ this._loaderElement,
88
+ this._progressElement,
89
+ this._titleElement,
90
+ ];
91
+ for (const element of elements) {
92
+ element.dataset.state = state;
93
+ }
94
+ this.render();
95
+ }
96
+ render() {
97
+ super.render();
98
+ this._progressElement.style.width = `${this.#progress}%`;
99
+ switch (this.#state) {
100
+ case 'loading':
101
+ break;
102
+ case 'alert':
103
+ this._iconElement.innerHTML = '';
104
+ break;
105
+ case 'hidden':
106
+ default:
107
+ this._iconElement.innerHTML = '';
108
+ break;
109
+ }
110
+ this._titleElement.textContent = this.#title;
111
+ if (this.#html) {
112
+ this._contentElement.innerHTML = this.#html;
113
+ }
114
+ else {
115
+ if (this.#label instanceof Array) {
116
+ this._contentElement.innerHTML = `<div>${this.#label.join('</div><div>')}</div>`;
117
+ }
118
+ else {
119
+ this._contentElement.textContent = this.#label;
120
+ }
121
+ }
122
+ }
123
+ }
124
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/modal/index.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,6 @@
1
+ export declare const containerStyle: string;
2
+ export declare const iconStyle: string;
3
+ export declare const titleStyle: string;
4
+ export declare const loaderStyle: string;
5
+ export declare const progressStyle: string;
6
+ export declare const actionsStyle: string;
@@ -0,0 +1,96 @@
1
+ import { css } from '@emotion/css';
2
+ export const containerStyle = css `
3
+ display: flex;
4
+ flex-direction: column;
5
+ align-items: center;
6
+ justify-content: center;
7
+ gap: 32px;
8
+ padding: 24px;
9
+ background-color: #fff;
10
+ border-radius: 0;
11
+ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
12
+ border: 1px solid #f3f4f6;
13
+ min-height: 200px;
14
+ position: relative;
15
+ overflow: hidden;
16
+ transition: all 250ms ease;
17
+
18
+ @media (min-width: 640px) {
19
+ width: 400px;
20
+ max-width: 90vw;
21
+ border-radius: 4px;
22
+ padding: 32px;
23
+ }
24
+ `;
25
+ export const iconStyle = css ``;
26
+ export const titleStyle = css `
27
+ font-size: 18px;
28
+ font-weight: 600;
29
+ color: #1f2937;
30
+ text-align: center;
31
+ @media (min-width: 640px) {
32
+ text-align: left;
33
+ }
34
+ `;
35
+ export const loaderStyle = css `
36
+ font-size: 60px;
37
+ width: 1em;
38
+ height: 1em;
39
+ border-radius: 50%;
40
+ box-shadow: inset 0 0 0 1px #3b82f633;
41
+ position: relative;
42
+
43
+ animation: none;
44
+ &[data-state='loading'] {
45
+ animation: rotate 1s linear infinite;
46
+ }
47
+
48
+ > div {
49
+ position: absolute;
50
+ left: 50%;
51
+ top: 50%;
52
+ width: 0.5em;
53
+ height: 1em;
54
+ margin-left: -0.5em;
55
+ margin-top: -0.5em;
56
+ overflow: hidden;
57
+ transform-origin: 0.5em 0.5em;
58
+ mask-image: linear-gradient(top, #000f, #0000);
59
+ -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
60
+
61
+ > div {
62
+ width: 1em;
63
+ height: 1em;
64
+ border-radius: 50%;
65
+ box-shadow: inset 0 0 0 1px #3b82f6;
66
+ }
67
+ }
68
+ @keyframes rotate {
69
+ 0% {
70
+ transform: rotate(0deg);
71
+ }
72
+ 100% {
73
+ transform: rotate(360deg);
74
+ }
75
+ }
76
+ `;
77
+ export const progressStyle = css `
78
+ position: absolute;
79
+ bottom: 0px;
80
+ left: 0;
81
+ width: 0%;
82
+ height: 2px;
83
+ background-color: #2563eb;
84
+ transition: all 350ms ease;
85
+ `;
86
+ export const actionsStyle = css `
87
+ display: flex;
88
+ flex-direction: column;
89
+ justify-content: flex-end;
90
+ gap: 8px;
91
+
92
+ @media (min-width: 640px) {
93
+ flex-direction: row;
94
+ }
95
+ `;
96
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/modal/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBhC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA,EAAE,CAAC;AAE/B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;CAQ5B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyC7B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;CAQ/B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;CAS9B,CAAC"}
@@ -8,13 +8,8 @@ export declare class Overlay {
8
8
  protected render(): void;
9
9
  /** JavaScript中にページを離れようとした場合にアラートを表示します */
10
10
  private beforeunload;
11
- private rootClass;
12
- /**
13
- * @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。
14
- */
11
+ /** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
15
12
  start(): void;
16
- /**
17
- * @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。
18
- */
13
+ /** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
19
14
  stop(): void;
20
15
  }
@@ -0,0 +1,44 @@
1
+ import { bodyStyle, rootStyle } from './style';
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(rootStyle);
12
+ document.body.classList.add(bodyStyle);
13
+ document.body.append(root);
14
+ }
15
+ show() {
16
+ this._shown = true;
17
+ this._root.dataset.shown = 'true';
18
+ document.body.dataset.konomiUiOverlay = 'true';
19
+ window.addEventListener('beforeunload', this.beforeunload);
20
+ this.render();
21
+ }
22
+ hide() {
23
+ this._shown = false;
24
+ this._root.dataset.shown = 'false';
25
+ document.body.dataset.konomiUiOverlay = 'false';
26
+ window.removeEventListener('beforeunload', this.beforeunload);
27
+ this.render();
28
+ }
29
+ render() { }
30
+ /** JavaScript中にページを離れようとした場合にアラートを表示します */
31
+ beforeunload(event) {
32
+ event.preventDefault();
33
+ event.returnValue = '';
34
+ }
35
+ /** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
36
+ start() {
37
+ this.show();
38
+ }
39
+ /** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
40
+ stop() {
41
+ this.hide();
42
+ }
43
+ }
44
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,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,SAAS,CAAC,CAAC;QACpC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACvC,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,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC;QAClC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,GAAG,MAAM,CAAC;QAC/C,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,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC;QACnC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,GAAG,OAAO,CAAC;QAChD,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"}
@@ -0,0 +1,2 @@
1
+ export declare const bodyStyle: string;
2
+ export declare const rootStyle: string;
@@ -0,0 +1,43 @@
1
+ import { css } from '@emotion/css';
2
+ export const bodyStyle = css `
3
+ overflow: visible;
4
+ &[data-konomi-ui-overlay='true'] {
5
+ overflow: hidden;
6
+ }
7
+ `;
8
+ export const rootStyle = css `
9
+ font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',
10
+ Meiryo, sans-serif;
11
+ color: #356;
12
+ font-size: 14px;
13
+
14
+ overflow: hidden;
15
+ background-color: #fffb;
16
+ backdrop-filter: blur(4px);
17
+ box-sizing: content-box;
18
+
19
+ position: fixed;
20
+ inset: 0;
21
+ width: 100vw;
22
+ height: 100vh;
23
+
24
+ display: grid;
25
+ transition: all 250ms ease;
26
+ z-index: 1000;
27
+ opacity: 0;
28
+ transition: all 250ms ease;
29
+
30
+ place-items: end stretch;
31
+ @media (min-width: 640px) {
32
+ font-size: 16px;
33
+ place-items: center;
34
+ }
35
+
36
+ opacity: 0;
37
+ pointer-events: none;
38
+ &[data-shown='true'] {
39
+ opacity: 1;
40
+ pointer-events: all;
41
+ }
42
+ `;
43
+ //# sourceMappingURL=style.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/overlay/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;CAK3B,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC3B,CAAC"}
@@ -65,11 +65,11 @@ export class TaskListOverlay extends Overlay {
65
65
  getTaskStatusElement(status) {
66
66
  switch (status) {
67
67
  case 'new':
68
- return `<div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></div>`;
68
+ return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>`;
69
69
  case 'in-progress':
70
70
  return `<div><div></div></div>`;
71
71
  case 'done':
72
- return `<div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#80beaf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg></div>`;
72
+ return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="#80beaf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>`;
73
73
  default:
74
74
  return ``;
75
75
  }
@@ -118,7 +118,7 @@ export class TaskListOverlay extends Overlay {
118
118
  taskListContainerStyle = css `
119
119
  display: flex;
120
120
  flex-direction: column;
121
- gap: 8px;
121
+ gap: 1em;
122
122
  width: 100%;
123
123
  `;
124
124
  taskContainerStyle = css `
@@ -128,16 +128,17 @@ export class TaskListOverlay extends Overlay {
128
128
  `;
129
129
  taskLabelStyle = css ``;
130
130
  taskStatusStyle = css `
131
- width: 24px;
132
- height: 24px;
131
+ font-size: 32px;
132
+ width: 1em;
133
+ height: 1em;
134
+ display: flex;
135
+ justify-content: center;
136
+ align-items: center;
133
137
 
134
138
  &.status-new {
135
139
  }
136
140
 
137
141
  &.status-in-progress {
138
- font-size: 24px;
139
- width: 1em;
140
- height: 1em;
141
142
  border-radius: 50%;
142
143
  box-shadow: inset 0 0 0 1px #3b82f633;
143
144
  position: relative;
@@ -1 +1 @@
1
- {"version":3,"file":"task-list-overlay.js","sourceRoot":"","sources":["../src/task-list-overlay.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"task-list-overlay.js","sourceRoot":"","sources":["../src/task-list-overlay.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@konomi-app/ui",
3
- "version": "1.7.0",
3
+ "version": "2.0.0",
4
4
  "types": "dist/index.d.ts",
5
5
  "main": "dist/index.js",
6
6
  "author": "adachi",
@@ -10,10 +10,10 @@
10
10
  "prepare": "yarn run build"
11
11
  },
12
12
  "dependencies": {
13
- "@emotion/css": "^11.10.8"
13
+ "@emotion/css": "^11.11.2"
14
14
  },
15
15
  "devDependencies": {
16
- "typescript": "^5.0.4"
16
+ "typescript": "^5.2.2"
17
17
  },
18
18
  "prettier": {
19
19
  "printWidth": 100,
@@ -1,128 +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
- _iconElement;
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 iconElement = document.createElement('div');
19
- iconElement.innerHTML = '<div><div></div></div>';
20
- iconElement.classList.add(this.loaderStyle);
21
- this._iconElement = iconElement;
22
- container.append(iconElement);
23
- const progressElement = document.createElement('div');
24
- progressElement.classList.add(this.progressStyle);
25
- this._progressElement = progressElement;
26
- container.append(progressElement);
27
- const contentElement = document.createElement('div');
28
- this._contentElement = contentElement;
29
- container.append(contentElement);
30
- this.render();
31
- }
32
- hide() {
33
- this.#progress = 0;
34
- this.#html = '';
35
- this.#label = '';
36
- super.hide();
37
- }
38
- set label(label) {
39
- this.#label = label;
40
- this.render();
41
- }
42
- set html(html) {
43
- this.#html = html;
44
- this.render();
45
- }
46
- set progress(progress) {
47
- this.#progress = progress;
48
- this.render();
49
- }
50
- render() {
51
- super.render();
52
- this._progressElement.style.width = `${this.#progress}%`;
53
- if (this.#html) {
54
- this._contentElement.innerHTML = this.#html;
55
- }
56
- else {
57
- if (this.#label instanceof Array) {
58
- this._contentElement.innerHTML = `<div>${this.#label.join('</div><div>')}</div>`;
59
- }
60
- else {
61
- this._contentElement.innerText = this.#label;
62
- }
63
- }
64
- }
65
- containerStyle = css `
66
- display: flex;
67
- flex-direction: column;
68
- align-items: center;
69
- justify-content: center;
70
- gap: 32px;
71
- padding: 32px 64px;
72
- background-color: #fffc;
73
- border-radius: 8px;
74
- box-shadow: 0 5px 24px -6px #0002;
75
- width: 300px;
76
- max-width: 90vw;
77
- min-height: 200px;
78
- position: relative;
79
- overflow: hidden;
80
- transition: all 250ms ease;
81
- `;
82
- loaderStyle = css `
83
- font-size: 60px;
84
- width: 1em;
85
- height: 1em;
86
- border-radius: 50%;
87
- box-shadow: inset 0 0 0 1px #3b82f633;
88
- position: relative;
89
- > div {
90
- position: absolute;
91
- left: 50%;
92
- top: 50%;
93
- width: 0.5em;
94
- height: 1em;
95
- margin-left: -0.5em;
96
- margin-top: -0.5em;
97
- overflow: hidden;
98
- transform-origin: 0.5em 0.5em;
99
- mask-image: linear-gradient(top, #000f, #0000);
100
- -webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
101
-
102
- > div {
103
- width: 1em;
104
- height: 1em;
105
- border-radius: 50%;
106
- box-shadow: inset 0 0 0 1px #3b82f6;
107
- }
108
- }
109
- @keyframes rotate {
110
- 0% {
111
- transform: rotate(0deg);
112
- }
113
- 100% {
114
- transform: rotate(360deg);
115
- }
116
- }
117
- `;
118
- progressStyle = css `
119
- position: absolute;
120
- bottom: 0px;
121
- left: 0;
122
- width: 0%;
123
- height: 2px;
124
- background-color: #2563eb;
125
- transition: all 350ms ease;
126
- `;
127
- }
128
- //# sourceMappingURL=dialog-overlay.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dialog-overlay.js","sourceRoot":"","sources":["../src/dialog-overlay.ts"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"loading-overlay.js","sourceRoot":"","sources":["../src/loading-overlay.ts"],"names":[],"mappings":"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"}
package/dist/overlay.js DELETED
@@ -1,71 +0,0 @@
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
- }
14
- show() {
15
- this._shown = true;
16
- window.addEventListener('beforeunload', this.beforeunload);
17
- document.body.style.overflow = 'hidden';
18
- this.render();
19
- }
20
- hide() {
21
- this._shown = false;
22
- window.removeEventListener('beforeunload', this.beforeunload);
23
- document.body.style.overflow = 'auto';
24
- this.render();
25
- }
26
- render() {
27
- this._root.style.opacity = this._shown ? '1' : '0';
28
- this._root.style.pointerEvents = this._shown ? 'all' : 'none';
29
- }
30
- /** JavaScript中にページを離れようとした場合にアラートを表示します */
31
- beforeunload(event) {
32
- event.preventDefault();
33
- event.returnValue = '';
34
- }
35
- rootClass = css `
36
- font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',
37
- Meiryo, sans-serif;
38
- color: #356;
39
- font-size: 17px;
40
-
41
- overflow: hidden;
42
- background-color: #fff6;
43
- backdrop-filter: blur(10px);
44
- box-sizing: content-box;
45
-
46
- position: fixed;
47
- inset: 0;
48
- width: 100vw;
49
- height: 100vh;
50
-
51
- display: grid;
52
- place-items: center;
53
- transition: all 250ms ease;
54
- z-index: 1000;
55
- opacity: 0;
56
- transition: all 250ms ease;
57
- `;
58
- /**
59
- * @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。
60
- */
61
- start() {
62
- this.show();
63
- }
64
- /**
65
- * @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。
66
- */
67
- stop() {
68
- this.hide();
69
- }
70
- }
71
- //# sourceMappingURL=overlay.js.map
@@ -1 +0,0 @@
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"}