@awes-io/ui 2.144.0 → 2.144.1
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/assets/css/components/alert.css +38 -28
- package/assets/css/components/button.css +8 -0
- package/assets/css/main.css +1 -0
- package/components/2_molecules/AwAlert.vue +36 -31
- package/components/2_molecules/AwButton.vue +1 -0
- package/docs/components/molecules/aw-alert.md +37 -10
- package/package.json +2 -2
|
@@ -1,51 +1,59 @@
|
|
|
1
1
|
.aw-alert {
|
|
2
2
|
display: flex;
|
|
3
|
-
|
|
3
|
+
align-items: flex-start;
|
|
4
|
+
gap: 1rem;
|
|
4
5
|
|
|
5
|
-
padding:
|
|
6
|
+
padding: 1rem;
|
|
6
7
|
border-radius: 0.625rem;
|
|
7
8
|
background: var(--aw-alert-color);
|
|
8
9
|
|
|
9
10
|
&__icon {
|
|
10
|
-
margin-right: 0.625rem;
|
|
11
11
|
color: var(--aw-alert-on-color);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.aw-description {
|
|
14
|
+
/* .aw-description {
|
|
15
15
|
color: var(--c-on-surface);
|
|
16
16
|
|
|
17
17
|
a {
|
|
18
18
|
color: var(--c-on-surface);
|
|
19
19
|
}
|
|
20
|
-
}
|
|
20
|
+
} */
|
|
21
21
|
|
|
22
22
|
&__title {
|
|
23
23
|
display: flex;
|
|
24
|
-
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
gap: 0.25rem;
|
|
26
|
+
margin-inline-end: auto;
|
|
27
|
+
|
|
28
|
+
color: var(--c-on-surface);
|
|
29
|
+
font-size: 0.875rem;
|
|
30
|
+
line-height: 1.2857;
|
|
25
31
|
|
|
26
32
|
&-text {
|
|
27
33
|
font-weight: 700;
|
|
28
|
-
|
|
34
|
+
line-height: 1.1428;
|
|
29
35
|
}
|
|
30
36
|
}
|
|
31
37
|
|
|
32
38
|
&__buttons {
|
|
33
39
|
display: flex;
|
|
40
|
+
gap: 1rem;
|
|
34
41
|
|
|
35
42
|
align-items: center;
|
|
36
|
-
margin-top: 0.25rem;
|
|
37
43
|
|
|
38
44
|
font-size: 0.875rem;
|
|
39
45
|
line-height: 1.125rem;
|
|
40
46
|
font-weight: 700;
|
|
41
47
|
|
|
42
48
|
:where(:is(a, button):not(.aw-button)) {
|
|
43
|
-
--btn-color: var(--aw-alert-on-color)
|
|
44
|
-
color: var(--aw-alert-on-color)
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
:where(:is(a, button):not(.aw-button)) {
|
|
49
|
+
--btn-color: var(--aw-alert-on-color);
|
|
50
|
+
color: var(--aw-alert-on-color);
|
|
48
51
|
text-decoration: underline;
|
|
52
|
+
|
|
53
|
+
&:hover {
|
|
54
|
+
color: var(--aw-alert-on-color);
|
|
55
|
+
opacity: 0.7;
|
|
56
|
+
}
|
|
49
57
|
}
|
|
50
58
|
|
|
51
59
|
a,
|
|
@@ -58,29 +66,31 @@
|
|
|
58
66
|
}
|
|
59
67
|
|
|
60
68
|
&__close {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
font-size: 0.875rem;
|
|
64
|
-
line-height: 1.125rem;
|
|
65
|
-
font-weight: 700;
|
|
66
|
-
color: var(--aw-alert-on-color);
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: flex-start;
|
|
67
71
|
|
|
68
|
-
|
|
69
|
-
|
|
72
|
+
.aw-button--theme-icon {
|
|
73
|
+
--icon-color: var(--aw-alert-on-color);
|
|
74
|
+
opacity: 1;
|
|
75
|
+
|
|
76
|
+
&:hover,
|
|
77
|
+
&:focus-visible {
|
|
78
|
+
opacity: 0.7;
|
|
79
|
+
}
|
|
70
80
|
}
|
|
71
81
|
|
|
82
|
+
/* justify-content: flex-end;
|
|
83
|
+
font-size: 0.875rem;
|
|
84
|
+
line-height: 1.125rem;
|
|
85
|
+
font-weight: 700;
|
|
86
|
+
color: var(--aw-alert-on-color);
|
|
87
|
+
|
|
72
88
|
a,
|
|
73
89
|
button {
|
|
74
90
|
font-size: 0.875rem;
|
|
75
91
|
line-height: 1.125rem;
|
|
76
92
|
font-weight: 700;
|
|
77
93
|
white-space: nowrap;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&--title-start {
|
|
82
|
-
.aw-alert__title {
|
|
83
|
-
align-items: start;
|
|
84
|
-
}
|
|
94
|
+
} */
|
|
85
95
|
}
|
|
86
96
|
}
|
package/assets/css/main.css
CHANGED
|
@@ -1,37 +1,42 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="aw-alert" :style="styleVariables">
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
<span v-if="icon || $scopedSlots.icon" class="aw-alert__icon">
|
|
4
|
+
<slot name="icon">
|
|
5
|
+
<AwIcon v-if="icon" :name="icon" :color="iconColor" size="24" />
|
|
6
|
+
</slot>
|
|
7
|
+
</span>
|
|
8
|
+
|
|
9
|
+
<span class="aw-alert__title">
|
|
10
|
+
<slot name="title">
|
|
11
|
+
<strong v-if="title" class="aw-alert__title-text">
|
|
12
|
+
{{ title }}
|
|
13
|
+
</strong>
|
|
14
|
+
</slot>
|
|
15
|
+
|
|
16
|
+
<slot name="description">
|
|
17
|
+
<span v-if="description" class="aw-alert__description">
|
|
18
|
+
{{ description }}
|
|
14
19
|
</span>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</
|
|
20
|
+
</slot>
|
|
21
|
+
|
|
22
|
+
<span v-if="$scopedSlots.default" class="aw-alert__buttons">
|
|
23
|
+
<slot />
|
|
24
|
+
</span>
|
|
25
|
+
</span>
|
|
26
|
+
|
|
27
|
+
<span
|
|
28
|
+
v-if="$scopedSlots.close || $listeners.close"
|
|
29
|
+
class="aw-alert__close"
|
|
30
|
+
>
|
|
31
|
+
<slot name="close">
|
|
32
|
+
<AwButton
|
|
33
|
+
theme="icon"
|
|
34
|
+
icon="awesio/close"
|
|
35
|
+
size="xxs"
|
|
36
|
+
@click="$emit('close')"
|
|
37
|
+
/>
|
|
38
|
+
</slot>
|
|
39
|
+
</span>
|
|
35
40
|
</div>
|
|
36
41
|
</template>
|
|
37
42
|
|
|
@@ -10,11 +10,11 @@ title: Alert
|
|
|
10
10
|
|
|
11
11
|
**Category:** Molecule | **Import:** Global
|
|
12
12
|
|
|
13
|
-
The `AwAlert` component displays alert messages with icon, title, description, and optional action
|
|
13
|
+
The `AwAlert` component displays alert messages with icon, title, description, and optional action links.
|
|
14
14
|
|
|
15
15
|
## Overview
|
|
16
16
|
|
|
17
|
-
`AwAlert` provides a styled alert component for displaying informational, warning, or error messages. It supports custom colors, icons, and action
|
|
17
|
+
`AwAlert` provides a styled alert component for displaying informational, warning, or error messages. It supports custom colors, icons, and action links.
|
|
18
18
|
|
|
19
19
|
## Usage
|
|
20
20
|
|
|
@@ -71,7 +71,7 @@ The `AwAlert` component displays alert messages with icon, title, description, a
|
|
|
71
71
|
</AwCard>
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
### With Action
|
|
74
|
+
### With Action Links
|
|
75
75
|
|
|
76
76
|
```markup
|
|
77
77
|
<AwCard>
|
|
@@ -81,8 +81,8 @@ The `AwAlert` component displays alert messages with icon, title, description, a
|
|
|
81
81
|
icon="awesio/question-circle"
|
|
82
82
|
color="warning"
|
|
83
83
|
>
|
|
84
|
-
<
|
|
85
|
-
<
|
|
84
|
+
<AwLink>Confirm</AwLink>
|
|
85
|
+
<AwLink>Cancel</AwLink>
|
|
86
86
|
</AwAlert>
|
|
87
87
|
</AwCard>
|
|
88
88
|
```
|
|
@@ -107,6 +107,25 @@ The `AwAlert` component displays alert messages with icon, title, description, a
|
|
|
107
107
|
</AwCard>
|
|
108
108
|
```
|
|
109
109
|
|
|
110
|
+
### Closable Alert
|
|
111
|
+
|
|
112
|
+
```markup
|
|
113
|
+
<AwCard>
|
|
114
|
+
<AwAlert
|
|
115
|
+
v-if="closableVisible"
|
|
116
|
+
title="Closable Alert"
|
|
117
|
+
description="Click the close icon to hide this alert."
|
|
118
|
+
icon="awesio/info-circle"
|
|
119
|
+
config="info"
|
|
120
|
+
@close="onClosableClose"
|
|
121
|
+
/>
|
|
122
|
+
|
|
123
|
+
<AwButton v-else @click="restoreClosable">
|
|
124
|
+
Restore alert
|
|
125
|
+
</AwButton>
|
|
126
|
+
</AwCard>
|
|
127
|
+
```
|
|
128
|
+
|
|
110
129
|
## API
|
|
111
130
|
|
|
112
131
|
### Props
|
|
@@ -125,7 +144,7 @@ The `AwAlert` component displays alert messages with icon, title, description, a
|
|
|
125
144
|
|
|
126
145
|
| Name | Description | Props | Default Slot Content |
|
|
127
146
|
|------|-------------|-------|---------------------|
|
|
128
|
-
| default | Action
|
|
147
|
+
| default | Action links | - | - |
|
|
129
148
|
| icon | Custom icon content | - | Default icon |
|
|
130
149
|
| title | Custom title content | - | Title text |
|
|
131
150
|
| description | Custom description content | - | Description text |
|
|
@@ -133,7 +152,9 @@ The `AwAlert` component displays alert messages with icon, title, description, a
|
|
|
133
152
|
|
|
134
153
|
### Events
|
|
135
154
|
|
|
136
|
-
|
|
155
|
+
| Name | Payload | Description |
|
|
156
|
+
|------|---------|-------------|
|
|
157
|
+
| close | `void` | Emitted when the built-in close button is clicked or a custom close control calls `$emit('close')`. |
|
|
137
158
|
|
|
138
159
|
## Component Behavior
|
|
139
160
|
|
|
@@ -169,13 +190,19 @@ The `iconColor` prop accepts:
|
|
|
169
190
|
- Compatible containers: `AwCard`, `AwModal`, `AwIsland`, or any component with surface color
|
|
170
191
|
- The surface background provides proper contrast for alert colors
|
|
171
192
|
- Multiple alerts can be stacked within a single container using `AwGrid`
|
|
172
|
-
- Action
|
|
193
|
+
- Action links render in a separate section below title/description
|
|
194
|
+
|
|
195
|
+
### Close Behavior
|
|
196
|
+
|
|
197
|
+
- The **recommended** way to handle dismissible alerts is to listen to the `close` event with `@close="handler"` and toggle visibility in your state.
|
|
198
|
+
- When a `close` listener is present, `AwAlert` renders a built-in icon button in the close area that emits the `close` event.
|
|
199
|
+
- For advanced customization of the close control (e.g., different icon or text), use the `close` slot and emit the `close` event from your custom content.
|
|
173
200
|
|
|
174
201
|
## Related Components
|
|
175
202
|
|
|
176
203
|
- `AwCard` - Required container for alerts
|
|
177
204
|
- `AwIcon` - Icon component used within alerts
|
|
178
|
-
- `
|
|
205
|
+
- `AwLink` - Link component for alert actions
|
|
179
206
|
- `AwBadge` - Alternative for status indicators
|
|
180
207
|
|
|
181
208
|
## Notes
|
|
@@ -185,7 +212,7 @@ The `iconColor` prop accepts:
|
|
|
185
212
|
- Default color is `'default'` (neutral gray theme)
|
|
186
213
|
- Title and description are both optional but at least one should be provided
|
|
187
214
|
- Icon appears before the title when provided
|
|
188
|
-
- Action
|
|
215
|
+
- Action links use the default slot and appear below content
|
|
189
216
|
- Supports both semantic colors (info, success, warning, error) and custom named colors
|
|
190
217
|
- Use `icon-color` to customize icon independently from alert background
|
|
191
218
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awes-io/ui",
|
|
3
|
-
"version": "2.144.
|
|
3
|
+
"version": "2.144.1",
|
|
4
4
|
"description": "User Interface (UI) components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -116,5 +116,5 @@
|
|
|
116
116
|
"peerDependencies": {
|
|
117
117
|
"nuxt": "^2.18.1"
|
|
118
118
|
},
|
|
119
|
-
"gitHead": "
|
|
119
|
+
"gitHead": "8e8c22fe04f5a2dcc77f6ac1f970a12c524a3da8"
|
|
120
120
|
}
|