@esportsplus/ui 0.0.26 → 0.0.28
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/field/select.js +8 -7
- package/build/components/field/text.js +1 -1
- package/build/components/form/action.js +0 -1
- package/package.json +1 -1
- package/src/components/accordion/scss/accordion.scss +1 -1
- package/src/components/alert/scss/alert.scss +10 -20
- package/src/components/alert/scss/variables.scss +1 -2
- package/src/components/anchor/scss/anchor.scss +1 -2
- package/src/components/banner/scss/banner.scss +1 -1
- package/src/components/button/scss/button.scss +1 -2
- package/src/components/button/scss/variables.scss +1 -2
- package/src/components/card/scss/card.scss +1 -2
- package/src/components/card/scss/variables.scss +1 -1
- package/src/components/field/scss/_check.scss +1 -2
- package/src/components/field/scss/_text.scss +1 -2
- package/src/components/field/scss/field.scss +1 -2
- package/src/components/field/scss/variables.scss +1 -1
- package/src/components/field/select.ts +8 -7
- package/src/components/field/text.ts +1 -1
- package/src/components/form/action.ts +1 -1
- package/src/components/group/scss/variables.scss +0 -3
- package/src/components/link/scss/link.scss +1 -2
- package/src/components/link/scss/variables.scss +1 -2
- package/src/components/overlay/scss/overlay.scss +1 -1
- package/src/components/processing/scss/processing.scss +1 -1
- package/src/components/root/scss/variables.scss +1 -2
- package/src/components/sidebar/scss/sidebar.scss +1 -2
- package/src/components/sidebar/scss/variables.scss +1 -1
- package/src/components/tooltip/scss/tooltip.scss +3 -4
- package/src/css-utilities/[margin,padding]/scss/variables.scss +1 -2
- package/src/css-utilities/absolute/scss/absolute.scss +1 -1
- package/src/css-utilities/background/scss/variables.scss +1 -2
- package/src/css-utilities/border/scss/variables.scss +1 -2
- package/src/css-utilities/color/scss/variables.scss +1 -2
- package/src/css-utilities/flex/scss/flex.scss +1 -1
- package/src/css-utilities/hidden/scss/hidden.scss +1 -2
- package/src/css-utilities/index.scss +1 -2
- package/src/css-utilities/line-height/scss/variables.scss +1 -2
- package/src/css-utilities/size/scss/variables.scss +1 -2
- package/src/css-utilities/text/scss/text.scss +1 -2
- package/src/css-utilities/text/scss/variables.scss +1 -2
- package/src/css-utilities/width/scss/variables.scss +0 -3
- package/src/tokens/scss/breakpoints.scss +1 -1
- package/src/tokens/scss/color.scss +1 -1
- package/src/tokens/scss/state.scss +1 -1
|
@@ -4,13 +4,16 @@ import { form, scrollbar, root } from '../../components';
|
|
|
4
4
|
import description from './description';
|
|
5
5
|
import error from './error';
|
|
6
6
|
import title from './title';
|
|
7
|
-
function
|
|
7
|
+
function parse(keys, selected) {
|
|
8
8
|
let options = {};
|
|
9
9
|
for (let key of keys) {
|
|
10
10
|
options[key] = false;
|
|
11
11
|
}
|
|
12
12
|
options[selected] = true;
|
|
13
|
-
return
|
|
13
|
+
return {
|
|
14
|
+
options,
|
|
15
|
+
selected: selected || keys[0]
|
|
16
|
+
};
|
|
14
17
|
}
|
|
15
18
|
function template(data, state) {
|
|
16
19
|
let { attributes: a, html: h } = scrollbar({
|
|
@@ -56,13 +59,11 @@ function template(data, state) {
|
|
|
56
59
|
`;
|
|
57
60
|
}
|
|
58
61
|
export default (data) => {
|
|
59
|
-
let state = reactive({
|
|
62
|
+
let state = reactive(Object.assign({
|
|
60
63
|
active: false,
|
|
61
64
|
error: '',
|
|
62
|
-
options: options(Object.keys(data.options || {}), data.selected),
|
|
63
65
|
render: false,
|
|
64
|
-
|
|
65
|
-
});
|
|
66
|
+
}, parse(Object.keys(data.options || {}), data.selected)));
|
|
66
67
|
return html `
|
|
67
68
|
<div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
|
|
68
69
|
${title(data)}
|
|
@@ -82,8 +83,8 @@ export default (data) => {
|
|
|
82
83
|
class='field-tag field-tag--hidden'
|
|
83
84
|
name='${data.name}'
|
|
84
85
|
onclick='${() => { }}'
|
|
86
|
+
onrender='${form.input.attributes(state)}'
|
|
85
87
|
value='${() => state.selected}'
|
|
86
|
-
${form.input.attributes(state)}
|
|
87
88
|
>
|
|
88
89
|
|
|
89
90
|
<div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
|
|
@@ -30,9 +30,9 @@ export default (data) => {
|
|
|
30
30
|
class='field-tag --padding-400'
|
|
31
31
|
name='${data?.name || ''}'
|
|
32
32
|
placeholder='${data?.placeholder || ''}'
|
|
33
|
+
onrender='${form.input.attributes(state)}'
|
|
33
34
|
type='${data?.type || 'string'}'
|
|
34
35
|
${data?.value !== undefined ? `value='${data.value}'` : ''}
|
|
35
|
-
${form.input.attributes(state)}
|
|
36
36
|
>
|
|
37
37
|
|
|
38
38
|
${data?.mask?.content || ''}
|
package/package.json
CHANGED
|
@@ -7,8 +7,7 @@
|
|
|
7
7
|
*
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
@use '~@esportsplus/ui
|
|
11
|
-
@use '~@esportsplus/ui/tokens';
|
|
10
|
+
@use '~@esportsplus/ui';
|
|
12
11
|
|
|
13
12
|
.alert {
|
|
14
13
|
max-width: calc(100% - (var(--margin-horizontal) * 2));
|
|
@@ -27,8 +26,14 @@
|
|
|
27
26
|
}
|
|
28
27
|
|
|
29
28
|
|
|
30
|
-
&-
|
|
31
|
-
|
|
29
|
+
&-close {
|
|
30
|
+
@include lib.position(absolute, 0 100% 0 null);
|
|
31
|
+
animation: alert-close var(--transition-duration) ease-in-out;
|
|
32
|
+
transition: transform var(--transition-duration) ease-in-out;
|
|
33
|
+
z-index: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&-message {
|
|
32
37
|
opacity: 0;
|
|
33
38
|
transition:
|
|
34
39
|
opacity var(--transition-duration) ease-in-out,
|
|
@@ -37,7 +42,7 @@
|
|
|
37
42
|
@include tokens.state(inactive) {
|
|
38
43
|
pointer-events: none;
|
|
39
44
|
position: absolute;
|
|
40
|
-
transform: translateX(calc(25% *
|
|
45
|
+
transform: translateX(calc(25% * -1));
|
|
41
46
|
left: 0;
|
|
42
47
|
top: 0;
|
|
43
48
|
}
|
|
@@ -47,21 +52,6 @@
|
|
|
47
52
|
}
|
|
48
53
|
}
|
|
49
54
|
|
|
50
|
-
&-close {
|
|
51
|
-
@include lib.position(absolute, 0 100% 0 null);
|
|
52
|
-
animation: alert-close var(--transition-duration) ease-in-out;
|
|
53
|
-
transition: transform var(--transition-duration) ease-in-out;
|
|
54
|
-
z-index: 0;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
&-message {
|
|
58
|
-
--multiplier: -1;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
&-processing {
|
|
62
|
-
--multiplier: 1;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
55
|
&-timer {
|
|
66
56
|
height: var(--height);
|
|
67
57
|
transition: opacity var(--transition-duration) ease-in-out;
|
|
@@ -36,7 +36,7 @@ type Data = {
|
|
|
36
36
|
} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
function
|
|
39
|
+
function parse(keys: (number | string)[], selected: number | string) {
|
|
40
40
|
let options: Record<string, boolean> = {};
|
|
41
41
|
|
|
42
42
|
for (let key of keys) {
|
|
@@ -45,7 +45,10 @@ function options(keys: (number | string)[], selected: number | string) {
|
|
|
45
45
|
|
|
46
46
|
options[selected] = true;
|
|
47
47
|
|
|
48
|
-
return
|
|
48
|
+
return {
|
|
49
|
+
options,
|
|
50
|
+
selected: selected || keys[0]
|
|
51
|
+
};
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
function template(data: Data, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
|
|
@@ -100,13 +103,11 @@ function template(data: Data, state: { active: boolean, options: Record<number |
|
|
|
100
103
|
|
|
101
104
|
|
|
102
105
|
export default (data: Data) => {
|
|
103
|
-
let state = reactive({
|
|
106
|
+
let state = reactive(Object.assign({
|
|
104
107
|
active: false,
|
|
105
108
|
error: '',
|
|
106
|
-
options: options(Object.keys( data.options || {} ), data.selected),
|
|
107
109
|
render: false,
|
|
108
|
-
|
|
109
|
-
});
|
|
110
|
+
}, parse(Object.keys( data.options || {} ), data.selected)));
|
|
110
111
|
|
|
111
112
|
return html`
|
|
112
113
|
<div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
|
|
@@ -128,8 +129,8 @@ export default (data: Data) => {
|
|
|
128
129
|
class='field-tag field-tag--hidden'
|
|
129
130
|
name='${data.name}'
|
|
130
131
|
onclick='${() => { /* Prevent double click events from firing */ }}'
|
|
132
|
+
onrender='${form.input.attributes(state)}'
|
|
131
133
|
value='${() => state.selected}'
|
|
132
|
-
${form.input.attributes(state)}
|
|
133
134
|
>
|
|
134
135
|
|
|
135
136
|
<div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
|
|
@@ -48,9 +48,9 @@ export default (data: Data) => {
|
|
|
48
48
|
class='field-tag --padding-400'
|
|
49
49
|
name='${data?.name || ''}'
|
|
50
50
|
placeholder='${data?.placeholder || ''}'
|
|
51
|
+
onrender='${form.input.attributes(state)}'
|
|
51
52
|
type='${data?.type || 'string'}'
|
|
52
53
|
${data?.value !== undefined ? `value='${data.value}'` : ''}
|
|
53
|
-
${form.input.attributes(state)}
|
|
54
54
|
>
|
|
55
55
|
|
|
56
56
|
${data?.mask?.content || ''}
|
|
@@ -51,10 +51,10 @@ export default function(action: Action) {
|
|
|
51
51
|
alert.deactivate();
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
// TODO: replace with signal
|
|
54
55
|
event?.submitter?.classList.remove('button--processing');
|
|
55
56
|
},
|
|
56
57
|
start: () => {
|
|
57
|
-
alert.processing();
|
|
58
58
|
event?.submitter?.classList.add('button--processing');
|
|
59
59
|
}
|
|
60
60
|
},
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
@use '~@esportsplus/ui
|
|
2
|
-
@use '~@esportsplus/ui/tokens';
|
|
1
|
+
@use '~@esportsplus/ui';
|
|
3
2
|
@use 'center' as *;
|
|
4
3
|
@use 'east' as *;
|
|
5
4
|
@use 'north' as *;
|
|
@@ -72,8 +71,8 @@
|
|
|
72
71
|
|
|
73
72
|
|
|
74
73
|
// Shared With Positioning CSS
|
|
75
|
-
$active: '#{tokens.state(active,
|
|
76
|
-
$not-active: '#{tokens.state(inactive,
|
|
74
|
+
$active: '#{tokens.state(active, ".tooltip")} > &, #{tokens.state(active, ".tooltip")} :not(.tooltip) > &';
|
|
75
|
+
$not-active: '#{tokens.state(inactive, ".tooltip")} > &, #{tokens.state(inactive, ".tooltip")} :not(.tooltip) > &';
|
|
77
76
|
|
|
78
77
|
#{$active} {
|
|
79
78
|
opacity: 1;
|