mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
1d7a5b9e0b
- Buttons are marked as `touch-manipulation` so double-tapping on them doesn't initiate a zoom. - Move scrubable inputs to usePointerSwipe - Strangely, swipe direction was inverted on mobile. This solves the issue and simplifies code - Moves event handlers into the scrubbable input component - Make the slightly bigger buttons only apply when on mobile. - Updates the workflows dropdown to have a check by the activeWorkflow and truncate workflow names - Displays dropzones (for the image preview) on mobile, but disables the prompt to drag and drop an image if none is selected. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9686-Mobile-input-tweaks-31f6d73d3650811d9025d0cd1ac58534) by [Unito](https://www.unito.io)
75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { MenuItem } from 'primevue/menuitem'
|
|
import {
|
|
DropdownMenuArrow,
|
|
DropdownMenuContent,
|
|
DropdownMenuPortal,
|
|
DropdownMenuRoot,
|
|
DropdownMenuTrigger
|
|
} from 'reka-ui'
|
|
import { computed, toValue } from 'vue'
|
|
|
|
import DropdownItem from '@/components/common/DropdownItem.vue'
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
defineOptions({
|
|
inheritAttrs: false
|
|
})
|
|
|
|
const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
|
|
entries?: MenuItem[]
|
|
icon?: string
|
|
to?: string | HTMLElement
|
|
itemClass?: string
|
|
contentClass?: string
|
|
}>()
|
|
|
|
const itemClass = computed(() =>
|
|
cn(
|
|
'm-1 flex cursor-pointer items-center-safe gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
|
|
itemProp
|
|
)
|
|
)
|
|
|
|
const contentClass = computed(() =>
|
|
cn(
|
|
'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-1700 min-w-[220px] rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[opacity,transform]',
|
|
contentProp
|
|
)
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<DropdownMenuRoot>
|
|
<DropdownMenuTrigger as-child>
|
|
<slot name="button">
|
|
<Button size="icon">
|
|
<i :class="icon ?? 'icon-[lucide--menu]'" />
|
|
</Button>
|
|
</slot>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuPortal :to>
|
|
<DropdownMenuContent
|
|
side="bottom"
|
|
:side-offset="5"
|
|
:collision-padding="10"
|
|
v-bind="$attrs"
|
|
:class="contentClass"
|
|
>
|
|
<slot :item-class>
|
|
<DropdownItem
|
|
v-for="(item, index) in entries ?? []"
|
|
:key="toValue(item.label) ?? index"
|
|
:item-class
|
|
:content-class
|
|
:item
|
|
/>
|
|
</slot>
|
|
<DropdownMenuArrow class="fill-base-background stroke-border-subtle" />
|
|
</DropdownMenuContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuRoot>
|
|
</template>
|