Skip to content

Commit a42e927

Browse files
hunterliu1003hunterliu1003
committed
docs: add locale zh-Hant
1 parent 9d00877 commit a42e927

File tree

14 files changed

+841
-694
lines changed

14 files changed

+841
-694
lines changed

‎docs/content/tw/index.md

Lines changed: 0 additions & 660 deletions
This file was deleted.

‎docs/content/zh-Hant/api.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
title: API Reference
3+
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4+
category: API
5+
position: 7
6+
---
7+
## Usage
8+
9+
<alert>`$vfm` is an object containing VueFinalModal's data/methods.</alert>
10+
11+
### **Options API**
12+
13+
Just use `this.$vfm`.
14+
15+
### **Composition API** <badge>Vue 3 only</badge>
16+
17+
```js
18+
import { inject } from 'vue'
19+
20+
export default {
21+
setup() {
22+
const $vfm = inject('$vfm')
23+
}
24+
}
25+
```
26+
## API
27+
28+
### `show(name, params)`
29+
30+
- Type: `Function`
31+
- Arguments:
32+
- name: `String` - Name of the modal
33+
- params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/guide/params).
34+
35+
<show-code text="Example">
36+
37+
<v-api-show class="py-4"></v-api-show>
38+
39+
```js
40+
this.$vfm.show('example', { userName: 'vue-final-modal' })
41+
```
42+
43+
```html[Modal.vue]
44+
<template>
45+
<vue-final-modal v-model="show" name="example">
46+
<template v-slot:title>$vfm.show</template>
47+
<template v-slot="{ params }">
48+
Hi {{ params.userName }}
49+
</template>
50+
</vue-final-modal>
51+
</template>
52+
<script>
53+
export default {
54+
data: () => ({
55+
show: false
56+
})
57+
}
58+
</script>
59+
```
60+
61+
<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
62+
63+
</show-code>
64+
65+
### `hide([names])`
66+
67+
- Type: `Function`
68+
- Arguments:
69+
- names: `String` - The names to hide
70+
71+
<show-code text="Example">
72+
73+
```html
74+
<template>
75+
<vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
76+
<vue-final-modal v-model="show2" name="example2">Vue Final Modal is awesome 2</vue-final-modal>
77+
</template>
78+
79+
<script>
80+
export default {
81+
data: () => ({
82+
show: true,
83+
show2: true
84+
}),
85+
mounted() {
86+
this.$vfm.hide('example', 'example2')
87+
}
88+
}
89+
</script>
90+
```
91+
92+
</show-code>
93+
94+
### `hideAll()`
95+
96+
hide all modals.
97+
98+
### `toggle(name, show, params)`
99+
100+
- Type: `Function`
101+
- Arguments:
102+
- name: [`String` | `Array`] - The names of the modal
103+
- show: `?: Boolean` - Show modal or not
104+
- params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/guide/params).
105+
106+
toggle modals by name.
107+
108+
### `get([names])`
109+
110+
- Type: `Function`
111+
- Arguments:
112+
- names: `String` - Get the names of the modal instances
113+
- Return:
114+
- `Array`: returns the modal instances
115+
116+
### `openedModals`
117+
118+
- Return:
119+
120+
- `Array`: returns the opened modal instances.
121+
122+
- Examples:
123+
124+
1. `$vfm.openedModals[0]`: get the first opened modal instance.
125+
2. `$vfm.openedModals.length`: get how many modals was opened.
126+
127+
### `modals`
128+
129+
- Return:
130+
- `Array`: returns all modal instances.

‎docs/content/tw/dynamic-modal.md renamed to ‎docs/content/zh-Hant/dynamic-modal.md

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Dynamic Modal
2+
title: Dynamic modal
33
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4-
position: 1
5-
category: Getting Start
4+
category: API
5+
position: 8
66
version: 2
77
badge: v2.0.0+
88
features:
@@ -23,27 +23,25 @@ This feature let you create modal dynamically.
2323

2424
## Add `ModalsContainer`
2525

26-
All dynamic modals will be displayed in ModalsContainer. You can get all dynamic modal instances by [$vfm.dynamicModals](#vfmdynamicmodals).
26+
All dynamic modals will be displayed in `ModalsContainer`. You can get all dynamic modal instances by [$vfm.dynamicModals](#dynamicmodals).
2727

2828
```html[App.vue]
29-
<template>
30-
<div>
31-
...
32-
<modals-container></modals-container>
33-
</div>
34-
</template>
29+
<div>
30+
...
31+
<modals-container></modals-container>
32+
</div>
3533
```
3634

3735
## API
3836

39-
### `$vfm.show(dynamicModalOptions, params)`
37+
### `show(dynamicModalOptions, params)`
4038

4139
To show dynamic modal you can use the API `$vfm.show` function.
4240

4341
- Type: `Function`,
4442
- Arguments:
4543
- dynamicModalOptions: `Object`
46-
- params: same as [API $vfm.show](/#vfmshowname-params)
44+
- params: same as [API $vfm.show](/api#showname-params)
4745

4846
```ts
4947
type dynamicModalOptions = {
@@ -59,7 +57,7 @@ type dynamicModalOptions = {
5957
}
6058
```
6159
62-
### `$vfm.dynamicModals`
60+
### `dynamicModals`
6361
6462
- Return:
6563
- `Array`: returns dynamic modal instances.
@@ -246,7 +244,7 @@ export default {
246244

247245
<alert>VModal is an HOC of vue-final-modal.</alert>
248246

249-
[Source code](/examples/recommended-use#vmodalvue)
247+
[Source code](/examples/recommend)
250248

251249
#### VTitle.vue
252250

‎docs/content/tw/examples.md renamed to ‎docs/content/zh-Hant/examples/manual.md

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,37 @@
11
---
2-
title: Step by step
2+
title: Manual usage
33
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4-
position: 2
54
category: Examples
5+
position: 9
66
---
77

8-
## Basic
8+
## Basic usage
9+
10+
### **Set `v-model` to `true` on click**
11+
12+
```html
13+
<vue-final-modal v-model="showModal">
14+
Modal Content Here
15+
</vue-final-modal>
16+
17+
<button @click="showModal = true">Launch</button>
18+
```
19+
20+
### **Open modal with [API](/api)**
21+
22+
<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
23+
24+
```html
25+
<vue-final-modal v-model="showModal" name="example">
26+
Modal Content Here
27+
</vue-final-modal>
28+
```
29+
30+
```js
31+
this.$vfm.show('example')
32+
```
33+
34+
## Example
935

1036
<alert>
1137

@@ -15,7 +41,7 @@ Try to toggle checkbox below, then click `Open Modal` button.
1541

1642
<basic-options></basic-options>
1743

18-
## Examples
44+
## Step by step
1945

2046
<alert>
2147

‎docs/content/tw/examples/recommended-use.md renamed to ‎docs/content/zh-Hant/examples/recommend.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
---
2-
title: Recommended use
2+
title: Recommended usage
33
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4-
position: 3
54
category: Examples
6-
version: 0.17
5+
position: 11
76
---
87

98
## Write a `HOC`
109

1110
<alert>
1211

13-
您可以輕鬆創建“高階組件”，並可以根據需要自定義“模板”，“腳本”和“樣式”。
12+
You can create a `higher-order component` easily and can customize `template`, `script` and `style` based on your needs.
1413

1514
</alert>
1615

‎docs/content/zh-Hant/examples/tailwind.md

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
title: Tailwind usage
3+
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4+
category: Examples
5+
position: 10
6+
---
7+
8+
## Write a `HOC`
9+
10+
<alert>
11+
12+
You can create a `higher-order component` easily and can customize `template`, `script` and `style` based on your needs.
13+
14+
</alert>
15+
16+
### VTailwindModal.vue
17+
18+
<show-code>
19+
20+
```vue
21+
<template>
22+
<vue-final-modal
23+
v-bind="$attrs"
24+
classes="flex justify-center items-center"
25+
content-class="relative flex flex-col max-h-full mx-4 p-4 border dark:border-gray-800 rounded bg-white dark:bg-gray-900"
26+
v-on="$listeners"
27+
>
28+
<template v-slot="{ params }">
29+
<span class="mr-8 text-2xl font-bold ">
30+
<slot name="title"></slot>
31+
</span>
32+
<div class="flex-grow overflow-y-auto">
33+
<slot v-bind:params="params"></slot>
34+
</div>
35+
<div class="flex-shrink-0 flex justify-center items-center pt-4">
36+
<button class="vfm-btn" @click="$emit('confirm', close)">
37+
confirm
38+
</button>
39+
<button class="vfm-btn" @click="$emit('cancel', close)">
40+
cancel
41+
</button>
42+
</div>
43+
<button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
44+
<mdi-close></mdi-close>
45+
</button>
46+
</template>
47+
</vue-final-modal>
48+
</template>
49+
50+
<script>
51+
export default {
52+
name: 'VTailwindModal',
53+
inheritAttrs: false,
54+
methods: {
55+
close() {
56+
this.$emit('input', false)
57+
}
58+
}
59+
}
60+
</script>
61+
```
62+
63+
</show-code>
64+
65+
## How to use VTailwindModal
66+
67+
### Example
68+
69+
<hoc-example-tailwind></hoc-example-tailwind>
70+
71+
<show-code class="pt-4">
72+
73+
```vue
74+
<template>
75+
<div>
76+
<v-tailwind-modal v-model="show" @confirm="confirm" @cancel="cancel">
77+
<template v-slot:title>Hello, vue-final-modal</template>
78+
<p>
79+
Vue Final Modal is a renderless, stackable, detachable and lightweight
80+
modal component.
81+
</p>
82+
</v-tailwind-modal>
83+
84+
<button class="vfm-btn" @click="show = true">Open modal</button>
85+
</div>
86+
</template>
87+
88+
<script>
89+
export default {
90+
data: () => ({
91+
show: false
92+
}),
93+
methods: {
94+
confirm() {
95+
// some code...
96+
this.show = false
97+
},
98+
cancel(close) {
99+
// some code...
100+
close()
101+
}
102+
}
103+
}
104+
</script>
105+
```
106+
107+
</show-code>

0 commit comments

Comments
 (0)