@konomi-app/ui 3.0.0 → 4.0.0

package/dist/index.d.ts

@@ -1,128 +1,159 @@
-declare class Overlay {
-    #private;
-    /**
-     * オーバーレイをレンダリングするルート要素の`dataset`。
-     */
-    protected readonly _rootDataset: DOMStringMap;
-    /**
-     * オーバーレイが表示されているかどうか。
-     */
-    protected _shown: boolean;
-    /**
-     * オーバーレイを表示中にページを離れようとした場合にアラートを表示するかどうかを設定します。
-     */
-    protected _disableBeforeUnload: boolean;
-    constructor();
-    show(): void;
-    hide(): void;
-    protected render(): void;
-    /** JavaScript中にページを離れようとした場合にアラートを表示します */
-    private beforeunload;
-    protected get root(): HTMLDivElement;
-    /** @deprecated このメソッドは非推奨です。代わりに`show`メソッドを使用してください。 */
-    start(): void;
-    /** @deprecated このメソッドは非推奨です。代わりに`hide`メソッドを使用してください。 */
-    stop(): void;
+import * as lit from 'lit';
+import { LitElement, TemplateResult } from 'lit';
+
+type DialogType = 'loading' | 'alert' | 'confirm' | 'queue' | 'steps';
+type AlertIcon = 'success' | 'error' | 'warning' | 'info';
+type QueueItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
+type StepItemStatus = 'pending' | 'active' | 'done' | 'skipped' | 'error';
+interface QueueItem {
+    label: string;
+    status: QueueItemStatus;
+}
+interface StepItem {
+    label: string;
+    status: StepItemStatus;
+}
+interface ShowOptions {
+    type: DialogType;
+    label?: string;
+    description?: string;
+    icon?: AlertIcon;
+    progress?: number;
+    allowOutsideClick?: boolean;
+}
+interface AlertOptions {
+    type?: AlertIcon;
+    label?: string;
+    description?: string;
+    html?: string;
+    showCancelButton?: boolean;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    timer?: number;
+}
+interface ConfirmOptions {
+    label?: string;
+    description?: string;
+    type?: AlertIcon;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+}
+interface DialogResult {
+    isConfirmed: boolean;
+    isCanceled: boolean;
+    isDismissed: boolean;
+}
+interface DialogState {
+    open: boolean;
+    dialogType: DialogType;
+    icon: AlertIcon | null;
+    label: string;
+    description: string;
+    html: string;
+    progress: number | null;
+    showConfirmButton: boolean;
+    showCancelButton: boolean;
+    confirmButtonText: string;
+    cancelButtonText: string;
+    allowOutsideClick: boolean;
+    allowEscapeKey: boolean;
+    queues: QueueItem[];
+    steps: StepItem[];
+    timer: number | null;
 }
 
-type Label$2 = string | string[];
-type ConstructorProps$2 = Readonly<Partial<{
-    label: Label$2;
-    progress: number;
-}>>;
-declare const ATTRIBUTE_ANIMATION = "data-animation";
-declare class LoadingOverlay extends Overlay {
+type Listener = (state: DialogState) => void;
+declare class DialogController {
     #private;
-    protected readonly _loaderElement: HTMLDivElement;
-    protected readonly _progressElement: HTMLDivElement;
-    protected readonly _contentElement: HTMLDivElement;
-    constructor(props?: ConstructorProps$2);
-    show(): void;
+    constructor();
+    get state(): Readonly<DialogState>;
+    subscribe(fn: Listener): () => void;
+    show(options?: ShowOptions): void;
     hide(): void;
-    set label(label: Label$2);
-    set html(html: string);
-    /**
-     * 進捗状況を設定します。
-     * @param percent 進捗のパーセンテージ(0-100)
-     */
-    set progress(percent: number);
-    render(): void;
+    alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
+    confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
+    loading(label?: string): void;
+    progress(percent: number): void;
+    label(label: string): void;
+    description(description: string): void;
+    setQueues(labels: string[]): void;
+    queue(labels: string[]): void;
+    startQueue(label: string): void;
+    finishQueue(label: string): void;
+    skipQueue(label: string): void;
+    errorQueue(label: string): void;
+    clearQueues(): void;
+    setSteps(labels: string[]): void;
+    steps(labels: string[]): void;
+    startStep(label: string): void;
+    finishStep(label: string): void;
+    skipStep(label: string): void;
+    errorStep(label: string): void;
+    clearSteps(): void;
+    onConfirm(): void;
+    onCancel(): void;
+    onOutsideClick(): void;
+    onEscapeKey(): void;
 }
 
-type Label$1 = string | string[];
-type TaskStatus = 'new' | 'in-progress' | 'done' | 'error';
-type Task = {
-    key: string;
-    label: Label$1;
-    status: TaskStatus;
-};
-type ConstructorProps$1 = Readonly<Partial<{
-    taskList: Task[];
-}>>;
-declare class TaskListOverlay extends Overlay {
-    #private;
-    protected readonly _contentElement: HTMLDivElement;
-    constructor(props?: ConstructorProps$1);
-    hide(): void;
-    done(key: string): void;
-    error(key: string): void;
-    inProgress(key: string): void;
-    addTask(...tasks: {
-        key: string;
-        label: Label$1;
-    }[]): void;
-    render(): void;
-    private renderTask;
-    private getTaskStatusElement;
-    private containerStyle;
-    private contentStyle;
-    private taskListContainerStyle;
-    private taskContainerStyle;
-    private taskLabelStyle;
-    private taskStatusStyle;
+declare class OverlayDialog extends LitElement {
+    static styles: lit.CSSResult;
+    controller: DialogController;
+    private _state;
+    private _unsubscribe?;
+    private _beforeUnloadHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _syncBodyScroll;
+    private _onBackdropClick;
+    private _onKeyDown;
+    private _renderIcon;
+    private _renderSpinner;
+    private _renderTaskIcon;
+    private _getQueueWindow;
+    private _renderQueueList;
+    private _renderStepsHeader;
+    private _renderStepsList;
+    private _renderButtons;
+    private _renderBody;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'overlay-dialog': OverlayDialog;
+    }
 }
 
-type Label = string | string[];
-type ConstructorProps = Readonly<Partial<{
-    label: Label;
-    progress: number;
-}>>;
-declare class Modal extends Overlay {
+declare class DialogSingleton {
     #private;
-    protected readonly _containerElement: HTMLDivElement;
-    protected readonly _iconElement: HTMLDivElement;
-    protected readonly _titleElement: HTMLDivElement;
-    protected readonly _loaderElement: HTMLDivElement;
-    protected readonly _progressElement: HTMLDivElement;
-    protected readonly _contentElement: HTMLDivElement;
-    protected readonly _actionsElement: HTMLDivElement;
-    protected readonly _okButtonElement: HTMLButtonElement;
-    protected readonly _cancelButtonElement: HTMLButtonElement;
-    constructor(props?: ConstructorProps);
-    alert(params: {
-        title?: string;
-        text?: string;
-        icon?: string;
-        disableClose?: boolean;
-        disableEscape?: boolean;
-    }): Promise<any>;
-    loading(): void;
+    show(options?: ShowOptions): void;
     hide(): void;
-    set label(label: Label);
-    set html(html: string);
-    set progress(progress: number);
-    private changeState;
-    render(): void;
+    alert(optionsOrLabel: string | AlertOptions): Promise<DialogResult>;
+    confirm(optionsOrLabel: string | ConfirmOptions): Promise<boolean>;
+    loading(label?: string): void;
+    progress(percent: number): void;
+    label(label: string): void;
+    description(description: string): void;
+    setQueues(labels: string[]): void;
+    queue(labels: string[]): void;
+    startQueue(label: string): void;
+    finishQueue(label: string): void;
+    skipQueue(label: string): void;
+    errorQueue(label: string): void;
+    clearQueues(): void;
+    setSteps(labels: string[]): void;
+    steps(labels: string[]): void;
+    startStep(label: string): void;
+    finishStep(label: string): void;
+    skipStep(label: string): void;
+    errorStep(label: string): void;
+    clearSteps(): void;
+    get controller(): DialogController;
 }
+declare const dialog: DialogSingleton;
 
-/**
- * 指定された関数をラップし、実行中にローディングオーバーレイを表示する高階関数。
- *
- * @template T - 任意の引数を取り、任意の値を返す関数の型。
- * @param {T} fn - 実行する関数。
- * @param {string} [label='Loading...'] - ローディングオーバーレイに表示するラベル。デフォルトは 'Loading...'。
- * @returns {(...args: Parameters<T>) => Promise<ReturnType<T>>} - ラップされた関数。実行中にローディングオーバーレイを表示し、完了後に非表示にする。
- */
-declare const withLoading: <T extends (...args: any[]) => any>(fn: T, label?: string) => (...args: Parameters<T>) => Promise<ReturnType<T>>;
-
-export { ATTRIBUTE_ANIMATION, LoadingOverlay, Modal, TaskListOverlay, withLoading };
+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, dialog };