mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
feat(Progress): new component (#75)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
GitHub
33
test/components/Progress.spec.ts
Normal file
33
test/components/Progress.spec.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import Progress, { type ProgressProps, type ProgressSlots } from '../../src/runtime/components/Progress.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
import theme from '#build/ui/progress'
|
||||
|
||||
describe('Progress', () => {
|
||||
const sizes = Object.keys(theme.variants.size) as any
|
||||
const colors = Object.keys(theme.variants.color) as any
|
||||
const orientations = Object.keys(theme.variants.orientation) as any
|
||||
const animations = Object.keys(theme.variants.animation) as any
|
||||
const max = ['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']
|
||||
|
||||
it.each([
|
||||
// Props
|
||||
['with modelValue', { props: { modelValue: 50 } }],
|
||||
['with status', { props: { modelValue: 50, status: true } }],
|
||||
['with status inverted', { props: { modelValue: 50, status: true, inverted: true } }],
|
||||
['with max', { props: { modelValue: 2, status: true, max } }],
|
||||
['with max inverted', { props: { modelValue: 2, status: true, inverted: true, max } }],
|
||||
['with as', { props: { as: 'span' } }],
|
||||
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
|
||||
...colors.map((color: string) => [`with color ${color}`, { props: { color } }]),
|
||||
...orientations.map((orientation: string) => [`with orientation ${orientation}`, { props: { orientation } }]),
|
||||
...animations.map((animation: string) => [`with animation ${animation}`, { props: { animation } }]),
|
||||
['with class', { props: { class: 'w-48' } }],
|
||||
['with ui', { props: { ui: { base: 'bg-white dark:bg-gray-900' } } }],
|
||||
// Slots
|
||||
['with status slot', { slots: { status: () => 'Status slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ProgressProps, slots?: Partial<ProgressSlots> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Progress)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
260
test/components/__snapshots__/Progress.spec.ts.snap
Normal file
260
test/components/__snapshots__/Progress.spec.ts.snap
Normal file
@@ -0,0 +1,260 @@
|
||||
// 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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel-inverse_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Progress > renders with as correctly 1`] = `
|
||||
"<div class="gap-2 w-full flex flex-col">
|
||||
<!--v-if--><span aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div></span>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Progress > renders with color green correctly 1`] = `
|
||||
"<div class="gap-2 w-full flex flex-col">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-green-500 dark:bg-green-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Progress > renders with color primary correctly 1`] = `
|
||||
"<div class="gap-2 w-full flex flex-col">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Progress > renders with color red correctly 1`] = `
|
||||
"<div class="gap-2 w-full flex flex-col">
|
||||
<!--v-if-->
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-red-500 dark:bg-red-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></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-gray-400 dark:text-gray-500 transition-transform text-sm flex-row" style="width: 50%;">50% </div>
|
||||
<div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(-50%);"></div>
|
||||
</div>
|
||||
<div class="grid items-end text-primary-500 dark:text-primary-400 text-sm">
|
||||
<div class="transition-opacity truncate text-end row-start-1 col-start-1 opacity-0">Waiting...</div>
|
||||
<div class="transition-opacity truncate text-end row-start-1 col-start-1 opacity-0">Cloning...</div>
|
||||
<div class="transition-opacity truncate text-end row-start-1 col-start-1 opacity-100">Migrating...</div>
|
||||
<div class="transition-opacity truncate text-end row-start-1 col-start-1 opacity-0">Deploying...</div>
|
||||
<div class="transition-opacity truncate text-end row-start-1 col-start-1 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-gray-400 dark:text-gray-500 transition-transform text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
|
||||
<div aria-valuemax="4" aria-valuemin="0" aria-valuenow="2" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="2" data-max="4" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]" style="transform: translateX(50%);"></div>
|
||||
</div>
|
||||
<div class="grid items-end text-primary-500 dark:text-primary-400 text-sm">
|
||||
<div class="transition-opacity truncate row-start-1 col-start-1 opacity-0 text-start">Waiting...</div>
|
||||
<div class="transition-opacity truncate row-start-1 col-start-1 opacity-0 text-start">Cloning...</div>
|
||||
<div class="transition-opacity truncate row-start-1 col-start-1 opacity-100 text-start">Migrating...</div>
|
||||
<div class="transition-opacity truncate row-start-1 col-start-1 opacity-0 text-start">Deploying...</div>
|
||||
<div class="transition-opacity truncate row-start-1 col-start-1 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-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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-gray-400 dark:text-gray-500 transition-transform text-sm flex-row" style="width: 50%;">50% </div>
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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-gray-400 dark:text-gray-500 transition-transform text-sm self-end flex-row-reverse" style="width: 50%;">50% </div>
|
||||
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50%" aria-label="50%" role="progressbar" data-state="loading" data-value="50" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_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" aria-valuetext="0%" aria-label="0%" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-white dark:bg-gray-900 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-500 dark:bg-primary-400 data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]"></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
Reference in New Issue
Block a user