mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-07 06:00:03 +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>
70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
<template>
|
|
<ImageCompare
|
|
:tabindex="widget.options?.tabindex ?? 0"
|
|
:aria-label="widget.options?.ariaLabel"
|
|
:aria-labelledby="widget.options?.ariaLabelledby"
|
|
:pt="widget.options?.pt"
|
|
:pt-options="widget.options?.ptOptions"
|
|
:unstyled="widget.options?.unstyled"
|
|
>
|
|
<template #left>
|
|
<img
|
|
:src="beforeImage"
|
|
:alt="beforeAlt"
|
|
class="h-full w-full object-cover"
|
|
/>
|
|
</template>
|
|
<template #right>
|
|
<img
|
|
:src="afterImage"
|
|
:alt="afterAlt"
|
|
class="h-full w-full object-cover"
|
|
/>
|
|
</template>
|
|
</ImageCompare>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ImageCompare from 'primevue/imagecompare'
|
|
import { computed } from 'vue'
|
|
|
|
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
|
|
|
|
export interface ImageCompareValue {
|
|
before: string
|
|
after: string
|
|
beforeAlt?: string
|
|
afterAlt?: string
|
|
initialPosition?: number
|
|
}
|
|
|
|
// Image compare widgets typically don't have v-model, they display comparison
|
|
const props = defineProps<{
|
|
widget: SimplifiedWidget<ImageCompareValue | string>
|
|
}>()
|
|
|
|
const beforeImage = computed(() => {
|
|
const value = props.widget.value
|
|
return typeof value === 'string' ? value : value?.before || ''
|
|
})
|
|
|
|
const afterImage = computed(() => {
|
|
const value = props.widget.value
|
|
return typeof value === 'string' ? '' : value?.after || ''
|
|
})
|
|
|
|
const beforeAlt = computed(() => {
|
|
const value = props.widget.value
|
|
return typeof value === 'object' && value?.beforeAlt
|
|
? value.beforeAlt
|
|
: 'Before image'
|
|
})
|
|
|
|
const afterAlt = computed(() => {
|
|
const value = props.widget.value
|
|
return typeof value === 'object' && value?.afterAlt
|
|
? value.afterAlt
|
|
: 'After image'
|
|
})
|
|
</script>
|