MDC: 標準コンポーネントをカスタムコンポーネントに入れ替え機能(ドキュメント)

developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/customcomponent.adoc

@@ -0,0 +1,87 @@
+[[customcomponent]]
+== カスタムコンポーネント
+
+カスタムコンポーネントをレイアウトに配置することで、独自の画面部品を画面に組み込むことができます。
+
+カスタムコンポーネントは、 `コンポーネント種別` によって、テンプレート文字列を直接記述する方法と、登録済みのコンポーネントを呼び出す方法のいずれかを選択できます。 +
+テンプレートの実装方法の詳細については、 link:../../../storybook/index.html?path=/docs/開発者ドキュメント-オリジナルテンプレート[コンポーネントカタログ^]を参照してください。
+
+
+[[customcomponent_settings]]
+=== カスタムコンポーネントの設定
+
+[cols="1,4a", options="header"]
+|===
+|設定項目 |設定内容
+
+|コンポーネント種別
+|カスタムコンポーネントの実装方式を選択します。 +
+選択した種別によって、以降の項目の有効範囲や挙動が異なります。
+
+TEMPLATE:: テンプレート文字列を直接記述してコンポーネントを定義します。 +
+`テンプレートの解釈方法` に応じて `HTML` / `VUE_SFC` / `VUE_SFC_LIKE` のいずれかを選択できます。
+
+COMPONENT:: 登録済みのコンポーネントを呼び出します。 +
+`コンポーネント名` には呼び出すコンポーネントの名称を指定します。実行時にはコンポーネントが動的にロードされ、コンポーネントとしてレンダリングされます。 +
+未登録のコンポーネント名を指定した場合、ロードに失敗し、コンポーネントが正しく表示されません。
+
+|テンプレート定義名
+|登録済テンプレート名を設定します。 +
+`コンポーネント種別` が `TEMPLATE` の場合に有効な設定です。
+
+|テンプレートの解釈方法
+|記述されたテンプレート文字列の解釈タイプです。 `コンポーネント種別` が `TEMPLATE` の場合に選択できます。 +
+以下の3つから選択できます。
+
+HTML:: HTMLとして解釈します。HTMLやスクリプトの記述が可能です。
+VUE_SFC:: Vue.jsのSFC形式（単一ファイルコンポーネント形式）で記述されたコンポーネントとして解釈します。
+VUE_SFC_LIKE:: Vue.jsのランタイムを用いてコンポーネントとして解釈します。MDCでは、Vue.jsのランタイムに加えてコンパイラもバンドルしており、Vue.jsのテンプレート構文を利用することが可能です。
+
+|コンポーネント名
+|`コンポーネント種別` が `COMPONENT` の場合は必須です。呼び出すコンポーネントの名称を指定します。 +
+`コンポーネント種別` が `TEMPLATE` の場合で `テンプレートの解釈方法` が `VUE_SFC_LIKE` の場合も必須です。 +
+`テンプレートの解釈方法` が `VUE_SFC` でコンポーネント名が未入力の場合、自動でランダムなコンポーネント名を割り当てます。 +
+コンポーネント名は、英文字とハイフン(-)のみを利用したパスカルケースでの命名を推奨します。
+
+|VUE_SFC形式のテンプレートをプリコンパイルするか
+|Vue.jsのSFC形式のテンプレートをプリコンパイルするかを指定します。`テンプレートの解釈方法` が `VUE_SFC` であり、Vue.jsのSFC形式のテンプレートを定義保存時にプリコンパイルしておきたい場合にチェックします。プリコンパイルしておくことで、コンポーネントの初期化処理を高速化できます。
+
+[NOTE]
+====
+プリコンパイルの注意点::
+- プリコンパイルを実行したい場合には、 `コンポーネント名` の指定が必須となります。
+- `テンプレート定義名` で指定した登録済みのテンプレートは、定義保存時に実行されてプリコンパイルされるため、テンプレートの内容が変更された場合は再度定義を保存する必要があります。また、JSPやGroovyTemplateなどで記述されたテンプレートには、リクエスト情報やセッション情報、ユーザー固有情報などを使用しないように注意してください。
+====
+
+|===
+
+
+[[customcomponent_data_binding]]
+=== データ受け渡し
+
+カスタムコンポーネントが受け取る props および発火する emits は、 **カスタムコンポーネントで置き換える対象のMDC標準のコンポーネントが受け取る props および発火する emits と同じ** になります。 +
+詳細は置き換え対象のMDC標準コンポーネントの実装を参照してください。
+
+.例：検索条件ダイアログをカスタムコンポーネントに置き換える場合
+====
+置き換え対象の `MSearchConditionDialog.vue` が受け取る props と発火する emits がそのままカスタムコンポーネントに引き渡されます。 +
+
+.置き換え対象の props
+* `viewKey` : EntityView の Key 情報
+* `title` : 検索画面タイトル
+* `searchConditionSection` : 検索条件セクション
+* `initialSearchCondition` : 初期検索条件
+* `searchErrorInfo` : 検索エラーメッセージ
+* `aboveConditionSection` : 検索条件上のセクション
+* `belowConditionSection` : 検索条件下のセクション
+* `customSearchCondition` : 検索条件をさらに別のカスタムコンポーネントで置き換える設定
+* `contextMap` : コンテキストマップ（下位のコンポーネントに引き渡す情報）
+
+.置き換え対象の emits
+* `change:search-condition` : 検索条件変更
+* `loaded:definition` : 検索画面定義ロード完了
+* `error:load` : 検索画面定義ロード失敗
+* `update:linkProperty` : 連動プロパティ更新
+
+カスタムコンポーネントはこれらの props / emits を、置き換え対象が `VUE_SFC` / `VUE_SFC_LIKE` のテンプレートで実装されたコンポーネントか、 `COMPONENT` で読み込まれたコンポーネントかにかかわらず、透過的に受け渡します。
+====

developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/detaillayout.adoc

@@ -67,6 +67,10 @@ link:https://materialdesignicons.com/[Material Design Icons^]のアイコンタ
 |編集ボタンや保存ボタンなど、標準で提供されるボタンの設定をカスタマイズします。
 詳細は<<detailview_base_button_setting, 標準ボタン設定>>を参照してください。
 
+|画面コンポーネントカスタム設定
+|詳細画面の各構成要素を、独自のカスタムコンポーネントに置き換える場合に設定します。
+詳細は<<detailview_customcomponent, カスタムコンポーネント>>を参照してください。
+
 |画面上部のカスタムボタン
 |タイトル領域の下に表示する独自のボタンを設定します。
 詳細は<<detailview_custom_button_setting, カスタムボタン設定>>を参照してください。
@@ -178,6 +182,27 @@ link:https://materialdesignicons.com/[Material Design Icons^]のアイコンタ
 NOTE: 保存ボタン、ロック解除ボタンには `表示フラグ` `表示判定スクリプト` 設定はありません。
 ロック解除ボタンはロックボタン設定で表示が制御されます。
 
+[[detailview_customcomponent]]
+==== カスタムコンポーネント
+
+詳細画面を構成する各要素を、独自のカスタムコンポーネントに置き換える場合に設定します。 +
+各カスタムコンポーネントの共通設定項目の詳細は、 <<customcomponent, カスタムコンポーネント>> を参照してください。
+
+[cols="1,4a", options="header"]
+|===
+|設定項目 |設定内容
+
+|詳細ビュー
+|詳細画面全体のレイアウトを置き換えるカスタムコンポーネントを設定します。 +
+`MDetailView` コンポーネントを置き換えます。
+
+|選択ダイアログ
+|参照プロパティの選択ダイアログを置き換えるカスタムコンポーネントを設定します。 +
+`MSelectDialog` コンポーネントを置き換えます。
+
+|===
+
+
 .カスタムクリックイベントの変数
 カスタムクリックイベントとして実行するJavaScriptには、以下の変数がバインドされます。
 ====

developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/index.adoc

@@ -21,4 +21,6 @@ include::bulklayout.adoc[]
 
 include::filter.adoc[]
 
+include::customcomponent.adoc[]
+
 include::customize.adoc[]

developerguide/src/docs/asciidoc/materialdesigncomponents/entityview/searchlayout.adoc

@@ -73,6 +73,10 @@ link:https://materialdesignicons.com/[Material Design Icons^]のアイコンタ
 |検索条件表示ボタンや新規登録ボタンなど、標準で提供されるボタンの設定をカスタマイズします。
 詳細は<<search_base_button_setting, 標準ボタン設定>>を参照してください。
 
+|カスタムコンポーネント設定
+|検索画面の各構成要素を、独自のカスタムコンポーネントに置き換える場合に設定します。
+詳細は<<searchview_customcomponent, 検索画面のカスタムコンポーネント>>を参照してください。
+
 |ごみ箱操作をユーザー削除データに限定
 |ごみ箱内のデータ操作（取得/復元/削除）を削除したユーザーのみに限定する場合はチェックを入れます。
 限定する場合、管理者ユーザーも他者削除データは操作ができなくなります。
@@ -179,6 +183,59 @@ link:https://materialdesignicons.com/[Material Design Icons^]のアイコンタ
 
 NOTE: 検索実行ボタン、選択ボタンには `表示フラグ` `表示判定スクリプト` 設定はありません。
 
+[[searchview_customcomponent]]
+==== 検索画面のカスタムコンポーネント
+
+検索画面を構成する各要素を、独自のカスタムコンポーネントに置き換える場合に設定します。 +
+各カスタムコンポーネントの共通設定項目の詳細は、 <<customcomponent, カスタムコンポーネント>> を参照してください。
+
+[cols="1,4a", options="header"]
+|===
+|設定項目 |設定内容
+
+|検索ビュー
+|検索画面全体のレイアウトを置き換えるカスタムコンポーネントを設定します。 +
+`MSearchView` コンポーネントを置き換えます。
+
+|検索条件
+|検索条件エリアを置き換えるカスタムコンポーネントを設定します。 +
+`MSearchCondition` コンポーネントを置き換えます。
+
+|検索条件ダイアログ
+|検索条件ダイアログを置き換えるカスタムコンポーネントを設定します。 +
+`MSearchConditionDialog` コンポーネントを置き換えます。
+
+|検索結果
+|検索結果エリアを置き換えるカスタムコンポーネントを設定します。 +
+`MSearchResult` コンポーネントを置き換えます。
+
+|検索結果ペイン
+|2 ペイン表示時の検索結果ペインを置き換えるカスタムコンポーネントを設定します。 +
+`MSearchResultPane` コンポーネントを置き換えます。
+
+|カード検索結果カード
+|カード表示形式の検索結果に表示する 1 件分のカードを置き換えるカスタムコンポーネントを設定します。 +
+`MCardSearchResultCard` コンポーネントを置き換えます。
+
+|選択ダイアログ
+|参照プロパティの選択ダイアログを置き換えるカスタムコンポーネントを設定します。 +
+`MSelectDialog` コンポーネントを置き換えます。
+
+|ファイルアップロードダイアログ
+|ファイルアップロードの入力フォームと結果表示を 1 つのカスタムコンポーネントに置き換える場合に設定します。 +
+`MFileUploadDialog` コンポーネントを置き換えます。
+
+|詳細ダイアログ
+|検索結果から詳細・編集ダイアログを開いた際のダイアログを置き換えるカスタムコンポーネントを設定します。 +
+`MDetailDialog` コンポーネントを置き換えます。
+
+|詳細ペイン
+|2 ペイン表示時の詳細ペインを置き換えるカスタムコンポーネントを設定します。 +
+`MDetailPane` コンポーネントを置き換えます。
+
+|===
+
+
 .カスタムクリックイベントの変数
 カスタムクリックイベントとして実行するJavaScriptには、以下の変数がバインドされます。
 ====