mokkun 0.1.5 → 0.1.6

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

@@ -0,0 +1,167 @@
+/**
+ * Pagination Component
+ * ページネーションコンポーネント
+ *
+ * 機能:
+ * - ページ番号表示
+ * - 前後ボタン
+ * - 最初/最後へのジャンプ
+ * - ページサイズ選択
+ * - 表示件数表示
+ * - コンパクト表示モード
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * ページネーションの状態
+ */
+export interface PaginationState {
+    /** 現在のページ（1始まり） */
+    currentPage: number;
+    /** 1ページあたりのアイテム数 */
+    pageSize: number;
+    /** 総アイテム数 */
+    totalItems: number;
+    /** 総ページ数 */
+    totalPages: number;
+}
+/**
+ * ページネーションのコールバック
+ */
+export interface PaginationCallbacks {
+    /** ページ変更時 */
+    onPageChange?: (page: number, state: PaginationState) => void;
+    /** ページサイズ変更時 */
+    onPageSizeChange?: (pageSize: number, state: PaginationState) => void;
+}
+/**
+ * ページネーションの設定
+ */
+export interface PaginationConfig {
+    /** 総アイテム数 */
+    totalItems: number;
+    /** 初期ページ（1始まり、デフォルト: 1） */
+    initialPage?: number;
+    /** 初期ページサイズ（デフォルト: 10） */
+    initialPageSize?: number;
+    /** ページサイズの選択肢（デフォルト: [10, 25, 50, 100]） */
+    pageSizeOptions?: number[];
+    /** ページサイズ選択を表示するか（デフォルト: true） */
+    showPageSizeSelector?: boolean;
+    /** 表示件数を表示するか（デフォルト: true） */
+    showItemCount?: boolean;
+    /** 最初/最後へのジャンプボタンを表示するか（デフォルト: true） */
+    showJumpButtons?: boolean;
+    /** ページ番号ボタンの最大表示数（デフォルト: 7） */
+    maxPageButtons?: number;
+    /** コンパクトモード（デフォルト: false） */
+    compact?: boolean;
+    /** 位置（デフォルト: 'center'） */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * ページネーションコンポーネント
+ */
+export declare class Pagination {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(container: HTMLElement, config: PaginationConfig, callbacks?: PaginationCallbacks);
+    /**
+     * ページネーションをレンダリング
+     */
+    render(): void;
+    /**
+     * 指定したページへ移動
+     */
+    goToPage(page: number): void;
+    /**
+     * 次のページへ移動
+     */
+    nextPage(): void;
+    /**
+     * 前のページへ移動
+     */
+    previousPage(): void;
+    /**
+     * 最初のページへ移動
+     */
+    firstPage(): void;
+    /**
+     * 最後のページへ移動
+     */
+    lastPage(): void;
+    /**
+     * ページサイズを設定
+     */
+    setPageSize(pageSize: number): void;
+    /**
+     * 総アイテム数を更新
+     */
+    setTotalItems(totalItems: number): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): PaginationState;
+    /**
+     * 現在のページを取得
+     */
+    getCurrentPage(): number;
+    /**
+     * ページサイズを取得
+     */
+    getPageSize(): number;
+    /**
+     * 表示中のアイテム範囲を取得
+     */
+    getItemRange(): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ページ番号を有効範囲内にクランプ
+     */
+    private clampPage;
+    /**
+     * ページサイズセレクターをレンダリング
+     */
+    private renderPageSizeSelector;
+    /**
+     * ナビゲーションをレンダリング
+     */
+    private renderNavigation;
+    /**
+     * ページ番号ボタンをレンダリング
+     */
+    private renderPageButtons;
+    /**
+     * 表示するページ番号を計算
+     */
+    private calculateVisiblePages;
+    /**
+     * ボタンを作成
+     */
+    private createButton;
+    /**
+     * ページ番号ボタンを作成
+     */
+    private createPageButton;
+    /**
+     * 表示件数をレンダリング
+     */
+    private renderItemCount;
+    /**
+     * PaginationフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     */
+    static renderField(field: InputField): string;
+}
+/**
+ * Paginationを作成するファクトリ関数
+ */
+export declare function createPagination(container: HTMLElement, config: PaginationConfig, callbacks?: PaginationCallbacks): Pagination;

package/dist/types/renderer/components/photo-manager-renderer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Photo Manager Renderer
+ * 写真管理画面のHTML生成（静的レンダリング用）
+ */
+import type { PhotoManagerField } from '../../types/schema';
+/**
+ * 写真管理フィールドをHTML文字列としてレンダリング
+ */
+export declare function renderPhotoManagerField(field: PhotoManagerField): string;

package/dist/types/renderer/components/radio-button-panel.d.ts

@@ -0,0 +1,152 @@
+/**
+ * RadioButtonPanel Component
+ * ラジオボタンパネルコンポーネント
+ *
+ * Card-style radio button group component:
+ * - Visual panel/card appearance for each option
+ * - Icon and image support
+ * - Description text
+ * - Disabled state (group and per-option)
+ * - Selected state highlighting
+ * - Vertical/horizontal/grid layouts
+ * - Full ARIA 1.2 compliance with keyboard navigation
+ */
+/**
+ * ラジオボタンパネルのオプション
+ */
+export interface RadioButtonPanelOption {
+    /** 値 */
+    value: string;
+    /** ラベル */
+    label: string;
+    /** 説明テキスト */
+    description?: string;
+    /** アイコン（SVG文字列） */
+    icon?: string;
+    /** 画像URL */
+    image?: string;
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * ラジオボタンパネルの状態
+ */
+export interface RadioButtonPanelState {
+    /** 選択された値 */
+    selectedValue: string | null;
+    /** 無効化状態 */
+    disabled: boolean;
+    /** フォーカスされているオプションのインデックス */
+    focusedIndex: number;
+}
+/**
+ * ラジオボタンパネルのコールバック
+ */
+export interface RadioButtonPanelCallbacks {
+    /** 値変更時（値と状態を受け取る） */
+    onChange?: (value: string, state: RadioButtonPanelState) => void;
+    /** 値変更時（値のみを受け取る） */
+    onValueChange?: (value: string) => void;
+}
+/**
+ * ラジオボタンパネルの設定
+ */
+export interface RadioButtonPanelConfig {
+    /** name属性（フォーム用、必須） */
+    name: string;
+    /** オプション配列 */
+    options: RadioButtonPanelOption[];
+    /** 初期選択値 */
+    defaultValue?: string;
+    /** レイアウト方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** グリッドカラム数（horizontal時のみ） */
+    columns?: 1 | 2 | 3 | 4;
+    /** サイズ */
+    size?: 'small' | 'medium' | 'large';
+    /** 無効化（グループ全体） */
+    disabled?: boolean;
+    /** 必須 */
+    required?: boolean;
+    /** 幅 */
+    width?: string | number;
+}
+/**
+ * ラジオボタンパネルコンポーネント
+ */
+export declare class RadioButtonPanel {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private optionElements;
+    constructor(container: HTMLElement, config: RadioButtonPanelConfig, callbacks?: RadioButtonPanelCallbacks);
+    /**
+     * ラジオボタンパネルをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(value: string | null): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): RadioButtonPanelState;
+    /**
+     * 現在の値を取得
+     */
+    getValue(): string | null;
+    /**
+     * 無効化されているかどうかを取得
+     */
+    isDisabled(): boolean;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * オプションをレンダリング
+     */
+    private renderOption;
+    /**
+     * メディア（アイコン/画像）をレンダリング
+     */
+    private renderMedia;
+    /**
+     * コンテンツ（ラベル + 説明）をレンダリング
+     */
+    private renderContent;
+    /**
+     * インジケーター（ラジオ円）をレンダリング
+     */
+    private renderIndicator;
+    /**
+     * オプションクリックを処理
+     */
+    private handleOptionClick;
+    /**
+     * キーボードナビゲーションを処理
+     */
+    private handleKeyboardNavigation;
+    /**
+     * 次のオプションにフォーカス
+     */
+    private focusNextOption;
+    /**
+     * 前のオプションにフォーカス
+     */
+    private focusPreviousOption;
+    /**
+     * 指定されたインデックスのオプションにフォーカス
+     */
+    private focusOption;
+}
+/**
+ * RadioButtonPanelを作成するファクトリ関数
+ */
+export declare function createRadioButtonPanel(container: HTMLElement, config: RadioButtonPanelConfig, callbacks?: RadioButtonPanelCallbacks): RadioButtonPanel;

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

@@ -0,0 +1,117 @@
+/**
+ * RadioButton Component
+ * ラジオボタンコンポーネント
+ *
+ *
+ * - `checked` / `defaultChecked` for state
+ * - `data-state="checked|unchecked"` for styling
+ * - `error` state with error messages
+ * - `role="radio"` with `aria-checked` for accessibility
+ */
+import type { RadioGroupField } from '../../types/schema';
+/**
+ * ラジオボタンの状態
+ */
+export interface RadioButtonState {
+    /** 選択状態 */
+    checked: boolean;
+    /** 無効化状態 */
+    disabled: boolean;
+}
+/**
+ * ラジオボタンのコールバック
+ */
+export interface RadioButtonCallbacks {
+    /** 状態変更時 */
+    onChange?: (checked: boolean, state: RadioButtonState) => void;
+    /** 選択状態変更時 */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * ラジオボタンの設定
+ */
+export interface RadioButtonConfig {
+    /** 初期選択状態 */
+    defaultChecked?: boolean;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 選択時ラベル */
+    checkedLabel?: string;
+    /** 非選択時ラベル */
+    uncheckedLabel?: string;
+    /** サイズ */
+    size?: 'small' | 'medium' | 'large';
+    /** name属性（グループ化用） */
+    name?: string;
+    /** value属性 */
+    value?: string;
+    /** ラベル位置 */
+    labelPosition?: 'left' | 'right';
+}
+/**
+ * ラジオボタンコンポーネント
+ */
+export declare class RadioButton {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(container: HTMLElement, config?: RadioButtonConfig, callbacks?: RadioButtonCallbacks);
+    /**
+     * ラジオボタンをレンダリング
+     */
+    render(): void;
+    /**
+     * 選択状態を設定
+     */
+    setChecked(checked: boolean): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): RadioButtonState;
+    /**
+     * 選択状態を取得
+     */
+    isChecked(): boolean;
+    /**
+     * 無効化されているかどうかを取得
+     */
+    isDisabled(): boolean;
+    /**
+     * value属性を取得
+     */
+    getValue(): string | undefined;
+    /**
+     * name属性を取得
+     */
+    getName(): string | undefined;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ラジオボタンをレンダリング
+     */
+    private renderRadio;
+    /**
+     * ラベルをレンダリング
+     */
+    private renderLabel;
+    /**
+     * ラジオグループフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - ラジオグループフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: RadioGroupField): string;
+}
+/**
+ * RadioButtonを作成するファクトリ関数
+ */
+export declare function createRadioButton(container: HTMLElement, config?: RadioButtonConfig, callbacks?: RadioButtonCallbacks): RadioButton;

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