@digitalwalletcorp/vue-core 1.2.1 → 1.3.0

package/src/help-button.vue

@@ -0,0 +1,128 @@
+<!--
+ヘルプボタン
+クリックするとスロットの中身をボタンの近くにポップオーバーで表示する。
+外側のクリック、または Esc で閉じる。
+-->
+<template>
+  <button
+    ref="refButton"
+    type="button"
+    class="dwui-help-button"
+    :aria-label="props.label"
+    v-bind="attrs"
+  >
+    <slot name="icon">
+      <SvgQuestion />
+    </slot>
+  </button>
+  <AnchoredPopover
+    ref="refPopover"
+    class="dwui-help-button-popover"
+    mode="auto"
+    :anchor="refButton"
+    :placement="props.placement"
+    :arrow="props.arrow"
+    @emit:open="emit('emit:open')"
+    @emit:close="emit('emit:close')"
+  >
+    <slot />
+  </AnchoredPopover>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, useAttrs } from 'vue';
+import { SvgQuestion } from '@digitalwalletcorp/vue-svg-icons';
+import AnchoredPopover from '@/internal/anchored-popover.vue';
+import type { PopoverPlacement } from '@/internal/anchored-position';
+
+// ルートが button と パネルの2つなので、属性は button に明示的に渡す
+defineOptions({ inheritAttrs: false });
+
+export interface Props {
+  /** ボタンに対するパネルの表示位置。収まらないときは反対側に出す */
+  placement?: PopoverPlacement;
+  /** ボタンを指す矢印をパネルに付ける */
+  arrow?: boolean;
+  /** ボタンの読み上げ名。aria-label 属性を渡したときはそちらが優先される */
+  label?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'bottom-start',
+  arrow: false,
+  label: 'Help'
+});
+
+export interface Emits {
+  (e: 'emit:open'): void;
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** ボタンのアイコン */
+  icon?(): unknown;
+  /** パネルに表示する中身 */
+  default?(): unknown;
+}
+defineSlots<Slots>();
+
+const attrs = useAttrs();
+
+const refButton = ref<HTMLButtonElement>();
+const refPopover = ref<InstanceType<typeof AnchoredPopover>>();
+
+onMounted(() => {
+  // ボタンをパネルの invoker にする。クリックでの開閉、外側クリックの判定、Esc で閉じた後のフォーカスの戻りをブラウザに任せる
+  const panel = refPopover.value?.element;
+  if (refButton.value && panel) {
+    refButton.value.popoverTargetElement = panel;
+  }
+});
+</script>
+
+<style>
+:where(.dwui-help-button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  padding: 0.17em;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  background-image: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(.dwui-help-button:not(:disabled):hover) {
+  background: var(--dwui-background-help-button-hover, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12)));
+}
+
+:where(.dwui-help-button:not(:disabled):active) {
+  transform: translate(1px, 1px);
+}
+
+:where(.dwui-help-button:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:where(.dwui-help-button:focus-visible) {
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-outline-offset-focus-ring, 2px);
+}
+
+:where(.dwui-help-button-popover) {
+  --dwui-max-width-anchored-popover: var(--dwui-max-width-help-button-popover, calc(100vw - 16px));
+  --dwui-max-height-anchored-popover: var(--dwui-max-height-help-button-popover, calc(100vh - 16px));
+  --dwui-padding-anchored-popover: var(--dwui-padding-help-button-popover, 0.67em 1em);
+  --dwui-border-color-anchored-popover: var(--dwui-border-color-help-button-popover, light-dark(#8f8f8f, #6b6f76));
+  --dwui-radius-anchored-popover: var(--dwui-radius-help-button-popover, 4px);
+  --dwui-background-anchored-popover: var(--dwui-background-help-button-popover, Canvas);
+  --dwui-background-anchored-popover-arrow: var(--dwui-background-help-button-popover-arrow, var(--dwui-background-help-button-popover, Canvas));
+  --dwui-color-text-anchored-popover: var(--dwui-color-text-help-button-popover, CanvasText);
+  --dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-help-button-popover, 0 2px 8px rgba(0, 0, 0, 0.25));
+}
+</style>

package/src/help-popper.vue

@@ -0,0 +1,70 @@
+<!--
+ヘルプポップアップ
+アイコンにマウスを載せている、またはフォーカスしている間だけ補足説明を表示する。
+-->
+<template>
+  <IconPopper
+    class="dwui-help-popper"
+    popover-class="dwui-help-popper-popover"
+    :placement="props.placement"
+    :arrow="props.arrow"
+    :label="props.label"
+    @emit:open="emit('emit:open')"
+    @emit:close="emit('emit:close')"
+  >
+    <template #icon>
+      <slot name="icon">
+        <SvgQuestion />
+      </slot>
+    </template>
+    <slot />
+  </IconPopper>
+</template>
+
+<script setup lang="ts">
+import { SvgQuestion } from '@digitalwalletcorp/vue-svg-icons';
+import IconPopper from '@/internal/icon-popper.vue';
+import type { PopoverPlacement } from '@/internal/anchored-position';
+
+export interface Props {
+  /** アイコンに対するパネルの表示位置。収まらないときは反対側に出す */
+  placement?: PopoverPlacement;
+  /** アイコンを指す矢印をパネルに付ける */
+  arrow?: boolean;
+  /** アイコンの読み上げ名 */
+  label?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'right',
+  arrow: true,
+  label: 'Help'
+});
+
+export interface Emits {
+  (e: 'emit:open'): void;
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** アイコン */
+  icon?(): unknown;
+  /** パネルに表示する中身 */
+  default?(): unknown;
+}
+defineSlots<Slots>();
+</script>
+
+<style>
+:where(.dwui-help-popper-popover) {
+  --dwui-max-width-anchored-popover: var(--dwui-max-width-help-popper, calc(100vw - 16px));
+  --dwui-max-height-anchored-popover: var(--dwui-max-height-help-popper, calc(100vh - 16px));
+  --dwui-padding-anchored-popover: var(--dwui-padding-help-popper, 0.67em 1em);
+  --dwui-border-color-anchored-popover: var(--dwui-border-color-help-popper, light-dark(#8f8f8f, #6b6f76));
+  --dwui-radius-anchored-popover: var(--dwui-radius-help-popper, 4px);
+  --dwui-background-anchored-popover: var(--dwui-background-help-popper, Canvas);
+  --dwui-background-anchored-popover-arrow: var(--dwui-background-help-popper-arrow, var(--dwui-background-help-popper, Canvas));
+  --dwui-color-text-anchored-popover: var(--dwui-color-text-help-popper, CanvasText);
+  --dwui-box-shadow-anchored-popover: var(--dwui-box-shadow-help-popper, 0 2px 8px rgba(0, 0, 0, 0.25));
+}
+</style>

package/src/helpers/data-table-csv.ts

@@ -0,0 +1,55 @@
+import { getValueByPath, resolveLabel } from '@/internal/data-table-value';
+import type { DataTableCsvColumn, DataTableHeader } from '@/types/data-table';
+
+/** 行番号を出力するキー */
+const INDEX_KEY = '$index';
+
+/**
+ * ヘッダから CSV に出力する列の定義を取り出す。csv を持たないヘッダと disabled の列は含めない
+ */
+const toCsvColumns = <T>(headers: DataTableHeader<T>[]): { header: DataTableHeader<T>; column: DataTableCsvColumn<T> }[] => {
+  const columns: { header: DataTableHeader<T>; column: DataTableCsvColumn<T> }[] = [];
+  for (const header of headers) {
+    if (header.csv === true) {
+      columns.push({ header, column: {} });
+    } else if (Array.isArray(header.csv)) {
+      for (const column of header.csv) {
+        if (!column.disabled) {
+          columns.push({ header, column });
+        }
+      }
+    }
+  }
+  return columns;
+};
+
+/**
+ * ヘッダの csv の定義から CSV の列名を作る
+ *
+ * @param {DataTableHeader<T>[]} headers
+ * @returns {string[]} 列名
+ */
+export const headersToCsvColumns = <T>(headers: DataTableHeader<T>[]): string[] => {
+  return toCsvColumns(headers).map(({ header, column }) => resolveLabel(column.label ?? header.label));
+};
+
+/**
+ * ヘッダの csv の定義に従って行から CSV の列の値を取り出す
+ *
+ * @param {DataTableHeader<T>[]} headers
+ * @param {T} row
+ * @param {number} [rowNumber] key が '$index' の列に出力する行番号
+ * @returns {unknown[]} 列の値。文字列化はしない
+ */
+export const rowToCsvColumns = <T>(headers: DataTableHeader<T>[], row: T, rowNumber?: number): unknown[] => {
+  return toCsvColumns(headers).map(({ header, column }) => {
+    if (column.format) {
+      return column.format(row);
+    }
+    const key = column.key ?? header.id;
+    if (key === INDEX_KEY) {
+      return rowNumber;
+    }
+    return getValueByPath(row, key);
+  });
+};

package/src/helpers/show-floating-component.ts

@@ -0,0 +1,169 @@
+import { h } from 'vue';
+import type { AppContext, ClassValue, Component, StyleValue, VNode } from 'vue';
+import FloatingComponent from '@/internal/floating-component.vue';
+import { mountWindow, useWindowOwner } from '@/internal/mount-window';
+import type { 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;
+}
+
+const openedHandles = new Set<FloatingComponentHandle>();
+
+/**
+ * FloatingComponent を body の末尾に描画する
+ *
+ * @param {(content: FloatingComponentContentProps) => VNode} renderContent 中身を描画する関数
+ * @param {ShowFloatingComponentOptions} [options]
+ * @param {() => void} [onClosed] 閉じ終わったときに呼ぶ関数
+ * @returns {FloatingComponentHandle}
+ */
+const mountFloatingComponent = (
+  renderContent: (content: FloatingComponentContentProps) => VNode,
+  options?: ShowFloatingComponentOptions,
+  onClosed?: () => void
+): FloatingComponentHandle => {
+  const { appContext, onClose, ...windowProps } = options ?? {};
+  return mountWindow((stateProps, handle) => h(FloatingComponent, {
+    closeLabel: 'Close',
+    copyLabel: 'Copy',
+    closeOnDblClick: false,
+    lockScroll: false,
+    ...windowProps,
+    ...stateProps
+  }, {
+    default: () => renderContent(handle)
+  }), { appContext, onClose, onClosed }, openedHandles);
+};
+
+const renderComponent = (component: Component, props?: Record<string, unknown>) => (content: FloatingComponentContentProps): VNode => {
+  return h(component, {
+    ...props,
+    ...content
+  });
+};
+
+const toMessageText = (message: string | object): string => {
+  return typeof message === 'string' ? message : JSON.stringify(message, null, 2);
+};
+
+const renderMessage = (text: string) => (): VNode => {
+  return h('div', { class: 'dwui-floating-component-message' }, text);
+};
+
+/**
+ * FloatingComponent を body の末尾に描画し、中身にコンポーネントを表示する。
+ * 中身のコンポーネントには、渡した props に加えて close と setLoading を props として渡す。
+ * ブラウザでのみ動作する
+ *
+ * @param {Component} component 中身に表示するコンポーネント
+ * @param {Record<string, unknown>} [props] 中身のコンポーネントに渡す props
+ * @param {ShowFloatingComponentOptions} [options]
+ * @returns {FloatingComponentHandle}
+ */
+export function showFloatingComponent(component: Component, props?: Record<string, unknown>, options?: ShowFloatingComponentOptions): FloatingComponentHandle {
+  return mountFloatingComponent(renderComponent(component, props), options);
+}
+
+/**
+ * FloatingComponent を body の末尾に描画し、中身に文字列を表示する。
+ * 文字列は HTML として解釈せず、改行や空白をそのまま表示する。オブジェクトは整形した JSON で表示する。
+ * 見出しのコピーボタンは、copyValue を指定しなければ表示した文字列をコピーする。
+ * ブラウザでのみ動作する
+ *
+ * @param {string | object} message 表示する文字列またはオブジェクト
+ * @param {ShowFloatingComponentOptions} [options]
+ * @returns {FloatingComponentHandle}
+ */
+export function showFloatingMessage(message: string | object, options?: ShowFloatingComponentOptions): FloatingComponentHandle {
+  const text = toMessageText(message);
+  return mountFloatingComponent(renderMessage(text), {
+    copyValue: text,
+    ...options
+  });
+}
+
+/**
+ * 開いている FloatingComponent をすべて閉じる
+ */
+export function closeAllFloatingComponents(): void {
+  for (const handle of [...openedHandles]) {
+    handle.close();
+  }
+}
+
+/**
+ * 呼び出したコンポーネントに結び付けて FloatingComponent を開く関数を返す。
+ * 開いたウィンドウは、呼び出したコンポーネントがアンマウントされると閉じる。
+ * appContext を指定しなければ、呼び出したコンポーネントのアプリのコンテキストを中身に引き継ぐ。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @returns {{ showFloatingComponent: typeof showFloatingComponent; showFloatingMessage: typeof showFloatingMessage }}
+ */
+export function useFloatingComponent(): {
+  showFloatingComponent: typeof showFloatingComponent;
+  showFloatingMessage: typeof showFloatingMessage;
+} {
+  const owner = useWindowOwner('useFloatingComponent');
+
+  const withOwner = (options?: ShowFloatingComponentOptions): ShowFloatingComponentOptions => {
+    return {
+      appContext: owner.appContext,
+      ...options
+    };
+  };
+
+  return {
+    showFloatingComponent: (component, props, options) => {
+      return owner.own((onClosed) => mountFloatingComponent(renderComponent(component, props), withOwner(options), onClosed));
+    },
+    showFloatingMessage: (message, options) => {
+      const text = toMessageText(message);
+      return owner.own((onClosed) => mountFloatingComponent(renderMessage(text), withOwner({
+        copyValue: text,
+        ...options
+      }), onClosed));
+    }
+  };
+}

package/src/helpers/show-modal-dialog.ts

@@ -0,0 +1,121 @@
+import { h, render } from 'vue';
+import type { AppContext, ClassValue, Component, StyleValue } from 'vue';
+import ModalDialog from '@/modal-dialog.vue';
+import type { 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 function showModalDialog(message: string | string[], options?: ShowModalDialogOptions): Promise<ModalDialogResult> {
+  const { icon, appContext, ...dialogProps } = options ?? {};
+  return new Promise((resolve) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const vnode = h(ModalDialog, {
+      ...dialogProps,
+      message,
+      open: true,
+      'onEmit:close': (result: ModalDialogResult) => {
+        render(null, container);
+        container.remove();
+        resolve(result);
+      }
+    }, icon ? { icon: () => h(icon) } : undefined);
+    if (appContext) {
+      vnode.appContext = appContext;
+    }
+    render(vnode, container);
+  });
+}
+
+/**
+ * 情報を伝えるダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export function showInformationDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
+  return showModalDialog(message, {
+    ...options,
+    type: 'info'
+  });
+}
+
+/**
+ * Yes / No を尋ねるダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export function showConfirmationDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
+  return showModalDialog(message, {
+    ...options,
+    type: 'confirm'
+  });
+}
+
+/**
+ * 警告のダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export function showWarningDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
+  return showModalDialog(message, {
+    ...options,
+    type: 'warn'
+  });
+}
+
+/**
+ * エラーのダイアログを開く
+ *
+ * @param {string | string[]} message 表示する文字列
+ * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
+ * @returns {Promise<ModalDialogResult>} 閉じたボタン
+ */
+export function showErrorDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
+  return showModalDialog(message, {
+    ...options,
+    type: 'error'
+  });
+}

package/src/helpers/show-overlay-box.ts

@@ -0,0 +1,106 @@
+import { h } from 'vue';
+import type { AppContext, ClassValue, Component, StyleValue } from 'vue';
+import OverlayBox from '@/overlay-box.vue';
+import { mountWindow, useWindowOwner } from '@/internal/mount-window';
+import type { 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;
+}
+
+const openedHandles = new Set<OverlayBoxHandle>();
+
+/**
+ * OverlayBox を body の末尾に描画し、中身にコンポーネントを表示する
+ *
+ * @param {Component} component 中身に表示するコンポーネント
+ * @param {Record<string, unknown>} [props] 中身のコンポーネントに渡す props
+ * @param {ShowOverlayBoxOptions} [options]
+ * @param {() => void} [onClosed] 閉じ終わったときに呼ぶ関数
+ * @returns {OverlayBoxHandle}
+ */
+const mountOverlayBox = (
+  component: Component,
+  props?: Record<string, unknown>,
+  options?: ShowOverlayBoxOptions,
+  onClosed?: () => void
+): OverlayBoxHandle => {
+  const { appContext, onClose, ...boxProps } = options ?? {};
+  return mountWindow((windowProps, handle) => h(OverlayBox, {
+    ...boxProps,
+    ...windowProps
+  }, {
+    default: () => h(component, {
+      ...props,
+      close: handle.close,
+      setLoading: handle.setLoading
+    })
+  }), { appContext, onClose, onClosed }, openedHandles);
+};
+
+/**
+ * OverlayBox を body の末尾に描画し、中身にコンポーネントを表示する。
+ * 中身のコンポーネントには、渡した props に加えて close と setLoading を props として渡す。
+ * テンプレートに置けない処理(ボタンのクリックで画面を開くなど)から呼ぶためのもので、ブラウザでのみ動作する
+ *
+ * @param {Component} component 中身に表示するコンポーネント
+ * @param {Record<string, unknown>} [props] 中身のコンポーネントに渡す props
+ * @param {ShowOverlayBoxOptions} [options]
+ * @returns {OverlayBoxHandle}
+ */
+export function showOverlayBox(component: Component, props?: Record<string, unknown>, options?: ShowOverlayBoxOptions): OverlayBoxHandle {
+  return mountOverlayBox(component, props, options);
+}
+
+/**
+ * 開いている OverlayBox をすべて閉じる
+ */
+export function closeAllOverlayBoxes(): void {
+  for (const handle of [...openedHandles]) {
+    handle.close();
+  }
+}
+
+/**
+ * 呼び出したコンポーネントに結び付けて OverlayBox を開く関数を返す。
+ * 開いたボックスは、呼び出したコンポーネントがアンマウントされると閉じる。
+ * appContext を指定しなければ、呼び出したコンポーネントのアプリのコンテキストを中身に引き継ぐ。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @returns {{ showOverlayBox: typeof showOverlayBox }}
+ */
+export function useOverlayBox(): { showOverlayBox: typeof showOverlayBox } {
+  const owner = useWindowOwner('useOverlayBox');
+  return {
+    showOverlayBox: (component, props, options) => {
+      return owner.own((onClosed) => mountOverlayBox(component, props, {
+        appContext: owner.appContext,
+        ...options
+      }, onClosed));
+    }
+  };
+}

package/src/helpers/show-screen-loading.ts

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