This commit is contained in:
2022-07-21 03:28:35 +00:00
parent d7c883d6df
commit 51b34b0e1d
30103 changed files with 4152204 additions and 23 deletions
+12
View File
@@ -0,0 +1,12 @@
Changelog
# v8.5.1
- Move `vue-class-component` to `dependencies`
# v8.5.0
- Revert #299
- Add CHANGELOG.md
- Fix README.md (#319)
- Move `vue-class-component` to `peerDependencies`
+21
View File
@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2018 kaorun343
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
+387
View File
@@ -0,0 +1,387 @@
# Vue Property Decorator
[![npm](https://img.shields.io/npm/v/vue-property-decorator.svg)](https://www.npmjs.com/package/vue-property-decorator)
[![Build Status](https://travis-ci.org/kaorun343/vue-property-decorator.svg?branch=master)](https://travis-ci.org/kaorun343/vue-property-decorator)
This library fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component), so please read its README before using this library.
## License
MIT License
## Install
```bash
npm i -S vue-property-decorator
```
## Usage
There are several decorators and 1 function (Mixin):
- [`@Prop`](#Prop)
- [`@PropSync`](#PropSync)
- [`@Model`](#Model)
- [`@Watch`](#Watch)
- [`@Provide`](#Provide)
- [`@Inject`](#Provide)
- [`@ProvideReactive`](#ProvideReactive)
- [`@InjectReactive`](#ProvideReactive)
- [`@Emit`](#Emit)
- [`@Ref`](#Ref)
- `@Component` (**provided by** [vue-class-component](https://github.com/vuejs/vue-class-component))
- `Mixins` (the helper function named `mixins` **provided by** [vue-class-component](https://github.com/vuejs/vue-class-component))
## See also
[vuex-class](https://github.com/ktsn/vuex-class/)
### <a id="Prop"></a> `@Prop(options: (PropOptions | Constructor[] | Constructor) = {})` decorator
```ts
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Prop(Number) readonly propA: number | undefined
@Prop({ default: 'default value' }) readonly propB!: string
@Prop([String, Boolean]) readonly propC: string | boolean | undefined
}
```
is equivalent to
```js
export default {
props: {
propA: {
type: Number,
},
propB: {
default: 'default value',
},
propC: {
type: [String, Boolean],
},
},
}
```
**Note that:**
## If you'd like to set `type` property of each prop value from its type definition, you can use [reflect-metadata](https://github.com/rbuckton/reflect-metadata).
1. Set `emitDecoratorMetadata` to `true`.
2. Import `reflect-metadata` **before** importing `vue-property-decorator` (importing `reflect-metadata` is needed just once.)
```ts
import 'reflect-metadata'
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
@Prop() age!: number
}
```
## Each prop's default value need to be defined as same as the example code shown in above.
It's **not** supported to define each `default` property like `@Prop() prop = 'default value'` .
### <a id="PropSync"></a> `@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})` decorator
```ts
import { Vue, Component, PropSync } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@PropSync('name', { type: String }) syncedName!: string
}
```
is equivalent to
```js
export default {
props: {
name: {
type: String,
},
},
computed: {
syncedName: {
get() {
return this.name
},
set(value) {
this.$emit('update:name', value)
},
},
},
}
```
Other than that it works just like [`@Prop`](#Prop) other than it takes the propName as an argument of the decorator, in addition to it creates a computed getter and setter behind the scenes. This way you can interface with the property as it was a regular data property whilst making it as easy as appending the `.sync` modifier in the parent component.
### <a id="Model"></a> `@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})` decorator
```ts
import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Model('change', { type: Boolean }) readonly checked!: boolean
}
```
is equivalent to
```js
export default {
model: {
prop: 'checked',
event: 'change',
},
props: {
checked: {
type: Boolean,
},
},
}
```
`@Model` property can also set `type` property from its type definition via `reflect-metadata` .
### <a id="Watch"></a> `@Watch(path: string, options: WatchOptions = {})` decorator
```ts
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {}
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) {}
@Watch('person')
onPersonChanged2(val: Person, oldVal: Person) {}
}
```
is equivalent to
```js
export default {
watch: {
child: [
{
handler: 'onChildChanged',
immediate: false,
deep: false,
},
],
person: [
{
handler: 'onPersonChanged1',
immediate: true,
deep: true,
},
{
handler: 'onPersonChanged2',
immediate: false,
deep: false,
},
],
},
methods: {
onChildChanged(val, oldVal) {},
onPersonChanged1(val, oldVal) {},
onPersonChanged2(val, oldVal) {},
},
}
```
### <a id="Provide"></a> `@Provide(key?: string | symbol)` / `@Inject(options?: { from?: InjectKey, default?: any } | InjectKey)` decorator
```ts
import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
const symbol = Symbol('baz')
@Component
export class MyComponent extends Vue {
@Inject() readonly foo!: string
@Inject('bar') readonly bar!: string
@Inject({ from: 'optional', default: 'default' }) readonly optional!: string
@Inject(symbol) readonly baz!: string
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
}
```
is equivalent to
```js
const symbol = Symbol('baz')
export const MyComponent = Vue.extend({
inject: {
foo: 'foo',
bar: 'bar',
optional: { from: 'optional', default: 'default' },
baz: symbol,
},
data() {
return {
foo: 'foo',
baz: 'bar',
}
},
provide() {
return {
foo: this.foo,
bar: this.baz,
}
},
})
```
### <a id="ProvideReactive"></a> `@ProvideReactive(key?: string | symbol)` / `@InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey)` decorator
These decorators are reactive version of `@Provide` and `@Inject`. If a provided value is modified by parent component, then the child component can catch this modification.
```ts
const key = Symbol()
@Component
class ParentComponent extends Vue {
@ProvideReactive() one = 'value'
@ProvideReactive(key) two = 'value'
}
@Component
class ChildComponent extends Vue {
@InjectReactive() one!: string
@InjectReactive(key) two!: string
}
```
### <a id="Emit"></a> `@Emit(event?: string)` decorator
The functions decorated by `@Emit` `$emit` their return value followed by their original arguments. If the return value is a promise, it is resolved before being emitted.
If the name of the event is not supplied via the `event` argument, the function name is used instead. In that case, the camelCase name will be converted to kebab-case.
```ts
import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
count = 0
@Emit()
addToCount(n: number) {
this.count += n
}
@Emit('reset')
resetCount() {
this.count = 0
}
@Emit()
returnValue() {
return 10
}
@Emit()
onInputChange(e) {
return e.target.value
}
@Emit()
promise() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(20)
}, 0)
})
}
}
```
is equivalent to
```js
export default {
data() {
return {
count: 0,
}
},
methods: {
addToCount(n) {
this.count += n
this.$emit('add-to-count', n)
},
resetCount() {
this.count = 0
this.$emit('reset')
},
returnValue() {
this.$emit('return-value', 10)
},
onInputChange(e) {
this.$emit('on-input-change', e.target.value, e)
},
promise() {
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve(20)
}, 0)
})
promise.then((value) => {
this.$emit('promise', value)
})
},
},
}
```
### <a id="Ref"></a> `@Ref(refKey?: string)` decorator
```ts
import { Vue, Component, Ref } from 'vue-property-decorator'
import AnotherComponent from '@/path/to/another-component.vue'
@Component
export default class YourComponent extends Vue {
@Ref() readonly anotherComponent!: AnotherComponent
@Ref('aButton') readonly button!: HTMLButtonElement
}
```
is equivalent to
```js
export default {
computed() {
anotherComponent: {
cache: false,
get() {
return this.$refs.anotherComponent as AnotherComponent
}
},
button: {
cache: false,
get() {
return this.$refs.aButton as HTMLButtonElement
}
}
}
}
```
+73
View File
@@ -0,0 +1,73 @@
import Vue, { PropOptions, WatchOptions } from 'vue';
import Component, { mixins } from 'vue-class-component';
import { InjectKey } from 'vue/types/options';
export declare type Constructor = {
new (...args: any[]): any;
};
export { Component, Vue, mixins as Mixins };
declare type InjectOptions = {
from?: InjectKey;
default?: any;
};
/**
* decorator of an inject
* @param from key
* @return PropertyDecorator
*/
export declare function Inject(options?: InjectOptions | InjectKey): import("vue-class-component").VueDecorator;
/**
* decorator of a reactive inject
* @param from key
* @return PropertyDecorator
*/
export declare function InjectReactive(options?: InjectOptions | InjectKey): import("vue-class-component").VueDecorator;
/**
* decorator of a provide
* @param key key
* @return PropertyDecorator | void
*/
export declare function Provide(key?: string | symbol): import("vue-class-component").VueDecorator;
/**
* decorator of a reactive provide
* @param key key
* @return PropertyDecorator | void
*/
export declare function ProvideReactive(key?: string | symbol): import("vue-class-component").VueDecorator;
/**
* decorator of model
* @param event event name
* @param options options
* @return PropertyDecorator
*/
export declare function Model(event?: string, options?: PropOptions | Constructor[] | Constructor): (target: Vue, key: string) => void;
/**
* decorator of a prop
* @param options the options for the prop
* @return PropertyDecorator | void
*/
export declare function Prop(options?: PropOptions | Constructor[] | Constructor): (target: Vue, key: string) => void;
/**
* decorator of a synced prop
* @param propName the name to interface with from outside, must be different from decorated property
* @param options the options for the synced prop
* @return PropertyDecorator | void
*/
export declare function PropSync(propName: string, options?: PropOptions | Constructor[] | Constructor): PropertyDecorator;
/**
* decorator of a watch function
* @param path the path or the expression to observe
* @param WatchOption
* @return MethodDecorator
*/
export declare function Watch(path: string, options?: WatchOptions): import("vue-class-component").VueDecorator;
/**
* decorator of an event-emitter function
* @param event The name of the event
* @return MethodDecorator
*/
export declare function Emit(event?: string): (_target: Vue, propertyKey: string, descriptor: any) => void;
/**
* decorator of a ref prop
* @param refKey the ref key defined in template
*/
export declare function Ref(refKey?: string): import("vue-class-component").VueDecorator;
+280
View File
@@ -0,0 +1,280 @@
/** vue-property-decorator verson 8.5.1 MIT LICENSE copyright 2020 kaorun343 */
/// <reference types='reflect-metadata'/>
'use strict';
import Vue from 'vue';
import Component, { createDecorator, mixins } from 'vue-class-component';
export { Component, Vue, mixins as Mixins };
/** Used for keying reactive provide/inject properties */
var reactiveInjectKey = '__reactiveInject__';
/**
* decorator of an inject
* @param from key
* @return PropertyDecorator
*/
export function Inject(options) {
return createDecorator(function (componentOptions, key) {
if (typeof componentOptions.inject === 'undefined') {
componentOptions.inject = {};
}
if (!Array.isArray(componentOptions.inject)) {
componentOptions.inject[key] = options || key;
}
});
}
/**
* decorator of a reactive inject
* @param from key
* @return PropertyDecorator
*/
export function InjectReactive(options) {
return createDecorator(function (componentOptions, key) {
if (typeof componentOptions.inject === 'undefined') {
componentOptions.inject = {};
}
if (!Array.isArray(componentOptions.inject)) {
var fromKey_1 = !!options ? options.from || options : key;
var defaultVal_1 = (!!options && options.default) || undefined;
if (!componentOptions.computed)
componentOptions.computed = {};
componentOptions.computed[key] = function () {
var obj = this[reactiveInjectKey];
return obj ? obj[fromKey_1] : defaultVal_1;
};
componentOptions.inject[reactiveInjectKey] = reactiveInjectKey;
}
});
}
function produceProvide(original) {
var provide = function () {
var _this = this;
var rv = typeof original === 'function' ? original.call(this) : original;
rv = Object.create(rv || null);
// set reactive services (propagates previous services if necessary)
rv[reactiveInjectKey] = this[reactiveInjectKey] || {};
for (var i in provide.managed) {
rv[provide.managed[i]] = this[i];
}
var _loop_1 = function (i) {
rv[provide.managedReactive[i]] = this_1[i]; // Duplicates the behavior of `@Provide`
Object.defineProperty(rv[reactiveInjectKey], provide.managedReactive[i], {
enumerable: true,
get: function () { return _this[i]; },
});
};
var this_1 = this;
for (var i in provide.managedReactive) {
_loop_1(i);
}
return rv;
};
provide.managed = {};
provide.managedReactive = {};
return provide;
}
function needToProduceProvide(original) {
return (typeof original !== 'function' ||
(!original.managed && !original.managedReactive));
}
/**
* decorator of a provide
* @param key key
* @return PropertyDecorator | void
*/
export function Provide(key) {
return createDecorator(function (componentOptions, k) {
var provide = componentOptions.provide;
if (needToProduceProvide(provide)) {
provide = componentOptions.provide = produceProvide(provide);
}
provide.managed[k] = key || k;
});
}
/**
* decorator of a reactive provide
* @param key key
* @return PropertyDecorator | void
*/
export function ProvideReactive(key) {
return createDecorator(function (componentOptions, k) {
var provide = componentOptions.provide;
// inject parent reactive services (if any)
if (!Array.isArray(componentOptions.inject)) {
componentOptions.inject = componentOptions.inject || {};
componentOptions.inject[reactiveInjectKey] = {
from: reactiveInjectKey,
default: {},
};
}
if (needToProduceProvide(provide)) {
provide = componentOptions.provide = produceProvide(provide);
}
provide.managedReactive[k] = key || k;
});
}
/** @see {@link https://github.com/vuejs/vue-class-component/blob/master/src/reflect.ts} */
var reflectMetadataIsSupported = typeof Reflect !== 'undefined' && typeof Reflect.getMetadata !== 'undefined';
function applyMetadata(options, target, key) {
if (reflectMetadataIsSupported) {
if (!Array.isArray(options) &&
typeof options !== 'function' &&
typeof options.type === 'undefined') {
var type = Reflect.getMetadata('design:type', target, key);
if (type !== Object) {
options.type = type;
}
}
}
}
/**
* decorator of model
* @param event event name
* @param options options
* @return PropertyDecorator
*/
export function Model(event, options) {
if (options === void 0) { options = {}; }
return function (target, key) {
applyMetadata(options, target, key);
createDecorator(function (componentOptions, k) {
;
(componentOptions.props || (componentOptions.props = {}))[k] = options;
componentOptions.model = { prop: k, event: event || k };
})(target, key);
};
}
/**
* decorator of a prop
* @param options the options for the prop
* @return PropertyDecorator | void
*/
export function Prop(options) {
if (options === void 0) { options = {}; }
return function (target, key) {
applyMetadata(options, target, key);
createDecorator(function (componentOptions, k) {
;
(componentOptions.props || (componentOptions.props = {}))[k] = options;
})(target, key);
};
}
/**
* decorator of a synced prop
* @param propName the name to interface with from outside, must be different from decorated property
* @param options the options for the synced prop
* @return PropertyDecorator | void
*/
export function PropSync(propName, options) {
if (options === void 0) { options = {}; }
// @ts-ignore
return function (target, key) {
applyMetadata(options, target, key);
createDecorator(function (componentOptions, k) {
;
(componentOptions.props || (componentOptions.props = {}))[propName] = options;
(componentOptions.computed || (componentOptions.computed = {}))[k] = {
get: function () {
return this[propName];
},
set: function (value) {
// @ts-ignore
this.$emit("update:" + propName, value);
},
};
})(target, key);
};
}
/**
* decorator of a watch function
* @param path the path or the expression to observe
* @param WatchOption
* @return MethodDecorator
*/
export function Watch(path, options) {
if (options === void 0) { options = {}; }
var _a = options.deep, deep = _a === void 0 ? false : _a, _b = options.immediate, immediate = _b === void 0 ? false : _b;
return createDecorator(function (componentOptions, handler) {
if (typeof componentOptions.watch !== 'object') {
componentOptions.watch = Object.create(null);
}
var watch = componentOptions.watch;
if (typeof watch[path] === 'object' && !Array.isArray(watch[path])) {
watch[path] = [watch[path]];
}
else if (typeof watch[path] === 'undefined') {
watch[path] = [];
}
watch[path].push({ handler: handler, deep: deep, immediate: immediate });
});
}
// Code copied from Vue/src/shared/util.js
var hyphenateRE = /\B([A-Z])/g;
var hyphenate = function (str) { return str.replace(hyphenateRE, '-$1').toLowerCase(); };
/**
* decorator of an event-emitter function
* @param event The name of the event
* @return MethodDecorator
*/
export function Emit(event) {
return function (_target, propertyKey, descriptor) {
var key = hyphenate(propertyKey);
var original = descriptor.value;
descriptor.value = function emitter() {
var _this = this;
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var emit = function (returnValue) {
var emitName = event || key;
if (returnValue === undefined) {
if (args.length === 0) {
_this.$emit(emitName);
}
else if (args.length === 1) {
_this.$emit(emitName, args[0]);
}
else {
_this.$emit.apply(_this, [emitName].concat(args));
}
}
else {
if (args.length === 0) {
_this.$emit(emitName, returnValue);
}
else if (args.length === 1) {
_this.$emit(emitName, returnValue, args[0]);
}
else {
_this.$emit.apply(_this, [emitName, returnValue].concat(args));
}
}
};
var returnValue = original.apply(this, args);
if (isPromise(returnValue)) {
returnValue.then(emit);
}
else {
emit(returnValue);
}
return returnValue;
};
};
}
/**
* decorator of a ref prop
* @param refKey the ref key defined in template
*/
export function Ref(refKey) {
return createDecorator(function (options, key) {
options.computed = options.computed || {};
options.computed[key] = {
cache: false,
get: function () {
return this.$refs[refKey || key];
},
};
});
}
function isPromise(obj) {
return obj instanceof Promise || (obj && typeof obj.then === 'function');
}
+304
View File
@@ -0,0 +1,304 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('vue-class-component')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue', 'vue-class-component'], factory) :
(global = global || self, factory(global.VuePropertyDecorator = {}, global.Vue, global.VueClassComponent));
}(this, function (exports, vue, vueClassComponent) { 'use strict';
vue = vue && vue.hasOwnProperty('default') ? vue['default'] : vue;
var vueClassComponent__default = 'default' in vueClassComponent ? vueClassComponent['default'] : vueClassComponent;
/** vue-property-decorator verson 8.5.1 MIT LICENSE copyright 2020 kaorun343 */
/** Used for keying reactive provide/inject properties */
var reactiveInjectKey = '__reactiveInject__';
/**
* decorator of an inject
* @param from key
* @return PropertyDecorator
*/
function Inject(options) {
return vueClassComponent.createDecorator(function (componentOptions, key) {
if (typeof componentOptions.inject === 'undefined') {
componentOptions.inject = {};
}
if (!Array.isArray(componentOptions.inject)) {
componentOptions.inject[key] = options || key;
}
});
}
/**
* decorator of a reactive inject
* @param from key
* @return PropertyDecorator
*/
function InjectReactive(options) {
return vueClassComponent.createDecorator(function (componentOptions, key) {
if (typeof componentOptions.inject === 'undefined') {
componentOptions.inject = {};
}
if (!Array.isArray(componentOptions.inject)) {
var fromKey_1 = !!options ? options.from || options : key;
var defaultVal_1 = (!!options && options.default) || undefined;
if (!componentOptions.computed)
componentOptions.computed = {};
componentOptions.computed[key] = function () {
var obj = this[reactiveInjectKey];
return obj ? obj[fromKey_1] : defaultVal_1;
};
componentOptions.inject[reactiveInjectKey] = reactiveInjectKey;
}
});
}
function produceProvide(original) {
var provide = function () {
var _this = this;
var rv = typeof original === 'function' ? original.call(this) : original;
rv = Object.create(rv || null);
// set reactive services (propagates previous services if necessary)
rv[reactiveInjectKey] = this[reactiveInjectKey] || {};
for (var i in provide.managed) {
rv[provide.managed[i]] = this[i];
}
var _loop_1 = function (i) {
rv[provide.managedReactive[i]] = this_1[i]; // Duplicates the behavior of `@Provide`
Object.defineProperty(rv[reactiveInjectKey], provide.managedReactive[i], {
enumerable: true,
get: function () { return _this[i]; },
});
};
var this_1 = this;
for (var i in provide.managedReactive) {
_loop_1(i);
}
return rv;
};
provide.managed = {};
provide.managedReactive = {};
return provide;
}
function needToProduceProvide(original) {
return (typeof original !== 'function' ||
(!original.managed && !original.managedReactive));
}
/**
* decorator of a provide
* @param key key
* @return PropertyDecorator | void
*/
function Provide(key) {
return vueClassComponent.createDecorator(function (componentOptions, k) {
var provide = componentOptions.provide;
if (needToProduceProvide(provide)) {
provide = componentOptions.provide = produceProvide(provide);
}
provide.managed[k] = key || k;
});
}
/**
* decorator of a reactive provide
* @param key key
* @return PropertyDecorator | void
*/
function ProvideReactive(key) {
return vueClassComponent.createDecorator(function (componentOptions, k) {
var provide = componentOptions.provide;
// inject parent reactive services (if any)
if (!Array.isArray(componentOptions.inject)) {
componentOptions.inject = componentOptions.inject || {};
componentOptions.inject[reactiveInjectKey] = {
from: reactiveInjectKey,
default: {},
};
}
if (needToProduceProvide(provide)) {
provide = componentOptions.provide = produceProvide(provide);
}
provide.managedReactive[k] = key || k;
});
}
/** @see {@link https://github.com/vuejs/vue-class-component/blob/master/src/reflect.ts} */
var reflectMetadataIsSupported = typeof Reflect !== 'undefined' && typeof Reflect.getMetadata !== 'undefined';
function applyMetadata(options, target, key) {
if (reflectMetadataIsSupported) {
if (!Array.isArray(options) &&
typeof options !== 'function' &&
typeof options.type === 'undefined') {
var type = Reflect.getMetadata('design:type', target, key);
if (type !== Object) {
options.type = type;
}
}
}
}
/**
* decorator of model
* @param event event name
* @param options options
* @return PropertyDecorator
*/
function Model(event, options) {
if (options === void 0) { options = {}; }
return function (target, key) {
applyMetadata(options, target, key);
vueClassComponent.createDecorator(function (componentOptions, k) {
(componentOptions.props || (componentOptions.props = {}))[k] = options;
componentOptions.model = { prop: k, event: event || k };
})(target, key);
};
}
/**
* decorator of a prop
* @param options the options for the prop
* @return PropertyDecorator | void
*/
function Prop(options) {
if (options === void 0) { options = {}; }
return function (target, key) {
applyMetadata(options, target, key);
vueClassComponent.createDecorator(function (componentOptions, k) {
(componentOptions.props || (componentOptions.props = {}))[k] = options;
})(target, key);
};
}
/**
* decorator of a synced prop
* @param propName the name to interface with from outside, must be different from decorated property
* @param options the options for the synced prop
* @return PropertyDecorator | void
*/
function PropSync(propName, options) {
if (options === void 0) { options = {}; }
// @ts-ignore
return function (target, key) {
applyMetadata(options, target, key);
vueClassComponent.createDecorator(function (componentOptions, k) {
(componentOptions.props || (componentOptions.props = {}))[propName] = options;
(componentOptions.computed || (componentOptions.computed = {}))[k] = {
get: function () {
return this[propName];
},
set: function (value) {
// @ts-ignore
this.$emit("update:" + propName, value);
},
};
})(target, key);
};
}
/**
* decorator of a watch function
* @param path the path or the expression to observe
* @param WatchOption
* @return MethodDecorator
*/
function Watch(path, options) {
if (options === void 0) { options = {}; }
var _a = options.deep, deep = _a === void 0 ? false : _a, _b = options.immediate, immediate = _b === void 0 ? false : _b;
return vueClassComponent.createDecorator(function (componentOptions, handler) {
if (typeof componentOptions.watch !== 'object') {
componentOptions.watch = Object.create(null);
}
var watch = componentOptions.watch;
if (typeof watch[path] === 'object' && !Array.isArray(watch[path])) {
watch[path] = [watch[path]];
}
else if (typeof watch[path] === 'undefined') {
watch[path] = [];
}
watch[path].push({ handler: handler, deep: deep, immediate: immediate });
});
}
// Code copied from Vue/src/shared/util.js
var hyphenateRE = /\B([A-Z])/g;
var hyphenate = function (str) { return str.replace(hyphenateRE, '-$1').toLowerCase(); };
/**
* decorator of an event-emitter function
* @param event The name of the event
* @return MethodDecorator
*/
function Emit(event) {
return function (_target, propertyKey, descriptor) {
var key = hyphenate(propertyKey);
var original = descriptor.value;
descriptor.value = function emitter() {
var _this = this;
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var emit = function (returnValue) {
var emitName = event || key;
if (returnValue === undefined) {
if (args.length === 0) {
_this.$emit(emitName);
}
else if (args.length === 1) {
_this.$emit(emitName, args[0]);
}
else {
_this.$emit.apply(_this, [emitName].concat(args));
}
}
else {
if (args.length === 0) {
_this.$emit(emitName, returnValue);
}
else if (args.length === 1) {
_this.$emit(emitName, returnValue, args[0]);
}
else {
_this.$emit.apply(_this, [emitName, returnValue].concat(args));
}
}
};
var returnValue = original.apply(this, args);
if (isPromise(returnValue)) {
returnValue.then(emit);
}
else {
emit(returnValue);
}
return returnValue;
};
};
}
/**
* decorator of a ref prop
* @param refKey the ref key defined in template
*/
function Ref(refKey) {
return vueClassComponent.createDecorator(function (options, key) {
options.computed = options.computed || {};
options.computed[key] = {
cache: false,
get: function () {
return this.$refs[refKey || key];
},
};
});
}
function isPromise(obj) {
return obj instanceof Promise || (obj && typeof obj.then === 'function');
}
exports.Vue = vue;
exports.Component = vueClassComponent__default;
Object.defineProperty(exports, 'Mixins', {
enumerable: true,
get: function () {
return vueClassComponent.mixins;
}
});
exports.Emit = Emit;
exports.Inject = Inject;
exports.InjectReactive = InjectReactive;
exports.Model = Model;
exports.Prop = Prop;
exports.PropSync = PropSync;
exports.Provide = Provide;
exports.ProvideReactive = ProvideReactive;
exports.Ref = Ref;
exports.Watch = Watch;
Object.defineProperty(exports, '__esModule', { value: true });
}));
+79
View File
@@ -0,0 +1,79 @@
{
"_args": [
[
"vue-property-decorator@8.5.1",
"/home/node/nuxt"
]
],
"_from": "vue-property-decorator@8.5.1",
"_id": "vue-property-decorator@8.5.1",
"_inBundle": false,
"_integrity": "sha512-O6OUN2OMsYTGPvgFtXeBU3jPnX5ffQ9V4I1WfxFQ6dqz6cOUbR3Usou7kgFpfiXDvV7dJQSFcJ5yUPgOtPPm1Q==",
"_location": "/vue-property-decorator",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "vue-property-decorator@8.5.1",
"name": "vue-property-decorator",
"escapedName": "vue-property-decorator",
"rawSpec": "8.5.1",
"saveSpec": null,
"fetchSpec": "8.5.1"
},
"_requiredBy": [
"/nuxt-property-decorator"
],
"_resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz",
"_spec": "8.5.1",
"_where": "/home/node/nuxt",
"author": {
"name": "kaorun343"
},
"bugs": {
"url": "https://github.com/kaorun343/vue-property-decorator/issues"
},
"dependencies": {
"vue-class-component": "^7.1.0"
},
"description": "property decorators for Vue Component",
"devDependencies": {
"@types/jest": "^24.0.15",
"@types/node": "^12.0.8",
"jest": "^24.8.0",
"reflect-metadata": "^0.1.13",
"rollup": "^1.15.6",
"ts-jest": "^24.0.2",
"typescript": "^3.5.2",
"vue": "^2.6.10"
},
"directories": {
"tests": "tests"
},
"files": [
"lib"
],
"homepage": "https://github.com/kaorun343/vue-property-decorator#readme",
"keywords": [
"vue",
"typescript",
"decorator"
],
"license": "MIT",
"main": "lib/vue-property-decorator.umd.js",
"module": "lib/vue-property-decorator.js",
"name": "vue-property-decorator",
"peerDependencies": {
"vue": "*"
},
"repository": {
"type": "git",
"url": "git+https://github.com/kaorun343/vue-property-decorator.git"
},
"scripts": {
"build": "tsc -p ./src/tsconfig.json && rollup -c",
"test": "jest"
},
"typings": "./lib/vue-property-decorator.d.ts",
"version": "8.5.1"
}