42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<MobileCard clickable @click="$emit('open', item)">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="min-w-0 flex-1 space-y-1">
|
||
|
|
<div class="flex items-center justify-between gap-2">
|
||
|
|
<span class="truncate text-sm font-700 text-gray-900">{{ item.name || '-' }}</span>
|
||
|
|
<span class="shrink-0 text-xs text-gray-400">#{{ item.id ?? '-' }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="truncate text-xs text-gray-600">{{ mobileLabel }}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<MobileIconButton
|
||
|
|
icon="vuesax-linear:edit"
|
||
|
|
color="#4572E9"
|
||
|
|
:size="20"
|
||
|
|
@click="$emit('edit', item)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</MobileCard>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { User } from '@/model/user'
|
||
|
|
import MobileCard from '@/components/mobile/MobileCard.vue'
|
||
|
|
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
item: User
|
||
|
|
}>()
|
||
|
|
|
||
|
|
defineEmits<{
|
||
|
|
(e: 'open', item: User): void
|
||
|
|
(e: 'edit', item: User): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const mobileLabel = computed(() => {
|
||
|
|
if (props.item.mobile == null || props.item.mobile === '') return '-'
|
||
|
|
return String(props.item.mobile)
|
||
|
|
})
|
||
|
|
</script>
|