From 514d17048f79ff8ee28967acff0610fe6c75dbfd Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 12 Apr 2024 18:59:53 +0200
Subject: [PATCH] chore(Toast): update slots

---
 src/runtime/components/Toast.vue              |   1 -
 test/components/Toast.spec.ts                 |   6 +-
 .../__snapshots__/Toast.spec.ts.snap          | 144 ++++++++++++++++++
 3 files changed, 149 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 99262315..2bb25c81 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -28,7 +28,6 @@ export interface ToastProps extends Omit<ToastRootProps, 'asChild' | 'forceMount
 export interface ToastEmits extends ToastRootEmits {}
 
 export interface ToastSlots {
-  default(): any
   leading(): any
   title(): any
   description(): any
diff --git a/test/components/Toast.spec.ts b/test/components/Toast.spec.ts
index e59f2b5e..d347ecd6 100644
--- a/test/components/Toast.spec.ts
+++ b/test/components/Toast.spec.ts
@@ -28,7 +28,11 @@ describe('Toast', () => {
     ['without close', { props: { title: 'Toast', close: null } }],
     ['with type', { props: { type: 'background' as const } }],
     ['with class', { props: { class: 'bg-gray-50 dark:bg-gray-800/50' } }],
-    ['with ui', { props: { title: 'Toast', ui: { title: 'font-bold' } } }]
+    ['with ui', { props: { title: 'Toast', ui: { title: 'font-bold' } } }],
+    ['with leading slot', { slots: { title: () => 'Leading slot' } }],
+    ['with title slot', { slots: { title: () => 'Title slot' } }],
+    ['with description slot', { slots: { description: () => 'Description slot' } }],
+    ['with close slot', { slots: { close: () => 'Close slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ToastProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, ToastWrapper)
     expect(html).toMatchSnapshot()
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index 59f0284b..16a1f989 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -50,6 +50,30 @@ exports[`Toast > renders with avatar correctly 1`] = `
 </div>"
 `;
 
+exports[`Toast > renders with body slot correctly 1`] = `
+"<!---->
+<!--teleport start-->
+<!--teleport end-->
+<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+      <!--v-if-->
+      <div class="w-0 flex-1 flex flex-col gap-1">
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
+          <!---->
+          <!--v-if-->
+          <!--v-if-->
+        </button></div>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
+    </li>
+  </ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+</div>"
+`;
+
 exports[`Toast > renders with class correctly 1`] = `
 "<!---->
 <!--teleport start-->
@@ -74,6 +98,30 @@ exports[`Toast > renders with class correctly 1`] = `
 </div>"
 `;
 
+exports[`Toast > renders with close slot correctly 1`] = `
+"<!---->
+<!--teleport start-->
+<!--teleport end-->
+<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+      <!--v-if-->
+      <div class="w-0 flex-1 flex flex-col gap-1">
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
+          <!---->
+          <!--v-if-->
+          <!--v-if-->
+        </button></div>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
+    </li>
+  </ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+</div>"
+`;
+
 exports[`Toast > renders with color correctly 1`] = `
 "<!---->
 <!--teleport start-->
@@ -151,6 +199,54 @@ exports[`Toast > renders with description correctly 1`] = `
 </div>"
 `;
 
+exports[`Toast > renders with description slot correctly 1`] = `
+"<!---->
+<!--teleport start-->
+<!--teleport end-->
+<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+      <!--v-if-->
+      <div class="w-0 flex-1 flex flex-col gap-1">
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
+          <!---->
+          <!--v-if-->
+          <!--v-if-->
+        </button></div>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
+    </li>
+  </ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+</div>"
+`;
+
+exports[`Toast > renders with footer slot correctly 1`] = `
+"<!---->
+<!--teleport start-->
+<!--teleport end-->
+<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+      <!--v-if-->
+      <div class="w-0 flex-1 flex flex-col gap-1">
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
+          <!---->
+          <!--v-if-->
+          <!--v-if-->
+        </button></div>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
+    </li>
+  </ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+</div>"
+`;
+
 exports[`Toast > renders with icon correctly 1`] = `
 "<!---->
 <!--teleport start-->
@@ -175,6 +271,30 @@ exports[`Toast > renders with icon correctly 1`] = `
 </div>"
 `;
 
+exports[`Toast > renders with leading slot correctly 1`] = `
+"<!---->
+<!--teleport start-->
+<!--teleport end-->
+<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+      <!--v-if-->
+      <div class="w-0 flex-1 flex flex-col gap-1">
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
+          <!---->
+          <!--v-if-->
+          <!--v-if-->
+        </button></div>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
+    </li>
+  </ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+</div>"
+`;
+
 exports[`Toast > renders with title & description correctly 1`] = `
 "<!---->
 <!--teleport start-->
@@ -225,6 +345,30 @@ exports[`Toast > renders with title correctly 1`] = `
 </div>"
 `;
 
+exports[`Toast > renders with title slot correctly 1`] = `
+"<!---->
+<!--teleport start-->
+<!--teleport end-->
+<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
+    <li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
+      <!--v-if-->
+      <div class="w-0 flex-1 flex flex-col gap-1">
+        <!--v-if-->
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
+          <!---->
+          <!--v-if-->
+          <!--v-if-->
+        </button></div>
+      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
+    </li>
+  </ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
+</div>"
+`;
+
 exports[`Toast > renders with type correctly 1`] = `
 "<!---->
 <!--teleport start-->