## Units (最小的元件)

### --- Breadcrumb

示意圖：


Props參數：

| Name | Default | Type | Description |
| -------------- | -------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isVisible | true | Boolean | 是否要顯示 |
| list | [] | Array with String | 麵包屑要呈現的內容<br/><span style="color:#858585;">※ 若list長度為0，則即使isVisible為true也不會顯示</span> |
| breadcrumbAttr | {separatorIcon:ArrowRight} | Object | 原生 Element Plus Breadcrumb元件的 Breadcrumb Attributes 屬性設定 [[請參考 Element Plus 的 Breadcrumb 面包屑元件]](https://element-plus.org/zh-CN/component/breadcrumb.html#breadcrumb-attributes) |

Demo：

<Breadcrumb 
  :isVisible="true"
  :list="['案件覆核總覽','員工資料異動']"
/>
    

### --- Datepicker

示意圖：


> 此元件非使用element plus的時間套件，而是使用 @vuepic/vue-datepicker套件 (為了方便處理民國年)

Props參數：

| Name | Default | Type | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| date | | Object | 日期格式，例如：<br/>new Date("2023/9/11") |
| vueDatepickerSlot | | Array with String | @vuepic/vue-datepicker套件可以使用的slot名稱<br><span style="color:#858585;">※ 若設定了slot名稱後，則<Datepicker></Datepicker>的slot default中，須設定對應的template，否則該slot區塊會不顯示畫面 <br><br>※ 須注意不同的picker種類，slot會回傳的值不一定會相同</span><br><br>[[請參考@vuepic/vue-datepicker 的Slots]](https://vue3datepicker.com/slots/components/) |
| vueDatepickerAttr | {"locale":"zh-tw","yearRange":[1911,2099],"enableTimePicker":false,"minDate":"new Date('1911/01/01')","maxDate":"new Date('2099/12/31')","preventMinMaxNavigation":true} | Object | 原生 @vuepic/vue-datepicker 套件的屬性設定 [[請參考@vuepic/vue-datepicker 的Props]](https://vue3datepicker.com/props/modes/) |
| vueDatepickerEvent | {} | Object | 原生 @vuepic/vue-datepicker 套件的屬性設定 [[請參考@vuepic/vue-datepicker 的Events]](https://vue3datepicker.com/methods-and-events/events/) |

> 若要控制內部元件(VueDatepicker)提供的 Methods 請參閱下方範例 Demo 5

Demo 1：

<!-- 簡易使用 -->
<Datepicker :date="date" />

<script setup>
import { ref } from "vue";
const date = ref(); //若要帶初值可以例如：ref(new Date())
</script>

Demo 2：

<!-- 加上prop -->
<Datepicker
    :date="new Date('2023/9/11')"
    :vueDatepickerAttr="{
      yearRange: [2020, 2025],
      minDate: new Date('2020/01/01'),
      maxDate: new Date('2025/12/31'),
      preventMinMaxNavigation: true
    }"
/>

Demo 3：

<!-- 使用slot (vueDatepickerSlot像是宣告，template去引用的概念) -->
<Datepicker
    :date="new Date('2023/9/11')"
    :vueDatepickerSlot="['input-icon']"
>
    <template #input-icon>
        <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" />
    </template>
</Datepicker>

Demo 4：

<!-- 使用Events -->
<Datepicker
    :date="new Date('2023/9/11')"
    :vueDatepickerEvent="{open(){console.log('open')}}"
/>

Demo 5：

<!-- 使用Methods -->
<Datepicker
    :date="new Date('2023/9/11')"
    ref="myDatepicker"
/>

<script setup>
import { ref } from "vue";
const myDatepicker = ref();
myDatepicker.value.innerRef.openMenu(); //關鍵為使用innerRef (此為元件內部defineExpose 傳遞給父層來操作元件本身element的參數)
</script>

### --- DateRange

示意圖：


> 1. 此元件非使用element plus的時間套件，而是使用 @vuepic/vue-datepicker套件 (為了方便處理民國年)
> 2. 此元件僅處理range相關的日期，無法透過 vueDatepickerAttr 設定，來改變非range以外的picker，若要改變非range的picker，請使用 [Datepicker元件](#—-Datepicker)

Props參數：

| Name | Default | Type | Description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| date | | Object | 日期格式，例如：<br/>new Date("2023/9/11") |
| vueDatepickerSlot | | Array with String | @vuepic/vue-datepicker套件可以使用的slot名稱<br/><span style="color:#858585;">※ 若設定了slot名稱後，則<Datepicker></Datepicker>的slot default中，須設定對應的template，否則該slot區塊會不顯示畫面 <br><br>※ 須注意不同的picker種類，slot會回傳的值不一定會相同</span><br><br>[[請參考@vuepic/vue-datepicker 的Slots]](https://vue3datepicker.com/slots/components/) |
| vueDatepickerAttr | {"locale":"zh-tw","yearRange":[1911,2099],"enableTimePicker":false,"minDate":"new Date('1911/01/01')","maxDate":"new Date('2099/12/31')","preventMinMaxNavigation":true,"range":true} | Object | 原生 @vuepic/vue-datepicker 套件的屬性設定 [[請參考@vuepic/vue-datepicker 的Props]](https://vue3datepicker.com/props/modes/)<br><span style="color:#858585;">※ range無法修改,會一直保持是 true</span> |
| vueDatepickerEvent | {} | Object | 原生 @vuepic/vue-datepicker 套件的屬性設定 [[請參考@vuepic/vue-datepicker 的Events]](https://vue3datepicker.com/methods-and-events/events/) |

> 若要控制內部元件(VueDatepicker)提供的 Methods 請參閱下方範例 Demo 5

Demo 1：

<!-- 簡易使用 -->
<DateRange :date="date" />

<script setup>
import { ref } from "vue";
const date = ref(); //若要帶初值可以例如：ref([new Date(),new Date()])
</script>

Demo 2：

<!-- 加上prop -->
<DateRange
    :date="[new Date('2023/9/11'),new Date('2023/9/13')]"
    :vueDatepickerAttr="{
      yearRange: [2020, 2025],
      minDate: new Date('2020/01/01'),
      maxDate: new Date('2025/12/31'),
      preventMinMaxNavigation: true
    }"
/>

Demo 3：

<!-- 使用slot (vueDatepickerSlot像是宣告，template去引用的概念) -->
<DateRange
    :date="[new Date('2023/9/11'),new Date('2023/9/13')]"
    :vueDatepickerSlot="['input-icon']"
>
    <template #input-icon>
        <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" />
    </template>
</DateRange>

Demo 4：

<!-- 使用Events -->
<DateRange
    :date="[new Date('2023/9/11'),new Date('2023/9/13')]"
    :vueDatepickerEvent="{open(){console.log('open')}}"
/>

Demo 5：

<!-- 使用Methods -->
<DateRange
    :date="[new Date('2023/9/11'),new Date('2023/9/13')]"
    ref="myDateRange"
/>

<script setup>
import { ref } from "vue";
const myDateRange = ref();
myDateRange.value.innerRef.openMenu(); //關鍵為使用innerRef (此為元件內部defineExpose 傳遞給父層來操作元件本身element的參數)
</script>

### --- Icon

Icon類型圖表：

| show | close | reload | list |
| --------------------------------------------- | ---------------------------------------------------- | --------------------------------------------- | --------------------------------------------- |
|  |  |  |  |
| <b>code</b> | <b>time</b> | <b>warning</b> | <b>date</b> |
|  |  |  |  |

Props參數：

| Name | Default | Type | Description |
| -------- | ------- | ------- | -------------------------------------------- |
| type | | String | 要選擇的icon類型<br>※ 請參照上表Icon類型圖表 |
| alt | "" | String | img的alt要填寫的圖片說明文字 |
| isCursor | false | Boolean | 滑鼠游標移入時，是否顯示可點選的滑鼠指標 |

Demo：

<Icon
  type="close"
  alt="清除身分證/居留證號"
  :isCursor="true"
/>
    

### --- Table

示意圖：


Props參數：

| Name | Default | Type | Description |
| --------------- | -------------------------------------------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data | [] | Array with Object | 表格資料 [[請參考Element Plus 的 Table 表格元件](https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7)] |
| tableSlot | | Array with String | 原生Element Plus 套件的Table元件可以使用的slot名稱<br><span style="color:#858585;">※ 若設定了slot名稱後，則&lt;Table&gt;&lt;/Table&gt;的slot default中，須設定對應的template</span><br><br>[[請參考Element Plus 的 Table 表格元件]](https://element-plus.org/zh-CN/component/table.html#table-%E6%8F%92%E6%A7%BD) |
| tableAttr | {maxHeight:300,emptyText:"無資料"} | Object | 原生 Element Plus 套件的 Table 元件屬性設定 <br><span style="color:#858585;">※ data在這邊(tableAttr.data)會無效,請以上列第一列的data為主</span> <br><br>[[請參考Element Plus 的 Table 表格元件](https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7)] |
| tableEvent | {} | Object | 原生 Element Plus 套件的 Table 元件事件設定 [[請參考Element Plus 的 Table 表格元件](https://element-plus.org/zh-CN/component/table.html#table-%E4%BA%8B%E4%BB%B6)] |
| paginationSlot | | Array with String | 原生Element Plus 套件的Pagination元件可以使用的slot名稱<br><span style="color:#858585;">※ 若設定了slot名稱後，則&lt;Table&gt;&lt;/Table&gt;的slot default中，須設定對應的template (paginationDefault)，這邊與原分頁元件的slot參數(default)不太一致的原因是因為，此<Pagination></Pagination>已被融合包裝在Table元件，因此如果template名稱也指定default的話，將會變成Table的slot而非Pagination的slot </span><br><br>[[請參考Element Plus 的 Pagination 分頁元件]](https://element-plus.org/zh-CN/component/pagination.html#%E6%8F%92%E6%A7%BD) |
| paginationAttr | {layout:'prev, pager, next',total:data.length,hideOnSinglePage:true} | Object | 原生 Element Plus 套件的 Pagination 元件屬性設定 [[請參考Element Plus 的 Pagination 分頁元件](https://element-plus.org/zh-CN/component/pagination.html#%E5%B1%9E%E6%80%A7)] |
| paginationEvent | {} | Object | 原生 Element Plus 套件的 Pagination 元件事件設定 [[請參考Element Plus 的 Pagination 分頁元件](https://element-plus.org/zh-CN/component/pagination.html#%E4%BA%8B%E4%BB%B6)] |

Event 方法：

| Name | Default | Type | Description |
| ------------------- | ------- | -------- | -------------------------------------- |
| onPageSizeChange | | Function | 表格更動每頁顯示筆數事件 |
| onCurrentPageChange | | Function | 表格切換頁面事件 |

Demo：

<Table
    :data="[
      {
        handleDate: '2023/07/19',
        code: 1,
        serialNumber: '202307190123',
        caseName: '單位狀態歸屬新增',
        contactPerson: 'T100666',
        updateInfo: '新增單位狀態歸屬',
        reviewer: 'G_SADM'
      },
      {
        handleDate: '2023/07/20',
        code: 2,
        serialNumber: '202307190124',
        caseName: '單位狀態歸屬新增2',
        contactPerson: 'T100667',
        updateInfo: '新增單位狀態歸屬2',
        reviewer: 'G_SADM2'
      }
    ]"
    :tableAttr="{ border: true }"
    :tableEvent="{
      sortChange() {
        console.log('sort change');
      }
    }"
    :paginationAttr="{ pageSize: 1 }"
    @onCurrentPageChange="()=>console.log('current page change')"
  >
    <el-table-column fixed sortable prop="handleDate" label="承辦日" />
    <el-table-column sortable prop="code" label="憑單代碼" />
    <el-table-column sortable prop="serialNumber" label="憑單編號" />
    <el-table-column prop="caseName" label="案件名稱" />
    <el-table-column prop="contactPerson" label="承辦人" />
    <el-table-column prop="updateInfo" label="異動資訊" />
    <el-table-column fixed="right" prop="reviewer" label="覆核人" />
  </Table>

Demo 2：

<!-- 使用tableSlot參數 -->
<Table
    :data="[]"
    :tableSlot="['empty']"
  >
    <el-table-column fixed sortable prop="handleDate" label="承辦日" />
    <el-table-column sortable prop="code" label="憑單代碼" />
    <el-table-column sortable prop="serialNumber" label="憑單編號" />
    <el-table-column prop="caseName" label="案件名稱" />
    <el-table-column prop="contactPerson" label="承辦人" />
    <el-table-column prop="updateInfo" label="異動資訊" />
    <el-table-column fixed="right" prop="reviewer" label="覆核人" />
    <template #empty><div>無資料</div></template>
  </Table>

Demo 3：

<!-- 使用paginationSlot參數 -->
<Table
    :data="[
      {
        handleDate: '2023/07/19',
        code: 1,
        serialNumber: '202307190123',
        caseName: '單位狀態歸屬新增',
        contactPerson: 'T100666',
        updateInfo: '新增單位狀態歸屬',
        reviewer: 'G_SADM'
      },
      {
        handleDate: '2023/07/20',
        code: 2,
        serialNumber: '202307190124',
        caseName: '單位狀態歸屬新增2',
        contactPerson: 'T100667',
        updateInfo: '新增單位狀態歸屬2',
        reviewer: 'G_SADM2'
      }
    ]"
    :paginationAttr="{ pageSize: 1 }"
    :paginationSlot="['default']"
  >
    <el-table-column fixed sortable prop="handleDate" label="承辦日" />
    <el-table-column sortable prop="code" label="憑單代碼" />
    <el-table-column sortable prop="serialNumber" label="憑單編號" />
    <el-table-column prop="caseName" label="案件名稱" />
    <el-table-column prop="contactPerson" label="承辦人" />
    <el-table-column prop="updateInfo" label="異動資訊" />
    <el-table-column fixed="right" prop="reviewer" label="覆核人" />
    <template #paginationDefault><a href='#'>客製的地方</a></template>
  </Table>

## Widgets (有引用Units所組成的元件)

### --- InvalidFeedback

<!-- 引用到的 Units 元件： -->
<Icon />

欄位驗證錯誤時，下方的客製化文字

示意圖

Props參數：

| Name | Default | Type | Description |
| ---------- | ----------------------- | ------- | -------------------------------------------- |
| isVisible | true | Boolean | 是否要顯示元件 |
| iconType | "warning" | String | 要使用的icon類型 [[請參考Icon元件](#—-Icon)] |
| iconAlt | "invalid feedback icon" | String | img的alt要填寫的圖片說明文字 [[請參考Icon元件](#—-Icon)] |
| isShowIcon | true | Boolean | 是否要顯示icon |

Slot：

| Name | Default | Type | Description |
| ------- | ------- | ---- | ------------------------------------- |
| default | | node | 要顯示的HTML或JSX節點，也可以輸入文字<br/><span style="color:#858585;">※ 建議如果如果要設定HTML請使用行內元素以避免畫面不如預期</span> |

Demo：

<InvalidFeedback
  :isVisible="true"
  iconType="warning"
  iconAlt="欄位錯誤icon"
  :isShowIcon="true"
>
  此欄位為必填
</InvalidFeedback>

### --- PageBox

<!-- 引用到的 Units 元件： -->
<Breadcrumb />

麵包屑 + 頁面容器的呈現

示意圖

Props參數：

| Name | Default | Type | Description |
| ------------------- | -------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| breadcrumbIsVisible | true | Boolean | 是否要顯示Breadcrumb元件[[請參考Breadcrumb元件](#—-Breadcrumb)] |
| breadcrumbList | "warning" | Array with String | 麵包屑要呈現的內容 [[請參考Breadcrumb元件](#—-Breadcrumb)] |
| breadcrumbAttr | {separatorIcon:ArrowRight} | Object | 原生 Element Plus Breadcrumb元件的 Breadcrumb Attributes 屬性設定 [[請參考Breadcrumb元件](#—-Breadcrumb)] |
| isGetFromHistory | true | Boolean | 是否要抓路由設定來呈現麵包屑的內容<br/><span style="color:#858585;">※ isGetFromHistory若為true ，則breadcrumbList參數會無效<br/><br/>※ 這邊需搭配路由中設定 meta 參數 breadcrumbConfig.list <br/> 例如：<br/>meta: {breadcrumbConfig: {list: ["案件覆核總覽","員工資料異動"]}}</span> |

Slot：

| Name | Default | Type | Description |
| ------- | ------- | ---- | ------------------------------------------ |
| default | | node | 要顯示的HTML或JSX節點，也可以輸入文字<br/> |

Demo 1：

<!-- 使用路由設定來獲取麵包屑的方式： -->
<PageBox>
    <h1>Hello world</h1>
</PageBox>

<!-- 路由中也要設定 meta 參數 -->
{
    ...,
    meta: {
      breadcrumbConfig: {
        list: ["案件覆核總覽"]
      }
    }
}

Demo 2：

<!-- 不使用路由設定來獲取麵包屑的方式： -->
<PageBox
  :breadcrumbIsVisible="true"
  :breadcrumbList="['案件覆核總覽','員工資料異動']"  
  :isGetFromHistory="false"
  :breadcrumbAttr="{
    separator: '/'
  }"
>
    <h1>Hello world</h1>
</PageBox>