fix(rating-mobile): remove onclick and keep hover to display data

This commit is contained in:
Daniel Klein 2024-09-20 08:08:26 +02:00
parent 476e392c9d
commit a2f77f8488
3 changed files with 3134 additions and 1707 deletions

View file

@ -31,24 +31,11 @@ const backgroundColorByScore = computed(() => {
const colorIndex = Math.floor(normalizedPercentage / 10) const colorIndex = Math.floor(normalizedPercentage / 10)
return colors[colorIndex] return colors[colorIndex]
}) })
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
function onClick() {
if (isLargeScreen.value)
return
if (props.disablePopover)
emits('selected')
else
isPopoverVisible.value = !isPopoverVisible.value
}
const isPopoverVisible = ref(false) const isPopoverVisible = ref(false)
let hideTimeout: ReturnType<typeof setTimeout> | null = null let hideTimeout: ReturnType<typeof setTimeout> | null = null
const showPopover = () => { const showPopover = () => {
if (!isLargeScreen.value)
return
console.log('show')
if (hideTimeout) { if (hideTimeout) {
clearTimeout(hideTimeout) clearTimeout(hideTimeout)
hideTimeout = null hideTimeout = null
@ -57,8 +44,6 @@ const showPopover = () => {
} }
const hidePopover = () => { const hidePopover = () => {
if (!isLargeScreen.value)
return
hideTimeout = setTimeout(() => { hideTimeout = setTimeout(() => {
isPopoverVisible.value = false isPopoverVisible.value = false
}, 100) // Delay of 200ms before hiding }, 100) // Delay of 200ms before hiding
@ -83,7 +68,7 @@ const hidePopover = () => {
cursor-pointer cursor-pointer
@mouseenter="showPopover" @mouseenter="showPopover"
@mouseleave="hidePopover" @mouseleave="hidePopover"
@click.prevent="onClick()" @click.prevent=" emits('selected')"
> >
<div <div
v-for="point of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]" v-for="point of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"

View file

@ -73,7 +73,7 @@ export const useData = defineStore('data', () => {
features.value = data.features features.value = data.features
ranks.value = data.ranks ranks.value = data.ranks
projectPhase.value = data.project_phase.map(p => ({ id: p.id.toLowerCase(), name: p.name })) projectPhase.value = data.project_phase?.map(p => ({ id: p.id.toLowerCase(), name: p.name }))
assetCustody.value = data.asset_custody_type.map(a => ({ id: a.id.toLowerCase(), name: a.name })) assetCustody.value = data.asset_custody_type.map(a => ({ id: a.id.toLowerCase(), name: a.name }))
signInRequirments.value = data.sign_in_type_requirments.map(s => ({ id: s.id.toLowerCase(), name: s.name })) signInRequirments.value = data.sign_in_type_requirments.map(s => ({ id: s.id.toLowerCase(), name: s.name }))
} }

File diff suppressed because it is too large Load diff