aegon-lv97 1.0.0

package/gen-ai/components/ReportSectionConfirmPopover.vue

@@ -0,0 +1,251 @@
+<template>
+  <el-popover
+    :visible="visible"
+    :virtual-ref="virtualRef"
+    placement="bottom-start"
+    :width="popoverWidth"
+    :popper-options="popperOptions"
+    :popper-style="popperStyle"
+    popper-class="report-config-popover"
+    :transition="instant ? 'report-config-popover-instant' : 'report-config-popover-fade'"
+    :gpu-acceleration="false"
+    :teleported="true"
+  >
+    <div class="report-section-confirm">
+      <h4 class="report-section-confirm__title">{{ title }}</h4>
+      <p class="report-section-confirm__message">{{ message }}</p>
+      <div class="report-section-confirm__actions">
+        <button type="button" class="report-section-confirm__btn" @click="emit('cancel')">
+          取消
+        </button>
+        <button
+          type="button"
+          class="report-section-confirm__btn report-section-confirm__btn--primary"
+          @click="emit('confirm')"
+        >
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ElPopover } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    virtualRef: HTMLElement | null
+    boundaryEl: HTMLElement | null
+    triggerBtn?: HTMLElement | null
+    title?: string
+    message: string
+    instant?: boolean
+  }>(),
+  {
+    title: '確認刪除',
+    triggerBtn: null,
+    instant: false,
+  }
+)
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const popoverWidthPx = ref(240)
+const arrowAlignKey = ref(0)
+const popoverWidth = computed(() => popoverWidthPx.value)
+
+function getSectionContentInsets() {
+  if (!props.boundaryEl) return { paddingLeft: 0, contentWidth: 240 }
+  const styles = getComputedStyle(props.boundaryEl)
+  const paddingLeft = parseFloat(styles.paddingLeft)
+  const paddingRight = parseFloat(styles.paddingRight)
+  return {
+    paddingLeft,
+    contentWidth: Math.round(props.boundaryEl.clientWidth - paddingLeft - paddingRight),
+  }
+}
+
+function getHorizontalSkid(): number {
+  if (!props.virtualRef || !props.boundaryEl) return 0
+  const { paddingLeft } = getSectionContentInsets()
+  const sectionRect = props.boundaryEl.getBoundingClientRect()
+  const anchorRect = props.virtualRef.getBoundingClientRect()
+  return Math.round(sectionRect.left + paddingLeft - anchorRect.left)
+}
+
+function syncLayout() {
+  if (!props.boundaryEl) return
+  const { contentWidth } = getSectionContentInsets()
+  popoverWidthPx.value = contentWidth
+  arrowAlignKey.value += 1
+}
+
+const popperStyle = computed(() => {
+  void arrowAlignKey.value
+  const sectionEl = props.boundaryEl
+  const triggerBtn = props.triggerBtn ?? props.virtualRef
+  if (!triggerBtn || !sectionEl) return {}
+  const sectionRect = sectionEl.getBoundingClientRect()
+  const { paddingLeft } = getSectionContentInsets()
+  const btnRect = triggerBtn.getBoundingClientRect()
+  const popperLeft = sectionRect.left + paddingLeft
+  const left = btnRect.left + btnRect.width / 2 - popperLeft - 8
+  return { '--report-config-arrow-left': `${left}px` }
+})
+
+const popperOptions = computed(() => {
+  void arrowAlignKey.value
+  return {
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: props.boundaryEl ?? 'viewport',
+          padding: 0,
+          altAxis: true,
+        },
+      },
+      {
+        name: 'flip',
+        enabled: false,
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [getHorizontalSkid(), 8],
+        },
+      },
+    ],
+  }
+})
+
+watch(
+  () => props.visible,
+  (open) => {
+    if (open) {
+      syncLayout()
+      void nextTick(() => {
+        arrowAlignKey.value += 1
+      })
+    }
+  }
+)
+
+watch(
+  () => props.boundaryEl,
+  () => syncLayout()
+)
+
+watch(
+  () => props.virtualRef,
+  () => syncLayout()
+)
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  syncLayout()
+  if (props.boundaryEl) {
+    resizeObserver = new ResizeObserver(() => syncLayout())
+    resizeObserver.observe(props.boundaryEl)
+  }
+  window.addEventListener('resize', syncLayout)
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', syncLayout)
+})
+</script>
+
+<style scoped>
+.report-section-confirm__title {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.report-section-confirm__message {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #606266;
+  word-break: break-word;
+}
+
+.report-section-confirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.report-section-confirm__btn {
+  min-width: 72px;
+  padding: 6px 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 12px;
+  color: #606266;
+  cursor: pointer;
+}
+
+.report-section-confirm__btn--primary {
+  border-color: #c53355;
+  background: #c53355;
+  color: #fff;
+}
+
+.report-section-confirm__btn--primary:hover {
+  background: #fff;
+  color: #c53355;
+}
+</style>
+
+<style>
+.report-config-popover.el-popover.el-popper {
+  max-width: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.report-config-popover.el-popper[data-popper-placement^='bottom'] .el-popper__arrow {
+  left: var(--report-config-arrow-left) !important;
+  right: auto !important;
+  top: -6px !important;
+  transform: translateX(-50%) !important;
+}
+
+.report-config-popover.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  bottom: -1px;
+}
+
+.report-config-popover-fade-enter-active,
+.report-config-popover-fade-leave-active {
+  transition: opacity 0.12s ease;
+}
+
+.report-config-popover-fade-enter-from,
+.report-config-popover-fade-leave-to {
+  opacity: 0;
+}
+
+.report-config-popover-instant-enter-active,
+.report-config-popover-instant-leave-active {
+  transition: none !important;
+}
+
+.report-config-popover-instant-enter-from,
+.report-config-popover-instant-leave-to {
+  opacity: 0;
+}
+</style>