Skip to content

Commit

Permalink
fix(Select): fix select content animation (unovue#789)
Browse files Browse the repository at this point in the history 
* fix(select): fix select root element render

Select content root renders fragment. Transition can't be applied to fragment. Changed to div

* chore: remove classes
  • Loading branch information
@Chrtyaka
Chrtyaka authored Mar 27, 2024
1 parent c2e5c1c commit 82d5aef
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 56 deletions.
19 changes: 10 additions & 9 deletions packages/radix-vue/src/Select/SelectContent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface SelectContentProps extends SelectContentImplProps {
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import SelectContentImpl from './SelectContentImpl.vue'
import { injectSelectRootContext } from './SelectRoot.vue'
import { Presence } from '@/Presence'
Expand All @@ -40,20 +40,21 @@ onMounted(() => {
})
const presenceRef = ref<InstanceType<typeof Presence>>()
const renderPresence = computed(() => props.forceMount || rootContext.open.value)
</script>

<template>
<Presence ref="presenceRef" :present="forceMount || rootContext.open.value">
<Presence v-if="renderPresence" ref="presenceRef" :present="true">
<SelectContentImpl v-bind="{ ...forwarded, ...$attrs }">
<slot />
</SelectContentImpl>
</Presence>

<Teleport v-if="!presenceRef?.present && fragment" :to="fragment">
<SelectProvider :context="rootContext">
<div>
<div v-else-if="!presenceRef?.present && fragment">
<Teleport :to="fragment">
<SelectProvider :context="rootContext">
<slot />
</div>
</SelectProvider>
</Teleport>
</SelectProvider>
</Teleport>
</div>
</template>
108 changes: 61 additions & 47 deletions packages/radix-vue/src/Select/story/SelectDemo.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,61 +45,75 @@ const POSITION = ['item-aligned', 'popper'] as const
</SelectTrigger>

<SelectPortal>
<SelectContent
class="min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
:side-offset="5"
:position="position"
>
<SelectScrollUpButton
class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
<Transition>
<SelectContent
class="min-w-[160px] bg-white overflow-hidden rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]"
:side-offset="5"
:position="position"
>
<Icon icon="radix-icons:chevron-up" />
</SelectScrollUpButton>

<SelectViewport class="p-[5px]">
<SelectLabel
class="px-[25px] text-xs leading-[25px] text-mauve11"
>
Fruits
</SelectLabel>
<SelectGroup>
<SelectItemWrapper :options="options" />
</SelectGroup>
<SelectSeparator class="h-[1px] bg-violet6 m-[5px]" />
<SelectLabel
class="px-[25px] text-xs leading-[25px] text-mauve11"
<SelectScrollUpButton
class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
>
Vegetables
</SelectLabel>
<SelectGroup>
<SelectItem
v-for="(option, index) in vegetables"
:key="index"
class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
:value="option"
:disabled="option === 'Courgette'"
<Icon icon="radix-icons:chevron-up" />
</SelectScrollUpButton>

<SelectViewport class="p-[5px]">
<SelectLabel
class="px-[25px] text-xs leading-[25px] text-mauve11"
>
Fruits
</SelectLabel>
<SelectGroup>
<SelectItemWrapper :options="options" />
</SelectGroup>
<SelectSeparator class="h-[1px] bg-violet6 m-[5px]" />
<SelectLabel
class="px-[25px] text-xs leading-[25px] text-mauve11"
>
<SelectItemIndicator
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
Vegetables
</SelectLabel>
<SelectGroup>
<SelectItem
v-for="(option, index) in vegetables"
:key="index"
class="text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1"
:value="option"
:disabled="option === 'Courgette'"
>
<Icon icon="radix-icons:check" />
</SelectItemIndicator>
<SelectItemText>
{{ option }}
</SelectItemText>
</SelectItem>
</SelectGroup>
</SelectViewport>
<SelectItemIndicator
class="absolute left-0 w-[25px] inline-flex items-center justify-center"
>
<Icon icon="radix-icons:check" />
</SelectItemIndicator>
<SelectItemText>
{{ option }}
</SelectItemText>
</SelectItem>
</SelectGroup>
</SelectViewport>

<SelectScrollDownButton
class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
>
<Icon icon="radix-icons:chevron-down" />
</SelectScrollDownButton>
</SelectContent>
<SelectScrollDownButton
class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
>
<Icon icon="radix-icons:chevron-down" />
</SelectScrollDownButton>
</SelectContent>
</Transition>
</SelectPortal>
</SelectRoot>
</div>
</Variant>
</Story>
</template>

<style scoped>
.v-enter-active,
.v-leave-active {
transition: opacity .3s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

0 comments on commit 82d5aef

Please sign in to comment.