mokkun 0.1.5 → 0.2.0

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

@@ -0,0 +1,116 @@
+/**
+ * Repeater Component
+ * 動的フィールドグループ（リピーター）
+ */
+import type { RepeaterField, InputField } from '../../types';
+/**
+ * リピーターアイテムの状態
+ */
+export interface RepeaterItem {
+    /** アイテムID */
+    id: string;
+    /** アイテムのデータ */
+    data: Record<string, unknown>;
+    /** 展開状態 */
+    expanded: boolean;
+}
+/**
+ * リピーターの状態
+ */
+export interface RepeaterState {
+    /** アイテム一覧 */
+    items: RepeaterItem[];
+    /** ネストレベル */
+    nestLevel: number;
+}
+/**
+ * リピーターのコールバック
+ */
+export interface RepeaterCallbacks {
+    /** アイテム追加時 */
+    onAdd?: (item: RepeaterItem, state: RepeaterState) => void;
+    /** アイテム削除時 */
+    onRemove?: (itemId: string, state: RepeaterState) => void;
+    /** 並べ替え時 */
+    onReorder?: (items: RepeaterItem[]) => void;
+    /** データ変更時 */
+    onChange?: (state: RepeaterState) => void;
+    /** フィールドレンダラー */
+    renderFields?: (fields: InputField[], container: HTMLElement, itemId: string, nestLevel: number) => void;
+}
+/**
+ * リピーターコンポーネント
+ */
+export declare class Repeater {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    /** 最大ネストレベル（2階層まで） */
+    private static readonly MAX_NEST_LEVEL;
+    constructor(config: RepeaterField, container: HTMLElement, callbacks?: RepeaterCallbacks, nestLevel?: number);
+    /**
+     * リピーターをレンダリング
+     */
+    render(): void;
+    /**
+     * アイテムを追加
+     */
+    addItem(withDummyData?: boolean): RepeaterItem | null;
+    /**
+     * アイテムを削除
+     */
+    removeItem(itemId: string): boolean;
+    /**
+     * アイテムデータを更新
+     */
+    updateItemData(itemId: string, data: Record<string, unknown>): void;
+    /**
+     * アイテムの展開/折りたたみ
+     */
+    toggleItemExpanded(itemId: string): void;
+    /**
+     * アイテムを上へ移動
+     */
+    moveItemUp(itemId: string): boolean;
+    /**
+     * アイテムを下へ移動
+     */
+    moveItemDown(itemId: string): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): RepeaterState;
+    /**
+     * 値を取得（フォーム送信用）
+     */
+    getValue(): Record<string, unknown>[];
+    /**
+     * ダミーデータで初期化
+     */
+    initWithDummyData(count?: number): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * アイテムをレンダリング
+     */
+    private renderItem;
+    /**
+     * フィールドプレースホルダーをレンダリング（renderFieldsコールバックがない場合）
+     */
+    private renderFieldPlaceholder;
+    /**
+     * 簡易入力要素を作成
+     */
+    private createSimpleInput;
+    /**
+     * フッター（追加ボタン）をレンダリング
+     */
+    private renderFooter;
+}

package/dist/types/renderer/components/response-message.d.ts

@@ -0,0 +1,180 @@
+/**
+ * ResponseMessage Component
+ * レスポンスメッセージコンポーネント
+ *
+ *
+ * https://smarthr.design/products/components/response-message/
+ *
+ * 機能:
+ * - タイプ（success/error/warning/info）
+ * - 詳細表示（折りたたみ）
+ * - 再試行ボタン
+ * - アイコン表示
+ *
+ * 用途:
+ * - フォーム送信結果
+ * - API呼び出し結果
+ * - バリデーションエラー表示
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * レスポンスメッセージのタイプ
+ * - success: 成功・完了
+ * - error: エラー・失敗
+ * - warning: 警告
+ * - info: 情報
+ */
+export type ResponseMessageType = 'success' | 'error' | 'warning' | 'info';
+/**
+ * レスポンスメッセージの状態
+ */
+export interface ResponseMessageState {
+    /** 表示中かどうか */
+    visible: boolean;
+    /** 詳細展開状態 */
+    detailsExpanded: boolean;
+    /** ローディング状態（再試行中） */
+    loading: boolean;
+}
+/**
+ * レスポンスメッセージのコールバック
+ */
+export interface ResponseMessageCallbacks {
+    /** 再試行ボタンクリック時 */
+    onRetry?: () => void | Promise<void>;
+    /** 詳細展開時 */
+    onExpandDetails?: () => void;
+    /** 詳細折りたたみ時 */
+    onCollapseDetails?: () => void;
+    /** 閉じるボタンクリック時 */
+    onClose?: () => void;
+}
+/**
+ * レスポンスメッセージの設定
+ */
+export interface ResponseMessageConfig {
+    /** メインメッセージ */
+    message: string;
+    /** メッセージタイプ */
+    type?: ResponseMessageType;
+    /** 詳細メッセージ（折りたたみ表示） */
+    details?: string | string[];
+    /** 再試行ボタンを表示 */
+    showRetry?: boolean;
+    /** 再試行ボタンのラベル */
+    retryLabel?: string;
+    /** 閉じるボタンを表示 */
+    showClose?: boolean;
+    /** アイコンを非表示にする */
+    hideIcon?: boolean;
+    /** カスタムアイコン（SVG文字列） */
+    icon?: string;
+    /** 詳細セクションのラベル */
+    detailsLabel?: string;
+    /** ID属性 */
+    id?: string;
+    /** カスタムCSSクラス */
+    className?: string;
+    /** アクセシビリティ用ラベル */
+    ariaLabel?: string;
+}
+/**
+ * レスポンスメッセージコンポーネント
+ */
+export declare class ResponseMessage {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private detailsId;
+    private detailsToggleHandler;
+    private retryHandler;
+    private closeHandler;
+    constructor(container: HTMLElement, config: ResponseMessageConfig, callbacks?: ResponseMessageCallbacks);
+    /**
+     * コンポーネントをレンダリング
+     */
+    render(): void;
+    /**
+     * メッセージを表示
+     */
+    show(): void;
+    /**
+     * メッセージを非表示
+     */
+    hide(): void;
+    /**
+     * 詳細を展開
+     */
+    expandDetails(): void;
+    /**
+     * 詳細を折りたたむ
+     */
+    collapseDetails(): void;
+    /**
+     * 詳細の展開/折りたたみを切り替え
+     */
+    toggleDetails(): void;
+    /**
+     * ローディング状態を設定
+     */
+    setLoading(loading: boolean): void;
+    /**
+     * メッセージを更新
+     */
+    setMessage(message: string): void;
+    /**
+     * 詳細を更新
+     */
+    setDetails(details: string | string[] | undefined): void;
+    /**
+     * タイプを更新
+     */
+    setType(type: ResponseMessageType): void;
+    /**
+     * 設定を更新
+     */
+    update(config: Partial<ResponseMessageConfig>): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): ResponseMessageState;
+    /**
+     * 表示中かどうかを取得
+     */
+    isVisible(): boolean;
+    /**
+     * 詳細が展開中かどうかを取得
+     */
+    isDetailsExpanded(): boolean;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    private createInitialState;
+    /**
+     * イベントリスナーをクリーンアップ
+     */
+    private cleanupEventListeners;
+    private buildClassName;
+    private renderIcon;
+    private renderContent;
+    private renderActions;
+    private renderDetailsToggle;
+    private renderRetryButton;
+    private renderDetails;
+    private renderCloseButton;
+    private updateDetailsState;
+    private updateRetryButtonState;
+    private hasDetails;
+    /**
+     * カスタムSVGアイコンをサニタイズ
+     */
+    private sanitizeSvgIcon;
+    static renderField(field: InputField): string;
+}
+/**
+ * レスポンスメッセージを作成
+ */
+export declare function createResponseMessage(container: HTMLElement, config: ResponseMessageConfig, callbacks?: ResponseMessageCallbacks): ResponseMessage;

package/dist/types/renderer/components/search-input.d.ts

@@ -0,0 +1,198 @@
+/**
+ * SearchInput Component
+ * 検索専用の入力フィールドコンポーネント
+ *
+ * Features:
+ * - 検索アイコン
+ * - プレースホルダー
+ * - クリアボタン
+ * - キーボードショートカット表示
+ */
+/**
+ * 検索入力の状態
+ */
+export interface SearchInputState {
+    /** 現在の値 */
+    value: string;
+    /** 無効化状態 */
+    disabled: boolean;
+    /** フォーカス状態 */
+    focused: boolean;
+    /** 検索中状態 */
+    loading: boolean;
+}
+/**
+ * 検索入力のコールバック
+ */
+export interface SearchInputCallbacks {
+    /** 値変更時 */
+    onChange?: (value: string, state: SearchInputState) => void;
+    /** 検索実行時（Enter押下またはdebounce後） */
+    onSearch?: (value: string, state: SearchInputState) => void;
+    /** クリアボタン押下時 */
+    onClear?: (state: SearchInputState) => void;
+    /** フォーカス時 */
+    onFocus?: (state: SearchInputState) => void;
+    /** ブラー時 */
+    onBlur?: (state: SearchInputState) => void;
+}
+/**
+ * キーボードショートカットの設定
+ */
+export interface KeyboardShortcut {
+    /** 修飾キー */
+    modifier?: 'cmd' | 'ctrl' | 'alt' | 'shift';
+    /** キー */
+    key: string;
+    /** 表示ラベル（省略時は自動生成） */
+    label?: string;
+}
+/**
+ * 検索入力の設定
+ */
+export interface SearchInputConfig {
+    /** 初期値 */
+    defaultValue?: string;
+    /** プレースホルダー */
+    placeholder?: string;
+    /** 無効化 */
+    disabled?: boolean;
+    /** サイズ */
+    size?: 'small' | 'medium' | 'large';
+    /** クリアボタン表示 */
+    clearable?: boolean;
+    /** 検索アイコン表示 */
+    showSearchIcon?: boolean;
+    /** キーボードショートカット */
+    shortcut?: KeyboardShortcut;
+    /** 自動フォーカス */
+    autoFocus?: boolean;
+    /** デバウンス時間（ms）- 0の場合はデバウンスなし */
+    debounceMs?: number;
+    /** aria-label */
+    ariaLabel?: string;
+    /** ローディング状態 */
+    loading?: boolean;
+}
+/**
+ * 検索入力コンポーネント
+ */
+export declare class SearchInput {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private inputElement;
+    private debounceTimer;
+    private globalKeyHandler;
+    constructor(container: HTMLElement, config?: SearchInputConfig, callbacks?: SearchInputCallbacks);
+    /**
+     * 検索入力フィールドをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(value: string): void;
+    /**
+     * 値を取得
+     */
+    getValue(): string;
+    /**
+     * ローディング状態を設定
+     */
+    setLoading(loading: boolean): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * フォーカス
+     */
+    focus(): void;
+    /**
+     * ブラー
+     */
+    blur(): void;
+    /**
+     * クリア
+     */
+    clear(): void;
+    /**
+     * 状態を取得
+     */
+    getState(): SearchInputState;
+    /**
+     * 破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * data-state属性の値を取得
+     */
+    private getDataState;
+    /**
+     * 入力グループをレンダリング
+     */
+    private renderInputGroup;
+    /**
+     * 検索アイコンをレンダリング
+     */
+    private renderSearchIcon;
+    /**
+     * 検索アイコンを更新
+     */
+    private updateSearchIcon;
+    /**
+     * 入力フィールドをレンダリング
+     */
+    private renderInput;
+    /**
+     * クリアボタンをレンダリング
+     */
+    private renderClearButton;
+    /**
+     * ショートカットバッジをレンダリング
+     */
+    private renderShortcutBadge;
+    /**
+     * ショートカットラベルを取得
+     */
+    private getShortcutLabel;
+    /**
+     * グローバルキーボードショートカットを登録
+     */
+    private registerGlobalShortcut;
+    /**
+     * クリアボタンの表示/非表示を更新
+     */
+    private updateClearButton;
+    /**
+     * 入力イベント
+     */
+    private handleInput;
+    /**
+     * フォーカスイベント
+     */
+    private handleFocus;
+    /**
+     * ブラーイベント
+     */
+    private handleBlur;
+    /**
+     * キーダウンイベント
+     */
+    private handleKeyDown;
+    /**
+     * クリアイベント
+     */
+    private handleClear;
+}
+/**
+ * 検索入力コンポーネントを作成
+ */
+export declare function createSearchInput(container: HTMLElement, config?: SearchInputConfig, callbacks?: SearchInputCallbacks): SearchInput;

package/dist/types/renderer/components/section-nav.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Section Navigation Component
+ * セクション間をスムーズスクロールで移動するナビゲーション
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * セクション定義
+ */
+export interface SectionDefinition {
+    /** セクションID（HTMLのid属性と一致させる） */
+    id: string;
+    /** セクション名 */
+    label: string;
+    /** アイコン（絵文字のみサポート、HTMLは安全のためテキストとして表示） */
+    icon?: string;
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * セクションナビの状態
+ */
+export interface SectionNavState {
+    /** 現在アクティブなセクションID */
+    activeSectionId: string;
+    /** セクション一覧 */
+    sections: SectionDefinition[];
+}
+/**
+ * セクションナビのコールバック
+ */
+export interface SectionNavCallbacks {
+    /** セクション変更時（クリックによる遷移） */
+    onSectionChange?: (sectionId: string, state: SectionNavState) => void;
+    /** スクロールによるアクティブセクション変更時 */
+    onActiveChange?: (sectionId: string, state: SectionNavState) => void;
+}
+/**
+ * セクションナビの設定
+ */
+export interface SectionNavConfig {
+    /** セクション一覧 */
+    sections: SectionDefinition[];
+    /** 初期アクティブセクションID */
+    defaultActiveSection?: string;
+    /** スクロールオフセット（sticky headerの高さ考慮） */
+    scrollOffset?: number;
+    /** スクロール動作 */
+    scrollBehavior?: ScrollBehavior;
+    /** モバイル表示モード */
+    mobileMode?: 'scroll' | 'dropdown';
+    /** スティッキー位置（top値） */
+    stickyTop?: string;
+    /** Intersection Observer のルートマージン */
+    rootMargin?: string;
+    /** Intersection Observer の閾値 */
+    threshold?: number | number[];
+}
+/**
+ * セクションナビゲーションコンポーネント
+ */
+export declare class SectionNav {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private observer;
+    private isScrolling;
+    private scrollTimeout;
+    private documentClickHandler;
+    constructor(config: SectionNavConfig, container: HTMLElement, callbacks?: SectionNavCallbacks);
+    /**
+     * ナビゲーションをレンダリング
+     */
+    render(): void;
+    /**
+     * 指定セクションにスクロール
+     * @param sectionId - スクロール先のセクションID
+     */
+    scrollToSection(sectionId: string): void;
+    /**
+     * アクティブセクションを設定（スクロールなし）
+     * @param sectionId - アクティブにするセクションID
+     */
+    setActiveSection(sectionId: string): void;
+    /**
+     * 現在の状態を取得
+     * @returns 現在の状態のコピー
+     */
+    getState(): SectionNavState;
+    /**
+     * 現在のアクティブセクションを取得
+     * @returns アクティブなセクション定義、またはundefined
+     */
+    getActiveSection(): SectionDefinition | undefined;
+    /**
+     * セクションを追加
+     * @param section - 追加するセクション定義
+     * @param index - 挿入位置（省略時は末尾に追加）
+     */
+    addSection(section: SectionDefinition, index?: number): void;
+    /**
+     * セクションを削除
+     * @param sectionId - 削除するセクションID
+     * @returns 削除成功時true
+     */
+    removeSection(sectionId: string): boolean;
+    /**
+     * セクションを更新
+     * @param sectionId - 更新するセクションID
+     * @param updates - 更新内容
+     * @returns 更新成功時true
+     */
+    updateSection(sectionId: string, updates: Partial<SectionDefinition>): boolean;
+    /**
+     * クリーンアップ（Intersection Observerとイベントリスナーの解除）
+     */
+    destroy(): void;
+    /**
+     * 設定を検証
+     */
+    private validateConfig;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ナビゲーションリストをレンダリング
+     */
+    private renderNavList;
+    /**
+     * ナビゲーションアイテムをレンダリング
+     */
+    private renderNavItem;
+    /**
+     * モバイル用ドロップダウンをレンダリング
+     */
+    private renderMobileDropdown;
+    /**
+     * Intersection Observerをセットアップ
+     */
+    private setupIntersectionObserver;
+    /**
+     * Intersection Observerのコールバック
+     */
+    private handleIntersection;
+    /**
+     * アクティブスタイルを更新
+     */
+    private updateActiveStyles;
+    static renderField(field: InputField): string;
+}