# Haori.js Bootstrap
Haori.js Bootstrap は、Haori.js 向けの Bootstrap ベース UI 拡張ライブラリです。
Version: 0.5.48
## 概要
- 正式名称: Haori.js Bootstrap
- パッケージ識別子: haori-bootstrap
- 参照元 Haori.js リポジトリ: https://github.com/meibinlab/haori-js
- GitHub リポジトリ: https://github.com/meibinlab/haori-js-bootstrap
- 対応 Bootstrap バージョン: 5.3.x
- 配布形式: ESM と IIFE
npm パッケージ名は `haori-js-bootstrap` から `haori-bootstrap` へ変更し、旧 package は deprecated にしました。既存利用者は新しい package 名へ移行してください。GitHub リポジトリ名は変更していません。
Haori.js の dialog、confirm、toast、openDialog、closeDialog、addErrorMessage、clearMessages などの UI 系静的メソッドを Bootstrap ベース実装へ差し替えつつ、既存の Procedure 連携を維持します。
## インストール
npm からインストールします。
```bash
npm install haori-bootstrap
```
利用時は、アプリケーション側で Haori.js と Bootstrap CSS/JS を別途読み込んでください。
## CDN 利用
ブラウザ直読み込み時は、次の順で依存を読み込みます。
1. Haori.js
2. Bootstrap CSS
3. bootstrap.bundle.js
4. haori-bootstrap
```html
```
IIFE 版は、window.Haori と window.bootstrap が利用可能な場合に自動で有効化されます。
## ESM 利用
ESM 版も、window.Haori と window.bootstrap が利用可能な場合は import 時点で自動有効化されます。
```js
import 'haori-bootstrap';
```
既定設定を上書きしたい場合は install を明示的に呼び出します。
```js
import { install } from 'haori-bootstrap';
install({
fallbackToNative: true,
runtime: 'demo',
});
```
## 公開 API
| API | 目的 | 戻り値 |
| ---- | ---- | ---- |
| dialog(message) | 情報表示ダイアログ | Promise |
| confirm(message) | 確認ダイアログ | Promise |
| toast(message, level) | トースト通知 | Promise |
| openDialog(element) | 対象の Modal を開く（`.modal` 自身またはその子孫を渡す。非 `.modal` の場合は祖先方向で最も近い `.modal` に解決）。表示前に対象 Modal 配下の管理メッセージと `is-invalid` / `is-valid` 状態をクリアするため、再表示時はクリーンな状態で開く。 | Promise |
| closeDialog(element) | 対象の Modal を閉じる（`.modal` 自身またはその子孫を渡す。非 `.modal` の場合は祖先方向で最も近い `.modal` に解決）。表示アニメーション中に呼んだ場合は、表示完了を待ってから閉じる | Promise |
| addErrorMessage(target, message) | 管理対象エラーメッセージの追加 | Promise |
| addMessage(target, message, level?) | レベル付き管理対象メッセージを追加（`'error'` \| `'success'` \| `'warning'` \| `'info'`）。再呼び出し時は Bootstrap 検証クラス（`is-invalid` / `is-valid`）も切り替わります。 | Promise |
| clearMessages(parentOrTarget) | 管理対象メッセージのみ削除 | Promise |
| install(options) | Bootstrap 対応 Haori を再適用し、runtime を含めて設定を上書き | void |
| uninstall() | 元の Haori 実装を復元 | void |
### install オプション
| オプション | 型 | デフォルト | 説明 |
| ---- | ---- | ---- | ---- |
| toastPosition | `'top-start' \| 'top-center' \| 'top-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'` | `'bottom-end'` | トーストコンテナの表示位置。変更は次のトースト表示時に反映されます。 |
| toastDelay | `number` | Bootstrap デフォルト (5000ms) | トースト通知の自動非表示までの時間 (ms)。 |
| dialogTitle | `string` | 未指定（ヘッダーなし） | dialog / confirm のヘッダーに表示するタイトル。 |
| dialogOkLabel | `string` | `'OK'` | dialog / confirm の OK ボタンの文言。 |
| dialogCancelLabel | `string` | `'Cancel'` | confirm のキャンセルボタンの文言。 |
ボタンの識別属性（`data-haori-confirm-ok` / `data-haori-confirm-cancel` / `data-haori-dialog-ok`）は文言を変えても変わりません。文言で要素を探していない限り、既存のセレクターはそのまま動きます。
### 宣言だけでボタン文言を設定する
ボタンの文言は **HTML の属性だけ**で設定できます。`install()` を呼ぶための JavaScript は不要です。
```html
```
```html
```
- 優先順位は「`install()` の引数 > `