papayaui 0.3.3 → 0.3.5

package/components/cell/cell.scss

@@ -42,6 +42,10 @@
     @include _setVar(textarea-padding, 0);
   }
 
+  &__placeholder {
+    color: _var(cell-placeholder-color, _var(color-disabled));
+  }
+
   &__suffix {
     margin-left: _var(cell-suffix-margin-left, 5rpx);
     color: _var(cell-suffix-color, inherit);

package/components/cell/cell.vue

@@ -31,8 +31,13 @@
         })
       "
     >
-      <text v-if="!$slots.default" :selectable="selectable" :user-select="selectable">
-        {{ value }}
+      <text
+        v-if="!$slots.default"
+        :class="{ [ns.e('placeholder')]: showPlaceholder }"
+        :selectable="selectable"
+        :user-select="selectable"
+      >
+        {{ showPlaceholder ? placeholder : value }}
       </text>
       <slot v-else />
 
@@ -49,6 +54,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import useNamespace from '../../core/useNamespace'
 import { getUnitValue } from '../../utils'
 import IconComponent from '../icon/icon.vue'
@@ -59,6 +65,12 @@ const ns = useNamespace('cell')
 const props = defineProps(cellProps)
 const emit = defineEmits(cellEmits)
 
+const showPlaceholder = computed(
+  () =>
+    props.placeholder &&
+    (props.value === null || props.value === undefined || props.value === '')
+)
+
 const onClick = (event: MouseEvent) => {
   if (!props.clickable && !props.isLink) return
   emit('click', event)

package/components/cell/props.ts

@@ -14,6 +14,10 @@ export const cellProps = {
     type: [String, Number, Boolean],
     default: '',
   },
+  /**
+   * 占位提示，在 value 为 null、undefined、空字符串时显示
+   */
+  placeholder: String,
   /**
    * 标题下方的描述信息
    */

package/components/picker-popup/picker-popup.vue

@@ -82,7 +82,8 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRefs, watch } from 'vue'
-import { useList, LoadStatusEnum } from '../../core/useList'
+import { LoadStatusEnum, useList } from '../../core/useList'
+import { useModel } from '../../core/useModel'
 import useNamespace from '../../core/useNamespace'
 import { useSelect } from '../../core/useSelect'
 import { debounce } from '../../utils'
@@ -102,7 +103,7 @@ const emit = defineEmits(pickerPopupEmits)
 
 const { show, data, modelValue, labelKey, valueKey, multiple, pagination } = toRefs(props)
 
-const searchText = ref<string>('')
+const searchText = useModel<string>(props, 'searchValue', emit, '')
 const createOptions = ref<Option[]>([])
 
 const {

package/components/picker-popup/props.ts

@@ -38,6 +38,10 @@ export const pickerPopupProps = {
    * 是否显示搜索
    */
   showSearch: Boolean,
+  /**
+   * 搜索文本
+   */
+  searchValue: String,
   /**
    * 搜索框的props
    */
@@ -125,6 +129,7 @@ export const pickerPopupEmits = {
   ...bottomPopupEmits,
   'update:modelValue': (value: OptionValue | OptionValue[]) =>
     isString(value) || isNumber(value) || isArray(value),
+  'update:searchValue': (value: string) => isString(value),
   select: (value: OptionValue, _item: Option) => !isUndefined(value),
   change: (item: Option | Option[]) => !isUndefined(item),
   /**

package/components/textarea/textarea.scss

@@ -14,7 +14,7 @@
 
   &__body {
     display: flex;
-    align-items: start;
+    align-items: flex-start;
     width: 100%;
   }
 

package/core/index.ts

@@ -5,6 +5,7 @@ export * from './useDatePicker'
 export * from './useForm'
 export * from './useInputNumber'
 export * from './useList'
+export * from './useModel'
 export * from './useNamespace'
 export * from './useSelect'
 export * from './useSwitch'

package/core/useModel/index.test.ts

@@ -0,0 +1,130 @@
+import { describe, expect, test, vi } from 'vitest'
+import { reactive } from 'vue'
+import { useModel } from '.'
+
+describe('useModel test', () => {
+  test('should use default value when no value prop provided', () => {
+    const props = reactive<{ modelValue?: string }>({})
+    const emit = vi.fn()
+    const model = useModel(props, 'modelValue', emit, 'default')
+
+    expect(model.value).toBe('default')
+  })
+
+  test('should use external value when value prop provided', () => {
+    const props = reactive({ modelValue: 'external' })
+    const emit = vi.fn()
+    const model = useModel(props, 'modelValue', emit)
+
+    expect(model.value).toBe('external')
+  })
+
+  test('should update internal value when no external value', () => {
+    const props = reactive<{ modelValue?: string }>({})
+    const emit = vi.fn()
+    const model = useModel(props, 'modelValue', emit, 'initial')
+
+    model.value = 'updated'
+    expect(model.value).toBe('updated')
+  })
+
+  test('should emit update event when value changes', () => {
+    const props = reactive<{ modelValue?: string }>({})
+    const emit = vi.fn()
+    const model = useModel(props, 'modelValue', emit, 'initial')
+
+    model.value = 'new value'
+    expect(emit).toHaveBeenCalledWith('update:modelValue', 'new value')
+    expect(emit).toHaveBeenCalledTimes(1)
+  })
+
+  test('should work with external reactive value', () => {
+    const props = reactive({ modelValue: 'external' })
+    const emit = vi.fn()
+    const model = useModel(props, 'modelValue', emit)
+
+    expect(model.value).toBe('external')
+
+    model.value = 'new value'
+    expect(emit).toHaveBeenCalledWith('update:modelValue', 'new value')
+    expect(model.value).toBe('external') // 仍然是外部值，因为外部值没变
+  })
+
+  test('should switch between internal and external values', () => {
+    const props = reactive({ modelValue: 'external' as string | undefined })
+    const emit = vi.fn()
+    const model = useModel(props, 'modelValue', emit, 'default')
+
+    expect(model.value).toBe('external')
+
+    // 模拟外部值变为 undefined
+    props.modelValue = undefined
+    expect(model.value).toBe('default')
+  })
+
+  test('should work with number type', () => {
+    const props = reactive<{ count?: number }>({})
+    const emit = vi.fn()
+    const model = useModel(props, 'count', emit, 0)
+
+    expect(model.value).toBe(0)
+
+    model.value = 42
+    expect(model.value).toBe(42)
+    expect(emit).toHaveBeenCalledWith('update:count', 42)
+  })
+
+  test('should work with object type', () => {
+    const props = reactive<{ data?: { name: string } }>({})
+    const emit = vi.fn()
+    const defaultObj = { name: 'test' }
+    const model = useModel(props, 'data', emit, defaultObj)
+
+    expect(model.value).toEqual({ name: 'test' })
+
+    const newObj = { name: 'updated' }
+    model.value = newObj
+    expect(model.value).toEqual({ name: 'updated' })
+    expect(emit).toHaveBeenCalledWith('update:data', newObj)
+  })
+
+  test('should work with array type', () => {
+    const props = reactive<{ items?: string[] }>({})
+    const emit = vi.fn()
+    const model = useModel<string[]>(props, 'items', emit, [])
+
+    expect(model.value).toEqual([])
+
+    model.value = ['a', 'b', 'c']
+    expect(model.value).toEqual(['a', 'b', 'c'])
+    expect(emit).toHaveBeenCalledWith('update:items', ['a', 'b', 'c'])
+  })
+
+  test('should handle undefined default value', () => {
+    const props = reactive<{ value?: string }>({})
+    const emit = vi.fn()
+    const model = useModel(props, 'value', emit)
+
+    expect(model.value).toBeUndefined()
+
+    model.value = 'value'
+    expect(model.value).toBe('value')
+  })
+
+  test('should work with multiple properties', () => {
+    const props = reactive<{ name?: string; age?: number }>({})
+    const emit = vi.fn()
+
+    const name = useModel(props, 'name', emit, 'John')
+    const age = useModel(props, 'age', emit, 18)
+
+    expect(name.value).toBe('John')
+    expect(age.value).toBe(18)
+
+    name.value = 'Jane'
+    age.value = 20
+
+    expect(emit).toHaveBeenCalledWith('update:name', 'Jane')
+    expect(emit).toHaveBeenCalledWith('update:age', 20)
+  })
+})

package/core/useModel/index.ts

@@ -0,0 +1,40 @@
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+
+/**
+ * 双向绑定 hook，类似 Vue 3.4+ 的 defineModel
+ * 如果外部传入了 value，则使用外部的值；否则使用内部维护的值
+ *
+ * @param props - 组件的 props 对象
+ * @param key - 要绑定的 prop 名称
+ * @param emit - emit 函数
+ * @param defaultValue - 默认值（当 props[key] 为 undefined 时使用）
+ *
+ * @example
+ * ```ts
+ * const props = defineProps<{ modelValue?: string }>()
+ * const emit = defineEmits(['update:modelValue'])
+ * const data = useModel<string>(props, 'modelValue', emit, '')
+ * ```
+ */
+export function useModel<T, P extends Record<string, any> = any, K extends keyof P = any>(
+  props: P,
+  key: K,
+  emit: (event: any, value: any) => void,
+  defaultValue?: T,
+): Ref<T> {
+  const internalValue = ref<T>(defaultValue as T) as Ref<T>
+
+  const model = computed<T>({
+    get: () => {
+      console.log('props[key]:', key, props[key])
+      return props[key] !== undefined ? props[key] : internalValue.value
+    },
+    set: (value: T) => {
+      internalValue.value = value
+      emit(`update:${key as string}`, value)
+    },
+  })
+
+  return model
+}

package/core/useSelect/index.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, test } from 'vitest'
+import { nextTick, ref } from 'vue'
 import { useSelect } from '.'
 
 interface Option {
@@ -94,4 +95,283 @@ describe('useSelect test', () => {
 
     expect(selectedValues.value).toEqual([1, 2])
   })
+
+  test('should onClear work correctly', async () => {
+    const { selectedValues, onClear, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      multiple: true,
+      defaultValue: [1, 2],
+    })
+
+    expect(selectedValues.value).toEqual([1, 2])
+    expect(isSelected(1)).toBe(true)
+    expect(isSelected(2)).toBe(true)
+
+    onClear()
+
+    expect(selectedValues.value).toEqual([])
+    expect(isSelected(1)).toBe(false)
+    expect(isSelected(2)).toBe(false)
+  })
+
+  test('should onClear work in single mode', async () => {
+    const { selectedValues, onClear, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      defaultValue: 1,
+    })
+
+    expect(selectedValues.value).toBe(1)
+    expect(isSelected(1)).toBe(true)
+
+    onClear()
+
+    expect(selectedValues.value).toBe(undefined)
+    expect(isSelected(1)).toBe(false)
+  })
+
+  test('should custom valueKey work correctly', async () => {
+    interface CustomOption {
+      label: string
+      id: number
+    }
+    const customOptions: CustomOption[] = [
+      { label: 'a', id: 10 },
+      { label: 'b', id: 20 },
+      { label: 'c', id: 30 },
+    ]
+
+    const { selectedItems, selectedValues, onSelect, isSelected } = useSelect<
+      CustomOption,
+      CustomOption['id']
+    >({
+      options: customOptions,
+      valueKey: 'id',
+      defaultValue: 10,
+    })
+
+    expect(selectedItems.value).toEqual(customOptions[0])
+    expect(selectedValues.value).toBe(10)
+    expect(isSelected(10)).toBe(true)
+
+    expect(onSelect(20)).toBe(true)
+    expect(selectedItems.value).toEqual(customOptions[1])
+    expect(selectedValues.value).toBe(20)
+    expect(isSelected(10)).toBe(false)
+    expect(isSelected(20)).toBe(true)
+  })
+
+  test('should defaultValue be reactive', async () => {
+    const defaultValue = ref<number | undefined>(1)
+    const { selectedValues, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      defaultValue,
+    })
+
+    expect(selectedValues.value).toBe(1)
+    expect(isSelected(1)).toBe(true)
+
+    // 修改 defaultValue，应该触发响应式更新
+    defaultValue.value = 2
+    await nextTick() // 等待响应式更新
+
+    expect(selectedValues.value).toBe(2)
+    expect(isSelected(1)).toBe(false)
+    expect(isSelected(2)).toBe(true)
+
+    // 修改为 undefined
+    defaultValue.value = undefined
+    await nextTick()
+
+    expect(selectedValues.value).toBe(undefined)
+    expect(isSelected(2)).toBe(false)
+  })
+
+  test('should single mode without inverse not allow deselect', async () => {
+    const { selectedValues, onSelect, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      inverse: false, // 明确不支持反选
+    })
+
+    expect(selectedValues.value).toBe(undefined)
+
+    expect(onSelect(1)).toBe(true)
+    expect(isSelected(1)).toBe(true)
+    expect(selectedValues.value).toBe(1)
+
+    // 再次选择已选中的项，不应该取消选择
+    expect(onSelect(1)).toBe(false)
+    expect(isSelected(1)).toBe(true)
+    expect(selectedValues.value).toBe(1)
+  })
+
+  test('should multiple mode always allow deselect', async () => {
+    const { selectedValues, onSelect, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      multiple: true,
+      inverse: false, // 即使设置为 false，多选也应该支持反选
+    })
+
+    expect(selectedValues.value).toEqual([])
+
+    expect(onSelect(1)).toBe(true)
+    expect(onSelect(2)).toBe(true)
+    expect(isSelected(1)).toBe(true)
+    expect(isSelected(2)).toBe(true)
+    expect(selectedValues.value).toEqual([1, 2])
+
+    // 多选模式下应该可以取消选择
+    expect(onSelect(1)).toBe(false)
+    expect(isSelected(1)).toBe(false)
+    expect(isSelected(2)).toBe(true)
+    expect(selectedValues.value).toEqual([2])
+  })
+
+  test('should work with empty options', async () => {
+    const { selectedItems, selectedValues, onSelect } = useSelect<Option, Option['value']>({
+      options: [],
+      defaultValue: 1,
+    })
+
+    // 虽然 defaultValue 是 1，但 options 为空，所以不会匹配到任何项
+    expect(selectedItems.value).toBe(undefined)
+    expect(selectedValues.value).toBe(1)
+
+    expect(onSelect(2)).toBe(true)
+    expect(selectedValues.value).toBe(2)
+  })
+
+  test('should max = 0 prevent any selection', async () => {
+    const { selectedValues, onSelect, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      multiple: true,
+      max: 0,
+    })
+
+    expect(selectedValues.value).toEqual([])
+
+    expect(onSelect(1)).toBe(false)
+    expect(onSelect(2)).toBe(false)
+    expect(onSelect(3)).toBe(false)
+
+    expect(isSelected(1)).toBe(false)
+    expect(isSelected(2)).toBe(false)
+    expect(isSelected(3)).toBe(false)
+
+    expect(selectedValues.value).toEqual([])
+  })
+
+  test('should max = 1 in multiple mode work correctly', async () => {
+    const { selectedValues, onSelect, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      multiple: true,
+      max: 1,
+    })
+
+    expect(selectedValues.value).toEqual([])
+
+    expect(onSelect(1)).toBe(true)
+    expect(onSelect(2)).toBe(false) // 应该失败，因为已经达到上限
+
+    expect(isSelected(1)).toBe(true)
+    expect(isSelected(2)).toBe(false)
+
+    expect(selectedValues.value).toEqual([1])
+
+    // 取消选择后，应该可以选择其他的
+    expect(onSelect(1)).toBe(false)
+    expect(selectedValues.value).toEqual([])
+
+    expect(onSelect(2)).toBe(true)
+    expect(selectedValues.value).toEqual([2])
+  })
+
+  test('should handle undefined defaultValue correctly', async () => {
+    const { selectedValues, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      defaultValue: undefined,
+    })
+
+    expect(selectedValues.value).toBe(undefined)
+    expect(isSelected(1)).toBe(false)
+    expect(isSelected(2)).toBe(false)
+  })
+
+  test('should handle array with undefined values in defaultValue', async () => {
+    const { selectedValues, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      multiple: true,
+      defaultValue: [1, undefined, 2] as any,
+    })
+
+    // undefined 应该被过滤掉
+    expect(selectedValues.value).toEqual([1, 2])
+    expect(isSelected(1)).toBe(true)
+    expect(isSelected(2)).toBe(true)
+  })
+
+  test('should selecting already selected item return false', async () => {
+    const { onSelect } = useSelect<Option, Option['value']>({
+      options,
+      multiple: true,
+    })
+
+    expect(onSelect(1)).toBe(true)
+    expect(onSelect(1)).toBe(false) // 再次选择应该返回 false（取消选择）
+    expect(onSelect(1)).toBe(true) // 再次选择应该返回 true（重新选择）
+  })
+
+  test('should return correct value when reaching max limit', async () => {
+    const { onSelect } = useSelect<Option, Option['value']>({
+      options,
+      multiple: true,
+      max: 2,
+    })
+
+    expect(onSelect(1)).toBe(true)
+    expect(onSelect(2)).toBe(true)
+    expect(onSelect(3)).toBe(false) // 达到上限，返回 false
+  })
+
+  test('should handle single select mode switching selection', async () => {
+    const { selectedValues, onSelect, isSelected } = useSelect<Option, Option['value']>({
+      options,
+      multiple: false,
+    })
+
+    expect(onSelect(1)).toBe(true)
+    expect(selectedValues.value).toBe(1)
+    expect(isSelected(1)).toBe(true)
+
+    // 切换到另一个选项
+    expect(onSelect(2)).toBe(true)
+    expect(selectedValues.value).toBe(2)
+    expect(isSelected(1)).toBe(false)
+    expect(isSelected(2)).toBe(true)
+
+    // 再切换到第三个选项
+    expect(onSelect(3)).toBe(true)
+    expect(selectedValues.value).toBe(3)
+    expect(isSelected(1)).toBe(false)
+    expect(isSelected(2)).toBe(false)
+    expect(isSelected(3)).toBe(true)
+  })
+
+  test('should work without options prop', async () => {
+    const { selectedItems, selectedValues, onSelect, isSelected } = useSelect<
+      Option,
+      Option['value']
+    >({})
+
+    // options 为 undefined 时，selectedItems 应该返回 undefined
+    expect(selectedItems.value).toBe(undefined)
+    expect(selectedValues.value).toBe(undefined)
+
+    // 仍然可以选择值
+    expect(onSelect(1)).toBe(true)
+    expect(selectedValues.value).toBe(1)
+    expect(isSelected(1)).toBe(true)
+
+    // 但 selectedItems 仍为 undefined（因为没有 options 可以匹配）
+    expect(selectedItems.value).toBe(undefined)
+  })
 })

package/core/useSelect/index.ts

@@ -1,45 +1,131 @@
-import type { Ref } from 'vue'
-import { computed, ref, toRef, watch } from 'vue'
-import type { IncludeRefs } from '../../types'
+import type { ComputedRef } from 'vue'
+import { computed, shallowRef, watch } from 'vue'
+import type { MaybeRef } from '../../types'
+import { toRefValue } from '../../utils'
 
-export interface UseSelectProps<T, V> {
+/** 基础 Props 类型 */
+interface UseSelectBaseProps<T> {
   /** 选项数据 */
   options?: T[]
-  /** 默认数据 */
-  defaultValue?: V | V[]
   /**
    * 数据值的字段名
    * @default value
    */
   valueKey?: keyof T
-  /** 是否多选 */
-  multiple?: boolean
   /** 是否支持反选（只在单选有效，多选强制支持） */
   inverse?: boolean
   /** 最大可选数量 */
   max?: number
 }
 
-export function useSelect<T, V = T>(props: IncludeRefs<UseSelectProps<T, V>>) {
-  type OwnProps = UseSelectProps<T, V>
+/** 单选模式 Props */
+export interface UseSelectSingleProps<T, V> extends UseSelectBaseProps<T> {
+  /** 是否多选 */
+  multiple?: false
+  /** 默认数据 */
+  defaultValue?: V
+}
+
+/** 多选模式 Props */
+export interface UseSelectMultipleProps<T, V> extends UseSelectBaseProps<T> {
+  /** 是否多选 */
+  multiple: true
+  /** 默认数据 */
+  defaultValue?: V[]
+}
+
+/** 动态模式 Props（multiple 为运行时 boolean） */
+export interface UseSelectDynamicProps<T, V> extends UseSelectBaseProps<T> {
+  /** 是否多选 */
+  multiple?: boolean
+  /** 默认数据 */
+  defaultValue?: V | V[]
+}
+
+/** 合并的 Props 类型 */
+export type UseSelectProps<T, V> =
+  | UseSelectSingleProps<T, V>
+  | UseSelectMultipleProps<T, V>
+  | UseSelectDynamicProps<T, V>
+
+/** 将 Props 的每个属性转为 MaybeRef */
+type UseSelectPropsWithRefs<T, V> = {
+  [K in keyof UseSelectProps<T, V>]: MaybeRef<UseSelectProps<T, V>[K]>
+}
+
+/** 单选模式返回类型 */
+interface UseSelectSingleReturn<T, V> {
+  selectedItems: ComputedRef<T>
+  selectedValues: ComputedRef<V>
+  onSelect: (value: V) => boolean
+  isSelected: (value: V) => boolean
+  onClear: () => void
+}
+
+/** 多选模式返回类型 */
+interface UseSelectMultipleReturn<T, V> {
+  selectedItems: ComputedRef<T[]>
+  selectedValues: ComputedRef<V[]>
+  onSelect: (value: V) => boolean
+  isSelected: (value: V) => boolean
+  onClear: () => void
+}
+
+/** 动态模式返回类型（multiple 为运行时值时） */
+interface UseSelectDynamicReturn<T, V> {
+  selectedItems: ComputedRef<T | T[]>
+  selectedValues: ComputedRef<V | V[]>
+  onSelect: (value: V) => boolean
+  isSelected: (value: V) => boolean
+  onClear: () => void
+}
 
-  const options = toRef(props, 'options', []) as Ref<Required<OwnProps>['options']>
-  const defaultValue = toRef(props, 'defaultValue', []) as Ref<Required<OwnProps>['defaultValue']>
-  const valueKey = toRef(props, 'valueKey', 'value' as OwnProps['valueKey']) as Ref<
-    Required<OwnProps>['valueKey']
-  >
-  const multiple = toRef(props, 'multiple') as Ref<OwnProps['multiple']>
-  const inverse = toRef(props, 'inverse') as Ref<OwnProps['inverse']>
-  const max = toRef(props, 'max') as Ref<OwnProps['max']>
+/** 合并的返回类型 */
+export type UseSelectReturn<T, V> =
+  | UseSelectSingleReturn<T, V>
+  | UseSelectMultipleReturn<T, V>
+  | UseSelectDynamicReturn<T, V>
 
-  const selectedSet = ref<Set<V>>(new Set())
+/** 单选模式函数重载 */
+export function useSelect<T, V = T>(props: {
+  [K in keyof UseSelectSingleProps<T, V>]: MaybeRef<UseSelectSingleProps<T, V>[K]>
+}): UseSelectSingleReturn<T, V>
 
-  const selectedItems = computed<T | T[]>(() => {
-    const result = options.value.filter((item) => selectedSet.value.has(item[valueKey.value] as V))
+/** 多选模式函数重载 */
+export function useSelect<T, V = T>(props: {
+  [K in keyof UseSelectMultipleProps<T, V>]: MaybeRef<UseSelectMultipleProps<T, V>[K]>
+}): UseSelectMultipleReturn<T, V>
+
+/** 动态模式函数重载（multiple 为运行时 boolean） */
+export function useSelect<T, V = T>(props: {
+  [K in keyof UseSelectDynamicProps<T, V>]: MaybeRef<UseSelectDynamicProps<T, V>[K]>
+}): UseSelectDynamicReturn<T, V>
+
+/** 实现 */
+export function useSelect<T, V = T>(props: UseSelectPropsWithRefs<T, V>): UseSelectReturn<T, V> {
+  const options = toRefValue(props.options)
+  const defaultValue = toRefValue(props.defaultValue)
+  const valueKey = toRefValue(props.valueKey, 'value' as keyof T)
+  const multiple = toRefValue(props.multiple)
+  const inverse = toRefValue(props.inverse)
+  const max = toRefValue(props.max)
+
+  // 使用 shallowRef 避免 Vue 对 Set 内部进行深度响应式转换
+  const selectedSet = shallowRef<Set<V>>(new Set())
+
+  const getOptions = (): T[] => options.value ?? []
+
+  // 触发响应式更新的辅助函数
+  const triggerUpdate = (): void => {
+    selectedSet.value = new Set(selectedSet.value)
+  }
+
+  const selectedItems = computed(() => {
+    const result = getOptions().filter((item) => selectedSet.value.has(item[valueKey.value] as V))
     return multiple.value ? result : result[0]
   })
 
-  const selectedValues = computed<V | V[]>(() => {
+  const selectedValues = computed(() => {
     const result = [...selectedSet.value.values()]
     return multiple.value ? result : result[0]
   })
@@ -47,27 +133,32 @@ export function useSelect<T, V = T>(props: IncludeRefs<UseSelectProps<T, V>>) {
   watch(
     defaultValue,
     (value) => {
+      const newSet = new Set<V>()
       const defaultValues = Array.isArray(value) ? value : [value]
-      selectedSet.value.clear()
-      defaultValues.forEach((value) => {
-        if (typeof value !== 'undefined') {
-          selectedSet.value.add(value)
+      defaultValues.forEach((v) => {
+        if (typeof v !== 'undefined') {
+          newSet.add(v)
         }
       })
+      selectedSet.value = newSet
     },
     {
       immediate: true,
     },
   )
 
-  const isSelected = (value: V) => {
+  const isSelected = (value: V): boolean => {
     return selectedSet.value.has(value)
   }
 
-  const onSelect = (value: V) => {
+  const onSelect = (value: V): boolean => {
     // 已选中情况
     if (selectedSet.value.has(value)) {
-      ;(multiple.value ? true : inverse.value) && selectedSet.value.delete(value)
+      const canDeselect = multiple.value ? true : inverse.value
+      if (canDeselect) {
+        selectedSet.value.delete(value)
+        triggerUpdate()
+      }
       return false
     }
     // 超过最大选中数量限制情况
@@ -79,11 +170,12 @@ export function useSelect<T, V = T>(props: IncludeRefs<UseSelectProps<T, V>>) {
       selectedSet.value.clear()
     }
     selectedSet.value.add(value)
+    triggerUpdate()
     return true
   }
 
-  const onClear = () => {
-    selectedSet.value.clear()
+  const onClear = (): void => {
+    selectedSet.value = new Set()
   }
 
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "适用于uniapp的ui扩展库",
   "main": "index.ts",
   "module": "index.ts",

package/utils/common.ts

@@ -1,4 +1,5 @@
-import { isRef } from 'vue'
+import { computed, isRef, ref } from 'vue'
+import type { Ref } from 'vue'
 import type { MaybeRef } from '../types'
 
 /** 判断传入的值，是否带有单位，如果没有，就默认用rpx单位 */
@@ -83,3 +84,17 @@ export function getRefValue<T>(
   const value = isRef(prop) ? prop.value : prop
   return value ?? defaultValue
 }
+
+/** 将 MaybeRef<T> 转换为 Ref<T> */
+export function toRefValue<T>(value: MaybeRef<T>): Ref<T>
+/** 将 MaybeRef<T | undefined> 转换为 Ref<T>，支持默认值 */
+export function toRefValue<T>(value: MaybeRef<T | undefined>, defaultValue: T): Ref<T>
+export function toRefValue<T>(value: MaybeRef<T | undefined>, defaultValue?: T): Ref<T> {
+  if (typeof defaultValue !== 'undefined') {
+    if (isRef(value)) {
+      return computed(() => value.value ?? defaultValue) as unknown as Ref<T>
+    }
+    return ref(value ?? defaultValue) as Ref<T>
+  }
+  return isRef(value) ? (value as Ref<T>) : (ref(value) as Ref<T>)
+}

package/vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    // 使用 node 环境
+    environment: 'node',
+
+    // 启用全局变量
+    globals: true,
+
+    // 设置 setup 文件
+    setupFiles: ['./vitest.setup.ts'],
+  },
+})

package/vitest.setup.ts

@@ -0,0 +1,8 @@
+import { vi } from 'vitest'
+
+vi.stubGlobal('window', {})
+
+vi.stubGlobal('wx', {
+  getFileSystemManager: vi.fn(),
+  canIUse: vi.fn(),
+})