e1594cab76
Extract useMachineCreatePage composable and 5 preview/selector components from machines/new.vue, reducing it from 1231 to 196 LOC. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
60 lines
1.9 KiB
Vue
60 lines
1.9 KiB
Vue
<template>
|
|
<div class="border border-base-200 rounded-md p-3 space-y-3">
|
|
<div class="flex flex-wrap items-start justify-between gap-2">
|
|
<div>
|
|
<p class="text-sm font-semibold">
|
|
{{ group.label }}
|
|
</p>
|
|
<p class="text-xs text-gray-500">
|
|
Type : {{ group.typeName }} · Min {{ group.min }} ·
|
|
{{ group.max !== null ? `Max ${group.max}` : 'Max ∞' }}
|
|
</p>
|
|
</div>
|
|
<span class="badge badge-sm" :class="getStatusBadgeClass(group.status)">
|
|
{{ group.completed }} / {{ group.total || 0 }} complétée(s)
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="group.issues.length" class="rounded bg-warning/10 border border-warning/30 p-2 text-[11px] text-warning">
|
|
<ul class="list-disc pl-4 space-y-1">
|
|
<li v-for="issue in group.issues" :key="issue.message">
|
|
{{ issue.message }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<ul class="space-y-2">
|
|
<li
|
|
v-for="entry in group.entries"
|
|
:key="entry.key"
|
|
class="flex items-start gap-3"
|
|
>
|
|
<component
|
|
:is="entry.status === 'complete' ? IconLucideCheckCircle2 : IconLucideCircle"
|
|
class="w-4 h-4 mt-0.5"
|
|
:class="entry.status === 'complete' ? 'text-success' : 'text-gray-400'"
|
|
aria-hidden="true"
|
|
/>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium" :class="entry.status === 'complete' ? 'text-gray-900' : 'text-gray-500'">
|
|
{{ entry.title }}
|
|
</p>
|
|
<p v-if="entry.subtitle" class="text-xs text-gray-500">
|
|
{{ entry.subtitle }}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getStatusBadgeClass } from '~/composables/useMachineCreatePreview'
|
|
import IconLucideCheckCircle2 from '~icons/lucide/check-circle-2'
|
|
import IconLucideCircle from '~icons/lucide/circle'
|
|
|
|
defineProps<{
|
|
group: any
|
|
}>()
|
|
</script>
|