Utilizador:LBelo (WMB)/codex-hello-world.js
Nota: Depois de publicar, poderá ter de contornar a cache do seu navegador para ver as alterações.
- Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
- Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
- Internet Explorer / Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5
- Opera: Pressione Ctrl-F5.
// Add a "Codex Widgets" portlet to the main menu
mw.util.addPortlet( 'p-codex', 'Codex Widgets', '#p-interaction' );
const dialogTrigger = mw.util.addPortletLink( 'p-codex', '#', 'Example Dialog Widget', 'p-codex-dialog' );
mw.loader.using( '@wikimedia/codex' ).then( function( require ) {
const Vue = require( 'vue' );
const Codex = require( '@wikimedia/codex' );
const mountPoint = document.body.appendChild( document.createElement( 'div' ) );
Vue.createMwApp( {
data: function() {
return {
showDialog: false,
count: 0,
codexLink: 'https://doc.wikimedia.org/codex/latest/'
};
},
template: `
<cdx-dialog v-model:open="showDialog"
title="Hello from Codex"
close-button-label="Close"
:default-action="defaultAction"
@default="open = false"
>
<p>This Dialog component comes from Codex, the new design system for Wikimedia.</p>
<p>To learn more about Codex, check out the documentation <a :href="codexLink" target="_blank">here.</a></p>
<hr />
<p>Click these buttons to update the reactive count value:</p>
<p>Count: {{ count }}</p>
<p>
<cdx-button action="destructive" @click="decrement">Decrease</cdx-button>
<cdx-button action="progressive" @click="increment">Increase</cdx-button>
</p>
</cdx-dialog>
`,
methods: {
openDialog () {
this.showDialog = true;
},
increment() {
this.count++;
},
decrement() {
this.count--;
}
},
mounted() {
dialogTrigger.addEventListener( 'click', this.openDialog );
},
unMounted() {
dialogTrigger.removeEventListener( this.openDialog );
}
} )
.component( 'cdx-button', Codex.CdxButton )
.component( 'cdx-dialog', Codex.CdxDialog )
.mount( mountPoint );
} );