koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Dialog.vue

   1 <template>
   2     <div class="dialog message" v-if="message">{{ message }}</div>
   3     <div class="dialog alert" v-if="error">{{ error }}</div>
   4     <div class="dialog alert modal" v-if="warning">
   5         {{ warning }}
   6         <a
   7             id="close_modal"
   8             class="btn btn-default btn-xs"
   9             role="button"
  10             @click="removeMessages"
  11             >{{ $__("Close") }}</a
  12         >
  13     </div>
  14     <!-- Must be styled differently -->
  15 </template>
  16
  17 <script>
  18 import { inject } from "vue"
  19 import { storeToRefs } from "pinia"
  20 export default {
  21     setup() {
  22         const mainStore = inject("mainStore")
  23         const { message, error, warning } = storeToRefs(mainStore)
  24         const { removeMessages } = mainStore
  25         return { message, error, warning, removeMessages }
  26     },
  27 }
  28 </script>
  29
  30 <style scoped>
  31 .modal {
  32     position: fixed;
  33     z-index: 9998;
  34     display: table;
  35     transition: opacity 0.3s ease;
  36     margin: auto;
  37     padding: 20px 30px;
  38     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  39     transition: all 0.3s ease;
  40 }
  41 #close_modal {
  42     float: right;
  43     cursor: pointer;
  44 }
  45 </style>