User:Roan Kattouw (WMF)/Codex example gadget/codextest-ChangeNameDialog.js

const { ref, computed, toRef } = require( 'vue' ); const { CdxDialog, CdxTextInput, useModelWrapper } = require( '@wikimedia/codex' );

module.exports = { template: ` 	       New name:   `,   components: { CdxDialog, CdxTextInput },   props: { open: { type: Boolean, required: true } },   emits: [ 'update:open', 'save-name' ],   setup( props, { emit } ) { const wrappedOpen = useModelWrapper( toRef( props, 'open' ), emit, 'update:open' ); const nameInput = ref( '' ); const saveAction = computed( => ( { label: 'Save', actionType: 'progressive', disabled: nameInput.value === '' } ) );

function saveName { emit( 'save-name', nameInput.value ); }

return { wrappedOpen, nameInput, saveAction, saveName };   } };