@digitalwalletcorp/vue-core 1.3.1 → 1.4.1

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,8 @@
 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 { mountWindow, useWindowOwner } from '@/internal/window-control';
+import type { MovableWindowContentProps, MovableWindowDragMode, MovableWindowHandle } from '@/internal/window-control';
 
 /** showFloatingComponent が中身のコンポーネントに props として渡す関数 */
 export type FloatingComponentContentProps = MovableWindowContentProps;

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

@@ -1,7 +1,23 @@
 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 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 {
   /** ダイアログの種類 */

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/helpers/vue-core-options.ts

@@ -0,0 +1,20 @@
+import type { InjectionKey } from 'vue';
+import type { Props } from '@/data-table.vue';
+
+/**
+ * DataTable のアプリ既定の設定。vueCoreOptionsKey の dataTable で渡す。
+ * props のうちデータと表示の状態を除いた項目を持ち、DataTable の props に同じ名前の指定があればそちらが優先される
+ */
+export type DataTableOptions = Partial<Omit<Props, 'dataList' | 'headers' | 'loading' | 'totalCount' | 'current' | 'limit'>>;
+
+/** アプリ全体の設定 */
+export type VueCoreOptions = {
+  /** DataTable のアプリ既定の設定 */
+  dataTable?: DataTableOptions;
+};
+
+/**
+ * アプリ全体の設定を provide/inject するためのキー
+ * provide は任意。画面の上位または app.provide で使う
+ */
+export const vueCoreOptionsKey: InjectionKey<VueCoreOptions> = Symbol('dwui-vue-core-options');

package/src/index.ts

@@ -2,13 +2,14 @@ export * from '@/components';
 export type { Props as AccordionFieldsetProps, Slots as AccordionFieldsetSlots } from '@/accordion-fieldset.vue';
 export type { Props as AccordionSectionProps, Slots as AccordionSectionSlots } from '@/accordion-section.vue';
 export type { Props as CopyButtonProps, Emits as CopyButtonEmits, Slots as CopyButtonSlots } from '@/copy-button.vue';
+export type { Props as DataTableProps, Emits as DataTableEmits, Slots as DataTableSlots } from '@/data-table.vue';
 export type { Props as DarkModeSelectorProps, Emits as DarkModeSelectorEmits, Slots as DarkModeSelectorSlots } from '@/dark-mode-selector.vue';
 export type { Props as HelpButtonProps, Emits as HelpButtonEmits, Slots as HelpButtonSlots } from '@/help-button.vue';
 export type { Props as HelpPopperProps, Emits as HelpPopperEmits, Slots as HelpPopperSlots } from '@/help-popper.vue';
 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';
@@ -17,21 +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, DataTableEmits, DataTableHeader, DataTableLabels, DataTableProps, DataTableResolvedLabels, DataTableSlots, 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, 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/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';

package/src/internal/{mount-window.ts → window-control.ts}

@@ -1,6 +1,36 @@
 import { defineComponent, getCurrentInstance, h, onBeforeUnmount, ref, render } from 'vue';
 import type { AppContext, VNode } from 'vue';
-import type { MovableWindowHandle } from '@/types/movable-window';
+
+/** ドラッグで移動するときに掴む範囲。body はウィンドウ全体、header は見出しだけ */
+export type MovableWindowDragMode = 'body' | 'header';
+
+/** showOverlayBox / showFloatingComponent が中身のコンポーネントに props として渡す関数 */
+export interface MovableWindowContentProps {
+  /** ウィンドウを閉じる */
+  close: () => void;
+  /** ウィンドウのローディング表示を切り替える */
+  setLoading: (loading: boolean) => void;
+}
+
+/** showOverlayBox / showFloatingComponent が返す、表示中のウィンドウを操作するためのハンドル */
+export interface MovableWindowHandle {
+  /** ウィンドウを閉じ、閉じ終わったら取り外す */
+  close: () => void;
+  /** ウィンドウのローディング表示を切り替える */
+  setLoading: (loading: boolean) => void;
+}
+
+let lastOrder = 0;
+
+/**
+ * ウィンドウ(OverlayBox / FloatingComponent)の重なり順を返す。後から呼んだものほど大きく、前面に出る
+ *
+ * @returns {number}
+ */
+export const nextWindowOrder = (): number => {
+  lastOrder += 1;
+  return lastOrder;
+};
 
 /** ウィンドウのコンポーネントに渡す、開閉とローディングの props とリスナー */
 export interface WindowProps {

package/src/label-button.vue

@@ -34,7 +34,7 @@
 <script setup lang="ts">
 import type { ClassValue, StyleValue } from 'vue';
 import LabelIcon from '@/label-icon.vue';
-import type { LabelPreset } from '@/types/label-preset';
+import type { LabelPreset } from '@/label-icon.vue';
 
 export interface Props {
   /** アイコンとラベルの組み合わせ */

package/src/label-icon.vue

@@ -28,8 +28,19 @@
 </template>
 
 <script setup lang="ts">
-import type { ClassValue, StyleValue } from 'vue';
-import type { LabelPreset } from '@/types/label-preset';
+import type { ClassValue, Component, StyleValue } from 'vue';
+
+/**
+ * アイコンとラベルの組み合わせ
+ */
+export interface LabelPreset {
+  /** アイコンのコンポーネント */
+  icon: Component;
+  /** アイコンに渡すProps */
+  iconProps?: Record<string, unknown>;
+  /** ラベル。言語切替に追従させる場合は、描画のたびに呼ばれる関数で渡す */
+  label: string | (() => string);
+}
 
 export interface Props {
   /** アイコンとラベルの組み合わせ */

package/src/modal-dialog.vue

@@ -84,7 +84,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, useId, watch } from 'vue';
 import { SvgCritical, SvgInfo, SvgQuestion, SvgWarningSign } from '@digitalwalletcorp/vue-svg-icons';
-import type { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from '@/types/modal-dialog';
+import type { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from '@/helpers/modal-dialog';
 
 export interface Props {
   /** ダイアログの種類 */

package/src/overlay-box.vue

@@ -45,9 +45,9 @@ FloatingComponent とは開いた順に重なり、後から開いたものが
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import MovableWindow from '@/internal/movable-window.vue';
-import { openedOverlayBoxes } from '@/internal/opened-overlay-boxes';
-import { nextWindowOrder } from '@/internal/window-order';
-import type { MovableWindowDragMode } from '@/types/movable-window';
+import { openedOverlayBoxes } from '@/helpers/overlay-box';
+import { nextWindowOrder } from '@/internal/window-control';
+import type { MovableWindowDragMode } from '@/internal/window-control';
 
 export interface Props {
   /** 見出し。title スロットで差し替えられる */

package/src/tab-content.vue

@@ -36,8 +36,8 @@ TabGroupの中に置くタブ1つ分の中身
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import type { ClassValue, Slot, StyleValue } from 'vue';
-import { tabGroupContextKey } from '@/internal/tab-group-context';
-import type { TabContentStatus } from '@/internal/tab-group-context';
+import { tabGroupContextKey } from '@/internal/tab-group';
+import type { TabContentStatus } from '@/internal/tab-group';
 
 // tabId・label・header*・status・#iconは、TabGroupが見出しを描画するために読む
 export interface Props {

package/src/tab-group.vue

@@ -61,8 +61,8 @@ import { computed, onMounted, provide, ref, useId } from 'vue';
 import type { ClassValue, Slot, StyleValue, VNode } from 'vue';
 import LabelIcon from '@/label-icon.vue';
 import TabContent from '@/tab-content.vue';
-import { tabGroupContextKey } from '@/internal/tab-group-context';
-import type { TabContentStatus } from '@/internal/tab-group-context';
+import { tabGroupContextKey } from '@/internal/tab-group';
+import type { TabContentStatus } from '@/internal/tab-group';
 
 export interface Props {
   /** ラジオボタンのname。未指定なら自動で採番する */

package/lib/components-CKql5lWg.cjs

@@ -1 +0,0 @@
-"use strict";const n=require("./warning-popper.vue_vue_type_style_index_0_lang-CHmkjVCO.cjs"),_=Object.freeze(Object.defineProperty({__proto__:null,AccordionFieldset:n._sfc_main$5,AccordionSection:n._sfc_main$6,CopyButton:n._sfc_main$1,DarkModeSelector:n._sfc_main$7,DataTable:n._sfc_main$8,HelpButton:n._sfc_main$9,HelpPopper:n._sfc_main$10,HourglassLoading:n._sfc_main$11,IntersectionLazyComponent:n._sfc_main$12,LabelButton:n._sfc_main$13,LabelIcon:n._sfc_main$14,ModalDialog:n._sfc_main$2,OverlayBox:n._sfc_main$3,PageSection:n._sfc_main$15,PageTitle:n._sfc_main$16,ScreenLoading:n._sfc_main$4,TabContent:n._sfc_main$17,TabGroup:n._sfc_main$18,WarningPopper:n._sfc_main$19},Symbol.toStringTag,{value:"Module"}));exports.components=_;

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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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[];