@esportsplus/ui 0.39.0 → 0.39.2
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.
|
@@ -72,37 +72,38 @@ const success = (messages, seconds = 0) => activate('success', messages, seconds
|
|
|
72
72
|
const content = (attributes, { check, close, error }) => {
|
|
73
73
|
return html `
|
|
74
74
|
<div
|
|
75
|
-
class='alert anchor anchor--n
|
|
76
|
-
style='--max-width: 640px;'
|
|
75
|
+
class='alert anchor anchor--n ${() => state.active && '--active'}'
|
|
77
76
|
${omit(attributes, OMIT)}
|
|
78
77
|
>
|
|
79
|
-
|
|
78
|
+
<div class='--flex-row'>
|
|
79
|
+
${() => {
|
|
80
80
|
let type = state.type;
|
|
81
81
|
return html `
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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
86
|
}}
|
|
87
87
|
|
|
88
|
-
|
|
89
|
-
|
|
88
|
+
<div class='--flex-fill --flex-column --gap-100 --padding-right --padding-800'>
|
|
89
|
+
${() => {
|
|
90
90
|
let message = attributes.message;
|
|
91
|
-
return state.type && [...state.messages].map((content
|
|
91
|
+
return state.type && [...state.messages].map((content) => {
|
|
92
92
|
if (typeof content === 'string') {
|
|
93
93
|
return html `
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
94
|
+
<p ${message}>
|
|
95
|
+
${content}
|
|
96
|
+
</p>
|
|
97
|
+
`;
|
|
98
98
|
}
|
|
99
99
|
return html `
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
100
|
+
<div class='--flex-start'>
|
|
101
|
+
${content}
|
|
102
|
+
</div>
|
|
103
|
+
`;
|
|
104
104
|
});
|
|
105
105
|
}}
|
|
106
|
+
</div>
|
|
106
107
|
</div>
|
|
107
108
|
|
|
108
109
|
<div
|
|
@@ -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--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:
|
|
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:640px;max-width:var(--max-width);padding:var(--padding-vertical)var(--padding-horizontal);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
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -110,40 +110,41 @@ const content = (
|
|
|
110
110
|
) => {
|
|
111
111
|
return html`
|
|
112
112
|
<div
|
|
113
|
-
class='alert anchor anchor--n
|
|
114
|
-
style='--max-width: 640px;'
|
|
113
|
+
class='alert anchor anchor--n ${() => state.active && '--active'}'
|
|
115
114
|
${omit(attributes, OMIT)}
|
|
116
115
|
>
|
|
117
|
-
|
|
118
|
-
|
|
116
|
+
<div class='--flex-row'>
|
|
117
|
+
${() => {
|
|
118
|
+
let type = state.type;
|
|
119
119
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
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
126
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
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) => {
|
|
132
|
+
if (typeof content === 'string') {
|
|
133
|
+
return html`
|
|
134
|
+
<p ${message}>
|
|
135
|
+
${content}
|
|
136
|
+
</p>
|
|
137
|
+
`;
|
|
138
|
+
}
|
|
130
139
|
|
|
131
|
-
return state.type && [...state.messages].map((content, i) => {
|
|
132
|
-
if (typeof content === 'string') {
|
|
133
140
|
return html`
|
|
134
|
-
<
|
|
141
|
+
<div class='--flex-start'>
|
|
135
142
|
${content}
|
|
136
|
-
</
|
|
143
|
+
</div>
|
|
137
144
|
`;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
<div class='--flex-start'>
|
|
142
|
-
${content}
|
|
143
|
-
</div>
|
|
144
|
-
`;
|
|
145
|
-
});
|
|
146
|
-
}}
|
|
145
|
+
});
|
|
146
|
+
}}
|
|
147
|
+
</div>
|
|
147
148
|
</div>
|
|
148
149
|
|
|
149
150
|
<div
|