mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-07 22:20:03 +00:00
ef4e4a69d5
## Summary Enable `better-tailwindcss/enforce-consistent-class-order` lint rule and auto-fix all 1027 violations across 263 files. Stacked on #9427. ## Changes - **What**: Sort Tailwind classes into consistent order via `eslint --fix` - Enable `enforce-consistent-class-order` as `'error'` in eslint config - Purely cosmetic reordering — no behavioral or visual changes ## Review Focus Mechanical auto-fix PR — all changes are class reordering only. This is the largest diff but lowest risk since it changes no class names, only their order. **Stack:** #9417 → #9427 → **this PR** Fixes #9300 (partial — 3 of 3 rules) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9428-fix-enable-enforce-consistent-class-order-tailwind-lint-rule-31a6d73d3650811c9065f5178ba3e724) by [Unito](https://www.unito.io)
67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Hidden single-line measurement element for overflow detection -->
|
|
<div
|
|
ref="measureRef"
|
|
class="pointer-events-none invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap"
|
|
aria-hidden="true"
|
|
>
|
|
<slot />
|
|
</div>
|
|
|
|
<MarqueeLine v-if="!secondLine">
|
|
<slot />
|
|
</MarqueeLine>
|
|
|
|
<div v-else class="flex w-full flex-col">
|
|
<MarqueeLine>{{ firstLine }}</MarqueeLine>
|
|
<MarqueeLine>{{ secondLine }}</MarqueeLine>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useMutationObserver, useResizeObserver } from '@vueuse/core'
|
|
import { ref } from 'vue'
|
|
|
|
import MarqueeLine from './MarqueeLine.vue'
|
|
import { splitTextAtWordBoundary } from '@/utils/textTickerUtils'
|
|
|
|
const measureRef = ref<HTMLElement | null>(null)
|
|
const firstLine = ref('')
|
|
const secondLine = ref('')
|
|
|
|
function splitLines() {
|
|
const el = measureRef.value
|
|
const text = el?.textContent?.trim()
|
|
if (!el || !text) {
|
|
firstLine.value = ''
|
|
secondLine.value = ''
|
|
return
|
|
}
|
|
|
|
const containerWidth = el.clientWidth
|
|
const textWidth = el.scrollWidth
|
|
|
|
if (textWidth <= containerWidth) {
|
|
firstLine.value = text
|
|
secondLine.value = ''
|
|
return
|
|
}
|
|
|
|
const [first, second] = splitTextAtWordBoundary(
|
|
text,
|
|
containerWidth / textWidth
|
|
)
|
|
firstLine.value = first
|
|
secondLine.value = second
|
|
}
|
|
|
|
useResizeObserver(measureRef, splitLines)
|
|
useMutationObserver(measureRef, splitLines, {
|
|
childList: true,
|
|
characterData: true,
|
|
subtree: true
|
|
})
|
|
</script>
|