mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-09 07:00:06 +00:00
b943c0fa75
## 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>
97 lines
2.8 KiB
Vue
97 lines
2.8 KiB
Vue
<template>
|
|
<div
|
|
class="option-container flex w-full cursor-pointer items-center justify-between overflow-hidden px-2 py-0"
|
|
>
|
|
<div class="option-display-name flex flex-col font-semibold">
|
|
<div>
|
|
<span v-if="isBookmarked">
|
|
<i class="pi pi-bookmark-fill mr-1 text-sm" />
|
|
</span>
|
|
<span v-html="highlightQuery(nodeDef.display_name, currentQuery)" />
|
|
<span> </span>
|
|
<Tag v-if="showIdName" severity="secondary">
|
|
<span v-html="highlightQuery(nodeDef.name, currentQuery)" />
|
|
</Tag>
|
|
</div>
|
|
<div
|
|
v-if="showCategory"
|
|
class="option-category truncate text-sm font-light text-muted"
|
|
>
|
|
{{ nodeDef.category.replaceAll('/', ' > ') }}
|
|
</div>
|
|
</div>
|
|
<div class="option-badges">
|
|
<Tag
|
|
v-if="nodeDef.experimental"
|
|
:value="$t('g.experimental')"
|
|
severity="primary"
|
|
/>
|
|
<Tag
|
|
v-if="nodeDef.deprecated"
|
|
:value="$t('g.deprecated')"
|
|
severity="danger"
|
|
/>
|
|
<Tag
|
|
v-if="showNodeFrequency && nodeFrequency > 0"
|
|
:value="formatNumberWithSuffix(nodeFrequency, { roundToInt: true })"
|
|
severity="secondary"
|
|
/>
|
|
<Chip
|
|
v-if="nodeDef.nodeSource.type !== NodeSourceType.Unknown"
|
|
class="text-sm font-light"
|
|
>
|
|
{{ nodeDef.nodeSource.displayText }}
|
|
</Chip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Chip from 'primevue/chip'
|
|
import Tag from 'primevue/tag'
|
|
import { computed } from 'vue'
|
|
|
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
|
import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
|
|
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
|
import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
|
|
import { NodeSourceType } from '@/types/nodeSource'
|
|
import { formatNumberWithSuffix, highlightQuery } from '@/utils/formatUtil'
|
|
|
|
const settingStore = useSettingStore()
|
|
const showCategory = computed(() =>
|
|
settingStore.get('Comfy.NodeSearchBoxImpl.ShowCategory')
|
|
)
|
|
const showIdName = computed(() =>
|
|
settingStore.get('Comfy.NodeSearchBoxImpl.ShowIdName')
|
|
)
|
|
const showNodeFrequency = computed(() =>
|
|
settingStore.get('Comfy.NodeSearchBoxImpl.ShowNodeFrequency')
|
|
)
|
|
const nodeFrequencyStore = useNodeFrequencyStore()
|
|
const nodeFrequency = computed(() =>
|
|
nodeFrequencyStore.getNodeFrequency(props.nodeDef)
|
|
)
|
|
|
|
const nodeBookmarkStore = useNodeBookmarkStore()
|
|
const isBookmarked = computed(() =>
|
|
nodeBookmarkStore.isBookmarked(props.nodeDef)
|
|
)
|
|
|
|
const props = defineProps<{
|
|
nodeDef: ComfyNodeDefImpl
|
|
currentQuery: string
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.highlight) {
|
|
background-color: var(--p-primary-color);
|
|
color: var(--p-primary-contrast-color);
|
|
font-weight: 700;
|
|
border-radius: 0.25rem;
|
|
padding: 0 0.125rem;
|
|
margin: -0.125rem 0.125rem;
|
|
}
|
|
</style>
|