Skip to content

Commit

Permalink
fix(search): use fixed strategy for floating selects
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlejandroAkbal
AlejandroAkbal committed Nov 16, 2023
1 parent c27d389 commit 233306c
Showing 1 changed file with 53 additions and 55 deletions.
108 changes: 53 additions & 55 deletions components/pages/posts/navigation/search/SearchSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,69 +30,67 @@
>
<ListboxLabel class="sr-only">Change options</ListboxLabel>

<div class="relative">
<Float
:offset="8"
leave="transition ease-in duration-100"
leave-from="opacity-100"
leave-to="opacity-0"
placement="bottom-end"
portal
tailwindcss-origin-class
>
<!-- Button -->
<div class="inline-flex divide-x divide-base-0/20 rounded-md ring-1 ring-base-0/20">
<!-- Left side -->
<div class="inline-flex items-center gap-x-1.5 rounded-l-md px-2 py-1 text-base-content">
<component
:is="icon"
class="-ml-0.5 h-5 w-5"
/>
<Float
:offset="8"
leave="transition ease-in duration-100"
leave-from="opacity-100"
leave-to="opacity-0"
placement="bottom-end"
strategy="fixed"
tailwindcss-origin-class
>
<!-- Button -->
<div class="inline-flex divide-x divide-base-0/20 rounded-md ring-1 ring-base-0/20">
<!-- Left side -->
<div class="inline-flex items-center gap-x-1.5 rounded-l-md px-2 py-1 text-base-content">
<component
:is="icon"
class="-ml-0.5 h-5 w-5"
/>

<span class="whitespace-nowrap text-sm font-medium">{{ modelValue.title }}</span>
</div>
<span class="whitespace-nowrap text-sm font-medium">{{ modelValue.title }}</span>
</div>

<!-- Right side -->
<ListboxButton
ref="trigger"
class="focus-visible:focus-outline-util hover:hover-text-util hover:hover-bg-util inline-flex items-center rounded-l-none rounded-r-md px-2 py-1"
>
<span class="sr-only">Change published status</span>
<!-- Right side -->
<ListboxButton
ref="trigger"
class="focus-visible:focus-outline-util hover:hover-text-util hover:hover-bg-util inline-flex items-center rounded-l-none rounded-r-md px-2 py-1"
>
<span class="sr-only">Change published status</span>

<ChevronDownIcon class="-ml-0.5 h-5 w-5" />
</ListboxButton>
</div>
<ChevronDownIcon class="-ml-0.5 h-5 w-5" />
</ListboxButton>
</div>

<ListboxOptions
class="w-44 divide-y divide-base-0/20 overflow-hidden rounded-md bg-base-1000 ring-1 ring-inset ring-base-0/20 focus:outline-none"
<ListboxOptions
class="w-44 divide-y divide-base-0/20 overflow-hidden rounded-md bg-base-1000 ring-1 ring-inset ring-base-0/20 focus:outline-none"
>
<ListboxOption
v-for="option in options"
:key="option.title"
v-slot="{ active, selected }"
:value="option"
>
<ListboxOption
v-for="option in options"
:key="option.title"
v-slot="{ active, selected }"
:value="option"
<div
:class="[active ? 'bg-base-0/20 text-base-content-highlight' : 'text-base-content']"
class="cursor-default select-none px-4 py-2.5 text-sm"
>
<div
:class="[active ? 'bg-base-0/20 text-base-content-highlight' : 'text-base-content']"
class="cursor-default select-none px-4 py-2.5 text-sm"
>
<div class="flex flex-col">
<div class="flex justify-between">
<p :class="selected ? 'font-medium' : 'font-normal'">{{ option.title }}</p>
<div class="flex flex-col">
<div class="flex justify-between">
<p :class="selected ? 'font-medium' : 'font-normal'">{{ option.title }}</p>

<!-- Check icon -->
<span
v-if="selected"
:class="active ? 'text-base-content-highlight' : 'text-base-content'"
>
<CheckIcon class="h-5 w-5" />
</span>
</div>
<!-- Check icon -->
<span
v-if="selected"
:class="active ? 'text-base-content-highlight' : 'text-base-content'"
>
<CheckIcon class="h-5 w-5" />
</span>
</div>
</div>
</ListboxOption>
</ListboxOptions>
</Float>
</div>
</div>
</ListboxOption>
</ListboxOptions>
</Float>
</Listbox>
</template>

0 comments on commit 233306c

Please sign in to comment.