| 1 |
<template> |
| 2 |
<div> |
| 3 |
<el-link |
| 4 |
v-bind="linkAttrs" |
| 5 |
:underline="false" |
| 6 |
class="ivyforms-link" |
| 7 |
:class="`priority-${props.priority} size-${props.size} ${isPressed ? 'pressed' : ''} ${isUsed ? 'used' : ''}`" |
| 8 |
@click="handleClick" |
| 9 |
@mousedown="handleMouseDown" |
| 10 |
@mouseup="handleMouseUp" |
| 11 |
@mouseleave="handleMouseLeave" |
| 12 |
> |
| 13 |
<slot></slot> |
| 14 |
</el-link> |
| 15 |
</div> |
| 16 |
</template> |
| 17 |
|
| 18 |
<script setup lang="ts"> |
| 19 |
import { ref, computed } from 'vue' |
| 20 |
|
| 21 |
interface Props { |
| 22 |
href: string |
| 23 |
priority?: 'primary' | 'secondary' | 'amber' |
| 24 |
target?: '_blank' | '_self' |
| 25 |
rel?: 'noopener' | 'noreferrer' |
| 26 |
size?: 's' | 'd' |
| 27 |
onClick?: (event: Event) => void |
| 28 |
} |
| 29 |
|
| 30 |
const props = withDefaults(defineProps<Props>(), { |
| 31 |
priority: 'primary', |
| 32 |
target: '_self', |
| 33 |
rel: 'noreferrer', |
| 34 |
size: 'd', |
| 35 |
href: '#', |
| 36 |
onClick: () => {}, |
| 37 |
}) |
| 38 |
|
| 39 |
const isPressed = ref(false) |
| 40 |
const isUsed = ref(false) |
| 41 |
|
| 42 |
// Computed properties for dynamic attributes |
| 43 |
const linkAttrs = computed(() => { |
| 44 |
return { |
| 45 |
href: props.href === '#' ? '' : props.href, // Prevent navigation if href is invalid |
| 46 |
target: props.target, |
| 47 |
rel: props.target === '_blank' ? props.rel : '', |
| 48 |
} |
| 49 |
}) |
| 50 |
|
| 51 |
// Handle click events |
| 52 |
const handleClick = (event: Event) => { |
| 53 |
if (props.href === '#' || !props.href) { |
| 54 |
event.preventDefault() // Prevent default navigation if href is invalid |
| 55 |
} else { |
| 56 |
isUsed.value = true // Mark as used after navigation |
| 57 |
} |
| 58 |
if (props.onClick) { |
| 59 |
props.onClick(event) |
| 60 |
} |
| 61 |
} |
| 62 |
|
| 63 |
// Handle mouse down event to detect pressed state |
| 64 |
const handleMouseDown = () => { |
| 65 |
isPressed.value = true |
| 66 |
} |
| 67 |
|
| 68 |
// Handle mouse up event to reset pressed state |
| 69 |
const handleMouseUp = () => { |
| 70 |
isPressed.value = false |
| 71 |
} |
| 72 |
|
| 73 |
// Handle mouse leave event to reset pressed state |
| 74 |
const handleMouseLeave = () => { |
| 75 |
isPressed.value = false |
| 76 |
} |
| 77 |
</script> |
| 78 |
<style lang="scss"> |
| 79 |
@use 'sass:list' as *; |
| 80 |
@use 'sass:meta' as *; |
| 81 |
// Radio |
| 82 |
.ivyforms-link { |
| 83 |
color: var(--map-base-dusk-symbol-2); |
| 84 |
text-align: center; |
| 85 |
|
| 86 |
font-family: Roboto; |
| 87 |
font-style: normal; |
| 88 |
font-weight: 500; |
| 89 |
|
| 90 |
&.size-s { |
| 91 |
font-size: 14px; |
| 92 |
line-height: 20px; |
| 93 |
} |
| 94 |
&.size-d { |
| 95 |
font-size: 16px; |
| 96 |
line-height: 22px; |
| 97 |
} |
| 98 |
|
| 99 |
&.el-link { |
| 100 |
border: none; |
| 101 |
color: var(--map-base-dusk-symbol-2); |
| 102 |
.el-link__inner { |
| 103 |
border: none; |
| 104 |
} |
| 105 |
} |
| 106 |
|
| 107 |
$priorities: ( |
| 108 |
'primary': ( |
| 109 |
var(--map-base-brand-symbol-0), |
| 110 |
var(--map-base-brand-symbol-1), |
| 111 |
), |
| 112 |
'secondary': ( |
| 113 |
var(--map-base-purple-symbol-0), |
| 114 |
var(--map-base-purple-symbol-1), |
| 115 |
), |
| 116 |
); |
| 117 |
|
| 118 |
// Function to process each priority value if is array |
| 119 |
@each $priority, $values in $priorities { |
| 120 |
&.priority-#{$priority} { |
| 121 |
&:hover { |
| 122 |
color: nth($values, 1); |
| 123 |
border: none; |
| 124 |
box-shadow: none; |
| 125 |
outline: none; |
| 126 |
} |
| 127 |
&.pressed { |
| 128 |
color: nth($values, 2); // For pressed state |
| 129 |
border: none; |
| 130 |
box-shadow: none; |
| 131 |
outline: none; |
| 132 |
} |
| 133 |
|
| 134 |
&.used { |
| 135 |
color: var(--map-base-dusk-symbol-0); // For used state |
| 136 |
border: none; |
| 137 |
box-shadow: none; |
| 138 |
outline: none; |
| 139 |
} |
| 140 |
} |
| 141 |
} |
| 142 |
} |
| 143 |
</style> |
| 144 |
|
