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

   1 <template>
   2         <cdx-field :is-fieldset="true">
   3                 <template #label>
   4                         {{ $i18n( 'block-actions' ).text() }}
   5                 </template>
   6                 <cdx-radio
   7                         v-for="radio in typeCheckboxes"
   8                         :key="'radio-' + radio.value"
   9                         v-model="type"
  10                         name="wpEditingRestriction"
  11                         :input-value="radio.value"
  12                 >
  13                         {{ radio.label }}
  14                         <template #description>
  15                                 <span v-i18n-html="radio.descriptionMsg"></span>
  16                         </template>
  17                 </cdx-radio>
  18                 <div
  19                         v-if="type === 'partial'"
  20                         class="mw-block-partial-options"
  21                 >
  22                         <pages-field></pages-field>
  23                         <namespaces-field></namespaces-field>
  24
  25                         <cdx-field :is-fieldset="true">
  26                                 <cdx-checkbox
  27                                         v-for="checkbox in partialBlockCheckboxes"
  28                                         :key="'checkbox-' + checkbox.value"
  29                                         v-model="partialOptions"
  30                                         :input-value="checkbox.value"
  31                                 >
  32                                         {{ checkbox.label }}
  33                                 </cdx-checkbox>
  34                         </cdx-field>
  35                 </div>
  36         </cdx-field>
  37 </template>
  38
  39 <script>
  40 const { defineComponent } = require( 'vue' );
  41 const { CdxCheckbox, CdxRadio, CdxField } = require( '@wikimedia/codex' );
  42 const { storeToRefs } = require( 'pinia' );
  43 const useBlockStore = require( '../stores/block.js' );
  44 const PagesField = require( './PagesField.vue' );
  45 const NamespacesField = require( './NamespacesField.vue' );
  46
  47 module.exports = exports = defineComponent( {
  48         name: 'BlockTypeField',
  49         components: {
  50                 CdxCheckbox,
  51                 CdxRadio,
  52                 CdxField,
  53                 NamespacesField,
  54                 PagesField
  55         },
  56         setup() {
  57                 const { type, partialOptions } = storeToRefs( useBlockStore() );
  58
  59                 const typeCheckboxes = [
  60                         {
  61                                 label: mw.message( 'blocklist-type-opt-sitewide' ),
  62                                 descriptionMsg: 'ipb-sitewide-help',
  63                                 value: 'sitewide'
  64                         },
  65                         {
  66                                 label: mw.message( 'blocklist-type-opt-partial' ),
  67                                 descriptionMsg: 'ipb-partial-help',
  68                                 value: 'partial'
  69                         }
  70                 ];
  71
  72                 const partialBlockCheckboxes = mw.config.get( 'partialBlockActionOptions' ) ?
  73                         Object.keys( mw.config.get( 'partialBlockActionOptions' ) ).map(
  74                                 // Messages that can be used here:
  75                                 // * ipb-action-upload
  76                                 // * ipb-action-move
  77                                 // * ipb-action-create
  78                                 ( key ) => Object( { label: mw.message( key ).text(), value: key } ) ) :
  79                         [];
  80
  81                 return {
  82                         type,
  83                         typeCheckboxes,
  84                         partialOptions,
  85                         partialBlockCheckboxes
  86                 };
  87         }
  88 } );
  89 </script>
  90
  91 <style lang="less">
  92 @import 'mediawiki.skin.variables.less';
  93
  94 .mw-block-form {
  95         margin-top: @spacing-100;
  96 }
  97
  98 .mw-block-partial-options {
  99         padding-left: calc( @size-125 + @spacing-50 );
 100
 101         .cdx-label__label__text {
 102                 font-weight: @font-weight-normal;
 103         }
 104 }
 105 </style>