vue-property-decorator
Advanced tools
vue-property-decorator - npm Package Compare versions
Comparing version 2.1.0 to 3.0.0
@@ -0,8 +1,4 @@ | ||
| import * as Vue from "vue"; | ||
| import { PropOptions, ComponentOptions } from "vue"; | ||
| /** | ||
| * decorator of an event | ||
| * @param {string} eventName the name of the event to listen | ||
| * @return {PropertyDecorator} PropertyDecorator | ||
| */ | ||
| export declare function event(eventName: string): PropertyDecorator; | ||
| /** | ||
| * decorator of a prop | ||
@@ -12,3 +8,3 @@ * @param {PropOption} options the option for the prop | ||
| */ | ||
| export declare function prop(options: (PropOption | { | ||
| export declare function prop(options: (PropOptions | { | ||
| new (...args: any[]): any; | ||
@@ -19,125 +15,5 @@ })): PropertyDecorator; | ||
| * @param {string} path the path or the expression to observe | ||
| * @return {PropertyDecorator} PropertyDecorator | ||
| * @return {MethodDecorator} MethodDecorator | ||
| */ | ||
| export declare function watch(path: string): PropertyDecorator; | ||
| export declare function Data<T>(data: () => T): (Class: { | ||
| prototype: T; | ||
| }) => void; | ||
| export interface PropOption { | ||
| type: { | ||
| new (...args: any[]): any; | ||
| }; | ||
| required?: boolean; | ||
| default?: any; | ||
| twoWay?: boolean; | ||
| validator?: (value: any) => boolean; | ||
| coerce?: (value: any) => any; | ||
| } | ||
| export 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; | ||
| } | ||
| export interface FilterOption { | ||
| read: Function; | ||
| write: Function; | ||
| } | ||
| export 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; | ||
| } | ||
| export interface PropOptions { | ||
| [key: string]: PropOption; | ||
| } | ||
| export interface DirectiveOptions { | ||
| [key: string]: DirectiveOption; | ||
| } | ||
| export interface FilterOptions { | ||
| [key: string]: FilterOption; | ||
| } | ||
| export interface TransitionOptions { | ||
| [key: string]: TransitionOption; | ||
| } | ||
| export interface $get { | ||
| (exp: string, asStatement?: boolean): any; | ||
| } | ||
| export interface $set { | ||
| <T>(key: string | number, value: T): T; | ||
| } | ||
| export interface $delete { | ||
| (key: string): void; | ||
| } | ||
| export interface $watch { | ||
| (expOrFn: string | Function, callback: ((newVal: any, oldVal?: any) => any) | string, options?: { | ||
| deep?: boolean; | ||
| immidiate?: boolean; | ||
| }): Function; | ||
| } | ||
| export interface $eval { | ||
| (expression: string): string; | ||
| } | ||
| export interface $interpolate { | ||
| (expression: string): string; | ||
| } | ||
| export interface $log { | ||
| (keypath?: string): void; | ||
| } | ||
| export interface $nextTick { | ||
| (callback: Function): void; | ||
| } | ||
| export interface $appendTo<V> { | ||
| (target: (HTMLElement | string), callback?: Function, withTransition?: boolean): V; | ||
| } | ||
| export interface $prependTo<V> { | ||
| (target: (HTMLElement | string), callback?: Function, withTransition?: boolean): V; | ||
| } | ||
| export interface $before<V> { | ||
| (target: (HTMLElement | string), callback?: Function, withTransition?: boolean): V; | ||
| } | ||
| export interface $after<V> { | ||
| (target: (HTMLElement | string), callback?: Function, withTransition?: boolean): V; | ||
| } | ||
| export interface $remove<V> { | ||
| (callback?: Function): V; | ||
| } | ||
| export interface $on<V> { | ||
| (event: string, callback: Function): V; | ||
| } | ||
| export interface $once<V> { | ||
| (event: string, callback: Function): V; | ||
| } | ||
| export interface $off<V> { | ||
| (event?: string, callback?: Function): V; | ||
| } | ||
| export interface $emit<V> { | ||
| (event: string, ...args: any[]): V; | ||
| } | ||
| export interface $broadcast<V> { | ||
| (event: string, ...args: any[]): V; | ||
| } | ||
| export interface $dispatch<V> { | ||
| (event: string, ...args: any[]): V; | ||
| } | ||
| export interface $mount<V> { | ||
| (elementOrSelector?: (HTMLElement | string)): V; | ||
| } | ||
| export interface $destroy { | ||
| (remove?: boolean): void; | ||
| } | ||
| export interface $compile { | ||
| (el: Element | DocumentFragment, host?: any): Function; | ||
| } | ||
| export declare function watch(path: string): MethodDecorator; | ||
| export declare function Component<V extends Vue>(options: ComponentOptions<V>): ClassDecorator; |
@@ -1,15 +0,5 @@ | ||
| /* vue-property-decorator verson 2.1.0 MIT LICENSE copyright 2016 kaorun343 */ | ||
| /* vue-property-decorator verson 3.0.0 MIT LICENSE copyright 2016 kaorun343 */ | ||
| "use strict"; | ||
| var vue_class_component_1 = require("vue-class-component"); | ||
| /** | ||
| * decorator of an event | ||
| * @param {string} eventName the name of the event to listen | ||
| * @return {PropertyDecorator} PropertyDecorator | ||
| */ | ||
| function event(eventName) { | ||
| return function (target, propertyKey) { | ||
| (target.constructor.events || (target.constructor.events = {}))[eventName] = propertyKey; | ||
| }; | ||
| } | ||
| exports.event = event; | ||
| /** | ||
| * decorator of a prop | ||
@@ -28,3 +18,3 @@ * @param {PropOption} options the option for the prop | ||
| * @param {string} path the path or the expression to observe | ||
| * @return {PropertyDecorator} PropertyDecorator | ||
| * @return {MethodDecorator} MethodDecorator | ||
| */ | ||
@@ -37,7 +27,8 @@ function watch(path) { | ||
| exports.watch = watch; | ||
| function Data(data) { | ||
| function Component(options) { | ||
| return function (Class) { | ||
| Class.prototype.data = data; | ||
| Object.assign(options, { props: Class.props, watch: Class.watch }); | ||
| return vue_class_component_1.default(options)(Class); | ||
| }; | ||
| } | ||
| exports.Data = Data; | ||
| exports.Component = Component; |
| { | ||
| "name": "vue-property-decorator", | ||
| "version": "2.1.0", | ||
| "version": "3.0.0", | ||
| "description": "property decorators for Vue Component", | ||
@@ -17,5 +17,4 @@ "main": "lib/vue-property-decorator.js", | ||
| "scripts": { | ||
| "build": "tsc -p src", | ||
| "test": "mocha --compilers js:espower-babel/guess test/decorator.spec.js", | ||
| "prepublish": "npm run build" | ||
| "build": "tsc -p src/tsconfig.json", | ||
| "test": "tsc -p test/tsconfig.json && mocha" | ||
| }, | ||
@@ -26,10 +25,14 @@ "files": [ | ||
| "devDependencies": { | ||
| "babel-cli": "^6.4.0", | ||
| "babel-preset-es2015": "^6.3.13", | ||
| "espower-babel": "^4.0.1", | ||
| "mocha": "^2.3.4", | ||
| "power-assert": "^1.2.0" | ||
| "@types/mocha": "^2.2.32", | ||
| "@types/power-assert": "^1.4.29", | ||
| "espower-typescript": "^5.0.1", | ||
| "mocha": "^3.1.0", | ||
| "power-assert": "^1.4.1", | ||
| "typescript": "^2.0.3", | ||
| "vue": "^2.0.0-rc.7" | ||
| }, | ||
| "typings": "./lib/vue-property-decorator.d.ts", | ||
| "dependencies": {}, | ||
| "dependencies": { | ||
| "vue-class-component": "^4.0.1" | ||
| }, | ||
| "repository": { | ||
@@ -36,0 +39,0 @@ "type": "git", |
| # Vue Property Decorator | ||
| This library is fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component). | ||
| ## License | ||
@@ -12,13 +14,8 @@ MIT License | ||
| ## Usage | ||
| ```ts | ||
| 'use strict' | ||
| import VueComponent = require('vue-class-component'); | ||
| import {event, prop, watch, Data, $emit} from 'vue-property-decorator'; | ||
| ```typescript | ||
| 'use strict'; | ||
| import { Component, prop, watch } from 'vue-property-decorator'; | ||
| @VueComponent | ||
| @Data(() => ({child: 'child'})) | ||
| @Component({}) | ||
| export class Component { | ||
| @event('some:event') | ||
| onEventReceived() {} | ||
| @prop(Number) | ||
@@ -29,7 +26,3 @@ propA: number; | ||
| type: String, | ||
| required: true, | ||
| default: '', | ||
| twoWay: true, | ||
| validator: (value: string) => value.length > 1, | ||
| coerce: (val: string) => val.toLowerCase() | ||
| default: 'default value' | ||
| }) | ||
@@ -40,8 +33,2 @@ propB: string; | ||
| onChildChanged(val: string, oldVal: string) {} | ||
| $emit: $emit; | ||
| send() { | ||
| this.$emit('some:event'); | ||
| } | ||
| } | ||
@@ -56,7 +43,2 @@ | ||
| export const Component = Vue.extend({ | ||
| data() { | ||
| return { | ||
| child: 'child' | ||
| } | ||
| }, | ||
| props: { | ||
@@ -67,17 +49,7 @@ propA: Number, | ||
| required: true, | ||
| default: '', | ||
| twoWay: true, | ||
| validator: (value) => value.length > 1, | ||
| coerce: (val) => val.toLowerCase() | ||
| default: '' | ||
| } | ||
| }, | ||
| methods: { | ||
| onEventReceived() {}, | ||
| onChildChanged() {}, | ||
| send() { | ||
| this.$emit('some:event') | ||
| } | ||
| } | ||
| events: { | ||
| 'some:event': 'onEventReceived' | ||
| onChildChanged(val, oldVal) {} | ||
| }, | ||
@@ -84,0 +56,0 @@ watch: { |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-45.65%
4805
- Dependency count
- increased byInfinity%
1
- Dev dependency count
- increased by40%
7
- Lines of code
- decreased by-73.08%
49
- Number of lines in readme file
- decreased by-33.33%
56
Dependency changes
+ Addedvue-class-component@^4.0.1
+ Addedvue-class-component@4.4.0(transitive)