How to use vue-typed - 10 common examples

import * as Vue from 'vue'
import { Options, Watch } from 'vue-typed';
import { _ButtonBase, _ButtonEvents } from './_base';
import { IButton } from '../../../../lib/interface'

@Options({
	// template: '<button type="button" class="ui button"></button>'
})
export class Button extends _ButtonBase implements IButton {

	target(): JQuery {
		return $(this.$el)
	}

	loading(state: boolean): JQuery {
		let target = this.target()
		if (state)
			return target.addClass('loading')
		return target.removeClass('loading')
	}

import * as Vue from 'vue'
import { Options, Prop } from 'vue-typed'
import { _FormBase, _FormEvents } from './_base';
import { IForm } from '../../../../lib/interface';

@Options()
export class Form extends _FormBase implements IForm {

	target() : JQuery {
		return $(this.$el)
	}

	mounted() {

		var self = this
		var opt = {
			onSuccess: function () {
				self.$emit(_FormEvents.success)
			},
			onFailure: function (formErrors, fields) {
				self.$emit(_FormEvents.error, formErrors, fields)
			},

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Button extends Virtual() {

	status: string = 'Click some buttons test Aha'
	counter: number = 0;
	disabled: boolean = true

	setDisable() {
		alert('I disable my self')
		this.disabled = true
	}

	updateStatus(status) {
		this.counter++;
		this.status = status + ' ' + this.counter + ' times';
	}

	loading() {

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Alert extends Virtual() {

	sample1() {
		this.$ui.alert("Here's a message!")
	}

	sample2() {
		this.$ui.alert("Here's a message!", "It's pretty, isn't it?")
	}

	sample3() {
		this.$ui.alert("Good job!", "You clicked the button!", "success")
	}

	sample4() {
		this.$ui.alert({
			title: "Are you sure?",

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Checkbox extends Virtual()  {

	checked: boolean = true
	enabledToggle = false;
	checkedVal: string = "yes"
	checkedNames: Array = ['John']

	get checkedStatus() {
		return this.checked ? 'Uncheck me please!' : 'Check me please!'
	}

	get enabledToggleText() {
		return this.enabledToggle ? 'Disable me!' : 'Enable me!'
	} 

	get enabledToggleStatus() {
		return this.enabledToggle ? "I'm enable :)" : "I'm disable :("

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Modal extends Virtual()  {
	show() {
		this.$ui.modal('modal').show()
	}

	approved(e) {
		alert('Yes! Approved!');
	}

	denied(e) {
		alert('Oh no! Don\'t deny me please...');
		e.result= false;
		return false;
	}
}

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Loading extends Virtual()  {

	loading = undefined

	start() {
		this.loading = this.$ui.loading('#segment-1')
	}

	stop() {
		if (this.loading) this.loading.stop()
	}
}

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Button extends Virtual() {

	status: string = 'Click some buttons test Aha'
	counter: number = 0;
	disabled: boolean = true

	setDisable() {
		alert('I disable my self')
		this.disabled = true
	}

	updateStatus(status) {
		this.counter++;
		this.status = status + ' ' + this.counter + ' times';

import { Options, Virtual } from 'vue-typed';
import * as Vue from 'vue'

@Options({
	template: require('./view.pug')()
})
export class Alert extends Virtual() {

	sample1() {
		this.$ui.alert("Here's a message!")
	}

	sample2() {
		this.$ui.alert("Here's a message!", "It's pretty, isn't it?")
	}

	sample3() {
		this.$ui.alert("Good job!", "You clicked the button!", "success")
	}

import * as Vue from 'vue'
import { Options, Prop, Watch } from 'vue-typed';
import { _TabBase } from './_base';
import { ITab } from '../../../../lib/interface'

@Options({
	template: `<div>
		<div>
			
			<a class="item">
  			{{i.caption}}
			</a>
			
		</div>
		
	</div>`
})
export class Tab extends _TabBase implements ITab {
		
	changeTab(path: string) {
		return $(this.$el).find('.item').tab('change tab', path);
	}