Skip to content

Commit de7160c

Browse files
hunterliu1003hunterliu1003
committed
Merge branch 'master' into v3
2 parents e5695ad + 9de9e0c commit de7160c

File tree

17 files changed

+272
-28
lines changed

17 files changed

+272
-28
lines changed

‎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/examples/hoc/HocExampleTailwindCustomTransition.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div>
3+
<v-tailwind-modal
4+
v-model="show"
5+
@confirm="confirm"
6+
@cancel="cancel"
7+
:transition="{
8+
'enter-active-class': 'transition duration-200 ease-in-out transform',
9+
'enter-class': 'translate-y-full',
10+
'enter-to-class': 'translate-y-0',
11+
'leave-active-class': 'transition duration-200 ease-in-out transform',
12+
'leave-to-class': 'translate-y-full',
13+
'leave-class': 'translate-y-0'
14+
}"
15+
>
16+
<template v-slot:title>Hello, vue-final-modal</template>
17+
<p>
18+
Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
19+
</p>
20+
</v-tailwind-modal>
21+
22+
<button class="vfm-btn" @click="show = true">Open modal</button>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
data: () => ({
29+
show: false
30+
}),
31+
methods: {
32+
confirm() {
33+
// some code...
34+
this.show = false
35+
},
36+
cancel(close) {
37+
// some code...
38+
close()
39+
}
40+
}
41+
}
42+
</script>

‎docs/content/en/examples/tailwind.md

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default {
6464

6565
## How to use VTailwindModal
6666

67-
### Example
67+
### Default Example
6868

6969
<hoc-example-tailwind></hoc-example-tailwind>
7070

@@ -104,4 +104,58 @@ export default {
104104
</script>
105105
```
106106

107-
</show-code>
107+
</show-code>
108+
109+
### Custom Transition Example
110+
111+
<hoc-example-tailwind-custom-transition></hoc-example-tailwind-custom-transition>
112+
113+
<show-code class="pt-4">
114+
115+
```vue
116+
<template>
117+
<div>
118+
<v-tailwind-modal
119+
v-model="show"
120+
@confirm="confirm"
121+
@cancel="cancel"
122+
:transition="{
123+
'enter-active-class': 'transition duration-200 ease-in-out transform',
124+
'enter-from-class': 'translate-y-full',
125+
'enter-to-class': 'translate-y-0',
126+
'leave-active-class': 'transition duration-200 ease-in-out transform',
127+
'leave-to-class': 'translate-y-full',
128+
'leave-from-class': 'translate-y-0'
129+
}"
130+
>
131+
<template v-slot:title>Hello, vue-final-modal</template>
132+
<p>
133+
Vue Final Modal is a renderless, stackable, detachable and lightweight
134+
modal component.
135+
</p>
136+
</v-tailwind-modal>
137+
138+
<button class="vfm-btn" @click="show = true">Open modal</button>
139+
</div>
140+
</template>
141+
142+
<script>
143+
export default {
144+
data: () => ({
145+
show: false
146+
}),
147+
methods: {
148+
confirm() {
149+
// some code...
150+
this.show = false
151+
},
152+
cancel(close) {
153+
// some code...
154+
close()
155+
}
156+
}
157+
}
158+
</script>
159+
```
160+
161+
</show-code>

‎docs/content/en/guide/params.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,4 @@ When you open a modal though the [API](/api) `$vfm.show(name, params)`,
2626
</vue-final-modal>
2727
```
2828

29-
<alert>`parmas` will be reset to `{}` automatically after [`closed`](/guide/events#closed) event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>
29+
<alert>`params` will be reset to `{}` automatically after [`closed`](/guide/events#closed) event. You can avoid the modal to reset the `params` to empty object by calling `event.stop()`.</alert>

‎docs/content/en/guide/properties.md

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ category: Guide
55
position: 4
66
---
77

8-
## Overview the default value of properties
8+
## Overview the default value of properties
99

1010
```vue
1111
<template>
@@ -98,7 +98,7 @@ Style that will be applied to the modal overlay.
9898

9999
## `transition`
100100

101-
- Type: `String`
101+
- Type: `[String, Object]`
102102
- Default: `'vfm'`
103103

104104
CSS transition applied to the modal container.
@@ -118,9 +118,30 @@ CSS transition applied to the modal container.
118118

119119
</show-code>
120120

121+
<show-code text="Show example transition Object" class="pt-2">
122+
123+
```vue
124+
<template>
125+
<vue-final-modal
126+
:transition="{
127+
'enter-active-class': 'transition duration-200 ease-in-out transform',
128+
'enter-from-class': 'translate-y-full',
129+
'enter-to-class': 'translate-y-0',
130+
'leave-active-class': 'transition duration-200 ease-in-out transform',
131+
'leave-to-class': 'translate-y-full',
132+
'leave-from-class': 'translate-y-0'
133+
}"
134+
>
135+
...modal content
136+
</vue-final-modal>
137+
</template>
138+
```
139+
140+
</show-code>
141+
121142
## `overlayTransition`
122143

123-
- Type: `String`
144+
- Type: `[String, Object]`
124145
- Default: `'vfm'`
125146

126147
CSS transition applied to the modal overlay.
@@ -140,6 +161,27 @@ CSS transition applied to the modal overlay.
140161

141162
</show-code>
142163

164+
<show-code text="Show example transition Object" class="pt-2">
165+
166+
```vue
167+
<template>
168+
<vue-final-modal
169+
:transition="{
170+
'enter-active-class': 'transition duration-200 ease-in-out transform',
171+
'enter-from-class': 'translate-y-full',
172+
'enter-to-class': 'translate-y-0',
173+
'leave-active-class': 'transition duration-200 ease-in-out transform',
174+
'leave-to-class': 'translate-y-full',
175+
'leave-from-class': 'translate-y-0'
176+
}"
177+
>
178+
...modal content
179+
</vue-final-modal>
180+
</template>
181+
```
182+
183+
</show-code>
184+
143185
## `lockScroll`
144186

145187
- Type: `Boolean`

‎docs/content/zh-Hant/guide/params.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,4 @@ fullscreen: true
2626
</vue-final-modal>
2727
```
2828

29-
<alert>在 [`closed`](/zh-Hant/guide/events#closed) 事件之後 `parmas` 會自動被重置為 `{}`。你可以透過調用 `event.stop()` 來避免 `params` 被重置</alert>
29+
<alert>在 [`closed`](/zh-Hant/guide/events#closed) 事件之後 `params` 會自動被重置為 `{}`。你可以透過調用 `event.stop()` 來避免 `params` 被重置</alert>

‎docs/content/zh-Hant/guide/properties.md

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ position: 4
6565

6666
## `transition`
6767

68-
- 型別： `String`
68+
- 型別： `[String, Object]`
6969
- 預設： `'vfm'`
7070

7171
設定 modal 的容器（container）轉場 CSS。
@@ -85,9 +85,30 @@ position: 4
8585

8686
</show-code>
8787

88+
<show-code text="Show example transition Object" class="pt-2">
89+
90+
```vue
91+
<template>
92+
<vue-final-modal
93+
:transition="{
94+
'enter-active-class': 'transition duration-200 ease-in-out transform',
95+
'enter-from-class': 'translate-y-full',
96+
'enter-to-class': 'translate-y-0',
97+
'leave-active-class': 'transition duration-200 ease-in-out transform',
98+
'leave-to-class': 'translate-y-full',
99+
'leave-from-class': 'translate-y-0'
100+
}"
101+
>
102+
...modal content
103+
</vue-final-modal>
104+
</template>
105+
```
106+
107+
</show-code>
108+
88109
## `overlayTransition`
89110

90-
- 型別： `String`
111+
- 型別： `[String, Object]`
91112
- 預設： `'vfm'`
92113

93114
設定 modal 的外層（overlay）轉場 CSS。
@@ -107,6 +128,27 @@ position: 4
107128

108129
</show-code>
109130

131+
<show-code text="Show example transition Object" class="pt-2">
132+
133+
```vue
134+
<template>
135+
<vue-final-modal
136+
:transition="{
137+
'enter-active-class': 'transition duration-200 ease-in-out transform',
138+
'enter-from-class': 'translate-y-full',
139+
'enter-to-class': 'translate-y-0',
140+
'leave-active-class': 'transition duration-200 ease-in-out transform',
141+
'leave-to-class': 'translate-y-full',
142+
'leave-from-class': 'translate-y-0'
143+
}"
144+
>
145+
...modal content
146+
</vue-final-modal>
147+
</template>
148+
```
149+
150+
</show-code>
151+
110152
## `lockScroll`
111153

112154
- 型別： `Boolean`

0 commit comments

Comments
 (0)