mokkun 0.1.5 → 0.2.0

package/dist/types/renderer/components/dialog/action-dialog.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Action Dialog Component
+ * ユーザーアクション確認用ダイアログ
+ *
+ * 機能:
+ * - 確認/キャンセルボタン
+ * - デンジャーモード（危険なアクションの強調）
+ * - アイコン表示
+ * - サブアクションエリア
+ */
+import { BaseDialog } from './base-dialog';
+import type { ActionDialogConfig, ActionDialogCallbacks } from './dialog-types';
+/**
+ * アクションダイアログコンポーネント
+ * ユーザーに確認・キャンセルの選択を求めるダイアログ
+ */
+export declare class ActionDialog extends BaseDialog {
+    protected config: Required<Omit<ActionDialogConfig, 'customIcon' | 'message' | 'subActionContent'>> & Pick<ActionDialogConfig, 'customIcon' | 'message' | 'subActionContent'>;
+    protected callbacks: ActionDialogCallbacks;
+    constructor(config: ActionDialogConfig, callbacks?: ActionDialogCallbacks);
+    /**
+     * ダイアログのクラス名を取得
+     */
+    protected getDialogClassName(): string;
+    /**
+     * ARIA role を取得（アクション確認なので alertdialog）
+     */
+    protected getAriaRole(): string;
+    /**
+     * ダイアログのコンテンツをレンダリング
+     */
+    protected renderContent(): HTMLElement;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * アイコンをレンダリング
+     */
+    private renderIcon;
+    /**
+     * アイコンのSVGを取得
+     */
+    private getIconSVG;
+    /**
+     * ボディをレンダリング
+     */
+    private renderBody;
+    /**
+     * フッターをレンダリング
+     */
+    private renderFooter;
+    /**
+     * 確認ボタンクリック時
+     */
+    private handleConfirm;
+    /**
+     * キャンセルボタンクリック時
+     */
+    private handleCancel;
+}

package/dist/types/renderer/components/dialog/base-dialog.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Base Dialog Component
+ * すべてのダイアログバリアントの基盤となるクラス
+ *
+ * 機能:
+ * - オーバーレイ管理
+ * - フォーカストラップ
+ * - キーボードイベント処理（Escape, Tab）
+ * - ARIA属性管理
+ * - open/closeライフサイクル
+ * - bodyスクロール防止
+ * - フォーカス復元
+ */
+import type { BaseDialogConfig, BaseDialogCallbacks, BaseDialogState } from './dialog-types';
+/**
+ * ベースダイアログコンポーネント
+ * すべてのダイアログタイプの共通ロジックを提供
+ */
+export declare class BaseDialog {
+    protected config: BaseDialogConfig;
+    protected callbacks: BaseDialogCallbacks;
+    protected state: BaseDialogState;
+    protected dialogElement: HTMLElement | null;
+    protected overlayElement: HTMLElement | null;
+    protected readonly dialogId: string;
+    private boundKeydownHandler;
+    constructor(config?: BaseDialogConfig, callbacks?: BaseDialogCallbacks);
+    /**
+     * ダイアログを開く
+     */
+    open(): void;
+    /**
+     * ダイアログを閉じる
+     */
+    close(): void;
+    /**
+     * 設定を更新
+     */
+    updateConfig(config: Partial<BaseDialogConfig>): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): BaseDialogState;
+    /**
+     * ダイアログ要素を取得（テスト用）
+     */
+    getDialogElement(): HTMLElement | null;
+    /**
+     * オーバーレイ要素を取得（テスト用）
+     */
+    getOverlayElement(): HTMLElement | null;
+    /**
+     * ダイアログをレンダリング
+     * 継承クラスでオーバーライドして独自のコンテンツを追加
+     */
+    protected render(): void;
+    /**
+     * ダイアログのコンテンツをレンダリング
+     * 継承クラスで必ずオーバーライドすること
+     */
+    protected renderContent(): HTMLElement | null;
+    /**
+     * ダイアログのクラス名を取得
+     * 継承クラスでオーバーライドしてタイプ固有のクラスを追加
+     */
+    protected getDialogClassName(): string;
+    /**
+     * ダイアログのARIA role を取得
+     * 継承クラスでオーバーライド可能（例: ActionDialog → alertdialog）
+     */
+    protected getAriaRole(): string;
+    /**
+     * 初期フォーカス要素を取得
+     * 継承クラスでオーバーライドして特定の要素を返すことができる
+     */
+    protected getFirstFocusElement(): HTMLElement | null;
+    /**
+     * オーバーレイを作成
+     */
+    private createOverlay;
+    /**
+     * ダイアログコンテナを作成
+     */
+    private createDialogContainer;
+    /**
+     * イベントリスナーを設定
+     */
+    private setupEventListeners;
+    /**
+     * イベントリスナーを削除
+     */
+    private removeEventListeners;
+    /**
+     * キーボードイベントハンドラ
+     */
+    private handleKeydown;
+    /**
+     * Escapeキー処理
+     */
+    private handleEscapeKey;
+    /**
+     * オーバーレイクリック処理
+     */
+    private handleOverlayClick;
+    /**
+     * Tab キーの処理（フォーカストラップ）
+     */
+    private handleTabKey;
+    /**
+     * フォーカス可能な要素を取得
+     */
+    private getFocusableElements;
+    /**
+     * フォーカスをダイアログ内に設定
+     */
+    private trapFocus;
+    /**
+     * ダイアログ要素を破棄
+     */
+    private destroy;
+    /**
+     * HTML特殊文字をエスケープ
+     */
+    protected escapeHtml(text: string): string;
+}

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

@@ -0,0 +1,96 @@
+/**
+ * Dialog Types
+ * ダイアログシステムの共通型定義
+ */
+export type DialogSize = 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | 'FULL';
+export interface BaseDialogConfig {
+    isOpen?: boolean;
+    size?: DialogSize;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    firstFocusTarget?: 'first' | 'confirm' | 'cancel';
+    onClickOverlay?: () => void | boolean;
+    onPressEscape?: () => void | boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    contentPadding?: 'normal' | 'compact' | 'none';
+    className?: string;
+}
+export interface BaseDialogCallbacks {
+    onOpen?: () => void;
+    onClose?: () => void;
+    onAfterClose?: () => void;
+}
+export interface BaseDialogState {
+    isOpen: boolean;
+    previouslyFocusedElement: Element | null;
+}
+export type DialogIcon = 'warning' | 'error' | 'info' | 'success' | 'custom';
+export interface ActionDialogConfig extends BaseDialogConfig {
+    title: string;
+    message?: string;
+    icon?: DialogIcon;
+    customIcon?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmDisabled?: boolean;
+    danger?: boolean;
+    showSubActionArea?: boolean;
+    subActionContent?: HTMLElement | string;
+}
+export interface ActionDialogCallbacks extends BaseDialogCallbacks {
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+}
+export interface MessageDialogConfig extends BaseDialogConfig {
+    title: string;
+    message: string;
+    icon?: Exclude<DialogIcon, 'custom'> | 'custom';
+    customIcon?: string;
+    closeLabel?: string;
+}
+export interface MessageDialogCallbacks extends BaseDialogCallbacks {
+    onAcknowledge?: () => void;
+}
+export interface ModelessDialogPosition {
+    top: number;
+    left: number;
+}
+export interface ModelessDialogConfig extends Omit<BaseDialogConfig, 'closeOnOverlayClick'> {
+    title: string;
+    position?: 'auto' | ModelessDialogPosition;
+    draggable?: boolean;
+    width?: number | string;
+    height?: number | string;
+}
+export interface ModelessDialogCallbacks extends BaseDialogCallbacks {
+    onMove?: (position: ModelessDialogPosition) => void;
+}
+export interface FormDialogConfig extends BaseDialogConfig {
+    title: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    preventCloseOnSubmit?: boolean;
+    warnOnUnsavedChanges?: boolean;
+}
+export interface FormDialogCallbacks extends BaseDialogCallbacks {
+    onSubmit?: (formData: FormData) => void | Promise<void>;
+    onCancel?: () => void;
+    onFormChange?: (isDirty: boolean) => void;
+}
+export interface DependencyInfo {
+    type: string;
+    label: string;
+    count: number;
+}
+export interface DeleteConfirmDialogConfig extends ActionDialogConfig {
+    targetName: string;
+    targetType?: string;
+    dependencies?: DependencyInfo[];
+    warningMessage?: string;
+}
+export interface DeleteConfirmDialogCallbacks extends ActionDialogCallbacks {
+}
+export interface DeleteConfirmDialogState extends BaseDialogState {
+}

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