@energie360/ui-library 0.1.41 → 0.1.42
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/components/inline-edit/u-inline-edit.vue +13 -1
- package/components/navigation-panel-tile/navigation-panel-tile.scss +7 -1
- package/components/notification-list/notification-list.scss +3 -3
- package/layout/portal-content-aside/portal-content-aside.scss +14 -9
- package/modules/toast/toast-message.scss +2 -2
- package/modules/toast/toast.scss +7 -5
- package/modules/toast/u-toast-message.vue +14 -16
- package/modules/toast/u-toast.vue +15 -0
- package/package.json +1 -1
|
@@ -60,13 +60,25 @@ if (activeEdit) {
|
|
|
60
60
|
|
|
61
61
|
const collapse = () => {
|
|
62
62
|
expanded.value = false
|
|
63
|
+
emit('collapsed')
|
|
63
64
|
|
|
64
65
|
if (update) {
|
|
65
66
|
update('')
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
69
|
|
|
69
|
-
|
|
70
|
+
const expand = () => {
|
|
71
|
+
expanded.value = true
|
|
72
|
+
emit('expanded')
|
|
73
|
+
|
|
74
|
+
update && update(editId)
|
|
75
|
+
|
|
76
|
+
setTimeout(() => {
|
|
77
|
+
rootEl.value.scrollIntoView()
|
|
78
|
+
}, 80)
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
defineExpose({ collapse, expand })
|
|
70
82
|
</script>
|
|
71
83
|
|
|
72
84
|
<template>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use '../../base/abstracts
|
|
1
|
+
@use '../../base/abstracts' as a;
|
|
2
2
|
|
|
3
3
|
.navigation-panel-tile {
|
|
4
4
|
display: flex;
|
|
@@ -26,6 +26,12 @@
|
|
|
26
26
|
border-color: var(--e-c-mono-200);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
&.greyed {
|
|
30
|
+
.navigation-panel-tile__icon-wrapper {
|
|
31
|
+
color: var(--e-c-mono-500);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
29
35
|
&.disabled {
|
|
30
36
|
pointer-events: none;
|
|
31
37
|
border-color: var(--e-c-mono-200);
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
// This vertical centered style only works in the portal-main layout.
|
|
8
8
|
// It's not really possible to do this "correctly" at the moment, because `portal-main__content` is `display: block`.
|
|
9
9
|
// With `display: flex` it would work, but this would need some refactoring.
|
|
10
|
-
position: relative;
|
|
11
|
-
top: 50%;
|
|
12
|
-
transform: translateY(-100%);
|
|
10
|
+
// position: relative;
|
|
11
|
+
// top: 50%;
|
|
12
|
+
// transform: translateY(-100%);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -3,7 +3,18 @@
|
|
|
3
3
|
.portal-content-aside-container {
|
|
4
4
|
container-type: inline-size;
|
|
5
5
|
|
|
6
|
-
@container (width <=
|
|
6
|
+
@container (width <= 880px) {
|
|
7
|
+
.portal-content-aside {
|
|
8
|
+
row-gap: var(--e-space-6);
|
|
9
|
+
column-gap: var(--e-space-8);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.portal-content-aside {
|
|
13
|
+
grid-template-columns: auto a.rem(280);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@container (width <= 700px) {
|
|
7
18
|
.portal-content-aside {
|
|
8
19
|
display: flex;
|
|
9
20
|
flex-direction: column;
|
|
@@ -16,14 +27,8 @@
|
|
|
16
27
|
display: grid;
|
|
17
28
|
grid-template-columns: auto a.rem(320);
|
|
18
29
|
grid-template-rows: repeat(2, auto);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
// @include a.bp(lg) {
|
|
23
|
-
// display: flex;
|
|
24
|
-
// flex-direction: column;
|
|
25
|
-
// row-gap: var(--e-space-6);
|
|
26
|
-
// }
|
|
30
|
+
column-gap: var(--e-space-24);
|
|
31
|
+
row-gap: var(--e-space-12);
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
.portal-content-aside__main {
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.toast-message__inner {
|
|
39
|
-
background-color: var(--e-c-signal-01-
|
|
39
|
+
background-color: var(--e-c-signal-01-900);
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.toast-message__inner {
|
|
49
|
-
background-color: var(--e-c-signal-03-
|
|
49
|
+
background-color: var(--e-c-signal-03-900);
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
|
package/modules/toast/toast.scss
CHANGED
|
@@ -3,12 +3,14 @@
|
|
|
3
3
|
.toast {
|
|
4
4
|
z-index: a.$layer-message;
|
|
5
5
|
position: fixed;
|
|
6
|
-
bottom: var(--
|
|
7
|
-
left:
|
|
6
|
+
bottom: var(--toast-offset-bottom);
|
|
7
|
+
padding-left: var(--toast-margin-left);
|
|
8
|
+
padding-right: var(--toast-margin-left);
|
|
9
|
+
left: var(--toast-offset-left);
|
|
8
10
|
display: flex;
|
|
9
11
|
flex-direction: column-reverse;
|
|
10
|
-
align-items:
|
|
11
|
-
width: 100
|
|
12
|
-
|
|
12
|
+
align-items: var(--toast-align);
|
|
13
|
+
width: calc(100% - var(--toast-offset-left));
|
|
14
|
+
gap: var(--e-space-4);
|
|
13
15
|
pointer-events: none;
|
|
14
16
|
}
|
|
@@ -22,23 +22,21 @@ const close = () => dismiss(id)
|
|
|
22
22
|
|
|
23
23
|
<template>
|
|
24
24
|
<div :class="['toast-message', type, { 'fade-in': fadeIn }]">
|
|
25
|
-
<div class="
|
|
26
|
-
<div class="toast-
|
|
27
|
-
<
|
|
28
|
-
<UIcon :name="MessageType[type]"></UIcon>
|
|
29
|
-
</div>
|
|
30
|
-
<div ref="message" class="toast-message__message">
|
|
31
|
-
{{ message }}
|
|
32
|
-
</div>
|
|
33
|
-
<button
|
|
34
|
-
class="toast-message__close-button"
|
|
35
|
-
type="button"
|
|
36
|
-
aria-label="Close message"
|
|
37
|
-
@click="close"
|
|
38
|
-
>
|
|
39
|
-
<UIcon name="close"></UIcon>
|
|
40
|
-
</button>
|
|
25
|
+
<div class="toast-message__inner">
|
|
26
|
+
<div class="toast-message__icon">
|
|
27
|
+
<UIcon :name="MessageType[type]"></UIcon>
|
|
41
28
|
</div>
|
|
29
|
+
<div ref="message" class="toast-message__message">
|
|
30
|
+
{{ message }}
|
|
31
|
+
</div>
|
|
32
|
+
<button
|
|
33
|
+
class="toast-message__close-button"
|
|
34
|
+
type="button"
|
|
35
|
+
aria-label="Close message"
|
|
36
|
+
@click="close"
|
|
37
|
+
>
|
|
38
|
+
<UIcon name="close"></UIcon>
|
|
39
|
+
</button>
|
|
42
40
|
</div>
|
|
43
41
|
</div>
|
|
44
42
|
</template>
|
|
@@ -30,3 +30,18 @@ import { toasts } from './useToast'
|
|
|
30
30
|
</style>
|
|
31
31
|
|
|
32
32
|
<style scoped lang="scss" src="./toast.scss"></style>
|
|
33
|
+
<style lang="scss">
|
|
34
|
+
:root {
|
|
35
|
+
// Values
|
|
36
|
+
--toast-align-center: center;
|
|
37
|
+
--toast-align-left: flex-start;
|
|
38
|
+
--toast-align-right: flex-end;
|
|
39
|
+
|
|
40
|
+
// Default Settings
|
|
41
|
+
--toast-align: var(--toast-align-center);
|
|
42
|
+
--toast-margin-left: var(--e-space-5);
|
|
43
|
+
--toast-margin-right: var(--e-space-5);
|
|
44
|
+
--toast-offset-left: 0px;
|
|
45
|
+
--toast-offset-bottom: var(--e-space-6);
|
|
46
|
+
}
|
|
47
|
+
</style>
|