Merge branch 'master' into next

Author: hunterliu1003

README.md

@@ -10,10 +10,12 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/npm/v/vue-final-modal" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/badgesize/brotli/hunterliu1003/vue-final-modal/master/dist/VueFinalModal.umd.js" alt="Size"></a>
+  <a href='https://coveralls.io/github/vue-final/vue-final-modal?branch=master'><img src='https://coveralls.io/repos/github/vue-final/vue-final-modal/badge.svg?branch=master' alt='Coverage Status' /></a>
 </p>
 <p align="center">
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/npm/v/vue-final-modal/next" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/badgesize/brotli/hunterliu1003/vue-final-modal/next/dist/VueFinalModal.umd.js" alt="Size"></a>
+  <a href='https://coveralls.io/github/vue-final/vue-final-modal?branch=next'><img src='https://coveralls.io/repos/github/vue-final/vue-final-modal/badge.svg?branch=next' alt='Coverage Status' /></a>
 </p>
 
 <p align="right">
@@ -235,7 +237,7 @@ export default {
 
 ## **Slots**
 
-If you open a modal though API `show(name, params)`, You can using scoped-slot to get `params` in template:
+If you open a modal though API `show(name, params)`, You can use scoped-slot to get `params` in template:
 
 ```html
 <template v-slot="{ params }">

dist/VueFinalModal.esm.js

@@ -23,11 +23,13 @@ features:
 <p class="flex h-8 space-x-4">
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/npm/v/vue-final-modal" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/badgesize/brotli/hunterliu1003/vue-final-modal/master/dist/VueFinalModal.umd.js" alt="Size"></a>
+  <a href='https://coveralls.io/github/vue-final/vue-final-modal?branch=master'><img src='https://coveralls.io/repos/github/vue-final/vue-final-modal/badge.svg?branch=master' alt='Coverage Status' /></a>
 </p>
 
 <p class="flex h-8 space-x-4">
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/npm/v/vue-final-modal/next" alt="Version"></a>
   <a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://badgen.net/badgesize/brotli/hunterliu1003/vue-final-modal/next/dist/VueFinalModal.umd.js" alt="Size"></a>
+  <a href='https://coveralls.io/github/vue-final/vue-final-modal?branch=next'><img src='https://coveralls.io/repos/github/vue-final/vue-final-modal/badge.svg?branch=next' alt='Coverage Status' /></a>
 </p>
 
 <p align="right">

dist/VueFinalModal.esm.js.map

@@ -1,16 +1,16 @@
 ---
-title: API Reference
-description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
+title: API 參考
+description: 'Vue Final Modal 是一個無渲染、可堆疊、可拆卸且輕巧的 modal 元件。'
 category: API
 position: 7
 ---
 ## Usage
 
-<alert>`$vfm` is an object containing VueFinalModal's data/methods.</alert>
+<alert>`$vfm` 是一個存放 VueFinalModal 資料與方法的物件</alert>
 
 ### **Options API**
 
-Just use `this.$vfm`.
+在組件內使用 `this.$vfm`.
 
 ### **Composition API** <badge>Vue 3 only</badge>
 
@@ -27,10 +27,10 @@ export default {
 
 ### `show(name, params)`
 
-- Type: `Function`
-- Arguments:
-  - name: `String` - Name of the modal
-  - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/guide/params).
+- 型別： `Function`
+- 參數：
+  - name: `String` - 指定 modal 的名字。
+  - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/zh-Hant/guide/params).
 
 <show-code text="Example">
 
@@ -58,15 +58,15 @@ this.$vfm.show('example', { userName: 'vue-final-modal' })
 </script>
 ```
 
-<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
+<alert>如果要使用 `$vfm.show(name)` 打開 modal，`v-model` 是必須給的。</alert>
 
 </show-code>
 
 ### `hide([names])`
 
-- Type: `Function`
-- Arguments:
-  - names: `String` - The names to hide
+- 型別： `Function`
+- 參數：
+  - names: `String` - 指定要隱藏 modal 名稱。
 
 <show-code text="Example">
 
@@ -93,38 +93,38 @@ this.$vfm.show('example', { userName: 'vue-final-modal' })
 
 ### `hideAll()`
 
-hide all modals.
+關閉所有的 modal。
 
 ### `toggle(name, show, params)`
 
-- Type: `Function`
-- Arguments:
-  - name: [`String` | `Array`] - The names of the modal
-  - show: `?: Boolean` - Show modal or not
-  - params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/guide/params).
+- 型別： `Function`
+- 參數：
+  - name: [`String` | `Array`] - modal 的名稱。
+  - show: `?: Boolean` - 打開或隱藏這個 modal。
+  - params: `?: object` - 任何你想要傳入 modal 的資料，詳閱 [參數（params）](/zh-Hant/guide/params)。
 
-toggle modals by name.
+根據名字（name）切換 modals 的狀態。
 
 ### `get([names])`
 
-- Type: `Function`
-- Arguments:
-  - names: `String` - Get the names of the modal instances
-- Return:
-  - `Array`: returns the modal instances
+- 型別： `Function`
+- 參數：
+  - names: `String` - 取的傳入的名字（name）對應的 modals 實例。
+- 回傳：
+  - `Array`: 回傳的 modals 實例
 
 ### `openedModals`
 
-- Return:
+- 回傳：
 
-  - `Array`: returns the opened modal instances.
+  - `Array`: 回傳所有顯示中的 modal 實例。
 
 - Examples:
 
-1. `$vfm.openedModals[0]`: get the first opened modal instance.
-2. `$vfm.openedModals.length`: get how many modals was opened.
+1. `$vfm.openedModals[0]`: 取得第一個打開的 modal 實例。
+2. `$vfm.openedModals.length`: 取的現在打開的 modal 總數。
 
 ### `modals`
 
-- Return:
-  - `Array`: returns all modal instances.
+- 回傳：
+  - `Array`: 取的所有 modal 的實例。

dist/VueFinalModal.umd.js

@@ -1,29 +1,29 @@
 ---
-title: Dynamic modal
-description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
+title: 動態 modal
+description: 'Vue Final Modal 是一個無渲染、可堆疊、可拆卸且輕巧的 modal 元件。'
 category: API
 position: 8
 version: 2
 badge: v2.0.0+
 features:
-  - Support Vue 3 and Vue 2
-  - Tailwind CSS friendly
-  - Renderless component
-  - SSR support
-  - Stackable
+  - 支援 Vue 3 與 Vue 2
+  - Tailwind CSS 友好
+  - 無選染元件
+  - 支援 SSR
+  - 支援 modal 堆疊
   - Detachable
-  - Scrollable
-  - Transition support
-  - Mobile friendly
-  - Tiny bundle size
-  - Accessibility support
+  - 可滾動的 modal
+  - 支援過度效果
+  - 行動裝置友善
+  - 極小的打包尺寸
+  - 支援無障礙（Accessibility）
 ---
 
-This feature let you create modal dynamically.
+這個功能讓你可以動態的建立 modal。
 
-## Add `ModalsContainer`
+## 新增 `ModalsContainer`
 
-All dynamic modals will be displayed in `ModalsContainer`. You can get all dynamic modal instances by [$vfm.dynamicModals](#dynamicmodals).
+所有的動態 modals 都會被崁入、顯示在 `ModalsContainer` 元件中。你可以透過 [$vfm.dynamicModals](#dynamicmodals) 屬性取得所有的動態 modal 實例 
 
 ```html[App.vue]
 <div>
@@ -36,12 +36,12 @@ All dynamic modals will be displayed in `ModalsContainer`. You can get all dynam
 
 ### `show(dynamicModalOptions, params)`
 
-To show dynamic modal you can use the API `$vfm.show` function.
+你可以透過 `$vfm.show` 這個方法開啟動態 modal。
 
-- Type: `Function`,
-- Arguments:
+- 型別： `Function`,
+- 參數：
   - dynamicModalOptions: `Object`
-  - params: same as [API $vfm.show](/api#showname-params)
+  - params: 與 [API $vfm.show](/zh-Hant/api#showname-params) 相同
 
 ```ts
 type dynamicModalOptions = {
@@ -60,14 +60,14 @@ type dynamicModalOptions = {
 
 ### `dynamicModals`
 
-- Return: 
-  - `Array`: returns dynamic modal instances.
+- 回傳: 
+  - `Array`: 回傳儲存動態 modal 實例的陣列。
 
-## Examples
+## 範例
 
 <modals-container></modals-container>
 
-### Basic
+### 基本
 
 <v-dynamic></v-dynamic>
 
@@ -168,7 +168,7 @@ export default {
 
 </show-code>
 
-### Advanced
+### 進階
 
 <v-dynamic-advanced></v-dynamic-advanced>
 
@@ -228,7 +228,7 @@ export default {
             component: VContent,
             bind: {
               content:
-                'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
+                'Vue Final Modal 是一個無渲染、可堆疊、可拆卸且輕巧的 modal 元件。'
             }
           }
         }
@@ -243,9 +243,9 @@ export default {
 
 #### VModal.vue
 
-<alert>VModal is an HOC of vue-final-modal.</alert>
+<alert>VModal 是一個 vue-final-modal 的高階元件（HOC）。</alert>
 
-[Source code](/examples/recommend)
+[Source code](/zh-Hant/examples/recommend)
 
 #### VTitle.vue
 

dist/VueFinalModal.umd.js.map

@@ -1,13 +1,13 @@
 ---
-title: Manual usage
-description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
-category: Examples
+title: 手動
+description: 'Vue Final Modal 是一個無渲染、可堆疊、可拆卸且輕巧的 modal 元件。'
+category: 範例
 position: 9
 ---
 
-## Basic usage
+## 基本用法
 
-### **Set `v-model` to `true` on click**
+### **透過點擊事件將 `v-model` 的資料設定為 `true`**
 
 ```html
 <vue-final-modal v-model="showModal">
@@ -17,9 +17,9 @@ position: 9
 <button @click="showModal = true">Launch</button>
 ```
 
-### **Open modal with [API](/api)**
+### **使用 [API](/zh-Hant/api) 開啟 modal**
 
-<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
+<alert>當使用 `$vfm.show(name)` API 開啟，`v-model` 為必要的屬性。</alert>
 
 ```html
 <vue-final-modal v-model="showModal" name="example">
@@ -31,25 +31,25 @@ position: 9
 this.$vfm.show('example')
 ```
 
-## Example
+## 範例
 
 <alert>
 
-Try to toggle checkbox below, then click `Open Modal` button.
+試著切換下列的複選框，並點擊 `Open Modal` 按鈕。
 
 </alert>
 
 <basic-options></basic-options>
 
-## Step by step
+## 一步步使用
 
 <alert>
 
 [Checkout examples source code](https://github.com/hunterliu1003/vue-final-modal/tree/master/example/src/components/basic)
 
 </alert>
 
-### **Hello, `vue-final-modal`**
+### **開始 `vue-final-modal`**
 
 <v-basic></v-basic>
 
@@ -83,7 +83,7 @@ export default {
 
 </show-code>
 
-### **Add `background-color`, `border-radius`**
+### **加上 `background-color`, `border-radius`**
 
 <v-background></v-background>
 
@@ -131,7 +131,7 @@ export default {
 
 </show-code>
 
-### **Centered modal**
+### **置中 modal**
 
 <v-centered></v-centered>
 
@@ -190,7 +190,7 @@ export default {
 
 </show-code>
 
-### **Add `content`**
+### **加上內容**
 
 <v-content></v-content>
 
@@ -255,7 +255,7 @@ export default {
 
 </show-code>
 
-### **Add close button**
+### **加上關閉的按鈕**
 
 <v-close-button></v-close-button>
 
@@ -330,7 +330,7 @@ export default {
 
 </show-code>
 
-### **`Scrollable`**
+### **使內容是可以滾動的（Scrollable）**
 
 <v-scrollable></v-scrollable>
 
@@ -410,7 +410,7 @@ export default {
 
 </show-code>
 
-### **Add `confirm` and `cancel` buttons**
+### **加上確認（confirm） 以及取消（cancel）按鈕**
 
 <v-action-buttons></v-action-buttons>
 
@@ -501,7 +501,7 @@ export default {
 
 </show-code>
 
-### **Stackable**
+### **建立可堆疊的（Stackable） modal**
 
 <v-stackable></v-stackable>
 
@@ -627,7 +627,7 @@ export default {
 
 </show-code>
 
-### **Accessibility**
+### **無障礙**
 
 
 <v-accessibility></v-accessibility>