feat(table): add onClick option to TableCellAvatar (#291) (#292)

close #291

---------

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>

lib/components/STableCell.vue

@@ -73,6 +73,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :name="computedCell.name"
       :link="computedCell.link"
       :color="computedCell.color"
+      :on-click="computedCell.onClick"
     />
     <STableCellAvatars
       v-else-if="computedCell.type === 'avatars'"

lib/components/STableCellAvatar.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
   name?: string | null | ((value: any, record: any) => string | null | undefined)
   link?: string | null | ((value: any, record: any) => string | null | undefined)
   color?: 'neutral' | 'soft' | 'mute'
+  onClick?(value: any, record: any): void
 }>()
 
 const _image = computed(() => resolve(props.image))
@@ -30,8 +31,13 @@ function resolve(
 </script>
 
 <template>
-  <div class="STableCellAvatar" :class="[{ link }, color]">
-    <SLink class="container" :href="_link ?? undefined">
+  <div class="STableCellAvatar" :class="[{ link: link || onClick }, color]">
+    <SLink
+      class="container"
+      :href="_link ?? undefined"
+      :role="onClick ? 'button' : null"
+      @click="() => onClick?.(value, record)"
+    >
       <div v-if="_image" class="avatar">
         <SAvatar size="mini" :avatar="_image" :name="_name" />
       </div>

lib/composables/Table.ts

@@ -122,6 +122,7 @@ export interface TableCellAvatar extends TableCellBase {
   name?: string | null | ((value: any, record: any) => string | null | undefined)
   link?: string | null | ((value: any, record: any) => string | null | undefined)
   color?: 'neutral' | 'soft' | 'mute'
+  onClick?(value: any, record: any): void
 }
 
 export interface TableCellAvatars extends TableCellBase {