53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<component
|
|
:is="linkable ? NuxtLink : 'div'"
|
|
:to="linkable ? localePath('/clientarea/addresses') : undefined"
|
|
class="block"
|
|
:class="{ 'cursor-pointer': selectable }"
|
|
@click="selectable && $emit('select')"
|
|
>
|
|
<Card
|
|
padding="sm"
|
|
:interactive="linkable || selectable"
|
|
:class="[
|
|
isSelected && 'ring-2 ring-primary ring-offset-2'
|
|
]"
|
|
>
|
|
<Stack gap="2">
|
|
<Stack direction="row" align="center" gap="2">
|
|
<Icon name="lucide:map-pin" size="18" class="text-primary" />
|
|
<Text size="base" weight="semibold">{{ address.name }}</Text>
|
|
<Pill v-if="address.isDefault" variant="outline" size="sm">{{ t('catalogAddress.badges.default') }}</Pill>
|
|
</Stack>
|
|
<Text tone="muted" size="sm">{{ address.address }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</component>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NuxtLink } from '#components'
|
|
|
|
interface Address {
|
|
uuid?: string | null
|
|
name?: string | null
|
|
address?: string | null
|
|
isDefault?: boolean | null
|
|
}
|
|
|
|
const props = defineProps<{
|
|
address: Address
|
|
selectable?: boolean
|
|
isSelected?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'select'): void
|
|
}>()
|
|
|
|
const localePath = useLocalePath()
|
|
const { t } = useI18n()
|
|
|
|
const linkable = computed(() => !props.selectable && props.address.uuid)
|
|
</script>
|