User:Roan Kattouw (WMF)/Codex example gadget (assuming better Vue support in gadgets)/codextest-ChangeNameDialog.vue

       New name:  

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

module.exports = { 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 };   } };