@digitalwalletcorp/vue-core 1.2.0 → 1.3.0

package/src/internal/pagination.vue

@@ -0,0 +1,325 @@
+<!--
+ページネーション
+現在ページを中心に maxPagination 個のページ番号と、先頭・前・前ブロック・次ブロック・次・末尾のボタン、ページ番号の選択を表示する。
+-->
+<template>
+  <div class="dwui-pagination">
+    <ul class="dwui-pagination-list">
+      <li>
+        <button
+          type="button"
+          :disabled="current <= 1"
+          :aria-label="props.labels.firstPage"
+          :title="props.labels.firstPage"
+          data-test-pagination-btn-head
+          @click="onClickPage(1)"
+        >
+          <SvgChevronDouble
+            direction="left"
+            size="1em"
+            :stroke-width="8"
+          />
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          :disabled="current <= 1"
+          :aria-label="props.labels.previousPage"
+          :title="props.labels.previousPage"
+          data-test-pagination-btn-previous
+          @click="onClickPage(current - 1)"
+        >
+          <SvgChevron
+            direction="left"
+            size="1em"
+            :stroke-width="8"
+          />
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          :disabled="pages.length === 0 || pages[0] === 1"
+          :aria-label="props.labels.previousPages"
+          :title="props.labels.previousPages"
+          data-test-pagination-btn-previous-block
+          @click="onClickBlock(-1)"
+        >
+          <SvgBlackArrow
+            direction="left"
+            size="1em"
+          />
+        </button>
+      </li>
+      <li
+        v-for="page in pages"
+        :key="page"
+      >
+        <button
+          type="button"
+          class="dwui-pagination-page"
+          :class="{ 'dwui-current': page === current }"
+          :aria-current="page === current ? 'page' : undefined"
+          data-test-pagination-anchor
+          @click="onClickPage(page)"
+        >
+          {{ page }}
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          :disabled="pages.length === 0 || pages[pages.length - 1] === last"
+          :aria-label="props.labels.nextPages"
+          :title="props.labels.nextPages"
+          data-test-pagination-btn-next-block
+          @click="onClickBlock(1)"
+        >
+          <SvgBlackArrow
+            direction="right"
+            size="1em"
+          />
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          :disabled="last <= current"
+          :aria-label="props.labels.nextPage"
+          :title="props.labels.nextPage"
+          data-test-pagination-btn-next
+          @click="onClickPage(current + 1)"
+        >
+          <SvgChevron
+            direction="right"
+            size="1em"
+            :stroke-width="8"
+          />
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          :disabled="last <= current"
+          :aria-label="props.labels.lastPage"
+          :title="props.labels.lastPage"
+          data-test-pagination-btn-last
+          @click="onClickPage(last)"
+        >
+          <SvgChevronDouble
+            direction="right"
+            size="1em"
+            :stroke-width="8"
+          />
+        </button>
+      </li>
+    </ul>
+    <label
+      v-if="props.showPageSelect"
+      class="dwui-pagination-select"
+    >
+      <span>{{ props.labels.pageNumber }}</span>
+      <select
+        :value="current"
+        :disabled="last <= 1"
+        data-test-page-number
+        @pointerenter="onPointerEnterSelect"
+        @pointerleave="onPointerLeaveSelect"
+        @focus="onFocusSelect"
+        @blur="onBlurSelect"
+        @change="onChangePage"
+      >
+        <option
+          v-for="page in pageOptions"
+          :key="page"
+          :value="page"
+        >
+          {{ page }} ({{ (page - 1) * props.limit + 1 }} - {{ Math.min(page * props.limit, props.totalCount) }})
+        </option>
+      </select>
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { DataTableResolvedLabels } from '@/types/data-table';
+import { SvgBlackArrow, SvgChevron, SvgChevronDouble } from '@digitalwalletcorp/vue-svg-icons';
+
+interface Props {
+  /** 現在ページ(1起点) */
+  current: number;
+  /** 総件数 */
+  totalCount: number;
+  /** 1ページあたりの件数 */
+  limit: number;
+  /** 並べるページ番号の最大数 */
+  maxPagination: number;
+  /** ページ番号の選択を表示するか */
+  showPageSelect: boolean;
+  /** 表示する文言 */
+  labels: DataTableResolvedLabels;
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'emit:changePage', page: number): void;
+}
+const emit = defineEmits<Emits>();
+
+const last = computed((): number => {
+  return Math.ceil(props.totalCount / props.limit);
+});
+
+/** 現在ページを 1 〜 last に収めた値 */
+const current = computed((): number => {
+  return Math.min(Math.max(props.current, 1), last.value);
+});
+
+/** ページ番号の選択に全ページを並べているか。ページ数が多いと option の生成が重いため、操作するときだけ並べる */
+const expanded = ref(false);
+
+/** ページ番号の選択に並べるページ。閉じている間は現在ページだけにして表示値を保つ */
+const pageOptions = computed((): number[] => {
+  if (last.value < 1) {
+    return [];
+  }
+  if (!expanded.value) {
+    return [current.value];
+  }
+  return Array.from({ length: last.value }, (_, i) => i + 1);
+});
+
+/** 現在ページを中心に並べるページ番号。端に寄ったときは反対側へ伸ばす */
+const pages = computed((): number[] => {
+  if (last.value < 1) {
+    return [];
+  }
+  const start = Math.min(
+    Math.max(current.value - Math.floor((props.maxPagination - 1) / 2), 1),
+    Math.max(last.value - props.maxPagination + 1, 1)
+  );
+  const end = Math.min(start + props.maxPagination - 1, last.value);
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+});
+
+const onClickPage = (page: number): void => {
+  if (page !== props.current) {
+    emit('emit:changePage', page);
+  }
+};
+
+/**
+ * 表示しているページ番号の隣のブロックへ移動する。移動先はそのブロックの中央のページ
+ *
+ * @param {-1 | 1} direction -1 なら前のブロック、1 なら次のブロック
+ */
+const onClickBlock = (direction: -1 | 1): void => {
+  let start: number;
+  if (direction < 0) {
+    start = Math.max(pages.value[0] - props.maxPagination, 1);
+  } else {
+    const end = Math.min(pages.value[pages.value.length - 1] + props.maxPagination, last.value);
+    start = end - props.maxPagination + 1;
+  }
+  onClickPage(start + Math.round((props.maxPagination - 1) / 2));
+};
+
+const onChangePage = (event: Event): void => {
+  onClickPage(Number((event.target as HTMLSelectElement).value));
+};
+
+// クリックで開く前に option が揃っているように、ポインタが乗った時点で並べる
+const onPointerEnterSelect = (): void => {
+  expanded.value = true;
+};
+
+// 開いたリストは select の外にあるため、フォーカスがある間(開いている可能性がある間)は畳まない
+const onPointerLeaveSelect = (event: PointerEvent): void => {
+  if (document.activeElement !== event.currentTarget) {
+    expanded.value = false;
+  }
+};
+
+const onFocusSelect = (): void => {
+  expanded.value = true;
+};
+
+const onBlurSelect = (): void => {
+  expanded.value = false;
+};
+</script>
+
+<style>
+:where(.dwui-pagination) {
+  display: flex;
+  align-items: center;
+  gap: 0.67em;
+  white-space: nowrap;
+}
+
+:where(.dwui-pagination-list) {
+  display: flex;
+  /* ボタンをコントロール行の高さまで伸ばす */
+  align-self: stretch;
+  align-items: stretch;
+  gap: 0.25em;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where(.dwui-pagination-list li) {
+  display: flex;
+}
+
+:where(.dwui-pagination-list button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  /* 高さは行にそろえ、幅は高さと同じにして正方形にする */
+  aspect-ratio: 1;
+  padding: 0;
+  border: 1px solid var(--dwui-border-color-pagination-button, light-dark(#d3d3d3, #5a5a5a));
+  border-radius: 3px;
+  background: var(--dwui-background-pagination-button, light-dark(#fafafa, #2a2a2a));
+  color: var(--dwui-color-text-pagination-button, inherit);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+:where(.dwui-pagination-list button:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:where(.dwui-pagination-list button:not(:disabled, .dwui-current):hover) {
+  background: var(--dwui-background-pagination-button-hover, light-dark(#46e2f7, #1f7a86));
+}
+
+:where(.dwui-pagination-list .dwui-current) {
+  background: var(--dwui-background-pagination-button-current, linear-gradient(rgba(78, 221, 231, 0.7), rgba(34, 162, 172, 0.7)));
+  color: var(--dwui-color-text-pagination-button-current, inherit);
+  cursor: default;
+}
+
+:where(.dwui-pagination-list 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);
+}
+
+:where(.dwui-pagination-select) {
+  display: inline-flex;
+  align-self: stretch;
+  align-items: center;
+  gap: 0.33em;
+}
+
+:where(.dwui-pagination-select select) {
+  align-self: stretch;
+}
+</style>

package/src/internal/snackbar-container.vue

@@ -0,0 +1,258 @@
+<!--
+snackbar の表示領域
+画面の上端または下端に固定し、snackbar を placement の側に寄せて並べる。
+direction が overlap なら同じ位置に重ねて新しいものを前面に出し、column なら縦に積み、row なら横に並べて端で折り返す。
+clearable の snackbar があるときは、先頭(overlap では重ねた snackbar の横)に一括消去ボタンを置く。
+showSnackbar から body 直下に描画して使う。
+-->
+<template>
+  <TransitionGroup
+    tag="div"
+    name="dwui-snackbar-fade"
+    class="dwui-snackbar-container"
+    :class="containerClasses"
+    role="status"
+    @after-leave="emit('emit:afterLeave')"
+  >
+    <button
+      v-if="clearLabel != null"
+      key="clear"
+      type="button"
+      class="dwui-snackbar-clear-button"
+      :aria-label="clearLabel"
+      :title="clearLabel"
+      @click="emit('emit:clear')"
+    >
+      <SvgWastebasket />
+    </button>
+    <button
+      v-for="item of props.items"
+      :key="item.id"
+      type="button"
+      class="dwui-snackbar"
+      :class="item.class"
+      :style="item.style"
+      :title="item.message"
+      @click="emit('emit:close', item.id)"
+    >
+      <span
+        v-if="item.title || item.label"
+        class="dwui-snackbar-header"
+      >
+        <span
+          v-if="item.title"
+          class="dwui-snackbar-title"
+        >
+          {{ item.title }}
+        </span>
+        <span
+          v-if="item.label"
+          class="dwui-snackbar-label"
+        >
+          {{ item.label }}
+        </span>
+      </span>
+      <span class="dwui-snackbar-message">
+        {{ item.message }}
+      </span>
+      <span
+        v-if="item.timestamp"
+        class="dwui-snackbar-timestamp"
+      >
+        {{ item.timestamp }}
+      </span>
+    </button>
+  </TransitionGroup>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { SvgWastebasket } from '@digitalwalletcorp/vue-svg-icons';
+import type { SnackbarDirection, SnackbarItem, SnackbarPlacement } from '@/internal/snackbar-item';
+
+interface Props {
+  /** 表示する位置 */
+  placement: SnackbarPlacement;
+  /** 同じ表示領域に並べる向き */
+  direction: SnackbarDirection;
+  /** 表示する snackbar。古いものから順に並べる */
+  items: SnackbarItem[];
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  /** snackbar がクリックされた */
+  (e: 'emit:close', id: number): void;
+  /** 一括消去ボタンがクリックされた */
+  (e: 'emit:clear'): void;
+  /** 要素が閉じるアニメーションを終えて取り除かれた */
+  (e: 'emit:afterLeave'): void;
+}
+const emit = defineEmits<Emits>();
+
+const containerClasses = computed(() => {
+  const [vertical, horizontal = 'center'] = props.placement.split('-');
+  return [
+    `dwui-snackbar-container-${vertical}`,
+    `dwui-snackbar-container-${horizontal}`,
+    `dwui-snackbar-container-${props.direction}`
+  ];
+});
+
+/** 一括消去ボタンの読み上げ名。clearable の snackbar のうち最も新しいものの値を使い、無ければボタンを出さない */
+const clearLabel = computed(() => props.items.filter((item) => item.clearable).at(-1)?.clearLabel);
+</script>
+
+<style>
+:where(.dwui-snackbar-container) {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: var(--dwui-z-index-snackbar, 7000);
+  display: flex;
+  gap: var(--dwui-gap-snackbar-container, 0.33em);
+  box-sizing: border-box;
+  padding: var(--dwui-padding-snackbar-container, 0.33em);
+  /* 領域は画面の幅いっぱいに広がるため、snackbar の無いところでは背面のページを操作できるようにする */
+  pointer-events: none;
+}
+
+:where(.dwui-snackbar-container > *) {
+  pointer-events: auto;
+}
+
+:where(.dwui-snackbar-container-top) {
+  top: 0;
+}
+
+:where(.dwui-snackbar-container-bottom) {
+  bottom: 0;
+}
+
+:where(.dwui-snackbar-container-overlap) {
+  display: grid;
+  grid-template-columns: auto auto;
+  column-gap: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+:where(.dwui-snackbar-container-overlap.dwui-snackbar-container-start) {
+  justify-content: start;
+}
+
+:where(.dwui-snackbar-container-overlap.dwui-snackbar-container-end) {
+  justify-content: end;
+}
+
+/* 全件を同じセルに置く。DOM で後ろにある新しい snackbar が前面に描かれる */
+:where(.dwui-snackbar-container-overlap > .dwui-snackbar) {
+  grid-area: 1 / 2;
+}
+
+:where(.dwui-snackbar-container-overlap > .dwui-snackbar-clear-button) {
+  grid-area: 1 / 1;
+  margin-right: var(--dwui-gap-snackbar-container, 0.33em);
+}
+
+:where(.dwui-snackbar-container-column) {
+  flex-direction: column;
+  align-items: center;
+}
+
+:where(.dwui-snackbar-container-column.dwui-snackbar-container-start) {
+  align-items: flex-start;
+}
+
+:where(.dwui-snackbar-container-column.dwui-snackbar-container-end) {
+  align-items: flex-end;
+}
+
+:where(.dwui-snackbar-container-row) {
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+:where(.dwui-snackbar-container-row.dwui-snackbar-container-start) {
+  justify-content: flex-start;
+}
+
+:where(.dwui-snackbar-container-row.dwui-snackbar-container-end) {
+  justify-content: flex-end;
+}
+
+:where(.dwui-snackbar) {
+  display: block;
+  box-sizing: border-box;
+  width: var(--dwui-width-snackbar, 300px);
+  max-width: 100%;
+  padding: var(--dwui-padding-snackbar, 0.5em 0.67em);
+  border: none;
+  border-radius: var(--dwui-radius-snackbar, 0);
+  background: var(--dwui-background-snackbar, #323232);
+  color: var(--dwui-color-text-snackbar, #ffffff);
+  box-shadow: var(--dwui-box-shadow-snackbar, 4px 4px 3px 0 rgba(0, 0, 0, 0.25));
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+:where(.dwui-snackbar: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-snackbar-header) {
+  display: flex;
+  gap: 0.67em;
+  color: var(--dwui-color-text-snackbar-header, #d3d3d3);
+  font-size: 0.8em;
+}
+
+:where(.dwui-snackbar-label) {
+  margin-left: auto;
+}
+
+:where(.dwui-snackbar-message) {
+  display: block;
+  padding-left: 0.33em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(.dwui-snackbar-timestamp) {
+  display: block;
+  color: var(--dwui-color-text-snackbar-timestamp, #d3d3d3);
+  font-size: 0.8em;
+  text-align: right;
+}
+
+:where(.dwui-snackbar-clear-button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.17em;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  background-image: none;
+  color: var(--dwui-color-text-snackbar-clear-button, inherit);
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(.dwui-snackbar-clear-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);
+}
+
+:where(.dwui-snackbar-fade-enter-active, .dwui-snackbar-fade-leave-active) {
+  transition: opacity 0.5s ease;
+}
+
+:where(.dwui-snackbar-fade-enter-from, .dwui-snackbar-fade-leave-to) {
+  opacity: 0;
+}
+</style>

package/src/internal/snackbar-item.ts

@@ -0,0 +1,20 @@
+import type { ClassValue, StyleValue } from 'vue';
+
+/** 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;
+}

package/src/internal/tab-group-context.ts

@@ -8,8 +8,10 @@ export type TabContentStatus = 'warn' | 'error';
  * TabGroupとTabContentの間だけで使い、利用側には公開しない
  */
 export interface TabGroupContext {
-  /** 選択中のタブのlabelId */
-  activeLabelId: ComputedRef<string | undefined>;
+  /** 見出しと中身の id の接頭辞。aria-controls / aria-labelledby で結び付けるのに使う */
+  groupName: string;
+  /** 選択中のタブのtabId */
+  activeTabId: ComputedRef<string | undefined>;
   /** TabGroupがマウント済みか */
   mounted: Ref<boolean>;
   /** TabGroupの#loadingスロット。未指定ならTabContentは既定の読み込み中表示を出す */