@weni/unnnic-system 2.0.31-alpha.3 → 2.0.31-alpha.7
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/package.json
CHANGED
|
@@ -199,6 +199,7 @@ export default {
|
|
|
199
199
|
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
|
|
200
200
|
position: fixed;
|
|
201
201
|
max-height: calc(100vh - $unnnic-spacing-md * 2);
|
|
202
|
+
overflow: hidden;
|
|
202
203
|
|
|
203
204
|
&--sm {
|
|
204
205
|
width: 400px;
|
|
@@ -242,6 +243,7 @@ export default {
|
|
|
242
243
|
color: $unnnic-color-neutral-cloudy;
|
|
243
244
|
flex-grow: 1;
|
|
244
245
|
overflow-y: auto;
|
|
246
|
+
font-family: $unnnic-font-family-secondary;
|
|
245
247
|
|
|
246
248
|
&::-webkit-scrollbar {
|
|
247
249
|
width: $unnnic-spacing-inline-nano;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { Meta, Source, Story } from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
import * as ModalDialogStories from './ModalDialog.stories';
|
|
4
|
+
|
|
5
|
+
<Meta of={ModalDialogStories}/>
|
|
6
|
+
|
|
7
|
+
# ModalDialog
|
|
8
|
+
|
|
9
|
+
The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
|
|
10
|
+
|
|
11
|
+
<Source
|
|
12
|
+
language='html'
|
|
13
|
+
dark
|
|
14
|
+
code={`
|
|
15
|
+
<UnnnicModalDialog v-model="showModal">
|
|
16
|
+
<p>Modal Content</p>
|
|
17
|
+
</UnnnicModalDialog>
|
|
18
|
+
`}
|
|
19
|
+
/>
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
#### **Props Options:**
|
|
24
|
+
|
|
25
|
+
| Key | Description | Values | Default |
|
|
26
|
+
|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|---------|
|
|
27
|
+
| type | Modal type predefinition | 'success' \| 'warning' \| 'attention' | '' |
|
|
28
|
+
| persistent | Clicking outside of the element will not deactive it | true \| false | false |
|
|
29
|
+
| size | Modal width size (sm = 400px; md = 600px; lg = 800px) | 'sm' \| 'md' \| 'lg' | 'md' |
|
|
30
|
+
| title | Modal card title (if not provided, the title section will not be displayed) | string | '' |
|
|
31
|
+
| icon | Custom title section icon (if not provided, the preset icons will be considered according to the chosen modal type) | string | '' |
|
|
32
|
+
| iconScheme | Custom scheme color to icon in title section (if not provided, the preset scheme color will be considered according to the chosen modal type) | string | '' |
|
|
33
|
+
| showCloseIcon | Show close icon in title section | boolean | false |
|
|
34
|
+
| primaryButtonText | Button primary action text (if not provided, the actions section will not be displayed) | string | '' |
|
|
35
|
+
| secondaryButtonText | Button secondary action text (if not provided and there is primaryButtonText, this button will take 'Cancel' action | string | '' |
|
|
36
|
+
| primaryButtonType | Button primary type (if not provided, defaults to the specified type) | string | '' |
|
|
37
|
+
| showActionsDivider | Show divider in between actions and dialog content | boolean | false |
|
|
38
|
+
|
|
39
|
+
## Examples
|
|
40
|
+
Some examples of uses of the modal
|
|
41
|
+
|
|
42
|
+
### Default
|
|
43
|
+
|
|
44
|
+
<Story of={ModalDialogStories.Default} />
|
|
45
|
+
|
|
46
|
+
### Warning
|
|
47
|
+
|
|
48
|
+
<Story of={ModalDialogStories.Warning} />
|
|
49
|
+
|
|
50
|
+
### Attention
|
|
51
|
+
|
|
52
|
+
<Story of={ModalDialogStories.Attention} />
|
|
53
|
+
|
|
54
|
+
### Overflowed Content
|
|
55
|
+
|
|
56
|
+
<Story of={ModalDialogStories.Overflowed} />
|
|
57
|
+
|
|
58
|
+
### Form Content
|
|
59
|
+
|
|
60
|
+
<Story of={ModalDialogStories.Form} />
|
|
61
|
+
|
|
62
|
+
### Image Content
|
|
63
|
+
|
|
64
|
+
<Story of={ModalDialogStories.Image} />
|
|
@@ -41,7 +41,7 @@ export default {
|
|
|
41
41
|
persistent: { control: 'boolean' },
|
|
42
42
|
},
|
|
43
43
|
args: {
|
|
44
|
-
modelValue:
|
|
44
|
+
modelValue: false,
|
|
45
45
|
title: 'Default Modal',
|
|
46
46
|
type: '',
|
|
47
47
|
size: 'md',
|
|
@@ -61,7 +61,7 @@ const Template = (args) => ({
|
|
|
61
61
|
},
|
|
62
62
|
template: `
|
|
63
63
|
<div>
|
|
64
|
-
<button @click="updateModelValue(true)">
|
|
64
|
+
<button @click="updateModelValue(true)">Open Modal</button>
|
|
65
65
|
<unnnic-modal-dialog v-bind="args" @primaryButtonClick="primaryButtonClick" @secondaryButtonClick="secondaryButtonClick" @update:modelValue="updateModelValue">
|
|
66
66
|
<template v-slot>Slot content here</template>
|
|
67
67
|
</unnnic-modal-dialog>
|
|
@@ -84,7 +84,7 @@ const TemplateOverflowed = (args) => ({
|
|
|
84
84
|
},
|
|
85
85
|
template: `
|
|
86
86
|
<div>
|
|
87
|
-
<button @click="updateModelValue(true)">
|
|
87
|
+
<button @click="updateModelValue(true)">Open Modal</button>
|
|
88
88
|
<unnnic-modal-dialog v-bind="args" @primaryButtonClick="primaryButtonClick" @secondaryButtonClick="secondaryButtonClick" @update:modelValue="updateModelValue">
|
|
89
89
|
<p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
|
|
90
90
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
|
|
@@ -113,7 +113,7 @@ const TemplateForm = (args) => ({
|
|
|
113
113
|
},
|
|
114
114
|
template: `
|
|
115
115
|
<div>
|
|
116
|
-
<button @click="updateModelValue(true)">
|
|
116
|
+
<button @click="updateModelValue(true)">Open Modal</button>
|
|
117
117
|
<unnnic-modal-dialog v-bind="args" @primaryButtonClick="primaryButtonClick" @secondaryButtonClick="secondaryButtonClick" @update:modelValue="updateModelValue">
|
|
118
118
|
<p style="margin-top: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis.</p>
|
|
119
119
|
<form>
|
|
@@ -144,7 +144,7 @@ const TemplateImage = (args) => ({
|
|
|
144
144
|
},
|
|
145
145
|
template: `
|
|
146
146
|
<div>
|
|
147
|
-
<button @click="updateModelValue(true)">
|
|
147
|
+
<button @click="updateModelValue(true)">Open Modal</button>
|
|
148
148
|
<unnnic-modal-dialog v-bind="args" @primaryButtonClick="primaryButtonClick" @secondaryButtonClick="secondaryButtonClick" @update:modelValue="updateModelValue">
|
|
149
149
|
<section style="display: flex; flex-direction: column; align-items: center; gap: 24px">
|
|
150
150
|
<img height='120' width='120' src="./doris.png"/>
|