ui/test/components/__snapshots__/Drawer-vue.spec.ts.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Drawer > renders with body slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <!--v-if-->
    <div class="flex-1">Body slot</div>
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with class correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%] bg-[var(--ui-bg-elevated)]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with content slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>Content slot
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with default slot correctly 1`] = `
"Default slot
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-v-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-2" aria-labelledby="radix-vue-dialog-title-v-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with description correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with description slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <!--v-if-->
      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description slot</p>
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with footer slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <!--v-if-->
    <!--v-if-->
    <div class="flex flex-col gap-1.5">Footer slot</div>
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with header slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">Header slot</div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with left direction correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with right direction correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with title correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
      <!--v-if-->
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with title slot correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title slot</h2>
      <!--v-if-->
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with top direction correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mb-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders with ui correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 h-1.5 mx-auto w-20"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <!--v-if-->
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders without handle correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 bg-[var(--ui-bg-elevated)]/75"></div>
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <!--v-if-->
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;

exports[`Drawer > renders without overlay correctly 1`] = `
"<!--v-if-->
<!--teleport start-->


<!--v-if-->
<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-1" aria-labelledby="radix-vue-dialog-title-v-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)] inset-x-0 h-auto max-h-[96%]">
  <div class="shrink-0 rounded-full bg-[var(--ui-bg-accented)] mt-4 w-12 h-1.5 mx-auto"></div>
  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
    <div class="">
      <h2 id="radix-vue-dialog-title-v-0" class="text-[var(--ui-text-highlighted)] font-semibold">Title</h2>
      <p id="radix-vue-dialog-description-v-1" class="mt-1 text-[var(--ui-text-muted)] text-sm">Description</p>
    </div>
    <!--v-if-->
    <!--v-if-->
  </div>
</div>


<!--teleport end-->"
`;