feat: 添加可定制的下拉选择组件
This commit is contained in:
seahi committed
1 parent
caef609fc8
commit
bbbc5c07a2
1 file changed
+267
@@ -0,0 +1,267 @@
|
||||
<script lang="ts">
|
||||
type SelectValue = string | number;
|
||||
|
||||
type SelectOption = {
|
||||
value: SelectValue;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
options: SelectOption[];
|
||||
value?: SelectValue;
|
||||
emptyLabel?: string;
|
||||
};
|
||||
|
||||
let {
|
||||
name,
|
||||
label,
|
||||
options,
|
||||
value = $bindable<SelectValue>(''),
|
||||
emptyLabel = '-- 无 --'
|
||||
}: Props = $props();
|
||||
|
||||
let isOpen = $state(false);
|
||||
let triggerElement = $state<HTMLButtonElement>();
|
||||
let menuElement = $state<HTMLDivElement>();
|
||||
|
||||
let selectedOption = $derived(options.find((option) => String(option.value) === String(value)));
|
||||
let selectedLabel = $derived(selectedOption?.label ?? emptyLabel);
|
||||
|
||||
function menuOptions() {
|
||||
return Array.from(menuElement?.querySelectorAll<HTMLButtonElement>('[role="option"]') ?? []);
|
||||
}
|
||||
|
||||
function focusOption(preferLast = false) {
|
||||
requestAnimationFrame(() => {
|
||||
const items = menuOptions();
|
||||
const selectedIndex = items.findIndex(
|
||||
(item) => item.getAttribute('aria-selected') === 'true'
|
||||
);
|
||||
items[selectedIndex >= 0 ? selectedIndex : preferLast ? items.length - 1 : 0]?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function openMenu(preferLast = false) {
|
||||
isOpen = true;
|
||||
focusOption(preferLast);
|
||||
}
|
||||
|
||||
function closeMenu(restoreFocus = false) {
|
||||
isOpen = false;
|
||||
if (restoreFocus) triggerElement?.focus();
|
||||
}
|
||||
|
||||
function selectOption(nextValue: SelectValue) {
|
||||
value = nextValue;
|
||||
closeMenu(true);
|
||||
}
|
||||
|
||||
function handleTriggerKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
openMenu(event.key === 'ArrowUp');
|
||||
}
|
||||
}
|
||||
|
||||
function handleMenuKeydown(event: KeyboardEvent) {
|
||||
const items = menuOptions();
|
||||
const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
closeMenu(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Tab') {
|
||||
closeMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
let nextIndex: number | undefined;
|
||||
if (event.key === 'ArrowDown') nextIndex = (currentIndex + 1) % items.length;
|
||||
if (event.key === 'ArrowUp') nextIndex = (currentIndex - 1 + items.length) % items.length;
|
||||
if (event.key === 'Home') nextIndex = 0;
|
||||
if (event.key === 'End') nextIndex = items.length - 1;
|
||||
|
||||
if (nextIndex !== undefined) {
|
||||
event.preventDefault();
|
||||
items[nextIndex]?.focus();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="select-dropdown">
|
||||
<input type="hidden" {name} {value} />
|
||||
<button
|
||||
type="button"
|
||||
class="select-dropdown-trigger"
|
||||
class:open={isOpen}
|
||||
bind:this={triggerElement}
|
||||
aria-label={label}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={`${name}-menu`}
|
||||
onclick={() => (isOpen ? closeMenu() : openMenu())}
|
||||
onkeydown={handleTriggerKeydown}
|
||||
>
|
||||
<span>{selectedLabel}</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{#if isOpen}
|
||||
<button
|
||||
type="button"
|
||||
class="select-dropdown-overlay"
|
||||
aria-label={`关闭${label}菜单`}
|
||||
tabindex="-1"
|
||||
onclick={() => closeMenu()}
|
||||
></button>
|
||||
<div
|
||||
class="select-dropdown-menu"
|
||||
id={`${name}-menu`}
|
||||
role="listbox"
|
||||
aria-label={label}
|
||||
tabindex="-1"
|
||||
bind:this={menuElement}
|
||||
onkeydown={handleMenuKeydown}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="select-dropdown-item"
|
||||
class:selected={value === ''}
|
||||
role="option"
|
||||
aria-selected={value === ''}
|
||||
onclick={() => selectOption('')}
|
||||
>
|
||||
{emptyLabel}
|
||||
</button>
|
||||
{#each options as option (option.value)}
|
||||
<button
|
||||
type="button"
|
||||
class="select-dropdown-item"
|
||||
class:selected={String(option.value) === String(value)}
|
||||
role="option"
|
||||
aria-selected={String(option.value) === String(value)}
|
||||
onclick={() => selectOption(option.value)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.select-dropdown {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-dropdown-trigger {
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
border: none;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.select-dropdown-trigger:hover,
|
||||
.select-dropdown-trigger:focus-visible,
|
||||
.select-dropdown-trigger.open {
|
||||
outline: none;
|
||||
border-bottom-color: var(--accent-color, #419b38);
|
||||
}
|
||||
|
||||
.select-dropdown-trigger svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin-left: 12px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.8;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.select-dropdown-trigger.open svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.select-dropdown-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 49;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.select-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 51;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 240px;
|
||||
margin-top: 4px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--text-color);
|
||||
background: var(--bg-color, #ffffff);
|
||||
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.select-dropdown-item {
|
||||
flex: 0 0 auto;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
font-family: inherit;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.select-dropdown-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.select-dropdown-item:hover,
|
||||
.select-dropdown-item:focus-visible {
|
||||
outline: none;
|
||||
background: var(--text-color);
|
||||
color: var(--bg-color, #ffffff);
|
||||
}
|
||||
|
||||
.select-dropdown-item.selected:not(:hover):not(:focus-visible) {
|
||||
color: var(--accent-color, #419b38);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user