Skip to content

Commit 13b78f7

Browse files
teleskop150750teleskop150750
committed
feat: [ScrollArea] implements
1 parent 5cf7a0c commit 13b78f7

Some content is hidden

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

61 files changed

+1911
-132
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ Enter the component you want most in the components, leave the emojis and follow
4949
| Popover | 🚧 |
5050
| [Progress](https://vue-primitives.netlify.app/?path=/story/components-progress--styled) | ✓ |
5151
| [RadioGroup](https://vue-primitives.netlify.app/?path=/story/components-radiogroup--styled) | ✓ |
52-
| ScrollArea | 🚧 |
52+
| [ScrollArea](https://vue-primitives.netlify.app/?path=/story/components-scrollarea--basic) | ✓ |
5353
| Select | 🚧 |
5454
| [Separator](https://vue-primitives.netlify.app/?path=/story/components-separator--styled) | ✓ |
5555
| [Slider](https://vue-primitives.netlify.app/?path=/story/components-slider--styled) | ✓ |

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts" generic="T extends AccordionType">
22
import { computed, shallowRef, useAttrs } from 'vue'
33
import { useDirection } from '../direction/Direction.ts'
4-
import { useControllableState, useId, useTemplateElRef } from '../hooks/index.ts'
4+
import { useControllableState, useId } from '../hooks/index.ts'
55
import { Primitive } from '../primitive/index.ts'
6-
import { composeEventHandlers } from '../utils/composeEventHandlers.ts'
6+
import { composeEventHandlers, forwardRef } from '../utils/vue.ts'
77
import { arrayify } from '../utils/array.ts'
88
import { isFunction } from '../utils/is.ts'
99
import { ACCORDION_KEYS, type AccordionEmits, type AccordionProps, type AccordionType, Collection, provideAccordionContext, useCollection } from './Accordion.ts'
@@ -25,14 +25,14 @@ const props = withDefaults(defineProps<AccordionProps<T>>(), {
2525
const emit = defineEmits<AccordionEmits<T>>()
2626
const attrs = useAttrs()
2727
28-
const elRef = shallowRef<HTMLElement>()
29-
const setElRef = useTemplateElRef(elRef)
28+
const $el = shallowRef<HTMLElement>()
29+
const forwardedRef = forwardRef($el)
3030
3131
const direction = useDirection(() => props.dir)
3232
const value = useControllableState(props, v => emit('update:value', v as Value), 'value', props.defaultValue)
3333
const TYPE_SINGLE = 'single' as const satisfies AccordionType
3434
35-
const collectionContext = Collection.provideCollectionContext(elRef)
35+
const collectionContext = Collection.provideCollectionContext($el)
3636
const getItems = useCollection(collectionContext)
3737
const handleKeydown = composeEventHandlers<KeyboardEvent>((event) => {
3838
isFunction(attrs.onKeydown) && attrs.onKeydown(event)
@@ -148,7 +148,7 @@ provideAccordionContext({
148148

149149
<template>
150150
<Primitive
151-
:ref="setElRef"
151+
:ref="forwardedRef"
152152
:as="as"
153153
:as-child="asChild"
154154
v-bind="{

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +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'
5+
import { forwardRef } from '../utils/vue.ts'
66
import { Collection, useAccordionContext } from './Accordion.ts'
77
import type { AccordionTriggerProps } from './AccordionTrigger.ts'
88
import { useAccordionItemContext } from './AccordionItem.ts'
@@ -12,10 +12,10 @@ defineOptions({
1212
})
1313
1414
defineProps<AccordionTriggerProps>()
15-
const elRef = shallowRef<HTMLButtonElement>()
16-
const setElRef = useTemplateElRef(elRef)
15+
const $el = shallowRef<HTMLButtonElement>()
16+
const forwardedRef = forwardRef($el)
1717
18-
Collection.useCollectionItem(elRef, undefined)
18+
Collection.useCollectionItem($el, undefined)
1919
2020
const accordionContext = useAccordionContext()
2121
const itemContext = useAccordionItemContext()
@@ -24,7 +24,7 @@ const itemContext = useAccordionItemContext()
2424
<template>
2525
<CollapsibleTrigger
2626
:id="itemContext.triggerId"
27-
:ref="setElRef"
27+
:ref="forwardedRef"
2828
:as="as"
2929
:as-child="asChild"
3030
:aria-disabled="(itemContext.open.value && !accordionContext.collapsible) || undefined"

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +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'
4+
import { forwardRef } from '../utils/vue.ts'
55
import type { AspectRatioProps } from './AspectRatio.ts'
66
77
defineOptions({
@@ -13,11 +13,11 @@ withDefaults(defineProps<AspectRatioProps>(), {
1313
ratio: 1,
1414
})
1515
16-
const elRef = shallowRef<HTMLElement>()
17-
const setElRef = useTemplateElRef(elRef)
16+
const $el = shallowRef<HTMLElement>()
17+
const forwardedRef = forwardRef($el)
1818
1919
defineExpose({
20-
$el: elRef,
20+
$el,
2121
})
2222
</script>
2323

@@ -33,7 +33,7 @@ defineExpose({
3333
data-radix-aspect-ratio-wrapper=""
3434
>
3535
<Primitive
36-
:ref="setElRef"
36+
:ref="forwardedRef"
3737
:as="as"
3838
:as-child="asChild"
3939
v-bind="$attrs"

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
22
import { computed, shallowRef, useAttrs, watchEffect } from 'vue'
3-
import { useControllableState, useTemplateElRef } from '../hooks/index.ts'
3+
import { useControllableState } from '../hooks/index.ts'
44
import { Primitive } from '../primitive/index.ts'
5-
import { composeEventHandlers } from '../utils/composeEventHandlers.ts'
5+
import { composeEventHandlers, forwardRef } from '../utils/vue.ts'
66
import { isFunction } from '../utils/is.ts'
77
import { type CheckboxEmits, type CheckboxProps, provideCheckboxContext } from './Checkbox.ts'
88
import { getState, isIndeterminate } from './utils.ts'
@@ -20,18 +20,18 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
2020
})
2121
const emit = defineEmits<CheckboxEmits>()
2222
const attrs = useAttrs()
23-
const elRef = shallowRef<HTMLButtonElement>()
24-
const setElRef = useTemplateElRef(elRef)
23+
const $el = shallowRef<HTMLButtonElement>()
24+
const forwardedRef = forwardRef($el)
2525
2626
const hasConsumerStoppedPropagation = shallowRef(false)
2727
// We set this to true by default so that events bubble to forms without JS (SSR)
28-
const isFormControl = computed(() => elRef.value ? Boolean(elRef.value.closest('form')) : true)
28+
const isFormControl = computed(() => $el.value ? Boolean($el.value.closest('form')) : true)
2929
const checked = useControllableState(props, v => emit('update:checked', v), 'checked', props.defaultChecked)
3030
3131
const initialCheckedStateRef = checked.value
3232
3333
watchEffect((onCleanup) => {
34-
const form = elRef.value?.form
34+
const form = $el.value?.form
3535
if (form) {
3636
const reset = () => {
3737
checked.value = initialCheckedStateRef
@@ -84,13 +84,13 @@ provideCheckboxContext({
8484
})
8585
8686
defineExpose({
87-
$el: elRef,
87+
$el,
8888
})
8989
</script>
9090

9191
<template>
9292
<Primitive
93-
:ref="setElRef"
93+
:ref="forwardedRef"
9494
:as="as"
9595
:as-child="asChild"
9696
type="button"
@@ -112,7 +112,7 @@ defineExpose({
112112

113113
<BubbleInput
114114
v-if="isFormControl"
115-
:control="elRef"
115+
:control="$el"
116116
:bubbles="!hasConsumerStoppedPropagation"
117117
:name="name"
118118
:value="value"

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +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'
5+
import { forwardRef } from '../utils/vue.ts'
66
import { useCheckboxContext } from './Checkbox.ts'
77
import type { CheckboxIndicatorProps } from './CheckboxIndicator.ts'
88
import { getState, isIndeterminate } from './utils.ts'
@@ -14,18 +14,18 @@ defineOptions({
1414
const props = withDefaults(defineProps<CheckboxIndicatorProps>(), {
1515
as: 'span',
1616
})
17-
const elRef = shallowRef<HTMLElement>()
18-
const setElRef = useTemplateElRef(elRef)
17+
const $el = shallowRef<HTMLElement>()
18+
const forwardedRef = forwardRef($el)
1919
2020
const context = useCheckboxContext()
2121
22-
const isPresent = usePresence(elRef, () => props.forceMount || isIndeterminate(context.state.value) || context.state.value === true)
22+
const isPresent = usePresence($el, () => props.forceMount || isIndeterminate(context.state.value) || context.state.value === true)
2323
</script>
2424

2525
<template>
2626
<Primitive
2727
v-if="isPresent"
28-
:ref="setElRef"
28+
:ref="forwardedRef"
2929
:as="as"
3030
:as-child="asChild"
3131
:data-state="getState(context.state.value)"

‎packages/vue-primitives/src/collapsible/CollapsibleContent.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { computed, nextTick, onMounted, shallowRef } from 'vue'
33
import { Primitive } from '../primitive/index.ts'
44
import { usePresence } from '../presence/usePresence.ts'
5-
import { useTemplateElRef } from '../hooks/index.ts'
5+
import { forwardRef } from '../utils/vue.ts'
66
import type { CollapsibleContentProps } from './CollapsibleContent.ts'
77
import { useCollapsibleContext } from './Collapsible.ts'
88
import { getState } from './utils.ts'
@@ -12,15 +12,15 @@ defineOptions({
1212
})
1313
1414
const props = defineProps<CollapsibleContentProps>()
15-
const elRef = shallowRef<HTMLElement>()
16-
const setElRef = useTemplateElRef(elRef)
15+
const $el = shallowRef<HTMLElement>()
16+
const forwardedRef = forwardRef($el)
1717
1818
const context = useCollapsibleContext()
1919
2020
let originalStyles: Pick<CSSStyleDeclaration, 'transitionDuration' | 'animationName'>
2121
22-
const isPresent = usePresence(elRef, () => props.forceMount || context.open.value, () => {
23-
const node = elRef.value
22+
const isPresent = usePresence($el, () => props.forceMount || context.open.value, () => {
23+
const node = $el.value
2424
if (!node)
2525
return
2626
@@ -60,7 +60,7 @@ onMounted(async () => {
6060
if (!isOpen.value)
6161
return
6262
63-
const node = elRef.value
63+
const node = $el.value
6464
if (!node)
6565
return
6666
@@ -82,7 +82,7 @@ onMounted(async () => {
8282
<template>
8383
<Primitive
8484
:id="context.contentId"
85-
:ref="setElRef"
85+
:ref="forwardedRef"
8686
:as="as"
8787
:as-child="asChild"
8888
:data-state="getState(context.open.value)"

‎packages/vue-primitives/src/collapsible/CollapsibleTrigger.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { useAttrs } from 'vue'
33
import { Primitive } from '../primitive/index.ts'
4-
import { composeEventHandlers } from '../utils/composeEventHandlers.ts'
4+
import { composeEventHandlers } from '../utils/vue.ts'
55
import { isFunction } from '../utils/is.ts'
66
import type { CollapsibleTriggerProps } from './CollapsibleTrigger.ts'
77
import { useCollapsibleContext } from './Collapsible.ts'

‎packages/vue-primitives/src/hooks/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,3 @@ export { useControllableState } from './useControllableState.ts'
33
export { useId } from './useId.ts'
44
export { useSize } from './useSize.ts'
55
export { useStateMachine } from './useStateMachine.ts'
6-
export { useTemplateElRef } from './useTemplateElRef.ts'

‎packages/vue-primitives/src/hooks/useTemplateElRef.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

0 commit comments

Comments
 (0)