feat(desc): add actions option

lib/components/SDescFile.vue

@@ -52,7 +52,7 @@ const items = computed(() => {
   gap: 1px;
   border: 1px solid var(--c-divider);
   border-radius: 6px;
-  margin-top: 2px;
+  margin-top: 4px;
   background-color: var(--c-gutter);
   overflow: hidden;
 }

lib/components/SDescItem.vue

@@ -29,7 +29,17 @@ const labelWidth = computed(() => {
 }
 
 .SDesc.row > .SDescItem {
-  grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) minmax(0, 1fr);
+  & {
+    grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) minmax(0, 1fr);
+  }
+
+  & > :deep(.SDescLabel) {
+    height: 24px;
+  }
+
+  & > :deep(.SDescLabel > .value) {
+    line-height: 24px;
+  }
 }
 
 .SDesc.divider > .SDescItem:not(:has(> .SDescFile)) {

lib/components/SDescLabel.vue

@@ -1,7 +1,40 @@
 <script setup lang="ts">
-defineProps<{
+import { type Component } from 'vue'
+import { type ActionList } from './SActionList.vue'
+import SActionMenu from './SActionMenu.vue'
+import SButton, { type Mode, type Tooltip } from './SButton.vue'
+
+export interface Props {
   value?: string | null
-}>()
+  actions?: Action[]
+}
+
+export type Action = ActionButton | ActionMenu
+
+export interface ActionBase {
+  type?: 'button' | 'menu'
+  mode?: Mode
+  icon: Component
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: string | Tooltip
+}
+
+export interface ActionButton extends ActionBase {
+  type?: 'button'
+  onClick(): void
+}
+
+export interface ActionMenu extends ActionBase {
+  type: 'menu'
+  options: ActionList
+}
+
+defineProps<Props>()
+
+function isActionButton(action: Action): action is ActionButton {
+  return (action.type ?? 'button') === 'button'
+}
 </script>
 
 <template>
@@ -10,19 +43,47 @@ defineProps<{
       <slot v-if="$slots.default" />
       <template v-else>{{ value }}</template>
     </div>
+    <div v-if="actions?.length" class="actions">
+      <template v-for="action, index in actions" :key="index">
+        <SButton
+          v-if="isActionButton(action)"
+          type="text"
+          size="mini"
+          :mode="action.mode ?? 'mute'"
+          :icon="action.icon"
+          :loading="action.loading"
+          :disabled="action.disabled"
+          :tooltip="action.tooltip"
+          @click="action.onClick"
+        />
+        <SActionMenu
+          v-else
+          type="text"
+          size="mini"
+          :mode="action.mode ?? 'mute'"
+          :icon="action.icon"
+          :loading="action.loading"
+          :disabled="action.disabled"
+          :tooltip="action.tooltip"
+          :options="[{ type: 'menu', options: action.options }]"
+        />
+      </template>
+    </div>
   </div>
 </template>
 
 <style scoped lang="postcss">
 .SDescLabel {
   display: flex;
-  height: 24px;
+  gap: 16px;
+  height: 28px;
 }
 
 .value {
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
+  flex-grow: 1;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 400;
   color: var(--c-text-2);
   white-space: nowrap;
   overflow: hidden;

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import IconDotsThree from '~icons/ph/dots-three-bold'
+import IconNotePencil from '~icons/ph/note-pencil'
 import SDesc from 'sefirot/components/SDesc.vue'
 import SDescAvatar from 'sefirot/components/SDescAvatar.vue'
 import SDescDay from 'sefirot/components/SDescDay.vue'
@@ -14,6 +16,19 @@ import SDescText from 'sefirot/components/SDescText.vue'
 const title = 'Components / SDesc / 01. Playground'
 const docs = '/components/desc'
 
+const actions = [
+  { icon: IconNotePencil, onClick: () => {} },
+  {
+    type: 'menu' as const,
+    icon: IconDotsThree,
+    options: [
+      { label: 'Inspect', onClick: () => {} },
+      { label: 'Preview', onClick: () => {} },
+      { label: 'Delete', onClick: () => {} }
+    ]
+  }
+]
+
 function state() {
   return {
     divider: true
@@ -37,8 +52,8 @@ function state() {
           gap="24"
           :divider="state.divider"
         >
-          <SDescItem span="2">
-            <SDescLabel>Account</SDescLabel>
+          <SDescItem span="2" :divider="false">
+            <SDescLabel :actions="actions">Account</SDescLabel>
             <SDescAvatar
               :avatar="{
                 avatar: 'https://i.pravatar.cc/64?img=1',
@@ -47,35 +62,35 @@ function state() {
             />
           </SDescItem>
           <SDescItem span="1">
-            <SDescLabel>Full name</SDescLabel>
+            <SDescLabel :actions="actions">Full name</SDescLabel>
             <SDescText>Margot Foster</SDescText>
           </SDescItem>
           <SDescItem span="1">
-            <SDescLabel>Website</SDescLabel>
+            <SDescLabel :actions="actions">Website</SDescLabel>
             <SDescLink>https://margot.example</SDescLink>
           </SDescItem>
           <SDescItem span="1">
-            <SDescLabel>Birthday</SDescLabel>
+            <SDescLabel :actions="actions">Birthday</SDescLabel>
             <SDescDay>1985-10-10</SDescDay>
           </SDescItem>
           <SDescItem span="1">
-            <SDescLabel>Age</SDescLabel>
+            <SDescLabel :actions="actions">Age</SDescLabel>
             <SDescNumber>37</SDescNumber>
           </SDescItem>
           <SDescItem span="1">
-            <SDescLabel>Application for</SDescLabel>
+            <SDescLabel :actions="actions">Application for</SDescLabel>
             <SDescPill :pill="{ label: 'Frontend Developer' }" />
           </SDescItem>
           <SDescItem span="1">
-            <SDescLabel>Interview status</SDescLabel>
+            <SDescLabel :actions="actions">Interview status</SDescLabel>
             <SDescState :state="{ mode: 'info', label: 'In progress' }" />
           </SDescItem>
           <SDescItem span="2">
-            <SDescLabel>About</SDescLabel>
+            <SDescLabel :actions="actions">About</SDescLabel>
             <SDescText>Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur <a href="https://hello.com">qui ipsum aliquip consequat</a> sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.</SDescText>
           </SDescItem>
           <SDescItem span="2">
-            <SDescLabel>Attachments</SDescLabel>
+            <SDescLabel :actions="actions">Attachments</SDescLabel>
             <SDescFile
               :item="[
                 { name: 'John-Doe-Resume-19851010.pdf', onDownload: () => {} },