目的
今まで書いてきた記事で作成していたASP.Net Core RazorPageでnon-SPAなVueコンポーネントの作成と、関連して作っていたTestCafeのテストコードをまとめたプロジェクトソースがある程度整ったのでサンプルs-すとして提供します。気が向いたら遊んでみてください。
前提
ASP.NetCore RazorPage+Vue+blumaの環境を利用します。
以前に書いた「Vue.jsを利用してみる（１）」と「Vue.jsを利用してみる（１）」を参照しての環境を構築します。
ソース
GitHUBの以下のURLに公開しています。
https://github.com/nosa67/RazorPageVue
提供内容
Vueコンポーネント
| コンポーネント名 | 概要 |
|---|---|
| vueCheckButton | 複数選択可能なチェックボタン |
| vueRadioButton | 未選択可能なラジオボタン |
| vueTextInput | テキスト入力 |
| vueIntegerInput | 整数入力 |
| vueRealInput | 実数入力 |
| vueTimeInput | 時刻入力（サーバーではTimeSpan） |
| vueDateInput | 日付入力（サーバーではDateTime） |
バリデーション属性
| バリデーション属性 | 概要 |
|---|---|
| Required | 入力必須 |
| StringLength | テキストの、最小長、最大長 |
| Range | 整数、実数、時刻の最小、最大、ステップ |
| メールアドレスかどうか | |
| Url | URLかどうか |
| Compare | ２つのテキストの同一性 |
TestCafe
| テストファイル | 概要 |
|---|---|
| VueCheckButton.test.ts | チェックボタンのテスト |
| VueRadioButton.test.ts | ラジオボタンのテスト |
| VueTextInput.test.ts | テキスト入力のテスト |
| VueIntegerInput.test.ts | 整数入力のテスト |
| VueRealInput.test.ts | 実数入力のテスト |
| VueTimeInput.test.ts | 時刻入力のテスト |
| VueDateInput.test.ts | 日付入力のテスト |
補足
不要なコードを整理したり、バグを修正したりしていますので、今まで書いてきた記事のコードとは少し異なります。記事の方は修正しませんので、ソースを追ってください。テストコードがあるように、ある程度のテストはしていますが、まだまだバグはありますので使おうと思っているならもっとテストしてください。
もともとの記事では、EdgeとIE11を別のコンポーネントにしていましたが、Edgeがchromiumベースになって、インターフェースがこなれたので、IE11のみ別コンポーネントになるように変更しています。
ブラウザごとにインタフェースが異なるのを避けるなら、全て独自コンポーネントにしてもいいかもしれません。