@konomi-app/ui 5.2.1 → 5.4.0

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as lit from 'lit';
 import { LitElement, TemplateResult } from 'lit';
 
-type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps';
+type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps' | 'form' | 'step-form';
 type AlertIcon = 'success' | 'error' | 'warning' | 'info';
 type QueueItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
 type StepItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
@@ -19,6 +19,78 @@ type TaskItemInput = string | {
     key: string;
     label: string;
 };
+type FormInputType = 'text' | 'number' | 'checkbox' | 'select' | 'date' | 'email' | 'url';
+interface FormFieldMeta {
+    key: string;
+    inputType: FormInputType;
+    label: string;
+    description: string;
+    required: boolean;
+    options: string[];
+    placeholder: string;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    defaultValue: unknown;
+}
+interface FormFieldGroup {
+    label?: string;
+    fields: string[];
+    columns?: number;
+}
+interface FormLayout {
+    columns?: number;
+    gap?: string;
+    fieldOrder?: string[];
+    groups?: FormFieldGroup[];
+}
+interface FormOptions<T = Record<string, unknown>> {
+    title?: string;
+    description?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    layout?: FormLayout;
+    defaultValues?: Partial<T>;
+    validateOnChange?: boolean;
+    validateOnBlur?: boolean;
+}
+/** フォームを持つ1ステップの描画状態 (コントローラー内部で管理) */
+interface StepFormItem {
+    key: string;
+    label: string;
+    description: string;
+    fields: FormFieldMeta[];
+    values: Record<string, unknown>;
+    errors: Record<string, string>;
+    touched: Record<string, boolean>;
+    layout: FormLayout;
+}
+/** `showStepForm()` に渡す各ステップの定義 */
+interface StepFormStepInput {
+    key: string;
+    label: string;
+    description?: string;
+    /** Zod スキーマ。省略するとフォームなし (説明のみ) のステップになる */
+    schema?: {
+        _def: any;
+        safeParse: (data: unknown) => any;
+    };
+    layout?: FormLayout;
+    defaultValues?: Record<string, unknown>;
+}
+/** `showStepForm()` のオプション */
+interface StepFormOptions {
+    title?: string;
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    nextButtonText?: string;
+    prevButtonText?: string;
+    submitButtonText?: string;
+    cancelButtonText?: string;
+}
 interface ShowOptions {
     type: DialogType;
     label?: string;
@@ -71,14 +143,26 @@ interface DialogState {
     steps: StepItem[];
     timer: number | null;
     title: string;
+    formFields: FormFieldMeta[];
+    formValues: Record<string, unknown>;
+    formErrors: Record<string, string>;
+    formTouched: Record<string, boolean>;
+    formLayout: FormLayout;
+    formValidateOnChange: boolean;
+    formValidateOnBlur: boolean;
+    stepFormSteps: StepFormItem[];
+    stepFormCurrentIndex: number;
+    stepFormNextText: string;
+    stepFormPrevText: string;
+    stepFormSubmitText: string;
 }
 
-type Listener = (state: DialogState) => void;
+type Listener$1 = (state: DialogState) => void;
 declare class DialogController {
     #private;
     constructor();
     get state(): Readonly<DialogState>;
-    subscribe(fn: Listener): () => void;
+    subscribe(fn: Listener$1): () => void;
     show(options?: ShowOptions): void;
     hide(): void;
     alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
@@ -102,6 +186,18 @@ declare class DialogController {
     skipStep(key: string): void;
     failStep(key: string): void;
     clearSteps(): void;
+    form<TSchema extends {
+        _output: unknown;
+        safeParse: (data: unknown) => any;
+        _def: any;
+    }>(schema: TSchema, options?: FormOptions<TSchema['_output']>): Promise<TSchema['_output'] | null>;
+    updateFormField(key: string, value: unknown): void;
+    touchFormField(key: string): void;
+    showStepForm(steps: StepFormStepInput[], options?: StepFormOptions): Promise<Record<string, unknown> | null>;
+    onStepNext(): void;
+    onStepPrev(): void;
+    updateStepFormField(fieldKey: string, value: unknown): void;
+    touchStepFormField(fieldKey: string): void;
     onConfirm(): void;
     onCancel(): void;
     onOutsideClick(): void;
@@ -129,7 +225,17 @@ declare class OverlayDialog extends LitElement {
     private _renderQueueList;
     private _renderStepsHeader;
     private _renderStepsList;
+    private _createFormContext;
+    private _createStepFormContext;
+    private _getOrderedFields;
+    private _renderFormGrid;
+    private _renderGroupedForm;
+    private _renderForm;
+    private _renderFormField;
+    private _renderFormInput;
     private _renderButtons;
+    private _renderStepFormButtons;
+    private _deriveStepItems;
     private _renderBody;
     render(): TemplateResult;
 }
@@ -145,6 +251,16 @@ declare class DialogSingleton {
     hide(): void;
     alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
     confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
+    form<TSchema extends {
+        _output: unknown;
+        safeParse: (data: unknown) => any;
+        _def: any;
+    }>(schema: TSchema, options?: FormOptions<TSchema['_output']>): Promise<TSchema['_output'] | null>;
+    showStepForm(steps: StepFormStepInput[], options?: StepFormOptions): Promise<Record<string, unknown> | null>;
+    onStepNext(): void;
+    onStepPrev(): void;
+    updateStepFormField(fieldKey: string, value: unknown): void;
+    touchStepFormField(fieldKey: string): void;
     showLoading(label?: string): void;
     setProgress(percent: number): void;
     setLabel(label: string): void;
@@ -168,4 +284,108 @@ declare class DialogSingleton {
 }
 declare const dialog: DialogSingleton;
 
-export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepItem, type StepItemStatus, type TaskItemInput, dialog };
+type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
+type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastItem {
+    /** show() が返す一意な ID。dismiss(id) で使用 */
+    id: string;
+    /** アイコン・色を決定するビジュアルタイプ */
+    type: ToastType;
+    /** 主メッセージ */
+    message: string;
+    /** 補足説明 (省略可) */
+    description: string;
+    /** アクションボタン (省略可) */
+    action: ToastAction | null;
+    /** 自動非表示までの時間 (ms)。0 = 自動非表示なし */
+    duration: number;
+    /** 残り時間 (ms)。pause/resume で更新される */
+    remainingMs: number;
+    /** hover などで一時停止中かどうか */
+    paused: boolean;
+    /** 退出アニメーション再生中かどうか */
+    dismissing: boolean;
+}
+interface ToastOptions {
+    type?: ToastType;
+    message: string;
+    description?: string;
+    action?: ToastAction;
+    /** 表示時間 (ms)。省略時は defaultDuration。0 = 永続表示 */
+    duration?: number;
+}
+interface ToastConfig {
+    position: ToastPosition;
+    maxVisible: number;
+    defaultDuration: number;
+}
+interface ToastState {
+    items: ToastItem[];
+    position: ToastPosition;
+    maxVisible: number;
+    defaultDuration: number;
+}
+
+type Listener = (state: ToastState) => void;
+declare class ToastController {
+    #private;
+    constructor();
+    get state(): Readonly<ToastState>;
+    subscribe(fn: Listener): () => void;
+    configure(config: Partial<ToastConfig>): void;
+    show(options: ToastOptions): string;
+    success(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    error(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    warning(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    info(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    loading(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    dismiss(id: string): void;
+    dismissAll(): void;
+    update(id: string, patch: Partial<Pick<ToastItem, 'message' | 'description' | 'type' | 'action'>> & {
+        /** duration を変更する場合に指定。loading→非loading 遷移時は省略で defaultDuration を自動適用 */
+        duration?: number;
+    }): void;
+    pauseTimer(id: string): void;
+    resumeTimer(id: string): void;
+}
+
+declare class ToastContainer extends LitElement {
+    static styles: lit.CSSResult;
+    controller: ToastController;
+    private _state;
+    private _unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _renderIcon;
+    private _renderToast;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'toast-container': ToastContainer;
+    }
+}
+
+declare class ToastSingleton {
+    #private;
+    configure(config: Partial<ToastConfig>): void;
+    show(options: ToastOptions): string;
+    success(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    error(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    warning(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    info(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    loading(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    dismiss(id: string): void;
+    dismissAll(): void;
+    update(id: string, patch: Partial<Pick<ToastItem, 'message' | 'description' | 'type' | 'action'>> & {
+        duration?: number;
+    }): void;
+    get controller(): ToastController;
+}
+declare const toast: ToastSingleton;
+
+export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, type FormFieldGroup, type FormFieldMeta, type FormInputType, type FormLayout, type FormOptions, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepFormItem, type StepFormOptions, type StepFormStepInput, type StepItem, type StepItemStatus, type TaskItemInput, type ToastAction, type ToastConfig, ToastContainer, ToastController, type ToastItem, type ToastOptions, type ToastPosition, type ToastState, type ToastType, dialog, toast };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as lit from 'lit';
 import { LitElement, TemplateResult } from 'lit';
 
-type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps';
+type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps' | 'form' | 'step-form';
 type AlertIcon = 'success' | 'error' | 'warning' | 'info';
 type QueueItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
 type StepItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
@@ -19,6 +19,78 @@ type TaskItemInput = string | {
     key: string;
     label: string;
 };
+type FormInputType = 'text' | 'number' | 'checkbox' | 'select' | 'date' | 'email' | 'url';
+interface FormFieldMeta {
+    key: string;
+    inputType: FormInputType;
+    label: string;
+    description: string;
+    required: boolean;
+    options: string[];
+    placeholder: string;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+    defaultValue: unknown;
+}
+interface FormFieldGroup {
+    label?: string;
+    fields: string[];
+    columns?: number;
+}
+interface FormLayout {
+    columns?: number;
+    gap?: string;
+    fieldOrder?: string[];
+    groups?: FormFieldGroup[];
+}
+interface FormOptions<T = Record<string, unknown>> {
+    title?: string;
+    description?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    layout?: FormLayout;
+    defaultValues?: Partial<T>;
+    validateOnChange?: boolean;
+    validateOnBlur?: boolean;
+}
+/** フォームを持つ1ステップの描画状態 (コントローラー内部で管理) */
+interface StepFormItem {
+    key: string;
+    label: string;
+    description: string;
+    fields: FormFieldMeta[];
+    values: Record<string, unknown>;
+    errors: Record<string, string>;
+    touched: Record<string, boolean>;
+    layout: FormLayout;
+}
+/** `showStepForm()` に渡す各ステップの定義 */
+interface StepFormStepInput {
+    key: string;
+    label: string;
+    description?: string;
+    /** Zod スキーマ。省略するとフォームなし (説明のみ) のステップになる */
+    schema?: {
+        _def: any;
+        safeParse: (data: unknown) => any;
+    };
+    layout?: FormLayout;
+    defaultValues?: Record<string, unknown>;
+}
+/** `showStepForm()` のオプション */
+interface StepFormOptions {
+    title?: string;
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    nextButtonText?: string;
+    prevButtonText?: string;
+    submitButtonText?: string;
+    cancelButtonText?: string;
+}
 interface ShowOptions {
     type: DialogType;
     label?: string;
@@ -71,14 +143,26 @@ interface DialogState {
     steps: StepItem[];
     timer: number | null;
     title: string;
+    formFields: FormFieldMeta[];
+    formValues: Record<string, unknown>;
+    formErrors: Record<string, string>;
+    formTouched: Record<string, boolean>;
+    formLayout: FormLayout;
+    formValidateOnChange: boolean;
+    formValidateOnBlur: boolean;
+    stepFormSteps: StepFormItem[];
+    stepFormCurrentIndex: number;
+    stepFormNextText: string;
+    stepFormPrevText: string;
+    stepFormSubmitText: string;
 }
 
-type Listener = (state: DialogState) => void;
+type Listener$1 = (state: DialogState) => void;
 declare class DialogController {
     #private;
     constructor();
     get state(): Readonly<DialogState>;
-    subscribe(fn: Listener): () => void;
+    subscribe(fn: Listener$1): () => void;
     show(options?: ShowOptions): void;
     hide(): void;
     alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
@@ -102,6 +186,18 @@ declare class DialogController {
     skipStep(key: string): void;
     failStep(key: string): void;
     clearSteps(): void;
+    form<TSchema extends {
+        _output: unknown;
+        safeParse: (data: unknown) => any;
+        _def: any;
+    }>(schema: TSchema, options?: FormOptions<TSchema['_output']>): Promise<TSchema['_output'] | null>;
+    updateFormField(key: string, value: unknown): void;
+    touchFormField(key: string): void;
+    showStepForm(steps: StepFormStepInput[], options?: StepFormOptions): Promise<Record<string, unknown> | null>;
+    onStepNext(): void;
+    onStepPrev(): void;
+    updateStepFormField(fieldKey: string, value: unknown): void;
+    touchStepFormField(fieldKey: string): void;
     onConfirm(): void;
     onCancel(): void;
     onOutsideClick(): void;
@@ -129,7 +225,17 @@ declare class OverlayDialog extends LitElement {
     private _renderQueueList;
     private _renderStepsHeader;
     private _renderStepsList;
+    private _createFormContext;
+    private _createStepFormContext;
+    private _getOrderedFields;
+    private _renderFormGrid;
+    private _renderGroupedForm;
+    private _renderForm;
+    private _renderFormField;
+    private _renderFormInput;
     private _renderButtons;
+    private _renderStepFormButtons;
+    private _deriveStepItems;
     private _renderBody;
     render(): TemplateResult;
 }
@@ -145,6 +251,16 @@ declare class DialogSingleton {
     hide(): void;
     alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
     confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
+    form<TSchema extends {
+        _output: unknown;
+        safeParse: (data: unknown) => any;
+        _def: any;
+    }>(schema: TSchema, options?: FormOptions<TSchema['_output']>): Promise<TSchema['_output'] | null>;
+    showStepForm(steps: StepFormStepInput[], options?: StepFormOptions): Promise<Record<string, unknown> | null>;
+    onStepNext(): void;
+    onStepPrev(): void;
+    updateStepFormField(fieldKey: string, value: unknown): void;
+    touchStepFormField(fieldKey: string): void;
     showLoading(label?: string): void;
     setProgress(percent: number): void;
     setLabel(label: string): void;
@@ -168,4 +284,108 @@ declare class DialogSingleton {
 }
 declare const dialog: DialogSingleton;
 
-export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepItem, type StepItemStatus, type TaskItemInput, dialog };
+type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
+type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastItem {
+    /** show() が返す一意な ID。dismiss(id) で使用 */
+    id: string;
+    /** アイコン・色を決定するビジュアルタイプ */
+    type: ToastType;
+    /** 主メッセージ */
+    message: string;
+    /** 補足説明 (省略可) */
+    description: string;
+    /** アクションボタン (省略可) */
+    action: ToastAction | null;
+    /** 自動非表示までの時間 (ms)。0 = 自動非表示なし */
+    duration: number;
+    /** 残り時間 (ms)。pause/resume で更新される */
+    remainingMs: number;
+    /** hover などで一時停止中かどうか */
+    paused: boolean;
+    /** 退出アニメーション再生中かどうか */
+    dismissing: boolean;
+}
+interface ToastOptions {
+    type?: ToastType;
+    message: string;
+    description?: string;
+    action?: ToastAction;
+    /** 表示時間 (ms)。省略時は defaultDuration。0 = 永続表示 */
+    duration?: number;
+}
+interface ToastConfig {
+    position: ToastPosition;
+    maxVisible: number;
+    defaultDuration: number;
+}
+interface ToastState {
+    items: ToastItem[];
+    position: ToastPosition;
+    maxVisible: number;
+    defaultDuration: number;
+}
+
+type Listener = (state: ToastState) => void;
+declare class ToastController {
+    #private;
+    constructor();
+    get state(): Readonly<ToastState>;
+    subscribe(fn: Listener): () => void;
+    configure(config: Partial<ToastConfig>): void;
+    show(options: ToastOptions): string;
+    success(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    error(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    warning(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    info(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    loading(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    dismiss(id: string): void;
+    dismissAll(): void;
+    update(id: string, patch: Partial<Pick<ToastItem, 'message' | 'description' | 'type' | 'action'>> & {
+        /** duration を変更する場合に指定。loading→非loading 遷移時は省略で defaultDuration を自動適用 */
+        duration?: number;
+    }): void;
+    pauseTimer(id: string): void;
+    resumeTimer(id: string): void;
+}
+
+declare class ToastContainer extends LitElement {
+    static styles: lit.CSSResult;
+    controller: ToastController;
+    private _state;
+    private _unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _renderIcon;
+    private _renderToast;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'toast-container': ToastContainer;
+    }
+}
+
+declare class ToastSingleton {
+    #private;
+    configure(config: Partial<ToastConfig>): void;
+    show(options: ToastOptions): string;
+    success(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    error(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    warning(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    info(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    loading(message: string, options?: Omit<ToastOptions, 'type' | 'message'>): string;
+    dismiss(id: string): void;
+    dismissAll(): void;
+    update(id: string, patch: Partial<Pick<ToastItem, 'message' | 'description' | 'type' | 'action'>> & {
+        duration?: number;
+    }): void;
+    get controller(): ToastController;
+}
+declare const toast: ToastSingleton;
+
+export { type AlertIcon, type AlertOptions, type ConfirmOptions, DialogController, type DialogResult, type DialogState, type DialogType, type FormFieldGroup, type FormFieldMeta, type FormInputType, type FormLayout, type FormOptions, OverlayDialog, type QueueItem, type QueueItemStatus, type ShowOptions, type StepFormItem, type StepFormOptions, type StepFormStepInput, type StepItem, type StepItemStatus, type TaskItemInput, type ToastAction, type ToastConfig, ToastContainer, ToastController, type ToastItem, type ToastOptions, type ToastPosition, type ToastState, type ToastType, dialog, toast };