feat(Alert/Toast)!: add orientation prop

docs/app/components/content/examples/toast/ToastOrientationExample.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const toast = useToast()
+
+const props = defineProps<{
+  orientation: 'horizontal' | 'vertical'
+}>()
+
+function showToast() {
+  toast.add({
+    title: 'Uh oh! Something went wrong.',
+    orientation: props.orientation,
+    actions: [{
+      icon: 'i-lucide-refresh-cw',
+      label: 'Retry',
+      color: 'neutral',
+      variant: 'outline',
+      onClick: (e) => {
+        e?.stopPropagation()
+      }
+    }]
+  })
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
+</template>

docs/content/3.components/alert.md

@@ -215,8 +215,30 @@ props:
 ---
 ::
 
-::note
-Actions renders differently when the description is not set. You can try to remove it.
+### Orientation
+
+Use the `orientation` prop to change the orientation of the Alert.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - actions
+  - color
+  - variant
+props:
+  title: 'Heads up!'
+  description: 'You can change the primary color in your app config.'
+  color: neutral
+  variant: outline
+  orientation: horizontal
+  actions:
+    - label: Action 1
+    - label: Action 2
+      color: neutral
+      variant: subtle
+---
 ::
 
 ## Examples

docs/content/3.components/toast.md

@@ -154,8 +154,21 @@ name: 'toast-actions-example'
 ---
 ::
 
-::note
-Actions renders differently when the description is not set. You can try to remove it.
+### Orientation
+
+Use the `orientation` prop to change the orientation of the Toast.
+
+::component-example
+---
+options:
+  - name: 'orientation'
+    label: 'orientation'
+    default: 'horizontal'
+    items:
+      - horizontal
+      - vertical
+name: 'toast-orientation-example'
+---
 ::
 
 ## Examples