fix(SimpleList): v-model's event only emits string values

Author: mtorromeo

packages/core/src/components/SimpleList/SimpleList.vue

@@ -12,11 +12,12 @@
 </template>
 
 <script lang="ts">
-export const SimpleListValueKey = Symbol('SimpleListValueKey') as InjectionKey<Ref<string | number | boolean | object | symbol | undefined | null>>;
+export const SimpleListValueKey = Symbol('SimpleListValueKey') as InjectionKey<WritableComputedRef<string | symbol | null>>;
 
 export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
   /** Form element name */
   name?: string,
+  modelValue?: string | null;
   required?: boolean;
   /** aria-label for the <ul> element that wraps the SimpleList items. */
   ariaLabel?: string;
@@ -26,7 +27,7 @@ export interface Props extends OUIAProps, /* @vue-ignore */ HTMLAttributes {
 <script lang="ts" setup>
 import styles from '@patternfly/react-styles/css/components/SimpleList/simple-list';
 
-import { type Component, type InjectionKey, provide, type HTMLAttributes, ref, type Ref } from 'vue';
+import { type Component, type InjectionKey, provide, type HTMLAttributes, ref, type Ref, computed, type WritableComputedRef, watch } from 'vue';
 import { findChildrenVNodes } from '../../util';
 import Wrap from '../../helpers/Wrap.vue';
 import { useOUIAProps, type OUIAProps } from '../../helpers/ouia';
@@ -39,13 +40,32 @@ defineOptions({
 const props = defineProps<Props>();
 const ouiaProps = useOUIAProps({id: props.ouiaId, safe: props.ouiaSafe});
 
-/** Value for the selected item */
-const value = defineModel<string | number | boolean | object | null>({ default: null });
+const emit = defineEmits<{
+  /** Callback for when the model value changes */
+  (e: 'update:modelValue', value: string): void;
+}>();
 
 const slots = defineSlots<{
   default?: (props?: Record<never, never>) => any;
 }>();
 
+/** Value for the selected item */
+const innerValue: Ref<string | symbol | null> = ref(props.modelValue ?? null);
+
+const value = computed({
+  get: () => innerValue.value,
+  set: (v: string | symbol | null) => {
+    innerValue.value = v;
+    if (typeof v === 'string') {
+      emit('update:modelValue', v);
+    }
+  },
+});
+
+watch(() => props.modelValue, (v) => {
+  innerValue.value = v ?? null;
+});
+
 const grouped = ref(false);
 provide(SimpleListValueKey, value);