arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(InputMenu/Select/SelectMenu): arrow prop implementation (#2503)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alexander
2024-10-31 19:09:24 +05:00
committed by GitHub
parent c85ba43040
commit f26f6c8168
12 changed files with 321 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
docs/content/3.components/input-menu.md
View File

@@ -251,6 +251,31 @@ props:
---
::
### Arrow
Use the `arrow` prop to display an arrow on the InputMenu.
::component-code
---
prettier: true
ignore:
- items
- modelValue
- arrow
external:
- items
- modelValue
props:
modelValue: Backlog
arrow: true
items:
- Backlog
- Todo
- In Progress
- Done
---
::
### Color
Use the `color` prop to change the ring color when the InputMenu is focused.

27
docs/content/3.components/select-menu.md
View File

@@ -275,6 +275,33 @@ props:
---
::
### Arrow
Use the `arrow` prop to display an arrow on the SelectMenu.
::component-code
---
prettier: true
ignore:
- items
- modelValue
- class
- arrow
external:
- items
- modelValue
props:
modelValue: Backlog
arrow: true
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-48'
---
::
### Color
Use the `color` prop to change the ring color when the SelectMenu is focused.

32
docs/content/3.components/select.md
View File

@@ -160,7 +160,7 @@ props:
### Content
Use the `content` prop to control how the Select content is rendered, like its its `align`, `side` or `position` for example. Defaults to `popper` to match other components.
Use the `content` prop to control how the Select content is rendered, like its `align`, `side` or `position` for example.
::warning
The `content.align`, `content.side`, etc. properties only apply when `content.position` is set to `popper`.
@@ -209,6 +209,36 @@ props:
Read more about the `content.position` prop in the [Radix Vue documentation](https://www.radix-vue.com/components/select.html#change-the-positioning-mode).
::
<!--
### Arrow
Use the `arrow` prop to display an arrow on the Select.
::component-code
---
prettier: true
ignore:
- items
- modelValue
- class
- arrow
external:
- items
- modelValue
props:
modelValue: 'Todo'
arrow: true
items:
- Backlog
- Todo
- In Progress
- Done
class: 'w-48'
---
::
-->
### Color
Use the `color` prop to change the ring color when the Select is focused.

6
src/runtime/components/InputMenu.vue
View File

@@ -126,7 +126,7 @@ export interface InputMenuSlots<T> {
<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue> = MaybeArrayOfArray<InputMenuItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
import { computed, ref, toRef, onMounted } from 'vue'
import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue'
import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'radix-vue'
import { defu } from 'defu'
import * as isEqual from 'fast-deep-equal'
import { reactivePick } from '@vueuse/core'
@@ -156,6 +156,8 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
const { emitFormBlur, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -387,6 +389,8 @@ defineExpose({
</template>
</ComboboxGroup>
</ComboboxViewport>
<ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>

5
src/runtime/components/Select.vue
View File

@@ -99,7 +99,7 @@ export interface SelectSlots<T> {
<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectItem | AcceptableValue> = MaybeArrayOfArray<SelectItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined">
import { computed, toRef } from 'vue'
import { SelectRoot, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'radix-vue'
import { SelectRoot, SelectArrow, SelectTrigger, SelectValue, SelectPortal, SelectContent, SelectViewport, SelectLabel, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectSeparator, useForwardPropsEmits } from 'radix-vue'
import { defu } from 'defu'
import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports'
@@ -122,6 +122,7 @@ const slots = defineSlots<SelectSlots<T>>()
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as SelectContentProps)
const arrowProps = toRef(() => props.arrow as SelectArrowProps)
const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
@@ -241,6 +242,8 @@ function onUpdateOpen(value: boolean) {
</template>
</SelectGroup>
</SelectViewport>
<SelectArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
</SelectContent>
</SelectPortal>
</SelectRoot>

6
src/runtime/components/SelectMenu.vue
View File

@@ -116,7 +116,7 @@ export interface SelectMenuSlots<T> {
<script setup lang="ts" generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false">
import { computed, toRef } from 'vue'
import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, useForwardPropsEmits } from 'radix-vue'
import { defu } from 'defu'
import * as isEqual from 'fast-deep-equal'
import { reactivePick } from '@vueuse/core'
@@ -146,6 +146,8 @@ const searchTerm = defineModel<string>('searchTerm', { default: '' })
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'selectedValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, position: 'popper' }) as ComboboxContentProps)
const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -324,6 +326,8 @@ function onUpdateOpen(value: boolean) {
</template>
</ComboboxGroup>
</ComboboxViewport>
<ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
</ComboboxContent>
</ComboboxPortal>
</ComboboxRoot>

36
test/components/__snapshots__/InputMenu-vue.spec.ts.snap
View File

@@ -27,7 +27,7 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
[data-radix-combobox-viewport]::-webkit-scrollbar {
display: none;
}
</style>
</style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
</div>
</div>
<!--teleport end-->
@@ -63,6 +63,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -122,6 +123,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -166,6 +168,7 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -201,6 +204,7 @@ exports[`InputMenu > renders with disabled correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -244,6 +248,7 @@ exports[`InputMenu > renders with id correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -279,6 +284,7 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -314,6 +320,7 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -349,6 +356,7 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -384,6 +392,7 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -419,6 +428,7 @@ exports[`InputMenu > renders with items correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -454,6 +464,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -554,6 +565,7 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -589,6 +601,7 @@ exports[`InputMenu > renders with name correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -624,6 +637,7 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -659,6 +673,7 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -694,6 +709,7 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -729,6 +745,7 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -764,6 +781,7 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -799,6 +817,7 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -834,6 +853,7 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -869,6 +889,7 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -904,6 +925,7 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -939,6 +961,7 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -974,6 +997,7 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1009,6 +1033,7 @@ exports[`InputMenu > renders with required correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1044,6 +1069,7 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1079,6 +1105,7 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1114,6 +1141,7 @@ exports[`InputMenu > renders with size md correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1149,6 +1177,7 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1184,6 +1213,7 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1219,6 +1249,7 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1281,6 +1312,7 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1316,6 +1348,7 @@ exports[`InputMenu > renders with ui correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1351,6 +1384,7 @@ exports[`InputMenu > renders with valueKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->

36
test/components/__snapshots__/InputMenu.spec.ts.snap
View File

@@ -27,7 +27,7 @@ exports[`InputMenu > renders with arrow correctly 1`] = `
[data-radix-combobox-viewport]::-webkit-scrollbar {
display: none;
}
</style>
</style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
</div>
</div>
<!--teleport end-->
@@ -63,6 +63,7 @@ exports[`InputMenu > renders with as correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -122,6 +123,7 @@ exports[`InputMenu > renders with class correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -166,6 +168,7 @@ exports[`InputMenu > renders with defaultValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -201,6 +204,7 @@ exports[`InputMenu > renders with disabled correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -244,6 +248,7 @@ exports[`InputMenu > renders with id correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -279,6 +284,7 @@ exports[`InputMenu > renders with item slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -314,6 +320,7 @@ exports[`InputMenu > renders with item-label slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -349,6 +356,7 @@ exports[`InputMenu > renders with item-leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -384,6 +392,7 @@ exports[`InputMenu > renders with item-trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -419,6 +428,7 @@ exports[`InputMenu > renders with items correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -454,6 +464,7 @@ exports[`InputMenu > renders with labelKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -554,6 +565,7 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -589,6 +601,7 @@ exports[`InputMenu > renders with name correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -624,6 +637,7 @@ exports[`InputMenu > renders with neutral variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -659,6 +673,7 @@ exports[`InputMenu > renders with neutral variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -694,6 +709,7 @@ exports[`InputMenu > renders with neutral variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -729,6 +745,7 @@ exports[`InputMenu > renders with neutral variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -764,6 +781,7 @@ exports[`InputMenu > renders with neutral variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -799,6 +817,7 @@ exports[`InputMenu > renders with placeholder correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -834,6 +853,7 @@ exports[`InputMenu > renders with primary variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -869,6 +889,7 @@ exports[`InputMenu > renders with primary variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -904,6 +925,7 @@ exports[`InputMenu > renders with primary variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -939,6 +961,7 @@ exports[`InputMenu > renders with primary variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -974,6 +997,7 @@ exports[`InputMenu > renders with primary variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1009,6 +1033,7 @@ exports[`InputMenu > renders with required correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1044,6 +1069,7 @@ exports[`InputMenu > renders with selectedIcon correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1079,6 +1105,7 @@ exports[`InputMenu > renders with size lg correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1114,6 +1141,7 @@ exports[`InputMenu > renders with size md correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1149,6 +1177,7 @@ exports[`InputMenu > renders with size sm correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1184,6 +1213,7 @@ exports[`InputMenu > renders with size xl correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1219,6 +1249,7 @@ exports[`InputMenu > renders with size xs correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1281,6 +1312,7 @@ exports[`InputMenu > renders with trailingIcon correctly 2`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1316,6 +1348,7 @@ exports[`InputMenu > renders with ui correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->
@@ -1351,6 +1384,7 @@ exports[`InputMenu > renders with valueKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
<!--teleport end-->

37
test/components/__snapshots__/Select-vue.spec.ts.snap
View File

@@ -39,7 +39,7 @@ exports[`Select > renders with arrow correctly 1`] = `
[data-radix-select-viewport]::-webkit-scrollbar {
display: none;
}
</style>
</style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
</div>
</div>
@@ -116,6 +116,7 @@ exports[`Select > renders with class correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -171,6 +172,7 @@ exports[`Select > renders with defaultValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -226,6 +228,7 @@ exports[`Select > renders with disabled correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -288,6 +291,7 @@ exports[`Select > renders with id correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -333,6 +337,7 @@ exports[`Select > renders with item slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -381,6 +386,7 @@ exports[`Select > renders with item-label slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -436,6 +442,7 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -491,6 +498,7 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -546,6 +554,7 @@ exports[`Select > renders with items correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -601,6 +610,7 @@ exports[`Select > renders with labelKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -661,6 +671,7 @@ exports[`Select > renders with leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -760,6 +771,7 @@ exports[`Select > renders with modelValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -815,6 +827,7 @@ exports[`Select > renders with name correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -870,6 +883,7 @@ exports[`Select > renders with neutral variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -925,6 +939,7 @@ exports[`Select > renders with neutral variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -980,6 +995,7 @@ exports[`Select > renders with neutral variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1035,6 +1051,7 @@ exports[`Select > renders with neutral variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1090,6 +1107,7 @@ exports[`Select > renders with neutral variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1145,6 +1163,7 @@ exports[`Select > renders with placeholder correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1200,6 +1219,7 @@ exports[`Select > renders with primary variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1255,6 +1275,7 @@ exports[`Select > renders with primary variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1310,6 +1331,7 @@ exports[`Select > renders with primary variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1365,6 +1387,7 @@ exports[`Select > renders with primary variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1420,6 +1443,7 @@ exports[`Select > renders with primary variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1475,6 +1499,7 @@ exports[`Select > renders with required correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1530,6 +1555,7 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1585,6 +1611,7 @@ exports[`Select > renders with size lg correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1640,6 +1667,7 @@ exports[`Select > renders with size md correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1695,6 +1723,7 @@ exports[`Select > renders with size sm correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1750,6 +1779,7 @@ exports[`Select > renders with size xl correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1805,6 +1835,7 @@ exports[`Select > renders with size xs correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1869,6 +1900,7 @@ exports[`Select > renders with trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1933,6 +1965,7 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1988,6 +2021,7 @@ exports[`Select > renders with ui correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -2043,6 +2077,7 @@ exports[`Select > renders with valueKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>

37
test/components/__snapshots__/Select.spec.ts.snap
View File

@@ -39,7 +39,7 @@ exports[`Select > renders with arrow correctly 1`] = `
[data-radix-select-viewport]::-webkit-scrollbar {
display: none;
}
</style>
</style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
</div>
</div>
@@ -116,6 +116,7 @@ exports[`Select > renders with class correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -171,6 +172,7 @@ exports[`Select > renders with defaultValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -226,6 +228,7 @@ exports[`Select > renders with disabled correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -288,6 +291,7 @@ exports[`Select > renders with id correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -333,6 +337,7 @@ exports[`Select > renders with item slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -381,6 +386,7 @@ exports[`Select > renders with item-label slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -436,6 +442,7 @@ exports[`Select > renders with item-leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -491,6 +498,7 @@ exports[`Select > renders with item-trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -546,6 +554,7 @@ exports[`Select > renders with items correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -601,6 +610,7 @@ exports[`Select > renders with labelKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -661,6 +671,7 @@ exports[`Select > renders with leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -760,6 +771,7 @@ exports[`Select > renders with modelValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -815,6 +827,7 @@ exports[`Select > renders with name correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -870,6 +883,7 @@ exports[`Select > renders with neutral variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -925,6 +939,7 @@ exports[`Select > renders with neutral variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -980,6 +995,7 @@ exports[`Select > renders with neutral variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1035,6 +1051,7 @@ exports[`Select > renders with neutral variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1090,6 +1107,7 @@ exports[`Select > renders with neutral variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1145,6 +1163,7 @@ exports[`Select > renders with placeholder correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1200,6 +1219,7 @@ exports[`Select > renders with primary variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1255,6 +1275,7 @@ exports[`Select > renders with primary variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1310,6 +1331,7 @@ exports[`Select > renders with primary variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1365,6 +1387,7 @@ exports[`Select > renders with primary variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1420,6 +1443,7 @@ exports[`Select > renders with primary variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1475,6 +1499,7 @@ exports[`Select > renders with required correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1530,6 +1555,7 @@ exports[`Select > renders with selectedIcon correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1585,6 +1611,7 @@ exports[`Select > renders with size lg correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1640,6 +1667,7 @@ exports[`Select > renders with size md correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1695,6 +1723,7 @@ exports[`Select > renders with size sm correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1750,6 +1779,7 @@ exports[`Select > renders with size xl correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1805,6 +1835,7 @@ exports[`Select > renders with size xs correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1869,6 +1900,7 @@ exports[`Select > renders with trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1933,6 +1965,7 @@ exports[`Select > renders with trailingIcon correctly 2`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1988,6 +2021,7 @@ exports[`Select > renders with ui correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -2043,6 +2077,7 @@ exports[`Select > renders with valueKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>

42
test/components/__snapshots__/SelectMenu-vue.spec.ts.snap
View File

@@ -30,7 +30,7 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
[data-radix-combobox-viewport]::-webkit-scrollbar {
display: none;
}
</style>
</style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
</div>
</div>
@@ -91,6 +91,7 @@ exports[`SelectMenu > renders with class correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -130,6 +131,7 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -169,6 +171,7 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -208,6 +211,7 @@ exports[`SelectMenu > renders with disabled correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -254,6 +258,7 @@ exports[`SelectMenu > renders with id correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -293,6 +298,7 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -332,6 +338,7 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -371,6 +378,7 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -410,6 +418,7 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -449,6 +458,7 @@ exports[`SelectMenu > renders with items correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -488,6 +498,7 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -532,6 +543,7 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -615,6 +627,7 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -654,6 +667,7 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -693,6 +707,7 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -732,6 +747,7 @@ exports[`SelectMenu > renders with name correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -771,6 +787,7 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -810,6 +827,7 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -849,6 +867,7 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -888,6 +907,7 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -927,6 +947,7 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -966,6 +987,7 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1005,6 +1027,7 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1044,6 +1067,7 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1083,6 +1107,7 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1122,6 +1147,7 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1161,6 +1187,7 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1200,6 +1227,7 @@ exports[`SelectMenu > renders with required correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1239,6 +1267,7 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1278,6 +1307,7 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1317,6 +1347,7 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1356,6 +1387,7 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1395,6 +1427,7 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1434,6 +1467,7 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1473,6 +1507,7 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1521,6 +1556,7 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1569,6 +1605,7 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1608,6 +1645,7 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1647,6 +1685,7 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1687,6 +1726,7 @@ exports[`SelectMenu > renders without searchInput correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>

42
test/components/__snapshots__/SelectMenu.spec.ts.snap
View File

@@ -30,7 +30,7 @@ exports[`SelectMenu > renders with arrow correctly 1`] = `
[data-radix-combobox-viewport]::-webkit-scrollbar {
display: none;
}
</style>
</style><span style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); visibility: hidden;"><svg width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none" class="fill-[var(--ui-border)]" style="display: block;"><polygon points="0,0 30,0 15,10"></polygon></svg></span>
</div>
</div>
@@ -91,6 +91,7 @@ exports[`SelectMenu > renders with class correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -130,6 +131,7 @@ exports[`SelectMenu > renders with default slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -169,6 +171,7 @@ exports[`SelectMenu > renders with defaultValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -208,6 +211,7 @@ exports[`SelectMenu > renders with disabled correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -254,6 +258,7 @@ exports[`SelectMenu > renders with id correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -293,6 +298,7 @@ exports[`SelectMenu > renders with item slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -332,6 +338,7 @@ exports[`SelectMenu > renders with item-label slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -371,6 +378,7 @@ exports[`SelectMenu > renders with item-leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -410,6 +418,7 @@ exports[`SelectMenu > renders with item-trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -449,6 +458,7 @@ exports[`SelectMenu > renders with items correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -488,6 +498,7 @@ exports[`SelectMenu > renders with labelKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -532,6 +543,7 @@ exports[`SelectMenu > renders with leading slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -615,6 +627,7 @@ exports[`SelectMenu > renders with modelValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -654,6 +667,7 @@ exports[`SelectMenu > renders with multiple and modelValue correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -693,6 +707,7 @@ exports[`SelectMenu > renders with multiple correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -732,6 +747,7 @@ exports[`SelectMenu > renders with name correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -771,6 +787,7 @@ exports[`SelectMenu > renders with neutral variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -810,6 +827,7 @@ exports[`SelectMenu > renders with neutral variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -849,6 +867,7 @@ exports[`SelectMenu > renders with neutral variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -888,6 +907,7 @@ exports[`SelectMenu > renders with neutral variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -927,6 +947,7 @@ exports[`SelectMenu > renders with neutral variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -966,6 +987,7 @@ exports[`SelectMenu > renders with placeholder correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1005,6 +1027,7 @@ exports[`SelectMenu > renders with primary variant ghost correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1044,6 +1067,7 @@ exports[`SelectMenu > renders with primary variant none correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1083,6 +1107,7 @@ exports[`SelectMenu > renders with primary variant outline correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1122,6 +1147,7 @@ exports[`SelectMenu > renders with primary variant soft correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1161,6 +1187,7 @@ exports[`SelectMenu > renders with primary variant subtle correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1200,6 +1227,7 @@ exports[`SelectMenu > renders with required correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1239,6 +1267,7 @@ exports[`SelectMenu > renders with searchInput placeholder correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1278,6 +1307,7 @@ exports[`SelectMenu > renders with selectedIcon correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1317,6 +1347,7 @@ exports[`SelectMenu > renders with size lg correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1356,6 +1387,7 @@ exports[`SelectMenu > renders with size md correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1395,6 +1427,7 @@ exports[`SelectMenu > renders with size sm correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1434,6 +1467,7 @@ exports[`SelectMenu > renders with size xl correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1473,6 +1507,7 @@ exports[`SelectMenu > renders with size xs correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1521,6 +1556,7 @@ exports[`SelectMenu > renders with trailing slot correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1569,6 +1605,7 @@ exports[`SelectMenu > renders with trailingIcon correctly 2`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1608,6 +1645,7 @@ exports[`SelectMenu > renders with ui correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1647,6 +1685,7 @@ exports[`SelectMenu > renders with valueKey correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>
@@ -1687,6 +1726,7 @@ exports[`SelectMenu > renders without searchInput correctly 1`] = `
display: none;
}
</style>
<!--v-if-->
</div>
</div>