chore: Update contacts page

This commit is contained in:
iamsivin
2026-01-22 09:35:58 +05:30
parent 7455838206
commit 6ce3423205
19 changed files with 840 additions and 510 deletions
@@ -58,28 +58,37 @@ const bulkCheckboxState = computed({
const animationClasses = computed(() => {
if (props.animationDirection === 'vertical') {
return {
enterFrom: 'opacity-0 transform -translate-y-4',
enterTo: 'opacity-100 transform translate-y-0',
enterActive: 'transition-all duration-200 ease-out origin-bottom',
enterFrom: 'opacity-0 scale-95 translate-y-2',
enterTo: 'opacity-100 scale-100 translate-y-0',
leaveActive: 'transition-all duration-150 ease-in origin-bottom',
leaveFrom: 'opacity-100 scale-100 translate-y-0',
leaveTo: 'opacity-0 scale-95 translate-y-2',
};
}
return {
enterFrom: 'opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4',
enterTo: 'opacity-100 transform translate-x-0',
enterActive: 'transition-all duration-300 ease-out',
enterFrom: 'opacity-0 ltr:-translate-x-4 rtl:translate-x-4',
enterTo: 'opacity-100 translate-x-0',
leaveActive: 'transition-all duration-200 ease-in',
leaveFrom: 'opacity-100 translate-x-0',
leaveTo: 'opacity-0 ltr:-translate-x-4 rtl:translate-x-4',
};
});
</script>
<template>
<transition
name="slide-fade"
enter-active-class="transition-all duration-300 ease-out"
<Transition
:enter-active-class="animationClasses.enterActive"
:enter-from-class="animationClasses.enterFrom"
:enter-to-class="animationClasses.enterTo"
leave-active-class="hidden opacity-0"
:leave-active-class="animationClasses.leaveActive"
:leave-from-class="animationClasses.leaveFrom"
:leave-to-class="animationClasses.leaveTo"
>
<div
v-if="hasSelected"
class="flex items-center gap-3 py-2 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container -outline-offset-1 shadow-sm"
class="flex items-center gap-3 py-2 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container -outline-offset-1 shadow-sm origin-bottom"
>
<div class="flex items-center gap-3">
<div class="flex items-center gap-1.5 min-w-0">
@@ -116,5 +125,5 @@ const animationClasses = computed(() => {
<div v-else class="flex items-center gap-3">
<slot name="default-actions" />
</div>
</transition>
</Transition>
</template>