Vue 3 対応の UI フレームワーク「PrimeVue」のポイントを調査していく
keisuke kimuraまずは良さそうなポイントを整理して、課題はその後に整理します。
あくまでも上記ツイート前提なので、他観点の良し悪しはケースバイケースです。
keisuke kimuraInputNumber
標準でカンマ区切りに対応している。
locale や currency も嬉しいポイント。
右揃えできるとなおよし。(inputStyle, inputClass で出来そう)
keisuke kimuraCalendar
「Multiple Months」はレア。
地味に要望があったりするシーンなので、コレは嬉しい。
keisuke kimuraDataTable
- 行、セルの両方とも編集機能がある。
https://primefaces.org/primevue/showcase/#/datatable/reorder
- 並び替えも標準であると心強い。
https://primefaces.org/primevue/showcase/#/datatable/rowgroup
- RowSpan がある。最近では珍しくないが、あると嬉しい。
- 小計行が追加できる。複数は出来なさそう？
- 「一覧 -> 詳細 -> 一覧」 などの導線を作る際に必ず必要になる状態管理が標準である。
これは他には無いのでは!?
- CRUD サンプル！！！
keisuke kimuraOverlayPanel
ユーザービリティ的な良し悪しは考える余地がありますが、試してみたいシーンはよくある。
keisuke kimuraここまで PrimeVue のコンポーネント群について、「中小規模の SPA な CRUD システム」で嬉しい特徴的なコンポーネントを上げてみました。
ここまで揃っていれば十分すぎるのではないでしょうか。
仮にもし追加するとしたら、国内のみですが、和暦の入力コンポーネントを自作しておけば盤石な気がします。
次からはユーティリティ系を確認していきます。
keisuke kimuraデザイン
sass 変数を使った編集はライセンスが必要です。 ( CSS は :deep で上書きできます。)
keisuke kimuraPrimeFlex
Layout 系のユーティリティCSSは別途 npm install する必要があります。
こちらは scss ファイルからインポートできるので、
変数を上書きすることが出来ます。
基本的なクラスは用意されています。
- Flexbox
- CSS Grid
- Form Layout
- margin & padding
- breakpoint
欲を言えば truncate があるなら、white-space: pre もほしいところです。