67 lines
3.2 KiB
Vue
67 lines
3.2 KiB
Vue
<template>
|
|
<span
|
|
class="status-badge inline-flex items-center gap-1.5 border"
|
|
:class="toneClass"
|
|
:title="meta.label"
|
|
>
|
|
<span class="inline-flex shrink-0" aria-hidden="true">
|
|
<!-- upload -->
|
|
<svg v-if="meta.icon === 'upload'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<path d="M8 11V3M8 3L5 6M8 3l3 3M3 13h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<!-- edit -->
|
|
<svg v-else-if="meta.icon === 'edit'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<path d="M11.5 2.5l2 2L5 13H3v-2L11.5 2.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
</svg>
|
|
<!-- clock -->
|
|
<svg v-else-if="meta.icon === 'clock'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M8 5v3.5l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<!-- reject -->
|
|
<svg v-else-if="meta.icon === 'reject'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
<!-- check -->
|
|
<svg v-else-if="meta.icon === 'check'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<!-- shield -->
|
|
<svg v-else-if="meta.icon === 'shield'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<path d="M8 2.5l5 2v3.5c0 3-2.2 5.2-5 6-2.8-.8-5-3-5-6V4.5l5-2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
|
|
</svg>
|
|
<!-- approve -->
|
|
<svg v-else-if="meta.icon === 'approve'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M5.5 8l2 2 3.5-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<!-- done -->
|
|
<svg v-else-if="meta.icon === 'done'" class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<path d="M2.5 8.5l2 2M6 9l3.5-4M9.5 8.5l2 2 3-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<!-- cancel / unknown -->
|
|
<svg v-else class="w-3 h-3" viewBox="0 0 16 16" fill="none">
|
|
<circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5" />
|
|
<path d="M5.5 8h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
<span>{{ meta.label }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import {
|
|
BATCH_STATUS_TONE_CLASSES,
|
|
getBatchStatusMeta,
|
|
} from '../utils/batchStatus'
|
|
|
|
const props = defineProps<{
|
|
status: string | null | undefined
|
|
}>()
|
|
|
|
const meta = computed(() => getBatchStatusMeta(props.status))
|
|
const toneClass = computed(() => BATCH_STATUS_TONE_CLASSES[meta.value.tone])
|
|
</script>
|