mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 14:54:37 +00:00
66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
|
|
const props = defineProps<{
|
|
nodeId: string
|
|
nodeTitle: string
|
|
widgetName: string
|
|
isShown?: boolean
|
|
isDraggable?: boolean
|
|
toggleVisibility: (
|
|
nodeId: string,
|
|
widgetName: string,
|
|
isShown: boolean
|
|
) => void
|
|
}>()
|
|
|
|
function onClick() {
|
|
props.toggleVisibility(props.nodeId, props.widgetName, props.isShown ?? false)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="widget-item items-center gap-1">
|
|
<div class="size-4">
|
|
<i-lucide:grip-vertical v-if="isDraggable" />
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="widget-node">{{ nodeTitle }}</div>
|
|
<div class="widget-name">{{ widgetName }}</div>
|
|
</div>
|
|
<Button
|
|
size="small"
|
|
class="shrink-0"
|
|
text
|
|
severity="secondary"
|
|
@click.stop="onClick"
|
|
>
|
|
<i-lucide:eye v-if="isShown" />
|
|
<i-lucide:eye-off v-else />
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.widget-item {
|
|
display: flex;
|
|
padding: 4px 16px 4px 0;
|
|
word-break: break-all;
|
|
border-radius: 4px;
|
|
background: var(--p-dialog-background, #202020);
|
|
}
|
|
.widget-node {
|
|
color: var(--color-slate-100, #9c9eab);
|
|
|
|
/* heading-text-nav */
|
|
font-family: Inter;
|
|
font-size: 10px;
|
|
}
|
|
.widget-name {
|
|
color: var(--color-text-primary, #fff);
|
|
|
|
/* body-text-small */
|
|
font-family: Inter;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|