MediaWiki:Gadget-codextest-main.vue: Difference between revisions

Revision as of 00:05, 13 April 2023

<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" @saveName="saveName"></change-name-dialog>
</template>

<script>
const { ref, computed } = 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>