@digitalwalletcorp/vue-core 1.2.1 → 1.3.0

package/src/helpers/show-snackbar.ts

@@ -0,0 +1,153 @@
+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 が閉じた理由。click はクリック、duration は表示時間の経過、clear は一括消去ボタンと closeAllSnackbars()、handle は SnackbarHandle の close() */
+export type SnackbarCloseReason = 'click' | 'duration' | 'clear' | 'handle';
+
+export interface ShowSnackbarOptions {
+  /** 見出し */
+  title?: string;
+  /** 見出しの右側に出す短い文字 */
+  label?: string;
+  /** 右下に出す時刻。整形済みの文字列を渡す */
+  timestamp?: string;
+  /** 自動で閉じるまでの時間(ミリ秒)。未指定ならクリックするまで閉じない */
+  duration?: number;
+  /** 表示する位置 */
+  placement?: SnackbarPlacement;
+  /** 同じ表示領域に並べる向き。overlap は同じ位置に重ねて新しいものを前面に出し、column は縦に積み、row は横に並べて端で折り返す */
+  direction?: SnackbarDirection;
+  /** 同じ表示領域に一括消去ボタンを出す */
+  clearable?: boolean;
+  /** 一括消去ボタンの読み上げ名 */
+  clearLabel?: string;
+  /** snackbar に付けるクラス */
+  class?: ClassValue;
+  /** snackbar に付けるスタイル */
+  style?: StyleValue;
+  /** snackbar が閉じたときに呼ぶ関数 */
+  onClose?: (reason: SnackbarCloseReason) => void;
+}
+
+/** showSnackbar が返す、表示中の snackbar を閉じるためのハンドル */
+export interface SnackbarHandle {
+  /** snackbar を閉じる */
+  close: () => void;
+}
+
+interface SnackbarEntry {
+  timer?: ReturnType<typeof setTimeout>;
+  onClose?: (reason: SnackbarCloseReason) => void;
+}
+
+/** まとめて閉じるときに1件ずつずらす間隔(ms) */
+const CLEAR_INTERVAL = 50;
+
+const containers = new Map<string, SnackbarItem[]>();
+const entries = new Map<number, SnackbarEntry>();
+let lastId = 0;
+
+const removeItem = (items: SnackbarItem[], id: number, reason: SnackbarCloseReason): void => {
+  const index = items.findIndex((item) => item.id === id);
+  if (index < 0) {
+    return;
+  }
+  items.splice(index, 1);
+  const entry = entries.get(id);
+  entries.delete(id);
+  clearTimeout(entry?.timer);
+  entry?.onClose?.(reason);
+};
+
+const clearItems = (items: SnackbarItem[]): void => {
+  const ids = items.map((item) => item.id);
+  for (let i = 0; i < ids.length; i++) {
+    setTimeout(() => removeItem(items, ids[i], 'clear'), CLEAR_INTERVAL * i);
+  }
+};
+
+/**
+ * placement と direction の組み合わせごとの表示領域に並べる snackbar の一覧を返す。
+ * 表示領域が無ければ body の末尾に作り、空になったら取り外す
+ *
+ * @param {SnackbarPlacement} placement
+ * @param {SnackbarDirection} direction
+ * @returns {SnackbarItem[]}
+ */
+const openContainer = (placement: SnackbarPlacement, direction: SnackbarDirection): SnackbarItem[] => {
+  const key = `${placement} ${direction}`;
+  const opened = containers.get(key);
+  if (opened) {
+    return opened;
+  }
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const items = shallowReactive<SnackbarItem[]>([]);
+  containers.set(key, items);
+
+  render(h(SnackbarContainer, {
+    placement,
+    direction,
+    items,
+    'onEmit:close': (id: number) => removeItem(items, id, 'click'),
+    'onEmit:clear': () => clearItems(items),
+    'onEmit:afterLeave': () => {
+      if (items.length === 0 && containers.get(key) === items) {
+        containers.delete(key);
+        render(null, container);
+        container.remove();
+      }
+    }
+  }), container);
+  return items;
+};
+
+/**
+ * snackbar を表示する。
+ * placement と direction の組み合わせが同じ snackbar は同じ表示領域に並び、新しいものが末尾(overlap では前面)に加わる。
+ * クリックすると閉じる。ブラウザでのみ動作する
+ *
+ * @param {string} message 表示する文字列
+ * @param {ShowSnackbarOptions} [options]
+ * @returns {SnackbarHandle}
+ */
+export function showSnackbar(message: string, options?: ShowSnackbarOptions): SnackbarHandle {
+  const {
+    placement = 'bottom',
+    direction = 'overlap',
+    duration,
+    clearable = false,
+    clearLabel = 'Clear all',
+    onClose,
+    ...content
+  } = options ?? {};
+  // 読み上げられるよう、表示領域が DOM に入ってから中身を加える
+  const items = openContainer(placement, direction);
+  lastId += 1;
+  const id = lastId;
+  items.push({
+    ...content,
+    id,
+    message,
+    clearable,
+    clearLabel
+  });
+  entries.set(id, {
+    timer: duration ? setTimeout(() => removeItem(items, id, 'duration'), duration) : undefined,
+    onClose
+  });
+  return {
+    close: () => removeItem(items, id, 'handle')
+  };
+}
+
+/**
+ * 表示中の snackbar をすべて閉じる。表示領域ごとに、古い順に少しずつずらして閉じる
+ */
+export function closeAllSnackbars(): void {
+  for (const items of containers.values()) {
+    clearItems(items);
+  }
+}

package/src/hourglass-loading.vue

@@ -16,7 +16,7 @@ CSSの :empty に依存しないため「取得成功したが値が空」のケ
 <script setup lang="ts">
 import { SvgHourglass } from '@digitalwalletcorp/vue-svg-icons';
 
-interface Props {
+export interface Props {
   /** ローディング表示するか */
   loading: boolean;
   /** 砂が落ち切るまでの秒数。未指定ならSvgHourglassの既定値に任せる */

package/src/index.ts

@@ -1,3 +1,37 @@
 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 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 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';
+export type { Props as PageTitleProps, Slots as PageTitleSlots } from '@/page-title.vue';
+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 } 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 type { PopoverPlacement } from '@/internal/anchored-position';

package/src/internal/anchored-popover.vue

@@ -0,0 +1,192 @@
+<!--
+基準要素の近くに出すパネル
+popover 属性で最前面に描画するので、親の overflow や z-index の影響を受けない。
+表示位置は開いた時点で寸法を測って決めるため、位置が決まるまでパネルは画面に表示しない。
+開いている間はスクロール・リサイズのたびに基準要素の位置に合わせて置き直す。
+-->
+<template>
+  <div
+    ref="refPanel"
+    class="dwui-anchored-popover"
+    :class="{ 'dwui-arrow': props.arrow }"
+    :popover="props.mode"
+    :data-side="side"
+    @toggle="onTogglePopover"
+  >
+    <div class="dwui-anchored-popover-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue';
+import { computeAnchoredPosition } from '@/internal/anchored-position';
+import type { PopoverPlacement, Side } from '@/internal/anchored-position';
+
+interface Props {
+  /** 基準要素 */
+  anchor?: HTMLElement;
+  /** 基準要素に対するパネルの表示位置。収まらないときは反対側に出す */
+  placement: PopoverPlacement;
+  /** 基準要素を指す矢印を付ける */
+  arrow: boolean;
+  /** popover 属性の値。auto は外側のクリックや Esc で閉じ、manual は利用側が閉じる */
+  mode: 'auto' | 'manual';
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'emit:open'): void;
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+const refPanel = ref<HTMLElement>();
+const side = ref<Side>();
+
+/** 基準要素とパネルの間隔(px) */
+const gap = 4;
+/** 矢印がパネルからはみ出す高さ(px)。CSS の矢印の寸法と合わせる */
+const arrowHeight = 7;
+/** 矢印の中心をパネルの端から離す距離(px)。角丸に矢印がかからないようにする */
+const arrowMargin = 12;
+/** ビューポートの端との最小の余白(px) */
+const margin = 8;
+
+const hide = (): void => {
+  refPanel.value?.hidePopover();
+};
+
+const show = (): void => {
+  refPanel.value?.showPopover();
+};
+
+const place = (): void => {
+  const panel = refPanel.value;
+  if (!props.anchor || !panel) {
+    return;
+  }
+  const viewport = {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight
+  };
+  const position = computeAnchoredPosition(props.anchor.getBoundingClientRect(), panel.getBoundingClientRect(), viewport, {
+    placement: props.placement,
+    offset: props.arrow ? gap + arrowHeight : gap,
+    margin,
+    arrowMargin
+  });
+  side.value = position.side;
+  panel.style.top = `${position.top}px`;
+  panel.style.left = `${position.left}px`;
+  panel.style.setProperty('--dwui-offset-arrow', `${position.arrow}px`);
+  panel.style.visibility = 'visible';
+};
+
+// パネルの中のスクロールでは基準要素が動かないので置き直さない
+const onScroll = (event: Event): void => {
+  if (!refPanel.value?.contains(event.target as Node)) {
+    place();
+  }
+};
+
+const onTogglePopover = (event: ToggleEvent): void => {
+  if (event.newState === 'open') {
+    place();
+    window.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', place);
+    emit('emit:open');
+  } else {
+    if (refPanel.value) {
+      refPanel.value.style.visibility = '';
+    }
+    window.removeEventListener('scroll', onScroll, true);
+    window.removeEventListener('resize', place);
+    emit('emit:close');
+  }
+};
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', onScroll, true);
+  window.removeEventListener('resize', place);
+});
+
+defineExpose({
+  /** パネルの要素。invoker の設定や、要素がパネルの中かの判定に使う */
+  element: refPanel,
+  show,
+  hide
+});
+</script>
+
+<style>
+/*
+ * 色や余白は --dwui-*-anchored-popover で受け取る。利用側のコンポーネントがこの変数に自分の公開変数を割り当てる
+ * 矢印の分だけ overflow を visible にし、中身のスクロールは内側の要素で行う
+ */
+:where(.dwui-anchored-popover) {
+  inset: auto;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  max-width: var(--dwui-max-width-anchored-popover, calc(100vw - 16px));
+  max-height: var(--dwui-max-height-anchored-popover, calc(100vh - 16px));
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--dwui-border-color-anchored-popover, light-dark(#8f8f8f, #6b6f76));
+  border-radius: var(--dwui-radius-anchored-popover, 4px);
+  background: var(--dwui-background-anchored-popover, Canvas);
+  color: var(--dwui-color-text-anchored-popover, CanvasText);
+  box-shadow: var(--dwui-box-shadow-anchored-popover, 0 2px 8px rgba(0, 0, 0, 0.25));
+  font: inherit;
+  visibility: hidden;
+  overflow: visible;
+}
+
+:where(.dwui-anchored-popover-content) {
+  min-height: 0;
+  padding: var(--dwui-padding-anchored-popover, 0.67em 1em);
+  overflow: auto;
+}
+
+/* 矢印は 45 度回転した正方形の外側の 2 辺だけを見せる。--dwui-offset-arrow は開くたびに JS が設定する */
+:where(.dwui-anchored-popover.dwui-arrow)::before {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border: 1px solid var(--dwui-border-color-anchored-popover, light-dark(#8f8f8f, #6b6f76));
+  background: var(--dwui-background-anchored-popover-arrow, var(--dwui-background-anchored-popover, Canvas));
+  transform: rotate(45deg);
+}
+
+:where(.dwui-anchored-popover.dwui-arrow[data-side='bottom'])::before {
+  top: -6px;
+  left: calc(var(--dwui-offset-arrow) - 6px);
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+:where(.dwui-anchored-popover.dwui-arrow[data-side='top'])::before {
+  bottom: -6px;
+  left: calc(var(--dwui-offset-arrow) - 6px);
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+
+:where(.dwui-anchored-popover.dwui-arrow[data-side='right'])::before {
+  top: calc(var(--dwui-offset-arrow) - 6px);
+  left: -6px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+}
+
+:where(.dwui-anchored-popover.dwui-arrow[data-side='left'])::before {
+  top: calc(var(--dwui-offset-arrow) - 6px);
+  right: -6px;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+</style>

package/src/internal/anchored-position.ts

@@ -0,0 +1,135 @@
+/**
+ * 基準要素(アンカー)に対するパネルの配置。向きと揃えをハイフンでつなぐ
+ * 向きだけを指定したときは中央揃え
+ */
+export type PopoverPlacement =
+  | 'top' | 'top-start' | 'top-end'
+  | 'bottom' | 'bottom-start' | 'bottom-end'
+  | 'left' | 'left-start' | 'left-end'
+  | 'right' | 'right-start' | 'right-end';
+
+export type Side = 'top' | 'bottom' | 'left' | 'right';
+type Align = 'start' | 'center' | 'end';
+
+/** ビューポート座標の矩形 */
+export interface AnchorRect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export interface AnchoredPositionOptions {
+  /** 配置 */
+  placement: PopoverPlacement;
+  /** アンカーとパネルの間隔 */
+  offset: number;
+  /** ビューポートの端との最小の余白 */
+  margin: number;
+  /** 矢印の中心をパネルの端からどれだけ内側に収めるか */
+  arrowMargin: number;
+}
+
+export interface AnchoredPosition {
+  /** パネルの上端のビューポート座標 */
+  top: number;
+  /** パネルの左端のビューポート座標 */
+  left: number;
+  /** 実際に配置した向き。収まらずに反転した場合は指定と異なる */
+  side: Side;
+  /** 矢印の中心の位置。上下に出したときはパネルの左端から、左右に出したときは上端からの距離 */
+  arrow: number;
+}
+
+const opposite: Record<Side, Side> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+
+const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max);
+
+/**
+ * アンカーに対するパネルの配置座標を計算する
+ * 指定した向きに収まらないときは、反対側の方が広ければ反対側に出す。
+ * 揃えの方向にはみ出す分はビューポートの内側にずらし、それでも収まらない分は端に寄せる。
+ * 矢印はずらした後のパネル上でアンカーの中心を指す位置に置く。
+ *
+ * @param {AnchorRect} anchor 基準要素の矩形
+ * @param {Size} panel パネルの寸法
+ * @param {Size} viewport ビューポートの寸法
+ * @param {AnchoredPositionOptions} options 配置・間隔・余白
+ * @returns {AnchoredPosition}
+ */
+export const computeAnchoredPosition = (
+  anchor: AnchorRect,
+  panel: Size,
+  viewport: Size,
+  options: AnchoredPositionOptions
+): AnchoredPosition => {
+  const { offset, margin, arrowMargin } = options;
+  const [requested, align = 'center'] = options.placement.split('-') as [Side, Align | undefined];
+  const vertical = requested === 'top' || requested === 'bottom';
+  const anchorBottom = anchor.top + anchor.height;
+  const anchorRight = anchor.left + anchor.width;
+
+  // 向きの軸: 指定した向きに収まらず、反対側の方が広ければ反転する
+  const room: Record<Side, number> = {
+    top: anchor.top - margin,
+    bottom: viewport.height - anchorBottom - margin,
+    left: anchor.left - margin,
+    right: viewport.width - anchorRight - margin
+  };
+  const needed = (vertical ? panel.height : panel.width) + offset;
+  const fits = needed <= room[requested];
+  const side = fits || room[opposite[requested]] <= room[requested] ? requested : opposite[requested];
+
+  let mainStart: number;
+  switch (side) {
+    case 'top':
+      mainStart = anchor.top - offset - panel.height;
+      break;
+    case 'bottom':
+      mainStart = anchorBottom + offset;
+      break;
+    case 'left':
+      mainStart = anchor.left - offset - panel.width;
+      break;
+    default:
+      mainStart = anchorRight + offset;
+      break;
+  }
+
+  // 揃えの軸: start は辺をそろえ、center は中央をそろえ、end は反対の辺をそろえる
+  const alignStart = vertical ? anchor.left : anchor.top;
+  const anchorAlignSize = vertical ? anchor.width : anchor.height;
+  const panelAlignSize = vertical ? panel.width : panel.height;
+  let aligned: number;
+  switch (align) {
+    case 'start':
+      aligned = alignStart;
+      break;
+    case 'end':
+      aligned = alignStart + anchorAlignSize - panelAlignSize;
+      break;
+    default:
+      aligned = alignStart + (anchorAlignSize - panelAlignSize) / 2;
+      break;
+  }
+
+  // ビューポートに収まらない分は端に寄せる。パネルがビューポートより大きいときは margin 側を優先する
+  const top = clamp(vertical ? mainStart : aligned, margin, Math.max(margin, viewport.height - margin - panel.height));
+  const left = clamp(vertical ? aligned : mainStart, margin, Math.max(margin, viewport.width - margin - panel.width));
+
+  const anchorCenter = alignStart + anchorAlignSize / 2;
+  const panelStart = vertical ? left : top;
+  const arrow = clamp(anchorCenter - panelStart, arrowMargin, Math.max(arrowMargin, panelAlignSize - arrowMargin));
+
+  return { top, left, side, arrow };
+};