@digitalwalletcorp/vue-core 1.2.1 → 1.3.0

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

@@ -0,0 +1,203 @@
+<!--
+DataTable の上下に置くコントロール
+ページネーション・総件数・1ページあたりの表示件数・ダウンロードボタンを並べる。
+-->
+<template>
+  <div class="dwui-data-table-controls">
+    <Pagination
+      v-if="props.pagination"
+      :current="props.current"
+      :total-count="props.totalCount"
+      :limit="props.limit"
+      :max-pagination="props.maxPagination"
+      :show-page-select="props.showPageSelect"
+      :labels="props.labels"
+      @emit:change-page="emit('emit:changePage', $event)"
+    />
+    <div class="dwui-data-table-tools">
+      <span
+        v-if="props.showTotal"
+        class="dwui-data-table-total"
+        data-test-total-count
+      >
+        <span>{{ props.labels.totalCount }}</span>
+        <span class="dwui-data-table-total-count">{{ formattedTotalCount }}</span>
+        <span>{{ props.labels.totalUnit }}</span>
+      </span>
+      <label
+        v-if="props.showLimit"
+        class="dwui-data-table-limit"
+      >
+        <span>{{ props.labels.limit }}</span>
+        <input
+          type="number"
+          :value="props.limit"
+          min="1"
+          :max="props.maxLimit"
+          step="1"
+          data-test-view-count
+          @change="onChangeLimit"
+        >
+      </label>
+      <button
+        v-if="props.showDownloadPage"
+        type="button"
+        :title="props.labels.downloadPage"
+        :aria-label="props.labels.downloadPage"
+        data-test-download-page
+        @click="emit('emit:downloadPage')"
+      >
+        <SvgFolderDownload />
+      </button>
+      <button
+        v-if="props.showDownloadAll"
+        type="button"
+        :title="props.labels.downloadAll"
+        :aria-label="props.labels.downloadAll"
+        data-test-download-all
+        @click="emit('emit:downloadAll')"
+      >
+        <SvgCloudDownload />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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';
+
+interface Props {
+  /** ページネーションを表示するか */
+  pagination: boolean;
+  /** 総件数を表示するか */
+  showTotal: boolean;
+  /** 1ページあたりの表示件数の入力を表示するか */
+  showLimit: boolean;
+  /** ページ番号の選択を表示するか */
+  showPageSelect: boolean;
+  /** ページダウンロードボタンを表示するか */
+  showDownloadPage: boolean;
+  /** 全件ダウンロードボタンを表示するか */
+  showDownloadAll: boolean;
+  /** 現在ページ */
+  current: number;
+  /** 1ページあたりの表示件数 */
+  limit: number;
+  /** 1ページあたりの表示件数の上限 */
+  maxLimit: number;
+  /** 並べるページ番号の最大数 */
+  maxPagination: number;
+  /** 総件数 */
+  totalCount: number;
+  /** 表示する文言 */
+  labels: DataTableResolvedLabels;
+  /** 総件数の整形。未指定なら en-US の桁区切り */
+  formatTotalCount?: (count: number) => string;
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'emit:changePage', page: number): void;
+  (e: 'emit:changeLimit', limit: number): void;
+  (e: 'emit:downloadPage'): void;
+  (e: 'emit:downloadAll'): void;
+}
+const emit = defineEmits<Emits>();
+
+// 既定の書式は SSR とクライアントで同じ文字列になるよう、ロケールを固定する
+const numberFormat = new Intl.NumberFormat('en-US');
+
+const formattedTotalCount = computed((): string => {
+  return props.formatTotalCount ? props.formatTotalCount(props.totalCount) : numberFormat.format(props.totalCount);
+});
+
+/**
+ * 入力された表示件数を 1 〜 maxLimit に収めて通知する。入力欄にも収めた値を戻す
+ */
+const onChangeLimit = (event: Event): void => {
+  const input = event.target as HTMLInputElement;
+  const limit = Math.min(Math.max(Math.trunc(Number(input.value)) || 1, 1), props.maxLimit);
+  input.value = String(limit);
+  if (limit !== props.limit) {
+    emit('emit:changeLimit', limit);
+  }
+};
+</script>
+
+<style>
+:where(.dwui-data-table-controls) {
+  display: flex;
+  flex-wrap: wrap;
+  /* ページネーションとツールを同じ高さにし、中のボタンをその高さまで伸ばす */
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 0.33em 0.67em;
+  margin: 0.33em 0;
+}
+
+:where(.dwui-data-table-tools) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.33em;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+:where(.dwui-data-table-total) {
+  margin-right: 0.67em;
+}
+
+:where(.dwui-data-table-total-count) {
+  margin: 0 0.5em;
+  color: var(--dwui-color-text-data-table-total-count, inherit);
+  font-weight: var(--dwui-font-weight-data-table-total-count, bold);
+}
+
+:where(.dwui-data-table-limit) {
+  display: inline-flex;
+  align-self: stretch;
+  align-items: center;
+  gap: 0.33em;
+}
+
+:where(.dwui-data-table-limit input) {
+  align-self: stretch;
+  width: 60px;
+}
+
+:where(.dwui-data-table-tools button) {
+  display: inline-flex;
+  align-self: stretch;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  /* 高さは行にそろえ、幅は高さと同じにして正方形にする */
+  aspect-ratio: 1;
+  padding: 0;
+  border: 1px solid var(--dwui-border-color-data-table-button, light-dark(#d3d3d3, #5a5a5a));
+  border-radius: 3px;
+  background: var(--dwui-background-data-table-button, light-dark(#fafafa, #2a2a2a));
+  color: var(--dwui-color-text-data-table-button, inherit);
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(.dwui-data-table-tools button svg) {
+  /* アイコンはボタンの内側に対する比率で描く */
+  width: auto;
+  height: 85%;
+}
+
+:where(.dwui-data-table-tools button:hover) {
+  background: var(--dwui-background-data-table-button-hover, light-dark(#e8e8e8, #3a3a3a));
+}
+
+:where(.dwui-data-table-tools button:focus-visible) {
+  outline: var(--dwui-outline-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-outline-offset-focus-ring, 2px);
+}
+</style>

package/src/internal/data-table-value.ts

@@ -0,0 +1,99 @@
+import type { DataTableValueType } from '@/types/data-table';
+
+/**
+ * ドット区切りのパスで入れ子の値を取り出す。途中が 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 '';
+  }
+};

package/src/internal/floating-component.vue

@@ -0,0 +1,202 @@
+<!--
+フローティングコンポーネント
+ページの上に、見出しと閉じるボタンの付いたウィンドウを浮かせて表示する。暗幕は掛けず、背面のページも操作できる。
+位置はページ基準の絶対座標で決めるため、showFloatingComponent / showFloatingMessage から body 直下に描画して使う。
+OverlayBox とは開いた順に重なり、後から開いたものが前面に出る。クリックすると最前面に出る。
+-->
+<template>
+  <Transition
+    name="dwui-floating-component-fade"
+    @after-leave="emit('emit:close')"
+  >
+    <MovableWindow
+      v-if="props.open"
+      ref="refWindow"
+      class="dwui-floating-component"
+      :class="{ 'dwui-lock-scroll': props.lockScroll }"
+      name="dwui-floating-component"
+      :style="{ '--dwui-order-window': order }"
+      :drag-mode="props.dragMode"
+      :loading="props.loading"
+      :close-label="props.closeLabel"
+      :clamp-bottom="false"
+      :header-class="props.headerClass"
+      :header-style="props.headerStyle"
+      @pointerdown.capture="onPointerDownWindow"
+      @dblclick="onDblClickWindow"
+      @emit:close="emit('update:open', false)"
+    >
+      <template #title>
+        {{ props.title }}
+      </template>
+      <template
+        v-if="props.copyValue != null"
+        #actions
+      >
+        <CopyButton
+          class="dwui-floating-component-copy-button"
+          :value="props.copyValue"
+          :aria-label="props.copyLabel"
+        />
+      </template>
+      <slot />
+    </MovableWindow>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+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';
+
+interface Props {
+  /** 表示するか */
+  open: boolean;
+  /** 見出し */
+  title?: string;
+  /** この要素の下に開く。下に収まらなければ上に開く。未指定ならページの表示中の左上に開く */
+  anchor?: HTMLElement;
+  /** ドラッグで移動するときに掴む範囲。未指定なら移動できない */
+  dragMode?: MovableWindowDragMode;
+  /** ウィンドウに暗幕とスピナーを重ね、中身を操作できなくする */
+  loading: boolean;
+  /** 閉じるボタンの読み上げ名 */
+  closeLabel: string;
+  /** 見出しにコピーボタンを置き、この値をコピーする */
+  copyValue?: string | number | (() => string | number);
+  /** コピーボタンの読み上げ名 */
+  copyLabel: string;
+  /** ウィンドウのダブルクリックで閉じる */
+  closeOnDblClick: boolean;
+  /** 開いている間、背面のページをスクロールさせない */
+  lockScroll: boolean;
+  /** 初期の幅・高さ(px)。未指定なら中身に合わせる */
+  initialSize?: {
+    width?: number;
+    height?: number;
+  };
+  /** 見出しに付けるクラス */
+  headerClass?: ClassValue;
+  /** 見出しに付けるスタイル */
+  headerStyle?: StyleValue;
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  /** 閉じる操作がされた */
+  (e: 'update:open', value: boolean): void;
+  /** 閉じるアニメーションが終わり、ウィンドウが取り除かれた */
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+const refWindow = ref<InstanceType<typeof MovableWindow>>();
+const order = ref(nextWindowOrder());
+
+const onPointerDownWindow = (): void => {
+  order.value = nextWindowOrder();
+};
+
+const onDblClickWindow = (): void => {
+  if (props.closeOnDblClick) {
+    emit('update:open', false);
+  }
+};
+
+/**
+ * 初期の寸法と位置を決める。寸法は画面に収まるよう 90% までに抑える
+ */
+const place = (): void => {
+  const movable = refWindow.value;
+  if (!movable?.element) {
+    return;
+  }
+  const rect = movable.element.getBoundingClientRect();
+  let width = props.initialSize?.width ?? rect.width;
+  if (window.innerWidth < width) {
+    width = window.innerWidth * 0.9;
+  }
+  let height = props.initialSize?.height ?? -1;
+  if (window.innerHeight < height) {
+    height = window.innerHeight * 0.9;
+  }
+  movable.size.width = width;
+  // 高さは指定があるときだけ固定する。未指定なら、幅が確定した後のレイアウトで中身に合わせた高さになる
+  movable.size.height = height;
+
+  const scrollLeft = document.documentElement.scrollLeft;
+  const scrollTop = document.documentElement.scrollTop;
+  if (props.anchor) {
+    // 寸法の指定はまだ描画に反映されていないため、指定があればその値で位置を決める
+    const panel = {
+      width,
+      height: 0 <= height ? height : rect.height
+    };
+    const viewport = {
+      width: document.documentElement.clientWidth,
+      height: document.documentElement.clientHeight
+    };
+    const position = computeAnchoredPosition(props.anchor.getBoundingClientRect(), panel, viewport, {
+      placement: 'bottom-start',
+      offset: 0,
+      margin: 0,
+      arrowMargin: 0
+    });
+    movable.position.x = position.left + scrollLeft;
+    movable.position.y = position.top + scrollTop;
+  } else {
+    movable.position.x = 10 + scrollLeft;
+    movable.position.y = 10 + scrollTop;
+  }
+};
+
+onMounted(() => {
+  if (props.open) {
+    place();
+  }
+});
+</script>
+
+<style>
+:where(html:has(.dwui-floating-component.dwui-lock-scroll), html:has(.dwui-floating-component.dwui-lock-scroll) > body) {
+  overflow: hidden;
+}
+
+:where(.dwui-floating-component) {
+  z-index: calc(var(--dwui-z-index-floating-component, 5000) + var(--dwui-order-window, 0));
+  --dwui-min-width-movable-window: var(--dwui-min-width-floating-component, 200px);
+  --dwui-max-height-movable-window: var(--dwui-max-height-floating-component, 90vh);
+  --dwui-border-color-movable-window: var(--dwui-border-color-floating-component, light-dark(#8f8f8f, #6b6f76));
+  --dwui-radius-movable-window: var(--dwui-radius-floating-component, 4px);
+  --dwui-background-movable-window: var(--dwui-background-floating-component, Canvas);
+  --dwui-color-text-movable-window: var(--dwui-color-text-floating-component, CanvasText);
+  --dwui-box-shadow-movable-window: var(--dwui-box-shadow-floating-component, 0 2px 8px rgba(0, 0, 0, 0.33));
+  --dwui-padding-movable-window-header: var(--dwui-padding-floating-component-header, 0.17em 0.33em);
+  --dwui-background-movable-window-header: var(--dwui-background-floating-component-header, transparent);
+  --dwui-color-text-movable-window-header: var(--dwui-color-text-floating-component-header, inherit);
+  --dwui-background-movable-window-close-button-hover: var(--dwui-background-floating-component-close-button-hover, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12)));
+  --dwui-padding-movable-window-body: var(--dwui-padding-floating-component-body, 0.4em);
+  --dwui-color-text-movable-window-resizer: var(--dwui-color-text-floating-component-resizer, GrayText);
+  --dwui-background-movable-window-loading: var(--dwui-background-floating-component-loading, light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4)));
+  --dwui-size-movable-window-spinner: var(--dwui-size-floating-component-spinner, 48px);
+  --dwui-border-color-movable-window-spinner: var(--dwui-border-color-floating-component-spinner, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2)));
+  --dwui-border-color-movable-window-spinner-accent: var(--dwui-border-color-floating-component-spinner-accent, light-dark(rgba(47, 90, 74, 0.8), rgba(140, 200, 170, 0.8)));
+}
+
+:where(.dwui-floating-component-message) {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+:where(.dwui-floating-component-fade-enter-active, .dwui-floating-component-fade-leave-active) {
+  transition: opacity 0.25s ease;
+}
+
+:where(.dwui-floating-component-fade-enter-from, .dwui-floating-component-fade-leave-to) {
+  opacity: 0;
+}
+</style>

package/src/internal/icon-popper.vue

@@ -0,0 +1,185 @@
+<!--
+アイコンにマウスを載せている、またはフォーカスしている間だけ中身を表示する(HelpPopper / WarningPopper の共通部分)
+パネルにポインタを移している間も開いたままにし、中のリンクや文字の選択を操作できるようにする。
+タッチ端末ではタップで開閉し、外をタップすると閉じる。
+-->
+<template>
+  <span
+    ref="refTrigger"
+    class="dwui-icon-popper"
+    tabindex="0"
+    :aria-label="props.label"
+    :aria-describedby="panelId"
+    v-bind="attrs"
+    @pointerenter="onPointerEnter"
+    @pointerleave="onPointerLeave"
+    @pointerdown="onPointerDown"
+    @focus="onFocus"
+    @blur="onBlur"
+    @keydown.esc="onKeydownEsc"
+  >
+    <slot name="icon" />
+  </span>
+  <AnchoredPopover
+    ref="refPopover"
+    :id="panelId"
+    class="dwui-icon-popper-popover"
+    :class="props.popoverClass"
+    role="tooltip"
+    mode="manual"
+    :anchor="refTrigger"
+    :placement="props.placement"
+    :arrow="props.arrow"
+    @pointerenter="onPointerEnterPanel"
+    @pointerleave="onPointerLeave"
+    @emit:open="onOpen"
+    @emit:close="onClose"
+  >
+    <slot />
+  </AnchoredPopover>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref, useAttrs, useId } from 'vue';
+import AnchoredPopover from '@/internal/anchored-popover.vue';
+import type { PopoverPlacement } from '@/internal/anchored-position';
+
+// ルートがトリガーとパネルの2つなので、属性はトリガーに明示的に渡す
+defineOptions({ inheritAttrs: false });
+
+interface Props {
+  /** アイコンに対するパネルの表示位置。収まらないときは反対側に出す */
+  placement: PopoverPlacement;
+  /** アイコンを指す矢印をパネルに付ける */
+  arrow: boolean;
+  /** パネルに付けるクラス。利用側のコンポーネントがパネルのスタイル変数を割り当てるのに使う */
+  popoverClass: string;
+  /** アイコンの読み上げ名。利用側が aria-label 属性を渡したときはそちらが優先される */
+  label: string;
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'emit:open'): void;
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+const attrs = useAttrs();
+
+const refTrigger = ref<HTMLElement>();
+const refPopover = ref<InstanceType<typeof AnchoredPopover>>();
+const open = ref(false);
+
+// スクリーンリーダーがフォーカス時にパネルの文章を読み上げられるように、トリガーとパネルを aria-describedby で結ぶ
+const panelId = useId();
+
+// アイコンとパネルの隙間をポインタが横切る間に閉じないよう、閉じるのを少し待つ
+const HIDE_DELAY = 150;
+let hideTimer: ReturnType<typeof setTimeout> | undefined;
+
+const cancelHide = (): void => {
+  if (hideTimer !== undefined) {
+    clearTimeout(hideTimer);
+    hideTimer = undefined;
+  }
+};
+
+const show = (): void => {
+  cancelHide();
+  refPopover.value?.show();
+};
+
+const hide = (): void => {
+  cancelHide();
+  refPopover.value?.hide();
+};
+
+const scheduleHide = (): void => {
+  cancelHide();
+  hideTimer = setTimeout(() => {
+    hideTimer = undefined;
+    refPopover.value?.hide();
+  }, HIDE_DELAY);
+};
+
+// タッチ端末ではトリガーとパネルの外をタップしたら閉じる
+const onPointerDownOutside = (event: PointerEvent): void => {
+  const target = event.target as Node;
+  if (!refTrigger.value?.contains(target) && !refPopover.value?.element?.contains(target)) {
+    hide();
+  }
+};
+
+// タップ後にブラウザが互換のために発行するマウス系のイベントで開き直さないように、タッチはホバーとして扱わない
+const onPointerEnter = (event: PointerEvent): void => {
+  if (event.pointerType !== 'touch') {
+    show();
+  }
+};
+
+const onPointerLeave = (event: PointerEvent): void => {
+  if (event.pointerType !== 'touch') {
+    scheduleHide();
+  }
+};
+
+const onPointerEnterPanel = (event: PointerEvent): void => {
+  if (event.pointerType !== 'touch') {
+    cancelHide();
+  }
+};
+
+const onPointerDown = (event: PointerEvent): void => {
+  if (event.pointerType === 'touch') {
+    if (open.value) {
+      hide();
+    } else {
+      show();
+    }
+  }
+};
+
+const onFocus = (): void => {
+  show();
+};
+
+const onBlur = (): void => {
+  hide();
+};
+
+const onKeydownEsc = (): void => {
+  hide();
+};
+
+const onOpen = (): void => {
+  open.value = true;
+  document.addEventListener('pointerdown', onPointerDownOutside, true);
+  emit('emit:open');
+};
+
+const onClose = (): void => {
+  open.value = false;
+  document.removeEventListener('pointerdown', onPointerDownOutside, true);
+  emit('emit:close');
+};
+
+onBeforeUnmount(() => {
+  cancelHide();
+  document.removeEventListener('pointerdown', onPointerDownOutside, true);
+});
+</script>
+
+<style>
+:where(.dwui-icon-popper) {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  cursor: help;
+}
+
+:where(.dwui-icon-popper: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);
+}
+</style>