feat(desc): add <SDescAvatar> (#455) (#458)

close #455

docs/components/desc.md

@@ -428,6 +428,33 @@ type Mode =
 </SDesc>
 ```
 
+## Avatar value <Badge text="3.2.7" />
+
+Use `<SDescAvatar>` component to display a value using [`<SAvatar>`](./avatar).
+
+```ts
+interface Props {
+  avatar?: Avatar | null
+}
+
+interface Avatar {
+  avatar?: string | null
+  name?: string | null
+}
+```
+
+```vue-html
+<SDesc cols="2" gap="24">
+  <SDescItem span="1">
+    <SDescLabel value="Status" />
+    <SDescAvatar :avatar="{
+      avatar: "/path/to/avatar.jpg",
+      name: "John Doe"
+    }" />
+  </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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import SAvatar from './SAvatar.vue'
+import SDescEmpty from './SDescEmpty.vue'
+
+export interface Avatar {
+  avatar?: string | null
+  name?: string | null
+}
+
+defineProps<{
+  avatar?: Avatar | null
+}>()
+</script>
+
+<template>
+  <div v-if="avatar" class="SDescAvatar">
+    <div class="value">
+      <SAvatar
+        v-if="avatar.avatar"
+        size="nano"
+        :avatar="avatar.avatar"
+        :name="avatar.name"
+      />
+      <span v-if="avatar.name" class="name">
+        {{ avatar.name }}
+      </span>
+    </div>
+  </div>
+  <SDescEmpty v-else />
+</template>
+
+<style scoped lang="postcss">
+.value {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 24px;
+}
+</style>

stories/components/SDesc.01_Playground.story.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import SDesc from 'sefirot/components/SDesc.vue'
+import SDescAvatar from 'sefirot/components/SDescAvatar.vue'
 import SDescDay from 'sefirot/components/SDescDay.vue'
 import SDescFile from 'sefirot/components/SDescFile.vue'
 import SDescItem from 'sefirot/components/SDescItem.vue'
@@ -36,6 +37,15 @@ function state() {
           gap="24"
           :divider="state.divider"
         >
+          <SDescItem span="2">
+            <SDescLabel>Account</SDescLabel>
+            <SDescAvatar
+              :avatar="{
+                avatar: 'https://i.pravatar.cc/64?img=1',
+                name: 'margot.foster'
+              }"
+            />
+          </SDescItem>
           <SDescItem span="1">
             <SDescLabel>Full name</SDescLabel>
             <SDescText>Margot Foster</SDescText>