75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
class="observation-card observation-card--readonly"
|
|
:class="{ 'observation-card--verified': checked }"
|
|
data-testid="verification-field-card"
|
|
>
|
|
<div class="observation-card__rail" aria-hidden="true">
|
|
<span class="observation-card__dot" />
|
|
</div>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-1.5">
|
|
<p class="text-xs font-semibold uppercase tracking-wide text-ink-secondary">
|
|
{{ label }}
|
|
</p>
|
|
<OcrConfidenceBadge
|
|
v-if="ocrLabel"
|
|
:label="ocrLabel"
|
|
:level="ocrLevel"
|
|
/>
|
|
</div>
|
|
<p
|
|
class="mt-0.5 text-base font-bold leading-snug text-ink-strong break-words"
|
|
:class="valueClass"
|
|
>
|
|
{{ displayValue }}
|
|
</p>
|
|
</div>
|
|
|
|
<label
|
|
class="inline-flex shrink-0 items-center gap-1.5 rounded-input border px-2 py-1 text-xs font-semibold cursor-pointer transition-colors"
|
|
:class="checked
|
|
? 'border-clinical-safe bg-clinical-safe-bg text-clinical-safe'
|
|
: 'border-line bg-surface text-ink-secondary hover:border-primary-300'"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
class="w-3.5 h-3.5 text-clinical-safe rounded"
|
|
:checked="checked"
|
|
@change="$emit('toggle', ($event.target as HTMLInputElement).checked)"
|
|
/>
|
|
OK
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import type { OcrConfidenceLevel } from '../composables/useOcrFieldConfidence'
|
|
import OcrConfidenceBadge from './OcrConfidenceBadge.vue'
|
|
|
|
const props = defineProps<{
|
|
label: string
|
|
value: string | null | undefined
|
|
checked: boolean
|
|
valueClass?: string
|
|
ocrLabel?: string | null
|
|
ocrLevel?: OcrConfidenceLevel | null
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e: 'toggle', checked: boolean): void
|
|
}>()
|
|
|
|
const displayValue = computed(() => {
|
|
const raw = props.value
|
|
if (raw == null || String(raw).trim() === '') return '(empty)'
|
|
return String(raw)
|
|
})
|
|
</script>
|