mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
f761369888
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
244 lines
17 KiB
Plaintext
244 lines
17 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`Progress > renders with animation carousel correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with animation carousel-inverse correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with animation elastic correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with animation swing correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with as correctly 1`] = `
|
|
"<section class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</section>"
|
|
`;
|
|
|
|
exports[`Progress > renders with class correctly 1`] = `
|
|
"<div class="gap-2 flex flex-col w-48">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with color neutral correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-inverted data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with max correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
|
|
<div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
|
|
</div>
|
|
<div class="grid items-end text-primary text-sm">
|
|
<div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Waiting...</div>
|
|
<div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Cloning...</div>
|
|
<div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-100">Migrating...</div>
|
|
<div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Deploying...</div>
|
|
<div class="truncate text-end row-start-1 col-start-1 transition-opacity opacity-0">Done!</div>
|
|
</div>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with max inverted correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
|
|
<div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="loading" data-value="2" data-max="4" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
|
|
</div>
|
|
<div class="grid items-end text-primary text-sm">
|
|
<div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Waiting...</div>
|
|
<div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Cloning...</div>
|
|
<div class="truncate row-start-1 col-start-1 transition-opacity opacity-100 text-start">Migrating...</div>
|
|
<div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Deploying...</div>
|
|
<div class="truncate row-start-1 col-start-1 transition-opacity opacity-0 text-start">Done!</div>
|
|
</div>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with modelValue correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with orientation horizontal correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with orientation vertical correctly 1`] = `
|
|
"<div class="gap-2 h-full flex flex-row-reverse">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented h-full w-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with size 2xl correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-5" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with size 2xs correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-px" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with size lg correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-3" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with size md correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with size sm correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-1" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with size xl correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-4" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with size xs correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-0.5" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with status correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm flex-row" style="width: 50%;">50% </div>
|
|
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with status inverted correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<div class="flex justify-end text-dimmed transition-[width] duration-200 text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
|
|
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="loading" data-value="50" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with status slot correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Progress > renders with ui correctly 1`] = `
|
|
"<div class="gap-2 w-full flex flex-col">
|
|
<!--v-if-->
|
|
<div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full w-full h-2 bg-default" style="transform: translateZ(0);">
|
|
<div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>"
|
|
`;
|