mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
6a0e8735d7
Backport of #10397 to core/1.42 **⚠️ Significant conflict resolution:** This PR migrates SingleSelect and MultiSelect from PrimeVue to Reka UI components. All conflicts were resolved by accepting the incoming (PR) version. The select.variants.ts and test files are new additions. Resolved conflicts: - MultiSelect.vue: 6 content conflicts (accept incoming Reka UI version) - SingleSelect.vue: 2 content conflicts (accept incoming Reka UI version) - MultiSelect.test.ts: modify/delete (kept new test file) Co-authored-by: Jin Yi <jin12cc@gmail.com>
51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
import { cva } from 'cva'
|
|
|
|
export const selectTriggerVariants = cva({
|
|
base: 'relative inline-flex cursor-pointer items-center select-none rounded-lg bg-secondary-background text-base-foreground outline-none transition-all duration-200 ease-in-out hover:bg-secondary-background-hover border-[2.5px] border-solid disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background',
|
|
variants: {
|
|
size: {
|
|
md: 'h-8',
|
|
lg: 'h-10'
|
|
},
|
|
border: {
|
|
none: 'border-transparent focus-visible:border-node-component-border data-[state=open]:border-node-component-border',
|
|
active: 'border-base-foreground',
|
|
invalid: 'border-destructive-background'
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
size: 'lg',
|
|
border: 'none'
|
|
}
|
|
})
|
|
|
|
export const selectItemVariants = cva({
|
|
base: 'flex cursor-pointer items-center px-2 outline-none hover:bg-secondary-background-hover',
|
|
variants: {
|
|
layout: {
|
|
multi:
|
|
'h-10 shrink-0 gap-2 rounded-lg data-highlighted:bg-secondary-background-selected data-highlighted:hover:bg-secondary-background-selected',
|
|
single:
|
|
'relative w-full justify-between gap-3 rounded-sm py-3 text-sm select-none focus:bg-secondary-background-hover data-[state=checked]:bg-secondary-background-selected data-[state=checked]:hover:bg-secondary-background-selected'
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
layout: 'multi'
|
|
}
|
|
})
|
|
|
|
export const selectContentClass =
|
|
'z-3000 overflow-hidden rounded-lg p-2 bg-base-background text-base-foreground border border-solid border-border-default shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2'
|
|
|
|
export const selectDropdownClass =
|
|
'flex shrink-0 cursor-pointer items-center justify-center px-3'
|
|
|
|
export const selectEmptyMessageClass = 'px-3 pb-4 text-sm text-muted-foreground'
|
|
|
|
export function stopEscapeToDocument(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') {
|
|
event.stopPropagation()
|
|
event.stopImmediatePropagation()
|
|
}
|
|
}
|