Skip to content

Commit 5cd4ba6

Browse files
teleskop150750teleskop150750
committed
feat(hooks): [useTemplateElRef] implements
1 parent 187a742 commit 5cd4ba6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+109
-72
lines changed

‎packages/vue-primitives/src/accordion/Accordion.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { AriaAttributes, Ref } from 'vue'
22
import { createCollection } from '../collection/index.ts'
3-
import { createContext } from '../hooks/createContext.ts'
3+
import { createContext } from '../hooks/index.ts'
44
import type { PrimitiveProps } from '../primitive/index.ts'
55
import type { Direction } from '../direction/Direction.ts'
66

‎packages/vue-primitives/src/accordion/Accordion.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<script setup lang="ts" generic="T extends AccordionType">
22
import { computed, shallowRef, toRef, useAttrs } from 'vue'
33
import { useDirection } from '../direction/Direction.ts'
4-
import { useControllableState } from '../hooks/useControllableState.ts'
4+
import { useControllableState, useId, useTemplateElRef } from '../hooks/index.ts'
55
import { Primitive } from '../primitive/index.ts'
66
import { composeEventHandlers } from '../utils/composeEventHandlers.ts'
77
import { arrayify } from '../utils/array.ts'
8-
import { useId } from '../hooks/useId.ts'
98
import { isFunction } from '../utils/is.ts'
109
import { ACCORDION_KEYS, type AccordionEmits, type AccordionProps, type AccordionType, Collection, provideAccordionContext, useCollection } from './Accordion.ts'
1110
@@ -27,6 +26,7 @@ const emit = defineEmits<AccordionEmits<T>>()
2726
const attrs = useAttrs()
2827
2928
const elRef = shallowRef<HTMLElement>()
29+
const setElRef = useTemplateElRef(elRef)
3030
3131
const direction = useDirection(() => props.dir)
3232
const value = useControllableState(props, v => emit('update:value', v as Value), 'value', props.defaultValue)
@@ -146,7 +146,7 @@ provideAccordionContext({
146146

147147
<template>
148148
<Primitive
149-
:ref="(el: any) => elRef = el?.$el"
149+
:ref="setElRef"
150150
:as="as"
151151
:as-child="asChild"
152152
v-bind="{

‎packages/vue-primitives/src/accordion/AccordionItem.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Ref } from 'vue'
2-
import { createContext } from '../hooks/createContext.ts'
2+
import { createContext } from '../hooks/index.ts'
33
import type { PrimitiveProps } from '../primitive/index.ts'
44

55
export interface AccordionItemProps extends PrimitiveProps {

‎packages/vue-primitives/src/accordion/AccordionTrigger.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { shallowRef } from 'vue'
33
import { CollapsibleTrigger } from '../collapsible/index.ts'
44
import { ITEM_DATA_ATTR } from '../collection/Collection.ts'
5+
import { useTemplateElRef } from '../hooks/index.ts'
56
import { Collection, useAccordionContext } from './Accordion.ts'
67
import type { AccordionTriggerProps } from './AccordionTrigger.ts'
78
import { useAccordionItemContext } from './AccordionItem.ts'
@@ -12,6 +13,7 @@ defineOptions({
1213
1314
defineProps<AccordionTriggerProps>()
1415
const elRef = shallowRef<HTMLButtonElement>()
16+
const setElRef = useTemplateElRef(elRef)
1517
1618
Collection.useCollectionItem(elRef, undefined)
1719
@@ -22,7 +24,7 @@ const itemContext = useAccordionItemContext()
2224
<template>
2325
<CollapsibleTrigger
2426
:id="itemContext.triggerId"
25-
:ref="(el: any) => elRef = el?.$el"
27+
:ref="setElRef"
2628
:as="as"
2729
:as-child="asChild"
2830
:aria-disabled="(itemContext.open.value && !accordionContext.collapsible) || undefined"

‎packages/vue-primitives/src/aspect-ratio/AspectRatio.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup lang="ts">
22
import { shallowRef } from 'vue'
33
import { Primitive } from '../primitive/index.ts'
4+
import { useTemplateElRef } from '../hooks/index.ts'
45
import type { AspectRatioProps } from './AspectRatio.ts'
56
67
defineOptions({
@@ -13,6 +14,7 @@ withDefaults(defineProps<AspectRatioProps>(), {
1314
})
1415
1516
const elRef = shallowRef<HTMLElement>()
17+
const setElRef = useTemplateElRef(elRef)
1618
1719
defineExpose({
1820
$el: elRef,
@@ -31,7 +33,7 @@ defineExpose({
3133
data-radix-aspect-ratio-wrapper=""
3234
>
3335
<Primitive
34-
:ref="(el: any) => elRef = el?.$el"
36+
:ref="setElRef"
3537
:as="as"
3638
:as-child="asChild"
3739
v-bind="$attrs"

‎packages/vue-primitives/src/avatar/Avatar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Ref } from 'vue'
22
import type { PrimitiveProps } from '../primitive/index.ts'
3-
import { createContext } from '../hooks/createContext.ts'
3+
import { createContext } from '../hooks/index.ts'
44

55
export interface AvatarProps extends PrimitiveProps { }
66

‎packages/vue-primitives/src/checkbox/BubbleInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { shallowRef, watch } from 'vue'
3-
import { useSize } from '../hooks/useSize.ts'
3+
import { useSize } from '../hooks/index.ts'
44
import type { BubbleInputProps } from './BubbleInput.ts'
55
import { isIndeterminate } from './utils.ts'
66

‎packages/vue-primitives/src/checkbox/Checkbox.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Ref } from 'vue'
2-
import { createContext } from '../hooks/createContext.ts'
2+
import { createContext } from '../hooks/index.ts'
33
import type { PrimitiveProps } from '../primitive/index.ts'
44

55
export interface CheckboxProps extends PrimitiveProps {

‎packages/vue-primitives/src/checkbox/Checkbox.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
import { computed, shallowRef, toRef, useAttrs, watchEffect } from 'vue'
3-
import { useControllableState } from '../hooks/useControllableState.ts'
3+
import { useControllableState, useTemplateElRef } from '../hooks/index.ts'
44
import { Primitive } from '../primitive/index.ts'
55
import { composeEventHandlers } from '../utils/composeEventHandlers.ts'
66
import { isFunction } from '../utils/is.ts'
@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
2121
const emit = defineEmits<CheckboxEmits>()
2222
const attrs = useAttrs()
2323
const elRef = shallowRef<HTMLButtonElement>()
24+
const setElRef = useTemplateElRef(elRef)
2425
2526
const hasConsumerStoppedPropagation = shallowRef(false)
2627
// We set this to true by default so that events bubble to forms without JS (SSR)
@@ -87,7 +88,7 @@ defineExpose({
8788

8889
<template>
8990
<Primitive
90-
:ref="(el: any) => elRef = el?.$el"
91+
:ref="setElRef"
9192
:as="as"
9293
:as-child="asChild"
9394
type="button"

‎packages/vue-primitives/src/checkbox/CheckboxIndicator.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { shallowRef } from 'vue'
33
import { usePresence } from '../presence/index.ts'
44
import { Primitive } from '../primitive/index.ts'
5+
import { useTemplateElRef } from '../hooks/index.ts'
56
import { useCheckboxContext } from './Checkbox.ts'
67
import type { CheckboxIndicatorProps } from './CheckboxIndicator.ts'
78
import { getState, isIndeterminate } from './utils.ts'
@@ -14,6 +15,7 @@ const props = withDefaults(defineProps<CheckboxIndicatorProps>(), {
1415
as: 'span',
1516
})
1617
const elRef = shallowRef<HTMLElement>()
18+
const setElRef = useTemplateElRef(elRef)
1719
1820
const context = useCheckboxContext()
1921
@@ -23,7 +25,7 @@ const isPresent = usePresence(elRef, () => props.forceMount || isIndeterminate(c
2325
<template>
2426
<Primitive
2527
v-if="isPresent"
26-
:ref="(el: any) => elRef = el?.$el"
28+
:ref="setElRef"
2729
:as="as"
2830
:as-child="asChild"
2931
:data-state="getState(context.state.value)"

0 commit comments

Comments
 (0)