chore(deps): update dependency reka-ui to v2.4.1 (v3) (#4586)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <[email protected]>

Author: renovate[bot]

docs/app/components/content/examples/input-menu/InputMenuOpenFocusExample.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
-const open = ref(false)
 const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
 const selected = ref('Backlog')
 </script>
 
 <template>
   <UInputMenu
     v-model="selected"
-    v-model:open="open"
     :items="items"
-    @focus="open = true"
+    open-on-focus
   />
 </template>

docs/content/3.components/input-menu.md

@@ -673,7 +673,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
 
 ### Control open state on focus
 
-You can also use the `@focus` directive to control the open state.
+You can use the `open-on-focus` or `open-on-click` props to open the menu when the input is focused or clicked.
 
 ::component-example
 ---

package.json

@@ -143,7 +143,7 @@
     "mlly": "^1.7.4",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.3.2",
+    "reka-ui": "2.4.1",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^2.0.1",

pnpm-lock.yaml

@@ -30,7 +30,7 @@ interface _InputMenuItem {
 }
 export type InputMenuItem = _InputMenuItem | AcceptableValue | boolean
 
-export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
+export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus'>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -208,7 +208,7 @@ const { t } = useLocale()
 const appConfig = useAppConfig() as InputMenu['AppConfig']
 const { contains } = useFilter({ sensitivity: 'base' })
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'highlightOnHover', 'ignoreFilter'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'highlightOnHover', 'openOnClick', 'openOnFocus'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)

src/runtime/components/InputMenu.vue

@@ -7,7 +7,7 @@ import type { ComponentConfig } from '../types/utils'
 
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>
 
-export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange'> {
+export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -98,7 +98,7 @@ defineSlots<InputNumberSlots>()
 const { t, code: codeLocale } = useLocale()
 const appConfig = useAppConfig() as InputNumber['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange', 'invertWheelChange'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange', 'invertWheelChange', 'readonly'), emits)
 
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputNumberProps>(props)

src/runtime/components/InputNumber.vue

@@ -8,6 +8,7 @@ import type { ComponentConfig } from '../types/utils'
 type PinInput = ComponentConfig<typeof theme, AppConfig, 'pinInput'>
 
 type PinInputType = 'text' | 'number'
+type PinInputValue<Type extends PinInputType> = [Type] extends ['number'] ? number[] : string[]
 
 export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<PinInputRootProps<T>, 'defaultValue' | 'disabled' | 'id' | 'mask' | 'modelValue' | 'name' | 'otp' | 'placeholder' | 'required' | 'type'> {
   /**
@@ -46,7 +47,7 @@ export type PinInputEmits<T extends PinInputType = 'text'> = PinInputRootEmits<T
 
 </script>
 
-<script setup lang="ts" generic="T extends PinInputType = 'text'">
+<script setup lang="ts" generic="T extends PinInputType">
 import type { ComponentPublicInstance } from 'vue'
 import { ref, computed, onMounted } from 'vue'
 import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
@@ -65,7 +66,7 @@ const emits = defineEmits<PinInputEmits<T>>()
 
 const appConfig = useAppConfig() as PinInput['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'disabled', 'id', 'mask', 'modelValue', 'name', 'otp', 'required', 'type'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'id', 'mask', 'name', 'otp', 'required', 'type'), emits)
 
 const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<PinInputProps>(props)
 
@@ -116,6 +117,8 @@ defineExpose({
     :id="id"
     :name="name"
     :placeholder="placeholder"
+    :model-value="(modelValue as PinInputValue<T>)"
+    :default-value="(defaultValue as PinInputValue<T>[])"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"