@digitalwalletcorp/vue-core 1.2.0 → 1.3.0

package/src/overlay-box.vue

@@ -0,0 +1,218 @@
+<!--
+オーバーレイボックス
+画面全体に暗幕を掛け、その上に見出しと閉じるボタンの付いたウィンドウを表示する。
+閉じるボタン・Esc・暗幕のクリック(closeOnBackdrop)で閉じる。ウィンドウはドラッグで移動でき、右下のつまみでリサイズできる。
+中に置いた要素が body 直下に描画するツールチップやドロップダウンを隠さないよう、<dialog> の最前面表示ではなく z-index で前面に出す。
+FloatingComponent とは開いた順に重なり、後から開いたものが前面に出る。
+-->
+<template>
+  <Transition
+    name="dwui-overlay-box-fade"
+    @after-leave="onAfterLeaveOverlayBox"
+  >
+    <div
+      v-if="open"
+      class="dwui-overlay-box"
+      :style="{ '--dwui-order-window': order }"
+    >
+      <div
+        class="dwui-overlay-box-backdrop"
+        @click="onClickBackdrop"
+      />
+      <MovableWindow
+        ref="refWindow"
+        class="dwui-overlay-box-container"
+        name="dwui-overlay-box"
+        tabindex="-1"
+        :drag-mode="props.dragMode"
+        :loading="props.loading"
+        :close-label="props.closeLabel"
+        clamp-bottom
+        @keydown="onKeydownWindow"
+        @emit:close="onCloseWindow"
+      >
+        <template #title>
+          <slot name="title">
+            {{ props.title }}
+          </slot>
+        </template>
+        <slot />
+      </MovableWindow>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import MovableWindow from '@/internal/movable-window.vue';
+import { openedOverlayBoxes } from '@/internal/opened-overlay-boxes';
+import { nextWindowOrder } from '@/internal/window-order';
+import type { MovableWindowDragMode } from '@/types/movable-window';
+
+export interface Props {
+  /** 見出し。title スロットで差し替えられる */
+  title?: string;
+  /** ドラッグで移動するときに掴む範囲。body はウィンドウ全体、header は見出しだけ。未指定なら移動できない */
+  dragMode?: MovableWindowDragMode;
+  /** 暗幕のクリックで閉じる */
+  closeOnBackdrop?: boolean;
+  /** ウィンドウに暗幕とスピナーを重ね、中身を操作できなくする */
+  loading?: boolean;
+  /** 閉じるボタンの読み上げ名 */
+  closeLabel?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  title: undefined,
+  dragMode: undefined,
+  closeOnBackdrop: false,
+  loading: false,
+  closeLabel: 'Close'
+});
+
+export interface Emits {
+  /** 閉じるアニメーションが終わり、ボックスが取り除かれた */
+  (e: 'emit:close'): void;
+}
+const emit = defineEmits<Emits>();
+
+export interface Slots {
+  /** 見出し */
+  title?(): unknown;
+  /** ウィンドウに表示する中身 */
+  default?(): unknown;
+}
+defineSlots<Slots>();
+
+/** 表示するか。閉じる操作で false になる */
+const open = defineModel<boolean>('open', { default: false });
+
+const refWindow = ref<InstanceType<typeof MovableWindow>>();
+const order = ref(0);
+
+const boxKey = Symbol('dwui-overlay-box');
+let previousFocus: HTMLElement | null = null;
+
+const onClickBackdrop = (): void => {
+  if (props.closeOnBackdrop) {
+    open.value = false;
+  }
+};
+
+const onCloseWindow = (): void => {
+  open.value = false;
+};
+
+/**
+ * ウィンドウにフォーカスがある間、Esc で閉じる。
+ * 中に置いた要素が dispatchEvent で発行した Escape、IME の変換を取り消す Esc、
+ * 中に置いた <dialog> に向けた Esc では閉じない
+ */
+const onKeydownWindow = (event: KeyboardEvent): void => {
+  if (event.key !== 'Escape' || !event.isTrusted || event.isComposing) {
+    return;
+  }
+  if (event.target instanceof Element && event.target.closest('dialog')) {
+    return;
+  }
+  // テンプレートで box の中に置いた box の Esc は外側にもバブルするため、最後に開いた box だけが閉じる
+  if (openedOverlayBoxes.at(-1) === boxKey) {
+    open.value = false;
+  }
+};
+
+const onAfterLeaveOverlayBox = (): void => {
+  emit('emit:close');
+};
+
+const removeFromOpenedBoxes = (): void => {
+  const index = openedOverlayBoxes.indexOf(boxKey);
+  if (0 <= index) {
+    openedOverlayBoxes.splice(index, 1);
+  }
+};
+
+const activate = (): void => {
+  order.value = nextWindowOrder();
+  const movable = refWindow.value;
+  const rect = movable?.element?.getBoundingClientRect();
+  if (movable) {
+    movable.position.x = (window.innerWidth - (rect?.width || 0)) / 2;
+    // 画面より高いときに見出しが上に隠れて掴めなくならないよう、上端は画面内に収める
+    movable.position.y = Math.max(0, (window.innerHeight - (rect?.height || 0)) / 2);
+  }
+  previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  movable?.element?.focus();
+  openedOverlayBoxes.push(boxKey);
+};
+
+const deactivate = (): void => {
+  refWindow.value?.teardown();
+  removeFromOpenedBoxes();
+  if (previousFocus?.isConnected) {
+    previousFocus.focus();
+  }
+  previousFocus = null;
+};
+
+onMounted(() => {
+  if (open.value) {
+    activate();
+  }
+});
+
+onBeforeUnmount(() => {
+  removeFromOpenedBoxes();
+});
+
+watch(open, (newValue) => {
+  if (newValue) {
+    activate();
+  } else {
+    deactivate();
+  }
+}, { flush: 'post' });
+</script>
+
+<style>
+:where(html:has(.dwui-overlay-box), html:has(.dwui-overlay-box) > body) {
+  overflow: hidden;
+}
+
+:where(.dwui-overlay-box) {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--dwui-z-index-overlay-box, 5000) + var(--dwui-order-window, 0));
+}
+
+:where(.dwui-overlay-box-backdrop) {
+  position: absolute;
+  inset: 0;
+  background: var(--dwui-background-overlay-box-backdrop, light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)));
+}
+
+:where(.dwui-overlay-box-container) {
+  --dwui-border-color-movable-window: var(--dwui-border-color-overlay-box, light-dark(#8f8f8f, #6b6f76));
+  --dwui-radius-movable-window: var(--dwui-radius-overlay-box, 4px);
+  --dwui-background-movable-window: var(--dwui-background-overlay-box, Canvas);
+  --dwui-color-text-movable-window: var(--dwui-color-text-overlay-box, CanvasText);
+  --dwui-box-shadow-movable-window: var(--dwui-box-shadow-overlay-box, 0 2px 8px rgba(0, 0, 0, 0.33));
+  --dwui-padding-movable-window-header: var(--dwui-padding-overlay-box-header, 0.17em 0.33em);
+  --dwui-background-movable-window-header: var(--dwui-background-overlay-box-header, transparent);
+  --dwui-color-text-movable-window-header: var(--dwui-color-text-overlay-box-header, inherit);
+  --dwui-background-movable-window-close-button-hover: var(--dwui-background-overlay-box-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-overlay-box-body, 0.4em);
+  --dwui-color-text-movable-window-resizer: var(--dwui-color-text-overlay-box-resizer, GrayText);
+  --dwui-background-movable-window-loading: var(--dwui-background-overlay-box-loading, light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4)));
+  --dwui-size-movable-window-spinner: var(--dwui-size-overlay-box-spinner, 48px);
+  --dwui-border-color-movable-window-spinner: var(--dwui-border-color-overlay-box-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-overlay-box-spinner-accent, light-dark(rgba(47, 90, 74, 0.8), rgba(140, 200, 170, 0.8)));
+}
+
+:where(.dwui-overlay-box-fade-enter-active, .dwui-overlay-box-fade-leave-active) {
+  transition: opacity 0.25s ease;
+}
+
+:where(.dwui-overlay-box-fade-enter-from, .dwui-overlay-box-fade-leave-to) {
+  opacity: 0;
+}
+</style>

package/src/page-section.vue

@@ -36,7 +36,7 @@ import LabelIcon from '@/label-icon.vue';
 /** 見出しのアイコンとして選べるもの */
 type PageSectionIcon = 'diamond' | 'circle' | 'square' | 'pushpin' | 'round-pushpin';
 
-interface Props {
+export interface Props {
   /** 見出しの文字。未指定なら見出しを表示しない */
   title?: string;
   /** 見出しのアイコン。これ以外のアイコンは#iconスロットで渡す デフォルト 'diamond' */
@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
   icon: 'diamond'
 });
 
-interface Slots {
+export interface Slots {
   /** 見出しの文字の前に表示するアイコン。iconより優先する */
   icon?(): unknown;
   default?(): unknown;
@@ -85,19 +85,19 @@ const presetIcon = computed((): { component: Component; props: Record<string, un
 <style>
 :where(.dwui-page-section) {
   display: block;
-  margin: 4px 0 8px;
-  padding-top: 2px;
-  font-size: var(--dwui-font-size-page-section, 12px);
+  margin: 0.33em 0 0.67em;
+  padding-top: 0.17em;
+  font-size: var(--dwui-font-size-page-section, inherit);
   font-weight: 500;
 }
 
 :where(.dwui-page-section-title) {
   display: flex;
   align-items: center;
-  font-size: var(--dwui-font-size-page-section-title, 14px);
+  font-size: var(--dwui-font-size-page-section-title, 1.17em);
 }
 
 :where(.dwui-page-section-content) {
-  margin: 8px 0 8px 16px;
+  margin: 0.67em 0 0.67em 1.33em;
 }
 </style>

package/src/page-title.vue

@@ -25,13 +25,13 @@
 <script setup lang="ts">
 import LabelIcon from '@/label-icon.vue';
 
-interface Props {
+export interface Props {
   /** タイトルの文字 */
   title: string;
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   /** タイトルの文字の前に表示するアイコン */
   icon?(): unknown;
   /** タイトルバーの右側に表示する内容 */
@@ -46,11 +46,11 @@ const slots = defineSlots<Slots>();
   align-items: center;
   justify-content: space-between;
   width: var(--dwui-width-page-title, auto);
-  padding: 4px;
+  padding: 0.33em;
   border-radius: 4px;
-  background: var(--dwui-background-page-title, linear-gradient(#323232 0%, rgb(32, 32, 31) 25%, rgb(32, 32, 31) 75%, #323232 100%));
+  background: var(--dwui-background-page-title, linear-gradient(light-dark(#323232, #3c3f45) 0%, light-dark(rgb(32, 32, 31), #2b2d31) 25%, light-dark(rgb(32, 32, 31), #2b2d31) 75%, light-dark(#323232, #3c3f45) 100%));
   color: var(--dwui-color-text-page-title, rgb(220, 220, 220));
-  font-size: var(--dwui-font-size-page-title, 14px);
+  font-size: var(--dwui-font-size-page-title, 1.17em);
   font-weight: var(--dwui-font-weight-page-title, normal);
 }
 </style>

package/src/screen-loading.vue

@@ -0,0 +1,90 @@
+<!--
+画面全体を覆うローディング。
+loading が true の間は <dialog> をモーダルで開き、暗幕とスピナーを表示して画面の操作を受け付けなくする。
+Esc キーでは閉じない。
+-->
+<template>
+  <dialog
+    ref="refDialog"
+    class="dwui-screen-loading"
+    closedby="none"
+    @cancel.prevent
+  >
+    <div class="dwui-screen-loading-spinner" />
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+export interface Props {
+  /** 読み込み中か */
+  loading: boolean;
+}
+const props = defineProps<Props>();
+
+const refDialog = ref<HTMLDialogElement | null>(null);
+
+const open = () => {
+  const dialog = refDialog.value;
+  if (dialog && !dialog.open) {
+    dialog.showModal();
+  }
+};
+
+const close = () => {
+  const dialog = refDialog.value;
+  if (dialog?.open) {
+    dialog.close();
+  }
+};
+
+onMounted(() => {
+  if (props.loading) {
+    open();
+  }
+});
+
+onBeforeUnmount(() => {
+  close();
+});
+
+watch(() => props.loading, (newValue) => {
+  if (newValue) {
+    open();
+  } else {
+    close();
+  }
+}, { flush: 'post' });
+</script>
+
+<style>
+:where(.dwui-screen-loading) {
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  background-image: none;
+  overflow: visible;
+}
+
+:where(.dwui-screen-loading::backdrop) {
+  background: var(--dwui-background-screen-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)));
+}
+
+:where(.dwui-screen-loading-spinner) {
+  box-sizing: border-box;
+  width: var(--dwui-size-screen-loading-spinner, 100px);
+  height: var(--dwui-size-screen-loading-spinner, 100px);
+  border: 8px solid var(--dwui-border-color-screen-loading-spinner, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2)));
+  border-left-color: var(--dwui-border-color-screen-loading-spinner-accent, light-dark(rgba(47, 90, 74, 0.8), rgba(140, 200, 170, 0.8)));
+  border-radius: 50%;
+  animation: dwui-screen-loading-spin 1.1s linear infinite;
+}
+
+@keyframes dwui-screen-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/tab-content.vue

@@ -4,12 +4,13 @@ TabGroupの中に置くタブ1つ分の中身
 <template>
   <div
     v-if="!props.disabled"
+    :id="context ? `${context.groupName}-${props.tabId}-panel` : undefined"
     class="dwui-tab-content"
-    :aria-label="props.labelId"
-    :aria-checked="selected ? 'true' : 'false'"
-    :aria-description="props.description"
+    role="tabpanel"
+    :aria-labelledby="context ? `${context.groupName}-${props.tabId}` : undefined"
     :aria-busy="loading ? 'true' : undefined"
-    :data-test-tab-content="props.labelId"
+    :hidden="!selected"
+    :data-test-tab-content="props.tabId"
   >
     <slot
       :activated="activated"
@@ -38,12 +39,12 @@ import type { ClassValue, Slot, StyleValue } from 'vue';
 import { tabGroupContextKey } from '@/internal/tab-group-context';
 import type { TabContentStatus } from '@/internal/tab-group-context';
 
-// labelId・description・header*・status・#iconは、TabGroupが見出しを描画するために読む
-interface Props {
-  /** タブを識別するID。TabGroupのselectedTabLabelIdに渡す値 */
-  labelId: string;
+// tabId・label・header*・status・#iconは、TabGroupが見出しを描画するために読む
+export interface Props {
+  /** タブを識別するID。TabGroupのselectedTabIdに渡す値 */
+  tabId: string;
   /** タブの見出しの文字 */
-  description: string;
+  label: string;
   /** trueの場合、タブを選べなくし、中身も描画しない */
   disabled?: boolean;
   /** タブの見出しの状態。見出しの色が変わる */
@@ -55,7 +56,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-interface Slots {
+export interface Slots {
   /** タブの見出しの文字の前に表示するアイコン */
   icon?(): unknown;
   /**
@@ -80,7 +81,7 @@ const loading = ref(false);
 const loadingSlot = (): Slot | undefined => context?.loadingSlot();
 
 // 表示の切り替えは初期描画から効かせるため、マウントを待たない
-const selected = computed((): boolean => context?.activeLabelId.value === props.labelId);
+const selected = computed((): boolean => context?.activeTabId.value === props.tabId);
 
 const activated = computed((): boolean => !!context?.mounted.value && selected.value);
 
@@ -95,7 +96,7 @@ const setLoading = (value: boolean) => {
 </script>
 
 <style>
-:where(.dwui-tab-content[aria-checked='false']) {
+:where(.dwui-tab-content[hidden]) {
   display: none;
 }
 
@@ -103,7 +104,7 @@ const setLoading = (value: boolean) => {
   display: block;
   /* 読み込み中の覆いを中身の範囲に重ねる基準にする */
   position: relative;
-  padding: 4px 8px;
+  padding: 0.33em 0.67em;
   overflow: hidden;
   /* 全幅を横断すると速度が出てカクつくため、既定は固定の移動量とease-outとフェードでスライドインする */
   animation: dwui-tab-slide-in var(--dwui-duration-tab-slide, 0.35s) var(--dwui-easing-tab-slide, cubic-bezier(0.22, 1, 0.36, 1));
@@ -116,14 +117,14 @@ const setLoading = (value: boolean) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--dwui-overlay-color-loading, rgba(0, 0, 0, 0.25));
+  background: var(--dwui-overlay-color-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)));
 }
 
 :where(.dwui-tab-loading-spinner) {
   width: var(--dwui-size-loading-spinner, 40px);
   height: var(--dwui-size-loading-spinner, 40px);
-  border: 4px solid var(--dwui-border-color-loading-spinner-track, rgba(255, 255, 255, 0.4));
-  border-top-color: var(--dwui-border-color-loading-spinner, #ffffff);
+  border: 4px solid var(--dwui-border-color-loading-spinner, rgba(255, 255, 255, 0.4));
+  border-top-color: var(--dwui-border-color-loading-spinner-accent, #ffffff);
   border-radius: 50%;
   animation: dwui-tab-loading-spin 0.8s linear infinite;
 }