mokkun 0.1.5 → 0.2.0

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;

package/dist/types/renderer/components/float-area.d.ts

@@ -0,0 +1,196 @@
+/**
+ * FloatArea Component
+ * フローティング領域コンポーネント
+ *
+ *
+ * https://smarthr.design/products/components/float-area/
+ *
+ * 機能:
+ * - primaryButton / secondaryButton / tertiaryButton の3ボタン構成
+ * - responseMessage（処理結果メッセージ）のサポート
+ * - 画面下部への固定表示
+ * - デスクトップ/モバイル対応レイアウト
+ * - z-index管理
+ *
+ * 用途:
+ * - フォーム送信ボタンの固定表示
+ * - モーダルUIのアクション領域
+ * - 設定画面のアクションビュー
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * ボタン設定
+ */
+export interface FloatAreaButton {
+    /** ボタンのラベル */
+    label: string;
+    /** ボタンのタイプ */
+    variant?: 'primary' | 'secondary' | 'danger' | 'text';
+    /** 無効状態 */
+    disabled?: boolean;
+    /** クリック時のコールバック */
+    onClick?: () => void;
+}
+/**
+ * レスポンスメッセージの種類
+ */
+export type ResponseMessageType = 'success' | 'error' | 'warning' | 'info';
+/**
+ * レスポンスメッセージ設定
+ */
+export interface ResponseMessage {
+    /** メッセージ */
+    text: string;
+    /** メッセージの種類 */
+    type: ResponseMessageType;
+}
+/**
+ * フローティング領域の状態
+ */
+export interface FloatAreaState {
+    /** 表示中かどうか */
+    visible: boolean;
+    /** z-index */
+    zIndex: number;
+    /** レスポンスメッセージ */
+    responseMessage: ResponseMessage | null;
+}
+/**
+ * フローティング領域のコールバック
+ */
+export interface FloatAreaCallbacks {
+    /** プライマリボタンクリック時 */
+    onPrimaryClick?: () => void;
+    /** セカンダリボタンクリック時 */
+    onSecondaryClick?: () => void;
+    /** ターシャリボタンクリック時 */
+    onTertiaryClick?: () => void;
+    /** 表示時 */
+    onShow?: () => void;
+    /** 非表示時 */
+    onHide?: () => void;
+}
+/**
+ * フローティング領域の設定
+ */
+export interface FloatAreaConfig {
+    /** プライマリボタン（必須） */
+    primaryButton: FloatAreaButton;
+    /** セカンダリボタン */
+    secondaryButton?: FloatAreaButton;
+    /** ターシャリボタン（左端に配置） */
+    tertiaryButton?: FloatAreaButton;
+    /** レスポンスメッセージ */
+    responseMessage?: ResponseMessage;
+    /** z-index（デフォルト: 500） */
+    zIndex?: number;
+    /** 下部からの距離（デフォルト: 24px） */
+    bottom?: string;
+    /** 最大幅（デフォルト: 800px） */
+    maxWidth?: string;
+    /** アクセシビリティ用ラベル */
+    ariaLabel?: string;
+}
+/**
+ * フローティング領域コンポーネント
+ */
+export declare class FloatArea {
+    private config;
+    private state;
+    private callbacks;
+    private containerElement;
+    private floatAreaElement;
+    private instanceId;
+    constructor(containerElement: HTMLElement, config: FloatAreaConfig, callbacks?: FloatAreaCallbacks);
+    /**
+     * コンポーネントをレンダリング
+     */
+    render(): void;
+    /**
+     * フローティング領域を表示
+     */
+    show(): void;
+    /**
+     * フローティング領域を非表示
+     */
+    hide(): void;
+    /**
+     * 表示/非表示を切り替え
+     */
+    toggle(): void;
+    /**
+     * レスポンスメッセージを設定
+     */
+    setResponseMessage(message: ResponseMessage | null): void;
+    /**
+     * 成功メッセージを表示
+     */
+    showSuccess(text: string): void;
+    /**
+     * エラーメッセージを表示
+     */
+    showError(text: string): void;
+    /**
+     * メッセージをクリア
+     */
+    clearMessage(): void;
+    /**
+     * プライマリボタンを更新
+     */
+    updatePrimaryButton(button: Partial<FloatAreaButton>): void;
+    /**
+     * プライマリボタンの無効状態を設定
+     */
+    setPrimaryDisabled(disabled: boolean): void;
+    /**
+     * z-indexを設定
+     */
+    setZIndex(zIndex: number): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): FloatAreaState;
+    /**
+     * 表示中かどうかを取得
+     */
+    isVisible(): boolean;
+    /**
+     * フローティング領域要素を作成
+     */
+    private createFloatAreaElement;
+    /**
+     * ボタン要素を作成
+     */
+    private createButton;
+    /**
+     * レスポンスメッセージ要素を作成
+     */
+    private createResponseMessage;
+    /**
+     * メッセージタイプに応じたアイコンを取得
+     */
+    private getMessageIcon;
+    /**
+     * クラス名を構築
+     */
+    private buildClassName;
+    /**
+     * 表示状態を更新
+     */
+    private updateVisibility;
+    /**
+     * 要素を削除
+     */
+    private removeElement;
+    static renderField(field: InputField): string;
+}
+/**
+ * FloatAreaを作成するファクトリ関数
+ */
+export declare function createFloatArea(containerElement: HTMLElement, config: FloatAreaConfig, callbacks?: FloatAreaCallbacks): FloatArea;
+export type FloatAreaPosition = 'top' | 'bottom';
+export type FloatAreaAlignment = 'left' | 'center' | 'right' | 'space-between';

package/dist/types/renderer/components/form-fields.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Form Field Renderers (Facade)
+ * 各フォームフィールドタイプのHTML生成
+ *
+ * このモジュールはファサードとして機能し、実際のレンダリングロジックは
+ * 各コンポーネントの静的renderFieldメソッドに委譲されます。
+ */
+import type { InputField, TextField, NumberField, TextareaField, SelectField, MultiSelectField, ComboboxField, RadioGroupField, CheckboxGroupField, DatePickerField, TimePickerField, DurationPickerField, DurationInputField, FileUploadField, RepeaterField, GoogleMapEmbedField, ImageUploaderField, HeadingField } from '../../types/schema';
+/**
+ * text → <input type="text">
+ * @deprecated Use Input.renderField instead
+ */
+export declare function renderTextField(field: TextField): string;
+/**
+ * number → <input type="number">
+ * @deprecated Use Input.renderField instead
+ */
+export declare function renderNumberField(field: NumberField): string;
+/**
+ * textarea → <textarea>
+ * @deprecated Use Textarea.renderField instead
+ */
+export declare function renderTextareaField(field: TextareaField): string;
+/**
+ * select → <select>
+ * @deprecated Use Select.renderField instead
+ */
+export declare function renderSelectField(field: SelectField): string;
+/**
+ * multi_select → <select multiple>
+ * @deprecated Use Select.renderField instead
+ */
+export declare function renderMultiSelectField(field: MultiSelectField): string;
+/**
+ * combobox → Combobox component container
+ * @deprecated Use Combobox.renderField instead
+ */
+export declare function renderComboboxField(field: ComboboxField): string;
+/**
+ * radio_group → <input type="radio"> × N
+ * @deprecated Use RadioButton.renderField instead
+ */
+export declare function renderRadioGroupField(field: RadioGroupField): string;
+/**
+ * checkbox_group → <input type="checkbox"> × N
+ * @deprecated Use Checkbox.renderField instead
+ */
+export declare function renderCheckboxGroupField(field: CheckboxGroupField): string;
+/**
+ * date_picker → <input type="date">
+ * @deprecated Use Input.renderField instead
+ */
+export declare function renderDatePickerField(field: DatePickerField): string;
+/**
+ * time_picker → <input type="time">
+ * @deprecated Use Input.renderField instead
+ */
+export declare function renderTimePickerField(field: TimePickerField): string;
+/**
+ * duration_picker → カスタム（時間:分 選択UI）
+ * @deprecated Use DurationPicker.renderField instead
+ */
+export declare function renderDurationPickerField(field: DurationPickerField): string;
+/**
+ * duration_input → <input type="number"> + 単位
+ * @deprecated Use DurationInput.renderField instead
+ */
+export declare function renderDurationInputField(field: DurationInputField): string;
+/**
+ * heading → 見出しフィールド
+ * @deprecated Use Heading.renderField instead
+ */
+export declare function renderHeadingField(field: HeadingField): string;
+/**
+ * file_upload → <input type="file">
+ */
+export declare function renderFileUploadField(field: FileUploadField): string;
+/**
+ * google_map_embed → Google Maps 埋め込みコンポーネント
+ */
+export declare function renderGoogleMapEmbedFieldHtml(field: GoogleMapEmbedField): string;
+/**
+ * image_uploader → 画像アップローダーコンポーネント
+ */
+export declare function renderImageUploaderField(field: ImageUploaderField): string;
+export declare function renderRepeaterFieldStatic(field: RepeaterField): string;
+/**
+ * フィールドタイプに応じてレンダリング
+ */
+export declare function renderField(field: InputField): string;
+/**
+ * 複数のフィールドをレンダリング
+ */
+export declare function renderFields(fields: InputField[]): string;

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

@@ -0,0 +1,118 @@
+/**
+ * Form Section Component
+ * フォームセクションコンポーネント
+ * 統合フォーム内のセクションを構造化して表示する
+ */
+import type { FormSection as FormSectionSchema, InputFieldRaw } from '../../types/schema';
+/**
+ * フォームセクションの設定
+ */
+export interface FormSectionConfig {
+    /** セクション名 */
+    sectionName: string;
+    /** アイコン（HTML文字列またはアイコンクラス） */
+    icon?: string;
+    /** 公開設定トグルを表示 */
+    publishToggle?: boolean;
+    /** 初期の公開設定状態 */
+    publishToggleInitial?: boolean;
+    /** 折りたたみ可能 */
+    collapsible?: boolean;
+    /** 初期の折りたたみ状態 */
+    collapsed?: boolean;
+    /** 入力フィールド */
+    fields?: InputFieldRaw[];
+    /** カスタムコンテンツ（HTML文字列） */
+    content?: string;
+    /** セクションの説明 */
+    description?: string;
+}
+/**
+ * フォームセクションの状態
+ */
+export interface FormSectionState {
+    /** 公開設定状態 */
+    isPublished: boolean;
+    /** 折りたたみ状態 */
+    isCollapsed: boolean;
+    /** セクション名 */
+    sectionName: string;
+}
+/**
+ * フォームセクションのコールバック
+ */
+export interface FormSectionCallbacks {
+    /** 公開設定変更時 */
+    onPublishToggle?: (isPublished: boolean, state: FormSectionState) => void;
+    /** 折りたたみ状態変更時 */
+    onCollapseToggle?: (isCollapsed: boolean, state: FormSectionState) => void;
+    /** フィールドレンダラー */
+    renderFields?: (fields: InputFieldRaw[], container: HTMLElement) => void;
+}
+/**
+ * フォームセクションコンポーネント
+ */
+export declare class FormSection {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(config: FormSectionConfig, container: HTMLElement, callbacks?: FormSectionCallbacks);
+    /**
+     * セクションをレンダリング
+     */
+    render(): void;
+    /**
+     * 公開設定を切り替え
+     */
+    setPublished(isPublished: boolean): void;
+    /**
+     * 公開設定を取得
+     */
+    isPublished(): boolean;
+    /**
+     * 折りたたみ状態を切り替え
+     */
+    setCollapsed(isCollapsed: boolean): void;
+    /**
+     * 折りたたみ状態を取得
+     */
+    isCollapsed(): boolean;
+    /**
+     * 折りたたみをトグル
+     */
+    toggleCollapsed(): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): FormSectionState;
+    /**
+     * セクション名を取得
+     */
+    getSectionName(): string;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * コンテンツをレンダリング
+     */
+    private renderContent;
+}
+/**
+ * FormSectionSchemaからFormSectionConfigに変換
+ */
+export declare function createConfigFromSchema(schema: FormSectionSchema): FormSectionConfig;
+/**
+ * 複数のセクションをレンダリング
+ */
+export declare function renderFormSections(sections: FormSectionConfig[], container: HTMLElement, callbacks?: FormSectionCallbacks): FormSection[];
+/**
+ * セクション間の区切り線を追加
+ */
+export declare function renderFormSectionsWithDividers(sections: FormSectionConfig[], container: HTMLElement, callbacks?: FormSectionCallbacks): FormSection[];