haori 0.1.0

package/dist/src/procedure.js

@@ -0,0 +1,1040 @@
+/**
+ * @fileoverview 手続き的処理管理機能
+ *
+ * イベントに基づく手続き的な処理を提供します。
+ */
+import Core from './core';
+import Env from './env';
+import Form from './form';
+import Fragment from './fragment';
+import Haori from './haori';
+import Log from './log';
+import HaoriEvent from './event';
+/**
+ * 手続き的処理管理クラスです。
+ */
+export default class Procedure {
+    /**
+     * イベント属性名を正しく生成します。
+     * 例: ("click", "fetch") => "data-click-fetch"
+     *    (null, "fetch") => "data-fetch"
+     *    ("change", "bind-arg") => "data-change-bind-arg"
+     * 非イベント変種が "data-fetch-xxx" として存在するものについては、event が null の場合にそちらを返します。
+     */
+    static attrName(event, key, hasFetchFallback = false) {
+        if (event) {
+            return `${Env.prefix}${event}-${key}`;
+        }
+        return hasFetchFallback
+            ? `${Env.prefix}fetch-${key}`
+            : `${Env.prefix}${key}`;
+    }
+    /**
+     * オプションをフラグメントの属性から構築します。
+     *
+     * @param fragment フラグメント
+     * @param event イベント名
+     * @return 構築されたオプション
+     */
+    static buildOptions(fragment, event) {
+        const options = {
+            targetFragment: fragment,
+        };
+        if (event) {
+            // validate（spec: data-???-validate）
+            if (fragment.hasAttribute(Procedure.attrName(event, 'validate'))) {
+                options.valid = true;
+            }
+            // confirm
+            if (fragment.hasAttribute(Procedure.attrName(event, 'confirm'))) {
+                options.confirmMessage = fragment.getAttribute(Procedure.attrName(event, 'confirm'));
+            }
+            // data（イベント）
+            if (fragment.hasAttribute(Procedure.attrName(event, 'data'))) {
+                options.data = Core.parseDataBind(fragment.getRawAttribute(Procedure.attrName(event, 'data')));
+            }
+            // form（イベント）
+            if (fragment.hasAttribute(Procedure.attrName(event, 'form'))) {
+                const formSelector = fragment.getRawAttribute(Procedure.attrName(event, 'form'));
+                if (formSelector) {
+                    const formElement = document.body.querySelector(formSelector);
+                    if (formElement !== null) {
+                        options.formFragment = Form.getFormFragment(Fragment.get(formElement));
+                    }
+                    else {
+                        Log.error('Haori', `Form element not found: ${formSelector}` +
+                            ` (${Procedure.attrName(event, 'form')})`);
+                    }
+                }
+                else {
+                    // 属性はあるが値が省略された場合は自要素もしくは先祖の form を対象
+                    options.formFragment = Form.getFormFragment(fragment);
+                }
+            }
+            else if (event === 'change') {
+                // changeイベントの場合、data-change-form属性がなくても自動的にフォームを検索
+                options.formFragment = Form.getFormFragment(fragment);
+            }
+            if (fragment.hasAttribute(`${Env.prefix}${event}-before-run`)) {
+                const body = fragment.getRawAttribute(`${Env.prefix}${event}-before-run`);
+                try {
+                    options.beforeCallback = new Function('fetchUrl', 'fetchOptions', `
+"use strict";
+${body}
+`);
+                }
+                catch (e) {
+                    Log.error('Haori', `Invalid before script: ${e}`);
+                }
+            }
+        }
+        // fetch URL（イベントあり/なし）
+        const fetchAttrName = Procedure.attrName(event, 'fetch');
+        const hasFetchAttr = fragment.hasAttribute(fetchAttrName);
+        if (hasFetchAttr) {
+            options.fetchUrl = fragment.getAttribute(fetchAttrName);
+        }
+        const fetchOptions = {};
+        // fetch-method（イベントあり/なし）
+        // event: data-{event}-fetch-method, non-event: data-fetch-method
+        if (event) {
+            const fetchMethodAttrEvent = Procedure.attrName(event, 'fetch-method');
+            if (fragment.hasAttribute(fetchMethodAttrEvent)) {
+                fetchOptions.method = fragment.getAttribute(fetchMethodAttrEvent);
+            }
+        }
+        else {
+            const fetchMethodAttrNonEvent = Procedure.attrName(null, 'method', true);
+            if (fragment.hasAttribute(fetchMethodAttrNonEvent)) {
+                fetchOptions.method = fragment.getAttribute(fetchMethodAttrNonEvent);
+            }
+        }
+        // fetch-headers（イベントあり/なし）
+        // event: data-{event}-fetch-headers, non-event: data-fetch-headers
+        if (event) {
+            const fetchHeadersAttrEvent = Procedure.attrName(event, 'fetch-headers');
+            if (fragment.hasAttribute(fetchHeadersAttrEvent)) {
+                const headersString = fragment.getRawAttribute(fetchHeadersAttrEvent);
+                try {
+                    fetchOptions.headers = Core.parseDataBind(headersString);
+                }
+                catch (e) {
+                    Log.error('Haori', `Invalid fetch headers: ${e}`);
+                }
+            }
+        }
+        else {
+            const fetchHeadersAttrNonEvent = Procedure.attrName(null, 'headers', true);
+            if (fragment.hasAttribute(fetchHeadersAttrNonEvent)) {
+                const headersString = fragment.getRawAttribute(fetchHeadersAttrNonEvent);
+                try {
+                    fetchOptions.headers = Core.parseDataBind(headersString);
+                }
+                catch (e) {
+                    Log.error('Haori', `Invalid fetch headers: ${e}`);
+                }
+            }
+        }
+        // fetch-content-type（イベントあり/なし）
+        // event: data-{event}-fetch-content-type
+        // non-event: data-fetch-content-type
+        if (event) {
+            const fetchCTAttrEvent = Procedure.attrName(event, 'fetch-content-type');
+            if (fragment.hasAttribute(fetchCTAttrEvent)) {
+                fetchOptions.headers = {
+                    ...fetchOptions.headers,
+                    'Content-Type': fragment.getAttribute(fetchCTAttrEvent),
+                };
+            }
+            else if (fetchOptions.method &&
+                fetchOptions.method !== 'GET' &&
+                fetchOptions.method !== 'HEAD' &&
+                fetchOptions.method !== 'OPTIONS') {
+                // only set default Content-Type when one is not already provided
+                let hasContentType = false;
+                if (fetchOptions.headers && typeof fetchOptions.headers === 'object') {
+                    const headersObj = fetchOptions.headers;
+                    hasContentType = 'Content-Type' in headersObj;
+                }
+                if (!hasContentType) {
+                    fetchOptions.headers = {
+                        ...fetchOptions.headers,
+                        'Content-Type': 'application/json',
+                    };
+                }
+            }
+            else if (fetchOptions.method &&
+                (fetchOptions.method === 'GET' ||
+                    fetchOptions.method === 'HEAD' ||
+                    fetchOptions.method === 'OPTIONS')) {
+                // 仕様: GET/HEAD/OPTIONS 既定は application/x-www-form-urlencoded
+                fetchOptions.headers = {
+                    ...fetchOptions.headers,
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                };
+            }
+        }
+        else {
+            const fetchCTAttrNonEvent = Procedure.attrName(null, 'content-type', true);
+            if (fragment.hasAttribute(fetchCTAttrNonEvent)) {
+                fetchOptions.headers = {
+                    ...fetchOptions.headers,
+                    'Content-Type': fragment.getAttribute(fetchCTAttrNonEvent),
+                };
+            }
+            else if (fetchOptions.method &&
+                fetchOptions.method !== 'GET' &&
+                fetchOptions.method !== 'HEAD' &&
+                fetchOptions.method !== 'OPTIONS') {
+                // only set default Content-Type when one is not already provided
+                let hasContentType = false;
+                if (fetchOptions.headers && typeof fetchOptions.headers === 'object') {
+                    const headersObj = fetchOptions.headers;
+                    hasContentType = 'Content-Type' in headersObj;
+                }
+                if (!hasContentType) {
+                    fetchOptions.headers = {
+                        ...fetchOptions.headers,
+                        'Content-Type': 'application/json',
+                    };
+                }
+            }
+            else if (fetchOptions.method &&
+                (fetchOptions.method === 'GET' ||
+                    fetchOptions.method === 'HEAD' ||
+                    fetchOptions.method === 'OPTIONS')) {
+                // 仕様: GET/HEAD/OPTIONS 既定は application/x-www-form-urlencoded
+                fetchOptions.headers = {
+                    ...fetchOptions.headers,
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                };
+            }
+        }
+        if (Object.keys(fetchOptions).length > 0) {
+            options.fetchOptions = fetchOptions;
+        }
+        // bind（イベントあり/なし: 非イベントは data-fetch-bind）
+        const bindAttr = event
+            ? Procedure.attrName(event, 'bind')
+            : Procedure.attrName(null, 'bind', true);
+        if (fragment.hasAttribute(bindAttr)) {
+            const bindSelector = fragment.getRawAttribute(bindAttr);
+            if (bindSelector) {
+                const bindElements = document.body.querySelectorAll(bindSelector);
+                if (bindElements.length > 0) {
+                    options.bindFragments = [];
+                    bindElements.forEach(element => {
+                        const fragment = Fragment.get(element);
+                        if (fragment) {
+                            options.bindFragments.push(fragment);
+                        }
+                    });
+                }
+                else {
+                    Log.error('Haori', `Bind element not found: ${bindSelector} (${bindAttr})`);
+                }
+            }
+        }
+        const bindArgAttrEvent = Procedure.attrName(event, 'bind-arg');
+        const bindArgAttrNonEventLegacy = Procedure.attrName(null, 'arg', true); // data-fetch-arg
+        const bindArgAttrNonEventNew = Procedure.attrName(null, 'bind-arg', true); // data-fetch-bind-arg (less common)
+        if (event) {
+            if (fragment.hasAttribute(bindArgAttrEvent)) {
+                options.bindArg = fragment.getRawAttribute(bindArgAttrEvent);
+            }
+        }
+        else {
+            // Prefer legacy `data-fetch-arg` for non-event usage.
+            // Fallback to `data-fetch-bind-arg` if legacy is not present.
+            if (fragment.hasAttribute(bindArgAttrNonEventLegacy)) {
+                options.bindArg = fragment.getRawAttribute(bindArgAttrNonEventLegacy);
+            }
+            else if (fragment.hasAttribute(bindArgAttrNonEventNew)) {
+                options.bindArg = fragment.getRawAttribute(bindArgAttrNonEventNew);
+            }
+        }
+        const bindParamsAttr = event
+            ? Procedure.attrName(event, 'bind-params')
+            : Procedure.attrName(null, 'bind-params', true);
+        if (fragment.hasAttribute(bindParamsAttr)) {
+            const paramsString = fragment.getRawAttribute(bindParamsAttr);
+            options.bindParams = paramsString.split('&').map(p => p.trim());
+        }
+        if (event) {
+            if (fragment.hasAttribute(Procedure.attrName(event, 'adjust'))) {
+                const adjustSelector = fragment.getRawAttribute(Procedure.attrName(event, 'adjust'));
+                if (adjustSelector) {
+                    const adjustElements = document.body.querySelectorAll(adjustSelector);
+                    if (adjustElements.length > 0) {
+                        options.adjustFragments = [];
+                        adjustElements.forEach(element => {
+                            const fragment = Fragment.get(element);
+                            if (fragment) {
+                                options.adjustFragments.push(fragment);
+                            }
+                        });
+                    }
+                    else {
+                        Log.error('Haori', `Adjust element not found: ${adjustSelector}` +
+                            ` (${Procedure.attrName(event, 'adjust')})`);
+                    }
+                }
+                if (fragment.hasAttribute(Procedure.attrName(event, 'adjust-value'))) {
+                    const valueString = fragment.getRawAttribute(Procedure.attrName(event, 'adjust-value'));
+                    const value = Number(valueString);
+                    if (!isNaN(value)) {
+                        options.adjustValue = value;
+                    }
+                }
+            }
+            if (fragment.hasAttribute(Procedure.attrName(event, 'row-add'))) {
+                options.rowAdd = true;
+            }
+            if (fragment.hasAttribute(Procedure.attrName(event, 'row-remove'))) {
+                options.rowRemove = true;
+            }
+            if (fragment.hasAttribute(Procedure.attrName(event, 'row-prev'))) {
+                options.rowMovePrev = true;
+            }
+            if (fragment.hasAttribute(Procedure.attrName(event, 'row-next'))) {
+                options.rowMoveNext = true;
+            }
+            if (fragment.hasAttribute(`${Env.prefix}${event}-after-run`)) {
+                const body = fragment.getRawAttribute(`${Env.prefix}${event}-after-run`);
+                try {
+                    options.afterCallback = new Function('response', `
+"use strict";
+${body}
+`);
+                }
+                catch (e) {
+                    Log.error('Haori', `Invalid after script: ${e}`);
+                }
+            }
+            if (fragment.hasAttribute(Procedure.attrName(event, 'dialog'))) {
+                options.dialogMessage = fragment.getAttribute(Procedure.attrName(event, 'dialog'));
+            }
+            if (fragment.hasAttribute(Procedure.attrName(event, 'toast'))) {
+                options.toastMessage = fragment.getAttribute(Procedure.attrName(event, 'toast'));
+            }
+            if (fragment.hasAttribute(Procedure.attrName(event, 'redirect'))) {
+                options.redirectUrl = fragment.getAttribute(Procedure.attrName(event, 'redirect'));
+            }
+            // reset/refetch/click/open/close（イベント、CSSセレクタ）
+            const selectorAttrs = [
+                'reset',
+                'refetch',
+                'click',
+                'open',
+                'close',
+            ];
+            selectorAttrs.forEach(attrKey => {
+                const attrName = Procedure.attrName(event, attrKey);
+                if (!fragment.hasAttribute(attrName)) {
+                    return;
+                }
+                const selector = fragment.getRawAttribute(attrName);
+                const list = [];
+                if (selector) {
+                    const elements = document.body.querySelectorAll(selector);
+                    elements.forEach(el => {
+                        const frag = Fragment.get(el);
+                        if (frag) {
+                            list.push(frag);
+                        }
+                    });
+                    if (list.length === 0) {
+                        Log.error('Haori', `Element not found: ${selector} (${attrName})`);
+                    }
+                }
+                else {
+                    // 値が省略されている場合は自要素を対象
+                    list.push(fragment);
+                }
+                if (list.length > 0) {
+                    switch (attrKey) {
+                        case 'reset':
+                            options.resetFragments = list;
+                            break;
+                        case 'refetch':
+                            options.refetchFragments = list;
+                            break;
+                        case 'click':
+                            options.clickFragments = list;
+                            break;
+                        case 'open':
+                            options.openFragments = list;
+                            break;
+                        case 'close':
+                            options.closeFragments = list;
+                            break;
+                    }
+                }
+            });
+        }
+        // 非イベントの data / form（data-fetch-data / data-fetch-form）も取り込む
+        if (!event) {
+            if (fragment.hasAttribute(Procedure.attrName(null, 'data', true))) {
+                const raw = fragment.getRawAttribute(Procedure.attrName(null, 'data', true));
+                options.data = Core.parseDataBind(raw);
+            }
+            if (fragment.hasAttribute(Procedure.attrName(null, 'form', true))) {
+                const formSelector = fragment.getRawAttribute(Procedure.attrName(null, 'form', true));
+                if (formSelector) {
+                    const formElement = document.body.querySelector(formSelector);
+                    if (formElement !== null) {
+                        options.formFragment = Form.getFormFragment(Fragment.get(formElement));
+                    }
+                    else {
+                        Log.error('Haori', `Form element not found: ${formSelector} (` +
+                            `${Procedure.attrName(null, 'fetch-form', true)})`);
+                    }
+                }
+                else {
+                    // 属性はあるが値が省略された場合は自要素もしくは先祖の form を対象
+                    options.formFragment = Form.getFormFragment(fragment);
+                }
+            }
+        }
+        // fetch が指定されているのにバインド先が無い場合、デフォルトで自要素にバインド
+        if (hasFetchAttr &&
+            (!options.bindFragments || options.bindFragments.length === 0)) {
+            options.bindFragments = [fragment];
+        }
+        return options;
+    }
+    /**
+     * ElementFragment の構造的タイプガード。
+     *
+     * @param value チェックする値
+     * @returns ElementFragment である場合は true、それ以外は false
+     */
+    static isElementFragment(value) {
+        if (typeof value !== 'object' || value === null) {
+            return false;
+        }
+        const obj = value;
+        return (typeof obj.getTarget === 'function' &&
+            typeof obj.getChildElementFragments === 'function');
+    }
+    /**
+     * コンストラクタ。
+     *
+     * @param arg1 オプションもしくはフラグメント
+     * @param arg2 イベント名
+     */
+    constructor(arg1, arg2 = null) {
+        if (Procedure.isElementFragment(arg1)) {
+            this.options = Procedure.buildOptions(arg1, arg2);
+        }
+        else {
+            this.options = arg1;
+        }
+    }
+    /**
+     * 一連の処理を実行します。オプションが空の場合は即座にresolveされます。
+     *
+     * @returns 実行結果のPromise
+     */
+    run() {
+        if (Object.keys(this.options).length === 0) {
+            return Promise.resolve();
+        }
+        if (this.options.formFragment &&
+            this.validate(this.options.formFragment) === false) {
+            return Promise.resolve();
+        }
+        return this.confirm().then(confirmed => {
+            if (!confirmed) {
+                return Promise.resolve();
+            }
+            let fetchUrl = this.options.fetchUrl;
+            let fetchOptions = this.options.fetchOptions;
+            if (this.options.beforeCallback) {
+                const result = this.options.beforeCallback(fetchUrl || null, fetchOptions || null);
+                if (result !== undefined && result !== null) {
+                    if (result === false || (typeof result === 'object' && result.stop)) {
+                        return Promise.resolve();
+                    }
+                    if (typeof result === 'object') {
+                        fetchUrl = ('fetchUrl' in result ? result.fetchUrl : fetchUrl);
+                        fetchOptions = ('fetchOptions' in result ? result.fetchOptions : fetchOptions);
+                    }
+                }
+            }
+            // フォーム値と data を統合してペイロードを作成
+            const payload = {};
+            if (this.options.formFragment) {
+                const formValues = Form.getValues(this.options.formFragment);
+                Object.assign(payload, formValues);
+            }
+            if (this.options.data && typeof this.options.data === 'object') {
+                Object.assign(payload, this.options.data);
+            }
+            const hasPayload = Object.keys(payload).length > 0;
+            if (fetchUrl) {
+                const finalOptions = { ...(fetchOptions || {}) };
+                const headers = new Headers(finalOptions.headers || undefined);
+                const method = (finalOptions.method || 'GET').toUpperCase();
+                if (method === 'GET' || method === 'HEAD' || method === 'OPTIONS') {
+                    if (hasPayload) {
+                        const url = new URL(fetchUrl, window.location.href);
+                        const params = new URLSearchParams(url.search);
+                        for (const [k, v] of Object.entries(payload)) {
+                            if (v === undefined) {
+                                continue;
+                            }
+                            if (v === null) {
+                                params.append(k, '');
+                            }
+                            else if (Array.isArray(v)) {
+                                v.forEach(item => {
+                                    params.append(k, String(item));
+                                });
+                            }
+                            else if (typeof v === 'object' || typeof v === 'function') {
+                                params.append(k, JSON.stringify(v));
+                            }
+                            else {
+                                params.append(k, String(v));
+                            }
+                        }
+                        url.search = params.toString();
+                        fetchUrl = url.toString();
+                    }
+                }
+                else if (hasPayload) {
+                    const contentType = headers.get('Content-Type') || '';
+                    if (/multipart\/form-data/i.test(contentType)) {
+                        headers.delete('Content-Type');
+                        const formData = new FormData();
+                        for (const [k, v] of Object.entries(payload)) {
+                            if (v === undefined || v === null) {
+                                formData.append(k, '');
+                            }
+                            else if (v instanceof Blob) {
+                                formData.append(k, v);
+                            }
+                            else if (Array.isArray(v)) {
+                                v.forEach(item => formData.append(k, String(item)));
+                            }
+                            else if (typeof v === 'object') {
+                                formData.append(k, JSON.stringify(v));
+                            }
+                            else {
+                                formData.append(k, String(v));
+                            }
+                        }
+                        finalOptions.body = formData;
+                    }
+                    else if (/application\/x-www-form-urlencoded/i.test(contentType)) {
+                        const params = new URLSearchParams();
+                        for (const [k, v] of Object.entries(payload)) {
+                            if (v === undefined) {
+                                continue;
+                            }
+                            if (v === null) {
+                                params.append(k, '');
+                            }
+                            else if (Array.isArray(v)) {
+                                v.forEach(item => params.append(k, String(item)));
+                            }
+                            else if (typeof v === 'object') {
+                                params.append(k, JSON.stringify(v));
+                            }
+                            else {
+                                params.append(k, String(v));
+                            }
+                        }
+                        finalOptions.body = params;
+                    }
+                    else {
+                        headers.set('Content-Type', 'application/json');
+                        finalOptions.body = JSON.stringify(payload);
+                    }
+                }
+                finalOptions.headers = headers;
+                // fetchstartイベントを発火
+                if (this.options.targetFragment && fetchUrl) {
+                    const startedAt = performance.now();
+                    HaoriEvent.fetchStart(this.options.targetFragment.getTarget(), fetchUrl, finalOptions, hasPayload ? payload : undefined);
+                    return fetch(fetchUrl, finalOptions)
+                        .then(response => {
+                        return this.handleFetchResult(response, fetchUrl || undefined, startedAt);
+                    })
+                        .catch(error => {
+                        if (fetchUrl) {
+                            HaoriEvent.fetchError(this.options.targetFragment.getTarget(), fetchUrl, error);
+                        }
+                        throw error;
+                    });
+                }
+                else if (fetchUrl) {
+                    return fetch(fetchUrl, finalOptions).then(response => {
+                        return this.handleFetchResult(response, fetchUrl || undefined);
+                    });
+                }
+                else {
+                    return Promise.resolve();
+                }
+            }
+            else {
+                // fetchUrlが無い場合(changeイベント等)、bindFragmentsが無ければformFragmentにバインド
+                if ((!this.options.bindFragments ||
+                    this.options.bindFragments.length === 0) &&
+                    this.options.formFragment &&
+                    hasPayload) {
+                    // 双方向バインディング: フォーム値を自動的にバインディングデータに反映
+                    const formFragment = this.options.formFragment;
+                    const formElement = formFragment.getTarget();
+                    formElement.setAttribute(`${Env.prefix}bind`, JSON.stringify(payload));
+                    const bindingData = formFragment.getBindingData();
+                    Object.assign(bindingData, payload);
+                    return Core.setBindingData(formElement, bindingData);
+                }
+                const merged = hasPayload ? payload : {};
+                const response = new Response(JSON.stringify(merged), {
+                    headers: { 'Content-Type': 'application/json' },
+                });
+                return this.handleFetchResult(response);
+            }
+        });
+    }
+    /**
+     * フェッチ後の処理を実行します。
+     */
+    handleFetchResult(response, url, startedAt) {
+        // エラー応答時は以後の処理を停止し、メッセージを伝播
+        if (!response.ok) {
+            if (this.options.targetFragment && url) {
+                HaoriEvent.fetchError(this.options.targetFragment.getTarget(), url, new Error(`${response.status} ${response.statusText}`), response.status, startedAt);
+            }
+            return this.handleFetchError(response);
+        }
+        // fetchendイベントを発火
+        if (this.options.targetFragment && url && startedAt) {
+            HaoriEvent.fetchEnd(this.options.targetFragment.getTarget(), url, response.status, startedAt);
+        }
+        if (this.options.afterCallback) {
+            const result = this.options.afterCallback(response);
+            if (result !== undefined && result !== null) {
+                if (result === false || (typeof result === 'object' && result.stop)) {
+                    return Promise.resolve();
+                }
+                if (typeof result === 'object' && 'response' in result) {
+                    response = ('response' in result ? result.response : response);
+                }
+            }
+        }
+        const promises = [];
+        promises.push(this.bindResult(response));
+        promises.push(this.adjust());
+        promises.push(this.addRow());
+        promises.push(this.removeRow());
+        promises.push(this.movePrevRow());
+        promises.push(this.moveNextRow());
+        if (this.options.resetFragments && this.options.resetFragments.length > 0) {
+            this.options.resetFragments.forEach(fragment => {
+                promises.push(Form.reset(fragment));
+            });
+        }
+        if (this.options.refetchFragments &&
+            this.options.refetchFragments.length > 0) {
+            this.options.refetchFragments.forEach(fragment => {
+                promises.push(new Procedure(fragment, null).run());
+            });
+        }
+        if (this.options.clickFragments && this.options.clickFragments.length > 0) {
+            this.options.clickFragments.forEach(fragment => {
+                const target = fragment.getTarget();
+                if (typeof target.click === 'function') {
+                    target.click();
+                }
+                else {
+                    target.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+                }
+            });
+        }
+        if (this.options.openFragments && this.options.openFragments.length > 0) {
+            this.options.openFragments.forEach(fragment => {
+                const target = fragment.getTarget();
+                if (target instanceof HTMLDialogElement) {
+                    promises.push(Haori.openDialog(target));
+                }
+                else {
+                    Log.error('Haori', 'Element is not a dialog: ', target);
+                }
+            });
+        }
+        if (this.options.closeFragments && this.options.closeFragments.length > 0) {
+            this.options.closeFragments.forEach(fragment => {
+                const target = fragment.getTarget();
+                if (target instanceof HTMLDialogElement) {
+                    promises.push(Haori.closeDialog(target));
+                }
+                else {
+                    Log.error('Haori', 'Element is not a dialog: ', target);
+                }
+            });
+        }
+        // 仕様順序: 先に各種操作（bind/adjust/row/reset/refetch/click/open/close）を完了
+        return Promise.all(promises)
+            .then(() => {
+            // その後にダイアログ/トーストを表示
+            if (this.options.dialogMessage) {
+                return Haori.dialog(this.options.dialogMessage);
+            }
+            return Promise.resolve();
+        })
+            .then(() => {
+            if (this.options.toastMessage) {
+                return Haori.toast(this.options.toastMessage, 'info');
+            }
+            return Promise.resolve();
+        })
+            .then(() => {
+            if (this.options.redirectUrl) {
+                window.location.href = this.options.redirectUrl;
+            }
+            return Promise.resolve();
+        });
+    }
+    /**
+     * フェッチエラー応答のメッセージを適切な要素へ伝播します。
+     */
+    async handleFetchError(response) {
+        // ベースとなるフォーム/フラグメントを決定
+        let baseFragment = null;
+        if (this.options.formFragment) {
+            baseFragment = this.options.formFragment;
+        }
+        else if (this.options.targetFragment) {
+            baseFragment =
+                Form.getFormFragment(this.options.targetFragment) ||
+                    this.options.targetFragment;
+        }
+        const addGeneralMessage = async (message) => {
+            const targetEl = baseFragment ? baseFragment.getTarget() : document.body;
+            await Haori.addErrorMessage(targetEl, message);
+        };
+        // コンテンツタイプに応じて解析
+        const contentType = response.headers.get('Content-Type') || '';
+        if (contentType.includes('application/json')) {
+            try {
+                const data = await response.json();
+                // 代表的な形式に対応
+                const entries = [];
+                if (data && typeof data === 'object') {
+                    if (typeof data.message === 'string') {
+                        entries.push({ message: data.message });
+                    }
+                    if (Array.isArray(data.messages)) {
+                        for (const m of data.messages) {
+                            if (typeof m === 'string') {
+                                entries.push({ message: m });
+                            }
+                        }
+                    }
+                    if (data.errors && typeof data.errors === 'object') {
+                        for (const [k, v] of Object.entries(data.errors)) {
+                            if (Array.isArray(v)) {
+                                entries.push({ key: k, message: v.join('\n') });
+                            }
+                            else if (typeof v === 'string') {
+                                entries.push({ key: k, message: v });
+                            }
+                            else if (v != null) {
+                                entries.push({ key: k, message: String(v) });
+                            }
+                        }
+                    }
+                    // キー: 値（文字列/配列）形式にフォールバック
+                    if (entries.length === 0) {
+                        for (const [k, v] of Object.entries(data)) {
+                            if (k === 'message' || k === 'messages' || k === 'errors') {
+                                continue;
+                            }
+                            if (Array.isArray(v)) {
+                                entries.push({ key: k, message: v.join('\n') });
+                            }
+                            else if (typeof v === 'string') {
+                                entries.push({ key: k, message: v });
+                            }
+                        }
+                    }
+                }
+                if (entries.length === 0) {
+                    // 汎用メッセージ
+                    await addGeneralMessage(`${response.status} ${response.statusText}`);
+                    return;
+                }
+                // メッセージを反映
+                for (const e of entries) {
+                    if (e.key && baseFragment) {
+                        await Form.addErrorMessage(baseFragment, e.key, e.message);
+                    }
+                    else {
+                        await addGeneralMessage(e.message);
+                    }
+                }
+                return;
+            }
+            catch {
+                // JSON 解析失敗時はテキストにフォールバック
+            }
+        }
+        // テキストとして処理
+        try {
+            const text = await response.text();
+            if (text && text.trim().length > 0) {
+                await addGeneralMessage(text.trim());
+            }
+            else {
+                await addGeneralMessage(`${response.status} ${response.statusText}`);
+            }
+        }
+        catch {
+            await addGeneralMessage(`${response.status} ${response.statusText}`);
+        }
+    }
+    /**
+     * 対象のフラグメント以下の入力要素に対してバリデーションを実行します。
+     * バリデーションエラーがある場合は、最初のエラー要素にフォーカスを移動します。
+     *
+     * @param fragment 対象のフラグメント
+     * @returns バリデーション結果（true: 成功, false: 失敗）
+     */
+    validate(fragment) {
+        if (this.options.valid !== true) {
+            return true;
+        }
+        const target = fragment.getTarget();
+        let result = this.validateOne(fragment);
+        if (!result) {
+            target.focus();
+        }
+        // エラー要素のフォーカスを最上部に移動するため、子要素は逆順で処理
+        fragment
+            .getChildElementFragments()
+            .reverse()
+            .forEach(child => {
+            result && (result = this.validate(child));
+        });
+        return result;
+    }
+    /**
+     * 対象のフラグメントに対してバリデーションを実行します。
+     *
+     * @param fragment 対象のフラグメント
+     * @returns バリデーション結果（true: 成功, false: 失敗）
+     */
+    validateOne(fragment) {
+        const target = fragment.getTarget();
+        if (target instanceof HTMLInputElement) {
+            return target.reportValidity();
+        }
+        if (target instanceof HTMLSelectElement) {
+            return target.reportValidity();
+        }
+        if (target instanceof HTMLTextAreaElement) {
+            return target.reportValidity();
+        }
+        return true;
+    }
+    /**
+     * 確認メッセージを表示し、ユーザーの確認を求めます。
+     * メッセージが設定されていない場合は、即座に成功とみなします。
+     *
+     * @returns ユーザーの確認結果を含むPromise（true: 確認, false: キャンセル）
+     */
+    confirm() {
+        const message = this.options.confirmMessage;
+        if (message === null || message === undefined) {
+            return Promise.resolve(true);
+        }
+        return Haori.confirm(message);
+    }
+    /**
+     * 結果データを対象のフラグメントにバインドします。
+     *
+     * @param response フェッチのレスポンスオブジェクト
+     */
+    bindResult(response) {
+        if (!this.options.bindFragments ||
+            this.options.bindFragments.length === 0) {
+            return Promise.resolve();
+        }
+        const promise = response.headers
+            .get('Content-Type')
+            ?.includes('application/json')
+            ? response.json()
+            : response.text();
+        return promise.then(data => {
+            if (this.options.bindParams) {
+                const newData = {};
+                this.options.bindParams.forEach(param => {
+                    if (data && typeof data === 'object' && param in data) {
+                        newData[param] = data[param];
+                    }
+                });
+                data = newData;
+            }
+            const promises = [];
+            if (this.options.bindArg) {
+                this.options.bindFragments.forEach(fragment => {
+                    const bindingData = fragment.getBindingData();
+                    bindingData[this.options.bindArg] = data;
+                    promises.push(Core.setBindingData(fragment.getTarget(), bindingData));
+                });
+            }
+            else if (typeof data === 'string') {
+                Log.error('Haori', 'string data cannot be bound without a bindArg.');
+                return Promise.reject(new Error('string data cannot be bound without a bindArg.'));
+            }
+            else {
+                this.options.bindFragments.forEach(fragment => {
+                    promises.push(Core.setBindingData(fragment.getTarget(), data));
+                });
+            }
+            return Promise.all(promises).then(() => undefined);
+        });
+    }
+    /**
+     * 値の増減を行います。
+     */
+    adjust() {
+        if (!this.options.adjustFragments ||
+            this.options.adjustFragments.length === 0) {
+            return Promise.resolve();
+        }
+        const adjustValue = this.options.adjustValue ?? 0;
+        const promises = [];
+        for (const fragment of this.options.adjustFragments) {
+            let valueString = fragment.getValue();
+            if (valueString === null ||
+                valueString === undefined ||
+                valueString === '') {
+                valueString = '0';
+            }
+            let value = Number(valueString);
+            if (isNaN(value)) {
+                value = 0;
+            }
+            value += adjustValue;
+            promises.push(fragment.setValue(String(value)));
+        }
+        return Promise.all(promises).then(() => undefined);
+    }
+    /**
+     * 行フラグメントを取得します。
+     *
+     * @returns 行フラグメントまたはnull
+     */
+    getRowFragment() {
+        if (!this.options.targetFragment) {
+            Log.error('Haori', 'Target fragment is not specified for row operation.');
+            return null;
+        }
+        const rowFragment = this.options.targetFragment.closestByAttribute(`${Env.prefix}row`);
+        if (!rowFragment) {
+            Log.error('Haori', 'Row fragment not found.');
+            return null;
+        }
+        return rowFragment;
+    }
+    /**
+     * 行を追加します。
+     *
+     * @returns 処理結果のPromise
+     */
+    addRow() {
+        if (this.options.rowAdd !== true) {
+            return Promise.resolve();
+        }
+        const rowFragment = this.getRowFragment();
+        if (!rowFragment) {
+            return Promise.reject(new Error('Row fragment not found.'));
+        }
+        const promises = [];
+        const newFragment = rowFragment.clone();
+        promises.push(rowFragment.getParent().insertAfter(newFragment, rowFragment));
+        promises.push(Core.evaluateAll(newFragment));
+        // 追加された行のフォーム要素をリセット
+        promises.push(Form.reset(newFragment));
+        return Promise.all(promises).then(() => undefined);
+    }
+    /**
+     * 行を削除します。
+     *
+     * @returns 処理結果のPromise
+     */
+    removeRow() {
+        if (this.options.rowRemove !== true) {
+            return Promise.resolve();
+        }
+        const rowFragment = this.getRowFragment();
+        if (!rowFragment) {
+            return Promise.reject(new Error('Row fragment not found.'));
+        }
+        // 1行だった場合は削除しない
+        const parent = rowFragment.getParent();
+        if (parent) {
+            const siblings = parent.getChildElementFragments().filter(child => {
+                // data-each-before と data-each-after を除外
+                return (!child.hasAttribute(`${Env.prefix}each-before`) &&
+                    !child.hasAttribute(`${Env.prefix}each-after`));
+            });
+            if (siblings.length <= 1) {
+                return Promise.resolve();
+            }
+        }
+        return rowFragment.remove();
+    }
+    /**
+     * 前の行へ移動します。
+     *
+     * @returns 処理結果のPromise
+     */
+    movePrevRow() {
+        if (this.options.rowMovePrev !== true) {
+            return Promise.resolve();
+        }
+        const rowFragment = this.getRowFragment();
+        if (!rowFragment) {
+            return Promise.reject(new Error('Row fragment not found.'));
+        }
+        const prevFragment = rowFragment.getPrevious();
+        if (!prevFragment) {
+            return Promise.resolve();
+        }
+        const parent = rowFragment.getParent();
+        if (!parent) {
+            return Promise.resolve();
+        }
+        return parent.insertBefore(rowFragment, prevFragment);
+    }
+    /**
+     * 次の行へ移動します。
+     *
+     * @returns 処理結果のPromise
+     */
+    moveNextRow() {
+        if (this.options.rowMoveNext !== true) {
+            return Promise.resolve();
+        }
+        const rowFragment = this.getRowFragment();
+        if (!rowFragment) {
+            return Promise.reject(new Error('Row fragment not found.'));
+        }
+        const nextFragment = rowFragment.getNext();
+        if (!nextFragment) {
+            return Promise.resolve();
+        }
+        const parent = rowFragment.getParent();
+        if (!parent) {
+            return Promise.resolve();
+        }
+        return parent.insertAfter(rowFragment, nextFragment);
+    }
+}
+//# sourceMappingURL=procedure.js.map