{"_id":"@chenng/vue-property-decorator","_rev":"2-2249d07af8c1e0bb71c0a30900aa0074","name":"@chenng/vue-property-decorator","dist-tags":{"latest":"10.0.1"},"versions":{"10.0.0":{"name":"@chenng/vue-property-decorator","version":"10.0.0","description":"property decorators for Vue Component","main":"lib/vue-property-decorator.umd.js","module":"lib/vue-property-decorator.js","keywords":["vue","typescript","decorator"],"author":{"name":"kaorun343"},"license":"MIT","directories":{"tests":"tests"},"scripts":{"build":"tsc -p ./src/tsconfig.json && rollup -c","test":"jest"},"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":"^3.0.0-0","vue-class-component":"^8.0.0-0"},"typings":"./lib/vue-property-decorator.d.ts","dependencies":{},"peerDependencies":{"vue":"*","vue-class-component":"*"},"repository":{"type":"git","url":"git+https://github.com/kaorun343/vue-property-decorator.git"},"bugs":{"url":"https://github.com/kaorun343/vue-property-decorator/issues"},"homepage":"https://github.com/kaorun343/vue-property-decorator#readme","gitHead":"d9adb2c789852f0e9bcd7b25202553ddaf979baa","_id":"@chenng/vue-property-decorator@10.0.0","_nodeVersion":"10.16.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-dOapb79pq3g0irJvEfUEsMjCRIQnpjNFjPZfRoBPyjqug0A02OEdSZ72x7LoyjAT7ue+4oONyQNUuDhbp/+z6Q==","shasum":"8f0e9ffba521a7d336cf080cf864f9507b6e701c","tarball":"https://registry.npmjs.org/@chenng/vue-property-decorator/-/vue-property-decorator-10.0.0.tgz","fileCount":6,"unpackedSize":23796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaeFjCRA9TVsSAnZWagAAhN0QAIV2yqUM3KlqF/wjz74N\nCe+lFXtk6sQcm2hqEOVuCrUDoHczNTjdIBwCzDZiSueZXOYHnD2lih74RtMk\ngLZdxRzrWq7crGcq3BQwn5U3zTPjqwqcGR8n6DEP69j5zzQ7rR0UngHI4f8W\nR0FQab4B+fTyaMdBUrZQl3fTSBx3fq4/6hT8lm5vXXhMCQpH7J+xC4qFQPzS\naMLN7dx+Fg/IYZCAm8lp9tUdy5s1AnXR3ZuH79u0vXZqN2MoZ86Yp+9Veo/n\nUPMsi0bOLIIofHnLw/N4QSD0HllGkgyGljSsYqjvjvkv3CX7OdZA3J8OWlyw\n1gs3DOShtYbnQWoJDUjatPBRD3CkSQzGqregTsNFLnm3HTr1ZwWYTilZbtl7\n1BzrCKQPAe0syOTVaopjPyfODAgWYrFoVU59uXdzJToEwnO3JrGdEH58tGKA\nRWxGiSVhAsCBXesdAihgR2lIqhAXcW18amCVr5jF+vbCUuene/Dieia05b05\nqvZN3kPzpH7rauBr5WxDPe54uY/HesivSSr5JaXOzQcW19iYIazZNxnIRHaP\nTxim4oyTK4tcTupAjgXRdvVkLmHph/G+eYQjHE3Qh1EJG9arr3ZrX1zakYyX\nYKKYVSE/iFVRzMqiMDEFEhBd9Po/HlDJmwNY3HoMm90YRIPq3qIcytw1MG7U\nQREO\r\n=0JXY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHgIDWtYx2wzNbv3jX/94SFW30PpBdZS5FHxjvMOkSLrAiBIKVj+p3QMkUoCxDJ+W5S3/MdSQyvXILWaon3QCEyBLw=="}]},"maintainers":[{"name":"chenng","email":"ringcrl@foxmail.com"}],"_npmUser":{"name":"chenng","email":"ringcrl@foxmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-property-decorator_10.0.0_1600774498496_0.7793471087720081"},"_hasShrinkwrap":false},"10.0.1":{"name":"@chenng/vue-property-decorator","version":"10.0.1","description":"property decorators for Vue Component","main":"lib/vue-property-decorator.umd.js","module":"lib/vue-property-decorator.js","keywords":["vue","typescript","decorator"],"author":{"name":"kaorun343"},"license":"MIT","directories":{"tests":"tests"},"scripts":{"build":"tsc -p ./src/tsconfig.json && rollup -c","test":"jest"},"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":"^4.0.3","vue":"^3.0.0-0","vue-class-component":"^8.0.0-0"},"typings":"./lib/vue-property-decorator.d.ts","dependencies":{},"peerDependencies":{"vue":"*","vue-class-component":"*"},"repository":{"type":"git","url":"git+https://github.com/kaorun343/vue-property-decorator.git"},"bugs":{"url":"https://github.com/kaorun343/vue-property-decorator/issues"},"homepage":"https://github.com/kaorun343/vue-property-decorator#readme","gitHead":"38cba7d45d12dc47e6b35a922ce7984e56c422b3","_id":"@chenng/vue-property-decorator@10.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-6tet+oL7k4LFn+VoDUYVxbiBXpkVsoHin2+pasIk5pEdOr684jUNcH3+zXB7btbf+q8wA/SabTV2Ci6AfT5MyQ==","shasum":"46cd368f1f2bb261fdd2ec42170ffed5a47eb16a","tarball":"https://registry.npmjs.org/@chenng/vue-property-decorator/-/vue-property-decorator-10.0.1.tgz","fileCount":7,"unpackedSize":36490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfar84CRA9TVsSAnZWagAAf24P/Rnsy2YJcjElNvvajdrA\nWfwL4VjWs/yzG9h3WF04Z1hKwW5OzCiKKgruuOjZ6nG1GsmOq94d4cIEzLKW\nlTcryLVEynyMpzNsw6M5FogtLEDHv9cT4ioOqmek6xYwRsMLsfLBUw6+30Yr\n4coNOWkHrTJRnnYTPFKIaeq6pMoBSewA1B4mcc+499FKPml/yqVQbDqKXOw1\nmpBHlO1NK2Tpt++LveF8JnN22ynVCsYxvWhReZNU5CpGnovVyeZulVAmx3Dn\nVcX/Mh/E3pX5UQk41sLQpygJZya+H+LhKtKtldvioYs+siMM4ch6ffU0wDTl\nhcYxwzSKdOcBgK29IgoSR7D+du8lIKPT56EWB7r6SVcnJuPIACSgsV4SeuYU\nE4Nrpe3FU7kXGCkEoURTB5uSFj9YS53zCGNeZgg+AVlnqpuR/1e4vWspJ+yj\n3FlubaGMZPoudUKZn0L2/ZBWnhL+6nBMeTUmTiiBdA8WoPNBeLSq9drJLDHi\noG/UqVlEY+HBZ7DZYmDPOvR8s0uPox5C+hHEb8ugBkBdC+ykjJEHQfR2Lv6L\na+bU+sve4HfOC+xAysZNlEhcUStqX/+O1G3KodNnBRNYFBppRvqE3hvlmrVv\nVT9AXU1c36ZqxJ8xvz82l72r5OlGZAPDlCC77i6iplwiQtxsHmYJuHsX9DMz\nO0KC\r\n=Bqjw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeRgY4vM1eaFC2R01pzyjdF1GoSmgQuhJSFjnWHuiWkQIgKWgx8ek6oDykdRUcaEg9OiGBYjgZX/r1wzW/xT63A4Y="}]},"maintainers":[{"name":"chenng","email":"ringcrl@foxmail.com"}],"_npmUser":{"name":"chenng","email":"ringcrl@foxmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-property-decorator_10.0.1_1600831287790_0.9546601507400629"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-22T11:34:58.443Z","10.0.0":"2020-09-22T11:34:58.603Z","modified":"2022-04-04T22:39:09.197Z","10.0.1":"2020-09-23T03:21:27.968Z"},"maintainers":[{"name":"chenng","email":"ringcrl@foxmail.com"}],"description":"property decorators for Vue Component","homepage":"https://github.com/kaorun343/vue-property-decorator#readme","keywords":["vue","typescript","decorator"],"repository":{"type":"git","url":"git+https://github.com/kaorun343/vue-property-decorator.git"},"author":{"name":"kaorun343"},"bugs":{"url":"https://github.com/kaorun343/vue-property-decorator/issues"},"license":"MIT","readme":"# Vue3 Support\n\nModify the library to support vue3\n\n# Vue Property Decorator\n\n[![npm](https://img.shields.io/npm/v/vue-property-decorator.svg)](https://www.npmjs.com/package/vue-property-decorator)\n[![Build Status](https://travis-ci.org/kaorun343/vue-property-decorator.svg?branch=master)](https://travis-ci.org/kaorun343/vue-property-decorator)\n\nThis library fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component), so please read its README before using this library.\n\n## License\n\nMIT License\n\n## Install\n\n```bash\nnpm i -S vue-property-decorator\n```\n\n## Usage\n\nThere are several decorators and 1 function (Mixin):\n\n- [`@Prop`](#Prop)\n- [`@PropSync`](#PropSync)\n- [`@Model`](#Model)\n- [`@Watch`](#Watch)\n- [`@Provide`](#Provide)\n- [`@Inject`](#Provide)\n- [`@ProvideReactive`](#ProvideReactive)\n- [`@InjectReactive`](#ProvideReactive)\n- [`@Emit`](#Emit)\n- [`@Ref`](#Ref)\n- `@Component` (**provided by** [vue-class-component](https://github.com/vuejs/vue-class-component))\n- `Mixins` (the helper function named `mixins` **provided by** [vue-class-component](https://github.com/vuejs/vue-class-component))\n\n## See also\n\n[vuex-class](https://github.com/ktsn/vuex-class/)\n\n### <a id=\"Prop\"></a> `@Prop(options: (PropOptions | Constructor[] | Constructor) = {})` decorator\n\n```ts\nimport { Vue, Component, Prop } from 'vue-property-decorator'\n\n@Component\nexport default class YourComponent extends Vue {\n  @Prop(Number) readonly propA: number | undefined\n  @Prop({ default: 'default value' }) readonly propB!: string\n  @Prop([String, Boolean]) readonly propC: string | boolean | undefined\n}\n```\n\nis equivalent to\n\n```js\nexport default {\n  props: {\n    propA: {\n      type: Number,\n    },\n    propB: {\n      default: 'default value',\n    },\n    propC: {\n      type: [String, Boolean],\n    },\n  },\n}\n```\n\n**Note that:**\n\n## 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).\n\n1. Set `emitDecoratorMetadata` to `true`.\n2. Import `reflect-metadata` **before** importing `vue-property-decorator` (importing `reflect-metadata` is needed just once.)\n\n```ts\nimport 'reflect-metadata'\nimport { Vue, Component, Prop } from 'vue-property-decorator'\n\n@Component\nexport default class MyComponent extends Vue {\n  @Prop() age!: number\n}\n```\n\n## Each prop's default value need to be defined as same as the example code shown in above.\n\nIt's **not** supported to define each `default` property like `@Prop() prop = 'default value'` .\n\n### <a id=\"PropSync\"></a> `@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})` decorator\n\n```ts\nimport { Vue, Component, PropSync } from 'vue-property-decorator'\n\n@Component\nexport default class YourComponent extends Vue {\n  @PropSync('name', { type: String }) syncedName!: string\n}\n```\n\nis equivalent to\n\n```js\nexport default {\n  props: {\n    name: {\n      type: String,\n    },\n  },\n  computed: {\n    syncedName: {\n      get() {\n        return this.name\n      },\n      set(value) {\n        this.$emit('update:name', value)\n      },\n    },\n  },\n}\n```\n\nOther 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 if it was a regular data property whilst making it as easy as appending the `.sync` modifier in the parent component.\n\n### <a id=\"Model\"></a> `@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})` decorator\n\n```ts\nimport { Vue, Component, Model } from 'vue-property-decorator'\n\n@Component\nexport default class YourComponent extends Vue {\n  @Model('change', { type: Boolean }) readonly checked!: boolean\n}\n```\n\nis equivalent to\n\n```js\nexport default {\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n  props: {\n    checked: {\n      type: Boolean,\n    },\n  },\n}\n```\n\n`@Model` property can also set `type` property from its type definition via `reflect-metadata` .\n\n### <a id=\"Watch\"></a> `@Watch(path: string, options: WatchOptions = {})` decorator\n\n```ts\nimport { Vue, Component, Watch } from 'vue-property-decorator'\n\n@Component\nexport default class YourComponent extends Vue {\n  @Watch('child')\n  onChildChanged(val: string, oldVal: string) {}\n\n  @Watch('person', { immediate: true, deep: true })\n  onPersonChanged1(val: Person, oldVal: Person) {}\n\n  @Watch('person')\n  onPersonChanged2(val: Person, oldVal: Person) {}\n}\n```\n\nis equivalent to\n\n```js\nexport default {\n  watch: {\n    child: [\n      {\n        handler: 'onChildChanged',\n        immediate: false,\n        deep: false,\n      },\n    ],\n    person: [\n      {\n        handler: 'onPersonChanged1',\n        immediate: true,\n        deep: true,\n      },\n      {\n        handler: 'onPersonChanged2',\n        immediate: false,\n        deep: false,\n      },\n    ],\n  },\n  methods: {\n    onChildChanged(val, oldVal) {},\n    onPersonChanged1(val, oldVal) {},\n    onPersonChanged2(val, oldVal) {},\n  },\n}\n```\n\n### <a id=\"Provide\"></a> `@Provide(key?: string | symbol)` / `@Inject(options?: { from?: InjectKey, default?: any } | InjectKey)` decorator\n\n```ts\nimport { Component, Inject, Provide, Vue } from 'vue-property-decorator'\n\nconst symbol = Symbol('baz')\n\n@Component\nexport class MyComponent extends Vue {\n  @Inject() readonly foo!: string\n  @Inject('bar') readonly bar!: string\n  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string\n  @Inject(symbol) readonly baz!: string\n\n  @Provide() foo = 'foo'\n  @Provide('bar') baz = 'bar'\n}\n```\n\nis equivalent to\n\n```js\nconst symbol = Symbol('baz')\n\nexport const MyComponent = Vue.extend({\n  inject: {\n    foo: 'foo',\n    bar: 'bar',\n    optional: { from: 'optional', default: 'default' },\n    baz: symbol,\n  },\n  data() {\n    return {\n      foo: 'foo',\n      baz: 'bar',\n    }\n  },\n  provide() {\n    return {\n      foo: this.foo,\n      bar: this.baz,\n    }\n  },\n})\n```\n\n### <a id=\"ProvideReactive\"></a> `@ProvideReactive(key?: string | symbol)` / `@InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey)` decorator\n\nThese 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.\n\n```ts\nconst key = Symbol()\n@Component\nclass ParentComponent extends Vue {\n  @ProvideReactive() one = 'value'\n  @ProvideReactive(key) two = 'value'\n}\n\n@Component\nclass ChildComponent extends Vue {\n  @InjectReactive() one!: string\n  @InjectReactive(key) two!: string\n}\n```\n\n### <a id=\"Emit\"></a> `@Emit(event?: string)` decorator\n\nThe 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.\n\nIf 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.\n\n```ts\nimport { Vue, Component, Emit } from 'vue-property-decorator'\n\n@Component\nexport default class YourComponent extends Vue {\n  count = 0\n\n  @Emit()\n  addToCount(n: number) {\n    this.count += n\n  }\n\n  @Emit('reset')\n  resetCount() {\n    this.count = 0\n  }\n\n  @Emit()\n  returnValue() {\n    return 10\n  }\n\n  @Emit()\n  onInputChange(e) {\n    return e.target.value\n  }\n\n  @Emit()\n  promise() {\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        resolve(20)\n      }, 0)\n    })\n  }\n}\n```\n\nis equivalent to\n\n```js\nexport default {\n  data() {\n    return {\n      count: 0,\n    }\n  },\n  methods: {\n    addToCount(n) {\n      this.count += n\n      this.$emit('add-to-count', n)\n    },\n    resetCount() {\n      this.count = 0\n      this.$emit('reset')\n    },\n    returnValue() {\n      this.$emit('return-value', 10)\n    },\n    onInputChange(e) {\n      this.$emit('on-input-change', e.target.value, e)\n    },\n    promise() {\n      const promise = new Promise((resolve) => {\n        setTimeout(() => {\n          resolve(20)\n        }, 0)\n      })\n\n      promise.then((value) => {\n        this.$emit('promise', value)\n      })\n    },\n  },\n}\n```\n\n### <a id=\"Ref\"></a> `@Ref(refKey?: string)` decorator\n\n```ts\nimport { Vue, Component, Ref } from 'vue-property-decorator'\n\nimport AnotherComponent from '@/path/to/another-component.vue'\n\n@Component\nexport default class YourComponent extends Vue {\n  @Ref() readonly anotherComponent!: AnotherComponent\n  @Ref('aButton') readonly button!: HTMLButtonElement\n}\n```\n\nis equivalent to\n\n```js\nexport default {\n  computed() {\n    anotherComponent: {\n      cache: false,\n      get() {\n        return this.$refs.anotherComponent as AnotherComponent\n      }\n    },\n    button: {\n      cache: false,\n      get() {\n        return this.$refs.aButton as HTMLButtonElement\n      }\n    }\n  }\n}\n```\n","readmeFilename":"README.md"}