# 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 | "" | 展示使用者名稱

<hr/>

### 2. Todo List 新增任務元件
> [color=#898000]元件樣式：border 2px solid skyblue; border-radius: 8px; padding: 10px;

| 輸入框 | 送出按鈕 |
| -------- | -------- |
| input | submitTask() |

| emit | payload | from | 說明
| -------- | -------- | -------- | -------- |
| newTask | Object | {taskName: “任務名稱”, isFinish: false, isEdit: false} | 當使用者添加新任務時觸發

<hr/>

### 3. Todo List 任務元件
3-1 資料變數說明 說明
| props | type | default | 說明
| -------- | -------- | -------- | -------- |
| taskName | String | "" | 準備要新增的任務名稱
| isFinish | Boolean | false | 呈現任務完成與否狀態
| isEdit | Boolean | false | 是否啟用編輯

3-2 Function 說明
這是一個在 taskName 上的點擊事件，每當點擊 taskName 渲染的 dom 時，會在此後方新增兩個元素，變更內容輸入框以及編輯按鈕。
如：
| 是否完成 | 任務名稱 | 變更內容輸入框 | 編輯按鈕 | 刪除按鈕 |
| -------- | -------- | -------- | -------- | -------- |
| isFinish | taskName | taskName | edited() | deleteTask()|

當 ediutTask() 觸法，變更內容輸入框會幫綁定當前資料的的 taskName 可以進行編輯更換；最後點擊編輯按鈕呼叫 edited() 更新資料。

| emit | payload | 說明
| -------- | -------- | -------- |
| isEdit | Boolean | 開啟編輯功能
| taskName | String | 將新的 taskName 更新
| deleteTask | | 將對應的 index 資料刪除