feat(Select): support different modelValue, option types

Author: zernonia

packages/radix-vue/src/Select/SelectContent.vue

@@ -16,7 +16,6 @@ export interface SelectContentProps extends SelectContentImplProps {
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
 import SelectContentImpl from './SelectContentImpl.vue'
 import { injectSelectRootContext } from './SelectRoot.vue'
 import { Presence } from '@/Presence'
@@ -32,16 +31,11 @@ const emits = defineEmits<SelectContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
 const rootContext = injectSelectRootContext()
-
-const presenceRef = ref<InstanceType<typeof Presence>>()
-const renderPresence = computed(() => props.forceMount || rootContext.open.value)
 </script>
 
 <template>
   <Presence
-    v-if="renderPresence"
-    ref="presenceRef"
-    :present="true"
+    :present="props.forceMount || rootContext.open.value"
   >
     <SelectContentImpl v-bind="{ ...forwarded, ...$attrs }">
       <slot />

packages/radix-vue/src/Select/SelectContentImpl.vue

@@ -14,21 +14,23 @@ import {
   useHideOthers,
   useTypeahead,
 } from '@/shared'
+import type { AcceptableValue } from '@/shared/types'
+import { compare } from './utils'
 
 interface SelectContentContext {
   content?: Ref<HTMLElement | undefined>
   viewport?: Ref<HTMLElement | undefined>
   onViewportChange: (node: HTMLElement | undefined) => void
   itemRefCallback: (
     node: HTMLElement | undefined,
-    value: string,
+    value: AcceptableValue,
     disabled: boolean
   ) => void
   selectedItem?: Ref<HTMLElement | undefined>
   onItemLeave?: () => void
   itemTextRefCallback: (
     node: HTMLElement | undefined,
-    value: string,
+    value: AcceptableValue,
     disabled: boolean
   ) => void
   focusSelectedItem?: () => void
@@ -218,7 +220,7 @@ provideSelectContentContext({
     const isFirstValidItem = !firstValidItemFoundRef.value && !disabled
     const isSelectedItem
       = rootContext.modelValue?.value !== undefined
-      && rootContext.modelValue?.value === value
+      && compare(rootContext.modelValue.value, value, rootContext.by) // rootContext.modelValue?.value === value
     if (isSelectedItem || isFirstValidItem) {
       selectedItem.value = node
       if (isFirstValidItem)
@@ -234,7 +236,7 @@ provideSelectContentContext({
     const isFirstValidItem = !firstValidItemFoundRef.value && !disabled
     const isSelectedItem
       = rootContext.modelValue?.value !== undefined
-      && rootContext.modelValue?.value === value
+      && compare(rootContext.modelValue.value, value, rootContext.by) // rootContext.modelValue?.value === value
     if (isSelectedItem || isFirstValidItem)
       selectedItemText.value = node
   },

packages/radix-vue/src/Select/SelectItem.vue

@@ -2,9 +2,10 @@
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
 import { createContext, useForwardExpose, useId } from '@/shared'
+import type { AcceptableValue } from '@/shared/types'
 
-interface SelectItemContext {
-  value: string
+interface SelectItemContext<T = AcceptableValue> {
+  value: T
   textId: string
   disabled: Ref<boolean>
   isSelected: Ref<boolean>
@@ -14,9 +15,9 @@ interface SelectItemContext {
 export const [injectSelectItemContext, provideSelectItemContext]
     = createContext<SelectItemContext>('SelectItem')
 
-export interface SelectItemProps extends PrimitiveProps {
+export interface SelectItemProps<T = AcceptableValue> extends PrimitiveProps {
   /** The value given as data when submitted with a `name`. */
-  value: string
+  value: T
   /** When `true`, prevents the user from interacting with the item. */
   disabled?: boolean
   /**
@@ -40,7 +41,7 @@ import {
 } from 'vue'
 import { injectSelectRootContext } from './SelectRoot.vue'
 import { injectSelectContentContext } from './SelectContentImpl.vue'
-import { SELECTION_KEYS } from './utils'
+import { SELECTION_KEYS, getValue } from './utils'
 import { Primitive } from '@/Primitive'
 
 const props = defineProps<SelectItemProps>()

packages/radix-vue/src/Select/SelectItemText.vue

@@ -28,7 +28,7 @@ const { forwardRef, currentElement: itemTextElement } = useForwardExpose()
 
 const nativeOption = computed(() => {
   return h('option', {
-    key: itemContext.value,
+    key: itemContext.value.toString(),
     value: itemContext.value,
     disabled: itemContext.disabled.value,
     innerHTML: itemTextElement.value?.textContent,

packages/radix-vue/src/Select/SelectRoot.vue

@@ -1,17 +1,19 @@
 <script lang="ts">
 import type { Ref, VNode } from 'vue'
-import type { Direction } from '../shared/types'
+import type { AcceptableValue, Direction } from '@/shared/types'
 import { createContext, useDirection, useFormControl } from '@/shared'
 
-export interface SelectRootProps {
+export interface SelectRootProps<T = AcceptableValue> {
   /** The controlled open state of the Select. Can be bind as `v-model:open`. */
   open?: boolean
   /** The open state of the select when it is initially rendered. Use when you do not need to control its open state. */
   defaultOpen?: boolean
   /** The value of the select when initially rendered. Use when you do not need to control the state of the Select */
-  defaultValue?: string
+  defaultValue?: T
   /** The controlled value of the Select. Can be bind as `v-model`. */
-  modelValue?: string
+  modelValue?: T
+  /** Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared. */
+  by?: string | ((a: T, b: T) => boolean)
   /** The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `DirectionProvider` or assumes LTR (left-to-right) reading mode. */
   dir?: Direction
   /** The name of the Select. Submitted with its owning form as part of a name/value pair. */
@@ -23,31 +25,33 @@ export interface SelectRootProps {
   /** When `true`, indicates that the user must select a value before the owning form can be submitted. */
   required?: boolean
 }
-export type SelectRootEmits = {
+
+export type SelectRootEmits<T = AcceptableValue> = {
   /** Event handler called when the value changes. */
-  'update:modelValue': [value: string]
+  'update:modelValue': [value: T]
   /** Event handler called when the open state of the context menu changes. */
   'update:open': [value: boolean]
 }
 
-export interface SelectRootContext {
+interface SelectRootContext<T> {
   triggerElement: Ref<HTMLElement | undefined>
   onTriggerChange: (node: HTMLElement | undefined) => void
   valueElement: Ref<HTMLElement | undefined>
   onValueElementChange: (node: HTMLElement) => void
   contentId: string
-  modelValue?: Ref<string>
-  onValueChange: (value: string) => void
+  modelValue?: Ref<T>
+  onValueChange: (value: T) => void
   open: Ref<boolean>
   required?: Ref<boolean>
+  by?: string | ((a: T, b: T) => boolean)
   onOpenChange: (open: boolean) => void
   dir: Ref<Direction>
   triggerPointerDownPosRef: Ref<{ x: number, y: number } | null>
   disabled?: Ref<boolean>
 }
 
 export const [injectSelectRootContext, provideSelectRootContext]
-  = createContext<SelectRootContext>('SelectRoot')
+  = createContext<SelectRootContext<AcceptableValue>>('SelectRoot')
 
 export interface SelectNativeOptionsContext {
   onNativeOptionAdd: (option: VNode) => void
@@ -58,18 +62,20 @@ export const [injectSelectNativeOptionsContext, provideSelectNativeOptionsContex
   = createContext<SelectNativeOptionsContext>('SelectRoot')
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
 import { computed, ref, toRefs } from 'vue'
 import BubbleSelect from './BubbleSelect.vue'
 import { PopperRoot } from '@/Popper'
 import { useVModel } from '@vueuse/core'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<SelectRootProps>(), {
-  defaultValue: '',
   modelValue: undefined,
   open: undefined,
 })
-
 const emits = defineEmits<SelectRootEmits>()
 
 defineSlots<{
@@ -84,7 +90,7 @@ defineSlots<{
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue,
   passive: (props.modelValue === undefined) as false,
-}) as Ref<string>
+}) as Ref<T>
 
 const open = useVModel(props, 'open', emits, {
   defaultValue: props.defaultOpen,
@@ -111,9 +117,10 @@ provideSelectRootContext({
   },
   contentId: '',
   modelValue,
-  onValueChange: (value) => {
+  onValueChange: (value: any) => {
     modelValue.value = value
   },
+  by: props.by,
   open,
   required,
   onOpenChange: (value) => {
@@ -150,11 +157,6 @@ provideSelectNativeOptionsContext({
 
 <template>
   <PopperRoot>
-    <slot
-      :model-value="modelValue"
-      :open="open"
-    />
-
     <BubbleSelect
       v-if="isFormControl"
       :key="nativeSelectKey"

packages/radix-vue/src/Select/story/_SelectTest.vue

@@ -32,9 +32,7 @@ const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
         class="min-w-[160px] inline-flex items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-violet11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-violet9 outline-none"
         aria-label="Customise options"
       >
-        <SelectValue placeholder="Please select a fruit">
-          {{ fruit }}
-        </SelectValue>
+        <SelectValue placeholder="Please select a fruit" />
         <Icon
           icon="radix-icons:chevron-down"
           class="h-4 w-4"

packages/radix-vue/src/Select/utils.ts

@@ -1,3 +1,41 @@
+import isEqual from 'fast-deep-equal'
+
 export const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown']
 export const SELECTION_KEYS = [' ', 'Enter']
 export const CONTENT_MARGIN = 10
+
+export function getValue<T>(value: T, by?: string | ((a: T) => boolean)) {
+  if (typeof value === 'string')
+    return value
+
+  if (typeof by === 'function')
+    return by(value)
+
+  if (typeof by === 'string')
+    return value?.[by as keyof T]
+}
+
+export function valueComparator<T>(value: T | T[] | undefined, currentValue: T, comparator?: string | ((a: T, b: T) => boolean)) {
+  if (value === undefined)
+    return false
+  else if (Array.isArray(value))
+    return value.some(val => compare(val, currentValue, comparator))
+  else
+    return compare(value, currentValue, comparator)
+}
+
+export function compare<T>(value?: T, currentValue?: T, comparator?: string | ((a: T, b: T) => boolean)) {
+  if (value === undefined || currentValue === undefined)
+    return false
+
+  if (typeof value === 'string')
+    return value === currentValue
+
+  if (typeof comparator === 'function')
+    return comparator(value, currentValue)
+
+  if (typeof comparator === 'string')
+    return value?.[comparator as keyof T] === currentValue?.[comparator as keyof T]
+
+  return isEqual(value, currentValue)
+}