mokkun 0.1.5 → 0.1.6

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

@@ -0,0 +1,118 @@
+/**
+ * Disclosure Component
+ * 開閉コンテンツコンポーネント
+ *
+ *
+ * https://smarthr.design/products/components/disclosure/
+ *
+ * 機能:
+ * - 開閉トリガー（クリック）
+ * - スムーズなアニメーション
+ * - アイコン回転
+ * - デフォルト展開状態
+ * - キーボード操作対応
+ * - アクセシビリティ対応（ARIA属性）
+ *
+ * 用途:
+ * - 「もっと見る」機能
+ * - 補足情報の表示切り替え
+ * - AccordionPanelより軽量な単独使用
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * Disclosureの状態
+ */
+export interface DisclosureState {
+    /** 展開中かどうか */
+    isOpen: boolean;
+}
+/**
+ * Disclosureのコールバック
+ */
+export interface DisclosureCallbacks {
+    /** 展開時 */
+    onOpen?: () => void;
+    /** 折りたたみ時 */
+    onClose?: () => void;
+    /** 開閉状態変更時 */
+    onChange?: (isOpen: boolean) => void;
+}
+/**
+ * Disclosureの設定
+ */
+export interface DisclosureConfig {
+    /** トリガーのラベル（閉じているとき） */
+    triggerLabel: string;
+    /** トリガーのラベル（開いているとき、オプション） */
+    triggerLabelOpen?: string;
+    /** コンテンツ（HTML文字列またはHTMLElement） */
+    content: string | HTMLElement;
+    /** デフォルトで展開（デフォルト: false） */
+    defaultOpen?: boolean;
+    /** ID属性 */
+    id?: string;
+    /** カスタムCSSクラス */
+    className?: string;
+    /** 閉じた状態でもDOMに存在させるか（デフォルト: false） */
+    visuallyHidden?: boolean;
+}
+/**
+ * Disclosureコンポーネント
+ */
+export declare class Disclosure {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private triggerElement;
+    private contentWrapper;
+    private contentElement;
+    constructor(container: HTMLElement, config: DisclosureConfig, callbacks?: DisclosureCallbacks);
+    /**
+     * Disclosureをレンダリング
+     */
+    render(): void;
+    /**
+     * 展開する
+     */
+    open(): void;
+    /**
+     * 折りたたむ
+     */
+    close(): void;
+    /**
+     * 開閉を切り替え
+     */
+    toggle(): void;
+    /**
+     * 展開状態を確認
+     */
+    isOpen(): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): DisclosureState;
+    /**
+     * コンテンツを更新
+     */
+    setContent(content: string | HTMLElement): void;
+    /**
+     * トリガーラベルを更新
+     */
+    setTriggerLabel(label: string, labelOpen?: string): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    private renderTrigger;
+    private renderIcon;
+    private renderContent;
+    private updateUI;
+    private getCurrentLabel;
+    static renderField(field: InputField): string;
+}
+/**
+ * Disclosureを作成
+ */
+export declare function createDisclosure(container: HTMLElement, config: DisclosureConfig, callbacks?: DisclosureCallbacks): Disclosure;

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

@@ -0,0 +1,220 @@
+/**
+ * Dropdown Component
+ * ドロップダウンコンポーネント
+ *
+ * 3つのバリアント:
+ * - MenuButton: アクションメニュー
+ * - FilterDropdown: フィルター操作
+ * - SortDropdown: 並び替え操作
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * ドロップダウンメニュー項目の基本型
+ */
+interface BaseMenuItem {
+    /** 項目ID */
+    id: string;
+    /** 項目ラベル */
+    label: string;
+    /** アイコン（オプション） */
+    icon?: string;
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * アクションメニュー項目
+ */
+export interface ActionMenuItem extends BaseMenuItem {
+    type: 'action';
+    /** クリック時のハンドラー */
+    onAction?: (id: string) => void;
+}
+/**
+ * 区切り線
+ */
+export interface DividerMenuItem {
+    type: 'divider';
+    /** 一意なID（必須） */
+    id: string;
+}
+/**
+ * フィルター項目
+ */
+export interface FilterMenuItem extends BaseMenuItem {
+    type: 'filter';
+    /** フィルター値 */
+    value: string;
+    /** 選択状態 */
+    selected?: boolean;
+}
+/**
+ * ソート項目
+ */
+export interface SortMenuItem extends BaseMenuItem {
+    type: 'sort';
+    /** ソートフィールド */
+    field: string;
+    /** ソート方向 */
+    direction?: 'asc' | 'desc';
+}
+/**
+ * 全てのメニュー項目のユニオン型
+ */
+export type MenuItem = ActionMenuItem | DividerMenuItem | FilterMenuItem | SortMenuItem;
+/**
+ * ドロップダウンのバリアント
+ */
+export type DropdownVariant = 'menu' | 'filter' | 'sort';
+/**
+ * ドロップダウンの配置
+ */
+export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+/**
+ * ドロップダウンの状態
+ */
+export interface DropdownState {
+    /** 開閉状態 */
+    isOpen: boolean;
+    /** メニュー項目 */
+    items: MenuItem[];
+    /** 選択されたフィルター（FilterDropdown用） */
+    selectedFilters?: string[];
+    /** 現在のソート（SortDropdown用） */
+    currentSort?: {
+        field: string;
+        direction: 'asc' | 'desc';
+    };
+    /** フォーカスされている項目のインデックス */
+    focusedIndex: number;
+}
+/**
+ * ドロップダウンのコールバック
+ */
+export interface DropdownCallbacks {
+    /** 開閉状態変更時 */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** メニュー項目選択時 */
+    onSelect?: (item: MenuItem) => void;
+    /** フィルター適用時（FilterDropdown用） */
+    onApply?: (selectedFilters: string[]) => void;
+    /** フィルタークリア時（FilterDropdown用） */
+    onReset?: () => void;
+    /** ソート変更時（SortDropdown用） */
+    onSortChange?: (field: string, direction: 'asc' | 'desc') => void;
+}
+/**
+ * ドロップダウンの設定
+ */
+export interface DropdownConfig {
+    /** バリアント */
+    variant?: DropdownVariant;
+    /** トリガーボタンのラベル */
+    triggerLabel: string;
+    /** トリガーボタンのアイコン */
+    triggerIcon?: string;
+    /** メニュー項目 */
+    items: MenuItem[];
+    /** 配置 */
+    placement?: DropdownPlacement;
+    /** トリガーサイズ */
+    triggerSize?: 's' | 'default';
+    /** アイコンのみのトリガー */
+    onlyIconTrigger?: boolean;
+    /** 初期開閉状態 */
+    defaultOpen?: boolean;
+    /** フィルター状態（FilterDropdown用） */
+    isFiltered?: boolean;
+    /** モーダル表示（モバイル用、将来実装） */
+    useModal?: boolean;
+}
+/**
+ * ドロップダウンコンポーネント
+ */
+export declare class Dropdown {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private triggerElement;
+    private contentElement;
+    private clickOutsideHandler;
+    private keyboardHandler;
+    constructor(container: HTMLElement, config: DropdownConfig, callbacks?: DropdownCallbacks);
+    /**
+     * ドロップダウンをレンダリング
+     */
+    render(): void;
+    /**
+     * 開閉状態を切り替え
+     */
+    toggle(): void;
+    /**
+     * 開く
+     */
+    open(): void;
+    /**
+     * 閉じる
+     */
+    close(): void;
+    /**
+     * 開閉状態を設定
+     */
+    setOpen(isOpen: boolean): void;
+    /**
+     * 状態を取得
+     */
+    getState(): DropdownState;
+    /**
+     * メニュー項目を更新
+     */
+    setItems(items: MenuItem[]): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    private createInitialState;
+    private renderTrigger;
+    private renderContent;
+    private renderMenuContent;
+    private renderFilterContent;
+    private renderMenuItem;
+    private renderFilterItem;
+    private renderDivider;
+    private handleItemClick;
+    private handleFilterChange;
+    private handleFilterApply;
+    private handleFilterReset;
+    private handleClickOutside;
+    private handleKeyboard;
+    /**
+     * 初回オープン時のフォーカス設定（再レンダリングなし）
+     */
+    private initializeFocus;
+    private focusFirstItem;
+    private focusLastItem;
+    private focusNextItem;
+    private focusPreviousItem;
+    private setFocusedIndex;
+    private selectFocusedItem;
+    private attachEventListeners;
+    private detachEventListeners;
+    static renderField(field: InputField): string;
+}
+/**
+ * ドロップダウンを作成（ファクトリー関数）
+ */
+export declare function createDropdown(container: HTMLElement, config: DropdownConfig, callbacks?: DropdownCallbacks): Dropdown;
+/**
+ * メニューボタンを作成
+ */
+export declare function createMenuButton(container: HTMLElement, config: Omit<DropdownConfig, 'variant'>, callbacks?: DropdownCallbacks): Dropdown;
+/**
+ * フィルタードロップダウンを作成
+ */
+export declare function createFilterDropdown(container: HTMLElement, config: Omit<DropdownConfig, 'variant'>, callbacks?: DropdownCallbacks): Dropdown;
+/**
+ * ソートドロップダウンを作成
+ */
+export declare function createSortDropdown(container: HTMLElement, config: Omit<DropdownConfig, 'variant'>, callbacks?: DropdownCallbacks): Dropdown;
+export {};

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

@@ -0,0 +1,154 @@
+/**
+ * Duration Input Component
+ * 期間入力コンポーネント（数値入力 + 単位表示）
+ *
+ * 機能:
+ * - 数値入力による期間指定
+ * - 単位ラベル表示
+ * - バリデーション
+ * - アクセシビリティ対応
+ */
+import type { DurationInputField } from '../../types/schema';
+/**
+ * 表示単位
+ */
+export type DisplayUnit = 'hours' | 'minutes' | 'seconds';
+/**
+ * Duration Inputの状態
+ */
+export interface DurationInputState {
+    /** 現在の値（表示単位での数値） */
+    value: number;
+    /** 無効化状態 */
+    disabled: boolean;
+    /** 読み取り専用状態 */
+    readonly: boolean;
+    /** エラー状態 */
+    error: boolean;
+    /** エラーメッセージ */
+    errorMessage?: string;
+}
+/**
+ * Duration Inputのコールバック
+ */
+export interface DurationInputCallbacks {
+    /** 値変更時 */
+    onChange?: (value: number, state: DurationInputState) => void;
+    /** フォーカス時 */
+    onFocus?: (state: DurationInputState) => void;
+    /** ブラー時 */
+    onBlur?: (state: DurationInputState) => void;
+}
+/**
+ * Duration Inputの設定
+ */
+export interface DurationInputConfig {
+    /** 初期値 */
+    defaultValue?: number;
+    /** 表示単位 */
+    displayUnit?: DisplayUnit;
+    /** 最小値 */
+    min?: number;
+    /** 最大値 */
+    max?: number;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 読み取り専用 */
+    readonly?: boolean;
+    /** 必須 */
+    required?: boolean;
+    /** name属性 */
+    name?: string;
+    /** ID */
+    id?: string;
+    /** プレースホルダー */
+    placeholder?: string;
+}
+/**
+ * 期間入力コンポーネント
+ */
+export declare class DurationInput {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private inputElement;
+    constructor(container: HTMLElement, config?: DurationInputConfig, callbacks?: DurationInputCallbacks);
+    /**
+     * Duration Inputをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(value: number): void;
+    /**
+     * 値を取得
+     */
+    getValue(): number;
+    /**
+     * エラー状態を設定
+     */
+    setError(error: boolean, errorMessage?: string): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 読み取り専用状態を設定
+     */
+    setReadonly(readonly: boolean): void;
+    /**
+     * フォーカス
+     */
+    focus(): void;
+    /**
+     * ブラー
+     */
+    blur(): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): DurationInputState;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * 入力グループをレンダリング
+     */
+    private renderInputGroup;
+    /**
+     * 入力フィールドをレンダリング
+     */
+    private renderInput;
+    /**
+     * エラーメッセージをレンダリング
+     */
+    private renderError;
+    /**
+     * 入力イベント
+     */
+    private handleInput;
+    /**
+     * フォーカスイベント
+     */
+    private handleFocus;
+    /**
+     * ブラーイベント
+     */
+    private handleBlur;
+    /**
+     * Duration Inputフィールドを HTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - Duration Inputフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: DurationInputField): string;
+}
+/**
+ * Duration Inputを作成するファクトリ関数
+ */
+export declare function createDurationInput(container: HTMLElement, config?: DurationInputConfig, callbacks?: DurationInputCallbacks): DurationInput;

package/dist/types/renderer/components/duration-picker.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Duration Picker Component
+ * 期間選択コンポーネント（時間:分 等の選択UI）
+ *
+ * 機能:
+ * - 複数の時間単位（日/時間/分/秒）からの選択
+ * - 柔軟な単位設定
+ * - アクセシビリティ対応
+ */
+import type { DurationPickerField } from '../../types/schema';
+/**
+ * 時間単位
+ */
+export type DurationUnit = 'days' | 'hours' | 'minutes' | 'seconds';
+/**
+ * Duration Pickerの状態
+ */
+export interface DurationPickerState {
+    /** 各単位の値 */
+    values: Record<DurationUnit, number>;
+    /** 無効化状態 */
+    disabled: boolean;
+}
+/**
+ * Duration Pickerのコールバック
+ */
+export interface DurationPickerCallbacks {
+    /** 値変更時 */
+    onChange?: (values: Record<DurationUnit, number>, state: DurationPickerState) => void;
+}
+/**
+ * Duration Pickerの設定
+ */
+export interface DurationPickerConfig {
+    /** 使用する単位 */
+    units: DurationUnit[];
+    /** 初期値 */
+    defaultValues?: Partial<Record<DurationUnit, number>>;
+    /** 無効化 */
+    disabled?: boolean;
+    /** name属性プレフィックス */
+    name?: string;
+    /** ID */
+    id?: string;
+}
+/**
+ * 期間選択コンポーネント
+ */
+export declare class DurationPicker {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(container: HTMLElement, config: DurationPickerConfig, callbacks?: DurationPickerCallbacks);
+    /**
+     * Duration Pickerをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(unit: DurationUnit, value: number): void;
+    /**
+     * 全ての値を設定
+     */
+    setValues(values: Partial<Record<DurationUnit, number>>): void;
+    /**
+     * 値を取得
+     */
+    getValue(unit: DurationUnit): number;
+    /**
+     * 全ての値を取得
+     */
+    getValues(): Record<DurationUnit, number>;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): DurationPickerState;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * 単位セレクターをレンダリング
+     */
+    private renderUnitSelector;
+    /**
+     * 単位ごとの最大値を取得
+     */
+    private getMaxForUnit;
+    /**
+     * Duration Pickerフィールドを HTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - Duration Pickerフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: DurationPickerField): string;
+}
+/**
+ * Duration Pickerを作成するファクトリ関数
+ */
+export declare function createDurationPicker(container: HTMLElement, config: DurationPickerConfig, callbacks?: DurationPickerCallbacks): DurationPicker;

package/dist/types/renderer/components/field-renderer.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Field Renderer
+ * フィールドレンダリングユーティリティ
+ */
+import type { InputField } from '../../types';
+/**
+ * フィールドをレンダリングするオプション
+ */
+export interface RenderFieldOptions {
+    /** 値 */
+    value?: unknown;
+    /** 変更時コールバック */
+    onChange?: (fieldId: string, value: unknown) => void;
+    /** ネストレベル（リピーター用） */
+    nestLevel?: number;
+    /** アイテムID（リピーター内のフィールド用） */
+    itemId?: string;
+}
+/**
+ * フィールドをレンダリング
+ */
+export declare function renderField(field: InputField, container: HTMLElement, options?: RenderFieldOptions): void;