resources/src/mediawiki.special.block/components/ConfirmationDialog.vue

   1 <template>
   2         <cdx-dialog
   3                 v-model:open="wrappedOpen"
   4                 class="mw-block-confirm"
   5                 :use-close-button="true"
   6                 :primary-action="primaryAction"
   7                 :default-action="defaultAction"
   8                 :title="title"
   9                 @primary="onConfirm"
  10                 @default="wrappedOpen = false"
  11         >
  12                 <slot></slot>
  13         </cdx-dialog>
  14 </template>
  15
  16 <script>
  17 const { defineComponent, toRef } = require( 'vue' );
  18 const { CdxDialog, DialogAction, PrimaryDialogAction, useModelWrapper } = require( '@wikimedia/codex' );
  19
  20 /**
  21  * Confirmation dialog component for use by Special:Block.
  22  *
  23  * @todo Abstract for general use in MediaWiki (T375220)
  24  */
  25 module.exports = exports = defineComponent( {
  26         name: 'ConfirmationDialog',
  27         components: {
  28                 CdxDialog
  29         },
  30         props: {
  31                 // eslint-disable-next-line vue/no-unused-properties
  32                 open: {
  33                         type: Boolean,
  34                         default: false
  35                 },
  36                 title: {
  37                         type: String,
  38                         required: true
  39                 }
  40         },
  41         emits: [ 'update:open', 'confirm' ],
  42         setup( props, { emit } ) {
  43                 const wrappedOpen = useModelWrapper( toRef( props, 'open' ), emit, 'update:open' );
  44
  45                 /** @type {PrimaryDialogAction} */
  46                 const primaryAction = {
  47                         label: mw.msg( 'block-confirm-yes' ),
  48                         actionType: 'destructive'
  49                 };
  50
  51                 /** @type {DialogAction} */
  52                 const defaultAction = {
  53                         label: mw.msg( 'block-confirm-no' ),
  54                         actionType: 'default'
  55                 };
  56
  57                 function onConfirm() {
  58                         wrappedOpen.value = false;
  59                         emit( 'confirm' );
  60                 }
  61
  62                 return {
  63                         wrappedOpen,
  64                         primaryAction,
  65                         defaultAction,
  66                         onConfirm
  67                 };
  68         }
  69 } );
  70 </script>