@digitalwalletcorp/vue-core 1.2.0 → 1.3.0

package/src/internal/use-movable-window.ts

@@ -0,0 +1,208 @@
+import { onBeforeUnmount, reactive, ref } from 'vue';
+import type { Ref } from 'vue';
+import type { MovableWindowDragMode } from '@/types/movable-window';
+
+/** リサイズで掴んでいる角 */
+export type MovableWindowCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+interface MovableWindowOptions<T extends HTMLElement = HTMLElement> {
+  /** ウィンドウ本体の要素。ドラッグ終了時に画面内へ戻す判定と、リサイズの起点の寸法に使う */
+  target: Ref<T | undefined>;
+  /** ドラッグモードを返す関数。'body' / 'header' のどちらでもない場合はドラッグできない */
+  dragMode: () => MovableWindowDragMode | undefined;
+  /** リサイズ時の最小幅(px) */
+  minWidth?: number;
+  /** リサイズ時の最小高さ(px) */
+  minHeight?: number;
+  /**
+   * ドラッグ終了時に下端も画面内へ戻すか。
+   * スクロールで領域が広がる通常のページ上では false、画面に固定したウィンドウでは true にする
+   */
+  clampBottom?: boolean;
+}
+
+/**
+ * ウィンドウのドラッグによる移動と、角のつまみによるリサイズを扱う。
+ * マウス・タッチ・ペンを Pointer Events でまとめて扱う。
+ * 位置・サイズのリアクティブな状態と、テンプレートの pointerdown に結び付ける開始ハンドラを返す。
+ * 初期位置・初期サイズは呼び出し側が決める
+ *
+ * @param {MovableWindowOptions<T>} options
+ */
+export function useMovableWindow<T extends HTMLElement = HTMLElement>(options: MovableWindowOptions<T>) {
+  const minWidth = options.minWidth ?? 20;
+  const minHeight = options.minHeight ?? 20;
+
+  const moving = ref(false);
+  const resizing = ref(false);
+
+  const currentPosition = reactive({
+    x: 0,
+    y: 0
+  });
+
+  /** 幅・高さ(px)。-1 は寸法を指定せず中身に合わせる */
+  const currentRect = reactive({
+    width: -1,
+    height: -1
+  });
+
+  /** 操作中のポインタ。2本目の指など、別のポインタの動きを拾わないようにする */
+  let activePointerId: number | null = null;
+  let resizingCorner: MovableWindowCorner = 'bottom-right';
+  let previousPointer = {
+    x: 0,
+    y: 0
+  };
+
+  const onPointerMove = (event: PointerEvent): void => {
+    if (event.pointerId !== activePointerId) {
+      return;
+    }
+    event.preventDefault();
+    const movementX = event.clientX - previousPointer.x;
+    const movementY = event.clientY - previousPointer.y;
+    previousPointer = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    if (moving.value) {
+      currentPosition.x += movementX;
+      currentPosition.y += movementY;
+    } else if (resizing.value) {
+      // 左・上の辺を掴んでいるときは、実際に縮んだ分だけ位置をずらす。最小サイズに当たったら位置も止まる
+      if (resizingCorner.endsWith('left')) {
+        const width = Math.max(minWidth, currentRect.width - movementX);
+        currentPosition.x += currentRect.width - width;
+        currentRect.width = width;
+      } else {
+        currentRect.width = Math.max(minWidth, currentRect.width + movementX);
+      }
+      if (resizingCorner.startsWith('top')) {
+        const height = Math.max(minHeight, currentRect.height - movementY);
+        currentPosition.y += currentRect.height - height;
+        currentRect.height = height;
+      } else {
+        currentRect.height = Math.max(minHeight, currentRect.height + movementY);
+      }
+    }
+  };
+
+  /**
+   * ドラッグで画面の外へ出しすぎたウィンドウを、掴める位置まで戻す
+   */
+  const clampPosition = (): void => {
+    const width = options.target.value?.getBoundingClientRect().width || 0;
+    if (currentPosition.x < 40 - width) {
+      currentPosition.x = 40 - width;
+    }
+    if (window.innerWidth - 40 < currentPosition.x) {
+      currentPosition.x = window.innerWidth - 40;
+    }
+    if (currentPosition.y < 0) {
+      currentPosition.y = 0;
+    }
+    if (options.clampBottom && window.innerHeight - 20 < currentPosition.y) {
+      currentPosition.y = window.innerHeight - 20;
+    }
+  };
+
+  const onPointerEnd = (event: PointerEvent): void => {
+    if (event.pointerId !== activePointerId) {
+      return;
+    }
+    const wasMoving = moving.value;
+    teardown();
+    if (wasMoving) {
+      clampPosition();
+    }
+  };
+
+  /**
+   * 登録中のドラッグ・リサイズのリスナーをすべて解除する。
+   * アンマウントを待たずに解除したいとき(ウィンドウを閉じたときなど)に呼ぶ
+   */
+  const teardown = (): void => {
+    document.removeEventListener('pointermove', onPointerMove, true);
+    document.removeEventListener('pointerup', onPointerEnd, true);
+    document.removeEventListener('pointercancel', onPointerEnd, true);
+    activePointerId = null;
+    moving.value = false;
+    resizing.value = false;
+  };
+
+  const start = (event: PointerEvent): void => {
+    teardown();
+    activePointerId = event.pointerId;
+    // 押した位置を移動量の起点にする。起点が無いと最初の移動量が捨てられる
+    previousPointer = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    document.addEventListener('pointermove', onPointerMove, true);
+    document.addEventListener('pointerup', onPointerEnd, true);
+    document.addEventListener('pointercancel', onPointerEnd, true);
+  };
+
+  /**
+   * ウィンドウ全体を掴んだときのドラッグ開始
+   *
+   * @param {PointerEvent} event
+   */
+  const onDragStart = (event: PointerEvent): void => {
+    if (event.isPrimary && options.dragMode() === 'body') {
+      start(event);
+      moving.value = true;
+    }
+  };
+
+  /**
+   * ヘッダを掴んだときのドラッグ開始
+   *
+   * @param {PointerEvent} event
+   */
+  const onDragHeaderStart = (event: PointerEvent): void => {
+    if (event.isPrimary && options.dragMode() === 'header') {
+      start(event);
+      moving.value = true;
+    }
+  };
+
+  /**
+   * リサイズ開始
+   *
+   * @param {PointerEvent} event
+   * @param {MovableWindowCorner} [corner] 掴んだ角。既定は右下
+   */
+  const onResizeStart = (event: PointerEvent, corner: MovableWindowCorner = 'bottom-right'): void => {
+    if (!event.isPrimary) {
+      return;
+    }
+    resizingCorner = corner;
+    // 幅・高さが未指定(-1)のままだと移動量を足す起点が無く最小サイズに潰れるため、実寸を起点にする
+    const rect = options.target.value?.getBoundingClientRect();
+    if (rect) {
+      if (currentRect.width < 0) {
+        currentRect.width = rect.width;
+      }
+      if (currentRect.height < 0) {
+        currentRect.height = rect.height;
+      }
+    }
+    start(event);
+    resizing.value = true;
+  };
+
+  onBeforeUnmount(teardown);
+
+  return {
+    moving,
+    resizing,
+    currentPosition,
+    currentRect,
+    onDragStart,
+    onDragHeaderStart,
+    onResizeStart,
+    teardown
+  };
+}

package/src/internal/window-order.ts

@@ -0,0 +1,11 @@
+let lastOrder = 0;
+
+/**
+ * ウィンドウ(OverlayBox / FloatingComponent)の重なり順を返す。後から呼んだものほど大きく、前面に出る
+ *
+ * @returns {number}
+ */
+export const nextWindowOrder = (): number => {
+  lastOrder += 1;
+  return lastOrder;
+};

package/src/intersection-lazy-component.vue

@@ -0,0 +1,84 @@
+<!--
+スクロールに応じて、当該領域が画面表示領域になったときにコンテンツを描画するコンポーネント
+一度描画したら、表示領域から外れても描画したままにする。
+IntersectionObserver はブラウザにしか無いので、マウント後に生成する。
+root にテンプレート参照を渡すと、このコンポーネントのマウント時にはまだ要素が入っていないため、オプションが変わったら監視をやり直す。
+-->
+<template>
+  <div
+    ref="refTarget"
+    class="dwui-intersection-lazy-component"
+  >
+    <slot v-if="visible" />
+    <slot
+      v-else
+      name="placeholder"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+export interface Props {
+  /** 交差を判定するスクロール領域の要素。未指定ならビューポート */
+  root?: Element | null;
+  /** 判定する領域を root の端から広げる、または狭める量。CSS の margin と同じ書式 */
+  rootMargin?: string;
+  /** 中身を描画する交差の割合(0〜1)。配列も渡せる */
+  threshold?: number | number[];
+}
+const props = defineProps<Props>();
+
+export interface Emits {
+  /** 初めて画面に入って中身を描画したときに発行する */
+  (e: 'emit:visible'): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** 画面に入ってから描画する中身 */
+  default?(): unknown;
+  /** 画面に入るまでの間に表示する中身 */
+  placeholder?(): unknown;
+}
+defineSlots<Slots>();
+
+const refTarget = ref<HTMLElement>();
+const visible = ref(false);
+
+let observer: IntersectionObserver | undefined;
+
+const observe = (): void => {
+  observer?.disconnect();
+  observer = undefined;
+  if (!refTarget.value || visible.value) {
+    return;
+  }
+  observer = new IntersectionObserver((entries) => {
+    if (entries.some((entry) => entry.isIntersecting)) {
+      visible.value = true;
+      observer?.disconnect();
+      observer = undefined;
+      emit('emit:visible');
+    }
+  }, {
+    root: props.root,
+    rootMargin: props.rootMargin,
+    threshold: props.threshold
+  });
+  observer.observe(refTarget.value);
+};
+
+onMounted(() => {
+  observe();
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
+
+watch(() => [props.root, props.rootMargin, props.threshold], () => {
+  observe();
+}, { flush: 'post' });
+</script>

package/src/label-button.vue

@@ -2,7 +2,10 @@
 アイコンとラベルを持つボタン
 -->
 <template>
-  <button>
+  <button
+    type="button"
+    class="dwui-label-button"
+  >
     <LabelIcon
       :preset="props.preset"
       :gap="props.gap"
@@ -33,7 +36,7 @@ import type { ClassValue, StyleValue } from 'vue';
 import LabelIcon from '@/label-icon.vue';
 import type { LabelPreset } from '@/types/label-preset';
 
-interface Props {
+export interface Props {
   /** アイコンとラベルの組み合わせ */
   preset?: LabelPreset;
   /** アイコンとラベルの間隔。未指定ならLabelIconの既定値(0.25em) */
@@ -49,9 +52,40 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   icon?(): unknown;
   default?(): unknown;
 }
 const slots = defineSlots<Slots>();
 </script>
+
+<style>
+:where(.dwui-label-button) {
+  display: inline-block;
+  padding: 0.17em 0.5em;
+  border: 1px solid var(--dwui-border-color-label-button, light-dark(#8f8f8f, #6b6f76));
+  border-radius: 3px;
+  background: var(--dwui-background-label-button, light-dark(#f4f4f4, #3a3c40));
+  color: var(--dwui-color-text-label-button, light-dark(#1a1a1a, #e6e6e6));
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(.dwui-label-button:not(:disabled):hover) {
+  background: var(--dwui-background-label-button-hover, light-dark(#e6e6e6, #474a50));
+}
+
+:where(.dwui-label-button:not(:disabled):active) {
+  background: var(--dwui-background-label-button-active, light-dark(#d6d6d6, #2f3135));
+}
+
+:where(.dwui-label-button:disabled) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:where(.dwui-label-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/label-icon.vue

@@ -31,7 +31,7 @@
 import type { ClassValue, StyleValue } from 'vue';
 import type { LabelPreset } from '@/types/label-preset';
 
-interface Props {
+export interface Props {
   /** アイコンとラベルの組み合わせ */
   preset?: LabelPreset;
   /** アイコンとラベルの間隔。未指定なら既定値(0.25em) */
@@ -47,7 +47,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   icon?(): unknown;
   default?(): unknown;
 }

package/src/modal-dialog.vue

@@ -0,0 +1,287 @@
+<!--
+モーダルダイアログ
+ブラウザ標準の <dialog> を showModal() で開き、メッセージと OK、または Yes / No のボタンを表示する。
+ボタンか Esc で閉じ、閉じたボタンを close イベントで知らせる。
+-->
+<template>
+  <dialog
+    ref="refDialog"
+    class="dwui-modal-dialog"
+    :class="`dwui-modal-dialog-${props.type}`"
+    :aria-labelledby="props.title ? titleId : undefined"
+    :aria-describedby="bodyId"
+    @cancel="onCancelDialog"
+    @keydown="onKeydownDialog"
+  >
+    <div class="dwui-modal-dialog-header">
+      <span class="dwui-modal-dialog-icon">
+        <slot name="icon">
+          <component :is="icons[props.type]" />
+        </slot>
+      </span>
+      <template v-if="props.title">
+        <span
+          v-if="props.html"
+          :id="titleId"
+          class="dwui-modal-dialog-title"
+          v-html="props.title"
+        />
+        <span
+          v-else
+          :id="titleId"
+          class="dwui-modal-dialog-title"
+        >
+          {{ props.title }}
+        </span>
+      </template>
+    </div>
+    <div
+      :id="bodyId"
+      class="dwui-modal-dialog-body"
+    >
+      <slot>
+        <template
+          v-for="(text, index) in messages"
+          :key="index"
+        >
+          <p
+            v-if="props.html"
+            v-html="text"
+          />
+          <p v-else>{{ text }}</p>
+        </template>
+        <div
+          v-if="images.length"
+          class="dwui-modal-dialog-images"
+        >
+          <img
+            v-for="(item, index) in images"
+            :key="index"
+            :src="item.src"
+            :alt="item.alt"
+          >
+        </div>
+      </slot>
+    </div>
+    <div
+      ref="refButtons"
+      class="dwui-modal-dialog-buttons"
+    >
+      <button
+        v-for="button in buttons"
+        :key="button"
+        type="button"
+        class="dwui-modal-dialog-button"
+        :class="`dwui-modal-dialog-button-${button}`"
+        @click="onClickButton(button)"
+      >
+        {{ labels[button] }}
+      </button>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, useId, watch } from 'vue';
+import { SvgCritical, SvgInfo, SvgQuestion, SvgWarningSign } from '@digitalwalletcorp/vue-svg-icons';
+import type { ModalDialogButton, ModalDialogImage, ModalDialogResult, ModalDialogType } from '@/types/modal-dialog';
+
+export interface Props {
+  /** ダイアログの種類 */
+  type?: ModalDialogType;
+  /** 見出し */
+  title?: string;
+  /** 表示する文字列。配列なら1要素を1段落として表示する */
+  message?: string | string[];
+  /** true の場合、見出しとメッセージを HTML として表示する */
+  html?: boolean;
+  /** メッセージの下に並べる画像 */
+  image?: ModalDialogImage | ModalDialogImage[];
+  /** 左から順に並べるボタン。未指定なら confirm は Yes と No、それ以外は OK */
+  buttons?: ModalDialogButton[];
+  /** OK ボタンの文字 */
+  okLabel?: string;
+  /** Yes ボタンの文字 */
+  yesLabel?: string;
+  /** No ボタンの文字 */
+  noLabel?: string;
+  /** Cancel ボタンの文字 */
+  cancelLabel?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  title: undefined,
+  message: undefined,
+  html: false,
+  image: undefined,
+  buttons: undefined,
+  okLabel: 'OK',
+  yesLabel: 'Yes',
+  noLabel: 'No',
+  cancelLabel: 'Cancel'
+});
+
+export interface Emits {
+  /** ボタンか Esc でダイアログが閉じた */
+  (e: 'emit:close', result: ModalDialogResult): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** 見出しの左に出すアイコン */
+  icon?(): unknown;
+  /** メッセージと画像に代えて表示する中身 */
+  default?(): unknown;
+}
+defineSlots<Slots>();
+
+/** 表示するか。ボタンか Esc で閉じると false になる */
+const open = defineModel<boolean>('open', { default: false });
+
+const refDialog = ref<HTMLDialogElement>();
+const refButtons = ref<HTMLElement>();
+
+const titleId = useId();
+const bodyId = useId();
+const icons = {
+  info: SvgInfo,
+  confirm: SvgQuestion,
+  warn: SvgWarningSign,
+  error: SvgCritical
+};
+/** 開いたときにフォーカスするボタンの優先順。操作を取り消す側のボタンを優先する */
+const focusOrder: ModalDialogButton[] = ['cancel', 'no', 'yes', 'ok'];
+
+const buttons = computed((): ModalDialogButton[] => props.buttons ?? (props.type === 'confirm' ? ['yes', 'no'] : ['ok']));
+
+const labels = computed((): Record<ModalDialogButton, string> => ({
+  ok: props.okLabel,
+  yes: props.yesLabel,
+  no: props.noLabel,
+  cancel: props.cancelLabel
+}));
+
+const messages = computed((): string[] => props.message == null ? [] : [props.message].flat());
+
+const images = computed((): Exclude<ModalDialogImage, string>[] => [props.image ?? []].flat().map((image) => {
+  if (typeof image === 'string') {
+    return {
+      src: image,
+      alt: ''
+    };
+  }
+  return image;
+}));
+
+const onClickButton = (result: ModalDialogResult): void => {
+  closeDialog(result);
+};
+
+const onCancelDialog = (event: Event): void => {
+  event.preventDefault();
+  closeDialog('cancel');
+};
+
+const onKeydownDialog = (event: KeyboardEvent): void => {
+  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+    return;
+  }
+  const elements = [...refButtons.value?.children ?? []] as HTMLElement[];
+  const index = elements.indexOf(document.activeElement as HTMLElement);
+  if (index < 0) {
+    return;
+  }
+  elements[event.key === 'ArrowRight' ? index + 1 : index - 1]?.focus();
+};
+
+const showDialog = (): void => {
+  refDialog.value?.showModal();
+  const focused = focusOrder.find((button) => buttons.value.includes(button));
+  const index = focused ? buttons.value.indexOf(focused) : -1;
+  (refButtons.value?.children[index] as HTMLElement | undefined)?.focus();
+};
+
+const closeDialog = (result: ModalDialogResult): void => {
+  // close を受けてすぐにアンマウントされても、ダイアログが閉じてフォーカスが戻るよう先に閉じる
+  refDialog.value?.close();
+  open.value = false;
+  emit('emit:close', result);
+};
+
+onMounted(() => {
+  if (open.value) {
+    showDialog();
+  }
+});
+
+watch(open, (newValue) => {
+  if (newValue) {
+    showDialog();
+  } else {
+    refDialog.value?.close();
+  }
+}, { flush: 'post' });
+</script>
+
+<style>
+:where(.dwui-modal-dialog) {
+  box-sizing: border-box;
+  width: var(--dwui-width-modal-dialog, 50vw);
+  min-width: min(320px, 100%);
+  padding: var(--dwui-padding-modal-dialog, 1.67em 2.5em);
+  border: 1px solid var(--dwui-border-color-modal-dialog, light-dark(#8f8f8f, #6b6f76));
+  border-radius: var(--dwui-radius-modal-dialog, 4px);
+  background: var(--dwui-background-modal-dialog, Canvas);
+  color: var(--dwui-color-text-modal-dialog, CanvasText);
+  box-shadow: var(--dwui-box-shadow-modal-dialog, 0 2px 8px rgba(0, 0, 0, 0.33));
+}
+
+:where(.dwui-modal-dialog)::backdrop {
+  background: var(--dwui-background-modal-dialog-backdrop, rgba(0, 0, 0, 0.5));
+}
+
+:where(.dwui-modal-dialog-header) {
+  display: flex;
+  align-items: center;
+  gap: 0.33em;
+}
+
+:where(.dwui-modal-dialog-icon) {
+  display: flex;
+  flex: none;
+  font-size: var(--dwui-font-size-modal-dialog-icon, 1.83em);
+}
+
+:where(.dwui-modal-dialog-body) {
+  padding: 0.83em;
+  overflow-wrap: anywhere;
+}
+
+:where(.dwui-modal-dialog-body p) {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+:where(.dwui-modal-dialog-images) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.33em;
+  margin-top: 0.67em;
+}
+
+:where(.dwui-modal-dialog-images img) {
+  width: var(--dwui-width-modal-dialog-image, 200px);
+  max-width: 100%;
+  height: auto;
+}
+
+:where(.dwui-modal-dialog-buttons) {
+  display: flex;
+  justify-content: space-evenly;
+  padding: 0.83em;
+}
+
+:where(.dwui-modal-dialog-button) {
+  min-width: var(--dwui-min-width-modal-dialog-button, 80px);
+}
+</style>