jws-frontend/src/components/GlobalDialog.vue

<script setup lang="ts">
defineProps<{
  title: string;
  message: string;
  color?: string;
  icon?: string;
  actionText?: string;
  cancelText?: string;
  persistent?: boolean;
  enablei18n?: boolean;
  action?: (...args: unknown[]) => void;
  cancel?: (...args: unknown[]) => void;
}>();
</script>
<template>
  <q-dialog ref="dialogRef" :persistent="persistent || false">
    <q-card
      class="q-pt-sm"
      style="overflow: visible; min-width: 300px; max-width: 90%"
    >
      <div
        class="box-icon q-pa-sm"
        v-if="icon"
        style="display: flex; align-items: center"
      >
        <q-avatar
          size="60px"
          font-size="25px"
          style="background-color: var(--surface-1)"
          :text-color="color || 'primary'"
        >
          <q-icon
            style="padding: 12px; border: 2px solid; border-radius: 50%"
            :name="icon"
          />
        </q-avatar>
      </div>

      <div class="text-right q-px-sm">
        <q-btn
          id="`btn-close-dialog`"
          class="btn-close-dialog"
          flat
          size="sm"
          padding="none"
          color="grey"
          icon="mdi-close"
          v-close-popup
        />
      </div>

      <q-card-section class="column items-center q-pa-sm">
        <div class="column q-mt-md items-center">
          <span class="text-bold block">
            {{ enablei18n ? $t(title) : title }}
          </span>
          <span class="block q-px-sm" style="max-width: 400px">
            {{ enablei18n ? $t(message) : message }}
          </span>
        </div>
      </q-card-section>

      <q-card-actions class="justify-center" v-if="action || cancel">
        <q-btn
          id="btn-cancel-dialog"
          v-if="cancel"
          unelevated
          class="col btn-cancel-dialog"
          color="grey-4"
          text-color="grey-10"
          :class="{ 'full-width': !action }"
          @click="cancel"
          :label="cancelText || $t('cancel')"
          v-close-popup
        />

        <q-btn
          id="btn-ok-dialog"
          unelevated
          class="col btn-ok-dialog"
          :class="{ 'full-width': !cancel }"
          v-if="action"
          @click="action"
          :label="actionText || $t('defaultDialog')"
          :color="color || 'primary'"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style lang="scss">
.box-icon {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.full-width {
  width: 100%;
}
</style>