jiapuapp/components/AppDialog.vue

<template>
  <view
    v-if="visible"
    class="app-dialog-layer"
    @click="closeOnMask && cancel()"
  >
    <view
      ref="dialogRef"
      class="app-dialog"
      role="dialog"
      aria-modal="true"
      :aria-label="title"
      tabindex="-1"
      @click.stop
      @keydown.esc.stop.prevent="cancel"
      @keydown.tab="trapFocus"
    >
      <scroll-view class="app-dialog__content" scroll-y>
        <view class="app-dialog__copy">
          <text v-if="eyebrow" class="app-dialog__eyebrow">{{ eyebrow }}</text>
          <text class="app-dialog__title">{{ title }}</text>
          <text v-if="message" class="app-dialog__message">{{ message }}</text>
        </view>
        <slot />
        <view
          class="app-dialog__actions"
          :class="{ 'app-dialog__actions--single': !showCancel }"
        >
          <AppButton
            v-if="showCancel"
            type="secondary"
            :label="cancelText"
            :compact="compactActions && showCancel"
            @click="cancel"
          />
          <AppButton
            :label="confirmText"
            :compact="compactActions && showCancel"
            @click="$emit('confirm')"
          />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { nextTick, ref, watch } from "vue";
import AppButton from "@/components/AppButton.vue";

const props = defineProps({
  visible: { type: Boolean, default: false },
  eyebrow: { type: String, default: "" },
  title: { type: String, required: true },
  message: { type: String, default: "" },
  confirmText: { type: String, default: "我知道了" },
  cancelText: { type: String, default: "取消" },
  showCancel: { type: Boolean, default: false },
  compactActions: { type: Boolean, default: false },
  closeOnMask: { type: Boolean, default: true },
});
const emit = defineEmits(["confirm", "cancel", "close"]);
const dialogRef = ref(null);
let previousFocus = null;

const getDialogElement = () => {
  const target = dialogRef.value;
  if (target && typeof target.querySelectorAll === "function") return target;
  if (target?.$el && typeof target.$el.querySelectorAll === "function") return target.$el;
  return null;
};

const trapFocus = (event) => {
  if (typeof document === "undefined") return;
  const dialog = getDialogElement() || event.currentTarget;
  if (!dialog || typeof dialog.querySelectorAll !== "function") return;
  const focusable = Array.from(
    dialog.querySelectorAll(
      'button:not([disabled]), [href], input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])',
    ),
  ).filter((element) => element.offsetParent !== null);
  if (focusable.length === 0) {
    event.preventDefault();
    dialog.focus?.();
    return;
  }
  const first = focusable[0];
  const last = focusable[focusable.length - 1];
  if (event.shiftKey && (document.activeElement === first || document.activeElement === dialog)) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault();
    first.focus();
  }
};

watch(
  () => props.visible,
  async (visible) => {
    if (typeof document === "undefined") return;
    if (visible) {
      previousFocus = document.activeElement;
      await nextTick();
      getDialogElement()?.focus?.();
      return;
    }
    previousFocus?.focus?.();
    previousFocus = null;
  },
);
const cancel = () => {
  emit("cancel");
  emit("close");
};
</script>

<style scoped lang="scss">
@use "../styles/adaptive-frame-profiles.scss" as adaptive;

.app-dialog-layer {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(40rpx + env(safe-area-inset-top)) 40rpx calc(40rpx + env(safe-area-inset-bottom));
  background: rgba(35, 18, 10, 0.62);
}
.app-dialog {
  display: flex;
  width: 650rpx;
  max-width: 100%;
  max-height: calc(var(--app-viewport-height, 100vh) - 80rpx - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  flex-direction: column;
  overflow: hidden;
  @include adaptive.adaptive-auth-dialog;
}
.app-dialog__content {
  z-index: 1;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 16rpx 20rpx 12rpx;
  text-align: center;
  overflow-y: auto;
}
.app-dialog__copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.app-dialog__title,
.app-dialog__message {
  display: block;
  width: 100%;
}
.app-dialog__eyebrow {
  color: #9f170f;
  font-size: clamp(14px, 22rpx, 17px);
  font-weight: 700;
  letter-spacing: 4rpx;
}
.app-dialog__title {
  color: #8f160f;
  font-size: clamp(22px, 42rpx, 28px);
  font-weight: 700;
  letter-spacing: 4rpx;
}
.app-dialog__eyebrow + .app-dialog__title {
  margin-top: 10rpx;
}
.app-dialog__message {
  margin-top: 22rpx;
  color: #513a28;
  font-size: clamp(16px, 27rpx, 20px);
  line-height: 1.65;
}
.app-dialog__actions {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-top: 26rpx;
}
.app-dialog__actions :deep(.app-button__label) {
  padding-right: 18rpx;
  padding-left: 18rpx;
}
.app-dialog__actions--single {
  display: flex;
  justify-content: center;
}
.app-dialog__actions .app-button {
  width: 100%;
  min-height: 82rpx;
}
</style>