@esportsplus/ui 0.40.0 → 0.41.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.
|
@@ -2,13 +2,12 @@ import '@esportsplus/vite/global.d.ts';
|
|
|
2
2
|
import { Response } from '@esportsplus/action';
|
|
3
3
|
import { Attributes, Renderable } from '@esportsplus/template';
|
|
4
4
|
import './scss/index.scss';
|
|
5
|
-
declare
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
deactivate: typeof deactivate;
|
|
5
|
+
declare const _default: (attributes: Attributes & {
|
|
6
|
+
close?: Attributes;
|
|
7
|
+
message?: Attributes;
|
|
8
|
+
}) => {
|
|
9
|
+
content: Node;
|
|
10
|
+
deactivate: () => void;
|
|
12
11
|
error: {
|
|
13
12
|
(messages: Renderable<any>, seconds?: number): void;
|
|
14
13
|
response(response: Response<any>): void;
|
|
@@ -3,21 +3,17 @@ import { reactive } from '@esportsplus/reactivity';
|
|
|
3
3
|
import { html, svg } from '@esportsplus/template';
|
|
4
4
|
import { omit } from '@esportsplus/utilities';
|
|
5
5
|
import { icon } from '@esportsplus/ui';
|
|
6
|
-
import check from '
|
|
7
|
-
import close from '
|
|
8
|
-
import e from '
|
|
6
|
+
import check from './svg/check.svg';
|
|
7
|
+
import close from './svg/close.svg';
|
|
8
|
+
import e from './svg/error.svg';
|
|
9
9
|
import './scss/index.scss';
|
|
10
10
|
const OMIT = ['close', 'message'];
|
|
11
11
|
let modifiers = {
|
|
12
12
|
error: 'red',
|
|
13
13
|
info: 'black',
|
|
14
14
|
success: 'green'
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
messages: new Set,
|
|
18
|
-
type: ''
|
|
19
|
-
}), timeout = 250;
|
|
20
|
-
function activate(key, messages, seconds = 0) {
|
|
15
|
+
}, timeout = 250;
|
|
16
|
+
function activate(key, messages, seconds, state) {
|
|
21
17
|
if (!Array.isArray(messages)) {
|
|
22
18
|
messages = [messages];
|
|
23
19
|
}
|
|
@@ -39,6 +35,7 @@ function activate(key, messages, seconds = 0) {
|
|
|
39
35
|
state.active = true;
|
|
40
36
|
state.type = key;
|
|
41
37
|
if (seconds) {
|
|
38
|
+
``;
|
|
42
39
|
setTimeout(deactivate, 500 * seconds);
|
|
43
40
|
}
|
|
44
41
|
}, timeout);
|
|
@@ -53,73 +50,81 @@ function activate(key, messages, seconds = 0) {
|
|
|
53
50
|
}, timeout);
|
|
54
51
|
}
|
|
55
52
|
}
|
|
56
|
-
function deactivate() {
|
|
53
|
+
function deactivate(state) {
|
|
57
54
|
state.active = false;
|
|
58
55
|
setTimeout(() => {
|
|
59
56
|
state.messages.clear();
|
|
60
57
|
}, timeout);
|
|
61
58
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
59
|
+
export default (attributes) => {
|
|
60
|
+
let state = reactive({
|
|
61
|
+
active: false,
|
|
62
|
+
messages: new Set,
|
|
63
|
+
type: ''
|
|
64
|
+
});
|
|
65
|
+
const error = (messages, seconds = 0) => activate('error', messages, seconds, state);
|
|
66
|
+
error.response = (response) => {
|
|
67
|
+
if (response.ok) {
|
|
68
|
+
return;
|
|
70
69
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
return html `
|
|
86
|
-
<div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
|
|
87
|
-
${icon({ class: '--margin-right --margin-600 --size-500' }, type === 'error' ? e : check)}
|
|
88
|
-
</div>
|
|
89
|
-
`;
|
|
90
|
-
}}
|
|
91
|
-
|
|
92
|
-
<div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
|
|
70
|
+
error(response.errors.map(({ message, path }) => {
|
|
71
|
+
if (!path) {
|
|
72
|
+
return message;
|
|
73
|
+
}
|
|
74
|
+
return `${String(path).split('.').join(' ')} ${message}`;
|
|
75
|
+
}), 5);
|
|
76
|
+
};
|
|
77
|
+
return {
|
|
78
|
+
content: html `
|
|
79
|
+
<div
|
|
80
|
+
class='alert anchor anchor--n ${() => state.active && '--active'}'
|
|
81
|
+
${omit(attributes, OMIT)}
|
|
82
|
+
>
|
|
83
|
+
<div class='--flex-row'>
|
|
93
84
|
${() => {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
85
|
+
let type = state.type;
|
|
86
|
+
return html `
|
|
87
|
+
<div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
|
|
88
|
+
${icon({ class: '--margin-right --margin-600 --size-500' }, type === 'error' ? e : check)}
|
|
89
|
+
</div>
|
|
90
|
+
`;
|
|
91
|
+
}}
|
|
92
|
+
|
|
93
|
+
<div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
|
|
94
|
+
${() => {
|
|
95
|
+
let message = attributes.message;
|
|
96
|
+
return state.type && [...state.messages].map((content) => {
|
|
97
|
+
if (typeof content === 'string') {
|
|
98
|
+
return html `
|
|
99
|
+
<p ${message}>
|
|
100
|
+
${content}
|
|
101
|
+
</p>
|
|
102
|
+
`;
|
|
103
|
+
}
|
|
97
104
|
return html `
|
|
98
|
-
<
|
|
105
|
+
<div class='--flex-start'>
|
|
99
106
|
${content}
|
|
100
|
-
</
|
|
107
|
+
</div>
|
|
101
108
|
`;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
${content}
|
|
106
|
-
</div>
|
|
107
|
-
`;
|
|
108
|
-
});
|
|
109
|
-
}}
|
|
109
|
+
});
|
|
110
|
+
}}
|
|
111
|
+
</div>
|
|
110
112
|
</div>
|
|
111
|
-
</div>
|
|
112
113
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
114
|
+
<div
|
|
115
|
+
class='alert-close button --padding-300'
|
|
116
|
+
onclick='${deactivate}'
|
|
117
|
+
${attributes.close}
|
|
118
|
+
>
|
|
119
|
+
<div class="icon" style='--size: 14px;'>
|
|
120
|
+
${svg.sprite(close)}
|
|
121
|
+
</div>
|
|
120
122
|
</div>
|
|
121
123
|
</div>
|
|
122
|
-
|
|
123
|
-
|
|
124
|
+
`,
|
|
125
|
+
deactivate: () => deactivate(state),
|
|
126
|
+
error,
|
|
127
|
+
info: (messages, seconds = 0) => activate('info', messages, seconds, state),
|
|
128
|
+
success: (messages, seconds = 0) => activate('success', messages, seconds, state)
|
|
129
|
+
};
|
|
124
130
|
};
|
|
125
|
-
export default { content, deactivate, error, info, success };
|
package/package.json
CHANGED
|
@@ -4,9 +4,9 @@ import { reactive } from '@esportsplus/reactivity';
|
|
|
4
4
|
import { html, svg, Attributes, Renderable } from '@esportsplus/template';
|
|
5
5
|
import { omit } from '@esportsplus/utilities';
|
|
6
6
|
import { icon } from '@esportsplus/ui';
|
|
7
|
-
import check from '
|
|
8
|
-
import close from '
|
|
9
|
-
import e from '
|
|
7
|
+
import check from './svg/check.svg';
|
|
8
|
+
import close from './svg/close.svg';
|
|
9
|
+
import e from './svg/error.svg';
|
|
10
10
|
import './scss/index.scss';
|
|
11
11
|
|
|
12
12
|
|
|
@@ -21,15 +21,10 @@ let modifiers: Record<Type, string> = {
|
|
|
21
21
|
info: 'black',
|
|
22
22
|
success: 'green'
|
|
23
23
|
},
|
|
24
|
-
state = reactive({
|
|
25
|
-
active: false,
|
|
26
|
-
messages: new Set as Set<Renderable<any>>,
|
|
27
|
-
type: '' as Type
|
|
28
|
-
}),
|
|
29
24
|
timeout = 250;
|
|
30
25
|
|
|
31
26
|
|
|
32
|
-
function activate(key: Type, messages: Renderable<any>, seconds: number
|
|
27
|
+
function activate(key: Type, messages: Renderable<any>, seconds: number, state: { active: boolean, messages: Set<Renderable<any>>, type: Type }) {
|
|
33
28
|
if (!Array.isArray(messages)) {
|
|
34
29
|
messages = [messages];
|
|
35
30
|
}
|
|
@@ -58,7 +53,7 @@ function activate(key: Type, messages: Renderable<any>, seconds: number = 0) {
|
|
|
58
53
|
state.active = true;
|
|
59
54
|
state.type = key;
|
|
60
55
|
|
|
61
|
-
if (seconds) {
|
|
56
|
+
if (seconds) {``
|
|
62
57
|
setTimeout(deactivate, 500 * seconds);
|
|
63
58
|
}
|
|
64
59
|
}, timeout);
|
|
@@ -75,7 +70,7 @@ function activate(key: Type, messages: Renderable<any>, seconds: number = 0) {
|
|
|
75
70
|
}
|
|
76
71
|
}
|
|
77
72
|
|
|
78
|
-
function deactivate() {
|
|
73
|
+
function deactivate(state: { active: boolean, messages: Set<Renderable<any>>, type: Type }) {
|
|
79
74
|
state.active = false;
|
|
80
75
|
|
|
81
76
|
setTimeout(() => {
|
|
@@ -84,82 +79,89 @@ function deactivate() {
|
|
|
84
79
|
}
|
|
85
80
|
|
|
86
81
|
|
|
87
|
-
|
|
82
|
+
export default (attributes: Attributes & { close?: Attributes, message?: Attributes }) => {
|
|
83
|
+
let state = reactive({
|
|
84
|
+
active: false,
|
|
85
|
+
messages: new Set as Set<Renderable<any>>,
|
|
86
|
+
type: '' as Type
|
|
87
|
+
});
|
|
88
88
|
|
|
89
|
-
error.response = (response: Response<any>) => {
|
|
90
|
-
if (response.ok) {
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
89
|
|
|
94
|
-
error(
|
|
95
|
-
response.errors.map(({ message, path }) => {
|
|
96
|
-
if (!path) {
|
|
97
|
-
return message;
|
|
98
|
-
}
|
|
90
|
+
const error = (messages: Renderable<any>, seconds: number = 0) => activate('error', messages, seconds, state);
|
|
99
91
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
};
|
|
92
|
+
error.response = (response: Response<any>) => {
|
|
93
|
+
if (response.ok) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
105
96
|
|
|
106
|
-
|
|
97
|
+
error(
|
|
98
|
+
response.errors.map(({ message, path }) => {
|
|
99
|
+
if (!path) {
|
|
100
|
+
return message;
|
|
101
|
+
}
|
|
107
102
|
|
|
108
|
-
|
|
103
|
+
return `${String(path).split('.').join(' ')} ${message}`;
|
|
104
|
+
}),
|
|
105
|
+
5
|
|
106
|
+
);
|
|
107
|
+
};
|
|
109
108
|
|
|
110
109
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
110
|
+
return {
|
|
111
|
+
content: html`
|
|
112
|
+
<div
|
|
113
|
+
class='alert anchor anchor--n ${() => state.active && '--active'}'
|
|
114
|
+
${omit(attributes, OMIT)}
|
|
115
|
+
>
|
|
116
|
+
<div class='--flex-row'>
|
|
117
|
+
${() => {
|
|
118
|
+
let type = state.type;
|
|
119
|
+
|
|
120
|
+
return html`
|
|
121
|
+
<div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
|
|
122
|
+
${icon({ class: '--margin-right --margin-600 --size-500' }, type === 'error' ? e : check)}
|
|
123
|
+
</div>
|
|
124
|
+
`;
|
|
125
|
+
}}
|
|
120
126
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
</div>
|
|
125
|
-
`;
|
|
126
|
-
}}
|
|
127
|
+
<div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
|
|
128
|
+
${() => {
|
|
129
|
+
let message = attributes.message;
|
|
127
130
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
+
return state.type && [...state.messages].map((content) => {
|
|
132
|
+
if (typeof content === 'string') {
|
|
133
|
+
return html`
|
|
134
|
+
<p ${message}>
|
|
135
|
+
${content}
|
|
136
|
+
</p>
|
|
137
|
+
`;
|
|
138
|
+
}
|
|
131
139
|
|
|
132
|
-
return state.type && [...state.messages].map((content) => {
|
|
133
|
-
if (typeof content === 'string') {
|
|
134
140
|
return html`
|
|
135
|
-
<
|
|
141
|
+
<div class='--flex-start'>
|
|
136
142
|
${content}
|
|
137
|
-
</
|
|
143
|
+
</div>
|
|
138
144
|
`;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<div class='--flex-start'>
|
|
143
|
-
${content}
|
|
144
|
-
</div>
|
|
145
|
-
`;
|
|
146
|
-
});
|
|
147
|
-
}}
|
|
145
|
+
});
|
|
146
|
+
}}
|
|
147
|
+
</div>
|
|
148
148
|
</div>
|
|
149
|
-
</div>
|
|
150
149
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
150
|
+
<div
|
|
151
|
+
class='alert-close button --padding-300'
|
|
152
|
+
onclick='${deactivate}'
|
|
153
|
+
${attributes.close}
|
|
154
|
+
>
|
|
155
|
+
<div class="icon" style='--size: 14px;'>
|
|
156
|
+
${svg.sprite(close)}
|
|
157
|
+
</div>
|
|
158
158
|
</div>
|
|
159
159
|
</div>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
160
|
+
`,
|
|
161
|
+
deactivate: () => deactivate(state),
|
|
162
|
+
error,
|
|
163
|
+
info: (messages: Renderable<any>, seconds: number = 0) => activate('info', messages, seconds, state),
|
|
164
|
+
success: (messages: Renderable<any>, seconds: number = 0) => activate('success', messages, seconds, state)
|
|
165
|
+
|
|
166
|
+
};
|
|
167
|
+
};
|