merge: Allow configuring @ref('...')

Author: ruojianll

changelog/v3.0.1.md

@@ -0,0 +1,3 @@
+1. Use class constructor name as default component name.
+
+2. `Ref` decorator accepts `key` paramater. (doc updated)

docs/en/class-component/reference/code-usage.ts

@@ -5,6 +5,7 @@ import { Ref, Component, Vue, toNative } from 'vue-facing-decorator'
 
 <template>
     <div ref="refEl"></div>
+    <div ref="fooEl"></div>
 </template>
 
 */
@@ -13,6 +14,9 @@ import { Ref, Component, Vue, toNative } from 'vue-facing-decorator'
 class MyComponent extends Vue {
     @Ref
     readonly refEl!: HTMLDivElement
+
+    @Ref('fooEl')
+    refEl2!: HTMLDivElement
 }
 
 export default toNative(MyComponent)

docs/en/class-component/reference/reference.md

@@ -1,5 +1,5 @@
 ## Usage
 
-Use `Ref` decorator to define a property getter  `this.$refs[name]` on vue component instance. The reference name is the name of property.
+Use `Ref` decorator to define a property getter  `this.$refs[name]` on vue component instance. The reference name is the name of property or a passed name parameter.
 
 [](./code-usage.ts ':include :type=code typescript')

docs/zh-cn/class-component/reference/reference.md

@@ -1,5 +1,5 @@
 ## 用法
 
-装饰器`Ref`在vue实力上定义一个指定引用`this.$refs[name]`的访问器。引用名是这个属性的名字。
+装饰器`Ref`在vue实力上定义一个指定引用`this.$refs[name]`的访问器。引用名是这个属性的名字或者一个传入的名称作为参数。
 
 [](../../../en/class-component/reference/code-usage.ts ':include :type=code typescript')

src/option/ref.ts

@@ -1,16 +1,19 @@
 import type { Cons } from '../component'
 import { type OptionBuilder, applyAccessors } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../utils'
-import { compatibleMemberDecorator } from '../deco3/utils'
-export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string) {
+
+export type RefConfig = null | string
+
+export const decorator = optoinNullableMemberDecorator(function (proto: any, name: string, key?: string) {
     const slot = obtainSlot(proto)
     const map = slot.obtainMap('ref')
-    map.set(name, true)
+    map.set(name, typeof key === 'undefined' ? null : key)
 })
 
 
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
     const slot = obtainSlot(cons.prototype)
+
     const names = slot.getMap('ref')
     if (!names || names.size === 0) {
         return
@@ -19,11 +22,13 @@ export function build(cons: Cons, optionBuilder: OptionBuilder) {
     applyAccessors(optionBuilder, (ctx: any) => {
         const data: Map<string, { get: () => any, set: undefined }> = new Map
         names.forEach((value, name) => {
+            const refKey = value === null ? name : value
             data.set(name, {
                 get: function (this: any) {
-                    return ctx.$refs[name]
+                    return ctx.$refs[refKey]
                 },
                 set: undefined
+
             })
         })
         return data

src/utils.ts

@@ -8,7 +8,9 @@ import type { VModelConfig } from "./option/vmodel";
 import type { WatchConfig } from "./option/watch";
 import type { SetupConfig } from './option/setup'
 import type { Record as CustomDecoratorRecord } from './custom/custom'
+import type { RefConfig } from './option/ref';
 import { compatibleMemberDecorator } from './deco3/utils';
+
 const SlotSymbol = Symbol('vue-facing-decorator-slot')
 
 export type SlotMapTypes = {
@@ -21,7 +23,7 @@ export type SlotMapTypes = {
     hooks: Map<string, HookConfig>
     'v-model': Map<string, VModelConfig>
     watch: Map<string, WatchConfig | WatchConfig[]>
-    ref: Map<string, boolean>
+    ref: Map<string, RefConfig>
     setup: Map<string, SetupConfig>
     customDecorator: Map<string, CustomDecoratorRecord>
 }

test/option/ref.ts

@@ -1,13 +1,19 @@
 
 import { expect } from 'chai';
 import 'mocha';
+
 import { Component, Ref, Base, toNative } from '../../dist'
 
+import { mount } from '@vue/test-utils';
+
+
 @Component
 class Comp extends Base {
     @Ref
     readonly refName!: any
 
+    @Ref('override')
+    readonly foo!: any
 }
 const CompContext = toNative(Comp) as any
 
@@ -16,7 +22,22 @@ describe('decorator Ref',
         it('default', () => {
             expect('function').to.equal(typeof CompContext?.beforeCreate)
         })
+
+        it('points to an element', () => {
+            const component = mount({
+                ...CompContext,
+                template: `
+                    <div>
+                        <div ref="refName">ref content</div>
+                        <div ref="override">foo</div>
+                    </div>
+                `,
+            })
+
+            expect(component.vm.refName.textContent).to.equal('ref content');
+            expect(component.vm.foo.textContent).to.equal('foo');
+        });
     }
 )
 
-export default {}
+export default {}