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 );
} );