@digitalwalletcorp/vue-core 1.2.1 → 1.3.0

package/src/internal/mount-window.ts

@@ -0,0 +1,110 @@
+import { defineComponent, getCurrentInstance, h, onBeforeUnmount, ref, render } from 'vue';
+import type { AppContext, VNode } from 'vue';
+import type { MovableWindowHandle } from '@/types/movable-window';
+
+/** ウィンドウのコンポーネントに渡す、開閉とローディングの props とリスナー */
+export interface WindowProps {
+  open: boolean;
+  loading: boolean;
+  'onUpdate:open': (value: boolean) => void;
+  'onEmit:close': () => void;
+}
+
+export interface MountWindowOptions {
+  /** 中身に引き継ぐアプリのコンテキスト */
+  appContext?: AppContext;
+  /** 利用者が指定した、閉じ終わったときに呼ぶ関数 */
+  onClose?: () => void;
+  /** 呼び出し側(use 系)が、閉じ終わったときに呼ぶ関数 */
+  onClosed?: () => void;
+}
+
+/**
+ * ウィンドウ(OverlayBox / FloatingComponent)を body の末尾に描画し、閉じ終わったら取り外す。
+ * 何をどう描くかは renderWindow に任せ、開閉・ローディング・取り外しの共通処理だけを持つ
+ *
+ * @param {(props: WindowProps, handle: MovableWindowHandle) => VNode} renderWindow ウィンドウを描画する関数
+ * @param {MountWindowOptions} options
+ * @param {Set<MovableWindowHandle>} opened 開いているハンドルの集合。closeAll 系で使う
+ * @returns {MovableWindowHandle}
+ */
+export function mountWindow(
+  renderWindow: (props: WindowProps, handle: MovableWindowHandle) => VNode,
+  options: MountWindowOptions,
+  opened: Set<MovableWindowHandle>
+): MovableWindowHandle {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const open = ref(true);
+  const loading = ref(false);
+
+  const handle: MovableWindowHandle = {
+    close: () => {
+      open.value = false;
+    },
+    setLoading: (value: boolean) => {
+      loading.value = value;
+    }
+  };
+
+  const Host = defineComponent(() => {
+    return () => renderWindow({
+      open: open.value,
+      loading: loading.value,
+      'onUpdate:open': (value: boolean) => {
+        open.value = value;
+      },
+      'onEmit:close': () => {
+        opened.delete(handle);
+        render(null, container);
+        container.remove();
+        options.onClosed?.();
+        options.onClose?.();
+      }
+    }, handle);
+  });
+
+  const vnode = h(Host);
+  if (options.appContext) {
+    vnode.appContext = options.appContext;
+  }
+  render(vnode, container);
+  opened.add(handle);
+  return handle;
+}
+
+/**
+ * 呼び出したコンポーネントに結び付けてウィンドウを開くための共通処理。
+ * 開いたウィンドウはコンポーネントのアンマウント時に閉じ、中身にはコンポーネントのアプリのコンテキストを引き継ぐ。
+ * コンポーネントの setup の中で呼ぶこと
+ *
+ * @param {string} hookName setup の外で呼ばれたときのエラーに出す関数名
+ * @returns {{ appContext: AppContext; own: (open: (onClosed: () => void) => MovableWindowHandle) => MovableWindowHandle }}
+ */
+export function useWindowOwner(hookName: string): {
+  appContext: AppContext;
+  own: (open: (onClosed: () => void) => MovableWindowHandle) => MovableWindowHandle;
+} {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    throw new Error(`${hookName}() must be called inside setup().`);
+  }
+  const ownedHandles = new Set<MovableWindowHandle>();
+
+  onBeforeUnmount(() => {
+    for (const handle of ownedHandles) {
+      handle.close();
+    }
+  });
+
+  return {
+    appContext: instance.appContext,
+    own: (open) => {
+      const handle = open(() => {
+        ownedHandles.delete(handle);
+      });
+      ownedHandles.add(handle);
+      return handle;
+    }
+  };
+}

package/src/internal/movable-window.vue

@@ -0,0 +1,315 @@
+<!--
+見出し・閉じるボタン・本体・リサイズのつまみを持つウィンドウの枠(OverlayBox / FloatingComponent の共通部分)
+ドラッグでの移動とリサイズを扱う。初期位置・初期サイズは利用側が expose した position / size に書き込んで決める。
+色や余白は --dwui-*-movable-window で受け取る。利用側のコンポーネントがこの変数に自分の公開変数を割り当てる。
+各部位には name を接頭辞にしたクラス(dwui-overlay-box-header など)も付け、利用側の公開クラス名で指定できるようにする。
+-->
+<template>
+  <div
+    ref="refWindow"
+    class="dwui-movable-window"
+    role="dialog"
+    :aria-labelledby="titleId"
+    :style="windowStyle"
+  >
+    <div
+      class="dwui-movable-window-frame"
+      @pointerdown="movableWindow.onDragStart"
+    >
+      <div
+        class="dwui-movable-window-header"
+        :class="[ `${props.name}-header`, props.headerClass, { 'dwui-movable': props.dragMode } ]"
+        :style="props.headerStyle"
+        @pointerdown="movableWindow.onDragHeaderStart"
+      >
+        <div
+          :id="titleId"
+          class="dwui-movable-window-title"
+          :class="`${props.name}-title`"
+        >
+          <slot name="title" />
+        </div>
+        <slot name="actions" />
+        <button
+          type="button"
+          class="dwui-movable-window-close-button"
+          :class="`${props.name}-close-button`"
+          :aria-label="props.closeLabel"
+          @click="emit('emit:close')"
+        >
+          <SvgNegativeSquaredCrossMark />
+        </button>
+      </div>
+      <div
+        class="dwui-movable-window-body"
+        :class="[ `${props.name}-body`, { 'dwui-movable': props.dragMode === 'body' } ]"
+      >
+        <slot />
+      </div>
+    </div>
+    <div
+      v-if="props.loading"
+      class="dwui-movable-window-loading"
+      :class="`${props.name}-loading`"
+    >
+      <div
+        class="dwui-movable-window-spinner"
+        :class="`${props.name}-spinner`"
+      />
+    </div>
+    <div
+      v-for="corner in cornersWithoutGrip"
+      :key="corner"
+      class="dwui-movable-window-corner"
+      :class="[ `${props.name}-corner`, `dwui-${corner}` ]"
+      @pointerdown.prevent="movableWindow.onResizeStart($event, corner)"
+    />
+    <div
+      class="dwui-movable-window-resizer"
+      :class="`${props.name}-resizer`"
+      @pointerdown.prevent="movableWindow.onResizeStart($event, 'bottom-right')"
+    >
+      <SvgCornerDiagonal direction="bottom-right" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue';
+import type { ClassValue, StyleValue } from 'vue';
+import { SvgCornerDiagonal, SvgNegativeSquaredCrossMark } from '@digitalwalletcorp/vue-svg-icons';
+import { useMovableWindow } from '@/internal/use-movable-window';
+import type { MovableWindowCorner } from '@/internal/use-movable-window';
+import type { MovableWindowDragMode } from '@/types/movable-window';
+
+interface Props {
+  /** 各部位のクラスの接頭辞。利用側のコンポーネントのクラス名(dwui-overlay-box など) */
+  name: string;
+  /** ドラッグで移動するときに掴む範囲。未指定なら移動できない */
+  dragMode?: MovableWindowDragMode;
+  /** ウィンドウに暗幕とスピナーを重ね、中身を操作できなくする */
+  loading: boolean;
+  /** 閉じるボタンの読み上げ名 */
+  closeLabel: string;
+  /** ドラッグ終了時に下端も画面内へ戻す */
+  clampBottom: boolean;
+  /** 見出しに付けるクラス */
+  headerClass?: ClassValue;
+  /** 見出しに付けるスタイル */
+  headerStyle?: StyleValue;
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  /** 閉じるボタンが押された */
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+interface Slots {
+  /** 見出し */
+  title?(): unknown;
+  /** 見出しの閉じるボタンの手前に置く操作 */
+  actions?(): unknown;
+  /** ウィンドウに表示する中身 */
+  default?(): unknown;
+}
+defineSlots<Slots>();
+
+const refWindow = ref<HTMLDivElement>();
+
+const titleId = useId();
+
+/** つまみのアイコンを置かず、透明な掴み領域だけでリサイズする角 */
+const cornersWithoutGrip: MovableWindowCorner[] = ['top-left', 'top-right', 'bottom-left'];
+
+const movableWindow = useMovableWindow({
+  target: refWindow,
+  dragMode: () => props.dragMode,
+  clampBottom: props.clampBottom
+});
+
+const windowStyle = computed(() => {
+  const { currentPosition, currentRect } = movableWindow;
+  return {
+    top: `${currentPosition.y}px`,
+    left: `${currentPosition.x}px`,
+    width: 0 <= currentRect.width ? `${currentRect.width}px` : undefined,
+    height: 0 <= currentRect.height ? `${currentRect.height}px` : undefined
+  };
+});
+
+defineExpose({
+  /** ウィンドウの要素 */
+  element: refWindow,
+  /** 位置(px)。書き込むと移動する */
+  position: movableWindow.currentPosition,
+  /** 幅・高さ(px)。-1 は中身に合わせる。書き込むとその寸法になる */
+  size: movableWindow.currentRect,
+  /** ドラッグ・リサイズのリスナーを解除する */
+  teardown: movableWindow.teardown
+});
+</script>
+
+<style>
+:where(.dwui-movable-window) {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: var(--dwui-min-width-movable-window, auto);
+  max-height: var(--dwui-max-height-movable-window, none);
+  border: 1px solid var(--dwui-border-color-movable-window, light-dark(#8f8f8f, #6b6f76));
+  border-radius: var(--dwui-radius-movable-window, 4px);
+  background: var(--dwui-background-movable-window, Canvas);
+  color: var(--dwui-color-text-movable-window, CanvasText);
+  box-shadow: var(--dwui-box-shadow-movable-window, 0 2px 8px rgba(0, 0, 0, 0.33));
+  outline: none;
+  overflow: hidden;
+}
+
+/* 見出しと本体を縦に並べ、本体に残りの高さを取らせる。高さが中身より小さいときは本体の中でスクロールする */
+:where(.dwui-movable-window-frame) {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+:where(.dwui-movable-window-header) {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.33em;
+  padding: var(--dwui-padding-movable-window-header, 0.17em 0.33em);
+  border-bottom: 1px solid var(--dwui-border-color-movable-window, light-dark(#8f8f8f, #6b6f76));
+  background: var(--dwui-background-movable-window-header, transparent);
+  color: var(--dwui-color-text-movable-window-header, inherit);
+}
+
+:where(.dwui-movable-window-title) {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where(.dwui-movable-window-close-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: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(.dwui-movable-window-close-button:hover) {
+  background: var(--dwui-background-movable-window-close-button-hover, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12)));
+}
+
+:where(.dwui-movable-window-close-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-movable-window-body) {
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-height: 0;
+  padding: var(--dwui-padding-movable-window-body, 0.4em);
+  overflow: auto;
+}
+
+:where(.dwui-movable-window-header.dwui-movable, .dwui-movable-window-body.dwui-movable) {
+  cursor: move;
+  /* 指で動かしたときにブラウザのスクロールとして扱われないようにする */
+  touch-action: none;
+}
+
+/* 見出しを掴んで動かすときに文字が選択されないようにする */
+:where(.dwui-movable-window-header.dwui-movable) {
+  user-select: none;
+}
+
+:where(.dwui-movable-window-resizer) {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 18px;
+  height: 18px;
+  color: var(--dwui-color-text-movable-window-resizer, GrayText);
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
+/* つまみ本体でドラッグを受けるため、アイコンはイベントを透過させる */
+:where(.dwui-movable-window-resizer > svg) {
+  display: block;
+  pointer-events: none;
+}
+
+/*
+ * アイコンの無い角の掴み領域。
+ * clip-path で辺に沿った L 字の帯だけを残す。クリップされた部分はポインタの判定からも外れるため、
+ * 角に近い閉じるボタンや本体の操作を奪わない
+ */
+:where(.dwui-movable-window-corner) {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  touch-action: none;
+}
+
+:where(.dwui-movable-window-corner.dwui-top-left) {
+  top: 0;
+  left: 0;
+  clip-path: polygon(0 0, 100% 0, 100% 6px, 6px 6px, 6px 100%, 0 100%);
+  cursor: nwse-resize;
+}
+
+:where(.dwui-movable-window-corner.dwui-top-right) {
+  top: 0;
+  right: 0;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 6px) 100%, calc(100% - 6px) 6px, 0 6px);
+  cursor: nesw-resize;
+}
+
+:where(.dwui-movable-window-corner.dwui-bottom-left) {
+  bottom: 0;
+  left: 0;
+  clip-path: polygon(0 0, 6px 0, 6px calc(100% - 6px), 100% calc(100% - 6px), 100% 100%, 0 100%);
+  cursor: nesw-resize;
+}
+
+:where(.dwui-movable-window-loading) {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dwui-background-movable-window-loading, light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4)));
+}
+
+:where(.dwui-movable-window-spinner) {
+  box-sizing: border-box;
+  width: var(--dwui-size-movable-window-spinner, 48px);
+  height: var(--dwui-size-movable-window-spinner, 48px);
+  border: 6px solid var(--dwui-border-color-movable-window-spinner, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2)));
+  border-left-color: var(--dwui-border-color-movable-window-spinner-accent, light-dark(rgba(47, 90, 74, 0.8), rgba(140, 200, 170, 0.8)));
+  border-radius: 50%;
+  animation: dwui-movable-window-spin 1.1s linear infinite;
+}
+
+@keyframes dwui-movable-window-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/internal/opened-overlay-boxes.ts

@@ -0,0 +1,2 @@
+/** 開いている OverlayBox を開いた順に持つ。Esc では最後に開いたものだけを閉じる */
+export const openedOverlayBoxes: symbol[] = [];