Open11

Vue 3 対応の UI フレームワーク「PrimeVue」のポイントを調査していく

keisuke kimurakeisuke kimura

まずは良さそうなポイントを整理して、課題はその後に整理します。
あくまでも上記ツイート前提なので、他観点の良し悪しはケースバイケースです。

keisuke kimurakeisuke kimura

DataTable

https://primefaces.org/primevue/showcase/#/datatable/edit

  • 行、セルの両方とも編集機能がある。

https://primefaces.org/primevue/showcase/#/datatable/reorder

  • 並び替えも標準であると心強い。

https://primefaces.org/primevue/showcase/#/datatable/rowgroup

  • RowSpan がある。最近では珍しくないが、あると嬉しい。
  • 小計行が追加できる。複数は出来なさそう?

https://primefaces.org/primevue/showcase/#/datatable/state

  • 「一覧 -> 詳細 -> 一覧」 などの導線を作る際に必ず必要になる状態管理が標準である。
    これは他には無いのでは!?

https://primefaces.org/primevue/showcase/#/datatable/crud

  • CRUD サンプル!!!
keisuke kimurakeisuke kimura

ここまで PrimeVue のコンポーネント群について、「中小規模の SPA な CRUD システム」で嬉しい特徴的なコンポーネントを上げてみました。

ここまで揃っていれば十分すぎるのではないでしょうか。
仮にもし追加するとしたら、国内のみですが、和暦の入力コンポーネントを自作しておけば盤石な気がします。

次からはユーティリティ系を確認していきます。

keisuke kimurakeisuke kimura

PrimeFlex

Layout 系のユーティリティCSSは別途 npm install する必要があります。

https://www.primefaces.org/primevue/showcase/#/primeflex

こちらは scss ファイルからインポートできるので、
変数を上書きすることが出来ます。

基本的なクラスは用意されています。

  • Flexbox
  • CSS Grid
  • Form Layout
  • margin & padding
  • breakpoint

欲を言えば truncate があるなら、white-space: pre もほしいところです。