fix(list,useSelection): properly pass value to list item component

jd-solanki · jd-solanki · commit 55bd477a06c4 · 2023-06-10T15:30:49.000+05:30
diff --git a/docs/guide/components/list.md b/docs/guide/components/list.md
@@ -35,6 +35,44 @@ When you override the list item via CSS variable, it's up to you to handle `--a-
 For in library example you can check `.a-list-items-pill` class styles.
 :::
 
+:::details Make list items clickable
+If you want to make list item clickable (have cursor pointer), You can pass `value` property other than `undefined`.
+
+```ts{2}
+const items = [
+  { text: 'Donut jujubes', value: null }, // value other than `undefined`
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi' },
+]
+```
+
+With above items, first item will be clickable (have cursor pointer) and rest of the items will have default pointer.
+
+In case if you want to make all the items clickable without adding `value` property to each item, you can use `:model-value="null"` prop to `AList`.
+
+```vue{13}
+<script lang="ts" setup>
+const items = [
+  { text: 'Donut jujubes' },
+  { text: 'Sesame snaps' },
+  { text: 'I love jelly' },
+  { text: 'Cake gummi' },
+]
+</script>
+
+<template>
+  <ACard>
+    <AList
+      :model-value="null"
+      :items="items"
+    />
+  </ACard>
+</template>
+```
+
+:::
+
 ::::
 
 :::::
@@ -84,8 +122,6 @@ Just like `avatar-append`, you can also use `icon-append` to render the action b
 
 `AList` also support `v-model`. Use any value other than `undefined` to enable the `v-model` support.
 
-If you use `items` prop on `AList` and don't provide `value` property to each list item, `AList` will emit list item's index as selected value.
-
 If you are using `AListItem` in default slot of `AList` you can use `handleListItemClick` slot prop function to select the item value. `handleListItemClick` accepts option item as parameter.
 
 ::::code DemoListVModelSupport
diff --git a/packages/anu-vue/src/components/list/AList.vue b/packages/anu-vue/src/components/list/AList.vue
@@ -68,7 +68,7 @@ function handleListItemClick(item: AListPropItems[number]) {
         :variant="props.variant"
         :states="props.states"
         :is-active="options[index]?.isSelected as unknown as boolean"
-        :value="props.modelValue !== undefined ? options[index] : undefined"
+        :value="props.modelValue !== undefined || (typeof item === 'object' ? item.value : undefined)"
         v-on="{
           click: props['onClick:item'] || (props.modelValue !== undefined)
             ? () => { handleListItemClick(item) }
diff --git a/packages/anu-vue/src/composables/useSelection.ts b/packages/anu-vue/src/composables/useSelection.ts
@@ -44,8 +44,6 @@ export function useSelection<const Item, Multi extends boolean, InitialValue ext
   ) as ReturnValue<Item, Multi>['value']
 
   const select = (option: Item) => {
-    console.log('selecting...')
-
     // If multiple selection is enabled
     if (_multi.value) {
       // If value is not set (Means previously multi was false) => Initialize new set and assign it to value
@@ -88,25 +86,19 @@ export function useSelection<const Item, Multi extends boolean, InitialValue ext
   }
 }
 
+export function extractItemValueFromItemOption<T>(item: T): T extends { value: infer V } ? V : T {
+  return isObject(item) && 'value' in item
+    ? item.value
+    : item as any
+}
+
 export function calculateSelectionItems<T>(items: MaybeRefOrGetter<T[]>) {
   return computed(() => {
     const _items = toRef(items)
 
     if (_items.value.length === 0)
       return []
 
-    const firstItem = _items.value[0]
-    if (isObject(firstItem)) {
-      if ('value' in firstItem)
-        return _items.value.map(item => (item as { value: T }).value)
-    }
-
-    return _items.value
+    return _items.value.map(extractItemValueFromItemOption)
   })
 }
-
-export function extractItemValueFromItemOption<T>(item: T): T extends { value: infer V } ? V : T {
-  return isObject(item)
-    ? ('value' in item ? item.value : item)
-    : item as any
-}
