mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
e70ddea684
* feature: size adjust * feature: design adjust * fix: popover width, height added * fix: li style override * refactor: improve component readability and maintainability per PR feedback - Replace CardGridList component with createGridStyle utility function - Add runtime validation for grid column values - Remove !important usage in MultiSelect, use cn() function instead - Extract popover sizing logic into usePopoverSizing composable - Improve class string readability by splitting into logical groups - Use Tailwind size utilities (size-8, size-10) instead of separate width/height - Remove magic numbers in SearchBox, align with button sizes - Rename BaseWidgetLayout to BaseModalLayout for clarity - Enhance SearchBox click area to cover entire component - Refactor long class strings using cn() utility across components * fix: BaseWidgetLayout => BaseModalLayout * fix: CardGrid deleted * fix: unused exported types * Update test expectations [skip ci] * chore: code review * Update test expectations [skip ci] * chore: restore screenshot --------- Co-authored-by: github-actions <github-actions@github.com>
59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
<template>
|
|
<Button
|
|
v-bind="$attrs"
|
|
unstyled
|
|
:class="buttonStyle"
|
|
:disabled="disabled"
|
|
@click="onClick"
|
|
>
|
|
<slot v-if="iconPosition !== 'right'" name="icon"></slot>
|
|
<span>{{ label }}</span>
|
|
<slot v-if="iconPosition === 'right'" name="icon"></slot>
|
|
</Button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
import { computed } from 'vue'
|
|
|
|
import type { BaseButtonProps } from '@/types/buttonTypes'
|
|
import {
|
|
getBaseButtonClasses,
|
|
getBorderButtonTypeClasses,
|
|
getButtonSizeClasses,
|
|
getButtonTypeClasses
|
|
} from '@/types/buttonTypes'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
defineOptions({
|
|
inheritAttrs: false
|
|
})
|
|
|
|
interface IconTextButtonProps extends BaseButtonProps {
|
|
iconPosition?: 'left' | 'right'
|
|
label: string
|
|
onClick: () => void
|
|
}
|
|
|
|
const {
|
|
size = 'md',
|
|
type = 'primary',
|
|
border = false,
|
|
disabled = false,
|
|
class: className,
|
|
iconPosition = 'left',
|
|
label,
|
|
onClick
|
|
} = defineProps<IconTextButtonProps>()
|
|
|
|
const buttonStyle = computed(() => {
|
|
const baseClasses = `${getBaseButtonClasses()} justify-start! gap-2`
|
|
const sizeClasses = getButtonSizeClasses(size)
|
|
const typeClasses = border
|
|
? getBorderButtonTypeClasses(type)
|
|
: getButtonTypeClasses(type)
|
|
|
|
return cn(baseClasses, sizeClasses, typeClasses, className)
|
|
})
|
|
</script>
|