fix(list): make list item clickable if click event is used (#86)

ManUtopiK · jd-solanki · web-flow · commit 14499d4dd399 · 2022-12-11T15:52:19.000+05:30
Co-authored-by: JD Solanki &lt;jdsolanki0001@gmail.com&gt;
diff --git a/docs/demos/list/DemoListVModelSupport.vue b/docs/demos/list/DemoListVModelSupport.vue
@@ -46,7 +46,7 @@ const slotSelection = ref(0)
             :value="index"
             :disable="item.disable"
             :is-active="slotSelection === index"
-            @click="item => handleListItemClick(item)"
+            @click="handleListItemClick(item, index)"
           />
         </template>
         <template #after>
diff --git a/docs/guide/components/list.md b/docs/guide/components/list.md
@@ -52,7 +52,7 @@ Just like `avatar-append`, you can also use `icon-append` to render the action b
 <!-- 👉 `v-model` Support -->
 ::::card `v-model` Support
 
-`AList` also support `v-model`. Use any value other than `null` to enable the `v-model` support.
+`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.
 
diff --git a/packages/anu-vue/src/components/list-item/AListItem.tsx b/packages/anu-vue/src/components/list-item/AListItem.tsx
@@ -63,8 +63,8 @@ export const AListItem = defineComponent({
       default: false,
     },
   },
-  emits: ['click', 'click:icon', 'click:avatar', 'click:iconAppend', 'click:avatarAppend'],
-  setup(props, { slots, emit }) {
+  emits: ['click:icon', 'click:avatar', 'click:iconAppend', 'click:avatarAppend'],
+  setup(props, { slots, emit, attrs }) {
     const { getLayerClasses } = useLayer()
 
     // ℹ️ Reduce the size of title to 1rem. We did the same in ACard as well.
@@ -74,11 +74,6 @@ export const AListItem = defineComponent({
     else
       _titleProp.value.classes += ' uno-layer-base-text-base'
 
-    // Handle list item click
-    const handleListItemClick = () => {
-      emit('click', props.value)
-    }
-
     // useLayer
     const { styles, classes } = getLayerClasses(
       computed(() => props.isActive ? props.color || 'primary' : undefined),
@@ -93,13 +88,12 @@ export const AListItem = defineComponent({
           class={[
             'a-list-item',
             { 'opacity-50 pointer-events-none': props.disable },
-            props.value !== undefined
+            props.value !== undefined || attrs.onClick
               ? [...classes.value, 'cursor-pointer']
               : '',
             'flex items-center gap-$a-list-item-gap m-$a-list-item-margin p-$a-list-item-padding min-h-$a-list-item-min-height',
           ]}
           data-color={props.color}
-          onClick={handleListItemClick}
           style={[...styles.value]}
         >
           {/* 👉 Slot: prepend */}
diff --git a/packages/anu-vue/src/components/list/AList.tsx b/packages/anu-vue/src/components/list/AList.tsx
@@ -76,10 +76,9 @@ export const AList = defineComponent({
     })
 
     // const isActive = computed(() => options.value[itemIndex].isSelected)
-    const handleListItemClick = (item: any) => {
-      const emitValue = item.value ?? item
-      emit('update:modelValue', emitValue)
-      selectListItem(emitValue)
+    const handleListItemClick = (item: ListItem, index: number) => {
+      selectListItem(item.value || index)
+      emit('update:modelValue', value.value)
     }
 
     // 👉 Return
@@ -103,7 +102,7 @@ export const AList = defineComponent({
               avatarAppend={props.avatarAppend}
               iconAppend={props.iconAppend}
               is-active={options.value[index].isSelected}
-              onClick={handleListItemClick}
+              onClick={item.value || (props.modelValue !== undefined) ? () => handleListItemClick(item, index) : null}
               v-slots={{
                 prepend: slots.prepend ? () => slots.prepend?.({ item, index }) : null,
                 item: slots.item ? () => slots.item?.({ item, index }) : null,
