mokkun 0.1.5 → 0.1.6

package/dist/types/renderer/components/combobox.d.ts

@@ -0,0 +1,217 @@
+/**
+ * Combobox Component
+ * コンボボックスコンポーネント
+ *
+ * Features:
+ * - Single and multi-selection modes
+ * - Search/filter functionality
+ * - Async option loading with debounce
+ * - Grouped options support
+ * - Custom option rendering
+ * - Full keyboard navigation
+ * - ARIA accessibility
+ *
+ * API follows standard conventions from Headless UI and Radix UI:
+ * - `role="combobox"` with `aria-haspopup="listbox"`
+ * - `aria-expanded` for dropdown state
+ * - `aria-activedescendant` for keyboard navigation
+ * - `data-state="open|closed"` for styling
+ */
+import type { ComboboxField } from '../../types/schema';
+/**
+ * コンボボックスの選択肢
+ */
+export interface ComboboxOption {
+    /** 値 */
+    value: string | number;
+    /** ラベル */
+    label: string;
+    /** 無効化 */
+    disabled?: boolean;
+    /** グループ名 */
+    group?: string;
+    /** アイコンHTML */
+    icon?: string;
+    /** 説明 */
+    description?: string;
+    /** カスタムデータ */
+    data?: Record<string, unknown>;
+}
+/**
+ * コンボボックスの状態
+ */
+export interface ComboboxState {
+    /** 選択された値 */
+    selectedValues: (string | number)[];
+    /** 入力テキスト */
+    inputValue: string;
+    /** ドロップダウン開閉状態 */
+    isOpen: boolean;
+    /** ハイライト中のオプションインデックス */
+    highlightedIndex: number;
+    /** フィルタリング/ロード済みオプション */
+    filteredOptions: ComboboxOption[];
+    /** グループ化されたオプション */
+    groupedOptions: Map<string, ComboboxOption[]>;
+    /** ローディング状態 */
+    isLoading: boolean;
+    /** エラーメッセージ */
+    error: string | null;
+}
+/**
+ * コンボボックスのコールバック
+ */
+export interface ComboboxCallbacks {
+    /** 選択変更時 */
+    onChange?: (values: (string | number)[], state: ComboboxState) => void;
+    /** 入力変更時 */
+    onInputChange?: (value: string, state: ComboboxState) => void;
+    /** ドロップダウン開閉時 */
+    onOpen?: (state: ComboboxState) => void;
+    /** ドロップダウン閉じる時 */
+    onClose?: (state: ComboboxState) => void;
+    /** オプションハイライト時 */
+    onHighlight?: (option: ComboboxOption | null, state: ComboboxState) => void;
+    /** 非同期ロードエラー時 */
+    onError?: (error: Error, state: ComboboxState) => void;
+}
+/**
+ * コンボボックスの設定
+ */
+export interface ComboboxConfig {
+    /** コンポーネントID */
+    id: string;
+    /** プレースホルダー */
+    placeholder?: string;
+    /** 選択モード */
+    mode: 'single' | 'multi';
+    /** 静的オプション */
+    options?: ComboboxOption[];
+    /** 非同期ローダー関数 */
+    loadOptions?: (query: string) => Promise<ComboboxOption[]>;
+    /** デバウンス遅延（ms） */
+    debounceMs?: number;
+    /** クリア可能 */
+    clearable?: boolean;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 必須フィールド */
+    required?: boolean;
+    /** 非同期ロード最小検索文字数 */
+    minSearchLength?: number;
+    /** 最大選択数（multiモード） */
+    maxSelections?: number;
+    /** カスタムオプションレンダラー */
+    renderOption?: (option: ComboboxOption) => string;
+    /** カスタム選択値レンダラー */
+    renderSelected?: (option: ComboboxOption) => string;
+    /** オプションなしメッセージ */
+    noOptionsMessage?: string;
+    /** ローディングメッセージ */
+    loadingMessage?: string;
+    /** name属性（フォーム用） */
+    name?: string;
+}
+/**
+ * コンボボックスコンポーネント
+ */
+export declare class Combobox {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private debounceTimer;
+    private inputRef;
+    private listboxRef;
+    private documentClickHandler;
+    private abortController;
+    constructor(container: HTMLElement, config: ComboboxConfig, callbacks?: ComboboxCallbacks, initialValues?: (string | number)[]);
+    /**
+     * コンボボックスをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を取得
+     */
+    getValue(): (string | number)[];
+    /**
+     * 値を設定
+     */
+    setValue(values: (string | number)[]): void;
+    /**
+     * 選択されたオプションを取得
+     */
+    getSelectedOptions(): ComboboxOption[];
+    /**
+     * ドロップダウンを開く
+     */
+    open(): void;
+    /**
+     * ドロップダウンを閉じる
+     */
+    close(): void;
+    /**
+     * ドロップダウンの開閉状態をトグル
+     */
+    toggle(): void;
+    /**
+     * ドロップダウンが開いているか
+     */
+    isOpenState(): boolean;
+    /**
+     * オプションを設定
+     */
+    setOptions(options: ComboboxOption[]): void;
+    /**
+     * オプションを追加
+     */
+    addOption(option: ComboboxOption): void;
+    /**
+     * オプションを削除
+     */
+    removeOption(value: string | number): void;
+    /**
+     * 状態を取得
+     */
+    getState(): ComboboxState;
+    /**
+     * クリーンアップ
+     */
+    destroy(): void;
+    private createInitialState;
+    private setState;
+    private updateFilteredOptions;
+    private filterOptions;
+    private groupOptions;
+    private loadOptionsAsync;
+    private renderInputArea;
+    private createInputElement;
+    private renderTags;
+    private renderIndicators;
+    private renderDropdown;
+    private renderOption;
+    private setupEventListeners;
+    private handleInputFocus;
+    private handleInput;
+    private handleKeyDown;
+    private handleClear;
+    private handleOptionClick;
+    private handleOptionHover;
+    private selectOption;
+    private deselectOption;
+    private clearSelection;
+    private selectHighlighted;
+    private removeLastSelected;
+    private highlightNext;
+    private highlightPrevious;
+    private highlightOption;
+    /**
+     * コンボボックスフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - コンボボックスフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: ComboboxField): string;
+}

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;