mokkun 0.1.5 → 0.2.0

package/dist/types/renderer/action-handler.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Action Handler
+ * アクションボタンのイベント処理（確認ダイアログ統合）
+ */
+import { DeleteConfirmDialog, type DeleteConfirmDialogConfig, type DependencyInfo } from './components/delete-confirm-dialog';
+/**
+ * アクションハンドラーのコールバック
+ */
+export interface ActionHandlerCallbacks {
+    /** submit アクション実行時 */
+    onSubmit?: (actionId: string, url?: string, method?: string) => void;
+    /** navigate アクション実行時 */
+    onNavigate?: (actionId: string, to: string) => void;
+    /** custom アクション実行時 */
+    onCustom?: (actionId: string, handler: string) => void;
+    /** reset アクション実行時 */
+    onReset?: (actionId: string) => void;
+    /** アクションがキャンセルされた時 */
+    onCancel?: (actionId: string) => void;
+}
+/**
+ * 削除確認ダイアログの拡張設定（YAMLから取得する追加情報）
+ */
+export interface DeleteConfirmExtendedConfig {
+    /** 依存データを取得する関数 */
+    getDependencies?: () => DependencyInfo[] | Promise<DependencyInfo[]>;
+    /** 削除対象名を取得する関数 */
+    getTargetName?: () => string;
+    /** 削除対象タイプ */
+    targetType?: string;
+    /** 警告メッセージ */
+    warningMessage?: string;
+}
+/**
+ * アクションハンドラー
+ * ボタンクリック時の処理と確認ダイアログの表示を管理
+ */
+export declare class ActionHandler {
+    private container;
+    private callbacks;
+    private deleteConfirmConfigs;
+    private boundClickHandler;
+    constructor(container: HTMLElement, callbacks?: ActionHandlerCallbacks, deleteConfirmConfigs?: Map<string, DeleteConfirmExtendedConfig>);
+    /**
+     * イベントリスナーを設定
+     */
+    attach(): void;
+    /**
+     * イベントリスナーを削除
+     */
+    detach(): void;
+    /**
+     * 削除確認の設定を登録
+     */
+    registerDeleteConfirmConfig(actionId: string, config: DeleteConfirmExtendedConfig): void;
+    /**
+     * クリックイベントハンドラー
+     */
+    private handleClick;
+    /**
+     * 確認ダイアログを表示
+     */
+    private showConfirmDialog;
+    /**
+     * アクションを実行
+     */
+    private executeAction;
+}
+/**
+ * コンテナにアクションハンドラーをアタッチ
+ */
+export declare function attachActionHandler(container: HTMLElement, callbacks?: ActionHandlerCallbacks, deleteConfirmConfigs?: Map<string, DeleteConfirmExtendedConfig>): ActionHandler;
+/**
+ * 簡易的な確認ダイアログを表示（スタンドアロン使用）
+ */
+export declare function showDeleteConfirmDialog(config: DeleteConfirmDialogConfig, onConfirm: () => void, onCancel?: () => void): DeleteConfirmDialog;

package/dist/types/renderer/components/accordion-panel.d.ts

@@ -0,0 +1,144 @@
+/**
+ * AccordionPanel Component
+ * 折りたたみパネルコンポーネント
+ *
+ *
+ * - 複数パネルの同時開閉制御（単一/複数展開モード）
+ * - 開閉アニメーション
+ * - アイコン付きヘッダー
+ * - デフォルト展開状態の設定
+ * - キーボード操作対応
+ * - アクセシビリティ対応（ARIA属性）
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * アコーディオンアイテムの定義
+ */
+export interface AccordionItem {
+    /** 一意な識別子 */
+    name: string;
+    /** ヘッダーテキスト */
+    title: string;
+    /** ヘッダーアイコン（オプション） */
+    icon?: string;
+    /** コンテンツ（HTML文字列またはHTMLElement） */
+    content: string | HTMLElement;
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * アイコンの配置位置
+ */
+export type IconPosition = 'left' | 'right';
+/**
+ * 見出しタイプ
+ */
+export type HeadingType = 'sectionTitle' | 'blockTitle' | 'subBlockTitle' | 'subSubBlockTitle';
+/**
+ * アコーディオンパネルの状態
+ */
+export interface AccordionPanelState {
+    /** 展開中のパネル名リスト */
+    expandedItems: string[];
+    /** フォーカスされているアイテムのインデックス */
+    focusedIndex: number;
+}
+/**
+ * アコーディオンパネルのコールバック
+ */
+export interface AccordionPanelCallbacks {
+    /** パネル展開時 */
+    onExpand?: (name: string) => void;
+    /** パネル折りたたみ時 */
+    onCollapse?: (name: string) => void;
+    /** 展開状態変更時 */
+    onChange?: (expandedItems: string[]) => void;
+}
+/**
+ * アコーディオンパネルの設定
+ */
+export interface AccordionPanelConfig {
+    /** アコーディオンアイテム */
+    items: AccordionItem[];
+    /** 複数パネル同時展開を許可（デフォルト: true） */
+    expandableMultiply?: boolean;
+    /** デフォルトで展開するパネル名のリスト */
+    defaultExpanded?: string[];
+    /** アイコンの配置位置（デフォルト: left） */
+    iconPosition?: IconPosition;
+    /** 見出しタイプ（デフォルト: blockTitle） */
+    headingType?: HeadingType;
+    /** ID属性 */
+    id?: string;
+    /** カスタムCSSクラス */
+    className?: string;
+}
+/**
+ * アコーディオンパネルコンポーネント
+ */
+export declare class AccordionPanel {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private itemElements;
+    constructor(container: HTMLElement, config: AccordionPanelConfig, callbacks?: AccordionPanelCallbacks);
+    /**
+     * アコーディオンパネルをレンダリング
+     */
+    render(): void;
+    /**
+     * パネルを展開
+     */
+    expand(name: string): void;
+    /**
+     * パネルを折りたたむ
+     */
+    collapse(name: string): void;
+    /**
+     * パネルの展開/折りたたみを切り替え
+     */
+    toggle(name: string): void;
+    /**
+     * すべてのパネルを展開
+     */
+    expandAll(): void;
+    /**
+     * すべてのパネルを折りたたむ
+     */
+    collapseAll(): void;
+    /**
+     * パネルの展開状態を確認
+     */
+    isExpanded(name: string): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): AccordionPanelState;
+    /**
+     * アイテムを更新
+     */
+    setItems(items: AccordionItem[]): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    private createInitialState;
+    private renderItem;
+    private renderTrigger;
+    private renderIcon;
+    private renderContent;
+    private updateItemState;
+    private attachKeyboardEvents;
+    private focusNextItem;
+    private focusPreviousItem;
+    private focusFirstItem;
+    private focusLastItem;
+    private focusItem;
+    static renderField(field: InputField): string;
+}
+/**
+ * アコーディオンパネルを作成
+ */
+export declare function createAccordionPanel(container: HTMLElement, config: AccordionPanelConfig, callbacks?: AccordionPanelCallbacks): AccordionPanel;

package/dist/types/renderer/components/action-buttons.d.ts

@@ -0,0 +1,183 @@
+/**
+ * Action Button Group Component
+ * アクションボタングループコンポーネント
+ *
+ * 複数のアクションボタンを適切に配置するコンポーネント
+ */
+import type { Action, ConfirmConfig } from '../../types/schema';
+/**
+ * アクションボタンの定義
+ */
+export interface ActionButton {
+    /** ボタンID */
+    id: string;
+    /** ボタンタイプ */
+    type: 'submit' | 'navigate' | 'custom' | 'reset';
+    /** ラベル */
+    label: string;
+    /** アイコン（オプション） */
+    icon?: string;
+    /** スタイル */
+    style?: 'primary' | 'secondary' | 'danger' | 'link';
+    /** 無効化 */
+    disabled?: boolean;
+    /** 遷移先（navigate時） */
+    to?: string;
+    /** カスタムハンドラー名（custom時） */
+    handler?: string;
+    /** 確認ダイアログ設定 */
+    confirm?: ConfirmConfig;
+}
+/**
+ * ボタン配置
+ */
+export type ButtonAlignment = 'start' | 'center' | 'end' | 'spread';
+/**
+ * ActionButtonGroupの設定
+ */
+export interface ActionButtonGroupConfig {
+    /** ボタン定義 */
+    buttons: ActionButton[];
+    /** ボタン配置 */
+    alignment?: ButtonAlignment;
+    /** ボタン間のギャップ */
+    gap?: string;
+    /** モバイルでスタック表示 */
+    stackOnMobile?: boolean;
+    /** 表示可能な最大ボタン数（超過分はオーバーフローメニュー） */
+    maxVisibleButtons?: number;
+}
+/**
+ * ActionButtonGroupの状態
+ */
+export interface ActionButtonGroupState {
+    /** ボタン定義 */
+    buttons: ActionButton[];
+    /** ボタン配置 */
+    alignment: ButtonAlignment;
+    /** ボタン間のギャップ */
+    gap: string;
+    /** モバイルでスタック表示 */
+    stackOnMobile: boolean;
+    /** 表示可能な最大ボタン数 */
+    maxVisibleButtons?: number;
+    /** ローディング中のボタンID */
+    loadingButtons: Set<string>;
+    /** オーバーフローメニューが開いているか */
+    overflowMenuOpen: boolean;
+}
+/**
+ * ActionButtonGroupのコールバック
+ */
+export interface ActionButtonGroupCallbacks {
+    /** ボタンクリック時 */
+    onClick?: (buttonId: string, state: ActionButtonGroupState) => void;
+    /** Submit時 */
+    onSubmit?: (buttonId: string, state: ActionButtonGroupState) => void;
+    /** Navigate時 */
+    onNavigate?: (to: string, state: ActionButtonGroupState) => void;
+    /** Custom時 */
+    onCustom?: (handler: string, state: ActionButtonGroupState) => void;
+    /** 確認ダイアログ表示時（trueを返すと処理続行） */
+    onConfirm?: (config: ConfirmConfig, state: ActionButtonGroupState) => Promise<boolean>;
+}
+/**
+ * アクションボタングループコンポーネント
+ */
+export declare class ActionButtonGroup {
+    private config;
+    private container;
+    private callbacks;
+    private state;
+    private groupElement;
+    private overflowMenuElement;
+    constructor(config: ActionButtonGroupConfig, container: HTMLElement, callbacks?: ActionButtonGroupCallbacks);
+    /**
+     * 初期状態を生成
+     */
+    private initializeState;
+    /**
+     * 現在の状態を取得（深いコピーを返す）
+     */
+    getState(): ActionButtonGroupState;
+    /**
+     * ボタンを取得（コピーを返す）
+     */
+    getButton(id: string): ActionButton | undefined;
+    /**
+     * Action配列からConfigを生成
+     */
+    static fromActions(actions: Action[]): ActionButtonGroupConfig;
+    /**
+     * レンダリング
+     */
+    render(): void;
+    /**
+     * グループのクラス名を生成
+     */
+    private buildGroupClassName;
+    /**
+     * ボタンを可視とオーバーフローに分割
+     */
+    private splitButtons;
+    /**
+     * 単一ボタンをレンダリング
+     */
+    private renderButton;
+    /**
+     * ボタンのクラス名を生成
+     */
+    private buildButtonClassName;
+    /**
+     * ボタンタイプを取得
+     */
+    private getButtonType;
+    /**
+     * オーバーフローメニューをレンダリング
+     */
+    private renderOverflowMenu;
+    /**
+     * ボタンクリック時の処理
+     */
+    private handleButtonClick;
+    /**
+     * ローディング状態を設定
+     */
+    setLoading(buttonId: string, loading: boolean): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(buttonId: string, disabled: boolean): void;
+    /**
+     * ボタンの状態を更新
+     */
+    private updateButtonState;
+    /**
+     * オーバーフローメニューを切り替え
+     */
+    toggleOverflowMenu(): void;
+    /**
+     * オーバーフローメニューを閉じる
+     */
+    closeOverflowMenu(): void;
+    /**
+     * オーバーフローメニューの状態を更新
+     */
+    private updateOverflowMenuState;
+    /**
+     * ボタンを追加
+     */
+    addButton(button: ActionButton, index?: number): void;
+    /**
+     * ボタンを削除
+     */
+    removeButton(buttonId: string): boolean;
+    /**
+     * ボタンを更新
+     */
+    updateButton(buttonId: string, updates: Partial<ActionButton>): boolean;
+    /**
+     * クリーンアップ
+     */
+    destroy(): void;
+}

package/dist/types/renderer/components/alert-banner.d.ts

@@ -0,0 +1,43 @@
+export type AlertBannerType = 'info' | 'success' | 'warning' | 'error';
+export interface AlertBannerState {
+    message: string;
+    visible: boolean;
+}
+export interface AlertBannerCallbacks {
+    onClose?: () => void;
+    onAction?: () => void;
+}
+export interface AlertBannerConfig {
+    message: string;
+    type?: AlertBannerType;
+    actionLabel?: string;
+    closable?: boolean;
+    visible?: boolean;
+    role?: 'alert' | 'status';
+    ariaLabel?: string;
+}
+export declare class AlertBanner {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private closeHandler;
+    private actionHandler;
+    constructor(container: HTMLElement, config: AlertBannerConfig, callbacks?: AlertBannerCallbacks);
+    render(): void;
+    private renderContent;
+    private renderActionButton;
+    private renderCloseButton;
+    private handleAction;
+    private handleClose;
+    private cleanup;
+    setMessage(message: string): void;
+    setVisible(visible: boolean): void;
+    show(): void;
+    hide(): void;
+    getMessage(): string;
+    isVisible(): boolean;
+    getState(): Readonly<AlertBannerState>;
+    destroy(): void;
+}
+export declare function createAlertBanner(container: HTMLElement, config: AlertBannerConfig, callbacks?: AlertBannerCallbacks): AlertBanner;