Page MenuHomeWickedGov Phorge
Files F4111850

BlockDetailsOptions.vue
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

BlockDetailsOptions.vue
View Options

<template>
<cdx-field :is-fieldset="true">
<cdx-checkbox
v-for="checkbox in checkboxes"
:key="'checkbox-' + checkbox.value"
v-model="wrappedModel"
:input-value="checkbox.value"
:disabled="disabledState( checkbox )"
:class="checkbox.class"
>
{{ checkbox.label }}
</cdx-checkbox>
<template #label>
{{ label }}
<span class="cdx-label__label__optional-flag">
{{ $i18n( 'htmlform-optional-flag' ).text() }}
</span>
</template>
<template #description>
{{ description }}
</template>
</cdx-field>
</template>
<script>
const { defineComponent, toRef } = require( 'vue' );
const { storeToRefs } = require( 'pinia' );
const { CdxCheckbox, CdxField, useModelWrapper } = require( '@wikimedia/codex' );
const useBlockStore = require( '../stores/block.js' );
// @vue/component
module.exports = exports = defineComponent( {
name: 'BlockDetailsField',
components: { CdxCheckbox, CdxField },
props: {
/**
* The label displaying for the list of checkboxes
*/
label: {
type: String,
required: true
},
/**
* The description displaying for list of checkboxes
*/
description: {
type: String,
required: true
},
/**
* The list of checkboxes to display
*/
checkboxes: {
type: Array,
required: true
},
/**
* The current checkboxes selected
*/
// eslint-disable-next-line vue/no-unused-properties
modelValue: {
type: Array,
required: true
}
},
emits: [
'update:modelValue'
],
setup( props, { emit } ) {
const wrappedModel = useModelWrapper(
toRef( props, 'modelValue' ),
emit
);
const { hideNameDisabled } = storeToRefs( useBlockStore() );
/**
* We want the disabled state of the 'Hide username' option to be reactive,
* as it should be disabled when the block type is not 'sitewide'.
*
* @param {Object} checkbox
* @return {boolean}
*/
function disabledState( checkbox ) {
return checkbox.value === 'wpHideName' ? hideNameDisabled.value : checkbox.disabled;
}
return {
wrappedModel,
disabledState
};
}
} );
</script>

File Metadata

Mime Type
text/html
Expires
Tue, Aug 18, 22:34 (20 h, 55 m ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
50/7f/849d715636106c948c05e673ad49
Default Alt Text
BlockDetailsOptions.vue (2 KB)

Event Timeline