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> <cdx-dialog v-model:open="dialogOpen" title="Change name" close-button-label="Close" :primary-action="saveAction" @primary="saveName" > <p>New name:</p> <cdx-text-input v-model="nameInput"></cdx-text-input> </cdx-dialog> </template> <script> const { ref, computed } = require( 'vue' ); const { CdxButton, CdxDialog, CdxTextInput } = require( '@wikimedia/codex' ); module.exports = { components: { CdxButton, CdxDialog, CdxTextInput }, setup() { const dialogOpen = ref( false ); const displayName = ref( '(name unknown)' ); const nameInput = ref( '' ); const saveAction = computed( () => ( { label: 'Save', actionType: 'progressive', disabled: nameInput.value === '' } ) ); function saveName() { displayName.value = nameInput.value; dialogOpen.value = false; } return { dialogOpen, displayName, nameInput, saveAction, saveName }; } }; </script> <style> .testgadget-name { font-style: italic; } </style>