mokkun 0.1.5 → 0.1.6

package/dist/types/renderer/components/definition-list.d.ts

@@ -0,0 +1,165 @@
+/**
+ * DefinitionList Component
+ * 定義リストコンポーネント
+ *
+ *
+ * - 水平/垂直レイアウト
+ * - ラベル幅調整
+ * - グループ化
+ * - レスポンシブ対応
+ * - maxColumns設定
+ * - セマンティックHTML（dl/dt/dd）
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * 定義リストのアイテム
+ */
+export interface DefinitionListItem {
+    /** 用語（ラベル/キー） */
+    term: string;
+    /** 説明（値） */
+    description: string | string[] | null;
+    /** アイテム固有の全幅表示 */
+    fullWidth?: boolean;
+    /** アイテム固有のカラム数 */
+    maxColumns?: number;
+    /** カスタムクラス */
+    className?: string;
+}
+/**
+ * 定義リストのグループ
+ */
+export interface DefinitionListGroup {
+    /** グループタイトル */
+    title: string;
+    /** グループ内のアイテム */
+    items: DefinitionListItem[];
+    /** グループ固有のレイアウト */
+    layout?: 'horizontal' | 'vertical';
+    /** グループ固有のカラム数 */
+    maxColumns?: number;
+}
+/**
+ * 定義リストの状態
+ */
+export interface DefinitionListState {
+    /** 現在のアイテム */
+    items: DefinitionListItem[];
+    /** 現在のグループ（グループ化時） */
+    groups: DefinitionListGroup[];
+    /** グループ化モード */
+    isGrouped: boolean;
+}
+/**
+ * 定義リストのコールバック
+ */
+export interface DefinitionListCallbacks {
+    /** アイテムクリック時 */
+    onItemClick?: (item: DefinitionListItem, index: number) => void;
+    /** グループクリック時 */
+    onGroupClick?: (group: DefinitionListGroup, index: number) => void;
+}
+/**
+ * 用語のスタイルタイプ
+ */
+export type TermStyleType = 'blockTitle' | 'subBlockTitle' | 'subSubBlockTitle';
+/**
+ * 定義リストの設定
+ */
+export interface DefinitionListConfig {
+    /** アイテム配列（フラットリスト用） */
+    items?: DefinitionListItem[];
+    /** グループ配列（グループ化リスト用） */
+    groups?: DefinitionListGroup[];
+    /** レイアウト方向（デフォルト: horizontal） */
+    layout?: 'horizontal' | 'vertical';
+    /** 最大カラム数（デフォルト: 自動） */
+    maxColumns?: 1 | 2 | 3 | 4;
+    /** 用語（ラベル）の幅 */
+    termWidth?: string | number;
+    /** 用語のスタイルタイプ */
+    termStyleType?: TermStyleType;
+    /** アイテム間のギャップ */
+    gap?: string | number;
+    /** ボーダーを表示 */
+    bordered?: boolean;
+    /** ストライプ表示 */
+    striped?: boolean;
+    /** コンパクト表示 */
+    compact?: boolean;
+    /** クリック可能 */
+    clickable?: boolean;
+    /** 空の値の表示テキスト */
+    emptyText?: string;
+}
+/**
+ * 定義リストコンポーネント
+ */
+export declare class DefinitionList {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    constructor(container: HTMLElement, config?: DefinitionListConfig, callbacks?: DefinitionListCallbacks);
+    /**
+     * 定義リストをレンダリング
+     */
+    render(): void;
+    /**
+     * アイテムを設定
+     */
+    setItems(items: DefinitionListItem[]): void;
+    /**
+     * グループを設定
+     */
+    setGroups(groups: DefinitionListGroup[]): void;
+    /**
+     * アイテムを追加
+     */
+    addItem(item: DefinitionListItem): void;
+    /**
+     * アイテムを削除
+     */
+    removeItem(index: number): void;
+    /**
+     * アイテムを更新
+     */
+    updateItem(index: number, item: Partial<DefinitionListItem>): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): Readonly<DefinitionListState>;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * カスタムスタイルを適用
+     */
+    private applyCustomStyles;
+    /**
+     * グループをレンダリング
+     */
+    private renderGroups;
+    /**
+     * 単一のグループをレンダリング
+     */
+    private renderGroup;
+    /**
+     * アイテムリストをレンダリング
+     */
+    private renderItems;
+    /**
+     * 単一のアイテムをレンダリング（dt + dd のペア）
+     */
+    private renderItem;
+    static renderField(field: InputField): string;
+}
+/**
+ * 定義リストを作成
+ */
+export declare function createDefinitionList(container: HTMLElement, config?: DefinitionListConfig, callbacks?: DefinitionListCallbacks): DefinitionList;

package/dist/types/renderer/components/delete-confirm-dialog.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Delete Confirm Dialog Component
+ * 削除確認ダイアログ - 依存データの影響を表示
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * 依存データの情報
+ */
+export interface DependencyInfo {
+    /** 依存データのタイプ（例：spaces, reservations） */
+    type: string;
+    /** 表示ラベル */
+    label: string;
+    /** 件数 */
+    count: number;
+}
+/**
+ * 削除確認ダイアログの設定
+ */
+export interface DeleteConfirmDialogConfig {
+    /** ダイアログタイトル */
+    title: string;
+    /** 削除対象の名前（例：施設名） */
+    targetName: string;
+    /** 削除対象のタイプ（例：施設） */
+    targetType?: string;
+    /** 依存データの情報 */
+    dependencies?: DependencyInfo[];
+    /** 警告メッセージ */
+    warningMessage?: string;
+    /** 確認ボタンのラベル */
+    confirmLabel?: string;
+    /** キャンセルボタンのラベル */
+    cancelLabel?: string;
+    /** 危険なアクションとしてスタイリング */
+    danger?: boolean;
+}
+/**
+ * ダイアログのコールバック
+ */
+export interface DeleteConfirmDialogCallbacks {
+    /** 削除確認時 */
+    onConfirm?: () => void;
+    /** キャンセル時 */
+    onCancel?: () => void;
+    /** ダイアログクローズ時 */
+    onClose?: () => void;
+}
+/**
+ * ダイアログの状態
+ */
+export interface DeleteConfirmDialogState {
+    /** ダイアログが開いているか */
+    isOpen: boolean;
+    /** フォーカスを戻す要素 */
+    previouslyFocusedElement: Element | null;
+}
+/**
+ * 削除確認ダイアログコンポーネント
+ */
+export declare class DeleteConfirmDialog {
+    private config;
+    private callbacks;
+    private state;
+    private dialogElement;
+    private overlayElement;
+    private readonly dialogId;
+    private boundKeydownHandler;
+    constructor(config: DeleteConfirmDialogConfig, callbacks?: DeleteConfirmDialogCallbacks);
+    /**
+     * ダイアログを開く
+     */
+    open(): void;
+    /**
+     * ダイアログを閉じる
+     */
+    close(): void;
+    /**
+     * 設定を更新
+     */
+    updateConfig(config: Partial<DeleteConfirmDialogConfig>): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): DeleteConfirmDialogState;
+    /**
+     * ダイアログ要素を取得（テスト用）
+     */
+    getDialogElement(): HTMLElement | null;
+    /**
+     * ダイアログをレンダリング
+     */
+    private render;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * ボディをレンダリング
+     */
+    private renderBody;
+    /**
+     * 依存データセクションをレンダリング
+     */
+    private renderDependencies;
+    /**
+     * フッターをレンダリング
+     */
+    private renderFooter;
+    /**
+     * イベントリスナーを設定
+     */
+    private setupEventListeners;
+    /**
+     * イベントリスナーを削除
+     */
+    private removeEventListeners;
+    /**
+     * キーボードイベントハンドラ
+     */
+    private handleKeydown;
+    /**
+     * Tab キーの処理（フォーカストラップ）
+     */
+    private handleTabKey;
+    /**
+     * フォーカス可能な要素を取得
+     */
+    private getFocusableElements;
+    /**
+     * フォーカスをダイアログ内に設定
+     */
+    private trapFocus;
+    /**
+     * 確認ボタンクリック時
+     */
+    private handleConfirm;
+    /**
+     * キャンセルボタンクリック時
+     */
+    private handleCancel;
+    /**
+     * ダイアログ要素を破棄
+     */
+    private destroy;
+    /**
+     * HTML特殊文字をエスケープ
+     */
+    private escapeHtml;
+    static renderField(field: InputField): string;
+}

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

@@ -0,0 +1,61 @@
+/**
+ * Action Dialog Component
+ * ユーザーアクション確認用ダイアログ
+ *
+ * 機能:
+ * - 確認/キャンセルボタン
+ * - デンジャーモード（危険なアクションの強調）
+ * - アイコン表示
+ * - サブアクションエリア
+ */
+import { BaseDialog } from './base-dialog';
+import type { ActionDialogConfig, ActionDialogCallbacks } from './dialog-types';
+/**
+ * アクションダイアログコンポーネント
+ * ユーザーに確認・キャンセルの選択を求めるダイアログ
+ */
+export declare class ActionDialog extends BaseDialog {
+    protected config: Required<Omit<ActionDialogConfig, 'customIcon' | 'message' | 'subActionContent'>> & Pick<ActionDialogConfig, 'customIcon' | 'message' | 'subActionContent'>;
+    protected callbacks: ActionDialogCallbacks;
+    constructor(config: ActionDialogConfig, callbacks?: ActionDialogCallbacks);
+    /**
+     * ダイアログのクラス名を取得
+     */
+    protected getDialogClassName(): string;
+    /**
+     * ARIA role を取得（アクション確認なので alertdialog）
+     */
+    protected getAriaRole(): string;
+    /**
+     * ダイアログのコンテンツをレンダリング
+     */
+    protected renderContent(): HTMLElement;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * アイコンをレンダリング
+     */
+    private renderIcon;
+    /**
+     * アイコンのSVGを取得
+     */
+    private getIconSVG;
+    /**
+     * ボディをレンダリング
+     */
+    private renderBody;
+    /**
+     * フッターをレンダリング
+     */
+    private renderFooter;
+    /**
+     * 確認ボタンクリック時
+     */
+    private handleConfirm;
+    /**
+     * キャンセルボタンクリック時
+     */
+    private handleCancel;
+}

package/dist/types/renderer/components/dialog/base-dialog.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Base Dialog Component
+ * すべてのダイアログバリアントの基盤となるクラス
+ *
+ * 機能:
+ * - オーバーレイ管理
+ * - フォーカストラップ
+ * - キーボードイベント処理（Escape, Tab）
+ * - ARIA属性管理
+ * - open/closeライフサイクル
+ * - bodyスクロール防止
+ * - フォーカス復元
+ */
+import type { BaseDialogConfig, BaseDialogCallbacks, BaseDialogState } from './dialog-types';
+/**
+ * ベースダイアログコンポーネント
+ * すべてのダイアログタイプの共通ロジックを提供
+ */
+export declare class BaseDialog {
+    protected config: BaseDialogConfig;
+    protected callbacks: BaseDialogCallbacks;
+    protected state: BaseDialogState;
+    protected dialogElement: HTMLElement | null;
+    protected overlayElement: HTMLElement | null;
+    protected readonly dialogId: string;
+    private boundKeydownHandler;
+    constructor(config?: BaseDialogConfig, callbacks?: BaseDialogCallbacks);
+    /**
+     * ダイアログを開く
+     */
+    open(): void;
+    /**
+     * ダイアログを閉じる
+     */
+    close(): void;
+    /**
+     * 設定を更新
+     */
+    updateConfig(config: Partial<BaseDialogConfig>): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): BaseDialogState;
+    /**
+     * ダイアログ要素を取得（テスト用）
+     */
+    getDialogElement(): HTMLElement | null;
+    /**
+     * オーバーレイ要素を取得（テスト用）
+     */
+    getOverlayElement(): HTMLElement | null;
+    /**
+     * ダイアログをレンダリング
+     * 継承クラスでオーバーライドして独自のコンテンツを追加
+     */
+    protected render(): void;
+    /**
+     * ダイアログのコンテンツをレンダリング
+     * 継承クラスで必ずオーバーライドすること
+     */
+    protected renderContent(): HTMLElement | null;
+    /**
+     * ダイアログのクラス名を取得
+     * 継承クラスでオーバーライドしてタイプ固有のクラスを追加
+     */
+    protected getDialogClassName(): string;
+    /**
+     * ダイアログのARIA role を取得
+     * 継承クラスでオーバーライド可能（例: ActionDialog → alertdialog）
+     */
+    protected getAriaRole(): string;
+    /**
+     * 初期フォーカス要素を取得
+     * 継承クラスでオーバーライドして特定の要素を返すことができる
+     */
+    protected getFirstFocusElement(): HTMLElement | null;
+    /**
+     * オーバーレイを作成
+     */
+    private createOverlay;
+    /**
+     * ダイアログコンテナを作成
+     */
+    private createDialogContainer;
+    /**
+     * イベントリスナーを設定
+     */
+    private setupEventListeners;
+    /**
+     * イベントリスナーを削除
+     */
+    private removeEventListeners;
+    /**
+     * キーボードイベントハンドラ
+     */
+    private handleKeydown;
+    /**
+     * Escapeキー処理
+     */
+    private handleEscapeKey;
+    /**
+     * オーバーレイクリック処理
+     */
+    private handleOverlayClick;
+    /**
+     * Tab キーの処理（フォーカストラップ）
+     */
+    private handleTabKey;
+    /**
+     * フォーカス可能な要素を取得
+     */
+    private getFocusableElements;
+    /**
+     * フォーカスをダイアログ内に設定
+     */
+    private trapFocus;
+    /**
+     * ダイアログ要素を破棄
+     */
+    private destroy;
+    /**
+     * HTML特殊文字をエスケープ
+     */
+    protected escapeHtml(text: string): string;
+}

package/dist/types/renderer/components/dialog/dialog-types.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Dialog Types
+ * ダイアログシステムの共通型定義
+ */
+export type DialogSize = 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | 'FULL';
+export interface BaseDialogConfig {
+    isOpen?: boolean;
+    size?: DialogSize;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    firstFocusTarget?: 'first' | 'confirm' | 'cancel';
+    onClickOverlay?: () => void | boolean;
+    onPressEscape?: () => void | boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    contentPadding?: 'normal' | 'compact' | 'none';
+    className?: string;
+}
+export interface BaseDialogCallbacks {
+    onOpen?: () => void;
+    onClose?: () => void;
+    onAfterClose?: () => void;
+}
+export interface BaseDialogState {
+    isOpen: boolean;
+    previouslyFocusedElement: Element | null;
+}
+export type DialogIcon = 'warning' | 'error' | 'info' | 'success' | 'custom';
+export interface ActionDialogConfig extends BaseDialogConfig {
+    title: string;
+    message?: string;
+    icon?: DialogIcon;
+    customIcon?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmDisabled?: boolean;
+    danger?: boolean;
+    showSubActionArea?: boolean;
+    subActionContent?: HTMLElement | string;
+}
+export interface ActionDialogCallbacks extends BaseDialogCallbacks {
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+}
+export interface MessageDialogConfig extends BaseDialogConfig {
+    title: string;
+    message: string;
+    icon?: Exclude<DialogIcon, 'custom'> | 'custom';
+    customIcon?: string;
+    closeLabel?: string;
+}
+export interface MessageDialogCallbacks extends BaseDialogCallbacks {
+    onAcknowledge?: () => void;
+}
+export interface ModelessDialogPosition {
+    top: number;
+    left: number;
+}
+export interface ModelessDialogConfig extends Omit<BaseDialogConfig, 'closeOnOverlayClick'> {
+    title: string;
+    position?: 'auto' | ModelessDialogPosition;
+    draggable?: boolean;
+    width?: number | string;
+    height?: number | string;
+}
+export interface ModelessDialogCallbacks extends BaseDialogCallbacks {
+    onMove?: (position: ModelessDialogPosition) => void;
+}
+export interface FormDialogConfig extends BaseDialogConfig {
+    title: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    preventCloseOnSubmit?: boolean;
+    warnOnUnsavedChanges?: boolean;
+}
+export interface FormDialogCallbacks extends BaseDialogCallbacks {
+    onSubmit?: (formData: FormData) => void | Promise<void>;
+    onCancel?: () => void;
+    onFormChange?: (isDirty: boolean) => void;
+}
+export interface DependencyInfo {
+    type: string;
+    label: string;
+    count: number;
+}
+export interface DeleteConfirmDialogConfig extends ActionDialogConfig {
+    targetName: string;
+    targetType?: string;
+    dependencies?: DependencyInfo[];
+    warningMessage?: string;
+}
+export interface DeleteConfirmDialogCallbacks extends ActionDialogCallbacks {
+}
+export interface DeleteConfirmDialogState extends BaseDialogState {
+}