Skip to content

Commit

Permalink
SortSelect using radix-vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@eronisko
eronisko committed Apr 26, 2024
1 parent a08bb81 commit c4c065a
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 101 deletions.
2 changes: 2 additions & 0 deletions resources/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import CatalogNewArtworkImageController from './components/catalog-new/ArtworkIm
import CatalogNewNumberFormatter from './components/catalog-new/NumberFormatter.vue'
import CatalogNewAuthorFormatter from './components/catalog-new/AuthorFormatter.vue'
import CatalogNewPopover from './components/catalog-new/Popover.vue'
import CatalogNewSortSelect from './components/catalog-new/SortSelect.vue'
import Flickity from './components/Flickity.vue'
import HomeShuffleOrchestrator from './components/home/ShuffleOrchestrator.vue'
import HomeTransitionInPlace from './components/home/TransitionInPlace.vue'
Expand Down Expand Up @@ -103,6 +104,7 @@ createApp({
.component('catalog.number-formatter', CatalogNewNumberFormatter)
.component('catalog.author-formatter', CatalogNewAuthorFormatter)
.component('catalog.popover', CatalogNewPopover)
.component('catalog.sort-select', CatalogNewSortSelect)
.component('flickity', Flickity)
.component('home.shuffle-orchestrator', HomeShuffleOrchestrator)
.component('home.transition-in-place', HomeTransitionInPlace)
Expand Down
88 changes: 88 additions & 0 deletions resources/js/components/catalog-new/SortSelect.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<script setup>
import { ref, computed } from 'vue'
import { trans } from 'laravel-vue-i18n'
import {
SelectRoot,
SelectTrigger,
SelectPortal,
SelectContent,
SelectViewport,
SelectItem,
SelectItemText,
} from 'radix-vue'
import CaretUpIcon from './icons/CaretUp.vue'
const props = defineProps({
defaultValue: String,
})
const value = ref(props.defaultValue ?? 'relevance')
const emit = defineEmits(['change'])
const options = [
{ value: 'created_at', label: trans('sortable.created_at') },
{ value: 'title', label: trans('sortable.title') },
{ value: 'author', label: trans('sortable.author') },
{ value: 'date_earliest', label: trans('sortable.oldest') },
{ value: 'date_latest', label: trans('sortable.newest') },
{ value: 'view_count', label: trans('sortable.view_count') },
{ value: 'random', label: trans('sortable.random') },
{ value: 'updated_at', label: trans('sortable.updated_at') },
{ value: 'relevance', label: trans('sortable.relevance') },
]
const label = computed(
() => options.find((option) => option.value === value.value)?.label ?? value.value
)
</script>
<template>
<SelectRoot v-model="value" @update:modelValue="emit('change', value)">
<SelectTrigger
class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4 tw-outline-none"
>
<transition
enter-from-class="tw-opacity-0"
leave-to-class="tw-opacity-0"
enter-active-class="tw-duration-50 tw-transition"
leave-active-class="tw-duration-50 tw-transition"
mode="out-in"
>
<div class="tw-flex tw-items-center tw-space-x-1" :key="value">
<span>
{{ label }}
</span>
<CaretUpIcon class="tw-h-4 tw-w-4 tw-rotate-180" />
</div>
</transition>
</SelectTrigger>
<SelectPortal>
<div class="tailwind-rules">
<transition
enter-from-class="tw-opacity-0"
leave-to-class="tw-opacity-0"
enter-active-class="tw-transition-opacity tw-duration-100"
leave-active-class="tw-transition-opacity tw-duration-100"
>
<SelectContent
position="popper"
class="tw-w-80 tw-border-2 tw-border-gray-800 tw-bg-white tw-p-4"
>
<SelectViewport>
<SelectItem
v-for="option in options"
v-show="option.value !== value"
:key="option.value"
:value="option.value"
class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200 tw-outline-none"
>
<SelectItemText>{{ option.label }}</SelectItemText>
</SelectItem>
</SelectViewport>
</SelectContent>
</transition>
</div>
</SelectPortal>
</SelectRoot>
</template>
107 changes: 6 additions & 101 deletions resources/views/frontend/catalog-new/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -872,108 +872,13 @@ class="tw-capitalize">{{ trans_choice('item.filter.displaying', 5) }}</span>
<catalog.number-formatter v-bind:value="artworks_total">
</catalog.number-formatter>
</span>
{{ trans_choice('item.filter.artworks_sorted_by', 5) }}</span>
<span class="tw-font-semibold">
<div class="tw-z-10 tw-inline-block">
<filter-new-popover.group-controller>
<filter-popover-controller name="sort">
<template #button="pc">
<button id="button-sort"
class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4"
v-on:click="pc.togglePopover('sort')">
<transition enter-from-class="tw-opacity-0"
leave-to-class="tw-opacity-0"
enter-active-class="tw-duration-50 tw-transition"
leave-active-class="tw-duration-50 tw-transition"
mode="out-in">
<span
v-if="query.sort === 'created_at' ">{{ trans('sortable.created_at') }}</span>
<span
v-else-if="query.sort === 'title' ">{{ trans('sortable.title') }}</span>
<span
v-else-if="query.sort === 'author' ">{{ trans('sortable.author') }}</span>
<span
v-else-if="query.sort === 'date_earliest' ">{{ trans('sortable.oldest') }}</span>
<span
v-else-if="query.sort === 'date_latest' ">{{ trans('sortable.newest') }}</span>
<span
v-else-if="query.sort === 'view_count' ">{{ trans('sortable.view_count') }}</span>
<span
v-else-if="query.sort === 'random' ">{{ trans('sortable.random') }}</span>
<span
v-else-if="query.sort === 'updated_at'">{{ trans('sortable.updated_at') }}</span>
<span
v-else>{{ trans('sortable.relevance') }}</span>
</transition>
<x-icons.caret-down
class="tw-inline tw-h-4 tw-w-4 tw-fill-current">
</x-icons.caret-down>
</button>

</template>
<template #body="pc">
<transition enter-from-class="tw-opacity-0"
leave-to-class="tw-opacity-0"
enter-active-class="tw-transition tw-duration-100"
leave-active-class="tw-transition tw-duration-100">
<div v-if="pc.isOpen"
v-click-away="pc.closeOpenedPopover"
class="tw-w-80 tw-border-2 tw-border-gray-800 tw-bg-white tw-p-4">

<ul>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange('created_at');pc.closeOpenedPopover()"
v-if="query.sort !== 'created_at'">
{{ trans('sortable.created_at') }}
</li>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange('title');pc.closeOpenedPopover()"
v-if="query.sort !== 'title'">
{{ trans('sortable.title') }}
</li>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange('author');pc.closeOpenedPopover()"
v-if="query.sort !== 'author'">
{{ trans('sortable.author') }}
</li>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange('date_earliest');pc.closeOpenedPopover()"
v-if="query.sort !== 'date_earliest'">
{{ trans('sortable.oldest') }}
</li>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange('date_latest');pc.closeOpenedPopover()"
v-if="query.sort !== 'date_latest'">
{{ trans('sortable.newest') }}
</li>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange('view_count');pc.closeOpenedPopover()"
v-if="query.sort !== 'view_count'">
{{ trans('sortable.view_count') }}
</li>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange('random');pc.closeOpenedPopover()"
v-if="query.sort !== 'random'">
{{ trans('sortable.random') }}
</li>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange('updated_at');pc.closeOpenedPopover()"
v-if="query.sort !== 'updated_at'">
{{ trans('sortable.updated_at') }}
</li>
<li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
v-on:click="handleSortChange(null);pc.closeOpenedPopover()"
v-if="query.sort">
{{ trans('sortable.relevance') }}
</li>
</ul>
</div>
</transition>
</template>
</filter-popover-controller>
</filter-new-popover.group-controller>
</div>
{{ trans_choice('item.filter.artworks_sorted_by', 5) }}
</span>

<catalog.sort-select
v-on:change="handleSortChange"
v-bind:default-value="query.sort">
</catalog.sort-select>
<span>
{{ utrans('item.filter.try_also') }}
<button v-on:click="handleSelectRandomly"
Expand Down

0 comments on commit c4c065a

Please sign in to comment.