# Todo List 元件描述
## #app 規格
> [color=#898989]樣式：max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center;

<hr/>

## 子層元件
**1. Todo List Title 元件**
> [color=#898989]元件樣式：font-size: 3.2em; line-height: 1.1; color: #409EFF; margin-bottom: 2.5rem;

| props | type | default | 說明
| -------- | -------- | -------- | -------- |
| userName | String | "" | ex: "Joshua"

<hr/>

**2. Todo List 的展示板元件 （UI中個任務元件上下垂直排列）**
> [color=#898989]元件樣式：border 2px solid skyblue; border-radius: 8px; padding: 10px;

輸入框樣式
| 新任務輸入框| 送出按鈕 |
| -------- | -------- |
| newTask | addTask() |

| emit | payload | default | 說明
| -------- | -------- | -------- | -------- |
| newTask | String | "" | ex: "記得買圓規"

獲取 taskData 並且渲染-任務元件
| props | type | default | 說明
| -------- | -------- | -------- | -------- |
| taskData | Array | [] | ex: { taskName: "任務名稱", isFinish: false, isEdit: false }
> [color=#3a6ea3] 任務元件結構（左右依序排列），如下

| 是否完成| 任務名稱 | 刪除按鈕 |
| -------- | -------- | -------- |
| isFinish | taskName | deleteTask() |

> [color=#3a6ea3] 其中如果點擊“任務名稱”區域結構會變成，如下

| 是否完成 | 任務名稱 | 變更內容輸入框 | 編輯按鈕 | 刪除按鈕 |
| -------- | -------- | -------- | -------- | -------- |
| isFinish | taskName | taskName | edited() | deleteTask()|

拖曳功能：
透過拖曳行為去調整該任務元件的 index。

| emit | payload | default | 說明
| -------- | -------- | -------- | -------- |
| taskIndex | Number | 0 | ex: 0

<hr/>

**3. 任務元件（用來展示每一條任務的狀態以及可用操作）**
這邊的父層為 => 展示板元件

任務元件 checkBox：
初始化的任務資料有默認為 false 的勾選框，如打勾事件發生會 emit 給父層，表示任務完成，反之再次取消勾選也會 emit 任務尚未完成給父層。

| emit | payload | default | 說明
| -------- | -------- | -------- | -------- |
| isFinish | Boolean | true | ex: true

任務元件按鈕：編輯、刪除：
如果觸發編輯事件會將新輸入的任務名稱 emit 給父層去做資料的修改。

| emit | payload | default | 說明
| -------- | -------- | -------- | -------- |
| isEdit | Boolean | true | ex: true
| taskName | String | "" | ex: "記得買鉛筆"

如果觸發刪除事件會 emit 給父層，將這筆任務刪除。

| emit | payload | default | 說明
| -------- | -------- | -------- | -------- |
| taskName | String | "" | ex: "記得買鉛筆"