requestAnimationFrame(() => $refs.trigger?.focus()))"
@mousedown.prevent x-init="
(async () => {
const { computePosition, autoUpdate, offset, flip, shift, size } = window.FloatingUIDOM;const reference = $refs.trigger;
const floating = $el;// viewport-aware
Object.assign(floating.style, { position: 'fixed', left: '0px', top: '0px' });let cleanup;
const update = async () => {
const { x, y } = await computePosition(reference, floating, {
placement: 'bottom-start',
strategy: 'fixed',
middleware: [
offset(6),
flip({ fallbackPlacements: ['top-start'] }),
shift({ padding: 8 }),
size({
apply({ availableHeight, availableWidth, rects, elements }) {
// ✅ keep your height cap
const capH = Math.max(160, Math.floor(availableHeight));
elements.floating.style.setProperty('--combobox-max-h', capH + 'px');// ✅ NEW: ensure dropdown is at least as wide as the trigger
const refW = Math.round(rects.reference.width);
elements.floating.style.minWidth = refW + 'px';// (optional) prevent overflow on very narrow viewports
elements.floating.style.maxWidth = Math.floor(availableWidth) + 'px';
},
}),
],
});
Object.assign(floating.style, { left: x + 'px', top: y + 'px' });
};$watch('open', (o) => {
if (o) {
$nextTick(() => {
cleanup = autoUpdate(reference, floating, update, {
elementResize: true, // ✅ updates if the trigger resizes
ancestorScroll: true,
ancestorResize: true,
});
update();
});
} else {
cleanup && cleanup(); cleanup = null;
}
});$watch('query', () => { if (open) requestAnimationFrame(update) });
$watch('activeIndex', () => { if (open) requestAnimationFrame(update) });
})();
">
Sort options
{
const list = filtered();
const idx = list.findIndex(i => i.value === 'menu_order');
if (idx >= 0) activeIndex = idx;
})()"@mousedown.prevent="!false && selectValue('menu_order')"
class="data-[active=true]:bg-accent data-[active=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 hover:bg-accent"
>
Default sorting {
const list = filtered();
const idx = list.findIndex(i => i.value === 'popularity');
if (idx >= 0) activeIndex = idx;
})()"@mousedown.prevent="!false && selectValue('popularity')"
class="data-[active=true]:bg-accent data-[active=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 hover:bg-accent"
>
Sort by popularity {
const list = filtered();
const idx = list.findIndex(i => i.value === 'date');
if (idx >= 0) activeIndex = idx;
})()"@mousedown.prevent="!false && selectValue('date')"
class="data-[active=true]:bg-accent data-[active=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 hover:bg-accent"
>
Sort by latest {
const list = filtered();
const idx = list.findIndex(i => i.value === 'price');
if (idx >= 0) activeIndex = idx;
})()"@mousedown.prevent="!false && selectValue('price')"
class="data-[active=true]:bg-accent data-[active=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 hover:bg-accent"
>
Sort by price: low to high {
const list = filtered();
const idx = list.findIndex(i => i.value === 'price-desc');
if (idx >= 0) activeIndex = idx;
})()"@mousedown.prevent="!false && selectValue('price-desc')"
class="data-[active=true]:bg-accent data-[active=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 hover:bg-accent"
>
Sort by price: high to low
No results found