forked from cypress-io/cypress
-
Notifications
You must be signed in to change notification settings - Fork 1
/
MigrationStep.vue
74 lines (70 loc) · 1.65 KB
/
MigrationStep.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
<div
v-if="step"
:data-cy="`migration-step ${step?.name}`"
class="border rounded bg-light-50 mb-4 w-full block"
:class="{
'default-ring': step.isCurrentStep,
'bg-gray-50 ': !step.isCurrentStep
}"
>
<ListRowHeader
class="-m-1px w-auto"
:description="description"
@click="emit('toggle')"
>
<template #icon>
<i-cy-status-pass-duotone_x24
v-if="step.isCompleted"
class="h-24px w-24px"
/>
<div
v-else
class="rounded-full h-24px text-center w-24px"
:class="step.isCurrentStep ? 'bg-indigo-100 text-indigo-600': 'bg-gray-100 text-gray-600'"
>
{{ step.index }}
</div>
</template>
<template #header>
<span
class="font-semibold inline-block align-top"
:class="step.isCurrentStep ? 'text-indigo-600': 'text-gray-600'"
>
{{ title }}
</span>
</template>
</ListRowHeader>
<div
v-if="step.isCurrentStep"
class="border-b border-b-gray-100 p-24px"
>
<slot />
</div>
<div
v-if="step.isCurrentStep"
class="p-24px"
>
<slot name="footer" />
</div>
</div>
</template>
<script setup lang="ts">
import { gql } from '@urql/vue'
import ListRowHeader from '@cy/components/ListRowHeader.vue'
import type { MigrationStepFragment } from '../../generated/graphql'
gql`
fragment MigrationStep on MigrationStep {
id
name
isCurrentStep
isCompleted
index
}`
defineProps<{
step?: MigrationStepFragment
title: string
description: string
}>()
const emit = defineEmits(['toggle'])
</script>