@digitalwalletcorp/vue-core 1.3.0 → 1.4.0

package/package.json

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

package/src/data-table.vue

@@ -19,12 +19,12 @@
 <template>
   <section
     class="dwui-data-table"
-    :class="{ 'dwui-selectable': props.selectable }"
+    :class="{ 'dwui-selectable': settings.selectable }"
   >
     <DataTableControls
-      v-if="props.controls === 'both' || props.controls === 'top'"
+      v-if="settings.controls === 'both' || settings.controls === 'top'"
       v-bind="controlProps"
-      :pagination="props.pagination === 'both' || props.pagination === 'top'"
+      :pagination="settings.pagination === 'both' || settings.pagination === 'top'"
       @emit:change-page="emit('emit:changePage', $event)"
       @emit:change-limit="emit('emit:changeLimit', $event)"
       @emit:download-page="emit('emit:downloadPage')"
@@ -33,14 +33,14 @@
     <div
       ref="refContent"
       class="dwui-data-table-content"
-      :class="[{ 'dwui-loading': props.loading }, props.contentClass]"
-      :style="props.contentStyle"
+      :class="[{ 'dwui-loading': props.loading }, settings.contentClass]"
+      :style="settings.contentStyle"
       tabindex="-1"
       @keydown="onKeyDown"
     >
       <table
-        :class="props.tableClass"
-        :style="props.tableStyle"
+        :class="settings.tableClass"
+        :style="settings.tableStyle"
       >
         <thead ref="refThead">
           <tr>
@@ -57,8 +57,8 @@
               <div class="dwui-data-table-header">
                 <span
                   class="dwui-data-table-sort"
-                  :role="props.sortable ? 'button' : undefined"
-                  :tabindex="props.sortable ? 0 : undefined"
+                  :role="settings.sortable ? 'button' : undefined"
+                  :tabindex="settings.sortable ? 0 : undefined"
                   @click="onClickSort(header)"
                   @keydown.enter.prevent="onClickSort(header)"
                   @keydown.space.prevent="onClickSort(header)"
@@ -76,7 +76,7 @@
                 </span>
               </div>
               <div
-                v-if="props.resizable && index < innerHeaders.length - 1"
+                v-if="settings.resizable && index < innerHeaders.length - 1"
                 class="dwui-data-table-resizer"
                 @pointerdown="onResizeStart($event, index)"
                 @pointermove="onResizing"
@@ -89,13 +89,14 @@
         <tbody ref="refTbody">
           <template v-if="!props.loading">
             <slot
+              :rows="rows"
               :click-row="clickRow"
               :dblclick-row="dblclickRow"
               :row-number="rowNumber"
               :selected-index="selectedIndex"
             />
             <tr
-              v-if="props.dataList.length === 0 && props.showNoData"
+              v-if="props.dataList.length === 0 && settings.showNoData"
               class="dwui-data-table-no-data"
             >
               <td :colspan="totalColSize">
@@ -115,9 +116,9 @@
       </div>
     </div>
     <DataTableControls
-      v-if="props.controls === 'both' || props.controls === 'bottom'"
+      v-if="settings.controls === 'both' || settings.controls === 'bottom'"
       v-bind="controlProps"
-      :pagination="props.pagination === 'both' || props.pagination === 'bottom'"
+      :pagination="settings.pagination === 'both' || settings.pagination === 'bottom'"
       @emit:change-page="emit('emit:changePage', $event)"
       @emit:change-limit="emit('emit:changeLimit', $event)"
       @emit:download-page="emit('emit:downloadPage')"
@@ -127,32 +128,130 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
-import type { StyleValue } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+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 type { DataTableEmits, DataTableHeader, DataTableLabels, DataTableProps, DataTableResolvedLabels, DataTableSlots, DataTableSortContext } from '@/types/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';
 
-const props = withDefaults(defineProps<DataTableProps<T>>(), {
+/**
+ * DataTable の props
+ */
+export interface Props<T = unknown> {
+  /** 表示している行のデータ。スロットで描画する行と同じ順に並んでいること */
+  dataList: T[];
+  /** ヘッダ。id は一意であること */
+  headers: DataTableHeader<T>[];
+  /** 読み込み中。true の間は行を描画せず読み込み中の表示を出す */
+  loading?: boolean;
+  /** 総件数。未指定なら dataList の件数 */
+  totalCount?: number;
+  /** 現在ページ(1起点) */
+  current?: number;
+  /** 1ページあたりの表示件数 */
+  limit?: number;
+  /** 1ページあたりの表示件数の上限 */
+  maxLimit?: number;
+  /** ページネーションに並べるページ番号の最大数 */
+  maxPagination?: number;
+  /** 行をクリックで選択できるか */
+  selectable?: boolean;
+  /** コントロールを出す位置 */
+  controls?: DataTableControlsPlacement;
+  /** ページネーションを出す位置。controls が無い側には出ない */
+  pagination?: DataTableControlsPlacement;
+  /** ページダウンロードボタンを表示するか */
+  showDownloadPage?: boolean;
+  /** 全件ダウンロードボタンを表示するか */
+  showDownloadAll?: boolean;
+  /** 総件数を表示するか */
+  showTotal?: boolean;
+  /** 1ページあたりの表示件数の入力を表示するか */
+  showLimit?: boolean;
+  /** ページネーションにページ番号の選択を表示するか */
+  showPageSelect?: boolean;
+  /** dataList が空のときにデータが無い旨の行を表示するか */
+  showNoData?: boolean;
+  /** ヘッダの境界のドラッグで列幅を変えられるか */
+  resizable?: boolean;
+  /** ヘッダのクリックでソートできるか */
+  sortable?: boolean;
+  /** ソートの方式。未指定なら remote */
+  sortMode?: DataTableSortMode;
+  /** テーブルをスクロールする領域に付ける class */
+  contentClass?: ClassValue;
+  /** テーブルをスクロールする領域に付ける style */
+  contentStyle?: StyleValue;
+  /** table に付ける class */
+  tableClass?: ClassValue;
+  /** table に付ける style */
+  tableStyle?: StyleValue;
+  /** 表示する文言。未指定の項目は英語 */
+  labels?: DataTableLabels;
+  /** 総件数の整形。未指定なら en-US の桁区切り。SSR とクライアントで同じ文字列を返すこと */
+  formatTotalCount?: (count: number) => string;
+}
+
+/**
+ * DataTable が発行するイベント
+ */
+export interface Emits<T = unknown> {
+  /** 選択が変わった。クリックでの選択・解除、カーソルキーでの移動、読み込み完了時の解除で発行する。解除は undefined と -1 */
+  (e: 'emit:selectRow', value: T | undefined, index: number): void;
+  /** ソートの条件が変わった。sortMode に関わらず発行する */
+  (e: 'emit:changeSort', context: DataTableSortContext): void;
+  (e: 'emit:updateHeader', headers: DataTableHeader<T>[]): void;
+  (e: 'emit:dblclickRow', value: T, index: number): void;
+  (e: 'emit:changeLimit', limit: number): void;
+  (e: 'emit:changePage', page: number): void;
+  (e: 'emit:downloadPage'): void;
+  (e: 'emit:downloadAll'): void;
+}
+
+/**
+ * DataTable のスロット
+ */
+export interface Slots<T = unknown> {
+  /** 行。tr を rows と同じ順に並べ、tr の click で clickRow(row, index) を呼ぶ */
+  default?(props: {
+    /** 表示する行。sortMode が page のときはソートした順、それ以外は dataList そのもの */
+    rows: T[];
+    /** 行を選択する。選択している行なら選択を解除する */
+    clickRow: (row: T, index: number) => void;
+    /** 行を選択してダブルクリックを通知する */
+    dblclickRow: (row: T, index: number) => void;
+    /** 行のインデックスから、ページをまたいだ1起点の行番号を返す */
+    rowNumber: (index: number) => number;
+    /** 選択している行のインデックス。選択していなければ -1 */
+    selectedIndex: number;
+  }): unknown;
+  /** 読み込み中の表示。未指定なら既定のスピナー */
+  loading?(): unknown;
+}
+
+// 設定の props は未指定を undefined のまま受け、vueCoreOptionsKey の値とライブラリ既定で埋める(boolean が false にならないよう既定を明示する)
+const props = withDefaults(defineProps<Props<T>>(), {
   loading: false,
   totalCount: undefined,
   current: 1,
   limit: 100,
-  maxLimit: 9999,
-  maxPagination: 7,
-  selectable: true,
-  controls: 'both',
-  pagination: 'both',
-  showDownloadPage: true,
-  showDownloadAll: true,
-  showTotal: true,
-  showLimit: true,
-  showPageSelect: false,
-  showNoData: true,
-  resizable: true,
-  sortable: true,
-  sortMode: 'remote',
+  maxLimit: undefined,
+  maxPagination: undefined,
+  selectable: undefined,
+  controls: undefined,
+  pagination: undefined,
+  showDownloadPage: undefined,
+  showDownloadAll: undefined,
+  showTotal: undefined,
+  showLimit: undefined,
+  showPageSelect: undefined,
+  showNoData: undefined,
+  resizable: undefined,
+  sortable: undefined,
+  sortMode: undefined,
   formatTotalCount: undefined,
   contentClass: undefined,
   contentStyle: undefined,
@@ -161,9 +260,11 @@ const props = withDefaults(defineProps<DataTableProps<T>>(), {
   labels: undefined
 });
 
-const emit = defineEmits<DataTableEmits<T>>();
+const emit = defineEmits<Emits<T>>();
+
+defineSlots<Slots<T>>();
 
-defineSlots<DataTableSlots<T>>();
+const appOptions = inject(vueCoreOptionsKey, {});
 
 const refContent = ref<HTMLDivElement>();
 const refThead = ref<HTMLTableSectionElement>();
@@ -185,6 +286,45 @@ const innerHeaders = computed((): DataTableHeader<T>[] => {
   return props.headers.map(header => widths.value[header.id] == null ? header : { ...header, width: widths.value[header.id] });
 });
 
+/** 設定のライブラリ既定。labels は項目ごとに合わせるため別に持つ */
+const DEFAULT_SETTINGS: Omit<DataTableOptions, 'labels'> = {
+  maxLimit: 9999,
+  maxPagination: 7,
+  selectable: true,
+  controls: 'both',
+  pagination: 'both',
+  showDownloadPage: true,
+  showDownloadAll: true,
+  showTotal: true,
+  showLimit: true,
+  showPageSelect: false,
+  showNoData: true,
+  resizable: true,
+  sortable: true,
+  sortMode: 'remote',
+  contentClass: undefined,
+  contentStyle: undefined,
+  tableClass: undefined,
+  tableStyle: undefined,
+  formatTotalCount: undefined
+};
+
+type OptionalSettingKey = 'contentClass' | 'contentStyle' | 'tableClass' | 'tableStyle' | 'formatTotalCount';
+type DataTableSettings = Required<Omit<DataTableOptions, 'labels' | OptionalSettingKey>> & Pick<DataTableOptions, OptionalSettingKey>;
+
+/** 設定。props、vueCoreOptionsKey の dataTable、ライブラリ既定の順に、指定のあるものを使う */
+const settings = computed((): DataTableSettings => {
+  const resolved = { ...DEFAULT_SETTINGS } as DataTableSettings;
+  for (const source of [appOptions.dataTable ?? {}, props]) {
+    for (const key of Object.keys(DEFAULT_SETTINGS) as (keyof typeof DEFAULT_SETTINGS)[]) {
+      if (source[key] !== undefined) {
+        Object.assign(resolved, { [key]: source[key] });
+      }
+    }
+  }
+  return resolved;
+});
+
 const labels = computed((): DataTableResolvedLabels => {
   const merged: Required<DataTableLabels> = {
     totalCount: 'Total',
@@ -200,6 +340,7 @@ const labels = computed((): DataTableResolvedLabels => {
     nextPages: 'Next pages',
     nextPage: 'Next page',
     lastPage: 'Last page',
+    ...appOptions.dataTable?.labels,
     ...props.labels
   };
   const resolved = {} as DataTableResolvedLabels;
@@ -211,22 +352,22 @@ const labels = computed((): DataTableResolvedLabels => {
 });
 
 const limit = computed((): number => {
-  return Math.min(props.limit, props.maxLimit);
+  return Math.min(props.limit, settings.value.maxLimit);
 });
 
 const controlProps = computed(() => {
   return {
-    showTotal: props.showTotal,
-    showLimit: props.showLimit,
-    showPageSelect: props.showPageSelect,
-    showDownloadPage: props.showDownloadPage,
-    showDownloadAll: props.showDownloadAll,
+    showTotal: settings.value.showTotal,
+    showLimit: settings.value.showLimit,
+    showPageSelect: settings.value.showPageSelect,
+    showDownloadPage: settings.value.showDownloadPage,
+    showDownloadAll: settings.value.showDownloadAll,
     current: props.current,
     limit: limit.value,
-    maxLimit: props.maxLimit,
-    maxPagination: props.maxPagination,
+    maxLimit: settings.value.maxLimit,
+    maxPagination: settings.value.maxPagination,
     totalCount: props.totalCount ?? props.dataList.length,
-    formatTotalCount: props.formatTotalCount,
+    formatTotalCount: settings.value.formatTotalCount,
     labels: labels.value
   };
 });
@@ -234,13 +375,26 @@ const controlProps = computed(() => {
 /** 選択している行。行のオブジェクトが差し替わっても内容が同じなら選択を保てるよう、行そのものを持つ */
 const selectedRow = shallowRef<T | undefined>(undefined);
 
-/** 選択している行のインデックス。同じ参照が無ければ内容で探す */
+/** 表示する行。ページ内ソート中は dataList を並べ替えたコピー、それ以外は dataList そのもの */
+const rows = computed((): T[] => {
+  const header = settings.value.sortMode === 'page' ? props.headers.find(header => header.id === sortKey.value) : undefined;
+  if (!header) {
+    return props.dataList;
+  }
+  const compare = header.compare ?? ((a: T, b: T): number => {
+    const key = header.sortKey ?? header.id;
+    return compareValues(getValueByPath(a, key), getValueByPath(b, key), header.type ?? 'string');
+  });
+  return [...props.dataList].sort((a, b) => descending.value ? compare(b, a) : compare(a, b));
+});
+
+/** 選択している行の、表示順でのインデックス。同じ参照が無ければ内容で探す */
 const selectedIndex = computed((): number => {
   const selected = selectedRow.value;
   if (selected == null) {
     return -1;
   }
-  const index = props.dataList.indexOf(selected);
+  const index = rows.value.indexOf(selected);
   if (index !== -1) {
     return index;
   }
@@ -248,7 +402,7 @@ const selectedIndex = computed((): number => {
   if (json === '') {
     return -1;
   }
-  return props.dataList.findIndex(row => stringifyValue(row) === json);
+  return rows.value.findIndex(row => stringifyValue(row) === json);
 });
 
 /** データが無い行の colspan。colspan を持つヘッダはその数で数える */
@@ -279,7 +433,7 @@ const ariaSort = (id: string): 'ascending' | 'descending' | undefined => {
 };
 
 const caretDirection = (id: string): 'up' | 'down' | undefined => {
-  if (!props.sortable || sortKey.value !== id) {
+  if (!settings.value.sortable || sortKey.value !== id) {
     return undefined;
   }
   return descending.value ? 'down' : 'up';
@@ -289,8 +443,8 @@ const rowNumber = (index: number): number => {
   return (props.current - 1) * limit.value + index + 1;
 };
 
-/** スロットが描画した行。データが無い行は含めない */
-const rows = (): HTMLTableRowElement[] => {
+/** スロットが描画した行の要素。データが無い行は含めない */
+const rowElements = (): HTMLTableRowElement[] => {
   return Array.from(refTbody.value?.children ?? [])
     .filter((el): el is HTMLTableRowElement => el.tagName === 'TR' && !el.classList.contains('dwui-data-table-no-data'));
 };
@@ -308,7 +462,7 @@ const emitHeaders = (): void => {
  * 行はスロットで描画されるため、描画後の DOM に対してここで反映する
  */
 const syncRows = (): void => {
-  rows().forEach((tr, index) => tr.classList.toggle('dwui-selected', index === selectedIndex.value));
+  rowElements().forEach((tr, index) => tr.classList.toggle('dwui-selected', index === selectedIndex.value));
 };
 
 /**
@@ -316,7 +470,7 @@ const syncRows = (): void => {
  */
 const scrollToSelectedRow = (): void => {
   const pane = refContent.value;
-  const tr = rows()[selectedIndex.value];
+  const tr = rowElements()[selectedIndex.value];
   if (!pane || !tr) {
     return;
   }
@@ -342,7 +496,7 @@ const select = (row: T | undefined, index: number): void => {
  * 行を選択する。選択している行なら選択を解除する
  */
 const clickRow = (row: T, index: number): void => {
-  if (!props.selectable) {
+  if (!settings.value.selectable) {
     return;
   }
   if (index === selectedIndex.value) {
@@ -373,15 +527,15 @@ const onKeyDown = (event: KeyboardEvent): void => {
     return;
   }
   const index = selectedIndex.value + (event.key === 'ArrowUp' ? -1 : 1);
-  if (index < 0 || props.dataList.length <= index) {
+  if (index < 0 || rows.value.length <= index) {
     return;
   }
   event.preventDefault();
-  select(props.dataList[index], index);
+  select(rows.value[index], index);
 };
 
 const onClickSort = (header: DataTableHeader<T>): void => {
-  if (!props.sortable || props.dataList.length === 0) {
+  if (!settings.value.sortable || props.dataList.length === 0) {
     return;
   }
   descending.value = sortKey.value === header.id ? !descending.value : false;
@@ -390,22 +544,13 @@ const onClickSort = (header: DataTableHeader<T>): void => {
     sortKey: sortKey.value,
     descending: descending.value
   });
-  if (props.sortMode !== 'page') {
-    return;
-  }
-  const compare = header.compare ?? ((a: T, b: T): number => {
-    const key = header.sortKey ?? header.id;
-    return compareValues(getValueByPath(a, key), getValueByPath(b, key), header.type ?? 'string');
-  });
-  const sorted = [...props.dataList].sort((a, b) => descending.value ? compare(b, a) : compare(a, b));
-  emit('emit:sortData', sorted);
 };
 
 /**
  * 列幅の変更を始める。すべての列の幅を今の表示幅で固定してから変更する
  */
 const onResizeStart = (event: PointerEvent, index: number): void => {
-  if (!props.resizable) {
+  if (!settings.value.resizable) {
     return;
   }
   event.preventDefault();
@@ -473,7 +618,7 @@ watch(() => props.loading, (newValue, oldValue) => {
   // 読み込みが終わったら、前のデータに対する選択は引き継がない。
   // ページ内ソートも同様だが、remote のソート条件は再取得後も有効なので保つ
   if (oldValue && !newValue) {
-    if (props.sortMode === 'page') {
+    if (settings.value.sortMode === 'page') {
       sortKey.value = '';
       descending.value = false;
     }

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

@@ -49,6 +49,11 @@ export interface ShowFloatingComponentOptions {
   onClose?: () => void;
 }
 
+export interface ShowFloatingMessageOptions extends ShowFloatingComponentOptions {
+  /** trueを指定した場合、文字列をHTMLとして表示する。オブジェクトには影響しない */
+  html?: boolean;
+}
+
 const openedHandles = new Set<FloatingComponentHandle>();
 
 /**
@@ -88,8 +93,11 @@ 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);
+const renderMessage = (message: string | object, html: boolean | undefined) => (): VNode => {
+  if (html && typeof message === 'string') {
+    return h('div', { class: 'dwui-floating-component-message', innerHTML: message });
+  }
+  return h('div', { class: 'dwui-floating-component-message' }, toMessageText(message));
 };
 
 /**
@@ -108,19 +116,19 @@ export function showFloatingComponent(component: Component, props?: Record<strin
 
 /**
  * FloatingComponent を body の末尾に描画し、中身に文字列を表示する。
- * 文字列は HTML として解釈せず、改行や空白をそのまま表示する。オブジェクトは整形した JSON で表示する。
- * 見出しのコピーボタンは、copyValue を指定しなければ表示した文字列をコピーする。
+ * 文字列は改行や空白をそのまま表示し、html を指定すれば HTML として表示する。オブジェクトは整形した JSON で表示する。
+ * 見出しのコピーボタンは、copyValue を指定しなければ渡した文字列をコピーする。
  * ブラウザでのみ動作する
  *
  * @param {string | object} message 表示する文字列またはオブジェクト
- * @param {ShowFloatingComponentOptions} [options]
+ * @param {ShowFloatingMessageOptions} [options]
  * @returns {FloatingComponentHandle}
  */
-export function showFloatingMessage(message: string | object, options?: ShowFloatingComponentOptions): FloatingComponentHandle {
-  const text = toMessageText(message);
-  return mountFloatingComponent(renderMessage(text), {
-    copyValue: text,
-    ...options
+export function showFloatingMessage(message: string | object, options?: ShowFloatingMessageOptions): FloatingComponentHandle {
+  const { html, ...windowOptions } = options ?? {};
+  return mountFloatingComponent(renderMessage(message, html), {
+    copyValue: toMessageText(message),
+    ...windowOptions
   });
 }
 
@@ -159,10 +167,10 @@ export function useFloatingComponent(): {
       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
+      const { html, ...windowOptions } = options ?? {};
+      return owner.own((onClosed) => mountFloatingComponent(renderMessage(message, html), withOwner({
+        copyValue: toMessageText(message),
+        ...windowOptions
       }), onClosed));
     }
   };

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,6 +2,7 @@ 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';
@@ -18,9 +19,9 @@ export type { Props as TabContentProps, Slots as TabContentSlots } from '@/tab-c
 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 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 } 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';
@@ -34,4 +35,6 @@ export type { SnackbarDirection, SnackbarPlacement } from '@/internal/snackbar-i
 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 { vueCoreOptionsKey } from '@/helpers/vue-core-options';
+export type { DataTableOptions, VueCoreOptions } from '@/helpers/vue-core-options';
 export type { PopoverPlacement } from '@/internal/anchored-position';