@digitalwalletcorp/vue-core 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalwalletcorp/vue-core",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "type": "module",
   "description": "Basic UI components for Vue 3",
   "main": "lib/index.cjs",

package/src/accordion-section.vue

@@ -56,7 +56,7 @@ import type { Component, Slot } from 'vue';
 import { SvgTriangleButton } from '@digitalwalletcorp/vue-svg-icons';
 import LabelIcon from '@/label-icon.vue';
 import { useShrinkable } from '@/internal/use-shrinkable';
-import type { LabelPreset } from '@/types/label-preset';
+import type { LabelPreset } from '@/label-icon.vue';
 
 // 開閉ボタンのアイコンとラベルは別々に決める。どちらも、スロット/ラベルの指定 > プリセット の順で使う
 // 何も指定が無い場合だけ、既定の三角を表示する

package/src/data-table.vue

@@ -132,10 +132,10 @@ import { computed, inject, onBeforeUnmount, onMounted, ref, shallowRef, watch }
 import type { ClassValue, StyleValue } from 'vue';
 import { SvgPointingTriangle } from '@digitalwalletcorp/vue-svg-icons';
 import DataTableControls from '@/internal/data-table-controls.vue';
-import { compareValues, getValueByPath, resolveLabel, stringifyValue } from '@/internal/data-table-value';
+import { compareValues, getValueByPath, resolveLabel, stringifyValue } from '@/helpers/data-table';
 import { vueCoreOptionsKey } from '@/helpers/vue-core-options';
 import type { DataTableOptions } from '@/helpers/vue-core-options';
-import type { DataTableControlsPlacement, DataTableHeader, DataTableLabels, DataTableResolvedLabels, DataTableSortContext, DataTableSortMode } from '@/types/data-table';
+import type { DataTableControlsPlacement, DataTableHeader, DataTableLabels, DataTableResolvedLabels, DataTableSortContext, DataTableSortMode } from '@/helpers/data-table';
 
 /**
  * DataTable の props

package/src/helpers/data-table.ts

@@ -0,0 +1,250 @@
+/** 列の値の型。ソートの比較方法を決める */
+export type DataTableValueType = 'boolean' | 'string' | 'number' | 'object';
+
+/** ソートの方式。page は表示中の行を並べ替えて表示し、remote はソート条件を通知するだけで利用側が再取得する */
+export type DataTableSortMode = 'page' | 'remote';
+
+/** コントロール(ページネーション・総件数・表示件数・ダウンロードボタン)を出す位置 */
+export type DataTableControlsPlacement = 'both' | 'top' | 'bottom' | 'none';
+
+/**
+ * CSV に出力する列の定義
+ */
+export interface DataTableCsvColumn<T = unknown> {
+  /** true なら出力しない */
+  disabled?: boolean;
+  /** 値を取り出すキー。ドット区切りで入れ子を辿る。未指定なら DataTableHeader.id。'$index' は行番号 */
+  key?: string;
+  /** 列名。未指定なら DataTableHeader.label。言語切替に追従させる場合は関数で渡す */
+  label?: string | (() => string);
+  /** 値の整形。指定したときは key を使わない */
+  format?: (row: T) => unknown;
+}
+
+/**
+ * ヘッダの定義
+ */
+export interface DataTableHeader<T = unknown> {
+  /** 列を識別するキー。ソートで値を取り出すキーにもなる */
+  id: string;
+  /** 見出し。言語切替に追従させる場合は関数で渡す */
+  label: string | (() => string);
+  /** true なら label を HTML として描画する */
+  html?: boolean;
+  /** ソートで値を取り出すキー。id と違うキーで並べるときに指定する。ドット区切りで入れ子を辿る */
+  sortKey?: string;
+  /** 値の型。ソートの比較方法を決める。未指定なら string */
+  type?: DataTableValueType;
+  /** 行同士を比較する関数。指定したときは sortKey と type を使わない。昇順の並びで a が前なら負の数を返す */
+  compare?: (a: T, b: T) => number;
+  /** 列の幅。数値は px */
+  width?: string | number;
+  /** 列の最小幅。数値は px */
+  minWidth?: string | number;
+  /** 列の最大幅。数値は px */
+  maxWidth?: string | number;
+  /** th の rowspan */
+  rowspan?: string | number;
+  /** th の colspan */
+  colspan?: string | number;
+  /** th の title 属性 */
+  title?: string;
+  /** CSV の出力定義。true なら id の値を label の列名で出力する。未指定なら出力しない */
+  csv?: boolean | DataTableCsvColumn<T>[];
+}
+
+/**
+ * 表示する文言。言語切替に追従させる場合は関数で渡す
+ */
+export interface DataTableLabels {
+  /** 総件数の見出し */
+  totalCount?: string | (() => string);
+  /** 総件数の後ろに付ける単位 */
+  totalUnit?: string | (() => string);
+  /** 1ページあたりの表示件数の見出し */
+  limit?: string | (() => string);
+  /** データが無いときの表示 */
+  noData?: string | (() => string);
+  /** ページ番号の選択の見出し。showPageSelect のときに表示する */
+  pageNumber?: string | (() => string);
+  /** ページダウンロードボタンの title */
+  downloadPage?: string | (() => string);
+  /** 全件ダウンロードボタンの title */
+  downloadAll?: string | (() => string);
+  /** 先頭ページへ移動するボタンの読み上げ名 */
+  firstPage?: string | (() => string);
+  /** 前のページへ移動するボタンの読み上げ名 */
+  previousPage?: string | (() => string);
+  /** 前のページ番号の組へ移動するボタンの読み上げ名 */
+  previousPages?: string | (() => string);
+  /** 次のページ番号の組へ移動するボタンの読み上げ名 */
+  nextPages?: string | (() => string);
+  /** 次のページへ移動するボタンの読み上げ名 */
+  nextPage?: string | (() => string);
+  /** 末尾ページへ移動するボタンの読み上げ名 */
+  lastPage?: string | (() => string);
+}
+
+/** 関数を評価した後の文言 */
+export type DataTableResolvedLabels = Record<keyof DataTableLabels, string>;
+
+/**
+ * ソートの状態
+ */
+export interface DataTableSortContext {
+  /** ソートしているヘッダの id。ソートしていなければ空文字 */
+  sortKey: string;
+  /** 降順なら true */
+  descending: boolean;
+}
+
+/**
+ * ドット区切りのパスで入れ子の値を取り出す。途中が null なら undefined
+ *
+ * @param {unknown} obj
+ * @param {string} path 'a.b.c' の形。'a[0].b' は 'a.0.b' と同じ
+ * @returns {unknown}
+ */
+export const getValueByPath = (obj: unknown, path: string): unknown => {
+  let value: unknown = obj;
+  for (const key of path.replace(/\[(\w+)\]/g, '.$1').split('.')) {
+    if (value == null) {
+      return undefined;
+    }
+    value = (value as Record<string, unknown>)[key];
+  }
+  return value;
+};
+
+/**
+ * 文字列または文字列を返す関数から文字列を得る
+ *
+ * @param {string | (() => string)} label
+ * @returns {string}
+ */
+export const resolveLabel = (label: string | (() => string) | undefined): string => {
+  if (typeof label === 'function') {
+    return label();
+  }
+  return label ?? '';
+};
+
+const toBoolean = (value: unknown): boolean => {
+  return value === true || value === 'true' || value === '1' || value === 'on' || value === 1;
+};
+
+/**
+ * カンマ付きの文字列も数値として扱うため、符号・数字・小数点だけを残して数値化する
+ */
+const toNumber = (value: unknown): number => {
+  if (typeof value === 'number') {
+    return value;
+  }
+  return Number(String(value).replace(/[^+\-\d.]/g, ''));
+};
+
+/**
+ * 型に応じて2つの値を比較する。null / undefined は最小として扱う
+ *
+ * @param {unknown} a
+ * @param {unknown} b
+ * @param {DataTableValueType} type
+ * @returns {number} a が前なら負の数、後ろなら正の数、等しければ 0
+ */
+export const compareValues = (a: unknown, b: unknown, type: DataTableValueType): number => {
+  if (a == null && b == null) {
+    return 0;
+  }
+  if (a == null) {
+    return -1;
+  }
+  if (b == null) {
+    return 1;
+  }
+  if (a === b) {
+    return 0;
+  }
+  switch (type) {
+    case 'boolean':
+      return (toBoolean(a) ? 1 : 0) - (toBoolean(b) ? 1 : 0);
+    case 'number': {
+      const numA = toNumber(a);
+      const numB = toNumber(b);
+      if (Number.isNaN(numA) || Number.isNaN(numB)) {
+        return (Number.isNaN(numA) ? 0 : 1) - (Number.isNaN(numB) ? 0 : 1);
+      }
+      return numA - numB;
+    }
+    case 'object':
+      return stringifyValue(a).localeCompare(stringifyValue(b));
+    default:
+      return String(a).localeCompare(String(b));
+  }
+};
+
+/**
+ * 行の同一性の判定に使う文字列にする。bigint は文字列にし、循環参照は空文字にする
+ *
+ * @param {unknown} value
+ * @returns {string}
+ */
+export const stringifyValue = (value: unknown): string => {
+  try {
+    return JSON.stringify(value, (_, v) => typeof v === 'bigint' ? v.toString() : v) ?? '';
+  } catch {
+    return '';
+  }
+};
+
+/** 行番号を出力するキー */
+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 → floating-component.ts}

@@ -1,8 +1,9 @@
 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';
+import { toMessageText } from '@/internal/message';
+import { mountWindow, useWindowOwner } from '@/internal/window-control';
+import type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '@/internal/window-control';
 
 /** showFloatingComponent が中身のコンポーネントに props として渡す関数 */
 export type FloatingComponentContentProps = MovableWindowContentProps;
@@ -89,10 +90,6 @@ const renderComponent = (component: Component, props?: Record<string, unknown>)
   });
 };
 
-const toMessageText = (message: string | object): string => {
-  return typeof message === 'string' ? message : JSON.stringify(message, null, 2);
-};
-
 const renderMessage = (message: string | object, html: boolean | undefined) => (): VNode => {
   if (html && typeof message === 'string') {
     return h('div', { class: 'dwui-floating-component-message', innerHTML: message });

package/src/helpers/{show-modal-dialog.ts → modal-dialog.ts}

@@ -1,7 +1,26 @@
 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';
+
+/** モーダルダイアログに表示するメッセージ。オブジェクトは整形した JSON 風のテキストで表示する */
+export type ModalDialogMessage = string | object;
+
+/** モーダルダイアログの種類 */
+export type ModalDialogType = 'info' | 'confirm' | 'warn' | 'error';
+
+/** モーダルダイアログに並べるボタンの種類 */
+export type ModalDialogButton = 'ok' | 'yes' | 'no' | 'cancel';
+
+/** モーダルダイアログを閉じたボタン。Esc で閉じたときは cancel */
+export type ModalDialogResult = ModalDialogButton;
+
+/** モーダルダイアログに表示する画像。文字列は画像の URL */
+export type ModalDialogImage = string | {
+  /** 画像の URL */
+  src: string;
+  /** 代替テキスト */
+  alt: string;
+};
 
 export interface ShowModalDialogOptions {
   /** ダイアログの種類 */
@@ -38,11 +57,11 @@ export interface ShowModalDialogOptions {
 /**
  * ModalDialog を body の末尾に描画して開き、閉じたら取り外す。ブラウザでのみ動作する
  *
- * @param {string | string[]} message 表示する文字列。配列なら1要素を1段落として表示する
+ * @param {ModalDialogMessage | ModalDialogMessage[]} message 表示するメッセージ。配列なら1要素を1段落として表示する
  * @param {ShowModalDialogOptions} [options]
  * @returns {Promise<ModalDialogResult>} 閉じたボタン
  */
-export function showModalDialog(message: string | string[], options?: ShowModalDialogOptions): Promise<ModalDialogResult> {
+export function showModalDialog(message: ModalDialogMessage | ModalDialogMessage[], options?: ShowModalDialogOptions): Promise<ModalDialogResult> {
   const { icon, appContext, ...dialogProps } = options ?? {};
   return new Promise((resolve) => {
     const container = document.createElement('div');
@@ -71,7 +90,7 @@ export function showModalDialog(message: string | string[], options?: ShowModalD
  * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
  * @returns {Promise<ModalDialogResult>} 閉じたボタン
  */
-export function showInformationDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
+export function showInformationDialog(message: ModalDialogMessage | ModalDialogMessage[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
   return showModalDialog(message, {
     ...options,
     type: 'info'
@@ -85,7 +104,7 @@ export function showInformationDialog(message: string | string[], options?: Omit
  * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
  * @returns {Promise<ModalDialogResult>} 閉じたボタン
  */
-export function showConfirmationDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
+export function showConfirmationDialog(message: ModalDialogMessage | ModalDialogMessage[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
   return showModalDialog(message, {
     ...options,
     type: 'confirm'
@@ -99,7 +118,7 @@ export function showConfirmationDialog(message: string | string[], options?: Omi
  * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
  * @returns {Promise<ModalDialogResult>} 閉じたボタン
  */
-export function showWarningDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
+export function showWarningDialog(message: ModalDialogMessage | ModalDialogMessage[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
   return showModalDialog(message, {
     ...options,
     type: 'warn'
@@ -113,7 +132,7 @@ export function showWarningDialog(message: string | string[], options?: Omit<Sho
  * @param {Omit<ShowModalDialogOptions, 'type'>} [options]
  * @returns {Promise<ModalDialogResult>} 閉じたボタン
  */
-export function showErrorDialog(message: string | string[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
+export function showErrorDialog(message: ModalDialogMessage | ModalDialogMessage[], options?: Omit<ShowModalDialogOptions, 'type'>): Promise<ModalDialogResult> {
   return showModalDialog(message, {
     ...options,
     type: 'error'

package/src/helpers/{show-overlay-box.ts → overlay-box.ts}

@@ -1,8 +1,11 @@
 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';
+import { mountWindow, useWindowOwner } from '@/internal/window-control';
+import type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '@/internal/window-control';
+
+/** 開いている OverlayBox を開いた順に持つ。Esc では最後に開いたものだけを閉じる */
+export const openedOverlayBoxes: symbol[] = [];
 
 /** showOverlayBox が中身のコンポーネントに props として渡す関数 */
 export type OverlayBoxContentProps = MovableWindowContentProps;

package/src/helpers/{show-snackbar.ts → snackbar.ts}

@@ -1,7 +1,25 @@
 import { h, render, shallowReactive } from 'vue';
 import type { ClassValue, StyleValue } from 'vue';
 import SnackbarContainer from '@/internal/snackbar-container.vue';
-import type { SnackbarDirection, SnackbarItem, SnackbarPlacement } from '@/internal/snackbar-item';
+
+/** snackbar を表示する画面上の位置 */
+export type SnackbarPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+
+/** 同じ表示領域に並べる向き。overlap は同じ位置に重ねて新しいものを前面に出し、column は縦に積み、row は横に並べて端で折り返す */
+export type SnackbarDirection = 'overlap' | 'column' | 'row';
+
+/** 表示領域に並べる snackbar 1件分の内容 */
+export interface SnackbarItem {
+  id: number;
+  message: string;
+  title?: string;
+  label?: string;
+  timestamp?: string;
+  clearable: boolean;
+  clearLabel: string;
+  class?: ClassValue;
+  style?: StyleValue;
+}
 
 /** snackbar が閉じた理由。click はクリック、duration は表示時間の経過、clear は一括消去ボタンと closeAllSnackbars()、handle は SnackbarHandle の close() */
 export type SnackbarCloseReason = 'click' | 'duration' | 'clear' | 'handle';

package/src/index.ts

@@ -9,7 +9,7 @@ export type { Props as HelpPopperProps, Emits as HelpPopperEmits, Slots as HelpP
 export type { Props as HourglassLoadingProps } from '@/hourglass-loading.vue';
 export type { Props as IntersectionLazyComponentProps, Emits as IntersectionLazyComponentEmits, Slots as IntersectionLazyComponentSlots } from '@/intersection-lazy-component.vue';
 export type { Props as LabelButtonProps, Slots as LabelButtonSlots } from '@/label-button.vue';
-export type { Props as LabelIconProps, Slots as LabelIconSlots } from '@/label-icon.vue';
+export type { Props as LabelIconProps, Slots as LabelIconSlots, LabelPreset } from '@/label-icon.vue';
 export type { Props as ModalDialogProps, Emits as ModalDialogEmits, Slots as ModalDialogSlots } from '@/modal-dialog.vue';
 export type { Props as OverlayBoxProps, Emits as OverlayBoxEmits, Slots as OverlayBoxSlots } from '@/overlay-box.vue';
 export type { Props as PageSectionProps, Slots as PageSectionSlots } from '@/page-section.vue';
@@ -18,23 +18,20 @@ export type { Props as ScreenLoadingProps } from '@/screen-loading.vue';
 export type { Props as TabContentProps, Slots as TabContentSlots } from '@/tab-content.vue';
 export type { Props as TabGroupProps, Slots as TabGroupSlots } from '@/tab-group.vue';
 export type { Props as WarningPopperProps, Emits as WarningPopperEmits, Slots as WarningPopperSlots } from '@/warning-popper.vue';
-export { headersToCsvColumns, rowToCsvColumns } from '@/helpers/data-table-csv';
-export type { DataTableControlsPlacement, DataTableCsvColumn, DataTableHeader, DataTableLabels, DataTableResolvedLabels, DataTableSortContext, DataTableSortMode, DataTableValueType } from '@/types/data-table';
-export { closeAllFloatingComponents, showFloatingComponent, showFloatingMessage, useFloatingComponent } from '@/helpers/show-floating-component';
-export type { FloatingComponentContentProps, FloatingComponentHandle, ShowFloatingComponentOptions, ShowFloatingMessageOptions } from '@/helpers/show-floating-component';
-export { showConfirmationDialog, showErrorDialog, showInformationDialog, showModalDialog, showWarningDialog } from '@/helpers/show-modal-dialog';
-export type { ShowModalDialogOptions } from '@/helpers/show-modal-dialog';
-export type { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from '@/types/modal-dialog';
-export { closeAllOverlayBoxes, showOverlayBox, useOverlayBox } from '@/helpers/show-overlay-box';
-export type { OverlayBoxContentProps, OverlayBoxHandle, ShowOverlayBoxOptions } from '@/helpers/show-overlay-box';
-export { showScreenLoading } from '@/helpers/show-screen-loading';
-export type { ScreenLoadingHandle, ShowScreenLoadingOptions } from '@/helpers/show-screen-loading';
-export { closeAllSnackbars, showSnackbar } from '@/helpers/show-snackbar';
-export type { ShowSnackbarOptions, SnackbarCloseReason, SnackbarHandle } from '@/helpers/show-snackbar';
-export type { SnackbarDirection, SnackbarPlacement } from '@/internal/snackbar-item';
-export type { LabelPreset } from '@/types/label-preset';
-export type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '@/types/movable-window';
-export type { TabContentStatus } from '@/internal/tab-group-context';
+export { headersToCsvColumns, rowToCsvColumns } from '@/helpers/data-table';
+export type { DataTableControlsPlacement, DataTableCsvColumn, DataTableHeader, DataTableLabels, DataTableResolvedLabels, DataTableSortContext, DataTableSortMode, DataTableValueType } from '@/helpers/data-table';
+export { closeAllFloatingComponents, showFloatingComponent, showFloatingMessage, useFloatingComponent } from '@/helpers/floating-component';
+export type { FloatingComponentContentProps, FloatingComponentHandle, ShowFloatingComponentOptions, ShowFloatingMessageOptions } from '@/helpers/floating-component';
+export { showConfirmationDialog, showErrorDialog, showInformationDialog, showModalDialog, showWarningDialog } from '@/helpers/modal-dialog';
+export type { ModalDialogButton, ModalDialogImage, ModalDialogMessage, ModalDialogResult, ModalDialogType, ShowModalDialogOptions } from '@/helpers/modal-dialog';
+export { closeAllOverlayBoxes, showOverlayBox, useOverlayBox } from '@/helpers/overlay-box';
+export type { OverlayBoxContentProps, OverlayBoxHandle, ShowOverlayBoxOptions } from '@/helpers/overlay-box';
+export { showScreenLoading } from '@/helpers/screen-loading';
+export type { ScreenLoadingHandle, ShowScreenLoadingOptions } from '@/helpers/screen-loading';
+export { closeAllSnackbars, showSnackbar } from '@/helpers/snackbar';
+export type { ShowSnackbarOptions, SnackbarCloseReason, SnackbarDirection, SnackbarHandle, SnackbarPlacement } from '@/helpers/snackbar';
+export type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '@/internal/window-control';
+export type { TabContentStatus } from '@/internal/tab-group';
 export { vueCoreOptionsKey } from '@/helpers/vue-core-options';
 export type { DataTableOptions, VueCoreOptions } from '@/helpers/vue-core-options';
 export type { PopoverPlacement } from '@/internal/anchored-position';

package/src/internal/data-table-controls.vue

@@ -67,7 +67,7 @@ DataTable の上下に置くコントロール
 import { computed } from 'vue';
 import { SvgCloudDownload, SvgFolderDownload } from '@digitalwalletcorp/vue-svg-icons';
 import Pagination from '@/internal/pagination.vue';
-import type { DataTableResolvedLabels } from '@/types/data-table';
+import type { DataTableResolvedLabels } from '@/helpers/data-table';
 
 interface Props {
   /** ページネーションを表示するか */

package/src/internal/floating-component.vue

@@ -50,8 +50,8 @@ import type { ClassValue, StyleValue } from 'vue';
 import CopyButton from '@/copy-button.vue';
 import { computeAnchoredPosition } from '@/internal/anchored-position';
 import MovableWindow from '@/internal/movable-window.vue';
-import { nextWindowOrder } from '@/internal/window-order';
-import type { MovableWindowDragMode } from '@/types/movable-window';
+import { nextWindowOrder } from '@/internal/window-control';
+import type { MovableWindowDragMode } from '@/internal/window-control';
 
 interface Props {
   /** 表示するか */

package/src/internal/message.ts

@@ -0,0 +1,118 @@
+/** オブジェクト・配列を表す JSON 文字列か判定するためのパターン */
+const JSON_LIKE_PATTERN = /^\s*[[{]/;
+
+/**
+ * 文字列またはオブジェクトを、ダイアログやウィンドウに表示するテキストにする
+ * オブジェクトは 2 スペースで字下げした JSON 風のテキストにする。読みやすさを優先し、JSON として元に戻せる形にはしない
+ * ・JSON 文字列を値に持つ項目は、オブジェクトとして展開する
+ * ・文字列の値はエスケープせず、改行や引用符もそのまま出す
+ * ・Error は name と message、bigint は文字列、循環参照は "[Circular]" にし、undefined と関数の項目は省く
+ *
+ * @param {string | object} message
+ * @returns {string}
+ */
+export function toMessageText(message: string | object): string {
+  if (typeof message === 'string') {
+    return message;
+  }
+  if (message instanceof Error) {
+    return String(message);
+  }
+  return formatValue(message, 0, '', []) ?? String(message);
+}
+
+/**
+ * オブジェクトまたは配列を表す JSON 文字列ならパースした値を、それ以外なら undefined を返す
+ *
+ * @param {string} value
+ * @returns {unknown}
+ */
+function parseJsonLike(value: string): unknown {
+  if (!JSON_LIKE_PATTERN.test(value)) {
+    return undefined;
+  }
+  try {
+    const parsed: unknown = JSON.parse(value);
+    return typeof parsed === 'object' && parsed !== null ? parsed : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * 値を表示用のテキストにする。JSON に出力しない値(undefined・関数・symbol)は undefined を返す
+ *
+ * @param {unknown} value
+ * @param {number} depth ルートを 0 とするネストの深さ
+ * @param {string} key 親オブジェクトでのキー。toJSON に渡す
+ * @param {object[]} ancestors 処理中の親オブジェクト。循環参照の検出に使う
+ * @returns {string | undefined}
+ */
+function formatValue(value: unknown, depth: number, key: string, ancestors: object[]): string | undefined {
+  switch (typeof value) {
+    case 'string': {
+      const parsed = parseJsonLike(value);
+      return parsed === undefined ? `"${value}"` : formatValue(parsed, depth, key, ancestors);
+    }
+    case 'number':
+    case 'boolean':
+      return String(value);
+    case 'bigint':
+      return `"${value.toString()}"`;
+    case 'object': {
+      if (value === null) {
+        return 'null';
+      }
+      if (value instanceof Error) {
+        return `"${String(value)}"`;
+      }
+      const { toJSON } = value as { toJSON?: (key: string) => unknown };
+      if (typeof toJSON === 'function') {
+        return formatValue(toJSON.call(value, key), depth, key, ancestors);
+      }
+      if (ancestors.includes(value)) {
+        return '"[Circular]"';
+      }
+      ancestors.push(value);
+      try {
+        return formatContainer(value, depth, ancestors);
+      } finally {
+        ancestors.pop();
+      }
+    }
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * オブジェクトまたは配列の要素を整形して括弧で囲む
+ *
+ * @param {object} value
+ * @param {number} depth
+ * @param {object[]} ancestors
+ * @returns {string}
+ */
+function formatContainer(value: object, depth: number, ancestors: object[]): string {
+  const isArray = Array.isArray(value);
+  const entries: string[] = [];
+  if (isArray) {
+    for (let i = 0; i < value.length; i++) {
+      entries.push(formatValue(value[i], depth + 1, String(i), ancestors) ?? 'null');
+    }
+  } else {
+    for (const [key, item] of Object.entries(value)) {
+      const formatted = formatValue(item, depth + 1, key, ancestors);
+      if (formatted !== undefined) {
+        entries.push(`"${key}": ${formatted}`);
+      }
+    }
+  }
+  const [open, close] = isArray ? ['[', ']'] : ['{', '}'];
+  if (entries.length === 0) {
+    return `${open}${close}`;
+  }
+  const indent = '  '.repeat(depth + 1);
+  const closeIndent = '  '.repeat(depth);
+  return `${open}\n${indent}${entries.join(`,\n${indent}`)}\n${closeIndent}${close}`;
+}

package/src/internal/movable-window.vue

@@ -80,7 +80,7 @@ import type { ClassValue, StyleValue } from 'vue';
 import { SvgCornerDiagonal, SvgNegativeSquaredCrossMark } from '@digitalwalletcorp/vue-svg-icons';
 import { useMovableWindow } from '@/internal/use-movable-window';
 import type { MovableWindowCorner } from '@/internal/use-movable-window';
-import type { MovableWindowDragMode } from '@/types/movable-window';
+import type { MovableWindowDragMode } from '@/internal/window-control';
 
 interface Props {
   /** 各部位のクラスの接頭辞。利用側のコンポーネントのクラス名(dwui-overlay-box など) */

package/src/internal/pagination.vue

@@ -144,7 +144,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import type { DataTableResolvedLabels } from '@/types/data-table';
+import type { DataTableResolvedLabels } from '@/helpers/data-table';
 import { SvgBlackArrow, SvgChevron, SvgChevronDouble } from '@digitalwalletcorp/vue-svg-icons';
 
 interface Props {

package/src/internal/snackbar-container.vue

@@ -68,7 +68,7 @@ showSnackbar から body 直下に描画して使う。
 <script setup lang="ts">
 import { computed } from 'vue';
 import { SvgWastebasket } from '@digitalwalletcorp/vue-svg-icons';
-import type { SnackbarDirection, SnackbarItem, SnackbarPlacement } from '@/internal/snackbar-item';
+import type { SnackbarDirection, SnackbarItem, SnackbarPlacement } from '@/helpers/snackbar';
 
 interface Props {
   /** 表示する位置 */

package/src/internal/use-movable-window.ts

@@ -1,6 +1,6 @@
 import { onBeforeUnmount, reactive, ref } from 'vue';
 import type { Ref } from 'vue';
-import type { MovableWindowDragMode } from '@/types/movable-window';
+import type { MovableWindowDragMode } from '@/internal/window-control';
 
 /** リサイズで掴んでいる角 */
 export type MovableWindowCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';