feat(CommandPalette): new component (#80)

This commit is contained in:
Benjamin Canac
2024-04-30 18:14:18 +02:00
committed by GitHub
parent 559a8cba58
commit d0017bf847
30 changed files with 1832 additions and 125 deletions

View File

@@ -87,11 +87,7 @@ exports[`Toast > renders with close slot correctly 1`] = `
<!--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-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="flex gap-1.5 shrink-0 items-center">Close slot</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>
@@ -233,7 +229,7 @@ exports[`Toast > renders with description slot correctly 1`] = `
<!--v-if-->
<div class="w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<!--v-if-->
<div class="text-sm text-gray-500 dark:text-gray-400">Description slot</div>
<!--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-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">
@@ -277,9 +273,7 @@ exports[`Toast > renders with leading slot correctly 1`] = `
<!--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">
<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">Leading slot<div class="w-0 flex-1 flex flex-col gap-1">
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -354,7 +348,7 @@ exports[`Toast > renders with title slot correctly 1`] = `
<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-->
<div class="text-sm font-medium text-gray-900 dark:text-white">Title slot</div>
<!--v-if-->
<!--v-if-->
</div>