mokkun 0.1.5 → 0.2.0

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

@@ -0,0 +1,222 @@
+/**
+ * Input Component
+ * 汎用テキスト入力コンポーネント
+ *
+ * Features:
+ * - Prefix/Suffix support
+ * - Validation display
+ * - Size variants (small/medium/large)
+ * - Input types (text/email/password/number/tel/url)
+ * - Clear button
+ * - Error states
+ */
+import type { TextField, NumberField, DatePickerField, TimePickerField } from '../../types/schema';
+/**
+ * 入力の状態
+ */
+export interface InputState {
+    /** 現在の値 */
+    value: string;
+    /** 無効化状態 */
+    disabled: boolean;
+    /** 読み取り専用状態 */
+    readonly: boolean;
+    /** エラー状態 */
+    error: boolean;
+    /** エラーメッセージ */
+    errorMessage?: string;
+    /** フォーカス状態 */
+    focused: boolean;
+}
+/**
+ * 入力のコールバック
+ */
+export interface InputCallbacks {
+    /** 値変更時 */
+    onChange?: (value: string, state: InputState) => void;
+    /** フォーカス時 */
+    onFocus?: (state: InputState) => void;
+    /** ブラー時 */
+    onBlur?: (state: InputState) => void;
+    /** クリアボタン押下時 */
+    onClear?: (state: InputState) => void;
+    /** Enter キー押下時 */
+    onEnter?: (value: string, state: InputState) => void;
+}
+/**
+ * 入力の設定
+ */
+export interface InputConfig {
+    /** 初期値 */
+    defaultValue?: string;
+    /** プレースホルダー */
+    placeholder?: string;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 読み取り専用 */
+    readonly?: boolean;
+    /** 必須 */
+    required?: boolean;
+    /** サイズ */
+    size?: 'small' | 'medium' | 'large';
+    /** 入力タイプ */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    /** name属性（フォーム用） */
+    name?: string;
+    /** プレフィックス（アイコンやテキスト） */
+    prefix?: string | HTMLElement;
+    /** サフィックス（アイコンやテキスト） */
+    suffix?: string | HTMLElement;
+    /** クリアボタン表示 */
+    clearable?: boolean;
+    /** 自動フォーカス */
+    autoFocus?: boolean;
+    /** オートコンプリート */
+    autoComplete?: string;
+    /** エラーメッセージ（初期値） */
+    errorMessage?: string;
+    /** aria-label */
+    ariaLabel?: string;
+    /** aria-describedby */
+    ariaDescribedBy?: string;
+}
+/**
+ * 入力コンポーネント
+ */
+export declare class Input {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private inputElement;
+    constructor(container: HTMLElement, config?: InputConfig, callbacks?: InputCallbacks);
+    /**
+     * 入力フィールドをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(value: string): void;
+    /**
+     * 値を取得
+     */
+    getValue(): string;
+    /**
+     * エラー状態を設定
+     */
+    setError(error: boolean, errorMessage?: string): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 読み取り専用状態を設定
+     */
+    setReadonly(readonly: boolean): void;
+    /**
+     * フォーカス
+     */
+    focus(): void;
+    /**
+     * ブラー
+     */
+    blur(): void;
+    /**
+     * クリア
+     */
+    clear(): void;
+    /**
+     * 状態を取得
+     */
+    getState(): InputState;
+    /**
+     * 破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * data-state属性の値を取得
+     */
+    private getDataState;
+    /**
+     * 入力グループをレンダリング
+     */
+    private renderInputGroup;
+    /**
+     * 入力フィールドをレンダリング
+     */
+    private renderInput;
+    /**
+     * Prefix/Suffixをレンダリング
+     */
+    private renderAffix;
+    /**
+     * クリアボタンをレンダリング
+     */
+    private renderClearButton;
+    /**
+     * エラーメッセージをレンダリング
+     */
+    private renderError;
+    /**
+     * 入力イベント
+     */
+    private handleInput;
+    /**
+     * クリアボタンの表示/非表示を更新（フォーカスを失わないように部分更新）
+     */
+    private updateClearButton;
+    /**
+     * フォーカスイベント
+     */
+    private handleFocus;
+    /**
+     * ブラーイベント
+     */
+    private handleBlur;
+    /**
+     * キーダウンイベント
+     */
+    private handleKeyDown;
+    /**
+     * クリアイベント
+     */
+    private handleClear;
+    /**
+     * 入力フィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - 入力フィールド定義（text, number, date_picker, time_picker）
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: TextField | NumberField | DatePickerField | TimePickerField): string;
+    /**
+     * テキストフィールドをHTMLとしてレンダリング（静的メソッド）
+     * @internal renderFieldから呼び出される内部メソッド
+     */
+    private static renderTextField;
+    /**
+     * 数値フィールドをHTMLとしてレンダリング（静的メソッド）
+     * @internal renderFieldから呼び出される内部メソッド
+     */
+    private static renderNumberField;
+    /**
+     * 日付選択フィールドをHTMLとしてレンダリング（静的メソッド）
+     * @internal renderFieldから呼び出される内部メソッド
+     */
+    private static renderDatePickerField;
+    /**
+     * 時間選択フィールドをHTMLとしてレンダリング（静的メソッド）
+     * @internal renderFieldから呼び出される内部メソッド
+     */
+    private static renderTimePickerField;
+}
+/**
+ * 入力コンポーネントを作成
+ */
+export declare function createInput(container: HTMLElement, config?: InputConfig, callbacks?: InputCallbacks): Input;

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

@@ -0,0 +1,71 @@
+/**
+ * Layout Component Renderers
+ * レイアウト要素（display_fields, actions, filters）のHTML生成
+ */
+import type { Action, InputField } from '../../types/schema';
+/**
+ * 表示フィールド（読み取り専用の値表示）
+ */
+export interface DisplayField {
+    id: string;
+    label: string;
+    value?: string | number | boolean;
+    format?: 'text' | 'date' | 'number' | 'currency' | 'html';
+    class?: string;
+}
+/**
+ * 表示フィールドをレンダリング
+ */
+export declare function renderDisplayField(field: DisplayField): string;
+/**
+ * 複数の表示フィールドをレンダリング
+ */
+export declare function renderDisplayFields(fields: DisplayField[]): string;
+/**
+ * 単一アクション（ボタン）をレンダリング
+ */
+export declare function renderAction(action: Action): string;
+/**
+ * アクション群をレンダリング
+ */
+export declare function renderActions(actions: Action[]): string;
+/**
+ * フィルター項目（検索・絞り込みUI）
+ */
+export interface FilterConfig {
+    fields: InputField[];
+    submitLabel?: string;
+    resetLabel?: string;
+    layout?: 'inline' | 'stacked';
+}
+/**
+ * フィルターUIをレンダリング
+ */
+export declare function renderFilters(config: FilterConfig): string;
+/**
+ * セクション（見出し付きコンテンツブロック）
+ */
+export interface SectionConfig {
+    id?: string;
+    title?: string;
+    description?: string;
+    content: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+}
+/**
+ * セクションをレンダリング
+ */
+export declare function renderSection(config: SectionConfig): string;
+/**
+ * グリッドレイアウト設定
+ */
+export interface GridConfig {
+    columns?: number;
+    gap?: string;
+    items: string[];
+}
+/**
+ * グリッドレイアウトをレンダリング
+ */
+export declare function renderGrid(config: GridConfig): string;

package/dist/types/renderer/components/line-clamp.d.ts

@@ -0,0 +1,170 @@
+/**
+ * LineClamp Component
+ * 行数制限コンポーネント
+ *
+ * 機能:
+ * - 行数指定（1-6行）
+ * - 展開ボタン（「もっと見る」/「折りたたむ」）
+ * - ツールチップでの全文表示
+ * - 省略記号（...）表示
+ */
+import type { InputField } from '../../types/schema';
+import { type TooltipPosition } from './tooltip';
+/**
+ * 行数制限の値（1-6）
+ */
+export type MaxLines = 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * LineClampの状態
+ */
+export interface LineClampState {
+    /** テキスト内容 */
+    text: string;
+    /** 最大行数 */
+    maxLines: MaxLines;
+    /** 展開中かどうか */
+    expanded: boolean;
+    /** テキストが切り詰められているかどうか */
+    clamped: boolean;
+    /** 展開ボタンを表示するか */
+    showExpandButton: boolean;
+    /** ツールチップを表示するか */
+    showTooltip: boolean;
+    /** ツールチップの位置 */
+    tooltipPosition: TooltipPosition;
+}
+/**
+ * LineClampのコールバック
+ */
+export interface LineClampCallbacks {
+    /** 展開時 */
+    onExpand?: () => void;
+    /** 折りたたみ時 */
+    onCollapse?: () => void;
+    /** トグル時（展開/折りたたみ） */
+    onToggle?: (expanded: boolean) => void;
+}
+/**
+ * LineClampの設定
+ */
+export interface LineClampConfig {
+    /** テキスト内容 */
+    text: string;
+    /** 最大行数（1-6、デフォルト: 2） */
+    maxLines: MaxLines;
+    /** HTMLコンテンツとして解釈するか（デフォルト: false） */
+    isHtml?: boolean;
+    /** 展開ボタンを表示するか（デフォルト: false） */
+    showExpandButton?: boolean;
+    /** 展開ボタンのラベル（デフォルト: 「もっと見る」） */
+    expandButtonLabel?: string;
+    /** 折りたたみボタンのラベル（デフォルト: 「折りたたむ」） */
+    collapseButtonLabel?: string;
+    /** ツールチップで全文を表示するか（デフォルト: true） */
+    showTooltip?: boolean;
+    /** ツールチップの位置（デフォルト: top） */
+    tooltipPosition?: TooltipPosition;
+    /** ツールチップの遅延時間（ミリ秒、デフォルト: 300） */
+    tooltipDelay?: number;
+}
+/**
+ * 行数制限コンポーネント
+ */
+export declare class LineClamp {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private element;
+    private textElement;
+    private buttonContainer;
+    private expandButton;
+    private collapseButton;
+    private instanceId;
+    private tooltip;
+    private resizeObserver;
+    private resizeDebounceTimeout;
+    private handleExpand;
+    private handleCollapse;
+    constructor(config: LineClampConfig, container: HTMLElement, callbacks?: LineClampCallbacks);
+    /**
+     * テキストを展開
+     */
+    expand(): void;
+    /**
+     * テキストを折りたたむ
+     */
+    collapse(): void;
+    /**
+     * 展開/折りたたみをトグル
+     */
+    toggle(): void;
+    /**
+     * 展開中かどうかを取得
+     * @returns {boolean} 展開中の場合true
+     */
+    isExpanded(): boolean;
+    /**
+     * テキストを更新
+     */
+    setText(text: string): void;
+    /**
+     * 最大行数を更新
+     */
+    setMaxLines(maxLines: MaxLines): void;
+    /**
+     * 現在の状態を取得
+     * @returns {LineClampState} 現在の状態のコピー
+     */
+    getState(): LineClampState;
+    /**
+     * テスト用：切り詰め状態を強制的に設定
+     * @internal
+     */
+    setClampedForTesting(clamped: boolean): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * コンポーネントをレンダリング
+     */
+    private render;
+    /**
+     * テキスト内容を更新
+     */
+    private updateTextContent;
+    /**
+     * テキストスタイルを更新
+     */
+    private updateTextStyles;
+    /**
+     * 切り詰め状態を更新
+     */
+    private updateClampedState;
+    /**
+     * テキストが切り詰められているかチェック
+     */
+    private checkIfClamped;
+    /**
+     * ボタンのイベントリスナーをクリーンアップ
+     */
+    private cleanupButtonListeners;
+    /**
+     * 展開ボタンを更新
+     */
+    private updateExpandButton;
+    /**
+     * ツールチップを初期化
+     */
+    private initializeTooltip;
+    /**
+     * ResizeObserverをセットアップ
+     */
+    private setupResizeObserver;
+    static renderField(field: InputField): string;
+}
+/**
+ * LineClampを作成するファクトリ関数
+ */
+export declare function createLineClamp(config: LineClampConfig, container: HTMLElement, callbacks?: LineClampCallbacks): LineClamp;

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

@@ -0,0 +1,104 @@
+/**
+ * Loader Component
+ * ローディングインジケーターコンポーネント
+ *
+ * 機能:
+ * - サイズバリエーション (small/medium/large)
+ * - カラータイプ (primary/light)
+ * - インライン/オーバーレイ表示
+ * - プログレスバー対応
+ * - アクセシビリティ対応 (role="status", aria-busy, aria-live)
+ */
+import type { LoaderConfig, LoaderState, LoaderCallbacks, InputField } from '../../types/schema';
+export type { LoaderConfig, LoaderState, LoaderCallbacks } from '../../types/schema';
+/**
+ * Loaderコンポーネント
+ * 読み込み中を示すスピナー/プログレス表示
+ */
+export declare class Loader {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private loaderElement;
+    private overlayElement;
+    private spinnerElement;
+    private textElement;
+    private progressBarContainer;
+    private progressBarFill;
+    constructor(container: HTMLElement | null, config?: LoaderConfig, callbacks?: LoaderCallbacks);
+    /**
+     * ローダーを表示
+     */
+    show(): void;
+    /**
+     * ローダーを非表示
+     */
+    hide(): void;
+    /**
+     * プログレス値を更新 (0-100)
+     */
+    setProgress(value: number): void;
+    /**
+     * テキストを更新
+     */
+    setText(text: string): void;
+    /**
+     * 現在の状態を取得（イミュータブル）
+     */
+    getState(): Readonly<LoaderState>;
+    /**
+     * ローダーを破棄
+     */
+    destroy(): void;
+    /**
+     * ローダーをレンダリング
+     */
+    private render;
+    /**
+     * インライン表示
+     */
+    private renderInline;
+    /**
+     * オーバーレイ表示
+     */
+    private renderOverlay;
+    /**
+     * ローダー要素を作成
+     */
+    private createLoaderElement;
+    /**
+     * スピナー要素を作成
+     */
+    private createSpinner;
+    /**
+     * テキスト要素を作成
+     */
+    private createText;
+    /**
+     * プログレスバーを作成
+     */
+    private createProgressBar;
+    /**
+     * プログレスバーを更新
+     */
+    private updateProgressBar;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * クリーンアップ
+     */
+    private cleanup;
+    /**
+     * LoaderフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     */
+    static renderField(field: InputField): string;
+}
+/**
+ * Loaderを作成
+ */
+export declare function createLoader(container: HTMLElement | null, config?: LoaderConfig, callbacks?: LoaderCallbacks): Loader;