scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 03:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Update wizard component UI (#12358)

Browse Source
This commit is contained in:
Sivin Varghese
2025-09-03 17:07:12 +05:30
committed by GitHub
parent ef4e287f0d
commit 4cba32b2d7
1 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
app/javascript/dashboard/components/ui/Wizard.vue
View File

@@ -1,6 +1,7 @@
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import Icon from 'next/icon/Icon.vue';
const props = defineProps({
items: {
@@ -12,62 +13,67 @@ const props = defineProps({
const route = useRoute();
const activeIndex = computed(() => {
return props.items.findIndex(i => i.route === route.name);
const index = props.items.findIndex(i => i.route === route.name);
return index === -1 ? 0 : index;
});
const isActive = item => {
return props.items.indexOf(item) === activeIndex.value;
};
const isOver = item => {
return props.items.indexOf(item) < activeIndex.value;
};
const steps = computed(() =>
props.items.map((item, index) => {
const isActive = index === activeIndex.value;
const isOver = index < activeIndex.value;
return {
...item,
index,
isActive,
isOver,
};
})
);
</script>
<template>
<transition-group tag="div">
<div
v-for="(item, index) in items"
:key="item.route"
class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden"
:class="
isOver(item)
? 'after:bg-n-blue-9 before:bg-n-blue-9'
: 'after:bg-n-weak before:bg-n-weak'
"
v-for="step in steps"
:key="step.route"
class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden after:bg-n-slate-3 before:bg-n-slate-3"
>
<!-- Circle -->
<div
class="rounded-2xl flex-shrink-0 size-8 flex items-center justify-center left-2 outline outline-2 leading-4 z-10 top-5 bg-n-background"
:class="
isActive(item) || isOver(item) ? 'outline-n-blue-9' : 'outline-n-weak'
"
class="rounded-2xl flex-shrink-0 size-8 border-2 border-n-slate-3 flex items-center justify-center left-2 leading-4 z-10 top-5 transition-all duration-300 ease-in-out"
:class="{
'bg-n-slate-3': step.isActive || step.isOver,
'bg-n-background': !step.isActive && !step.isOver,
}"
>
<span
class="text-xs font-bold"
:class="
isActive(item) || isOver(item)
? 'text-n-blue-11'
: 'text-n-slate-11'
"
v-if="!step.isOver"
:key="'num-' + step.index"
class="text-xs font-bold transition-colors duration-300"
:class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-11'"
>
{{ index + 1 }}
{{ step.index + 1 }}
</span>
<Icon
v-else
:key="'check-' + step.index"
icon="i-lucide-check"
class="text-n-slate-11 size-4"
/>
</div>
<!-- Content -->
<div class="flex flex-col items-start gap-1.5 pb-10 pt-1">
<div class="flex items-center">
<h3
class="text-sm font-medium overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
:class="
isActive(item) || isOver(item)
? 'text-n-blue-11'
: 'text-n-slate-12'
"
:class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-12'"
>
{{ item.title }}
{{ step.title }}
</h3>
</div>
<p class="m-0 mt-1.5 text-sm text-n-slate-11">
{{ item.body }}
{{ step.body }}
</p>
</div>
</div>