feat: add motion

related to #12

Author: Barbapapazes

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@inertiajs/vue3": "^2.0.17",
     "@nuxt/ui-pro": "^3.3.0",
-    "@vueuse/core": "^13.6.0"
+    "@vueuse/core": "^13.6.0",
+    "motion-v": "^1.7.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^5.2.1",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ const deleteCurrentUserSection = tv({
 })
 
 export interface DeleteCurrentUserSectionProps {
+  delay?: number
   class?: any
   ui?: Partial<typeof deleteCurrentUserSection.slots>
 }
@@ -36,6 +37,7 @@ const ui = computed(() => deleteCurrentUserSection())
   <ProfileSection
     title="Delete Account"
     description="Permanently delete your account."
+    :delay="props.delay"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
   >
     <template #actions>

resources/js/components/Profile/DeleteCurrentUserSection.vue

@@ -10,6 +10,7 @@ const passwordSection = tv({
 })
 
 export interface PasswordSectionProps {
+  delay?: number
   class?: any
   ui?: Partial<typeof passwordSection.slots>
 }
@@ -56,6 +57,7 @@ const ui = computed(() => passwordSection())
   <ProfileSection
     title="Update Password"
     description="Ensure your account is using a long, random password to stay secure."
+    :delay="props.delay"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     :ui="{ actions: 'flex-row-reverse lg:flex-row' }"
   >

resources/js/components/Profile/PasswordSection.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { Motion } from 'motion-v'
+
 const profileSection = tv({
   slots: {
     base: 'flex flex-col gap-6',
@@ -7,6 +9,7 @@ const profileSection = tv({
 })
 
 export interface ProfileSectionProps {
+  delay?: number
   title: string
   description?: string
   class?: any
@@ -20,7 +23,9 @@ export interface ProfileSectionSlots {
 </script>
 
 <script lang="ts" setup>
-const props = defineProps<ProfileSectionProps>()
+const props = withDefaults(defineProps<ProfileSectionProps>(), {
+  delay: 0,
+})
 defineEmits<ProfileSectionEmits>()
 const slots = defineSlots<ProfileSectionSlots>()
 
@@ -30,17 +35,44 @@ const ui = computed(() => profileSection())
 <template>
   <div :class="ui.base({ class: [props.ui?.base, props.class] })">
     <UPageCard
-      :title="props.title"
-      :description="props.description"
       variant="naked"
       orientation="horizontal"
     >
-      <div :class="ui.actions({ class: props.ui?.actions })">
-        <slot name="actions" />
-      </div>
-    </UPageCard>
-    <UPageCard v-if="!!slots.default" variant="subtle">
-      <slot />
+      <template #title>
+        <Motion
+          :initial="{ opacity: 0, transform: 'translateY(10px)' }"
+          :animate="{ opacity: 1, transform: 'translateY(0)', transition: { duration: 0.3, delay: props.delay } }"
+        >
+          {{ props.title }}
+        </Motion>
+      </template>
+
+      <template #description>
+        <Motion
+          :initial="{ opacity: 0, transform: 'translateY(10px)' }"
+          :animate="{ opacity: 1, transform: 'translateY(0)', transition: { duration: 0.2, delay: 0.1 + props.delay } }"
+        >
+          {{ props.description }}
+        </Motion>
+      </template>
+
+      <Motion
+        :initial="{ opacity: 0, scale: 0.96 }"
+        :animate="{ opacity: 1, scale: 1, transition: { duration: 0.2, delay: 0.1 + props.delay } }"
+      >
+        <div :class="ui.actions({ class: props.ui?.actions })">
+          <slot name="actions" />
+        </div>
+      </Motion>
     </UPageCard>
+
+    <Motion
+      :initial="{ opacity: 0, transform: 'translateY(10px)' }"
+      :animate="{ opacity: 1, transform: 'translateY(0)', transition: { duration: 0.2, delay: 0.25 + props.delay } }"
+    >
+      <UPageCard v-if="!!slots.default" variant="subtle">
+        <slot />
+      </UPageCard>
+    </Motion>
   </div>
 </template>

resources/js/components/Profile/ProfileSection.vue

@@ -15,6 +15,7 @@ const twoFactorAuthenticationSection = tv({
 })
 
 export interface TwoFactorAuthenticationSectionProps {
+  delay?: number
   class?: any
   ui?: Partial<typeof twoFactorAuthenticationSection.slots>
 }
@@ -131,6 +132,7 @@ const ui = computed(() => twoFactorAuthenticationSection())
   <ProfileSection
     title="Two Factor Authentication"
     description="Add additional security to your account using two factor authentication."
+    :delay="props.delay"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     :ui="{ actions: 'flex-row-reverse lg:flex-row' }"
   >

resources/js/components/Profile/TwoFactorAuthenticationSection.vue

@@ -14,6 +14,7 @@ const userProfileInformationSection = tv({
 })
 
 export interface UserProfileInformationSectionProps {
+  delay?: number
   class?: any
   ui?: Partial<typeof userProfileInformationSection.slots>
 }
@@ -72,6 +73,7 @@ const ui = computed(() => userProfileInformationSection())
   <ProfileSection
     title="Profile Information"
     description="These informations will be displayed publicly."
+    :delay="props.delay"
     :class="ui.base({ class: [props.ui?.base, props.class] })"
     :ui="{ actions: 'flex-row-reverse lg:flex-row' }"
   >

resources/js/components/Profile/UserProfileInformationSection.vue

@@ -15,15 +15,15 @@
 
       <template #body>
         <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
-          <UserProfileInformationSection />
+          <UserProfileInformationSection :delay="0" />
 
-          <PasswordSection />
+          <PasswordSection :delay="0.3" />
 
-          <TwoFactorAuthenticationSection />
+          <TwoFactorAuthenticationSection :delay="0.6" />
 
-          <SessionsSection />
+          <SessionsSection :delay="0.9" />
 
-          <DeleteCurrentUserSection />
+          <DeleteCurrentUserSection :delay="1.2" />
         </div>
       </template>
     </UDashboardPanel>