Skip to content

Commit 07eb8c0

Browse files
hunterliu1003hunterliu1003
committed
1. refactor VueFinalModal style 2. add prop 3. set prop default to false 4. bugfix computed 5. support modalStack zIndex
1 parent 53471dc commit 07eb8c0

File tree

8 files changed

+100
-209
lines changed

8 files changed

+100
-209
lines changed

‎README.md

Lines changed: 0 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,6 @@ features:
2626
- Mobile friendly
2727
- 3.2kb gzipped
2828

29-
`vue-final-modal` has no predefined styles.
30-
There are only three classes inside `vue-final-modal`, including `.vfm__containter`, `.vfm__content`, `.vfm__overlay`. These classes have only the necessary styles and you can still easily override these styles through these props: `classes`, `content-class`, `overlay-class`
31-
32-
Here is the simplified template of entire vue-final-modal
33-
34-
```html
35-
<div class="vfm">
36-
<div class="vfm__overlay">
37-
<div class="vfm__container">
38-
<div class="vfm__content">
39-
<slot />
40-
</div>
41-
</div>
42-
</div>
43-
```
4429

4530
## Install
4631

@@ -78,69 +63,6 @@ export default {
7863
}
7964
```
8065

81-
## Properties
82-
83-
| Name | Type | Required | Default | Description |
84-
| --- | --- | --- | --- | --- |
85-
| ssr | Boolean | --- | true | use v-show(true) or v-if(false) |
86-
| classes | [String, Object, Array] | --- | '' | custom class names for Modal container element |
87-
| contentClass | [String, Object, Array] | --- | '' | custom class names for Modal content element |
88-
| lockScroll | Boolean | --- | true | whether scroll of body is disabled while Dialog is displayed |
89-
| hideOverlay | Boolean | --- | false | Hides the display of the overlay. |
90-
| clickToClose | Boolean | --- | true | Clicking outside of the element will not close Modal. |
91-
| preventClick | Boolean | --- | false | The click event will not be blocked by overlay |
92-
| overlayClass | String | --- | '' | Add classes to the overlay element. |
93-
| transition | String | --- | 'vfm' | CSS transition applied to the modal window. |
94-
| overlayTransition | String | --- | 'vfm' | CSS transition applied to the overlay (background). |
95-
| attach | any | --- | 'body' | Specifies which DOM element that this component should detach to. Set `false` will disabled this feature. String can be any valid querySelector and Object can be any valid Node. Component will attach to the <body> element by default.
96-
97-
### Slots
98-
99-
| Name | Description |
100-
| --- | --- |
101-
| content-before | inject an element before `content` slot |
102-
| content | inject an element has class `vfm__content` by default |
103-
| - | content of Modal inside slot `content` |
104-
| content-after | inject an element after `content` slot |
105-
106-
### Events
107-
108-
| Name | Description |
109-
| --- | --- |
110-
| @before-open | Emits while modal is still invisible, but before transition starting. |
111-
| @opened | Emits after modal became visible and transition ended. |
112-
| @before-close | Emits before modal is going to be closed. |
113-
| @closed | Emits right before modal is destroyed |
114-
115-
116-
#### Here is template structure:
117-
118-
```html
119-
<div class="vfm__container">
120-
<slot name="content-before" />
121-
<slot name="content">
122-
<div class="vfm__content">
123-
<slot />
124-
</div>
125-
</slot>
126-
<slot name="content-after" />
127-
</div>
128-
```
129-
130-
## CDN
131-
132-
### jsDelivr
133-
134-
```html
135-
<script src="https://cdn.jsdelivr.net/npm/vue-final-modal"></script>
136-
```
137-
138-
### Unpkg
139-
140-
```html
141-
<script src="https://unpkg.com/vue-final-modal"></script>
142-
```
143-
14466
## Roadmap
14567

14668
If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull request](https://github.com/hunterliu1003/vue-final-modal/pulls).

‎dist/VueFinalModal.esm.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/VueFinalModal.esm.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/VueFinalModal.umd.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/VueFinalModal.umd.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/components/global/BaseExample.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
:hide-overlay="false"
1212
:click-to-close="true"
1313
:prevent-click="false"
14-
attach="body"
15-
:z-index="1000"
14+
:attach="false"
1615
>
1716
<span class="text-2xl mb-2">Hello, world!</span>
1817
</vue-final-modal>

‎docs/content/en/properties.md

Lines changed: 10 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ The click event will not be blocked by overlay.
7979
## `attach`
8080

8181
- Type: `Any`
82-
- Default: `body`
82+
- Default: `false`
8383

8484
Specifies which DOM element that this component should detach to.
8585

@@ -88,51 +88,16 @@ Specifies which DOM element that this component should detach to.
8888
3. String can be any valid `querySelector`
8989
4. Object can be any valid `Node`.
9090

91-
## `zIndex`
91+
## `zIndexBase`
9292

9393
- Type: `[String, Number]`
9494
- Default: `1000`
9595

96-
Set `z-index` to both of the modal container and overlay elements.
97-
98-
## Example
99-
100-
<base-example></base-example>
101-
102-
```html[SFC]
103-
<template>
104-
<div>
105-
<vue-final-modal
106-
v-model="showModal"
107-
classes="flex justify-center items-center"
108-
content-class="max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
109-
overlay-class="overlay"
110-
transition="vfm"
111-
overlay-transition="vfm"
112-
:lock-scroll="true"
113-
:hide-overlay="false"
114-
:click-to-close="true"
115-
:prevent-click="false"
116-
attach="body"
117-
:z-index="1000"
118-
>
119-
<span class="text-2xl mb-2">Hello, world!</span>
120-
</vue-final-modal>
121-
<base-button @click="showModal = true">Hello, world!</base-button>
122-
</div>
123-
</template>
124-
125-
<script>
126-
export default {
127-
data: () => ({
128-
showModal: false
129-
})
130-
}
131-
</script>
132-
133-
<style lang="scss" scoped>
134-
::v-deep .overlay {
135-
opacity: 0.5;
136-
}
137-
</style>
138-
```
96+
Calculate `z-index` automatically with zIndexBase. If zIndex is set, `zIndexBase` will become invalid.
97+
98+
## `zIndex`
99+
100+
- Type: `[String, Number]`
101+
- Default: `false`
102+
103+
Set specific `z-index` to root of the modal element. If zIndex is set, `zIndexBase` will become invalid.

0 commit comments

Comments
 (0)