mokkun 0.1.5 → 0.2.0

package/dist/types/renderer/components/data-table.d.ts

@@ -0,0 +1,186 @@
+/**
+ * Data Table Component
+ * データテーブル（一覧表示）コンポーネント
+ */
+import type { DataTableField, DataTableRow, DataTableSortConfig } from '../../types/schema';
+/**
+ * データテーブルの状態
+ */
+export interface DataTableState {
+    /** 現在のデータ */
+    data: DataTableRow[];
+    /** 元のデータ（フィルタリング・ソート前） */
+    originalData: DataTableRow[];
+    /** 現在のソート設定 */
+    sort: DataTableSortConfig | null;
+    /** 現在のフィルター値 */
+    filterValues: Record<string, unknown>;
+    /** 選択された行ID */
+    selectedRowIds: Set<string | number>;
+    /** 現在のページ（0始まり） */
+    currentPage: number;
+    /** 1ページあたりの行数 */
+    pageSize: number;
+    /** 総件数 */
+    totalCount: number;
+    /** ローディング状態 */
+    isLoading: boolean;
+    /** 折りたたまれたグループ名のセット */
+    collapsedGroups: Set<string>;
+    /** カラム幅の状態（リサイズ用） */
+    columnWidths: Record<string, number>;
+}
+/**
+ * データテーブルのコールバック
+ */
+export interface DataTableCallbacks {
+    /** ソート変更時 */
+    onSortChange?: (sort: DataTableSortConfig, state: DataTableState) => void;
+    /** フィルター変更時 */
+    onFilterChange?: (filters: Record<string, unknown>, state: DataTableState) => void;
+    /** 行選択時 */
+    onSelectionChange?: (selectedIds: Set<string | number>, state: DataTableState) => void;
+    /** 行アクション実行時 */
+    onRowAction?: (actionId: string, row: DataTableRow, state: DataTableState) => void;
+    /** ページ変更時 */
+    onPageChange?: (page: number, state: DataTableState) => void;
+    /** ページサイズ変更時 */
+    onPageSizeChange?: (pageSize: number, state: DataTableState) => void;
+    /** グループ展開/折りたたみ時 */
+    onGroupToggle?: (groupName: string, isExpanded: boolean, state: DataTableState) => void;
+    /** 列リサイズ時 */
+    onColumnResize?: (columnId: string, width: number, state: DataTableState) => void;
+}
+/**
+ * データテーブルコンポーネント
+ */
+export declare class DataTable {
+    private config;
+    private container;
+    private callbacks;
+    private state;
+    private tableId;
+    private boundHandleClick;
+    private boundHandleChange;
+    private boundHandleKeypress;
+    private boundHandleMouseDown;
+    private boundHandleMouseMove;
+    private boundHandleMouseUp;
+    private resizingColumnId;
+    private resizeStartX;
+    private resizeStartWidth;
+    constructor(config: DataTableField, container: HTMLElement, callbacks?: DataTableCallbacks);
+    /**
+     * 現在の状態を取得
+     */
+    getState(): DataTableState;
+    /**
+     * データを設定
+     */
+    setData(data: DataTableRow[], totalCount?: number): void;
+    /**
+     * データ変換（フィルター、ソート、ページネーション）を適用
+     */
+    private applyDataTransformations;
+    /**
+     * ソートを設定
+     */
+    setSort(column: string, direction: 'asc' | 'desc'): void;
+    /**
+     * フィルター値を設定
+     */
+    setFilterValues(values: Record<string, unknown>): void;
+    /**
+     * フィルターをリセット
+     */
+    resetFilters(): void;
+    /**
+     * 行を選択
+     */
+    selectRow(rowId: string | number): void;
+    /**
+     * 全行を選択/解除
+     */
+    selectAll(selected: boolean): void;
+    /**
+     * 選択された行を取得
+     */
+    getSelectedRows(): DataTableRow[];
+    /**
+     * ページを変更
+     */
+    setPage(page: number): void;
+    /**
+     * ページサイズを変更
+     */
+    setPageSize(pageSize: number): void;
+    /**
+     * ローディング状態を設定
+     */
+    setLoading(isLoading: boolean): void;
+    /**
+     * コンポーネントをレンダリング
+     */
+    render(): void;
+    /**
+     * イベントリスナーを削除（メモリリーク防止）
+     */
+    private detachEventListeners;
+    /**
+     * イベントリスナーをアタッチ（イベント委譲パターン）
+     */
+    private attachEventListeners;
+    /**
+     * クリックイベントハンドラー（イベント委譲）
+     */
+    private handleClick;
+    /**
+     * 変更イベントハンドラー（イベント委譲）
+     */
+    private handleChange;
+    /**
+     * キープレスイベントハンドラー（イベント委譲）
+     */
+    private handleKeypress;
+    /**
+     * グループを展開/折りたたみ
+     */
+    toggleGroup(groupName: string): void;
+    /**
+     * 全グループを展開
+     */
+    expandAllGroups(): void;
+    /**
+     * 全グループを折りたたむ
+     */
+    collapseAllGroups(): void;
+    /**
+     * カラム幅を設定
+     */
+    setColumnWidth(columnId: string, width: number): void;
+    /**
+     * マウスダウンイベントハンドラー（リサイズ開始）
+     */
+    private handleMouseDown;
+    /**
+     * マウスムーブイベントハンドラー（リサイズ中）
+     */
+    private handleMouseMove;
+    /**
+     * マウスアップイベントハンドラー（リサイズ終了）
+     */
+    private handleMouseUp;
+    /**
+     * コンポーネントを破棄（クリーンアップ）
+     */
+    destroy(): void;
+    /**
+     * 入力からフィルター値を適用
+     */
+    private applyFiltersFromInputs;
+}
+/**
+ * データテーブルフィールドを静的HTMLとしてレンダリング
+ * form-fields.ts から呼び出される
+ */
+export declare function renderDataTableField(field: DataTableField): string;

package/dist/types/renderer/components/date-range-picker.d.ts

@@ -0,0 +1,203 @@
+/**
+ * DateRangePicker Component
+ * 日付範囲を選択するためのコンポーネント
+ *
+ * Features:
+ * - 開始日・終了日の選択
+ * - プリセット (Last 7 days, Last 30 days等)
+ * - カレンダーUI（デュアルカレンダー表示）
+ * - キーボードナビゲーション
+ */
+/**
+ * 日付範囲
+ */
+export interface DateRange {
+    /** 開始日 */
+    from: Date | null;
+    /** 終了日 */
+    to: Date | null;
+}
+/**
+ * プリセット項目
+ */
+export interface DateRangePreset {
+    /** プリセットID */
+    id: string;
+    /** 表示ラベル */
+    label: string;
+    /** 範囲を計算する関数 */
+    getRange: () => DateRange;
+}
+/**
+ * DateRangePickerの状態
+ */
+export interface DateRangePickerState {
+    /** 現在選択されている日付範囲 */
+    value: DateRange;
+    /** ドロップダウンの開閉状態 */
+    isOpen: boolean;
+    /** 左カレンダーの表示月 */
+    leftDisplayedMonth: Date;
+    /** 右カレンダーの表示月 */
+    rightDisplayedMonth: Date;
+    /** 範囲選択中の仮開始日 */
+    selectionStart: Date | null;
+    /** ホバー中の日付 */
+    hoveredDate: Date | null;
+    /** 無効化状態 */
+    disabled: boolean;
+    /** 選択中のプリセットID */
+    selectedPresetId: string | null;
+}
+/**
+ * DateRangePickerのコールバック
+ */
+export interface DateRangePickerCallbacks {
+    /** 日付範囲変更時 */
+    onChange: (range: DateRange, presetId: string | null, state: DateRangePickerState) => void;
+    /** ドロップダウン開閉時 */
+    onOpenChange?: (isOpen: boolean, state: DateRangePickerState) => void;
+    /** 適用ボタンクリック時 */
+    onApply?: (range: DateRange, state: DateRangePickerState) => void;
+    /** キャンセルボタンクリック時 */
+    onCancel?: (state: DateRangePickerState) => void;
+}
+/**
+ * DateRangePickerの設定
+ */
+export interface DateRangePickerConfig {
+    /** 初期選択日付範囲 */
+    value?: DateRange;
+    /** 選択可能な日付範囲の開始日 */
+    minDate?: Date;
+    /** 選択可能な日付範囲の終了日 */
+    maxDate?: Date;
+    /** 無効化 */
+    disabled?: boolean;
+    /** プリセット一覧 */
+    presets?: DateRangePreset[];
+    /** プリセットを表示するかどうか */
+    showPresets?: boolean;
+    /** 週の開始曜日 (0: 日曜, 1: 月曜) */
+    weekStartsOn?: 0 | 1;
+    /** ロケール */
+    locale?: string;
+    /** トリガーのプレースホルダー */
+    placeholder?: string;
+    /** 日付フォーマット関数 */
+    formatDate?: (date: Date) => string;
+    /** 適用ボタンを表示するか */
+    showApplyButton?: boolean;
+    /** キャンセルボタンを表示するか */
+    showCancelButton?: boolean;
+}
+/**
+ * デフォルトのプリセット
+ */
+export declare function getDefaultPresets(): DateRangePreset[];
+/**
+ * DateRangePickerコンポーネント
+ */
+export declare class DateRangePicker {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private triggerElement;
+    private dropdownElement;
+    private clickOutsideHandler;
+    private keyboardHandler;
+    private savedValue;
+    constructor(container: HTMLElement, config: DateRangePickerConfig | undefined, callbacks: DateRangePickerCallbacks);
+    /**
+     * コンポーネントをレンダリング
+     */
+    render(): void;
+    /**
+     * 日付範囲を設定
+     */
+    setValue(value: DateRange): void;
+    /**
+     * 日付範囲を取得
+     */
+    getValue(): DateRange;
+    /**
+     * 開閉状態を切り替え
+     */
+    toggle(): void;
+    /**
+     * 開く
+     */
+    open(): void;
+    /**
+     * 閉じる
+     */
+    close(): void;
+    /**
+     * 開閉状態を設定
+     */
+    setOpen(isOpen: boolean): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 状態を取得
+     */
+    getState(): DateRangePickerState;
+    /**
+     * 破棄
+     */
+    destroy(): void;
+    private createInitialState;
+    private updateDisplayedMonths;
+    private renderTrigger;
+    private renderDropdown;
+    private renderPresets;
+    private renderCalendar;
+    private renderCalendarHeader;
+    private renderCalendarGrid;
+    private renderWeekdayHeader;
+    private renderWeekRow;
+    private renderDateCell;
+    private renderFooter;
+    private handlePresetClick;
+    private handleDateClick;
+    private handleDateHover;
+    private handleDateLeave;
+    private updateHoverStyles;
+    private handlePrevMonth;
+    private handleNextMonth;
+    private handleApply;
+    private handleCancel;
+    private handleClickOutside;
+    private handleKeyboard;
+    private attachEventListeners;
+    private detachEventListeners;
+    private normalizeDate;
+    private getFirstDayOfMonth;
+    private getCalendarWeeks;
+    private getWeekdayLabels;
+    private formatMonthYear;
+    private formatDateFull;
+    private formatDateISO;
+    private formatDate;
+    private formatRangeLabel;
+    private isToday;
+    private isDateDisabled;
+    private isDateSelected;
+    private isRangeStart;
+    private isRangeEnd;
+    private isInRange;
+    private isHovered;
+    private isInHoverRange;
+    private getCalendarIcon;
+    private getChevronLeftIcon;
+    private getChevronRightIcon;
+    private getChevronDownIcon;
+}
+/**
+ * DateRangePickerコンポーネントを作成
+ */
+export declare function createDateRangePicker(container: HTMLElement, config: DateRangePickerConfig | undefined, callbacks: DateRangePickerCallbacks): DateRangePicker;

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;
+}