mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
c4272ef1da
<img width="373" height="535" alt="스크린샷 2026-03-09 오후 2 48 10" src="https://github.com/user-attachments/assets/7fea3fd4-0d90-4022-ad78-c53e3d5be887" /> ## Summary - Reorganize Select-related stories under `Components/Select/` hierarchy (SingleSelect, MultiSelect, Select) - Add `size` prop (`lg`/`md`) to SingleSelect, MultiSelect, SelectTrigger for Figma Large (40px) / Medium (32px) variants - Add `invalid` prop (red border) to SingleSelect and SelectTrigger - Add `loading` prop (spinner) to SingleSelect - Add `hover:bg-secondary-background-hover` to all select triggers - Align disabled opacity to 30% per Figma spec - Add new stories: Disabled, Invalid, Loading, MediumSize, AllStates ## Test plan - [ ] Verify Storybook renders all stories under `Components/Select/` - [ ] Check hover state visually on all select triggers - [ ] Verify Medium size (32px) renders correctly - [ ] Verify Invalid state shows red border - [ ] Verify Loading state shows spinner - [ ] Verify Disabled state has 30% opacity and no hover effect ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9639-refactor-reorganize-Select-stories-and-add-size-state-variants-31e6d73d36508142b835f04ab6bdaefe) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { SelectTriggerProps } from 'reka-ui'
|
|
import { SelectIcon, SelectTrigger } from 'reka-ui'
|
|
import type { HTMLAttributes } from 'vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const {
|
|
class: className,
|
|
size = 'lg',
|
|
invalid = false,
|
|
...restProps
|
|
} = defineProps<
|
|
SelectTriggerProps & {
|
|
class?: HTMLAttributes['class']
|
|
/** Trigger size: 'lg' (40px) or 'md' (32px) */
|
|
size?: 'lg' | 'md'
|
|
/** Show invalid (destructive) border */
|
|
invalid?: boolean
|
|
}
|
|
>()
|
|
</script>
|
|
|
|
<template>
|
|
<SelectTrigger
|
|
v-bind="restProps"
|
|
:aria-invalid="invalid || undefined"
|
|
:class="
|
|
cn(
|
|
'flex w-full cursor-pointer items-center justify-between select-none',
|
|
size === 'md' ? 'h-8 px-3 py-1 text-xs' : 'h-10 px-4 py-2 text-sm',
|
|
'rounded-lg',
|
|
'bg-secondary-background text-base-foreground',
|
|
'transition-all duration-200 ease-in-out',
|
|
'hover:bg-secondary-background-hover',
|
|
'border-[2.5px] border-solid',
|
|
invalid
|
|
? 'border-destructive-background'
|
|
: 'border-transparent focus:border-node-component-border',
|
|
'focus:outline-none',
|
|
'data-placeholder:text-muted-foreground',
|
|
'disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-secondary-background',
|
|
'[&>span]:truncate',
|
|
className
|
|
)
|
|
"
|
|
>
|
|
<slot />
|
|
<SelectIcon as-child>
|
|
<i class="icon-[lucide--chevron-down] shrink-0 text-muted-foreground" />
|
|
</SelectIcon>
|
|
</SelectTrigger>
|
|
</template>
|