mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Benjamin Canac
963 lines
83 KiB
Plaintext
963 lines
83 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`FileUpload > renders with accept correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="image/*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with actions slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<div class="flex flex-wrap gap-1.5 shrink-0 mt-4">Actions slot</div>
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with ariaLabel correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" aria-label="Aria label" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with as correctly 1`] = `
|
|
"<section class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</section>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with class correctly 1`] = `
|
|
"<div class="relative flex flex-col w-full gap-4">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with default slot correctly 1`] = `"<div class="relative flex flex-col">Default slot<input type="file" accept="*" class="sr-only" tabindex="-1"></div>"`;
|
|
|
|
exports[`FileUpload > renders with description correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<div class="text-muted mt-1">SVG, PNG, JPG or GIF (max. 2MB)</div>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with description slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<div class="text-muted mt-1">Description slot</div>
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with disabled correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" disabled="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with disabled correctly 2`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 cursor-not-allowed opacity-75 focus-visible:outline-primary" tabindex="-1">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" disabled="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with file slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0">File slot</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with file-leading slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0">File leading slot<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button></div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with file-name slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">File name slot</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with file-size slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">File size slot</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with file-trailing slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div>File trailing slot
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with fileDelete correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with fileDeleteIcon correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:trash shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with fileIcon correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with files slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">Files slot</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with files-bottom slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>Files bottom slot<input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with files-top slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>Files top slot<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with icon correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:image text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with id correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input id="id" type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with label correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<div class="font-medium text-default mt-2">Drop your image here</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with label slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<div class="font-medium text-default mt-2">Label slot</div>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with layout grid correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with layout grid multiple correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
|
|
<div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" multiple="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with layout list correctly 1`] = `
|
|
"<div class="relative flex flex-col gap-2 items-start">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col w-full gap-2">
|
|
<div class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex flex-col min-w-0"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with layout list multiple correctly 1`] = `
|
|
"<div class="relative flex flex-col gap-2 items-start">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col w-full gap-2">
|
|
<div class="relative text-xs px-2.5 py-1.5 gap-1.5 min-w-0 flex items-center border border-default rounded-md w-full"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex flex-col min-w-0"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5 ms-auto -me-1.5">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" multiple="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with leading slot correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3">Leading slot
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with modelValue correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with multiple correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
|
|
<div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" multiple="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with name correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" name="name" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with neutral color correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-inverted hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with position inside correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with position inside multiple correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
|
|
<div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" multiple="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with position outside correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with position outside multiple correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full">
|
|
<div class="relative text-xs gap-1.5 p-0 aspect-square"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!--v-if-->
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" multiple="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with required correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" required="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with required correctly 2`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" required="" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size lg correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-9 text-lg shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size lg variant button correctly 1`] = `
|
|
"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
</div>
|
|
</button>
|
|
<div class="">
|
|
<div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-lg shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="36" height="36" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate text-xs">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size md correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size md variant button correctly 1`] = `
|
|
"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
</div>
|
|
</button>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size sm correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-7 text-sm shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size sm variant button correctly 1`] = `
|
|
"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
</div>
|
|
</button>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-sm shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="28" height="28" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size xl correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-10 text-xl shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size xl variant button correctly 1`] = `
|
|
"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-base border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-2 hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-6" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
</div>
|
|
</button>
|
|
<div class="">
|
|
<div class="text-sm gap-2 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xl shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="40" height="40" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size xs correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-6 text-xs shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with size xs variant button correctly 1`] = `
|
|
"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-xs border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1 hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-4" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
</div>
|
|
</button>
|
|
<div class="">
|
|
<div class="text-xs gap-1 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-xs shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="24" height="24" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="min-w-0 flex-row gap-1 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with ui correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25 rounded-xl" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with variant area correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders with variant button correctly 1`] = `
|
|
"<div class="relative flex flex-col"><button type="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary p-1.5 hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center"><span class="iconify i-lucide:upload shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
</div>
|
|
</button>
|
|
<div class="">
|
|
<div class="text-xs gap-1.5 absolute inset-0 p-0"><span class="inline-flex items-center justify-center select-none align-middle bg-elevated text-base shrink-0 size-full rounded-lg"><img src="blob:mock-url-file.txt" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
|
|
<div class="flex-col min-w-0 hidden"><span class="text-default truncate">file.txt</span><span class="text-muted truncate">0B</span></div><button type="button" aria-label="Remove file.txt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted absolute -top-1.5 -end-1.5 p-0 rounded-full border-2 border-bg">
|
|
<!--v-if-->
|
|
<!--v-if--><span class="iconify i-lucide:x shrink-0 size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders without dropzone correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|
|
|
|
exports[`FileUpload > renders without interactive correctly 1`] = `
|
|
"<div class="relative flex flex-col">
|
|
<div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary" tabindex="-1">
|
|
<!--v-if-->
|
|
<div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</div>
|
|
</div>
|
|
<!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
|
|
</div>"
|
|
`;
|