Web 猫去年から作っていた Vue のモーダルコンポーネント vue-thin-modal の v1.0.0 をリリースしました。仕事でも結構使っていて、特に大きな問題もなく、API も安定しているのでメジャーバージョンを上げました。
vue-thin-modal は世の中の多くのつらいモーダル実装を見て、つらくならなくするために作ったライブラリです。主に以下のような特徴があります。
- モーダルはどこに置いても DOM の実態は
<body>直下にマウントされる (いわゆる Portal)。 - モーダルが開くと通常のコンテンツ部分はスクロールが止まる。モーダル内のコンテンツがウィンドウサイズを超えてもスクロールできる。
- これで発生する、スクロールバーが消えることによるガタツキを防ぐ実装もしている。
- モーダルを閉じたときに元のコンテンツにフォーカスを戻す。
- デフォルトの CSS スタイルが提供されていて、何もしなくてもそれっぽく動く。
- 背景とモーダルコンテンツのトランジションが独立していて、柔軟に設定できる。
- モーダルの表示はスタックで管理していて、モーダルの上にモーダルとかもやろうと思えばできる (UI 的にどうなんだというのは置いといて)。
モーダルのつらさについては CodeGrid 5周年記念パーティーで話しているので、そのスライドも見てみてください。
vue-thin-modal を作る際には Bootstrap Modal や Modaal をかなり参考にしました。特に Bootstrap Modal の作り込みはすごくて、その完成度の高さに驚いた覚えがあります。
関連ライブラリとして vuex-modal というものもあります。こちらは vue-thin-modal を作る前に作ったものですが、今は内部で vue-thin-modal を使用しています。
自分の欲しい機能はすべて実装したので、これからの展望は特にないですが、バグレポートや機能要望などは歓迎です！