Skip to content

Commit 7f4686a

Browse files
hunterliu1003hunterliu1003
authored
Merge branch 'master' into refactorKeydown
2 parents ef40a5b + 541d57c commit 7f4686a

File tree

10 files changed

+340
-16
lines changed

10 files changed

+340
-16
lines changed

‎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-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-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/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-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-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-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-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/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-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-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-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-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`

‎example/src/App.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@
2929
<v-dynamic></v-dynamic>
3030
<h2 class="text-3xl py-2">Advanced dynamic modal</h2>
3131
<v-dynamic-advanced></v-dynamic-advanced>
32+
<h2 class="text-3xl py-2">Tailwind HOC Custom Transition Modal</h2>
33+
<hoc-example-tailwind-custom-transition></hoc-example-tailwind-custom-transition>
3234

3335
<modals-container></modals-container>
3436
<div v-for="i in 100" :key="i">{{ i }}</div>

‎example/src/components/hoc/HocExampleTailwindCustomTransition.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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
19+
modal component.
20+
</p>
21+
</v-tailwind-modal>
22+
23+
<button class="vfm-btn" @click="show = true">Open modal</button>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
data: () => ({
30+
show: false
31+
}),
32+
methods: {
33+
confirm() {
34+
// some code...
35+
this.show = false
36+
},
37+
cancel(close) {
38+
// some code...
39+
close()
40+
}
41+
}
42+
}
43+
</script>

‎lib/VueFinalModal.vue‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
@keydown.esc="onEsc"
99
>
1010
<transition
11-
:name="overlayTransition"
11+
ref="vfmOverlayTransition"
12+
v-bind="computedOverlayTransition"
1213
@before-enter="beforeOverlayEnter"
1314
@after-enter="afterOverlayEnter"
1415
@before-leave="beforeOverlayLeave"
@@ -22,7 +23,8 @@
2223
></div>
2324
</transition>
2425
<transition
25-
:name="transition"
26+
ref="vfmTransition"
27+
v-bind="computedTransition"
2628
@before-enter="beforeModalEnter"
2729
@after-enter="afterModalEnter"
2830
@before-leave="beforeModalLeave"
@@ -89,8 +91,8 @@ export default {
8991
escToClose: { type: Boolean, default: false },
9092
preventClick: { type: Boolean, default: false },
9193
attach: { type: null, default: false, validator: validateAttachTarget },
92-
transition: { type: String, default: 'vfm' },
93-
overlayTransition: { type: String, default: 'vfm' },
94+
transition: { type: [String, Object], default: 'vfm' },
95+
overlayTransition: { type: [String, Object], default: 'vfm' },
9496
zIndexAuto: { type: Boolean, default: true },
9597
zIndexBase: { type: [String, Number], default: 1000 },
9698
zIndex: { type: [Boolean, String, Number], default: false },
@@ -134,6 +136,14 @@ export default {
134136
return {
135137
...(this.calculateZIndex !== false && { zIndex: this.calculateZIndex })
136138
}
139+
},
140+
computedTransition() {
141+
if (typeof this.transition === 'string') return { name: this.transition }
142+
return { ...this.transition }
143+
},
144+
computedOverlayTransition() {
145+
if (typeof this.overlayTransition === 'string') return { name: this.overlayTransition }
146+
return { ...this.overlayTransition }
137147
}
138148
},
139149
watch: {

0 commit comments

Comments
 (0)