## Vue UI Framework研究
### Installation
在既有vite vue專案下安裝Quasar

npm install quasar @quasar/extras
npm install -D @quasar/vite-plugin sass@1.32.12

注意⚠️若要使用scss進行樣式開發，請安裝1.32.12版本的sass不然專案console會噴出警告顯示部分css變數和mixin即將棄用，筆者同事安裝了1.69的版本發現此問題

npm uninstall sass
npm install sass@1.32.12

可依照需求，點擊switch加入需要的config設定


Auto-import component case - vue使用Quasar提供元件的風格，預設為kebab(例:<q-btn>)
是否引入Roboto字型和Roboto font extended(支援拉丁文)
是否引入Animation.css(提供css動畫效果)
是否引入Quasar scss/sass變數

可透過Variables list調整框架整體參數


語言設定
icon引入設定，有提供Material Icons、Fontawesome、Bootstrap Icons等等風格icon供使用
是否留下 Quasar Config Object 空物件位置，如下圖註解的部分，可以針對Quasar做一些設定，包含整體主視覺的色票


選完後可以將設定貼入main.js，注意! 色票設定main.js的權重高過vite.config.js


vite.config.js


### vite全域css設定
若使用vite的全域css設定scss變數，與Quasar變數同名的情境，權重會是quasar-variables.scss比較高，如果將quasar-variables同名變數刪除則會吃全域設定


### 元件介紹
* 日期選擇器
* 說明: 還不錯用，不用額外裝套件，且提供時間區間選擇器可以用，還可以在一個選擇器內選複數的時間區間
* 下拉選單
* 說明: 有提供圓角、顏色設定、附有簡易的過濾器、支援多選選項，以逗號分割、option提供客製化，可以簡易的在選項前方加上自訂義icon，支援auto compelete(關鍵字搜尋option)
* table元件
* 說明: 提供orderby、pagination(支援頁碼自訂義slot)、內建scroll設定(可動態呼叫資料)、提供資料列單選/複選/全選、按著shift選擇區段資料列、支援資料列收闔、responsive、export csv檔案，支援popup edit資料列內容
* 多層下拉選單
* color picker
* validation
* 自訂義驗證規則
* 輪播套件
* 支援燈箱頁碼
* 無限輪播
* 複數preview輪播元件
* 編輯器元件
* 文字置左
* 文字置中
* 文字置右
* 文字加粗
* 斜體/粗體
* undo/redo
* Dialog元件

#### 樣式
* Typography
* 說明: class name偏語意化，spacing從之前習慣的mt-數字，改為
* q-mt-sm
* q-mt-md
* q-mt-lg
* q-mt-xl
* 若要使用該框架，需要和設計事先溝通建議參照該框架的間距設計或是依據設計需求調整間距參數
* scss variables
* 可以在.vue檔或是scss內直接使用該框架的scss變數
* $grey-5
* $red-1

### 元件設定說明

可以在main.js內調整整體元件的共用設定，以notify和Loading為例，需先引入plugin並可以對其全域config設定進行調整


針對notify可以將它提供的function進一步封裝成composables供vue component使用
* 首先要引入useQuasar
* 定義export function行為

* 區域元件內使用封裝好的composables


可以觀察到notify有被成功呼叫，並且該元件的設定可以吃到全域設定(class name: '123', iconSize: '180px')


loading plugin的部分沒有在main.js進行設定所以顯示出來的效果是預設的樣式，且因為沒有特別封裝，所以必須引入useQuasar直接呼叫對應的方法，團隊可以討論是否需要對其進行封裝


#### 元件設定

以Date Picker為例

**Props**
component型態、v-model綁定參數
內容設定
PS:若啟用Title屬性，會占用原本的月、日顯示區塊

**Event**

v-bind event使用方式，可透過以下範例將v-model綁定的日期參數視作陣列，這裡以index 9為例(日)，將==='3'的日從選擇器上標註出來

2023/10/19

<QDate :events="dateIsEvent" :model-value="selectDate" color="secondary">
    <div class="row items-center justify-end q-gutter-sm">
        <QBtn label="Cancel" color="primary" flat v-close-popup />
        <QBtn label="OK" color="primary" flat v-close-popup />
    </div>
</QDate>

const dateIsEvent = (currentDate) => {
    return currentDate[9] === '3'
}


**Slot**
插槽default的使用方式不需要撰寫v-slot tag，但Quasar有些元件的slot撰寫方式會不太一樣，若真的需要使用時建議查看文件

**default**
// ❌
<template v-slot>
</template>
// ✅
<QDate @update:model-value="alertSomething" color="secondary" :model-value="date">
    <div class="row items-center justify-end q-gutter-sm">
        <QBtn label="Cancel" color="primary" flat v-close-popup />
        <QBtn label="OK" color="primary" flat v-close-popup />
    </div>
</QDate>

**others**
<q-input color="purple-12" v-model="text" label="Label">
    <template v-slot:prepend>
      <q-icon name="event" />
    </template>
</q-input>


**文件流**

📢 文件流當中的API選單不會含括所有方法，有些event的使用方式會藏在同一頁的其他範例當中，若要使用任何元件，建議花點時間閱讀對應的元件頁面

📺 若覺得文件很難懂，也可以查看這系列的教學影片，幾乎每一個元件都有對應到撥放列表中的其中一部影片，影片連結: https://www.youtube.com/watch?v=MqfUL6upaMU&list=PLFZAa7EupbB7xC-C0YwYk7aXIAbHYX1Xl