@esportsplus/ui 0.38.0 → 0.39.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/build/components/alert/index.d.ts +22 -0
- package/build/components/alert/index.js +120 -0
- package/build/components/alert/scss/index.scss +2 -0
- package/build/components/anchor/scss/index.scss +1 -1
- package/build/components/back/index.d.ts +7 -0
- package/build/components/back/index.js +9 -0
- package/build/components/back/scss/index.scss +2 -0
- package/build/components/checkbox/scss/index.scss +1 -1
- package/build/components/index.d.ts +2 -0
- package/build/components/index.js +2 -0
- package/build/components/radio/scss/index.scss +1 -1
- package/build/components/switch/scss/index.scss +1 -1
- package/package.json +3 -3
- package/src/components/alert/index.ts +163 -0
- package/src/components/alert/scss/index.scss +50 -0
- package/src/components/alert/scss/variables.scss +3 -0
- package/src/components/anchor/scss/index.scss +14 -0
- package/src/components/back/index.ts +11 -0
- package/src/components/back/scss/index.scss +17 -0
- package/src/components/checkbox/scss/variables.scss +3 -2
- package/src/components/index.ts +2 -0
- package/src/components/radio/scss/variables.scss +3 -2
- package/src/components/switch/scss/variables.scss +3 -0
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Response } from '@esportsplus/action';
|
|
2
|
+
import { Attributes, Renderable } from '@esportsplus/template';
|
|
3
|
+
import './scss/index.scss';
|
|
4
|
+
declare function deactivate(): void;
|
|
5
|
+
declare const _default: {
|
|
6
|
+
content: (attributes: Attributes & {
|
|
7
|
+
close?: Attributes;
|
|
8
|
+
message?: Attributes;
|
|
9
|
+
}, { check, close, error }: {
|
|
10
|
+
check: string;
|
|
11
|
+
close: string;
|
|
12
|
+
error: string;
|
|
13
|
+
}) => Node;
|
|
14
|
+
deactivate: typeof deactivate;
|
|
15
|
+
error: {
|
|
16
|
+
(messages: Renderable<any>, seconds?: number): void;
|
|
17
|
+
response(response: Response<any>): void;
|
|
18
|
+
};
|
|
19
|
+
info: (messages: Renderable<any>, seconds?: number) => void;
|
|
20
|
+
success: (messages: Renderable<any>, seconds?: number) => void;
|
|
21
|
+
};
|
|
22
|
+
export default _default;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { reactive } from '@esportsplus/reactivity';
|
|
2
|
+
import { html, svg } from '@esportsplus/template';
|
|
3
|
+
import { omit } from '@esportsplus/utilities';
|
|
4
|
+
import { icon } from '@esportsplus/ui';
|
|
5
|
+
import './scss/index.scss';
|
|
6
|
+
const OMIT = ['close', 'message'];
|
|
7
|
+
let modifiers = {
|
|
8
|
+
error: 'red',
|
|
9
|
+
info: 'black',
|
|
10
|
+
success: 'green'
|
|
11
|
+
}, state = reactive({
|
|
12
|
+
active: false,
|
|
13
|
+
messages: new Set,
|
|
14
|
+
type: ''
|
|
15
|
+
}), timeout = 250;
|
|
16
|
+
function activate(key, messages, seconds = 0) {
|
|
17
|
+
if (!Array.isArray(messages)) {
|
|
18
|
+
messages = [messages];
|
|
19
|
+
}
|
|
20
|
+
if (!messages.length) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
if (state.type !== key) {
|
|
24
|
+
state.messages.clear();
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
state.type = '';
|
|
28
|
+
}
|
|
29
|
+
for (let message of messages) {
|
|
30
|
+
state.messages.add(message);
|
|
31
|
+
}
|
|
32
|
+
if (state.active) {
|
|
33
|
+
state.active = false;
|
|
34
|
+
setTimeout(() => {
|
|
35
|
+
state.active = true;
|
|
36
|
+
state.type = key;
|
|
37
|
+
if (seconds) {
|
|
38
|
+
setTimeout(deactivate, 500 * seconds);
|
|
39
|
+
}
|
|
40
|
+
}, timeout);
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
state.active = true;
|
|
45
|
+
state.type = key;
|
|
46
|
+
if (seconds) {
|
|
47
|
+
setTimeout(deactivate, 500 * seconds);
|
|
48
|
+
}
|
|
49
|
+
}, timeout);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
function deactivate() {
|
|
53
|
+
state.active = false;
|
|
54
|
+
setTimeout(() => {
|
|
55
|
+
state.messages.clear();
|
|
56
|
+
}, timeout);
|
|
57
|
+
}
|
|
58
|
+
const error = (messages, seconds = 0) => activate('error', messages, seconds);
|
|
59
|
+
error.response = (response) => {
|
|
60
|
+
if (response.ok) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
error(response.errors.map(({ message, path }) => {
|
|
64
|
+
if (!path) {
|
|
65
|
+
return message;
|
|
66
|
+
}
|
|
67
|
+
return `${String(path).split('.').join(' ')} ${message}`;
|
|
68
|
+
}), 5);
|
|
69
|
+
};
|
|
70
|
+
const info = (messages, seconds = 0) => activate('info', messages, seconds);
|
|
71
|
+
const success = (messages, seconds = 0) => activate('success', messages, seconds);
|
|
72
|
+
const content = (attributes, { check, close, error }) => {
|
|
73
|
+
return html `
|
|
74
|
+
<div
|
|
75
|
+
class='alert anchor anchor--n card --flex-fill --flex-row --flex-vertical ${() => state.active && '--active'}'
|
|
76
|
+
style='--max-width: 640px;'
|
|
77
|
+
${omit(attributes, OMIT)}
|
|
78
|
+
>
|
|
79
|
+
${() => {
|
|
80
|
+
let type = state.type;
|
|
81
|
+
return html `
|
|
82
|
+
<div class='--flex-vertical' style='${`--color: var(--color-${modifiers[type]}-400);`}'>
|
|
83
|
+
${icon({ class: '--margin-right --margin-600 --size-500' }, type === 'error' ? error : check)}
|
|
84
|
+
</div>
|
|
85
|
+
`;
|
|
86
|
+
}}
|
|
87
|
+
|
|
88
|
+
<div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
|
|
89
|
+
${() => {
|
|
90
|
+
let message = attributes.message;
|
|
91
|
+
return state.type && [...state.messages].map((content, i) => {
|
|
92
|
+
if (typeof content === 'string') {
|
|
93
|
+
return html `
|
|
94
|
+
<p class='${i === 0 && '--text-crop-top'}' ${message}>
|
|
95
|
+
${content}
|
|
96
|
+
</p>
|
|
97
|
+
`;
|
|
98
|
+
}
|
|
99
|
+
return html `
|
|
100
|
+
<div class='--flex-start'>
|
|
101
|
+
${content}
|
|
102
|
+
</div>
|
|
103
|
+
`;
|
|
104
|
+
});
|
|
105
|
+
}}
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div
|
|
109
|
+
class='alert-close button --padding-300'
|
|
110
|
+
onclick='${deactivate}'
|
|
111
|
+
${attributes.close}
|
|
112
|
+
>
|
|
113
|
+
<div class="icon" style='--size: 14px;'>
|
|
114
|
+
${svg.sprite(close)}
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
`;
|
|
119
|
+
};
|
|
120
|
+
export default { content, deactivate, error, info, success };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}.alert{--max-width:480px;max-width:var(--max-width);width:calc(100% - var(--margin-horizontal)*2);z-index:11;position:fixed}.alert.anchor--n:not(.--active){transform:translate(50%,-100%)}.alert.anchor--ne:not(.--active){transform:translateY(-100%)}.alert-close{bottom:50%;right:var(--size-500);z-index:0;position:absolute;transform:translateY(50%)}.alert-message{opacity:0;transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out}.alert-message:not(.--active){pointer-events:none;position:absolute;top:0;left:0;transform:translate(-25%)}.alert-message.--active{opacity:1}}
|
|
2
|
+
/*$vite$:1*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}}
|
|
1
|
+
@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal)*2);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.checkbox{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:45deg;--scale:var(--scale-default);--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98;--size:var(--size-600);--width:var(--height);--width-switch:40px}.checkbox:before{--border-width:5px;--box-shadow:1px 1px 0 #00000029;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .checkbox:before{--translateY:100%}.checkbox label:not(.--active):not(.--active):hover,.checkbox:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--
|
|
1
|
+
@layer components {.checkbox{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:45deg;--scale:var(--scale-default);--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98;--size:var(--size-600);--width:var(--height);--width-switch:40px}.checkbox:before{--border-width:5px;--box-shadow:1px 1px 0 #00000029;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .checkbox:before{--translateY:100%}.checkbox label:not(.--active):not(.--active):hover,.checkbox:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.checkbox label:not(.--active):not(.--active):active,.checkbox:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.checkbox.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.checkbox{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.checkbox:invalid,.checkbox:required{box-shadow:none}.checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:bottom;width:var(--width);position:absolute;bottom:50%;right:92%}.checkbox-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { default as accordion } from './accordion/index.js';
|
|
2
|
+
export { default as alert } from './alert/index.js';
|
|
3
|
+
export { default as back } from './back/index.js';
|
|
2
4
|
export { default as button } from './button/index.js';
|
|
3
5
|
export { default as checkbox } from './checkbox/index.js';
|
|
4
6
|
export { default as clipboard } from './clipboard/index.js';
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { default as accordion } from './accordion/index.js';
|
|
2
|
+
export { default as alert } from './alert/index.js';
|
|
3
|
+
export { default as back } from './back/index.js';
|
|
2
4
|
export { default as button } from './button/index.js';
|
|
3
5
|
export { default as checkbox } from './checkbox/index.js';
|
|
4
6
|
export { default as clipboard } from './clipboard/index.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.radio{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:100%;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:1;--opacity-default:.4;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7;--size:var(--size-600);--width:var(--height);--width-switch:40px}.radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--box-shadow:0 1px 0 #00000029;--translateX:50%;--translateY:50%;--width:var(--height)}.radio label:not(.--active):not(.--active):hover,.radio:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--
|
|
1
|
+
@layer components {.radio{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:100%;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:1;--opacity-default:.4;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7;--size:var(--size-600);--width:var(--height);--width-switch:40px}.radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--box-shadow:0 1px 0 #00000029;--translateX:50%;--translateY:50%;--width:var(--height)}.radio label:not(.--active):not(.--active):hover,.radio:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.radio label:not(.--active):not(.--active):active,.radio:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.radio.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.radio{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.radio:invalid,.radio:required{box-shadow:none}.radio:before{background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute;bottom:50%;right:50%}.radio-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.switch{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:240px;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width:var(--width-switch);--width-switch:40px}.switch:before{--box-shadow:0 1px 0 #00000029;--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--translateX:0px;--translateY:0px;--width:var(--height)}.field.--active .switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.switch label:not(.--active):not(.--active):hover,.switch:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.switch label:not(.--active):not(.--active):active,.switch:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.switch.--active{--opacity:var(--opacity-active);--scale:var(--scale-active)}.switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.switch:invalid,.switch:required{box-shadow:none}.switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute}.switch-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
1
|
+
@layer components {.switch{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:240px;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width:var(--width-switch);--width-switch:40px}.switch:before{--box-shadow:0 1px 0 #00000029;--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--translateX:0px;--translateY:0px;--width:var(--height)}.field.--active .switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.switch label:not(.--active):not(.--active):hover,.switch:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.switch label:not(.--active):not(.--active):active,.switch:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.switch.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.switch:invalid,.switch:required{box-shadow:none}.switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute}.switch-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
},
|
|
11
11
|
"devDependencies": {
|
|
12
12
|
"@esportsplus/typescript": "^0.9.2",
|
|
13
|
-
"@types/node": "^24.
|
|
13
|
+
"@types/node": "^24.9.1",
|
|
14
14
|
"autoprefixer": "^10.4.21",
|
|
15
15
|
"glob": "^11.0.3",
|
|
16
16
|
"lightningcss": "^1.30.2",
|
|
17
17
|
"npm-run-all": "^4.1.5",
|
|
18
18
|
"sass": "^1.93.2",
|
|
19
|
-
"vite": "^7.1.
|
|
19
|
+
"vite": "^7.1.12"
|
|
20
20
|
},
|
|
21
21
|
"exports": {
|
|
22
22
|
"./css-utilities.scss": "./build/css-utilities/index.scss",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"private": false,
|
|
43
43
|
"sideEffects": false,
|
|
44
44
|
"type": "module",
|
|
45
|
-
"version": "0.
|
|
45
|
+
"version": "0.39.0",
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build": "run-s build:vite build:ts",
|
|
48
48
|
"build:ts": "tsc && tsc-alias",
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { Response } from '@esportsplus/action';
|
|
2
|
+
import { reactive } from '@esportsplus/reactivity';
|
|
3
|
+
import { html, svg, Attributes, Renderable } from '@esportsplus/template';
|
|
4
|
+
import { omit } from '@esportsplus/utilities';
|
|
5
|
+
import { icon } from '@esportsplus/ui';
|
|
6
|
+
import './scss/index.scss';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
type Type = 'error' | 'info' | 'success';
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
const OMIT = ['close', 'message'];
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
let modifiers: Record<Type, string> = {
|
|
16
|
+
error: 'red',
|
|
17
|
+
info: 'black',
|
|
18
|
+
success: 'green'
|
|
19
|
+
},
|
|
20
|
+
state = reactive({
|
|
21
|
+
active: false,
|
|
22
|
+
messages: new Set as Set<Renderable<any>>,
|
|
23
|
+
type: '' as Type
|
|
24
|
+
}),
|
|
25
|
+
timeout = 250;
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
function activate(key: Type, messages: Renderable<any>, seconds: number = 0) {
|
|
29
|
+
if (!Array.isArray(messages)) {
|
|
30
|
+
messages = [messages];
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (!messages.length) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (state.type !== key) {
|
|
38
|
+
state.messages.clear();
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
// @ts-ignore
|
|
42
|
+
state.type = '';
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
for (let message of messages) {
|
|
46
|
+
state.messages.add(message);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (state.active) {
|
|
50
|
+
state.active = false;
|
|
51
|
+
|
|
52
|
+
// Slide in animation needs time
|
|
53
|
+
setTimeout(() => {
|
|
54
|
+
state.active = true;
|
|
55
|
+
state.type = key;
|
|
56
|
+
|
|
57
|
+
if (seconds) {
|
|
58
|
+
setTimeout(deactivate, 500 * seconds);
|
|
59
|
+
}
|
|
60
|
+
}, timeout);
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
setTimeout(() => {
|
|
64
|
+
state.active = true;
|
|
65
|
+
state.type = key;
|
|
66
|
+
|
|
67
|
+
if (seconds) {
|
|
68
|
+
setTimeout(deactivate, 500 * seconds);
|
|
69
|
+
}
|
|
70
|
+
}, timeout);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function deactivate() {
|
|
75
|
+
state.active = false;
|
|
76
|
+
|
|
77
|
+
setTimeout(() => {
|
|
78
|
+
state.messages.clear();
|
|
79
|
+
}, timeout);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
const error = (messages: Renderable<any>, seconds: number = 0) => activate('error', messages, seconds);
|
|
84
|
+
|
|
85
|
+
error.response = (response: Response<any>) => {
|
|
86
|
+
if (response.ok) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
error(
|
|
91
|
+
response.errors.map(({ message, path }) => {
|
|
92
|
+
if (!path) {
|
|
93
|
+
return message;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return `${String(path).split('.').join(' ')} ${message}`;
|
|
97
|
+
}),
|
|
98
|
+
5
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
const info = (messages: Renderable<any>, seconds: number = 0) => activate('info', messages, seconds);
|
|
103
|
+
|
|
104
|
+
const success = (messages: Renderable<any>, seconds: number = 0) => activate('success', messages, seconds);
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
const content = (
|
|
108
|
+
attributes: Attributes & { close?: Attributes, message?: Attributes },
|
|
109
|
+
{ check, close, error }: { check: string, close: string, error: string }
|
|
110
|
+
) => {
|
|
111
|
+
return html`
|
|
112
|
+
<div
|
|
113
|
+
class='alert anchor anchor--n card --flex-fill --flex-row --flex-vertical ${() => state.active && '--active'}'
|
|
114
|
+
style='--max-width: 640px;'
|
|
115
|
+
${omit(attributes, OMIT)}
|
|
116
|
+
>
|
|
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' ? error : check)}
|
|
123
|
+
</div>
|
|
124
|
+
`;
|
|
125
|
+
}}
|
|
126
|
+
|
|
127
|
+
<div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
|
|
128
|
+
${() => {
|
|
129
|
+
let message = attributes.message;
|
|
130
|
+
|
|
131
|
+
return state.type && [...state.messages].map((content, i) => {
|
|
132
|
+
if (typeof content === 'string') {
|
|
133
|
+
return html`
|
|
134
|
+
<p class='${i === 0 && '--text-crop-top'}' ${message}>
|
|
135
|
+
${content}
|
|
136
|
+
</p>
|
|
137
|
+
`;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
return html`
|
|
141
|
+
<div class='--flex-start'>
|
|
142
|
+
${content}
|
|
143
|
+
</div>
|
|
144
|
+
`;
|
|
145
|
+
});
|
|
146
|
+
}}
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div
|
|
150
|
+
class='alert-close button --padding-300'
|
|
151
|
+
onclick='${deactivate}'
|
|
152
|
+
${attributes.close}
|
|
153
|
+
>
|
|
154
|
+
<div class="icon" style='--size: 14px;'>
|
|
155
|
+
${svg.sprite(close)}
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
`;
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
export default { content, deactivate, error, info, success };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
@use '../../anchor/scss';
|
|
2
|
+
@use '/lib';
|
|
3
|
+
@use '/tokens';
|
|
4
|
+
@use 'variables';
|
|
5
|
+
|
|
6
|
+
.alert {
|
|
7
|
+
max-width: var(--max-width);
|
|
8
|
+
position: fixed;
|
|
9
|
+
width: calc(100% - (var(--margin-horizontal) * 2));
|
|
10
|
+
z-index: 11;
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
&.anchor--n {
|
|
14
|
+
@include tokens.state(inactive) {
|
|
15
|
+
transform: translate(50%, -100%);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&.anchor--ne {
|
|
20
|
+
@include tokens.state(inactive) {
|
|
21
|
+
transform: translateY(-100%);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
&-close {
|
|
27
|
+
@include lib.position(absolute, vertical);
|
|
28
|
+
right: var(--size-500);
|
|
29
|
+
z-index: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&-message {
|
|
33
|
+
opacity: 0;
|
|
34
|
+
transition:
|
|
35
|
+
opacity var(--transition-duration) ease-in-out,
|
|
36
|
+
transform var(--transition-duration) ease-in-out;
|
|
37
|
+
|
|
38
|
+
@include tokens.state(inactive) {
|
|
39
|
+
pointer-events: none;
|
|
40
|
+
position: absolute;
|
|
41
|
+
transform: translateX(calc(25% * -1));
|
|
42
|
+
left: 0;
|
|
43
|
+
top: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@include tokens.state(active) {
|
|
47
|
+
opacity: 1;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -20,6 +20,12 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
|
|
23
|
+
&--n,
|
|
24
|
+
&--s {
|
|
25
|
+
right: 50%;
|
|
26
|
+
transform: translateX(50%);
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
&--ne,
|
|
24
30
|
&--nw {
|
|
25
31
|
top: var(--margin-vertical);
|
|
@@ -39,4 +45,12 @@
|
|
|
39
45
|
&--sw {
|
|
40
46
|
left: var(--margin-horizontal);
|
|
41
47
|
}
|
|
48
|
+
|
|
49
|
+
&--n {
|
|
50
|
+
top: var(--margin-vertical);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&--s {
|
|
54
|
+
bottom: var(--margin-vertical);
|
|
55
|
+
}
|
|
42
56
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { html, Attributes, Renderable } from '@esportsplus/template';
|
|
2
|
+
import './scss/index.scss';
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export default ({ attributes, content }: { attributes?: Attributes, content?: Renderable<any> }) => {
|
|
6
|
+
return html`
|
|
7
|
+
<a class='back link --padding-0px --flex-vertical' ${attributes}>
|
|
8
|
+
${content}
|
|
9
|
+
</a>
|
|
10
|
+
`;
|
|
11
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@use '@esportsplus/ui/tokens.scss';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
.back {
|
|
5
|
+
&-arrow {
|
|
6
|
+
transform: rotate(-90deg);
|
|
7
|
+
transition:
|
|
8
|
+
color var(--transition-duration) ease-in-out,
|
|
9
|
+
transform var(--transition-duration) ease-in-out;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@include tokens.state(hover) {
|
|
13
|
+
.back-arrow {
|
|
14
|
+
transform: rotate(-90deg) translateY(-2px);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -50,7 +50,6 @@
|
|
|
50
50
|
--background: var(--background-hover);
|
|
51
51
|
--border-color: var(--border-color-hover);
|
|
52
52
|
--box-shadow: var(--box-shadow-hover);
|
|
53
|
-
--color: var(--color-hover);
|
|
54
53
|
--opacity: var(--opacity-hover);
|
|
55
54
|
--scale: var(--scale-hover);
|
|
56
55
|
}
|
|
@@ -59,13 +58,15 @@
|
|
|
59
58
|
--background: var(--background-pressed);
|
|
60
59
|
--border-color: var(--border-color-pressed);
|
|
61
60
|
--box-shadow: var(--box-shadow-pressed);
|
|
62
|
-
--color: var(--color-pressed);
|
|
63
61
|
--opacity: var(--opacity-pressed);
|
|
64
62
|
--scale: var(--scale-pressed);
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
65
|
|
|
68
66
|
#{tokens.state(active)} {
|
|
67
|
+
--background: var(--background-active);
|
|
68
|
+
--border-color: var(--border-color-active);
|
|
69
|
+
--box-shadow: var(--box-shadow-active);
|
|
69
70
|
--opacity: var(--opacity-active);
|
|
70
71
|
--scale: var(--scale-active);
|
|
71
72
|
}
|
package/src/components/index.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { default as accordion } from './accordion';
|
|
2
|
+
export { default as alert } from './alert';
|
|
3
|
+
export { default as back } from './back';
|
|
2
4
|
export { default as button } from './button';
|
|
3
5
|
export { default as checkbox } from './checkbox';
|
|
4
6
|
export { default as clipboard } from './clipboard';
|
|
@@ -44,7 +44,6 @@
|
|
|
44
44
|
--background: var(--background-hover);
|
|
45
45
|
--border-color: var(--border-color-hover);
|
|
46
46
|
--box-shadow: var(--box-shadow-hover);
|
|
47
|
-
--color: var(--color-hover);
|
|
48
47
|
--opacity: var(--opacity-hover);
|
|
49
48
|
--scale: var(--scale-hover);
|
|
50
49
|
}
|
|
@@ -53,13 +52,15 @@
|
|
|
53
52
|
--background: var(--background-pressed);
|
|
54
53
|
--border-color: var(--border-color-pressed);
|
|
55
54
|
--box-shadow: var(--box-shadow-pressed);
|
|
56
|
-
--color: var(--color-pressed);
|
|
57
55
|
--opacity: var(--opacity-pressed);
|
|
58
56
|
--scale: var(--scale-pressed);
|
|
59
57
|
}
|
|
60
58
|
}
|
|
61
59
|
|
|
62
60
|
#{tokens.state(active)} {
|
|
61
|
+
--background: var(--background-active);
|
|
62
|
+
--border-color: var(--border-color-active);
|
|
63
|
+
--box-shadow: var(--box-shadow-active);
|
|
63
64
|
--opacity: var(--opacity-active);
|
|
64
65
|
--scale: var(--scale-active);
|
|
65
66
|
}
|