mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
feat(InputTags): new component (#4261)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
zhong666
GitHub
@@ -482,6 +482,70 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
|
||||
<div dir="ltr" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div>
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-1" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="false" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
|
||||
<!---->
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-2" data-state="open" data-side="bottom" data-align="center">
|
||||
<!---->
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
|
||||
<!--v-if-->
|
||||
<div role="group" aria-labelledby="" id="reka-combobox-group-v-3" class="p-1 isolate">
|
||||
<div id="reka-combobox-item-v-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span></div>
|
||||
<div id="reka-combobox-item-v-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span></div>
|
||||
<div id="reka-combobox-item-v-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-13" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with multiple correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="false" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
|
||||
<!---->
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
|
||||
<!---->
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
|
||||
<!--v-if-->
|
||||
<div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
|
||||
<div id="reka-combobox-item-v-3" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with name correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
|
||||
|
||||
@@ -482,6 +482,70 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
|
||||
<div dir="ltr" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div>
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-1" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-1" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="false" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-0-0-5">
|
||||
<!---->
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-2" data-state="open" data-side="bottom" data-align="center">
|
||||
<!---->
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
|
||||
<!--v-if-->
|
||||
<div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-3" class="p-1 isolate">
|
||||
<div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-13" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with multiple correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="false" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
|
||||
<!---->
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
|
||||
<!---->
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
|
||||
<!--v-if-->
|
||||
<div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
|
||||
<div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with name correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
|
||||
|
||||
291
test/components/__snapshots__/InputTags-vue.spec.ts.snap
Normal file
291
test/components/__snapshots__/InputTags-vue.spec.ts.snap
Normal file
@@ -0,0 +1,291 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`InputTags > renders with ariaLabel correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-label="Aria label" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with as correctly 1`] = `
|
||||
"<section class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with class correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with default slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">Default slot
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with defaultValue correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with disabled correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr" data-disabled=""><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" disabled="" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with id correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input id="id" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with item-delete slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with item-text slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loading correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loading trailing correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with modelValue correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with name correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant ghost correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant none correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant outline correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant soft correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant subtle correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with placeholder correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant ghost correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant none correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant outline correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant soft correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant subtle correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with required correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size lg correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size md correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size sm correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size xl correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size xs correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailing and icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailing slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with ui correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
291
test/components/__snapshots__/InputTags.spec.ts.snap
Normal file
291
test/components/__snapshots__/InputTags.spec.ts.snap
Normal file
@@ -0,0 +1,291 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`InputTags > renders with ariaLabel correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-label="Aria label" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with as correctly 1`] = `
|
||||
"<section class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with class correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with default slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">Default slot
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with defaultValue correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with disabled correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr" data-disabled=""><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" disabled="" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with id correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input id="id" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with item-delete slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with item-text slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loading correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loading trailing correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with modelValue correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with name correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant ghost correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant none correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant outline correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant soft correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant subtle correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with placeholder correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant ghost correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant none correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant outline correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant soft correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant subtle correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with required correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size lg correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size md correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size sm correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size xl correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size xs correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailing and icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailing slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with ui correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
Reference in New Issue
Block a user