Socket
Socket
Sign inDemoInstall

vue-decorator

Package Overview
Dependencies
0
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.1.2 to 1.1.3

5

lib/index.d.ts
export * from 'vue-class-component';
export { Prop } from './decorators/Prop';
export { Watch } from './decorators/Watch';
export { Emit } from './decorators/Emit';
export { Ref } from './decorators/Ref';
export * from 'vue-property-decorator';

5

lib/index.js
export * from 'vue-class-component';
export { Prop } from './decorators/Prop';
export { Watch } from './decorators/Watch';
export { Emit } from './decorators/Emit';
export { Ref } from './decorators/Ref';
export * from 'vue-property-decorator';

130

lib/index.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue-class-component')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue-class-component'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueClassDecorator = {}, global.VueClassComponent));
}(this, (function (exports, vueClassComponent) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue-class-component'), require('vue-property-decorator')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue-class-component', 'vue-property-decorator'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueClassDecorator = {}, global.VueClassComponent, global.vuePropertyDecorator));
}(this, (function (exports, vueClassComponent, vuePropertyDecorator) { 'use strict';
function Prop(options) {
if (options === void 0) { options = {}; }
return function (target, key) {
vueClassComponent.createDecorator(function (componentOptions, propName) {
(componentOptions.props || (componentOptions.props = {}))[propName] = options;
})(target, key);
};
}
Object.keys(vueClassComponent).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () {
return vueClassComponent[k];
}
});
});
Object.keys(vuePropertyDecorator).forEach(function (k) {
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
enumerable: true,
get: function () {
return vuePropertyDecorator[k];
}
});
});
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 });
});
}
Object.defineProperty(exports, '__esModule', { value: true });
var __spreadArrays = (undefined && undefined.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function Emit(event) {
var hyphenate = function (str) {
return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
};
var isPromise = function (obj) {
return (obj instanceof Promise || (obj && typeof obj.then === 'function'));
};
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, __spreadArrays([emitName], args));
}
}
else {
args.unshift(returnValue);
_this.$emit.apply(_this, __spreadArrays([emitName], args));
}
};
var returnValue = original.apply(this, args);
if (isPromise(returnValue)) {
returnValue.then(emit);
}
else {
emit(returnValue);
}
return returnValue;
};
};
}
function Ref(refKey) {
return vueClassComponent.createDecorator(function (options, propName) {
options.computed = options.computed || {};
options.computed[propName] = {
cache: false,
get: function () {
return this.$refs[refKey || propName];
},
};
});
}
Object.keys(vueClassComponent).forEach(function (k) {
if (k !== 'default') Object.defineProperty(exports, k, {
enumerable: true,
get: function () {
return vueClassComponent[k];
}
});
});
exports.Emit = Emit;
exports.Prop = Prop;
exports.Ref = Ref;
exports.Watch = Watch;
Object.defineProperty(exports, '__esModule', { value: true });
})));

10

package.json
{
"name": "vue-decorator",
"version": "1.1.2",
"version": "1.1.3",
"description": "Custom decorators to vue-class-component that fits Vue 3",

@@ -24,8 +24,10 @@ "main": "lib/index.umd.js",

},
"dependencies": {},
"dependencies": {
},
"devDependencies": {
"rollup": "^2.35.1",
"typescript": "^4.1.3",
"vue": "3",
"vue-class-component": "^8.0.0-rc.1"
"vue": "^3.0.11",
"vue-class-component": "^8.0.0-rc.1",
"vue-property-decorator": "^10.0.0-rc.3"
},

@@ -32,0 +34,0 @@ "repository": {

227

README.md

@@ -1,234 +0,19 @@

# vue-class-decorator
# Welcome to vue-decorator
Custom decorators to vue-class-component that fits Vue 3, heavily inspired
by [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)
Hi!, this is a wrapper to two good projects:
1. [vue-class-component](https://github.com/kaorun343/vue-property-decorator)
2. [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)
---
## Help need: yes
This give us custom decorators provide by vue-class-component and vue-property-decorator that fits Vue 3
##Compatible: Vue 3
---
## License
MIT License
## Install
### yarn
```bash
yarn add vue-decorator
```
### npm
```bash
npm i vue-decorator
```
## Usage
- [`@Prop`](#Prop)
- [`@Watch`](#Watch)
- [`@Emit`](#Emit)
- [`@Ref`](#Ref)
### <a id="Prop"></a> `@Prop(options: (PropOptions | VueConstructor[] | VueConstructor) = {})`
```ts
import {Vue, Options, Prop} from 'vue-decorator'
@Options({})
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],
},
},
}
```
### <a id="Watch"></a> `@Watch(path: string, options: WatchOptions = {})`
```ts
import {Vue, Options, Watch} from 'vue-decorator'
@Options({})
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 {
name: 'MyComponent',
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="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, Options, Emit } from 'vue-decorator'
@Options({})
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)`
```ts
import { Vue, Options, Ref } from 'vue-decorator'
@Options({})
export default class YourComponent extends Vue {
@Ref('aButton') readonly button!: HTMLButtonElement
}
```
is equivalent to
```js
export default {
computed() {
button: {
cache: false,
get() {
return this.$refs.aButton as HTMLButtonElement
}
}
}
}
```
lib/decorators/Emit.d.ts
lib/decorators/Emit.js
lib/decorators/Prop.d.ts
lib/decorators/Prop.js
lib/decorators/Ref.d.ts
lib/decorators/Ref.js
lib/decorators/Watch.d.ts
lib/decorators/Watch.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc