@konomi-app/ui 2.3.0 → 3.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.cjs +763 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +128 -0
- package/dist/index.d.ts +128 -4
- package/dist/index.js +731 -4
- package/dist/index.js.map +1 -1
- package/package.json +36 -27
- package/dist/loading-overlay/index.d.ts +0 -25
- package/dist/loading-overlay/index.js +0 -76
- package/dist/loading-overlay/index.js.map +0 -1
- package/dist/loading-overlay/style.d.ts +0 -3
- package/dist/loading-overlay/style.js +0 -77
- package/dist/loading-overlay/style.js.map +0 -1
- package/dist/modal/index.d.ts +0 -34
- package/dist/modal/index.js +0 -177
- package/dist/modal/index.js.map +0 -1
- package/dist/modal/style.d.ts +0 -6
- package/dist/modal/style.js +0 -94
- package/dist/modal/style.js.map +0 -1
- package/dist/overlay/index.d.ts +0 -28
- package/dist/overlay/index.js +0 -63
- package/dist/overlay/index.js.map +0 -1
- package/dist/overlay/style.d.ts +0 -2
- package/dist/overlay/style.js +0 -44
- package/dist/overlay/style.js.map +0 -1
- package/dist/task-list-overlay.d.ts +0 -34
- package/dist/task-list-overlay.js +0 -177
- package/dist/task-list-overlay.js.map +0 -1
- package/dist/utilities.d.ts +0 -9
- package/dist/utilities.js +0 -22
- package/dist/utilities.js.map +0 -1
package/dist/modal/style.js
DELETED
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { css } from '@emotion/css';
|
|
2
|
-
export const containerStyle = css `
|
|
3
|
-
display: grid;
|
|
4
|
-
gap: 2px;
|
|
5
|
-
padding: 24px;
|
|
6
|
-
background-color: #fff;
|
|
7
|
-
border-radius: 0;
|
|
8
|
-
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
9
|
-
border: 1px solid #f3f4f6;
|
|
10
|
-
min-height: 200px;
|
|
11
|
-
position: relative;
|
|
12
|
-
overflow: hidden;
|
|
13
|
-
transition: all 250ms ease;
|
|
14
|
-
|
|
15
|
-
@media (min-width: 640px) {
|
|
16
|
-
width: 400px;
|
|
17
|
-
max-width: 90vw;
|
|
18
|
-
border-radius: 4px;
|
|
19
|
-
padding: 32px;
|
|
20
|
-
}
|
|
21
|
-
`;
|
|
22
|
-
export const iconStyle = css ``;
|
|
23
|
-
export const titleStyle = css `
|
|
24
|
-
font-size: 18px;
|
|
25
|
-
font-weight: 600;
|
|
26
|
-
color: #1f2937;
|
|
27
|
-
text-align: center;
|
|
28
|
-
@media (min-width: 640px) {
|
|
29
|
-
text-align: left;
|
|
30
|
-
}
|
|
31
|
-
`;
|
|
32
|
-
export const loaderStyle = css `
|
|
33
|
-
font-size: 60px;
|
|
34
|
-
width: 1em;
|
|
35
|
-
height: 1em;
|
|
36
|
-
border-radius: 50%;
|
|
37
|
-
box-shadow: inset 0 0 0 1px #3b82f633;
|
|
38
|
-
position: relative;
|
|
39
|
-
|
|
40
|
-
animation: none;
|
|
41
|
-
&[data-state='loading'] {
|
|
42
|
-
animation: rotate 1s linear infinite;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
> div {
|
|
46
|
-
position: absolute;
|
|
47
|
-
left: 50%;
|
|
48
|
-
top: 50%;
|
|
49
|
-
width: 0.5em;
|
|
50
|
-
height: 1em;
|
|
51
|
-
margin-left: -0.5em;
|
|
52
|
-
margin-top: -0.5em;
|
|
53
|
-
overflow: hidden;
|
|
54
|
-
transform-origin: 0.5em 0.5em;
|
|
55
|
-
mask-image: linear-gradient(top, #000f, #0000);
|
|
56
|
-
-webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
|
|
57
|
-
|
|
58
|
-
> div {
|
|
59
|
-
width: 1em;
|
|
60
|
-
height: 1em;
|
|
61
|
-
border-radius: 50%;
|
|
62
|
-
box-shadow: inset 0 0 0 1px #3b82f6;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
@keyframes rotate {
|
|
66
|
-
0% {
|
|
67
|
-
transform: rotate(0deg);
|
|
68
|
-
}
|
|
69
|
-
100% {
|
|
70
|
-
transform: rotate(360deg);
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
`;
|
|
74
|
-
export const progressStyle = css `
|
|
75
|
-
position: absolute;
|
|
76
|
-
bottom: 0px;
|
|
77
|
-
left: 0;
|
|
78
|
-
width: 0%;
|
|
79
|
-
height: 2px;
|
|
80
|
-
background-color: #2563eb;
|
|
81
|
-
transition: all 350ms ease;
|
|
82
|
-
`;
|
|
83
|
-
export const actionsStyle = css `
|
|
84
|
-
display: flex;
|
|
85
|
-
flex-direction: column;
|
|
86
|
-
justify-content: flex-end;
|
|
87
|
-
align-items: flex-end;
|
|
88
|
-
gap: 8px;
|
|
89
|
-
|
|
90
|
-
@media (min-width: 640px) {
|
|
91
|
-
flex-direction: row;
|
|
92
|
-
}
|
|
93
|
-
`;
|
|
94
|
-
//# sourceMappingURL=style.js.map
|
package/dist/modal/style.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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;;;;;;;;;;;;;;;;;;;CAmBhC,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;;;;;;;;;;CAU9B,CAAC"}
|
package/dist/overlay/index.d.ts
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
export declare const ATTRIBUTE_KEY = "data-konomi-ui-overlay";
|
|
2
|
-
export declare const ATTRIBUTE_SHOWN = "data-shown";
|
|
3
|
-
export declare class Overlay {
|
|
4
|
-
#private;
|
|
5
|
-
/**
|
|
6
|
-
* オーバーレイをレンダリングするルート要素の`dataset`。
|
|
7
|
-
*/
|
|
8
|
-
protected readonly _rootDataset: DOMStringMap;
|
|
9
|
-
/**
|
|
10
|
-
* オーバーレイが表示されているかどうか。
|
|
11
|
-
*/
|
|
12
|
-
protected _shown: boolean;
|
|
13
|
-
/**
|
|
14
|
-
* オーバーレイを表示中にページを離れようとした場合にアラートを表示するかどうかを設定します。
|
|
15
|
-
*/
|
|
16
|
-
protected _disableBeforeUnload: boolean;
|
|
17
|
-
constructor();
|
|
18
|
-
show(): void;
|
|
19
|
-
hide(): void;
|
|
20
|
-
protected render(): void;
|
|
21
|
-
/** JavaScript中にページを離れようとした場合にアラートを表示します */
|
|
22
|
-
private beforeunload;
|
|
23
|
-
protected get root(): HTMLDivElement;
|
|
24
|
-
/** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
|
|
25
|
-
start(): void;
|
|
26
|
-
/** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
|
|
27
|
-
stop(): void;
|
|
28
|
-
}
|
package/dist/overlay/index.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { getBodyStyle, getRootStyle } from './style';
|
|
2
|
-
export const ATTRIBUTE_KEY = 'data-konomi-ui-overlay';
|
|
3
|
-
export const ATTRIBUTE_SHOWN = 'data-shown';
|
|
4
|
-
export class Overlay {
|
|
5
|
-
/**
|
|
6
|
-
* オーバーレイをレンダリングするルート要素。
|
|
7
|
-
*/
|
|
8
|
-
#root;
|
|
9
|
-
/**
|
|
10
|
-
* オーバーレイをレンダリングするルート要素の`dataset`。
|
|
11
|
-
*/
|
|
12
|
-
_rootDataset;
|
|
13
|
-
/**
|
|
14
|
-
* オーバーレイが表示されているかどうか。
|
|
15
|
-
*/
|
|
16
|
-
_shown;
|
|
17
|
-
/**
|
|
18
|
-
* オーバーレイを表示中にページを離れようとした場合にアラートを表示するかどうかを設定します。
|
|
19
|
-
*/
|
|
20
|
-
_disableBeforeUnload;
|
|
21
|
-
constructor() {
|
|
22
|
-
this._shown = false;
|
|
23
|
-
this._disableBeforeUnload = false;
|
|
24
|
-
this._rootDataset = {};
|
|
25
|
-
const root = document.createElement('div');
|
|
26
|
-
this.#root = root;
|
|
27
|
-
this.#root.classList.add(getRootStyle());
|
|
28
|
-
document.body.classList.add(getBodyStyle());
|
|
29
|
-
this.#root.setAttribute(ATTRIBUTE_KEY, '');
|
|
30
|
-
document.body.append(root);
|
|
31
|
-
}
|
|
32
|
-
show() {
|
|
33
|
-
this._shown = true;
|
|
34
|
-
this.#root.setAttribute(ATTRIBUTE_SHOWN, '');
|
|
35
|
-
document.body.setAttribute(ATTRIBUTE_KEY, '');
|
|
36
|
-
window.addEventListener('beforeunload', this.beforeunload);
|
|
37
|
-
this.render();
|
|
38
|
-
}
|
|
39
|
-
hide() {
|
|
40
|
-
this._shown = false;
|
|
41
|
-
this.#root.removeAttribute(ATTRIBUTE_SHOWN);
|
|
42
|
-
document.body.removeAttribute(ATTRIBUTE_KEY);
|
|
43
|
-
window.removeEventListener('beforeunload', this.beforeunload);
|
|
44
|
-
this.render();
|
|
45
|
-
}
|
|
46
|
-
render() { }
|
|
47
|
-
/** JavaScript中にページを離れようとした場合にアラートを表示します */
|
|
48
|
-
beforeunload(event) {
|
|
49
|
-
event.preventDefault();
|
|
50
|
-
}
|
|
51
|
-
get root() {
|
|
52
|
-
return this.#root;
|
|
53
|
-
}
|
|
54
|
-
/** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
|
|
55
|
-
start() {
|
|
56
|
-
this.show();
|
|
57
|
-
}
|
|
58
|
-
/** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
|
|
59
|
-
stop() {
|
|
60
|
-
this.hide();
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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;IAClB;;OAEG;IACM,KAAK,CAAiB;IAC/B;;OAEG;IACgB,YAAY,CAAe;IAC9C;;OAEG;IACO,MAAM,CAAU;IAC1B;;OAEG;IACO,oBAAoB,CAAU;IAExC;QACE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAClC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QAEvB,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;IACzB,CAAC;IAED,IAAc,IAAI;QAChB,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,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.d.ts
DELETED
package/dist/overlay/style.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { css } from '@emotion/css';
|
|
2
|
-
import { ATTRIBUTE_KEY, ATTRIBUTE_SHOWN } from '.';
|
|
3
|
-
export const getBodyStyle = () => css `
|
|
4
|
-
overflow: visible;
|
|
5
|
-
&[${ATTRIBUTE_KEY}] {
|
|
6
|
-
overflow: hidden;
|
|
7
|
-
}
|
|
8
|
-
`;
|
|
9
|
-
export const getRootStyle = () => css `
|
|
10
|
-
font-family: 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', 'Hiragino Kaku Gothic ProN',
|
|
11
|
-
Meiryo, sans-serif;
|
|
12
|
-
color: #356;
|
|
13
|
-
font-size: 14px;
|
|
14
|
-
|
|
15
|
-
overflow: hidden;
|
|
16
|
-
background-color: #fffb;
|
|
17
|
-
backdrop-filter: blur(4px);
|
|
18
|
-
box-sizing: content-box;
|
|
19
|
-
|
|
20
|
-
position: fixed;
|
|
21
|
-
inset: 0;
|
|
22
|
-
width: 100vw;
|
|
23
|
-
height: 100vh;
|
|
24
|
-
|
|
25
|
-
display: grid;
|
|
26
|
-
transition: all 250ms ease;
|
|
27
|
-
z-index: 1000;
|
|
28
|
-
opacity: 0;
|
|
29
|
-
transition: all 250ms ease;
|
|
30
|
-
|
|
31
|
-
place-items: end stretch;
|
|
32
|
-
@media (min-width: 640px) {
|
|
33
|
-
font-size: 16px;
|
|
34
|
-
place-items: center;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
opacity: 0;
|
|
38
|
-
pointer-events: none;
|
|
39
|
-
&[${ATTRIBUTE_SHOWN}] {
|
|
40
|
-
opacity: 1;
|
|
41
|
-
pointer-events: all;
|
|
42
|
-
}
|
|
43
|
-
`;
|
|
44
|
-
//# sourceMappingURL=style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { Overlay } from './overlay';
|
|
2
|
-
type Label = string | string[];
|
|
3
|
-
type TaskStatus = 'new' | 'in-progress' | 'done' | 'error';
|
|
4
|
-
type Task = {
|
|
5
|
-
key: string;
|
|
6
|
-
label: Label;
|
|
7
|
-
status: TaskStatus;
|
|
8
|
-
};
|
|
9
|
-
type ConstructorProps = Readonly<Partial<{
|
|
10
|
-
taskList: Task[];
|
|
11
|
-
}>>;
|
|
12
|
-
export declare class TaskListOverlay extends Overlay {
|
|
13
|
-
#private;
|
|
14
|
-
protected readonly _contentElement: HTMLDivElement;
|
|
15
|
-
constructor(props?: ConstructorProps);
|
|
16
|
-
hide(): void;
|
|
17
|
-
done(key: string): void;
|
|
18
|
-
error(key: string): void;
|
|
19
|
-
inProgress(key: string): void;
|
|
20
|
-
addTask(...tasks: {
|
|
21
|
-
key: string;
|
|
22
|
-
label: Label;
|
|
23
|
-
}[]): void;
|
|
24
|
-
render(): void;
|
|
25
|
-
private renderTask;
|
|
26
|
-
private getTaskStatusElement;
|
|
27
|
-
private containerStyle;
|
|
28
|
-
private contentStyle;
|
|
29
|
-
private taskListContainerStyle;
|
|
30
|
-
private taskContainerStyle;
|
|
31
|
-
private taskLabelStyle;
|
|
32
|
-
private taskStatusStyle;
|
|
33
|
-
}
|
|
34
|
-
export {};
|
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
import { css } from '@emotion/css';
|
|
2
|
-
import { Overlay } from './overlay';
|
|
3
|
-
export class TaskListOverlay extends Overlay {
|
|
4
|
-
#taskList;
|
|
5
|
-
_contentElement;
|
|
6
|
-
constructor(props = {}) {
|
|
7
|
-
super();
|
|
8
|
-
this.#taskList = props.taskList ?? [];
|
|
9
|
-
const container = document.createElement('div');
|
|
10
|
-
container.classList.add(this.containerStyle);
|
|
11
|
-
this.root.append(container);
|
|
12
|
-
const contentElement = document.createElement('div');
|
|
13
|
-
this._contentElement = contentElement;
|
|
14
|
-
contentElement.classList.add(this.contentStyle);
|
|
15
|
-
container.append(contentElement);
|
|
16
|
-
this.render();
|
|
17
|
-
}
|
|
18
|
-
hide() {
|
|
19
|
-
this.#taskList = [];
|
|
20
|
-
super.hide();
|
|
21
|
-
}
|
|
22
|
-
done(key) {
|
|
23
|
-
const task = this.#taskList.find((t) => t.key === key);
|
|
24
|
-
if (task) {
|
|
25
|
-
task.status = 'done';
|
|
26
|
-
this.render();
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
error(key) {
|
|
30
|
-
const task = this.#taskList.find((t) => t.key === key);
|
|
31
|
-
if (task) {
|
|
32
|
-
task.status = 'error';
|
|
33
|
-
this.render();
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
inProgress(key) {
|
|
37
|
-
const task = this.#taskList.find((t) => t.key === key);
|
|
38
|
-
if (task) {
|
|
39
|
-
task.status = 'in-progress';
|
|
40
|
-
this.render();
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
addTask(...tasks) {
|
|
44
|
-
this.#taskList.push(...tasks.map(({ key, label }) => ({ key, label, status: 'new' })));
|
|
45
|
-
this.render();
|
|
46
|
-
}
|
|
47
|
-
render() {
|
|
48
|
-
super.render();
|
|
49
|
-
this._contentElement.innerHTML = `
|
|
50
|
-
<div class="${this.taskListContainerStyle}">
|
|
51
|
-
${this.#taskList.map((task) => this.renderTask(task)).join('')}
|
|
52
|
-
</div>
|
|
53
|
-
`;
|
|
54
|
-
}
|
|
55
|
-
renderTask(task) {
|
|
56
|
-
const label = Array.isArray(task.label) ? task.label.join(' ') : task.label;
|
|
57
|
-
const status = task.status;
|
|
58
|
-
return `
|
|
59
|
-
<div class="${this.taskContainerStyle}">
|
|
60
|
-
<div class="${this.taskStatusStyle} status-${status}">${this.getTaskStatusElement(task.status)}</div>
|
|
61
|
-
<div class="${this.taskLabelStyle}">${label}</div>
|
|
62
|
-
</div>
|
|
63
|
-
`;
|
|
64
|
-
}
|
|
65
|
-
getTaskStatusElement(status) {
|
|
66
|
-
switch (status) {
|
|
67
|
-
case 'new':
|
|
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
|
-
case 'in-progress':
|
|
70
|
-
return `<div><div></div></div>`;
|
|
71
|
-
case 'done':
|
|
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
|
-
default:
|
|
74
|
-
return ``;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
containerStyle = css `
|
|
78
|
-
display: flex;
|
|
79
|
-
flex-direction: column;
|
|
80
|
-
align-items: center;
|
|
81
|
-
justify-content: center;
|
|
82
|
-
gap: 32px;
|
|
83
|
-
padding: 32px 64px;
|
|
84
|
-
background-color: #fffc;
|
|
85
|
-
border-radius: 8px;
|
|
86
|
-
box-shadow: 0 5px 24px -6px #0002;
|
|
87
|
-
width: 300px;
|
|
88
|
-
max-width: 90vw;
|
|
89
|
-
min-height: 200px;
|
|
90
|
-
position: relative;
|
|
91
|
-
overflow: hidden;
|
|
92
|
-
transition: all 250ms ease;
|
|
93
|
-
|
|
94
|
-
@keyframes spin {
|
|
95
|
-
0% {
|
|
96
|
-
transform: rotate(0deg);
|
|
97
|
-
border-radius: 1em;
|
|
98
|
-
}
|
|
99
|
-
20% {
|
|
100
|
-
transform: rotate(0deg);
|
|
101
|
-
}
|
|
102
|
-
30%,
|
|
103
|
-
60% {
|
|
104
|
-
border-radius: 0.25em;
|
|
105
|
-
}
|
|
106
|
-
70% {
|
|
107
|
-
transform: rotate(180deg);
|
|
108
|
-
}
|
|
109
|
-
100% {
|
|
110
|
-
transform: rotate(180deg);
|
|
111
|
-
border-radius: 1em;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
`;
|
|
115
|
-
contentStyle = css `
|
|
116
|
-
width: 100%;
|
|
117
|
-
`;
|
|
118
|
-
taskListContainerStyle = css `
|
|
119
|
-
display: flex;
|
|
120
|
-
flex-direction: column;
|
|
121
|
-
gap: 1em;
|
|
122
|
-
width: 100%;
|
|
123
|
-
`;
|
|
124
|
-
taskContainerStyle = css `
|
|
125
|
-
display: flex;
|
|
126
|
-
align-items: center;
|
|
127
|
-
gap: 1em;
|
|
128
|
-
`;
|
|
129
|
-
taskLabelStyle = css ``;
|
|
130
|
-
taskStatusStyle = css `
|
|
131
|
-
font-size: 32px;
|
|
132
|
-
width: 1em;
|
|
133
|
-
height: 1em;
|
|
134
|
-
display: flex;
|
|
135
|
-
justify-content: center;
|
|
136
|
-
align-items: center;
|
|
137
|
-
|
|
138
|
-
&.status-new {
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
&.status-in-progress {
|
|
142
|
-
border-radius: 50%;
|
|
143
|
-
box-shadow: inset 0 0 0 1px #3b82f633;
|
|
144
|
-
position: relative;
|
|
145
|
-
animation: rotate 1.2s infinite linear;
|
|
146
|
-
> div {
|
|
147
|
-
position: absolute;
|
|
148
|
-
left: 50%;
|
|
149
|
-
top: 50%;
|
|
150
|
-
width: 0.5em;
|
|
151
|
-
height: 1em;
|
|
152
|
-
margin-left: -0.5em;
|
|
153
|
-
margin-top: -0.5em;
|
|
154
|
-
overflow: hidden;
|
|
155
|
-
transform-origin: 0.5em 0.5em;
|
|
156
|
-
mask-image: linear-gradient(top, #000f, #0000);
|
|
157
|
-
-webkit-mask-image: -webkit-linear-gradient(top, #000f, #0000);
|
|
158
|
-
|
|
159
|
-
> div {
|
|
160
|
-
width: 1em;
|
|
161
|
-
height: 1em;
|
|
162
|
-
border-radius: 50%;
|
|
163
|
-
box-shadow: inset 0 0 0 1px #3b82f6;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
@keyframes rotate {
|
|
167
|
-
0% {
|
|
168
|
-
transform: rotate(0deg);
|
|
169
|
-
}
|
|
170
|
-
100% {
|
|
171
|
-
transform: rotate(360deg);
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
`;
|
|
176
|
-
}
|
|
177
|
-
//# sourceMappingURL=task-list-overlay.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"task-list-overlay.js","sourceRoot":"","sources":["../src/task-list-overlay.ts"],"names":[],"mappings":"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"}
|
package/dist/utilities.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 指定された関数をラップし、実行中にローディングオーバーレイを表示する高階関数。
|
|
3
|
-
*
|
|
4
|
-
* @template T - 任意の引数を取り、任意の値を返す関数の型。
|
|
5
|
-
* @param {T} fn - 実行する関数。
|
|
6
|
-
* @param {string} [label='Loading...'] - ローディングオーバーレイに表示するラベル。デフォルトは 'Loading...'。
|
|
7
|
-
* @returns {(...args: Parameters<T>) => Promise<ReturnType<T>>} - ラップされた関数。実行中にローディングオーバーレイを表示し、完了後に非表示にする。
|
|
8
|
-
*/
|
|
9
|
-
export declare const withLoading: <T extends (...args: any[]) => any>(fn: T, label?: string) => (...args: Parameters<T>) => Promise<ReturnType<T>>;
|
package/dist/utilities.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { LoadingOverlay } from './loading-overlay';
|
|
2
|
-
/**
|
|
3
|
-
* 指定された関数をラップし、実行中にローディングオーバーレイを表示する高階関数。
|
|
4
|
-
*
|
|
5
|
-
* @template T - 任意の引数を取り、任意の値を返す関数の型。
|
|
6
|
-
* @param {T} fn - 実行する関数。
|
|
7
|
-
* @param {string} [label='Loading...'] - ローディングオーバーレイに表示するラベル。デフォルトは 'Loading...'。
|
|
8
|
-
* @returns {(...args: Parameters<T>) => Promise<ReturnType<T>>} - ラップされた関数。実行中にローディングオーバーレイを表示し、完了後に非表示にする。
|
|
9
|
-
*/
|
|
10
|
-
export const withLoading = (fn, label = 'Loading...') => {
|
|
11
|
-
return async (...args) => {
|
|
12
|
-
const overlay = new LoadingOverlay({ label });
|
|
13
|
-
overlay.show();
|
|
14
|
-
try {
|
|
15
|
-
return await fn(...args);
|
|
16
|
-
}
|
|
17
|
-
finally {
|
|
18
|
-
overlay.hide();
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
//# sourceMappingURL=utilities.js.map
|
package/dist/utilities.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACzB,EAAK,EACL,QAAgB,YAAY,EAC5B,EAAE;IACF,OAAO,KAAK,EAAE,GAAG,IAAmB,EAA0B,EAAE;QAC9D,MAAM,OAAO,GAAG,IAAI,cAAc,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9C,OAAO,CAAC,IAAI,EAAE,CAAC;QACf,IAAI,CAAC;YACH,OAAO,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC;QAC3B,CAAC;gBAAS,CAAC;YACT,OAAO,CAAC,IAAI,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;AACJ,CAAC,CAAC"}
|