✨ Allow configuring @Ref('...')

At the moment, the `@Ref` decorator only allows the property to match
the `ref` value.

This change allows configuring the `ref`, similarly to `@Emit`.

Author: alecgibson

src/option/ref.ts

@@ -2,10 +2,12 @@ import type { Cons } from '../component'
 import { type OptionBuilder, applyAccessors } from '../optionBuilder'
 import { obtainSlot, optoinNullableMemberDecorator } from '../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)
 })
 
 
@@ -16,9 +18,10 @@ 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
                 })

src/utils.ts

@@ -7,6 +7,7 @@ import type { HookConfig } from "./option/methodsAndHooks";
 import type { VModelConfig } from "./option/vmodel";
 import type { WatchConfig } from "./option/watch";
 import type { SetupConfig } from './option/setup'
+import type { RefConfig } from './option/ref';
 const SlotSymbol = Symbol('vue-facing-decorator-slot')
 
 export type SlotMapTypes = {
@@ -19,7 +20,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>
 }
 
@@ -123,7 +124,7 @@ export function getSuperSlot(obj: any) {
 //     }
 //     return arr
 // }
-// export function 
+// export function
 // export function collect<>(slot: Slot,mapName:keyof SlotMapTypes,) {
 //     let currSlot: Slot | null = slot
 //     while (currSlot != null) {

test/option/ref.ts

@@ -2,12 +2,15 @@
 import { expect } from 'chai';
 import 'mocha';
 import { Component, Ref, Base } from '../../dist'
+import {mount} from '@vue/test-utils';
 
 @Component
 export class Comp extends Base {
     @Ref
     readonly refName!: any
 
+    @Ref('override')
+    readonly foo!: any
 }
 const CompContext = Comp as any
 
@@ -16,7 +19,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 {}