66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
v-if="!isSidebarCollapsed"
|
|
class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
|
|
>
|
|
<div v-if="stepsCompleted != totalSteps" class="inline-flex gap-2">
|
|
<StepsIcon class="h-4 my-0.5 shrink-0" />
|
|
<div class="flex flex-col text-p-sm gap-0.5">
|
|
<div class="text-ink-gray-9 font-medium">
|
|
{{ __('Gettings started') }}
|
|
</div>
|
|
<div class="text-ink-gray-7">
|
|
{{ __('{0}/{1} steps', [stepsCompleted, totalSteps]) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex flex-col gap-1">
|
|
<div class="flex items-center justify-between gap-1">
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<StepsIcon class="h-4 my-0.5" />
|
|
<div class="text-ink-gray-9 font-medium">
|
|
{{ __('You are all set!') }}
|
|
</div>
|
|
</div>
|
|
<FeatherIcon
|
|
name="x"
|
|
class="h-4 cursor-pointer"
|
|
@click="
|
|
() => {
|
|
emit('showHelpCenter')
|
|
isOnboardingStepsCompleted = true
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="text-p-sm text-ink-gray-7">
|
|
{{ __('All steps are completed successfully!') }}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
v-if="stepsCompleted != totalSteps"
|
|
:label="__('Complete now')"
|
|
theme="blue"
|
|
@click="emit('completeNow')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import StepsIcon from '@/components/Icons/StepsIcon.vue'
|
|
import {
|
|
isOnboardingStepsCompleted,
|
|
useOnboarding,
|
|
} from '@/composables/onboarding'
|
|
|
|
const props = defineProps({
|
|
isSidebarCollapsed: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['completeNow', 'showHelpCenter'])
|
|
|
|
const { stepsCompleted, totalSteps } = useOnboarding()
|
|
</script>
|