/**
 * Button component. Accepts a user-provided function which is bound to the
 * click handler.
 */
export default function Button ( props ) {
	return {
		/**
		 * @type string
		 */
		action: props.action,

		/**
		 * @type string
		 */
		type: props.type,

		/**
		 * The original WVUI button emits an event to the parent Vue component, but
		 * it probably makes more sense to just pass down the function we want to use
		 * in this scenario
		 * @type Function
		 */
		onClick: props.onClick,

		/**
		 * Computed property example
		 * @return {Object.<string, boolean>}
		 */
		get rootClasses () {
			return {
				'wvui-button--action-default': this.action === 'default',
				'wvui-button--action-progressive': this.action === 'progressive',
				'wvui-button--action-destructive': this.action === 'destructive',
				'wvui-button--type-primary': this.type === 'primary',
				'wvui-button--type-normal': this.type === 'normal',
				'wvui-button--type-quiet': this.type === 'quiet',
				'wvui-button--framed': this.type !== 'quiet' 
			}
		}
	}
}

<div id="app" v-scope>
    <!-- v-effect will execute the inline statement whenever it changes -->
    <div v-effect="$el.textContent = count">Enable JS to see the count</div>

    <!--
        Button component uses the existing DOM element as its template.
        It's also possible to provide the template as a string or as
        an external <template> element. We could even setup a mustache
        partial that accepted parameters if we wanted to programmatically
        generate these buttons in PHP.
    -->
 
    <!-- props for the first button are set up in JS -->
    <button 
        v-scope="Button( incrementButton )" 
        class="wvui-button" 
        :class="rootClasses" 
        @click="onClick()"
    >
        Increase the count
    </button>

    <!-- props for the second button are provided inline in the template -->
    <button 
        v-scope="Button( { action: 'destructive', onClick: decrement } )" 
        class="wvui-button" 
        :class="rootClasses" 
        @click="onClick()"
    >
        Decrease the count
    </button>

import { createApp } from 'petite-vue';
import { Button } from './lib';

createApp( {
	// exposed to all expressions
	count: 0,

	increment () {
		this.count++;
	},

	decrement () {
		this.count--;
	},

	// Similar to component declaration; make the button "component"
	// available
	Button,

	// Props for individual component instances can be provided inline
	// inside a v-scope expression, or a property can be declared here:
	incrementButton: {
		action: 'progressive',
		onClick() {
			this.increment();
		}
	}
} ).mount();