compdfkit_web_viewer/packages/webview/src/components/Dialogs/DeletePageDialog.vue

<template>
  <div class="delete-page-popup" v-if="show">
    <Dialog :show="show" :dialogName="dialogName" :close="false">
      <!-- content -->
      <Warning />
      <p>{{ $t('documentEditor.deleteConfirmText') }}{{ locale === 'en' ? ` ${pageStr}?` : '' }}</p>

      <!-- footer -->
      <template #footer>
        <div class="rect-button white" @click="closeDialog">{{ $t('cancel') }}</div>
        <div class="rect-button blue" @click="handleDelete">{{ $t('documentEditor.delete') }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

const props = defineProps(['selectedPageList'])
const emits = defineEmits(['deletePage'])

const useViewer = useViewerStore()

const dialogName = 'deletePageDialog'
const show = computed(() => useViewer.isElementOpen(dialogName))

const pageStr = computed(() => {
  return props.selectedPageList.sort((a, b) => a - b).map(item => item + 1).join(', ')
})

const closeDialog = () => {
  useViewer.closeElement(dialogName)
}

const handleDelete = async () => {
  emits('deletePage')
  closeDialog()
}
</script>

<style lang="scss">
.delete-page-popup {

  .dialog-container {
    width: 381px;

    main {
      margin-top: 0;
      margin-bottom: 20px;
      display: flex;
      align-items: center;

      svg {
        margin-right: 8px;
        min-width: 20px;
        width: 20px;
        height: 20px;
      }

      p {
        font-size: 16px;
        line-height: 24px;
      }
    }
  }
}
</style>