Edah Vue Component

此為公司 Vue 專案需使用的元件庫，是基於 primeVue + tailwindcss 來做封裝。

Installation

1. 安裝 package

# Using pnpm
pnpm add @hismax/edah-vue-component

2. 註冊 Plugin / Config

使用此套件需要在 Vuu 手動註冊 primeVue 相關的 plugin 和 config，請加入底下內容：

// main.ts （或你的專案進入點）
import { primeVueConfig, PrimeVueEngine } from '@hismax/edah-vue-component'

const app = createApp(App)
app.use(PrimeVueEngine, primeVueConfig)
app.mount('#app')

3. 引入 CSS Theme

由於 primeVue theme 的部分目前是透過 Tailwind 的 CSS 變數來做控制，所以需要引入相關的 CSS 設定，如底下配置：

@import 'tailwindcss';

@import '@hismax/edah-vue-component'; /* 引入有一些寫在 SFC 內的 CSS 檔案 */
@import '@hismax/edah-vue-component/themes/edah.css'; /* 引入 Theme 的 CSS 檔案 */
@source '../node_modules/@hismax/edah-vue-component/dist'; /* 指向對應的檔案 */

Development

1. 安裝 dependencies

pnpm install

2. 啟動 dev server

pnpm run dev

3. 打包

pnpm run build

Road map

• [ ] 民國年
• [ ] InputText With Clear Icon
• [ ] Select
  • default showClear icon
• [ ] Float Label
  • variant=on
  • other props
• [ ] InputButton
  • InputText With Clear Icon Component + InputGroup
• [ ] CasecadeSelect With Clear Icon
• [ ] DatePicker With Button & Clear Icon
• [ ] Multiple Select https://primevue.org/multiselect/#template
• [ ] Select https://primevue.org/select/#template add item is optional
• [ ] DataTable
  • [ ] 改 Default Strip & Border
  • [ ] DataTable Header add input on the left (props flag)
  • [ ] Highlight edited row or cell
  • [ ] Delete checkbox checked, row display stroke
• [ ] Tree
  • [ ] CRUD
  • [ ] Order