MediaWiki:Gadget-codextest-main.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>
    <p class="testgadget-name">
        Hello {{ displayName }}!
    </p>
    <cdx-button
        action="progressive"
        weight="primary"
        @click="dialogOpen = true"
    >
        Change your name
    </cdx-button>
    <change-name-dialog v-model:open="dialogOpen" @save-name="saveName"></change-name-dialog>
</template>

<script>
const { ref } = require( 'vue' );
const { CdxButton } = require( '@wikimedia/codex' );
const ChangeNameDialog = require( './codextest-ChangeNameDialog.vue' );

module.exports = {
    components: {
        CdxButton,
        ChangeNameDialog
    },
    setup() {
        const dialogOpen = ref( false );
        const displayName = ref( '(name unknown)' );

        function saveName( newName ) {
            displayName.value = newName;
            dialogOpen.value = false;
        }

        return {
            dialogOpen,
            displayName,
            saveName
        };
    }
};
</script>

<style>
.testgadget-name {
    font-style: italic;
}
</style>