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`

‎docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"dependencies": {
1212
"@nuxt/content-theme-docs": "^0.8.2",
1313
"nuxt": "^2.14.12",
14-
"vue-final-modal": "^2.0.1"
14+
"vue-final-modal": "^2.1.0"
1515
},
1616
"devDependencies": {
1717
"@nuxtjs/google-analytics": "^2.4.0",

‎docs/yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10468,10 +10468,10 @@ vue-client-only@^2.0.0:
1046810468
resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
1046910469
integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
1047010470

10471-
vue-final-modal@^2.0.1:
10472-
version "2.0.1"
10473-
resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-2.0.1.tgz#eef6cbef12de3d3954807f69c3c494fbc3d94957"
10474-
integrity sha512-MkHvwzB/LhrC4Na97ZOrJmK8VPBlBdndav6bXoAujP260P0MJz4Hk9dHFSi0gCHOtJmojgePatUt1PZXZMLgRQ==
10471+
vue-final-modal@^2.1.0:
10472+
version "2.1.0"
10473+
resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-2.1.0.tgz#6cb6820b37a4fb063ac3450d81f60c4153f07acf"
10474+
integrity sha512-QRZEVx6Omt2PVugIoz0k7URMJUB8bkoQ8dkROg1Ig5cXQTQaMiLonWnf/AaUHMmBh22HtG24LawwW9onv0FOZg==
1047510475
dependencies:
1047610476
vue "^2.6.12"
1047710477

‎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-from-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-from-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>

0 commit comments

Comments
 (0)