GitHub

File tree

  • src

    • runtime/components

    • theme

  • test/components/__snapshots__

Original file line numberDiff line numberDiff line change

@@ -415,7 +415,6 @@ defineExpose({

415415

</DefineCreateItemTemplate>

416416
417417

<ComboboxRoot

418-

:id="id"

419418

v-slot="{ modelValue, open }"

420419

v-bind="rootProps"

421420

:name="name"

@@ -456,6 +455,7 @@ defineExpose({

456455
457456

<ComboboxInput v-model="searchTerm" as-child>

458457

<TagsInputInput

458+

:id="id"

459459

ref="inputRef"

460460

v-bind="{ ...$attrs, ...ariaAttrs }"

461461

:placeholder="placeholder"

@@ -467,6 +467,7 @@ defineExpose({

467467
468468

<ComboboxInput

469469

v-else

470+

:id="id"

470471

ref="inputRef"

471472

:display-value="displayValue"

472473

v-bind="{ ...$attrs, ...ariaAttrs }"

Original file line numberDiff line numberDiff line change

@@ -272,7 +272,12 @@ defineExpose({

272272

@update:model-value="onUpdate"

273273

@update:open="onUpdateOpen"

274274

>

275-

<SelectTrigger :id="id" ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">

275+

<SelectTrigger

276+

:id="id"

277+

ref="triggerRef"

278+

:class="ui.base({ class: [props.ui?.base, props.class] })"

279+

v-bind="{ ...$attrs, ...ariaAttrs }"

280+

>

276281

<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">

277282

<slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">

278283

<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

Original file line numberDiff line numberDiff line change

@@ -8,6 +8,15 @@ export default (options: Required<ModuleOptions>) => {

88

input: 'border-b border-default',

99

focusScope: 'flex flex-col min-h-0',

1010

content: (content: string) => [content, 'origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)']

11-

}

11+

},

12+

compoundVariants: (prev: Record<string, any>[]) => prev.map(item => ({

13+

...item,

14+

class: typeof item.class === 'string' ? replaceFocus(item.class) : item.class

15+

}))

1216

}, select(options))

1317

}

18+
19+

function replaceFocus(str: string): string {

20+

return str

21+

.replace(/focus:/g, 'focus-visible:')

22+

}

Original file line numberDiff line numberDiff line change

@@ -81,6 +81,15 @@ export default (options: Required<ModuleOptions>) => {

8181

empty: 'p-2 text-base'

8282

}

8383

}

84-

}

84+

},

85+

compoundVariants: (prev: Record<string, any>[]) => prev.map(item => ({

86+

...item,

87+

class: typeof item.class === 'string' ? replaceFocus(item.class) : item.class

88+

}))

8589

}, input(options))

8690

}

91+
92+

function replaceFocus(str: string): string {

93+

return str

94+

.replace(/focus-visible:/g, 'focus:')

95+

}

Original file line numberDiff line numberDiff line change

@@ -219,7 +219,7 @@ exports[`InputMenu > renders with icon correctly 1`] = `

219219

`;

220220
221221

exports[`InputMenu > renders with id correctly 1`] = `

222-

"<div dir="ltr" id="id" 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="off" 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="">

222+

"<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="off" 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" id="id" value="">

223223

<!--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>

224224

<!--teleport start-->

225225

<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">

Original file line numberDiff line numberDiff line change

@@ -223,7 +223,7 @@ exports[`InputMenu > renders with icon correctly 1`] = `

223223

`;

224224
225225

exports[`InputMenu > renders with id correctly 1`] = `

226-

"<div dir="ltr" id="id" 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="off" 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">

226+

"<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="off" 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" id="id" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">

227227

<!--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>

228228

<!--teleport start-->

229229

<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">

Read the original on github.com ↗