diff --git a/vue/vue-tests.ts b/vue/vue-tests.ts index 297379bbb1..03c3e684f1 100644 --- a/vue/vue-tests.ts +++ b/vue/vue-tests.ts @@ -1,33 +1,241 @@ /// -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", "
Hello
"); + 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"); diff --git a/vue/vue.d.ts b/vue/vue.d.ts index cb707348a9..4af732579e 100644 --- a/vue/vue.d.ts +++ b/vue/vue.d.ts @@ -1,171 +1,269 @@ -// Type definitions for vuejs 0.11.0 -// Project: https://github.com/yyx990803/vue -// Definitions by: odangosan +// Type definitions for vuejs 1.0.10 +// Project: https://github.com/vuejs/vue +// Definitions by: odangosan , kaorun343 // Definitions: https://github.com/borisyankov/DefinitelyTyped -declare module vuejs { - export class Vue { - /** - * The Vue Constructor - * http://vuejs.org/api/index.html - */ - constructor(options?: {}); +interface Array { + $remove(item: T): Array; + $set(index: number, val: T): T; +} - /** - * 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; +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; + 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; } - class VueConfig { - prefix: string; + // instance/api/data.js + interface $get { ( exp: string, asStatement?: boolean ): any; } + interface $set { ( key: string | number, value: any ): void; } + 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 { ( target: ( HTMLElement | string ), callback?: Function, withTransition?: boolean ): V; } + interface $prependTo { ( target: ( HTMLElement | string ), callback?: Function, withTransition?: boolean ): V; } + interface $before { ( target: ( HTMLElement | string ), callback?: Function, withTransition?: boolean ): V; } + interface $after { ( target: ( HTMLElement | string ), callback?: Function, withTransition?: boolean ): V; } + interface $remove { ( callback?: Function ): V; } + // instance/api/events.js + interface $on { (event: string, callback: Function): V; } + interface $once { (event: string, callback: Function): V; } + interface $off { (event?: string, callback?: Function): V; } + interface $emit { (event: string, ...args: any[]): V; } + interface $broadcast { (event: string, ...args: any[]): V; } + interface $dispatch { (event: string, ...args: any[]): V; } + // instance/api/lifecycle.js + interface $mount { ( 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; + $once?: $once; + $off?: $off; + $emit?: $emit; + $dispatch?: $dispatch; + $broadcast?: $broadcast; + $appendTo?: $appendTo; + $before?: $before; + $after?: $after; + $remove?: $remove; + $nextTick?: $nextTick; + $mount?: $mount; + $destroy?: $destroy; + $compile?: $compile; + + _init?(options?: ComponentOption): void; + } + + interface VueConfig { debug: boolean; + delimiters: [string, string]; + unsafeDelimiters: [string, string]; silent: boolean; - proto: boolean; - interpolate: boolean; async: boolean; - delimiters: string[]; + convertAllProperties: boolean; } - interface ValueCallback { - (newValue: {}, oldValue: {}): void; + 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(value: T): T | number; + toBoolean(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(list: ArrayLike, start?: number): Array; + extend(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(arr: Array, 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(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; } - interface VueCallback { - (): void; - } - interface FilterCallback { - (value:{},begin?:{},end?:{}): {}; + // instance/api/global.js + interface VueStatic { + new(options?: any): 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(id: string, definition: T): T; + directive(id: string): any; + elementDirective(id: string, definition: T): T; + elementDirective(id: string): any; + filter(id: string, definition: T): T; + filter(id: string): any; + component(id: string, definition: ComponentOption): any; + component(id: string): any; + transition(id: string, hooks: T): T; + transition(id: string): TransitionOption; + partial(id: string, partial: string): string; + partial(id: string): string; } } -import Vue = vuejs.Vue; + +declare var Vue: vuejs.VueStatic; declare module "vue" { - import vue = vuejs.Vue; - export = vue; + export default Vue; }