mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 09:45:13 +00:00
93e7a4f9f9
## Summary Adds an editable Model Info Panel to show and modify asset details in the asset browser. ## Changes - Add `ModelInfoPanel` component with editable display name, description, model type, base models, and tags - Add `updateAssetMetadata` action in `assetsStore` with optimistic cache updates - Add shadcn-vue `Select` components with design system styling - Add utility functions in `assetMetadataUtils` for extracting model metadata - Convert `BaseModalLayout` right panel state to `defineModel` pattern - Add slide-in animation and collapse button for right panel - Add `class` prop to `PropertiesAccordionItem` for custom styling - Fix keyboard handling: Escape in TagsInput/TextArea doesn't close parent modal ## Testing - Unit tests for `ModelInfoPanel` component - Unit tests for `assetMetadataUtils` functions --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com>
78 lines
2.0 KiB
Vue
78 lines
2.0 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
import TransitionCollapse from './TransitionCollapse.vue'
|
|
|
|
const {
|
|
disabled,
|
|
label,
|
|
enableEmptyState,
|
|
tooltip,
|
|
class: className
|
|
} = defineProps<{
|
|
disabled?: boolean
|
|
label?: string
|
|
enableEmptyState?: boolean
|
|
tooltip?: string
|
|
class?: string
|
|
}>()
|
|
|
|
const isCollapse = defineModel<boolean>('collapse', { default: false })
|
|
|
|
const isExpanded = computed(() => !isCollapse.value && !disabled)
|
|
|
|
const tooltipConfig = computed(() => {
|
|
if (!tooltip) return undefined
|
|
return { value: tooltip, showDelay: 1000 }
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn('flex flex-col bg-comfy-menu-bg', className)">
|
|
<div
|
|
class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
|
|
>
|
|
<button
|
|
v-tooltip="tooltipConfig"
|
|
type="button"
|
|
:class="
|
|
cn(
|
|
'group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
|
|
!disabled && 'cursor-pointer'
|
|
)
|
|
"
|
|
:disabled="disabled"
|
|
@click="isCollapse = !isCollapse"
|
|
>
|
|
<span class="text-sm font-semibold line-clamp-2 flex-1">
|
|
<slot name="label">
|
|
{{ label }}
|
|
</slot>
|
|
</span>
|
|
|
|
<i
|
|
:class="
|
|
cn(
|
|
'text-muted-foreground group-hover:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
|
|
isCollapse && '-rotate-180',
|
|
disabled && 'opacity-0'
|
|
)
|
|
"
|
|
/>
|
|
</button>
|
|
</div>
|
|
<TransitionCollapse>
|
|
<div v-if="isExpanded" class="pb-4">
|
|
<slot />
|
|
</div>
|
|
<slot v-else-if="enableEmptyState && disabled" name="empty">
|
|
<div>
|
|
{{ $t('g.empty') }}
|
|
</div>
|
|
</slot>
|
|
</TransitionCollapse>
|
|
</div>
|
|
</template>
|