@digitalwalletcorp/vue-core 1.2.1 → 1.3.0

package/lib/help-button.d.ts

@@ -0,0 +1,39 @@
+import { PopoverPlacement } from './internal/anchored-position';
+export interface Props {
+    /** ボタンに対するパネルの表示位置。収まらないときは反対側に出す */
+    placement?: PopoverPlacement;
+    /** ボタンを指す矢印をパネルに付ける */
+    arrow?: boolean;
+    /** ボタンの読み上げ名。aria-label 属性を渡したときはそちらが優先される */
+    label?: string;
+}
+export interface Emits {
+    (e: 'emit:open'): void;
+    (e: 'emit:close'): void;
+}
+export interface Slots {
+    /** ボタンのアイコン */
+    icon?(): unknown;
+    /** パネルに表示する中身 */
+    default?(): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "emit:open": () => any;
+    "emit:close": () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onEmit:open"?: (() => any) | undefined;
+    "onEmit:close"?: (() => any) | undefined;
+}>, {
+    label: string;
+    placement: PopoverPlacement;
+    arrow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/help-popper.d.cts

@@ -0,0 +1,39 @@
+import { PopoverPlacement } from './internal/anchored-position.cjs';
+export interface Props {
+    /** アイコンに対するパネルの表示位置。収まらないときは反対側に出す */
+    placement?: PopoverPlacement;
+    /** アイコンを指す矢印をパネルに付ける */
+    arrow?: boolean;
+    /** アイコンの読み上げ名 */
+    label?: string;
+}
+export interface Emits {
+    (e: 'emit:open'): void;
+    (e: 'emit:close'): void;
+}
+export interface Slots {
+    /** アイコン */
+    icon?(): unknown;
+    /** パネルに表示する中身 */
+    default?(): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "emit:open": () => any;
+    "emit:close": () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onEmit:open"?: (() => any) | undefined;
+    "onEmit:close"?: (() => any) | undefined;
+}>, {
+    label: string;
+    placement: PopoverPlacement;
+    arrow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/help-popper.d.ts

@@ -0,0 +1,39 @@
+import { PopoverPlacement } from './internal/anchored-position';
+export interface Props {
+    /** アイコンに対するパネルの表示位置。収まらないときは反対側に出す */
+    placement?: PopoverPlacement;
+    /** アイコンを指す矢印をパネルに付ける */
+    arrow?: boolean;
+    /** アイコンの読み上げ名 */
+    label?: string;
+}
+export interface Emits {
+    (e: 'emit:open'): void;
+    (e: 'emit:close'): void;
+}
+export interface Slots {
+    /** アイコン */
+    icon?(): unknown;
+    /** パネルに表示する中身 */
+    default?(): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "emit:open": () => any;
+    "emit:close": () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onEmit:open"?: (() => any) | undefined;
+    "onEmit:close"?: (() => any) | undefined;
+}>, {
+    label: string;
+    placement: PopoverPlacement;
+    arrow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/helpers/data-table-csv.d.cts

@@ -0,0 +1,17 @@
+import { DataTableHeader } from '../types/data-table.cjs';
+/**
+ * ヘッダの csv の定義から CSV の列名を作る
+ *
+ * @param {DataTableHeader<T>[]} headers
+ * @returns {string[]} 列名
+ */
+export declare const headersToCsvColumns: <T>(headers: DataTableHeader<T>[]) => string[];
+/**
+ * ヘッダの csv の定義に従って行から CSV の列の値を取り出す
+ *
+ * @param {DataTableHeader<T>[]} headers
+ * @param {T} row
+ * @param {number} [rowNumber] key が '$index' の列に出力する行番号
+ * @returns {unknown[]} 列の値。文字列化はしない
+ */
+export declare const rowToCsvColumns: <T>(headers: DataTableHeader<T>[], row: T, rowNumber?: number) => unknown[];

package/lib/helpers/data-table-csv.d.ts

@@ -0,0 +1,17 @@
+import { DataTableHeader } from '../types/data-table';
+/**
+ * ヘッダの csv の定義から CSV の列名を作る
+ *
+ * @param {DataTableHeader<T>[]} headers
+ * @returns {string[]} 列名
+ */
+export declare const headersToCsvColumns: <T>(headers: DataTableHeader<T>[]) => string[];
+/**
+ * ヘッダの csv の定義に従って行から CSV の列の値を取り出す
+ *
+ * @param {DataTableHeader<T>[]} headers
+ * @param {T} row
+ * @param {number} [rowNumber] key が '$index' の列に出力する行番号
+ * @returns {unknown[]} 列の値。文字列化はしない
+ */
+export declare const rowToCsvColumns: <T>(headers: DataTableHeader<T>[], row: T, rowNumber?: number) => unknown[];

package/lib/helpers/show-floating-component.d.cts

@@ -0,0 +1,82 @@
+import { AppContext, ClassValue, Component, StyleValue } from 'vue';
+import { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '../types/movable-window.cjs';
+/** showFloatingComponent が中身のコンポーネントに props として渡す関数 */
+export type FloatingComponentContentProps = MovableWindowContentProps;
+/** showFloatingComponent / showFloatingMessage が返す、表示中のウィンドウを操作するためのハンドル */
+export type FloatingComponentHandle = MovableWindowHandle;
+export interface ShowFloatingComponentOptions {
+    /** 見出し */
+    title?: string;
+    /** この要素の下に開く。下に収まらなければ上に開く。未指定ならページの表示中の左上に開く */
+    anchor?: HTMLElement;
+    /** ドラッグで移動するときに掴む範囲 */
+    dragMode?: MovableWindowDragMode;
+    /** 閉じるボタンの読み上げ名 */
+    closeLabel?: string;
+    /** 見出しにコピーボタンを置き、この値をコピーする。関数を渡すとクリック時に呼び出して値を得る */
+    copyValue?: string | number | (() => string | number);
+    /** コピーボタンの読み上げ名 */
+    copyLabel?: string;
+    /** ウィンドウのダブルクリックで閉じる */
+    closeOnDblClick?: boolean;
+    /** 開いている間、背面のページをスクロールさせない */
+    lockScroll?: boolean;
+    /** 初期の幅・高さ(px) */
+    initialSize?: {
+        width?: number;
+        height?: number;
+    };
+    /** ウィンドウに付けるクラス */
+    class?: ClassValue;
+    /** ウィンドウに付けるスタイル */
+    style?: StyleValue;
+    /** 見出しに付けるクラス */
+    headerClass?: ClassValue;
+    /** 見出しに付けるスタイル */
+    headerStyle?: StyleValue;
+    /**
+     * 中身のコンポーネントに引き継ぐアプリのコンテキスト。
+     * 中身でアプリに登録したプラグイン・コンポーネント・provide を使う場合に渡す
+     */
+    appContext?: AppContext;
+    /** ウィンドウが閉じ終わって取り外されたときに呼ぶ関数。ハンドル・利用者の操作・closeAllFloatingComponents のどれで閉じても呼ぶ */
+    onClose?: () => void;
+}
+/**
+ * FloatingComponent を body の末尾に描画し、中身にコンポーネントを表示する。
+ * 中身のコンポーネントには、渡した props に加えて close と setLoading を props として渡す。
+ * ブラウザでのみ動作する
+ *
+ * @param {Component} component 中身に表示するコンポーネント
+ * @param {Record<string, unknown>} [props] 中身のコンポーネントに渡す props
+ * @param {ShowFloatingComponentOptions} [options]
+ * @returns {FloatingComponentHandle}
+ */
+export declare function showFloatingComponent(component: Component, props?: Record<string, unknown>, options?: ShowFloatingComponentOptions): FloatingComponentHandle;
+/**
+ * FloatingComponent を body の末尾に描画し、中身に文字列を表示する。
+ * 文字列は HTML として解釈せず、改行や空白をそのまま表示する。オブジェクトは整形した JSON で表示する。
+ * 見出しのコピーボタンは、copyValue を指定しなければ表示した文字列をコピーする。
+ * ブラウザでのみ動作する
+ *
+ * @param {string | object} message 表示する文字列またはオブジェクト
+ * @param {ShowFloatingComponentOptions} [options]
+ * @returns {FloatingComponentHandle}
+ */
+export declare function showFloatingMessage(message: string | object, options?: ShowFloatingComponentOptions): FloatingComponentHandle;
+/**
+ * 開いている FloatingComponent をすべて閉じる
+ */
+export declare function closeAllFloatingComponents(): void;
+/**
+ * 呼び出したコンポーネントに結び付けて FloatingComponent を開く関数を返す。
+ * 開いたウィンドウは、呼び出したコンポーネントがアンマウントされると閉じる。
+ * appContext を指定しなければ、呼び出したコンポーネントのアプリのコンテキストを中身に引き継ぐ。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @returns {{ showFloatingComponent: typeof showFloatingComponent; showFloatingMessage: typeof showFloatingMessage }}
+ */
+export declare function useFloatingComponent(): {
+    showFloatingComponent: typeof showFloatingComponent;
+    showFloatingMessage: typeof showFloatingMessage;
+};

package/lib/helpers/show-floating-component.d.ts

@@ -0,0 +1,82 @@
+import { AppContext, ClassValue, Component, StyleValue } from 'vue';
+import { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '../types/movable-window';
+/** showFloatingComponent が中身のコンポーネントに props として渡す関数 */
+export type FloatingComponentContentProps = MovableWindowContentProps;
+/** showFloatingComponent / showFloatingMessage が返す、表示中のウィンドウを操作するためのハンドル */
+export type FloatingComponentHandle = MovableWindowHandle;
+export interface ShowFloatingComponentOptions {
+    /** 見出し */
+    title?: string;
+    /** この要素の下に開く。下に収まらなければ上に開く。未指定ならページの表示中の左上に開く */
+    anchor?: HTMLElement;
+    /** ドラッグで移動するときに掴む範囲 */
+    dragMode?: MovableWindowDragMode;
+    /** 閉じるボタンの読み上げ名 */
+    closeLabel?: string;
+    /** 見出しにコピーボタンを置き、この値をコピーする。関数を渡すとクリック時に呼び出して値を得る */
+    copyValue?: string | number | (() => string | number);
+    /** コピーボタンの読み上げ名 */
+    copyLabel?: string;
+    /** ウィンドウのダブルクリックで閉じる */
+    closeOnDblClick?: boolean;
+    /** 開いている間、背面のページをスクロールさせない */
+    lockScroll?: boolean;
+    /** 初期の幅・高さ(px) */
+    initialSize?: {
+        width?: number;
+        height?: number;
+    };
+    /** ウィンドウに付けるクラス */
+    class?: ClassValue;
+    /** ウィンドウに付けるスタイル */
+    style?: StyleValue;
+    /** 見出しに付けるクラス */
+    headerClass?: ClassValue;
+    /** 見出しに付けるスタイル */
+    headerStyle?: StyleValue;
+    /**
+     * 中身のコンポーネントに引き継ぐアプリのコンテキスト。
+     * 中身でアプリに登録したプラグイン・コンポーネント・provide を使う場合に渡す
+     */
+    appContext?: AppContext;
+    /** ウィンドウが閉じ終わって取り外されたときに呼ぶ関数。ハンドル・利用者の操作・closeAllFloatingComponents のどれで閉じても呼ぶ */
+    onClose?: () => void;
+}
+/**
+ * FloatingComponent を body の末尾に描画し、中身にコンポーネントを表示する。
+ * 中身のコンポーネントには、渡した props に加えて close と setLoading を props として渡す。
+ * ブラウザでのみ動作する
+ *
+ * @param {Component} component 中身に表示するコンポーネント
+ * @param {Record<string, unknown>} [props] 中身のコンポーネントに渡す props
+ * @param {ShowFloatingComponentOptions} [options]
+ * @returns {FloatingComponentHandle}
+ */
+export declare function showFloatingComponent(component: Component, props?: Record<string, unknown>, options?: ShowFloatingComponentOptions): FloatingComponentHandle;
+/**
+ * FloatingComponent を body の末尾に描画し、中身に文字列を表示する。
+ * 文字列は HTML として解釈せず、改行や空白をそのまま表示する。オブジェクトは整形した JSON で表示する。
+ * 見出しのコピーボタンは、copyValue を指定しなければ表示した文字列をコピーする。
+ * ブラウザでのみ動作する
+ *
+ * @param {string | object} message 表示する文字列またはオブジェクト
+ * @param {ShowFloatingComponentOptions} [options]
+ * @returns {FloatingComponentHandle}
+ */
+export declare function showFloatingMessage(message: string | object, options?: ShowFloatingComponentOptions): FloatingComponentHandle;
+/**
+ * 開いている FloatingComponent をすべて閉じる
+ */
+export declare function closeAllFloatingComponents(): void;
+/**
+ * 呼び出したコンポーネントに結び付けて FloatingComponent を開く関数を返す。
+ * 開いたウィンドウは、呼び出したコンポーネントがアンマウントされると閉じる。
+ * appContext を指定しなければ、呼び出したコンポーネントのアプリのコンテキストを中身に引き継ぐ。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @returns {{ showFloatingComponent: typeof showFloatingComponent; showFloatingMessage: typeof showFloatingMessage }}
+ */
+export declare function useFloatingComponent(): {
+    showFloatingComponent: typeof showFloatingComponent;
+    showFloatingMessage: typeof showFloatingMessage;
+};

package/lib/helpers/show-modal-dialog.d.cts

@@ -0,0 +1,73 @@
+import { AppContext, ClassValue, Component, StyleValue } from 'vue';
+import { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from '../types/modal-dialog.cjs';
+export interface ShowModalDialogOptions {
+    /** ダイアログの種類 */
+    type?: ModalDialogType;
+    /** 見出し */
+    title?: string;
+    /** true の場合、見出しとメッセージを HTML として表示する */
+    html?: boolean;
+    /** メッセージの下に並べる画像 */
+    image?: ModalDialogImage | ModalDialogImage[];
+    /** 種類ごとのアイコンに代えて表示するコンポーネント */
+    icon?: Component;
+    /** 左から順に並べるボタン。未指定なら confirm は Yes と No、それ以外は OK */
+    buttons?: ModalDialogButton[];
+    /** OK ボタンの文字 */
+    okLabel?: string;
+    /** Yes ボタンの文字 */
+    yesLabel?: string;
+    /** No ボタンの文字 */
+    noLabel?: string;
+    /** Cancel ボタンの文字 */
+    cancelLabel?: string;
+    /** ダイアログに付けるクラス */
+    class?: ClassValue;
+    /** ダイアログに付けるスタイル */
+    style?: StyleValue;
+    /**
+     * icon のコンポーネントに引き継ぐアプリのコンテキスト。
+     * icon でアプリに登録したプラグイン・コンポーネント・provide を使う場合に渡す
+     */
+    appContext?: AppContext;
+}
+/**
+ * ModalDialog を body の末尾に描画して開き、閉じたら取り外す。ブラウザでのみ動作する
+ *
+ * @param {string | string[]} message 表示する文字列。配列なら1要素を1段落として表示する
+ * @param {ShowModalDialogOptions} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showModalDialog(message: string | string[], options?: ShowModalDialogOptions): Promise<ModalDialogResult>;
+/**
+ * 情報を伝えるダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showInformationDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+/**
+ * Yes / No を尋ねるダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showConfirmationDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+/**
+ * 警告のダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showWarningDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+/**
+ * エラーのダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showErrorDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult>;

package/lib/helpers/show-modal-dialog.d.ts

@@ -0,0 +1,73 @@
+import { AppContext, ClassValue, Component, StyleValue } from 'vue';
+import { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from '../types/modal-dialog';
+export interface ShowModalDialogOptions {
+    /** ダイアログの種類 */
+    type?: ModalDialogType;
+    /** 見出し */
+    title?: string;
+    /** true の場合、見出しとメッセージを HTML として表示する */
+    html?: boolean;
+    /** メッセージの下に並べる画像 */
+    image?: ModalDialogImage | ModalDialogImage[];
+    /** 種類ごとのアイコンに代えて表示するコンポーネント */
+    icon?: Component;
+    /** 左から順に並べるボタン。未指定なら confirm は Yes と No、それ以外は OK */
+    buttons?: ModalDialogButton[];
+    /** OK ボタンの文字 */
+    okLabel?: string;
+    /** Yes ボタンの文字 */
+    yesLabel?: string;
+    /** No ボタンの文字 */
+    noLabel?: string;
+    /** Cancel ボタンの文字 */
+    cancelLabel?: string;
+    /** ダイアログに付けるクラス */
+    class?: ClassValue;
+    /** ダイアログに付けるスタイル */
+    style?: StyleValue;
+    /**
+     * icon のコンポーネントに引き継ぐアプリのコンテキスト。
+     * icon でアプリに登録したプラグイン・コンポーネント・provide を使う場合に渡す
+     */
+    appContext?: AppContext;
+}
+/**
+ * ModalDialog を body の末尾に描画して開き、閉じたら取り外す。ブラウザでのみ動作する
+ *
+ * @param {string | string[]} message 表示する文字列。配列なら1要素を1段落として表示する
+ * @param {ShowModalDialogOptions} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showModalDialog(message: string | string[], options?: ShowModalDialogOptions): Promise<ModalDialogResult>;
+/**
+ * 情報を伝えるダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showInformationDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+/**
+ * Yes / No を尋ねるダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showConfirmationDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+/**
+ * 警告のダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showWarningDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult>;
+/**
+ * エラーのダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export declare function showErrorDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult>;

package/lib/helpers/show-overlay-box.d.cts

@@ -0,0 +1,53 @@
+import { AppContext, ClassValue, Component, StyleValue } from 'vue';
+import { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '../types/movable-window.cjs';
+/** showOverlayBox が中身のコンポーネントに props として渡す関数 */
+export type OverlayBoxContentProps = MovableWindowContentProps;
+/** showOverlayBox が返す、表示中のボックスを操作するためのハンドル */
+export type OverlayBoxHandle = MovableWindowHandle;
+export interface ShowOverlayBoxOptions {
+    /** 見出し */
+    title?: string;
+    /** ドラッグで移動するときに掴む範囲 */
+    dragMode?: MovableWindowDragMode;
+    /** 暗幕のクリックで閉じる */
+    closeOnBackdrop?: boolean;
+    /** 閉じるボタンの読み上げ名 */
+    closeLabel?: string;
+    /** ボックスのルート要素に付けるクラス */
+    class?: ClassValue;
+    /** ボックスのルート要素に付けるスタイル */
+    style?: StyleValue;
+    /**
+     * 中身のコンポーネントに引き継ぐアプリのコンテキスト。
+     * 中身でアプリに登録したプラグイン・コンポーネント・provide を使う場合に渡す
+     */
+    appContext?: AppContext;
+    /** ボックスが閉じ終わって取り外されたときに呼ぶ関数。ハンドル・利用者の操作・closeAllOverlayBoxes のどれで閉じても呼ぶ */
+    onClose?: () => void;
+}
+/**
+ * OverlayBox を body の末尾に描画し、中身にコンポーネントを表示する。
+ * 中身のコンポーネントには、渡した props に加えて close と setLoading を props として渡す。
+ * テンプレートに置けない処理(ボタンのクリックで画面を開くなど)から呼ぶためのもので、ブラウザでのみ動作する
+ *
+ * @param {Component} component 中身に表示するコンポーネント
+ * @param {Record<string, unknown>} [props] 中身のコンポーネントに渡す props
+ * @param {ShowOverlayBoxOptions} [options]
+ * @returns {OverlayBoxHandle}
+ */
+export declare function showOverlayBox(component: Component, props?: Record<string, unknown>, options?: ShowOverlayBoxOptions): OverlayBoxHandle;
+/**
+ * 開いている OverlayBox をすべて閉じる
+ */
+export declare function closeAllOverlayBoxes(): void;
+/**
+ * 呼び出したコンポーネントに結び付けて OverlayBox を開く関数を返す。
+ * 開いたボックスは、呼び出したコンポーネントがアンマウントされると閉じる。
+ * appContext を指定しなければ、呼び出したコンポーネントのアプリのコンテキストを中身に引き継ぐ。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @returns {{ showOverlayBox: typeof showOverlayBox }}
+ */
+export declare function useOverlayBox(): {
+    showOverlayBox: typeof showOverlayBox;
+};

package/lib/helpers/show-overlay-box.d.ts

@@ -0,0 +1,53 @@
+import { AppContext, ClassValue, Component, StyleValue } from 'vue';
+import { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '../types/movable-window';
+/** showOverlayBox が中身のコンポーネントに props として渡す関数 */
+export type OverlayBoxContentProps = MovableWindowContentProps;
+/** showOverlayBox が返す、表示中のボックスを操作するためのハンドル */
+export type OverlayBoxHandle = MovableWindowHandle;
+export interface ShowOverlayBoxOptions {
+    /** 見出し */
+    title?: string;
+    /** ドラッグで移動するときに掴む範囲 */
+    dragMode?: MovableWindowDragMode;
+    /** 暗幕のクリックで閉じる */
+    closeOnBackdrop?: boolean;
+    /** 閉じるボタンの読み上げ名 */
+    closeLabel?: string;
+    /** ボックスのルート要素に付けるクラス */
+    class?: ClassValue;
+    /** ボックスのルート要素に付けるスタイル */
+    style?: StyleValue;
+    /**
+     * 中身のコンポーネントに引き継ぐアプリのコンテキスト。
+     * 中身でアプリに登録したプラグイン・コンポーネント・provide を使う場合に渡す
+     */
+    appContext?: AppContext;
+    /** ボックスが閉じ終わって取り外されたときに呼ぶ関数。ハンドル・利用者の操作・closeAllOverlayBoxes のどれで閉じても呼ぶ */
+    onClose?: () => void;
+}
+/**
+ * OverlayBox を body の末尾に描画し、中身にコンポーネントを表示する。
+ * 中身のコンポーネントには、渡した props に加えて close と setLoading を props として渡す。
+ * テンプレートに置けない処理(ボタンのクリックで画面を開くなど)から呼ぶためのもので、ブラウザでのみ動作する
+ *
+ * @param {Component} component 中身に表示するコンポーネント
+ * @param {Record<string, unknown>} [props] 中身のコンポーネントに渡す props
+ * @param {ShowOverlayBoxOptions} [options]
+ * @returns {OverlayBoxHandle}
+ */
+export declare function showOverlayBox(component: Component, props?: Record<string, unknown>, options?: ShowOverlayBoxOptions): OverlayBoxHandle;
+/**
+ * 開いている OverlayBox をすべて閉じる
+ */
+export declare function closeAllOverlayBoxes(): void;
+/**
+ * 呼び出したコンポーネントに結び付けて OverlayBox を開く関数を返す。
+ * 開いたボックスは、呼び出したコンポーネントがアンマウントされると閉じる。
+ * appContext を指定しなければ、呼び出したコンポーネントのアプリのコンテキストを中身に引き継ぐ。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @returns {{ showOverlayBox: typeof showOverlayBox }}
+ */
+export declare function useOverlayBox(): {
+    showOverlayBox: typeof showOverlayBox;
+};

package/lib/helpers/show-screen-loading.d.cts

@@ -0,0 +1,20 @@
+import { ClassValue, StyleValue } from 'vue';
+export interface ShowScreenLoadingOptions {
+    /** ローディングのルート要素に付けるクラス */
+    class?: ClassValue;
+    /** ローディングのルート要素に付けるスタイル */
+    style?: StyleValue;
+}
+/** showScreenLoading が返す、表示中のローディングを閉じるためのハンドル */
+export interface ScreenLoadingHandle {
+    /** ローディングを閉じて取り外す */
+    close: () => void;
+}
+/**
+ * ScreenLoading を body の末尾に描画して表示する。
+ * テンプレートに置けない処理(API 呼び出しの前後など)から呼ぶためのもので、ブラウザでのみ動作する
+ *
+ * @param {ShowScreenLoadingOptions} [options]
+ * @returns {ScreenLoadingHandle}
+ */
+export declare function showScreenLoading(options?: ShowScreenLoadingOptions): ScreenLoadingHandle;

package/lib/helpers/show-screen-loading.d.ts

@@ -0,0 +1,20 @@
+import { ClassValue, StyleValue } from 'vue';
+export interface ShowScreenLoadingOptions {
+    /** ローディングのルート要素に付けるクラス */
+    class?: ClassValue;
+    /** ローディングのルート要素に付けるスタイル */
+    style?: StyleValue;
+}
+/** showScreenLoading が返す、表示中のローディングを閉じるためのハンドル */
+export interface ScreenLoadingHandle {
+    /** ローディングを閉じて取り外す */
+    close: () => void;
+}
+/**
+ * ScreenLoading を body の末尾に描画して表示する。
+ * テンプレートに置けない処理(API 呼び出しの前後など)から呼ぶためのもので、ブラウザでのみ動作する
+ *
+ * @param {ShowScreenLoadingOptions} [options]
+ * @returns {ScreenLoadingHandle}
+ */
+export declare function showScreenLoading(options?: ShowScreenLoadingOptions): ScreenLoadingHandle;