diff --git a/packages/core/index.ts b/packages/core/index.ts index 7a98fe414a1..75183314dea 100644 --- a/packages/core/index.ts +++ b/packages/core/index.ts @@ -8,7 +8,6 @@ export * from './onElementRemoval' export * from './onKeyStroke' export * from './onLongPress' export * from './onStartTyping' -export * from './templateRef' export * from './unrefElement' export * from './useActiveElement' export * from './useAnimate' diff --git a/packages/core/templateRef/index.md b/packages/core/templateRef/index.md deleted file mode 100644 index 8e95da8c5cc..00000000000 --- a/packages/core/templateRef/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -category: Component ---- - -# templateRef - -Shorthand for binding ref to template element. - -## Usage - - - -```vue - - - -``` - -### With JSX/TSX - -```tsx -import { templateRef } from '@vueuse/core' - -export default { - setup() { - const target = templateRef('target', null) - - // use string ref - return () =>
- }, -} -``` - -### ` - - -``` diff --git a/packages/core/templateRef/index.test.ts b/packages/core/templateRef/index.test.ts deleted file mode 100644 index 09fbd8eb4c0..00000000000 --- a/packages/core/templateRef/index.test.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { describe, expect, it } from 'vitest' -import { defineComponent, h, nextTick, shallowRef } from 'vue' -import { mount } from '../../.test' -import { templateRef } from './index' - -describe('templateRef', () => { - it('should be defined', () => { - expect(templateRef).toBeDefined() - }) - - it('string ref mount', () => { - const refKey = 'target' - - const vm = mount(defineComponent({ - setup() { - const targetEl = templateRef(refKey, null) - return { targetEl } - }, - render() { - return h('div', { ref: refKey }) - }, - })) - - expect(vm.targetEl).toBe(vm.$el) - }) - - it('string ref update', async () => { - const vm = mount(defineComponent({ - setup() { - const refKey = shallowRef('foo') - const fooEl = templateRef('foo', null) - const barEl = templateRef('bar', null) - return { - refKey, - fooEl, - barEl, - } - }, - render() { - return h('div', { ref: this.refKey }) - }, - })) - - expect(vm.fooEl).toBe(vm.$el) - expect(vm.barEl).toBe(null) - - vm.refKey = 'bar' - await nextTick() - - expect(vm.fooEl).toBe(null) - expect(vm.barEl).toBe(vm.$el) - }) - - it('string ref unmount', async () => { - const vm = mount(defineComponent({ - setup() { - const toggle = shallowRef(true) - const targetEl = templateRef('target', null) - return { - toggle, - targetEl, - } - }, - render() { - return this.toggle ? h('div', { ref: 'target' }) : null - }, - })) - - expect(vm.targetEl).toBe(vm.$el) - - vm.toggle = false - await nextTick() - - expect(vm.targetEl).toBe(null) - }) - - it('support vue component as ref', async () => { - const ChildComponent = defineComponent({ - name: 'ChildComponent', - render() { - return null - }, - }) - - const vm = mount(defineComponent({ - components: { - ChildComponent, - }, - setup() { - const targetEl = templateRef('target') - return { - targetEl, - } - }, - render() { - return h(ChildComponent, { ref: 'target' }) - }, - })) - - expect(vm.targetEl).toBeDefined() - expect(vm.targetEl.$options.name).toBe('ChildComponent') - }) -}) diff --git a/packages/core/templateRef/index.ts b/packages/core/templateRef/index.ts deleted file mode 100644 index c673136bb34..00000000000 --- a/packages/core/templateRef/index.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { Component, Ref } from 'vue' -import { tryOnMounted } from '@vueuse/shared' -import { customRef, getCurrentInstance, onUpdated } from 'vue' - -/** - * Shorthand for binding ref to template element. - * - * @see https://vueuse.org/templateRef - * @param key - * @param initialValue - */ -export function templateRef( - key: Keys, - initialValue: T | null = null, -): Readonly> { - const instance = getCurrentInstance() - let _trigger = () => {} - - const element = customRef((track, trigger) => { - _trigger = trigger - return { - get() { - track() - return instance?.proxy?.$refs[key] ?? initialValue - }, - set() {}, - } - }) - - tryOnMounted(_trigger) - onUpdated(_trigger) - - return element as Readonly> -} diff --git a/test/exports/core.yaml b/test/exports/core.yaml index 940cf741d90..084755312e5 100644 --- a/test/exports/core.yaml +++ b/test/exports/core.yaml @@ -107,7 +107,6 @@ StorageSerializers: object syncRef: function syncRefs: function - templateRef: function throttledRef: function throttledWatch: function throttleFilter: function pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy