mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-27 02:04:09 +00:00
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<ScrollPanel class="w-80" style="height: calc(85vh - 48px)">
|
|
<Listbox
|
|
:model-value="selectedTab"
|
|
@update:model-value="handleTabSelection"
|
|
:options="tabs"
|
|
option-group-label="label"
|
|
option-label="title"
|
|
option-group-children="modules"
|
|
:pt="{
|
|
root: { class: 'w-full border-0 bg-transparent' },
|
|
list: { class: 'p-0' },
|
|
option: { class: 'px-12 py-3 text-lg' },
|
|
optionGroup: { class: 'p-0 text-left text-inherit' }
|
|
}"
|
|
listStyle="max-height:unset"
|
|
>
|
|
<template #optiongroup="slotProps">
|
|
<div class="text-left py-3 px-12">
|
|
<h2 class="text-lg">{{ slotProps.option.label }}</h2>
|
|
</div>
|
|
</template>
|
|
</Listbox>
|
|
</ScrollPanel>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Listbox from 'primevue/listbox'
|
|
import ScrollPanel from 'primevue/scrollpanel'
|
|
|
|
import type {
|
|
TemplateGroup,
|
|
WorkflowTemplates
|
|
} from '@/types/workflowTemplateTypes'
|
|
|
|
defineProps<{
|
|
tabs: TemplateGroup[]
|
|
selectedTab: WorkflowTemplates | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:selectedTab', tab: WorkflowTemplates): void
|
|
}>()
|
|
|
|
const handleTabSelection = (tab: WorkflowTemplates) => {
|
|
emit('update:selectedTab', tab)
|
|
}
|
|
</script>
|