mokkun 0.1.5 → 0.2.0

package/dist/types/renderer/components/segmented-control.d.ts

@@ -0,0 +1,143 @@
+/**
+ * SegmentedControl Component
+ * セグメントコントロールコンポーネント
+ *
+ * Button group component for selecting one option from multiple choices:
+ * - Size variations (small/medium)
+ * - Icon support for options
+ * - Disabled state (group and per-option)
+ * - Full-width display
+ * - Full ARIA compliance with keyboard navigation
+ *
+ * Use cases:
+ * - View switching (list/grid)
+ * - Filter switching
+ * - Tab alternative
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * セグメントコントロールのオプション
+ */
+export interface SegmentedControlOption {
+    /** 値 */
+    value: string;
+    /** ラベル */
+    label: string;
+    /** アイコン（SVG文字列） */
+    icon?: string;
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * セグメントコントロールの状態
+ */
+export interface SegmentedControlState {
+    /** 選択された値 */
+    selectedValue: string;
+    /** 無効化状態 */
+    disabled: boolean;
+    /** フォーカスされているオプションのインデックス */
+    focusedIndex: number;
+}
+/**
+ * セグメントコントロールのコールバック
+ */
+export interface SegmentedControlCallbacks {
+    /** 値変更時（値と状態を受け取る） */
+    onChange?: (value: string, state: SegmentedControlState) => void;
+    /** 値変更時（値のみを受け取る） -  */
+    onClickOption?: (value: string) => void;
+}
+/**
+ * セグメントコントロールの設定
+ */
+export interface SegmentedControlConfig {
+    /** オプション配列（必須） */
+    options: SegmentedControlOption[];
+    /** 初期選択値 */
+    value?: string;
+    /** サイズ: 's' (small) または 'default' (medium) -  */
+    size?: 's' | 'default';
+    /** 無効化（グループ全体） */
+    disabled?: boolean;
+    /** フル幅表示 */
+    fullWidth?: boolean;
+    /** 幅（カスタム指定） */
+    width?: string | number;
+}
+/**
+ * セグメントコントロールコンポーネント
+ */
+export declare class SegmentedControl {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private optionElements;
+    constructor(container: HTMLElement, config: SegmentedControlConfig, callbacks?: SegmentedControlCallbacks);
+    /**
+     * セグメントコントロールをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(value: string): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): SegmentedControlState;
+    /**
+     * 現在の値を取得
+     */
+    getValue(): string;
+    /**
+     * 無効化されているかどうかを取得
+     */
+    isDisabled(): boolean;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * オプションをレンダリング
+     */
+    private renderOption;
+    /**
+     * オプションクリックを処理
+     */
+    private handleOptionClick;
+    /**
+     * キーボードナビゲーションを処理
+     */
+    private handleKeyboardNavigation;
+    /**
+     * 次のオプションにフォーカス
+     */
+    private focusNextOption;
+    /**
+     * 前のオプションにフォーカス
+     */
+    private focusPreviousOption;
+    /**
+     * 最初の有効なオプションにフォーカス
+     */
+    private focusFirstOption;
+    /**
+     * 最後の有効なオプションにフォーカス
+     */
+    private focusLastOption;
+    /**
+     * 指定されたインデックスのオプションにフォーカス
+     */
+    private focusOption;
+    static renderField(field: InputField): string;
+}
+/**
+ * SegmentedControlを作成するファクトリ関数
+ */
+export declare function createSegmentedControl(container: HTMLElement, config: SegmentedControlConfig, callbacks?: SegmentedControlCallbacks): SegmentedControl;

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

@@ -0,0 +1,98 @@
+/**
+ * Select Component
+ * セレクトコンポーネント
+ *
+ * Native <select> based component:
+ * - Size variants: 's' | 'default'
+ * - State variants: default, disabled, error
+ * - Support for optgroup (option grouping)
+ * - Placeholder and blank options
+ * - Full accessibility with ARIA attributes
+ */
+import type { SelectConfig, SelectState, SelectCallbacks, SelectField, MultiSelectField } from '../../types/schema';
+/**
+ * セレクトコンポーネント
+ */
+export declare class Select {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private selectElement;
+    constructor(container: HTMLElement, config: SelectConfig, callbacks?: SelectCallbacks);
+    /**
+     * セレクトをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(value: string | number | null): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * エラー状態を設定
+     */
+    setError(error: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): SelectState;
+    /**
+     * 現在の値を取得
+     */
+    getValue(): string | number | null;
+    /**
+     * 無効化されているかどうかを取得
+     */
+    isDisabled(): boolean;
+    /**
+     * エラー状態かどうかを取得
+     */
+    hasError(): boolean;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * セレクト要素をレンダリング
+     */
+    private renderSelect;
+    /**
+     * オプションを追加
+     */
+    private appendOptions;
+    /**
+     * オプションを作成
+     */
+    private createOption;
+    /**
+     * オプショングループを作成
+     */
+    private createOptgroup;
+    /**
+     * セレクトフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - セレクトフィールド定義（select, multi_select）
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: SelectField | MultiSelectField): string;
+    /**
+     * 単一セレクトフィールドをHTMLとしてレンダリング
+     * @internal renderFieldから呼び出される内部メソッド
+     */
+    private static renderSelectField;
+    /**
+     * マルチセレクトフィールドをHTMLとしてレンダリング
+     * @internal renderFieldから呼び出される内部メソッド
+     */
+    private static renderMultiSelectField;
+}
+/**
+ * Selectを作成するファクトリ関数
+ */
+export declare function createSelect(container: HTMLElement, config: SelectConfig, callbacks?: SelectCallbacks): Select;

package/dist/types/renderer/components/status-label.d.ts

@@ -0,0 +1,146 @@
+/**
+ * StatusLabel Component
+ * ステータスラベルコンポーネント
+ *
+ *
+ * - タイプ（grey/blue/green/yellow/red/warning/error）
+ * - 強調表示（bold）
+ * - サイズ（small/medium）
+ * - アイコン付き
+ * - `data-type` / `data-size` / `data-bold` for styling
+ * - `role="status"` with `aria-label` for accessibility
+ *
+ * @see https://smarthr.design/products/components/status-label/
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * ステータスラベルのタイプ
+ * - grey: 中立的な状態
+ * - blue: 情報・進行中
+ * - green: 成功・完了
+ * - yellow: 注意
+ * - red: エラー・緊急
+ * - warning: 警告（黄色背景）
+ * - error: エラー（赤背景）
+ */
+export type StatusLabelType = 'grey' | 'blue' | 'green' | 'yellow' | 'red' | 'warning' | 'error';
+/**
+ * ステータスラベルのサイズ
+ */
+export type StatusLabelSize = 'small' | 'medium';
+/**
+ * ビルトインアイコンタイプ
+ */
+export type StatusLabelIconType = 'check' | 'warning' | 'error' | 'info' | 'clock' | 'circle' | 'dot';
+/**
+ * ステータスラベルの状態
+ */
+export interface StatusLabelState {
+    /** 表示テキスト */
+    text: string;
+    /** 強調表示（背景と文字色を反転） */
+    bold: boolean;
+    /** 非表示状態 */
+    hidden: boolean;
+}
+/**
+ * ステータスラベルのコールバック
+ */
+export interface StatusLabelCallbacks {
+    /** クリック時 */
+    onClick?: (event: MouseEvent) => void;
+}
+/**
+ * ステータスラベルの設定
+ */
+export interface StatusLabelConfig {
+    /** ラベルテキスト */
+    text: string;
+    /** タイプ（カラー） */
+    type?: StatusLabelType;
+    /** サイズ */
+    size?: StatusLabelSize;
+    /** 強調表示 */
+    bold?: boolean;
+    /** アイコン（ビルトインタイプまたはカスタムSVG） */
+    icon?: StatusLabelIconType | string;
+    /** アイコンの位置 */
+    iconPosition?: 'left' | 'right';
+    /** ラベル（アクセシビリティ用） */
+    label?: string;
+    /** クリック可能か */
+    clickable?: boolean;
+}
+/**
+ * ステータスラベルコンポーネント
+ */
+export declare class StatusLabel {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private clickHandler;
+    constructor(container: HTMLElement, config: StatusLabelConfig, callbacks?: StatusLabelCallbacks);
+    /**
+     * ステータスラベルをレンダリング
+     */
+    render(): void;
+    /**
+     * テキストを設定
+     */
+    setText(text: string): void;
+    /**
+     * 強調表示を設定
+     */
+    setBold(bold: boolean): void;
+    /**
+     * 非表示状態を設定
+     */
+    setHidden(hidden: boolean): void;
+    /**
+     * 現在のテキストを取得
+     */
+    getText(): string;
+    /**
+     * 強調表示状態を取得
+     */
+    isBold(): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): Readonly<StatusLabelState>;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ラベル要素をレンダリング
+     */
+    private renderLabel;
+    /**
+     * アイコン要素をレンダリング
+     */
+    private renderIcon;
+    /**
+     * カスタムSVGアイコンをサニタイズ
+     * XSS攻撃を防ぐため、SVG要素のみを許可し、危険な属性を削除する
+     */
+    private sanitizeSvgIcon;
+    /**
+     * アクセシビリティ用のラベルを取得
+     */
+    private getAriaLabel;
+    /**
+     * クリックイベントハンドラー
+     */
+    private handleClick;
+    static renderField(field: InputField): string;
+}
+/**
+ * ステータスラベルを作成
+ */
+export declare function createStatusLabel(container: HTMLElement, config: StatusLabelConfig, callbacks?: StatusLabelCallbacks): StatusLabel;

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

@@ -0,0 +1,123 @@
+/**
+ * Stepper Component
+ *
+ *
+ * 連続する操作をステップごとにグルーピングするコンポーネント
+ * ステップの進行状況に応じて現在地や完了のステータスを表現
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * ステップのステータス
+ * - completed: 完了（チェックアイコン）
+ * - closed: 中断（×アイコン）
+ */
+export type StepperStatus = 'completed' | 'closed';
+/**
+ * 拡張ステータス（カスタムテキスト付き）
+ */
+export interface StepperStatusWithText {
+    type: StepperStatus;
+    text: string;
+}
+/**
+ * 基本ステップ定義
+ */
+export interface Step {
+    /** ステップのラベル */
+    label: string;
+    /** ステータス（オプション） */
+    status?: StepperStatus | StepperStatusWithText;
+}
+/**
+ * 水平ステップ（HorizontalStepper用）
+ */
+export type HorizontalStep = Step;
+/**
+ * 垂直ステップ（VerticalStepper用）- 子要素を持てる
+ */
+export interface VerticalStep extends Step {
+    /** 子要素のHTML */
+    children?: string;
+}
+/**
+ * Stepperの設定
+ */
+export interface StepperConfig {
+    /** レイアウトタイプ */
+    type: 'horizontal' | 'vertical';
+    /** ステップ配列 */
+    steps: HorizontalStep[] | VerticalStep[];
+    /** 現在のステップインデックス（0始まり） */
+    activeIndex?: number;
+}
+/**
+ * Stepperの状態
+ */
+export interface StepperState {
+    /** 現在のステップインデックス */
+    activeIndex: number;
+    /** レイアウトタイプ */
+    type: 'horizontal' | 'vertical';
+}
+/**
+ * Stepperのコールバック
+ */
+export interface StepperCallbacks {
+    /** ステップクリック時（過去のステップのみ） */
+    onStepClick?: (index: number) => void;
+}
+/**
+ * Stepperコンポーネント
+ *
+ */
+export declare class Stepper {
+    private config;
+    private container;
+    private state;
+    constructor(config: StepperConfig, container: HTMLElement, _callbacks?: StepperCallbacks);
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * 状態を取得
+     */
+    getState(): StepperState;
+    /**
+     * 現在のステップを設定
+     */
+    setActiveIndex(index: number): void;
+    /**
+     * レンダリング
+     */
+    render(): void;
+    /**
+     * 水平レイアウトをレンダリング
+     */
+    private renderHorizontal;
+    /**
+     * 水平ステップアイテムをレンダリング
+     */
+    private renderHorizontalStep;
+    /**
+     * 垂直レイアウトをレンダリング
+     */
+    private renderVertical;
+    /**
+     * 垂直ステップアイテムをレンダリング
+     */
+    private renderVerticalStep;
+    /**
+     * ステップカウンターをレンダリング
+     */
+    private renderStepCounter;
+    /**
+     * クリーンアップ
+     */
+    destroy(): void;
+    static renderField(field: InputField): string;
+}
+/**
+ * Stepperを作成するファクトリ関数
+ */
+export declare function createStepper(config: StepperConfig, container: HTMLElement, callbacks?: StepperCallbacks): Stepper;

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

@@ -0,0 +1,185 @@
+/**
+ * Tabs Component
+ * タブUIコンポーネント
+ */
+import type { InputField } from '../../types';
+/**
+ * 遅延読み込み関数の型
+ */
+export type LazyLoadFn = (tabId: string) => Promise<string>;
+/**
+ * タブ定義
+ */
+export interface TabDefinition {
+    /** タブID（英数字、ハイフン、アンダースコアのみ推奨） */
+    id: string;
+    /** タブラベル */
+    label: string;
+    /**
+     * タブアイコン（オプション）
+     * @security HTML文字列として設定されるため、信頼されたソースからのみ使用すること
+     */
+    icon?: string;
+    /** アイコンの代替テキスト（アクセシビリティ用） */
+    iconLabel?: string;
+    /** 無効化 */
+    disabled?: boolean;
+    /** バッジ（通知数等） */
+    badge?: string | number;
+    /** タブ内のフィールド */
+    fields?: InputField[];
+    /**
+     * タブ内のカスタムコンテンツ（HTML文字列）
+     * @security HTML文字列として設定されるため、信頼されたソースからのみ使用すること
+     */
+    content?: string;
+    /**
+     * 遅延読み込み関数
+     * @security 戻り値はHTML文字列として設定されるため、信頼されたソースからのみ使用すること
+     */
+    lazyLoad?: LazyLoadFn;
+}
+/**
+ * タブの状態
+ */
+export interface TabsState {
+    /** 現在のアクティブタブID */
+    activeTabId: string;
+    /** タブ一覧 */
+    tabs: TabDefinition[];
+}
+/**
+ * タブのコールバック
+ */
+export interface TabsCallbacks {
+    /** タブ変更時 */
+    onTabChange?: (tabId: string, state: TabsState) => void;
+    /** フィールドレンダラー */
+    renderFields?: (fields: InputField[], container: HTMLElement) => void;
+}
+/**
+ * タブの設定
+ */
+export interface TabsConfig {
+    /** タブ一覧 */
+    tabs: TabDefinition[];
+    /** 初期アクティブタブID */
+    defaultActiveTab?: string;
+    /** タブの配置 */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** タブのスタイル */
+    variant?: 'default' | 'pills' | 'underline' | 'bordered' | 'segmented';
+    /** ボーダー表示 */
+    bordered?: boolean;
+    /** スクロール有効化（タブが多い場合） */
+    scrollable?: boolean;
+    /** URLハッシュとの同期 */
+    syncWithHash?: boolean;
+    /** ハッシュのプレフィックス（例: "section-"） */
+    hashPrefix?: string;
+}
+/**
+ * タブコンポーネント
+ */
+export declare class Tabs {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private hashChangeHandler;
+    private lazyLoadCache;
+    private loadingTabs;
+    constructor(config: TabsConfig, container: HTMLElement, callbacks?: TabsCallbacks);
+    /**
+     * タブをレンダリング
+     */
+    render(): void;
+    /**
+     * タブを切り替え
+     */
+    setActiveTab(tabId: string): boolean;
+    /**
+     * 次のタブへ移動
+     */
+    nextTab(): boolean;
+    /**
+     * 前のタブへ移動
+     */
+    previousTab(): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): TabsState;
+    /**
+     * 現在のアクティブタブを取得
+     */
+    getActiveTab(): TabDefinition | undefined;
+    /**
+     * タブを追加
+     */
+    addTab(tab: TabDefinition, index?: number): void;
+    /**
+     * タブを削除
+     */
+    removeTab(tabId: string): boolean;
+    /**
+     * タブを更新
+     */
+    updateTab(tabId: string, updates: Partial<TabDefinition>): boolean;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * タブリストをレンダリング
+     */
+    private renderTabList;
+    /**
+     * タブボタンをレンダリング
+     */
+    private renderTabButton;
+    /**
+     * パネルをレンダリング
+     */
+    private renderPanels;
+    /**
+     * 個別パネルをレンダリング
+     */
+    private renderPanel;
+    /**
+     * キーボードイベントを処理
+     */
+    private handleKeyDown;
+    /**
+     * URLハッシュ同期をセットアップ
+     */
+    private setupHashSync;
+    /**
+     * ハッシュからタブIDを取得
+     */
+    private getTabIdFromHash;
+    /**
+     * URLハッシュを更新
+     */
+    private updateHash;
+    /**
+     * 遅延読み込みコンテンツを読み込む
+     */
+    private loadLazyContent;
+    /**
+     * クリーンアップ（イベントリスナーの削除）
+     */
+    destroy(): void;
+    /**
+     * タブコンテンツを強制再読み込み
+     */
+    refreshTabContent(tabId: string): Promise<void>;
+    static renderField(field: InputField): string;
+    private static renderDummy;
+}
+/**
+ * 静的出力（Tabs.renderField）のタブ切替を有効化する。クリックと矢印キーに対応。
+ * @returns クリーンアップ関数
+ */
+export declare function attachTabsBehavior(container: HTMLElement): () => void;