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

   1 <template>
   2         <cdx-field :is-fieldset="true">
   3                 <template #label>
   4                         {{ $i18n( 'block-reason' ).text() }}
   5                 </template>
   6                 <template #help-text>
   7                         {{ $i18n( 'block-reason-help' ).text() }}
   8                         <div class="mw-block-reason-edit">
   9                                 <a :href="reasonEditUrl">
  10                                         {{ $i18n( 'ipb-edit-dropdown' ) }}
  11                                 </a>
  12                         </div>
  13                 </template>
  14
  15                 <cdx-select
  16                         v-model:selected="wrappedSelected"
  17                         :menu-items="reasonOptions"
  18                         name="wpReason"
  19                 ></cdx-select>
  20
  21                 <cdx-text-input
  22                         v-model="wrappedOther"
  23                         :placeholder="$i18n( 'block-reason-other' ).text()"
  24                         :maxlength="reasonMaxLength"
  25                         name="wpReason-other"
  26                 ></cdx-text-input>
  27         </cdx-field>
  28 </template>
  29
  30 <script>
  31 const { defineComponent, toRef } = require( 'vue' );
  32 const { CdxSelect, CdxField, CdxTextInput, useModelWrapper } = require( '@wikimedia/codex' );
  33
  34 module.exports = exports = defineComponent( {
  35         name: 'ReasonField',
  36         components: { CdxSelect, CdxField, CdxTextInput },
  37         props: {
  38                 // eslint-disable-next-line vue/no-unused-properties
  39                 selected: { type: [ String, Number, null ], default: 'other' },
  40                 // eslint-disable-next-line vue/no-unused-properties
  41                 other: { type: String, default: '' }
  42         },
  43         emits: [
  44                 'update:selected',
  45                 'update:other'
  46         ],
  47         setup( props, { emit } ) {
  48                 const reasonOptions = mw.config.get( 'blockReasonOptions' );
  49                 const wrappedSelected = useModelWrapper( toRef( props, 'selected' ), emit, 'update:selected' );
  50                 const wrappedOther = useModelWrapper( toRef( props, 'other' ), emit, 'update:other' );
  51                 const reasonPreset = mw.config.get( 'blockReasonPreset' );
  52                 const reasonEditUrl = mw.util.getUrl( 'MediaWiki:Ipbreason-dropdown', { action: 'edit' } );
  53
  54                 if ( reasonPreset !== 'other' && reasonOptions.some( ( option ) => option.value === reasonPreset ) ) {
  55                         emit( 'update:selected', reasonPreset );
  56                 }
  57
  58                 return {
  59                         reasonOptions,
  60                         reasonMaxLength: mw.config.get( 'blockReasonMaxLength' ),
  61                         wrappedSelected,
  62                         wrappedOther,
  63                         reasonEditUrl
  64                 };
  65         }
  66 } );
  67 </script>
  68
  69 <style lang="less">
  70 @import 'mediawiki.skin.variables.less';
  71
  72 .cdx-select-vue {
  73         margin-bottom: @spacing-50;
  74         width: 100%;
  75 }
  76
  77 .mw-block-reason-edit {
  78         a {
  79                 font-size: 90%;
  80         }
  81 }
  82 </style>