feat(Alert/Toast)!: add orientation prop

playground/app/pages/components/alert.vue

@@ -6,7 +6,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
 const actions = (color: string) => [{
   label: 'Action',
   color: color as any,
-  click() {
+  onClick() {
     console.log('Action clicked')
   }
 }]
@@ -15,21 +15,21 @@ const multipleActions = (color: string) => [
   {
     label: 'Action',
     color: color as any,
-    click() {
+    onClick() {
       console.log('Action clicked')
     }
   },
   {
     label: 'Another action',
     color: color as any,
-    click() {
+    onClick() {
       console.log('Another action clicked')
     }
   },
   {
     label: 'One more action',
     color: color as any,
-    click() {
+    onClick() {
       console.log('One more action clicked')
     }
   },
@@ -37,7 +37,7 @@ const multipleActions = (color: string) => [
     label: 'And one more',
     color: color as any,
     icon: 'i-lucide-info',
-    click() {
+    onClick() {
       console.log('And one more clicked')
     }
   },
@@ -45,7 +45,7 @@ const multipleActions = (color: string) => [
     label: 'Last one',
     color: color as any,
     icon: 'i-lucide-info',
-    click() {
+    onClick() {
       console.log('Last one clicked')
     }
   }
@@ -65,7 +65,7 @@ const data = {
       <UAlert :title="data.title" />
       <UAlert :title="data.title" :icon="data.icon" />
       <UAlert :title="data.title" :icon="data.icon" :close="data.close" />
-      <UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('neutral')" />
+      <UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('neutral')" orientation="horizontal" />
       <UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
       <UAlert :title="data.title" :avatar="{ src: 'https://github.com/benjamincanac.png' }" :close="data.close" :description="data.description" />
       <UAlert :title="data.title" :icon="data.icon" description="example with multiple actions." :actions="multipleActions('neutral')" />

playground/app/pages/components/toast.vue

@@ -20,7 +20,21 @@ const templates = (id: number) => [{
 }, {
   title: 'Toast',
   description: `This is the toast ${id}`,
-  icon: 'i-lucide-rocket'
+  icon: 'i-lucide-rocket',
+  actions: [{
+    label: 'Action 1',
+    color: 'neutral' as const,
+    onClick() {
+      console.log(`Toast ${id} action 1 clicked`)
+    }
+  }, {
+    label: 'Action 2',
+    color: 'neutral' as const,
+    variant: 'outline' as const,
+    onClick() {
+      console.log(`Toast ${id} action 2 clicked`)
+    }
+  }]
 }, {
   title: `Toast ${id}`,
   icon: 'i-lucide-rocket'
@@ -41,34 +55,36 @@ const templates = (id: number) => [{
   },
   actions: [{
     label: 'Action',
-    click() {
+    onClick() {
       console.log(`Toast ${id} action clicked`)
     }
   }]
 }, {
   title: `Toast ${id}`,
   icon: 'i-lucide-rocket',
+  orientation: 'horizontal' as const,
   actions: [{
     label: 'Action 1',
     color: 'neutral' as const,
-    click() {
+    onClick() {
       console.log(`Toast ${id} action 1 clicked`)
     }
   }, {
     label: 'Action 2',
     color: 'neutral' as const,
     variant: 'outline' as const,
-    click() {
+    onClick() {
       console.log(`Toast ${id} action 2 clicked`)
     }
   }]
 }, {
   description: `This is the toast ${id}`,
   icon: 'i-lucide-rocket',
+  orientation: 'horizontal' as const,
   actions: [{
     label: 'Action',
     variant: 'outline' as const,
-    click() {
+    onClick() {
       console.log(`Toast ${id} action clicked`)
     }
   }]