Merge pull request #7070 from kaorun343/vue

update vue.js
This commit is contained in:
Masahiro Wakame
2015-12-16 00:10:24 +09:00
2 changed files with 488 additions and 181 deletions

View File

@@ -1,33 +1,241 @@
/// <reference path="vue.d.ts" />
module myapp {
namespace TestConfig {
"use strict";
Vue.config.debug = true;
Vue.config.delimiters = ["${", "}"];
Vue.config.unsafeDelimiters = ['{!!', '!!}'];
Vue.config.silent = true;
Vue.config.async = false;
Vue.config.convertAllProperties = true;
}
namespace TestGlobalAPI {
"use strict";
var AppConstructor = Vue.extend({});
var extendedApp = new AppConstructor();
Vue.nextTick(() => {});
Vue.set({}, "key", "value");
Vue.delete({}, "key");
Vue.directive("directive", {
bind: function() {},
update: function(val: any, oldVal: any) {},
unbind: function() {},
params: ['a'],
paramWatchers: {
a: function(val: any, oldVal: any) {}
},
twoWay: true,
acceptStatement: true,
priority: 1,
count: 30
});
Vue.directive("my-directive", () => {});
var myDirective = Vue.directive("my-directive");
var elementDirective = Vue.elementDirective("element-directive");
Vue.elementDirective("element-directive", elementDirective);
Vue.elementDirective("element-directive", {
bind: function() {},
unbind: function() {}
});
var filter = Vue.filter("filter");
Vue.filter("filter", filter);
Vue.filter("filter", function(val: any) {
return val;
});
Vue.filter("filter", {
read: function(val: any) {},
write: function(val: any, oldVal: any) {}
});
var Component = Vue.component("component");
Vue.component("component", Component);
Vue.component("component", {
data: function() {
return { d: 0 }
},
methods: {
action: function() {}
},
props: ["a", "b"],
computed: {
a: function() { return this.d; },
b: {
get: function() { return this.a; },
set: function(val: number) { this.d = val; }
}
}
});
var transition = Vue.transition("transition");
Vue.transition("transition", transition);
Vue.transition("transition", {
css: false,
stagger: function(index) {
return index;
},
beforeEnter: function(el) {
el.textContent = 'beforeEnter';
},
enter: function(el, done) {
el.textContent = 'enter';
setTimeout(function() {
done();
}, 1000);
},
afterEnter: function(el) {
el.textContent = 'afterEnter';
},
enterCancelled: function(el) {
el.textContent = 'enterCancelled';
},
beforeLeave: function (el) {
el.textContent = 'beforeLeave';
},
leave: function (el, done) {
el.textContent = 'leave';
done();
},
afterLeave: function (el) {
el.textContent = 'afterLeave';
},
leaveCancelled: function (el) {
el.textContent = 'leaveCancelled';
}
});
var myPartial: string = Vue.partial("my-partial", "<div>Hello</div>");
myPartial = Vue.partial("my-partial");
Vue.use(() => {}, {});
Vue.use({install: () => {}, option: () => {}});
Vue.mixin({ready() {}});
}
namespace TestInstanceProperty {
"use strict";
var vm = new Vue({el: '#app'});
var data: any = vm.$data;
var el: HTMLElement = vm.$el;
var options: any = vm.$options;
var parent: any = vm.$parent;
var root: any = vm.$root;
var children: any[] = vm.$children;
var refs: any = vm.$refs;
var els: any = vm.$els;
}
namespace TestInscanceMethods {
"use strict";
var vm = new Vue({el: '#app'});
vm.$watch('a.b.c', function(newVal: string, oldVal: number) {});
vm.$watch(function() {return this.a + this.b}, function(newVal: string, oldVal: string) {});
var unwatch = vm.$watch('a', (value: any) => {});
unwatch();
vm.$watch('someObject', (value: any) => {}, {deep: true});
vm.$watch('a', (value: any) => {}, {immidiate: true});
vm.$get('a.b');
vm.$set('a.b', 2);
vm.$delete('a');
var s: string = vm.$eval('msg | uppercase');
s = vm.$interpolate('{{msg}} world!');
vm.$log();
vm.$log('item');
vm
.$on('test', (msg: any) => {})
.$once('testOnce', (msg: any) => {})
.$off("event", () => {})
.$emit("event", 1, 2)
.$dispatch("event", 1, 2, 3)
.$broadcast("event", 1, 2, 3, 4)
.$appendTo(document.createElement("div"), () => {})
.$before('#app', () => {})
.$after(document.getElementById('app'))
.$remove(() => {})
.$nextTick(() => {});
vm
.$mount('#app')
.$destroy(false);
}
namespace TestVueUtil {
"use strict";
var _ = Vue.util;
var target = document.createElement('div');
var child = document.createElement('div');
var parent = document.createElement('div');
var a: any[];
var b: boolean;
var f: Function;
var n: number;
var s: string;
var o: any;
o = _.checkComponentAttr(target, {});
_.warn('oops', new Error());
b = _.inDoc(target);
s = _.getAttr(target, 'v-test');
_.before(target, child);
_.after(target, child);
_.remove(target);
_.prepend(target, parent);
_.replace(child, target);
_.on(target, 'click', () => {});
_.off(target, 'click', () => {});
_.removeClass(target, 'header');
_.addClass(target, 'header');
_.nextTick(() => {}, {});
b = _.isLiteral('123');
s = _._toString('hi');
var ns: number | string = _.toNumber('12');
s = _.stripQuotes('"123"');
s = _.camelize('abc');
s = _.hyphenate('whatsUp');
s = _.classify('abc');
f = _.bind(() => {}, {});
a = _.toAarray(document.getElementsByClassName('target'));
o = _.extend({}, {a: 1, b: 2});
b = _.isObject({});
b = _.isPlainObject({});
b = _.isArray([]);
_.def({}, 'test', 123);
_.def({}, 'test2', 123, true);
f = _.debounce(() => {}, 100);
b = _.looseEqual(1, '1');
}
namespace TestExplicitExtend {
"use strict";
export class Application extends Vue {
text: string;
constructor() {
super();
Vue.config.debug = true;
this._init({
// data is necessary to always write in init()
data: {
text: "hello world."
// },
// methods : {
// action : this.action
/* same as unser */
},
methods: {
action: this.action
}
});
this.methods = {
action: this.action
};
}
action(): void {
console.log("action");
this.$on("event", (value: any) => {}).anotherAction();
}
anotherAction(): void {
this.$emit("event");
}
$els: {
target: HTMLDivElement;
}
}
var app = new Application();
app.$mount("#main").$destroy();
}
var app = new myapp.Application();
app.$mount("#main");
var AppConstructor = Vue.extend({});
var extendedApp = new AppConstructor();
app.$mount("#main");

429
vue/vue.d.ts vendored
View File

@@ -1,171 +1,270 @@
// Type definitions for vuejs 0.11.0
// Project: https://github.com/yyx990803/vue
// Definitions by: odangosan <https://github.com/odangosan>
// Type definitions for vuejs 1.0.11
// Project: https://github.com/vuejs/vue
// Definitions by: odangosan <https://github.com/odangosan>, kaorun343 <https://github.com/kaorun343>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
declare module vuejs {
export class Vue {
/**
* The Vue Constructor
* http://vuejs.org/api/index.html
*/
constructor(options?: {});
/**
* Options
* http://vuejs.org/api/options.html
*/
/**
* Data
* http://vuejs.org/api/options.html#Data
*/
data: {};
methods: {};
computed: {};
paramAttributes:{}[];
/**
* DOM
* http://vuejs.org/api/options.html#DOM
*/
el: {};
template: string;
replace: boolean;
/**
* Lifecycle
* http://vuejs.org/api/options.html#Lifecycle
*/
created: VueCallback;
beforeCompile: VueCallback;
compiled: VueCallback;
ready: VueCallback;
attached: VueCallback;
detached: VueCallback;
beforeDestroy: VueCallback;
destroyed: VueCallback;
/**
* Assets
* http://vuejs.org/api/options.html#Assets
*/
directives: {};
filters: {};
components: {};
partials: {};
transitions: {};
/**
* Others
* http://vuejs.org/api/options.html#Others
*/
inherit: boolean;
events: {};
watch: {};
mixins:{}[];
name: string;
/**
* Instance Properties
* http://vuejs.org/api/instance-properties.html
*/
$el: HTMLElement;
$data: any;
$options: any;
$parent: Vue;
$root: Vue;
$: {};
$$: {};
/**
* Instance Methods
* http://vuejs.org/api/instance-methods.html
*/
/**
* Data
*/
$watch(expression: string, callback: ValueCallback, deep?: boolean, immediate?: boolean): void;
$get(expression: string): any;
$set(keypath: string, value: any): void;
$add(keypath: string, value: any): void;
$delete(keypath: string): void;
$eval(expression: string): any;
$interpolate(templateString: string): string;
$log(keypath?: string): void;
/**
* Events
*/
$dispatch(event: string, ...args: any[]): Vue;
$broadcast(event: string, ...args: any[]): Vue;
$emit(event: string, ...args: any[]): Vue;
$on(event: string, callback: Function): Vue;
$once(event: string, callback: Function): Vue;
$off(event?: string, callback?: Function): Vue;
/**
* DOM
*/
$appendTo(element: any, callback?: Function): Vue;// element or selector
$prependTo(element: any, callback?: Function): Vue;// element or selector
$before(element: any, callback?: Function): Vue;// element or selector
$after(element: any, callback?: Function): Vue;// element or selector
$remove(callback?: Function): Vue;
/**
* Lifecycle
*/
$mount(element?: any): Vue;// element or selector
$destroy(remove?: boolean): void;
$compile(element: HTMLElement): VueCallback;// returns a decompile function
$addChild(options?: {}, constructor?: Function): Vue;
/**
* Global Api
* http://vuejs.org/api/global-api.html
*/
static config: VueConfig;
static extend(options: {}): typeof Vue;
static directive(id: string, definition?: {}): void;
static directive(id: string, definition?: VueCallback): void;
static filter(id: string, definition?: FilterCallback): void;
static component(id: string, definition: Vue): void;
static component(id: string, definition?: {}): void;
static transition(id: string, definition?: {}): void;
static partial(id: string, definition?: string): void;
static partial(id: string, definition?: HTMLElement): void;
static nextTick(callback: VueCallback): void;
static require(module: string): void;
static use(plugin: {}, ...args: any[]): Vue;
static use(plugin: VueCallback, ...args: any[]): Vue;
/**
* exports members.
*/
_init(options: {}): void;
_cleanup(): void;
// static require(module:string) : void;
}
class VueConfig {
prefix: string;
debug: boolean;
silent: boolean;
proto: boolean;
interpolate: boolean;
async: boolean;
delimiters: string[];
}
interface ValueCallback {
(newValue: {}, oldValue: {}): void;
}
interface VueCallback {
(): void;
}
interface FilterCallback {
(value:{},begin?:{},end?:{}): {};
}
interface Array<T> {
$remove(item: T): Array<T>;
$set(index: number, val: T): T;
}
import Vue = vuejs.Vue;
declare namespace vuejs {
interface PropOption {
type?: any;
required?: boolean;
default?: boolean;
twoWay?: boolean;
validator?(value: any): boolean;
}
interface ComputedOption {
get(): any;
set(value: any): void;
}
interface WatchOption {
handler(val: any, oldVal: any): void;
deep?: boolean;
immidiate?: boolean;
}
interface DirectiveOption {
bind?(): any;
update?(newVal?: any, oldVal?: any): any;
unbind?(): any;
params?: string[];
deep?: boolean;
twoWay?: boolean;
acceptStatement?: boolean;
priority?: number;
[key: string]: any;
}
interface FilterOption {
read: Function;
write: Function;
}
interface TransitionOption {
css?: boolean;
beforeEnter?(el: HTMLElement): void;
enter?(el: HTMLElement, done?: () => void): void;
afterEnter?(el: HTMLElement): void;
enterCancelled?(el: HTMLElement): void;
beforeLeave?(el: HTMLElement): void;
leave?(el: HTMLElement, done?: () => void): void;
afterLeave?(el: HTMLElement): void;
leaveCancelled?(el: HTMLElement): void;
stagger?(index: number): number;
}
interface ComponentOption {
data?: {[key: string]: any } | Function;
props?: string[] | { [key: string]: PropOption };
computed?: { [key: string]: ( Function | ComputedOption ) };
methods?: { [key: string]: Function };
watch?: { [key: string]: ( (val: any, oldVal: any) => void | string | WatchOption )};
el?: string | HTMLElement | ( () => HTMLElement );
template?: string;
replace?: boolean;
created?(): void;
beforeCompile?(): void;
compiled?(): void;
ready?(): void;
attached?(): void;
detached?(): void;
beforeDestroy?(): void;
destroyed?(): void;
activate?(): void;
directives?: { [key: string]: ( DirectiveOption | Function ) };
elementDirectives?: { [key: string]: ( DirectiveOption | Function ) };
filters?: { [key: string]: ( Function | FilterOption ) };
components?: { [key: string]: ComponentOption };
transitions?: { [key: string]: TransitionOption };
partials?: { [key: string]: string };
parent?: Vue;
events?: { [key: string]: ( (...args: any[]) => ( boolean | void ) ) | string };
mixins?: ComponentOption[];
name?: string;
[key: string]: any;
}
// instance/api/data.js
interface $get { ( exp: string, asStatement?: boolean ): any; }
interface $set { <T>( key: string | number, value: T ): T; }
interface $delete { ( key: string) : void; }
interface $watch { ( expOrFn: string | Function, callback: ( (newVal: any, oldVal?: any) => any ) | string, options?: { deep?: boolean, immidiate?: boolean } ): Function; }
interface $eval { ( expression: string ): string; }
interface $interpolate { ( expression: string ): string; }
interface $log { ( keypath?: string ): void; }
// instance/api/dom.js
interface $nextTick { ( callback: Function ): void; }
interface $appendTo<V> { ( target: ( HTMLElement | string ), callback?: Function, withTransition?: boolean ): V; }
interface $prependTo<V> { ( target: ( HTMLElement | string ), callback?: Function, withTransition?: boolean ): V; }
interface $before<V> { ( target: ( HTMLElement | string ), callback?: Function, withTransition?: boolean ): V; }
interface $after<V> { ( target: ( HTMLElement | string ), callback?: Function, withTransition?: boolean ): V; }
interface $remove<V> { ( callback?: Function ): V; }
// instance/api/events.js
interface $on<V> { (event: string, callback: Function): V; }
interface $once<V> { (event: string, callback: Function): V; }
interface $off<V> { (event?: string, callback?: Function): V; }
interface $emit<V> { (event: string, ...args: any[]): V; }
interface $broadcast<V> { (event: string, ...args: any[]): V; }
interface $dispatch<V> { (event: string, ...args: any[]): V; }
// instance/api/lifecycle.js
interface $mount<V> { ( elementOrSelector?: ( HTMLElement | string ) ): V; }
interface $destroy { (remove?: boolean): void; }
interface $compile { (el: Element | DocumentFragment, host?: Vue): Function; }
interface Vue {
$data?: any;
$el?: HTMLElement;
$options?: Object;
$parent?: Vue;
$root?: Vue;
$children?: Vue[];
$refs?: Object;
$els?: Object;
$get?: $get;
$set?: $set;
$delete?: $delete;
$eval?: $eval;
$interpolate?: $interpolate;
$log?: $log;
$watch?: $watch;
$on?: $on<this>;
$once?: $once<this>;
$off?: $off<this>;
$emit?: $emit<this>;
$dispatch?: $dispatch<this>;
$broadcast?: $broadcast<this>;
$appendTo?: $appendTo<this>;
$before?: $before<this>;
$after?: $after<this>;
$remove?: $remove<this>;
$nextTick?: $nextTick;
$mount?: $mount<this>;
$destroy?: $destroy;
$compile?: $compile;
_init(options?: ComponentOption): void;
}
interface VueConfig {
debug: boolean;
delimiters: [string, string];
unsafeDelimiters: [string, string];
silent: boolean;
async: boolean;
convertAllProperties: boolean;
}
interface VueUtil {
// util/lang.js
set(obj: Object, key: string, value: any): void;
del(obj: Object, key: string): void;
hasOwn(obj: Object, key: string): boolean;
isLiteral(exp: string): boolean;
isReserved(str: string): boolean;
_toString(value: any): string;
toNumber<T>(value: T): T | number;
toBoolean<T>(value: T): T | boolean;
stripQuotes(str: string): string;
camelize(str: string): string;
hyphenate(str: string): string;
classify(str: string): string;
bind(fn: Function, ctx: Object): Function;
toAarray<T>(list: ArrayLike<T>, start?: number): Array<T>;
extend<T, F>(to: T, from: F): ( T & F );
isObject(obj: any): boolean;
isPlainObject(obj: any): boolean;
isArray: typeof Array.isArray;
def(obj: Object, key: string, value: any, enumerable?: boolean): void;
debounce(func: Function, wait: number): Function;
indexOf<T>(arr: Array<T>, obj: T): number;
cancellable(fn: Function): Function;
looseEqual(a: any, b: any): boolean;
// util/env.js
hasProto: boolean;
inBrowser: boolean;
isIE9: boolean;
isAndroid: boolean;
transitionProp: string;
transitionEndEvent: string;
animationProp: string;
animationEndEvent: string;
nextTick(cb: Function, ctx?: Object): void;
// util/dom.js
query(el: string | Element): Element;
inDoc(node: Node): boolean;
getAttr(node: Node, _attr: string): string;
getBindAttr(node: Node, name: string): string;
before(el: Element, target: Element): void;
after(el: Element, target: Element): void;
remove(el: Element): void;
prepend(el: Element, target: Element): void;
replace(target: Element, el: Element): void;
on(el: Element, event: string, cb: Function): void;
off(el: Element, event: string, cb: Function): void;
addClass(el: Element, cls: string): void;
removeClass(el: Element, cls: string): void;
extractContent(el: Element, asFragment: boolean): ( HTMLDivElement | DocumentFragment );
trimNode(node: Node): void;
isTemplate(el: Element): boolean;
createAnchor(content: string, persist: boolean): ( Comment | Text );
findRef(node: Element): string;
mapNodeRange(node: Node, end: Node, op: Function): void;
removeNodeRange(start: Node, end: Node, vm: any, frag: DocumentFragment, cb: Function): void;
// util/options.js
mergeOptions<P, C>(parent: P, child: C, vm?: any): ( P & C );
resolveAsset(options: Object, type: string, id: string): ( Object | Function );
assertAsset(val: any, type: string, id: string): void;
// util/component.js
commonTagRE: RegExp;
checkComponentAttr(el: Element, options?: Object): Object;
initProp(vm: Vue, prop: Object, value: any): void;
assertProp(prop: Object, value: any): boolean;
// util/debug.js
warn(msg: string, e?: Error): void;
// observer/index.js
defineReactive(obj: Object, key: string, val: any): void;
}
// instance/api/global.js
interface VueStatic {
new(options?: ComponentOption): Vue;
prototype: Vue;
util: VueUtil;
config: VueConfig;
set(object: Object, key: string, value: any): void;
delete(object: Object, key: string): void;
nextTick(callback: Function): any;
cid: number;
extend(options?: ComponentOption): VueStatic;
use(callback: Function | {install: Function, [key: string]: any}, option?: Object): VueStatic;
mixin(mixin: Object): void;
directive<T extends ( Function | DirectiveOption ) >(id: string, definition: T): T;
directive(id: string): any;
elementDirective<T extends ( Function | DirectiveOption ) >(id: string, definition: T): T;
elementDirective(id: string): any;
filter<T extends ( Function | FilterOption ) >(id: string, definition: T): T;
filter(id: string): any;
component(id: string, definition: ComponentOption): any;
component(id: string): any;
transition<T extends TransitionOption >(id: string, hooks: T): T;
transition(id: string): TransitionOption;
partial(id: string, partial: string): string;
partial(id: string): string;
}
}
declare var Vue: vuejs.VueStatic;
declare module "vue" {
import vue = vuejs.Vue;
export = vue;
export = Vue;
}