@digitalwalletcorp/vue-core 1.2.1 → 1.3.1

package/src/data-table.vue

@@ -0,0 +1,648 @@
+<!--
+データテーブル
+以下の要素を描画する
+・テーブルヘッダ
+・ページネーション
+・総件数
+・表示件数
+・ダウンロードボタン
+・全件ダウンロードボタン
+以下の機能を提供する
+・行クリックによる行選択
+・カーソルキーでの選択行移動
+・ヘッダクリックによるソート
+・ヘッダドラッグによる列入れ替え(制限事項あり)
+・ヘッダ列幅変更
+
+一覧のデータ部(tbody内のコンテンツ)は利用者が定義する
+-->
+<template>
+  <section
+    class="dwui-data-table"
+    :class="{ 'dwui-selectable': props.selectable }"
+  >
+    <DataTableControls
+      v-if="props.controls === 'both' || props.controls === 'top'"
+      v-bind="controlProps"
+      :pagination="props.pagination === 'both' || props.pagination === 'top'"
+      @emit:change-page="emit('emit:changePage', $event)"
+      @emit:change-limit="emit('emit:changeLimit', $event)"
+      @emit:download-page="emit('emit:downloadPage')"
+      @emit:download-all="emit('emit:downloadAll')"
+    />
+    <div
+      ref="refContent"
+      class="dwui-data-table-content"
+      :class="[{ 'dwui-loading': props.loading }, props.contentClass]"
+      :style="props.contentStyle"
+      tabindex="-1"
+      @keydown="onKeyDown"
+    >
+      <table
+        :class="props.tableClass"
+        :style="props.tableStyle"
+      >
+        <thead ref="refThead">
+          <tr>
+            <th
+              v-for="(header, index) in innerHeaders"
+              :key="header.id"
+              :rowspan="header.rowspan"
+              :colspan="header.colspan"
+              :title="header.title"
+              :style="headerStyle(header)"
+              :aria-sort="ariaSort(header.id)"
+              scope="col"
+            >
+              <div class="dwui-data-table-header">
+                <span
+                  class="dwui-data-table-sort"
+                  :role="props.sortable ? 'button' : undefined"
+                  :tabindex="props.sortable ? 0 : undefined"
+                  @click="onClickSort(header)"
+                  @keydown.enter.prevent="onClickSort(header)"
+                  @keydown.space.prevent="onClickSort(header)"
+                >
+                  <SvgPointingTriangle
+                    v-if="caretDirection(header.id)"
+                    :direction="caretDirection(header.id)"
+                    size="0.7em"
+                  />
+                  <span
+                    v-if="header.html"
+                    v-html="resolveLabel(header.label)"
+                  />
+                  <span v-else>{{ resolveLabel(header.label) }}</span>
+                </span>
+              </div>
+              <div
+                v-if="props.resizable && index < innerHeaders.length - 1"
+                class="dwui-data-table-resizer"
+                @pointerdown="onResizeStart($event, index)"
+                @pointermove="onResizing"
+                @pointerup="onResizeEnd"
+                @pointercancel="onResizeEnd"
+              />
+            </th>
+          </tr>
+        </thead>
+        <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"
+              class="dwui-data-table-no-data"
+            >
+              <td :colspan="totalColSize">
+                {{ labels.noData }}
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+      <div
+        v-if="props.loading"
+        class="dwui-data-table-loading"
+      >
+        <slot name="loading">
+          <div class="dwui-data-table-loading-spinner" />
+        </slot>
+      </div>
+    </div>
+    <DataTableControls
+      v-if="props.controls === 'both' || props.controls === 'bottom'"
+      v-bind="controlProps"
+      :pagination="props.pagination === 'both' || props.pagination === 'bottom'"
+      @emit:change-page="emit('emit:changePage', $event)"
+      @emit:change-limit="emit('emit:changeLimit', $event)"
+      @emit:download-page="emit('emit:downloadPage')"
+      @emit:download-all="emit('emit:downloadAll')"
+    />
+  </section>
+</template>
+
+<script setup lang="ts" generic="T">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import type { 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';
+
+const props = withDefaults(defineProps<DataTableProps<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',
+  formatTotalCount: undefined,
+  contentClass: undefined,
+  contentStyle: undefined,
+  tableClass: undefined,
+  tableStyle: undefined,
+  labels: undefined
+});
+
+const emit = defineEmits<DataTableEmits<T>>();
+
+defineSlots<DataTableSlots<T>>();
+
+const refContent = ref<HTMLDivElement>();
+const refThead = ref<HTMLTableSectionElement>();
+const refTbody = ref<HTMLTableSectionElement>();
+
+/** 列幅の変更で決めた幅(px)。id をキーにする */
+const widths = ref<Record<string, number>>({});
+/** ソートしているヘッダの id */
+const sortKey = ref('');
+/** 降順でソートしているか */
+const descending = ref(false);
+/** 列幅の変更中の、対象の表示位置とポインタの X 座標 */
+const resizing = ref<{ index: number; x: number }>();
+
+let rowObserver: MutationObserver | undefined;
+
+/** 列幅の変更を反映したヘッダ */
+const innerHeaders = computed((): DataTableHeader<T>[] => {
+  return props.headers.map(header => widths.value[header.id] == null ? header : { ...header, width: widths.value[header.id] });
+});
+
+const labels = computed((): DataTableResolvedLabels => {
+  const merged: Required<DataTableLabels> = {
+    totalCount: 'Total',
+    totalUnit: '',
+    limit: 'Rows per page',
+    noData: 'No data found',
+    pageNumber: 'Page',
+    downloadPage: 'Download this page',
+    downloadAll: 'Download all',
+    firstPage: 'First page',
+    previousPage: 'Previous page',
+    previousPages: 'Previous pages',
+    nextPages: 'Next pages',
+    nextPage: 'Next page',
+    lastPage: 'Last page',
+    ...props.labels
+  };
+  const resolved = {} as DataTableResolvedLabels;
+  for (const key of Object.keys(merged) as (keyof DataTableLabels)[]) {
+    const label = merged[key];
+    resolved[key] = typeof label === 'function' ? label() : label;
+  }
+  return resolved;
+});
+
+const limit = computed((): number => {
+  return Math.min(props.limit, props.maxLimit);
+});
+
+const controlProps = computed(() => {
+  return {
+    showTotal: props.showTotal,
+    showLimit: props.showLimit,
+    showPageSelect: props.showPageSelect,
+    showDownloadPage: props.showDownloadPage,
+    showDownloadAll: props.showDownloadAll,
+    current: props.current,
+    limit: limit.value,
+    maxLimit: props.maxLimit,
+    maxPagination: props.maxPagination,
+    totalCount: props.totalCount ?? props.dataList.length,
+    formatTotalCount: props.formatTotalCount,
+    labels: labels.value
+  };
+});
+
+/** 選択している行。行のオブジェクトが差し替わっても内容が同じなら選択を保てるよう、行そのものを持つ */
+const selectedRow = shallowRef<T | undefined>(undefined);
+
+/** 表示する行。ページ内ソート中は dataList を並べ替えたコピー、それ以外は dataList そのもの */
+const rows = computed((): T[] => {
+  const header = props.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 = rows.value.indexOf(selected);
+  if (index !== -1) {
+    return index;
+  }
+  const json = stringifyValue(selected);
+  if (json === '') {
+    return -1;
+  }
+  return rows.value.findIndex(row => stringifyValue(row) === json);
+});
+
+/** データが無い行の colspan。colspan を持つヘッダはその数で数える */
+const totalColSize = computed((): number => {
+  return props.headers.reduce((acc, cur) => acc + (cur.colspan == null ? 1 : Number(cur.colspan)), 0);
+});
+
+const toCssSize = (size: string | number | undefined): string | undefined => {
+  if (size == null) {
+    return undefined;
+  }
+  return typeof size === 'number' ? `${size}px` : size;
+};
+
+const headerStyle = (header: DataTableHeader<T>): StyleValue => {
+  return {
+    width: toCssSize(header.width),
+    minWidth: toCssSize(header.minWidth),
+    maxWidth: toCssSize(header.maxWidth)
+  };
+};
+
+const ariaSort = (id: string): 'ascending' | 'descending' | undefined => {
+  if (sortKey.value !== id) {
+    return undefined;
+  }
+  return descending.value ? 'descending' : 'ascending';
+};
+
+const caretDirection = (id: string): 'up' | 'down' | undefined => {
+  if (!props.sortable || sortKey.value !== id) {
+    return undefined;
+  }
+  return descending.value ? 'down' : 'up';
+};
+
+const rowNumber = (index: number): number => {
+  return (props.current - 1) * limit.value + index + 1;
+};
+
+/** スロットが描画した行の要素。データが無い行は含めない */
+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'));
+};
+
+const cellsOf = (tr: HTMLTableRowElement): HTMLTableCellElement[] => {
+  return Array.from(tr.children).filter((el): el is HTMLTableCellElement => el.tagName === 'TD' || el.tagName === 'TH');
+};
+
+const emitHeaders = (): void => {
+  emit('emit:updateHeader', innerHeaders.value.map(header => ({ ...header })));
+};
+
+/**
+ * 行に選択状態の class を付ける。
+ * 行はスロットで描画されるため、描画後の DOM に対してここで反映する
+ */
+const syncRows = (): void => {
+  rowElements().forEach((tr, index) => tr.classList.toggle('dwui-selected', index === selectedIndex.value));
+};
+
+/**
+ * 選択している行がスクロール領域に収まるようにスクロールする。sticky なヘッダの下に隠れないようにする
+ */
+const scrollToSelectedRow = (): void => {
+  const pane = refContent.value;
+  const tr = rowElements()[selectedIndex.value];
+  if (!pane || !tr) {
+    return;
+  }
+  const headerHeight = refThead.value?.offsetHeight ?? 0;
+  const top = tr.offsetTop;
+  const bottom = top + tr.offsetHeight;
+  if (top < pane.scrollTop + headerHeight) {
+    pane.scrollTop = top - headerHeight;
+  } else if (pane.scrollTop + pane.clientHeight < bottom) {
+    pane.scrollTop = bottom - pane.clientHeight;
+  }
+};
+
+/**
+ * 選択を変えて通知する。解除は row に undefined、index に -1 を渡す
+ */
+const select = (row: T | undefined, index: number): void => {
+  selectedRow.value = row;
+  emit('emit:selectRow', row, index);
+};
+
+/**
+ * 行を選択する。選択している行なら選択を解除する
+ */
+const clickRow = (row: T, index: number): void => {
+  if (!props.selectable) {
+    return;
+  }
+  if (index === selectedIndex.value) {
+    select(undefined, -1);
+  } else {
+    select(row, index);
+    // カーソルキーでの移動は、この領域にフォーカスがある間だけ受け付ける
+    refContent.value?.focus({ preventScroll: true });
+  }
+};
+
+const dblclickRow = (row: T, index: number): void => {
+  if (index !== selectedIndex.value) {
+    clickRow(row, index);
+  }
+  emit('emit:dblclickRow', row, index);
+};
+
+/**
+ * 行を選択している間、カーソルキー(↑↓)で選択を移動する。
+ * 行内の入力欄などにフォーカスがあるときは、その要素のキー操作を妨げないよう何もしない
+ */
+const onKeyDown = (event: KeyboardEvent): void => {
+  if (event.target !== event.currentTarget || selectedIndex.value < 0) {
+    return;
+  }
+  if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+    return;
+  }
+  const index = selectedIndex.value + (event.key === 'ArrowUp' ? -1 : 1);
+  if (index < 0 || rows.value.length <= index) {
+    return;
+  }
+  event.preventDefault();
+  select(rows.value[index], index);
+};
+
+const onClickSort = (header: DataTableHeader<T>): void => {
+  if (!props.sortable || props.dataList.length === 0) {
+    return;
+  }
+  descending.value = sortKey.value === header.id ? !descending.value : false;
+  sortKey.value = header.id;
+  emit('emit:changeSort', {
+    sortKey: sortKey.value,
+    descending: descending.value
+  });
+};
+
+/**
+ * 列幅の変更を始める。すべての列の幅を今の表示幅で固定してから変更する
+ */
+const onResizeStart = (event: PointerEvent, index: number): void => {
+  if (!props.resizable) {
+    return;
+  }
+  event.preventDefault();
+  const headerRow = refThead.value?.firstElementChild as HTMLTableRowElement | null;
+  const cells = headerRow ? cellsOf(headerRow) : [];
+  for (const [i, cell] of cells.entries()) {
+    widths.value[props.headers[i].id] = cell.getBoundingClientRect().width;
+  }
+  resizing.value = { index, x: event.clientX };
+  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+  emitHeaders();
+};
+
+/**
+ * 対象の列の幅をポインタの移動量だけ変え、右側の列に均等に打ち消す
+ */
+const onResizing = (event: PointerEvent): void => {
+  if (!resizing.value) {
+    return;
+  }
+  const moved = event.clientX - resizing.value.x;
+  if (moved === 0) {
+    return;
+  }
+  resizing.value.x = event.clientX;
+  const index = resizing.value.index;
+  const ids = props.headers.map(header => header.id);
+  widths.value[ids[index]] += moved;
+  const share = moved / (ids.length - index - 1);
+  for (const id of ids.slice(index + 1)) {
+    widths.value[id] -= share;
+  }
+};
+
+const onResizeEnd = (): void => {
+  if (resizing.value) {
+    resizing.value = undefined;
+    emitHeaders();
+  }
+};
+
+onMounted(() => {
+  // 行の描画は利用側のタイミングで行われるため、tbody の行の増減を監視して反映する
+  rowObserver = new MutationObserver(syncRows);
+  if (refTbody.value) {
+    rowObserver.observe(refTbody.value, { childList: true });
+  }
+  syncRows();
+});
+
+onBeforeUnmount(() => {
+  rowObserver?.disconnect();
+});
+
+watch(() => props.headers, (newValue, oldValue) => {
+  // 列が入れ替わったときは、変更した列幅を引き継がない
+  const newIds = newValue.map(header => header.id);
+  const oldIds = oldValue.map(header => header.id);
+  if (newIds.length !== oldIds.length || newIds.some(id => !oldIds.includes(id))) {
+    widths.value = {};
+  }
+});
+
+watch(() => props.loading, (newValue, oldValue) => {
+  // 読み込みが終わったら、前のデータに対する選択は引き継がない。
+  // ページ内ソートも同様だが、remote のソート条件は再取得後も有効なので保つ
+  if (oldValue && !newValue) {
+    if (props.sortMode === 'page') {
+      sortKey.value = '';
+      descending.value = false;
+    }
+    if (selectedRow.value != null) {
+      select(undefined, -1);
+    }
+  }
+});
+
+watch(selectedIndex, (newValue) => {
+  if (0 <= newValue) {
+    scrollToSelectedRow();
+  }
+}, { flush: 'post' });
+
+watch(selectedIndex, syncRows, { flush: 'post' });
+
+defineExpose({
+  /** ソートの状態を返す */
+  getSortContext: (): DataTableSortContext => {
+    return {
+      sortKey: sortKey.value,
+      descending: descending.value
+    };
+  }
+});
+</script>
+
+<style>
+:where(.dwui-data-table-content) {
+  /* 読み込み中の表示と行のスクロール位置の基準にする */
+  position: relative;
+  overflow: auto;
+}
+
+:where(.dwui-data-table-content:focus-visible) {
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: calc(var(--dwui-outline-width-focus-ring, 2px) * -1);
+}
+
+:where(.dwui-data-table-content.dwui-loading) {
+  min-height: var(--dwui-height-data-table-loading, 120px);
+}
+
+:where(.dwui-data-table table) {
+  /* collapse にするとスクロール時に sticky なヘッダの境界線が動いて行が透けるため separate にする */
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+}
+
+:where(.dwui-data-table th) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 0.33em 0;
+  border: 1px solid var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));
+  border-right: none;
+  background: var(--dwui-background-data-table-header, light-dark(#e8e8e8, #3a3a3a));
+  color: var(--dwui-color-text-data-table-header, inherit);
+  text-align: center;
+  white-space: nowrap;
+}
+
+:where(.dwui-data-table th:last-child) {
+  border-right: 1px solid var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));
+}
+
+:where(.dwui-data-table-sort) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.17em;
+}
+
+:where(.dwui-data-table-sort[role='button']) {
+  cursor: pointer;
+}
+
+:where(.dwui-data-table-sort: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-data-table-resizer) {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+:where(.dwui-data-table td) {
+  padding: 0.25em;
+  border-top: 1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));
+  border-left: 1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));
+  line-height: 1.2em;
+  word-break: break-all;
+}
+
+:where(.dwui-data-table tbody tr:first-child td) {
+  border-top: none;
+}
+
+:where(.dwui-data-table tbody tr:last-child td) {
+  border-bottom: 1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));
+}
+
+:where(.dwui-data-table td:last-child) {
+  border-right: 1px dotted var(--dwui-border-color-data-table, light-dark(#818181, #5a5a5a));
+}
+
+:where(.dwui-data-table tbody tr:nth-child(odd)) {
+  background: var(--dwui-background-data-table-row-odd, light-dark(#ffffff, #1e1e1e));
+  transition: background-color 1s ease;
+}
+
+:where(.dwui-data-table tbody tr:nth-child(even)) {
+  background: var(--dwui-background-data-table-row-even, light-dark(#f4f4f4, #262626));
+  transition: background-color 1s ease;
+}
+
+:where(.dwui-data-table.dwui-selectable tbody tr) {
+  cursor: pointer;
+}
+
+:where(.dwui-data-table tbody tr:not(.dwui-selected, .dwui-data-table-no-data):hover) {
+  background: var(--dwui-background-data-table-row-hover, light-dark(#e0f7fa, #2f4f4f));
+}
+
+:where(.dwui-data-table tbody tr.dwui-selected) {
+  background: var(--dwui-background-data-table-row-selected, light-dark(#fff3b0, #5a4a00));
+}
+
+:where(.dwui-data-table-no-data td) {
+  padding: 0.83em 0;
+  color: var(--dwui-color-text-data-table-no-data, light-dark(#808080, #a0a0a0));
+  text-align: center;
+  cursor: default;
+}
+
+:where(.dwui-data-table-loading) {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dwui-overlay-color-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)));
+}
+
+:where(.dwui-data-table-loading-spinner) {
+  width: var(--dwui-size-loading-spinner, 40px);
+  height: var(--dwui-size-loading-spinner, 40px);
+  border: 4px solid var(--dwui-border-color-loading-spinner, rgba(255, 255, 255, 0.4));
+  border-top-color: var(--dwui-border-color-loading-spinner-accent, #ffffff);
+  border-radius: 50%;
+  animation: dwui-data-table-loading-spin 0.8s linear infinite;
+}
+
+@keyframes dwui-data-table-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>