nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 3 Packages Projects Releases Wiki Activity

fix(ui): SelectTab size issue

Browse Source
This commit is contained in:
Neko Ayaka
2026-04-18 19:27:02 +08:00
parent d2d5493136
commit 60456c7567
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/form/select-tab/select-tab.vue
+22 -8
View File
@@ -13,11 +13,13 @@ const props = withDefaults(defineProps<{
options: SelectTabOption[]
disabled?: boolean
readonly?: boolean
size?: 'sm' | 'md'
size?: 'xs' | 'sm' | 'md' | 'w-xs' | 'w-sm' | 'w-md'
tabSpace?: 'compact' | 'spaced'
}>(), {
disabled: false,
readonly: false,
size: 'md',
tabSpace: 'spaced',
})
const modelValue = defineModel<T>({ required: true })
@@ -27,9 +29,17 @@ const itemCount = computed(() => props.options.length || 1)
const isDisabled = computed(() => props.disabled || props.readonly)
const sizeClasses = computed(() =>
props.size === 'sm'
? ['py-2', 'px-3', 'text-xs', 'rounded-md', 'min-w-24']
: ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md', 'min-w-32'],
props.size === 'xs'
? props.tabSpace === 'compact'
? ['py-1', 'px-2', 'text-xs', 'rounded-md']
: ['py-1', 'px-2', 'text-xs', 'rounded-md', 'min-w-20']
: props.size === 'sm'
? props.tabSpace === 'compact'
? ['py-2', 'px-3', 'text-xs', 'rounded-md']
: ['py-2', 'px-3', 'text-xs', 'rounded-md', 'min-w-24']
: props.tabSpace === 'compact'
? ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md']
: ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md', 'min-w-32'],
)
const rootStyle = computed(() => ({
@@ -51,9 +61,11 @@ const rootStyle = computed(() => ({
'is-interacting',
'relative', 'flex', 'items-stretch', 'rounded-lg',
'overflow-hidden',
'bg-white-400/6', 'dark:bg-neutral-950/70',
'transition-[border-color,box-shadow,opacity]', 'duration-200', 'ease-out',
isDisabled ? ['cursor-not-allowed', 'opacity-60'] : ['shadow-[0_14px_50px_-32px_rgba(0,0,0,0.55)]', 'backdrop-blur-sm'],
'bg-neutral-400/6 dark:bg-neutral-950/70',
'transition-[border-color,box-shadow,opacity] duration-200 ease-out',
isDisabled
? ['cursor-not-allowed', 'opacity-60']
: ['shadow-[0_14px_50px_-32px_rgba(0,0,0,0.55)]', 'backdrop-blur-sm'],
// before
'before:bg-primary-300/50', 'dark:before:bg-primary-400/50',
'before:rounded-md', 'sm:before:rounded-lg',
@@ -82,7 +94,9 @@ const rootStyle = computed(() => ({
'transition-[color,background-color,border-color,transform]', 'duration-200', 'ease-out',
'focus-visible:border-none', 'focus-visible:outline-none',
sizeClasses,
isDisabled ? 'pointer-events-none' : 'cursor-pointer',
isDisabled
? 'pointer-events-none'
: 'cursor-pointer',
// checked
'data-[state=checked]:text-primary-950', 'dark:data-[state=checked]:text-primary-50',
// unchecked