mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 10:59:53 +00:00
## Summary Adds the [tailwind lint plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss) and fixes the currently fixable rules ([v4 is still in beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)). ## Changes - **What**: Enforces things like consistent class order, and eventually can prohibit extra classes that could be utilities instead - **Dependencies**: The plugin and its types ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<template>
|
|
<div
|
|
class="relative max-h-[200px] min-h-[28px] w-full overflow-y-auto rounded-lg px-4 py-2 text-xs"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex flex-1 items-center gap-2 break-all">
|
|
<span v-html="formattedText"></span>
|
|
<Skeleton v-if="isParentNodeExecuting" class="h-4! flex-1!" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Skeleton from 'primevue/skeleton'
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
|
|
import type { NodeId } from '@/lib/litegraph/src/litegraph'
|
|
import { useExecutionStore } from '@/stores/executionStore'
|
|
import { linkifyHtml, nl2br } from '@/utils/formatUtil'
|
|
|
|
const modelValue = defineModel<string>({ required: true })
|
|
const props = defineProps<{
|
|
widget?: object
|
|
nodeId: NodeId
|
|
}>()
|
|
|
|
const executionStore = useExecutionStore()
|
|
const isParentNodeExecuting = ref(true)
|
|
const formattedText = computed(() => nl2br(linkifyHtml(modelValue.value)))
|
|
|
|
let parentNodeId: NodeId | null = null
|
|
onMounted(() => {
|
|
// Get the parent node ID from props if provided
|
|
// For backward compatibility, fall back to the first executing node
|
|
parentNodeId = props.nodeId
|
|
})
|
|
|
|
// Watch for either a new node has starting execution or overall execution ending
|
|
const stopWatching = watch(
|
|
[() => executionStore.executingNodeIds, () => executionStore.isIdle],
|
|
() => {
|
|
if (executionStore.isIdle) {
|
|
isParentNodeExecuting.value = false
|
|
stopWatching()
|
|
return
|
|
}
|
|
|
|
// Check if parent node is no longer in the executing nodes list
|
|
if (
|
|
parentNodeId &&
|
|
!executionStore.executingNodeIds.includes(parentNodeId)
|
|
) {
|
|
isParentNodeExecuting.value = false
|
|
stopWatching()
|
|
}
|
|
|
|
// Set parent node ID if not set yet
|
|
if (!parentNodeId && executionStore.executingNodeIds.length > 0) {
|
|
parentNodeId = executionStore.executingNodeIds[0]
|
|
}
|
|
}
|
|
)
|
|
</script>
|