blocs/blocs: Auto Include（テンプレート・UIの自動読み込み）

data-include で指定したブロック名に対応するテンプレートファイルが resources/views/admin/autoinclude に存在する場合、自動で読み込まれます。

自動読み込みの仕組み

ブロック名の _ より前の部分に .html を付けたファイル名が検索されます（例: button_href → button.html）。

<!-- data-include="button_href" -->

入力インターフェースの拡張（ai-* クラス）

入力フォームに ai-* クラスを指定すると、機能が自動的に拡張されます。

<input type="text" id="date" name="date" class="form-control ai-datepicker" />

詳細は No.2.13 を参照してください。

テンプレートの自動読み込み例

ボタンの表示:

<!--
    data-include="button_href"
    $buttonHref=route("admin.user.create")
    $buttonClass="btn btn-primary"
    $buttonIcon="fa-solid fa-plus"
    $buttonLabel="新規作成"
-->

モーダルの表示:

<!--
    data-include="modal_update"
    $buttonIcon="fa-solid fa-file"
    $buttonLabel="ボタンのラベル"
-->

グラフの表示:

<!--
    data-include="chartjs_1line"
    $graphId="graphUser"
    $chartjsColor="Blues3"
    $graphLegendLine1="登録"
-->

<canvas :id=$graphId class="chart-canvas" height="300"></canvas>

重複読み込みの防止

同じテンプレートを複数回 data-include しても、実際に読み込まれるのは最初の1回だけです。

<!--
    data-include="button_href"
    $buttonHref="./1.html"
-->

<!--
    data-include="button_href"
    $buttonHref="./2.html"
-->

jquery のように複数テンプレートで参照しても1度だけ読み込まれるため、重複を防げます。

自動読み込みされた部分の配置

ブロック以外の部分は  を記述した場所に読み込まれます。JavaScriptをページ最後で読み込む場合などに便利です。

ディレクトリの変更

テンプレートのルートディレクトリ

app/Consts/Blocs.php（blocs/admin インストール後）または blocs/blocs 読み込み前の任意の PHP ファイルで BLOCS_ROOT_DIR を定義します。

defined('BLOCS_ROOT_DIR') || define('BLOCS_ROOT_DIR', resource_path('views'));

Auto Include のディレクトリ

$GLOBALS['BLOCS_AUTOINCLUDE_DIR'] = resource_path('views/admin/autoinclude');

QA

jQueryを使いたい

<!-- data-include="jquery" -->

JavaScriptをHTMLの最後に読み込みたい

<script data-bloc="script"></script>