45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<template>
|
|
<div class="flex flex-col justify-center items-center gap-1 mb-3">
|
|
<CRMLogo class="size-10 shrink-0 rounded mb-4" />
|
|
<div class="text-base font-medium">
|
|
{{ __('Welcome to Frappe CRM') }}
|
|
</div>
|
|
<div class="text-p-base font-normal">
|
|
{{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2.5 overflow-hidden">
|
|
<div class="flex justify-between items-center py-0.5">
|
|
<div class="text-base font-medium">{{ __('Getting started') }}</div>
|
|
<Badge
|
|
:label="__('{0}% completed', [completedPercentage])"
|
|
theme="orange"
|
|
size="lg"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5 overflow-y-auto">
|
|
<div
|
|
v-for="step in steps"
|
|
:key="step.title"
|
|
class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
|
|
:class="[
|
|
step.completed ? 'text-ink-gray-5 line-through' : 'text-ink-gray-8',
|
|
]"
|
|
@click="() => !step.completed && step.onClick()"
|
|
>
|
|
<component :is="step.icon" class="h-4" />
|
|
<div class="text-base">{{ step.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import CRMLogo from '@/components/Icons/CRMLogo.vue'
|
|
import { useOnboarding } from '@/composables/onboarding'
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const { steps, stepsCompleted, totalSteps, completedPercentage } =
|
|
useOnboarding()
|
|
</script>
|