feat(desc): enable passing multiple avatars to <SDescAvatar> (#482)

Author: kiaking

docs/components/desc.md

@@ -435,6 +435,7 @@ Use `<SDescAvatar>` component to display a value using [`<SAvatar>`](./avatar).
 ```ts
 interface Props {
   avatar?: Avatar | null
+  dir?: 'column' | 'row'
 }
 
 interface Avatar {
@@ -455,6 +456,31 @@ interface Avatar {
 </SDesc>
 ```
 
+You may also pass in multiple avatars as an array.
+
+```vue-html
+<SDesc cols="2" gap="24">
+  <SDescItem span="1">
+    <SDescLabel value="Status" />
+    <SDescAvatar :avatar="[
+      { avatar: "/path/to/avatar.jpg", name: "John Doe" },
+      { avatar: "/path/to/avatar.jpg", name: "Jane Doe" }
+    ]" />
+  </SDescItem>
+</SDesc>
+```
+
+When passing in multiple avatars, you may also define `:dir` to control the direction of the avatar stack. The default is set to `column` which stacks the avatars vertically. You may set it to `row` to stack them horizontally.
+
+```vue-html
+<SDesc cols="2" gap="24">
+  <SDescItem span="1">
+    <SDescLabel value="Status" />
+    <SDescAvatar dir="row" :avatar="avatars" />
+  </SDescItem>
+</SDesc>
+```
+
 ## File value
 
 Use `<SDescFile>` to display a list of files. Useful when you have a "attachment" list in the form.

lib/components/SDescAvatar.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { isArray } from '../support/Utils'
 import SAvatar from './SAvatar.vue'
 import SDescEmpty from './SDescEmpty.vue'
 
@@ -7,28 +9,54 @@ export interface Avatar {
   name?: string | null
 }
 
-defineProps<{
-  avatar?: Avatar | null
-}>()
+const props = withDefaults(defineProps<{
+  avatar?: Avatar | Avatar[] | null
+  dir?: 'column' | 'row'
+}>(), {
+  dir: 'column'
+})
+
+const _avatar = computed(() => {
+  if (!props.avatar) {
+    return null
+  }
+
+  return isArray(props.avatar) ? props.avatar : [props.avatar]
+})
 </script>
 
 <template>
-  <div v-if="avatar" class="SDescAvatar">
-    <div class="value">
+  <div v-if="_avatar?.length" class="SDescAvatar" :class="[dir]">
+    <div v-for="a, i in _avatar" :key="i" class="value">
       <SAvatar
         size="nano"
-        :avatar="avatar.avatar"
-        :name="avatar.name"
+        :avatar="a.avatar"
+        :name="a.name"
       />
-      <span v-if="avatar.name" class="name">
-        {{ avatar.name }}
+      <span v-if="a.name" class="name">
+        {{ a.name }}
       </span>
     </div>
   </div>
   <SDescEmpty v-else />
 </template>
 
 <style scoped lang="postcss">
+.SDescAvatar {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.SDescAvatar.column {
+  flex-direction: column;
+  gap: 4px;
+}
+
+.SDescAvatar.row {
+  flex-direction: row;
+  gap: 4px 12px;
+}
+
 .value {
   display: flex;
   align-items: center;

stories/components/SDesc.04_Avatar_Many.story.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import SDesc from 'sefirot/components/SDesc.vue'
+import SDescAvatar from 'sefirot/components/SDescAvatar.vue'
+import SDescItem from 'sefirot/components/SDescItem.vue'
+import SDescLabel from 'sefirot/components/SDescLabel.vue'
+
+const title = 'Components / SDesc / 04. Avatar Many'
+const docs = '/components/desc'
+
+const avatars = [
+  { avatar: 'https://i.pravatar.cc/64?img=1', name: 'Margot Foster' },
+  { avatar: 'https://i.pravatar.cc/64?img=2', name: 'Chris Johna' },
+  { avatar: 'https://i.pravatar.cc/64?img=3', name: 'Jenny Wilson' }
+]
+</script>
+
+<template>
+  <Story :title="title" source="Not available" auto-props-disabled>
+    <Board :title="title" :docs="docs">
+      <SDesc gap="24">
+        <SDescItem>
+          <SDescLabel>Vertical stack</SDescLabel>
+          <SDescAvatar :avatar="avatars" />
+        </SDescItem>
+        <SDescItem>
+          <SDescLabel>Horizontal stack</SDescLabel>
+          <SDescAvatar dir="row" :avatar="avatars" />
+        </SDescItem>
+      </SDesc>
+    </Board>
+  </Story>
+</template>