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