Merge branch 'master' of github.com:facing-dev/vue-facing-decorator

Author: ruojianll

docs/pt-br/_sidebar.md

@@ -12,13 +12,15 @@
     - [Observadores](/pt-br/class-component/watcher/watcher.md)
     - [Inject](/pt-br/class-component/injection/injection.md)
     - [Model](/pt-br/class-component/model/model.md)
-    - [Use](/pt-br/class-component/use/use.md)
+    - [Setup](/pt-br/class-component/setup/setup.md)
 - Herança
     - [Classes ECMAScript](/pt-br/inheritance/es-class/es-class.md)
     - [Componentes](/pt-br/inheritance/component/component.md)
     - [Exemplo complexo](/pt-br/inheritance/complex-example/complex-example.md)
 - TSX
     - [TSX render](/pt-br/tsx/tsx-render/tsx-render.md)
     - [Tipando Atributos](/pt-br/tsx/attribute-types/attribute-types.md)
+- Custom Decorator
+    - [Custom Decorator](/pt-br/custom/custom.md)
 - Compatibilidade
     - [reflect-metadata](/pt-br/compatibility/reflect-metadata/reflect-metadata.md)

docs/pt-br/class-component/component/code-option-setup.ts

@@ -0,0 +1,20 @@
+
+import { Component, Vue } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    setup() {
+        return { key: 'value' }
+    }
+}
+*/
+
+@Component({
+    setup() {
+        return { key: 'value' }
+    }
+})
+export default class MyComponent extends Vue {
+    key!: string
+}

docs/pt-br/class-component/component/component.md

@@ -58,6 +58,12 @@ Se você utiliza SFC ( Single File components ). O método render será aplicado
 
 [](./code-option-render.ts ':include :type=code typescript')
 
+### setup
+
+Assim fica a propriedade `setup` do vue options API, mas não pode retornar uma função render. 
+
+[](./code-option-setup.ts ':include :type=code typescript')
+
 ### template
 
 Assim fica a propriedade `template` do vue options API.

docs/pt-br/class-component/use/code-usage-base.ts renamed to docs/pt-br/class-component/setup/code-usage-base.ts

@@ -1,11 +1,11 @@
-import { Component, Vue, Use } from 'vue-facing-decorator'
+import { Component, Vue, Setup } from 'vue-facing-decorator'
 import { ref } from 'vue'
 import { useRouter, Router } from 'vue-router'
 
 @Component
 class MyComponent extends Vue {
 
-    @Use(useRouter)
+    @Setup((props,ctx)=>useRouter())
     router!: Router
 
     mounted() {
@@ -16,7 +16,7 @@ class MyComponent extends Vue {
 @Component
 class MyComponent2 extends Vue {
 
-    @Use(() => ref('hello world'))
+    @Setup(() => ref('hello world'))
     data!: string
 
     mounted() {

docs/pt-br/class-component/setup/setup.md

@@ -0,0 +1,7 @@
+## Utilização
+
+Use o decorator `Setup` exportado de `'vue-facing-decorator'` para injetar [composables](https://vuejs.org/guide/reusability/composables.html) no seu class componente como uma propriedade. 
+
+[](./code-usage-base.ts ':include :type=code typescript')
+
+

docs/pt-br/class-component/use/use.md

@@ -0,0 +1,21 @@
+import { createDecorator, Component, Vue } from 'vue-facing-decorator'
+
+function Log(prefix: string) {
+    return createDecorator(function (options, key) {
+        const old = options.methods?.[key]
+        if (!old) {
+            throw 'not found'
+        }
+        options.methods[key] = function (...args: any[]) {
+            old.apply(this, args)
+        }
+    })
+}
+
+@Component
+export default class Comp extends Vue {
+    @Log('prefix')
+    method() {
+
+    }
+}

docs/pt-br/custom/code-usage.ts

@@ -0,0 +1,13 @@
+## Utilização
+
+Use `createDecorator` para construir seus próprios decorators.
+
+Se você é um autor de algum package, instale vue-facing-decorator como `devDependecies` e marque-a dentro de `peerDependencies`.
+
+
+`createDecorator` recebe uma função criadora, a qual aceita dois parâmetros: 
+
+1. Componentes Vue gerados com options API, você pode modifica-lo para implementar o que você quiser.
+2. A key da propriedade da classe(ou método), o qual o decorator irá ser aplicado.
+
+[](./code-usage.ts ':include :type=code typescript')

docs/pt-br/custom/custom.md

@@ -0,0 +1,35 @@
+import { Component, ComponentBase, Vue, mixins } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    name:"MyComponent",
+    extends:{
+        mixins:[{
+            name:'ComponentA'
+        },{
+            name:'ComponentB'
+        }]
+    }
+}
+*/
+@ComponentBase({
+    name: "ComponentA"
+})
+class ComponentA extends Vue {
+
+}
+
+@ComponentBase({
+    name: "ComponentB"
+})
+class ComponentB extends Vue {
+
+}
+
+@Component({
+    name: "MyComponent"
+})
+export default class MyComponent extends mixins(ComponentA,ComponentB) {
+
+}

docs/pt-br/inheritance/component/code-mixins-function.ts

@@ -10,6 +10,14 @@ Considere o código:
 
 Exitem dois componentes: `MyComponent` e `SuperComponent`. A herança é implementada pelo vue com `extends`. 
 
+## Estender múltiplos componentes
+
+Use `mixins` para estender múltiplos componentes que utilizam o decorator `ComponentBase`.
+
+[](./code-mixins-function.ts ':include :type=code typescript')
+
+
+
 ## Para componentes nativos
 
 Use `mixins` para mesclar dois componentes nativos.

docs/pt-br/inheritance/component/component.md

@@ -22,7 +22,6 @@ Sugestões e contribuições são bem-vindas.
 
 # Doações
 
-Doação
 
 # Discussões