タグ別アーカイブ: vue-thin-modal

vue-thin-modal v1.0.0 をリリースしました

去年から作っていた Vue のモーダルコンポーネント vue-thin-modal の v1.0.0 をリリースしました。仕事でも結構使っていて、特に大きな問題もなく、API も安定しているのでメジャーバージョンを上げました。

vue-thin-modal は世の中の多くのつらいモーダル実装を見て、つらくならなくするために作ったライブラリです。主に以下のような特徴があります。

  • モーダルはどこに置いても DOM の実態は <body> 直下にマウントされる (いわゆる Portal)。
  • モーダルが開くと通常のコンテンツ部分はスクロールが止まる。モーダル内のコンテンツがウィンドウサイズを超えてもスクロールできる。
    • これで発生する、スクロールバーが消えることによるガタツキを防ぐ実装もしている。
  • モーダルを閉じたときに元のコンテンツにフォーカスを戻す。
  • デフォルトの CSS スタイルが提供されていて、何もしなくてもそれっぽく動く。
  • 背景とモーダルコンテンツのトランジションが独立していて、柔軟に設定できる。
  • モーダルの表示はスタックで管理していて、モーダルの上にモーダルとかもやろうと思えばできる (UI 的にどうなんだというのは置いといて)。

モーダルのつらさについては CodeGrid 5周年記念パーティーで話しているので、そのスライドも見てみてください。

vue-thin-modal を作る際には Bootstrap ModalModaal をかなり参考にしました。特に Bootstrap Modal の作り込みはすごくて、その完成度の高さに驚いた覚えがあります。

関連ライブラリとして vuex-modal というものもあります。こちらは vue-thin-modal を作る前に作ったものですが、今は内部で vue-thin-modal を使用しています。

自分の欲しい機能はすべて実装したので、これからの展望は特にないですが、バグレポートや機能要望などは歓迎です!