mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-13 17:26:22 +00:00
ef59f46495
*PR Created by the Glary-Bot Agent* --- ## Summary - Replace all `cn` / `ClassValue` imports from the `@/utils/tailwindUtil` re-export shim with direct imports from `@comfyorg/tailwind-utils` across 198 source files in `src/` and 3 in `apps/desktop-ui/` - Delete both shim files (`src/utils/tailwindUtil.ts` and `apps/desktop-ui/src/utils/tailwindUtil.ts`) - Add explicit `@comfyorg/tailwind-utils` dependency to `apps/desktop-ui/package.json` - Update documentation references in `AGENTS.md`, `docs/guidance/design-standards.md`, and `docs/guidance/vue-components.md` Fixes #11288 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-11453-refactor-migrate-cn-imports-from-utils-tailwindUtil-shim-to-comfyorg-tailwind-utils--3486d73d365081ec92cce91fbf88e6e4) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
v-if="shouldShow"
|
|
data-testid="queue-inline-progress"
|
|
aria-hidden="true"
|
|
:class="
|
|
cn('pointer-events-none absolute inset-0 overflow-hidden', radiusClass)
|
|
"
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute bottom-0 left-0 h-[3px] bg-interface-panel-job-progress-primary transition-[width]"
|
|
:style="{ width: `${totalPercent}%` }"
|
|
/>
|
|
<div
|
|
class="pointer-events-none absolute bottom-0 left-0 h-[3px] bg-interface-panel-job-progress-secondary transition-[width]"
|
|
:style="{ width: `${currentNodePercent}%` }"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { useQueueProgress } from '@/composables/queue/useQueueProgress'
|
|
import { cn } from '@comfyorg/tailwind-utils'
|
|
|
|
const { hidden = false, radiusClass = 'rounded-[7px]' } = defineProps<{
|
|
hidden?: boolean
|
|
radiusClass?: string
|
|
}>()
|
|
|
|
const { totalPercent, currentNodePercent } = useQueueProgress()
|
|
|
|
const shouldShow = computed(
|
|
() => !hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
|
|
)
|
|
</script>
|