MediaWiki:Gadget-codextest-ChangeNameDialog.vue

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

<template>
    <cdx-dialog
        v-model:open="wrappedOpen"
        title="Change name"
        close-button-label="Close"
        :primary-action="saveAction"
        @primary="saveName" 
    >
        <p>New name:</p>
        <cdx-text-input v-model="nameInput" placeholder="Choose a new name"></cdx-text-input>
    </cdx-dialog>
</template>

<script>
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
        };
    }
};
</script>