feat(table): add action column type

.prettierrc.yaml

@@ -0,0 +1,4 @@
+semi: false
+singleQuote: true
+printWidth: 80
+trailingComma: none

lib/components/STableCell.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { type TableCell } from '../composables/Table'
+import STableCellActions from './STableCellActions.vue'
 import STableCellAvatar from './STableCellAvatar.vue'
 import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellCustom from './STableCellCustom.vue'
@@ -99,6 +100,12 @@ const computedCell = computed<TableCell | undefined>(() =>
       :avatars="computedCell.avatars"
       :color="computedCell.color"
     />
+    <STableCellActions
+      v-else-if="computedCell.type === 'actions'"
+      :value="value"
+      :record="record"
+      :actions="computedCell.actions"
+    />
     <STableCellCustom
       v-else-if="computedCell.type === 'custom'"
     >

lib/components/STableCellActions.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type TableCellAction } from '../composables/Table'
+import SButton from './SButton.vue'
+
+defineProps<{
+  value: any
+  record: any
+  actions: TableCellAction[]
+}>()
+</script>
+
+<template>
+  <div class="STableCellActions">
+    <SButton
+      v-for="(action, i) in actions"
+      :key="i"
+      size="mini"
+      type="text"
+      :mode="action.mode"
+      :icon="action.icon"
+      :icon-mode="action.iconMode"
+      :label="action.label"
+      :label-mode="action.labelMode"
+      @click="action.onClick(value, record)"
+    />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellActions {
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  gap: 2px;
+}
+</style>

lib/components/STableHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { type TableAction, type TableMenu } from '../composables/Table'
+import { type TableHeaderAction, type TableMenu } from '../composables/Table'
 import { format } from '../support/Num'
 import { isNullish } from '../support/Utils'
 import STableHeaderActions from './STableHeaderActions.vue'
@@ -10,7 +10,7 @@ const props = defineProps<{
   total?: number | null
   reset?: boolean
   menu?: TableMenu[] | TableMenu[][]
-  actions?: TableAction[]
+  actions?: TableHeaderAction[]
   borderless?: boolean
   onReset?(): void
   selected?: unknown[]

lib/components/STableHeaderActionItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type TableAction } from '../composables/Table'
+import { type TableHeaderAction } from '../composables/Table'
 import SButton from './SButton.vue'
 
-withDefaults(defineProps<TableAction>(), {
+withDefaults(defineProps<TableHeaderAction>(), {
   show: true,
   mode: 'mute',
   labelMode: 'neutral'

lib/components/STableHeaderActions.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type TableAction } from '../composables/Table'
+import { type TableHeaderAction } from '../composables/Table'
 import STableHeaderActionItem from './STableHeaderActionItem.vue'
 
-defineProps<{ actions: TableAction[] }>()
+defineProps<{ actions: TableHeaderAction[] }>()
 </script>
 
 <template>

lib/composables/Table.ts

@@ -10,7 +10,7 @@ export interface Table<
   orders: MaybeRef<O[]>
   columns: MaybeRef<TableColumns<O, R, SR>>
   menu?: MaybeRef<TableMenu[] | TableMenu[][]>
-  actions?: MaybeRef<TableAction[]>
+  actions?: MaybeRef<TableHeaderAction[]>
   records?: MaybeRef<R[] | null | undefined>
   header?: MaybeRef<boolean | undefined>
   footer?: MaybeRef<boolean | undefined>
@@ -64,6 +64,7 @@ export type TableCell =
   | TableCellCustom
   | TableCellEmpty
   | TableCellComponent
+  | TableCellActions
 
 export type TableCellType =
   | 'text'
@@ -77,6 +78,9 @@ export type TableCellType =
   | 'custom'
   | 'empty'
   | 'component'
+  | 'actions'
+
+export type ColorModes = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 export interface TableCellBase {
   type: TableCellType
@@ -105,14 +109,7 @@ export interface TableCellNumber extends TableCellBase {
   onClick?(value: any, record: any): void
 }
 
-export type TableCellValueColor =
-  | 'neutral'
-  | 'soft'
-  | 'mute'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
+export type TableCellValueColor = ColorModes | 'soft'
 
 export interface TableCellDay extends TableCellBase {
   type: 'day'
@@ -128,7 +125,7 @@ export interface TableCellPill extends TableCellBase {
   color?: TableCellPillColor | ((value: any, record: any) => TableCellPillColor)
 }
 
-export type TableCellPillColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type TableCellPillColor = ColorModes
 
 export interface TableCellPills extends TableCellBase {
   type: 'pills'
@@ -177,7 +174,21 @@ export interface TableCellComponent extends TableCellBase {
 export interface TableCellState extends TableCellBase {
   type: 'state'
   label: string
-  mode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+  mode?: ColorModes
+}
+
+export interface TableCellActions extends TableCellBase {
+  type: 'actions'
+  actions: TableCellAction[]
+}
+
+export interface TableCellAction {
+  mode?: ColorModes
+  icon?: any
+  iconMode?: ColorModes
+  label?: string
+  labelMode?: ColorModes
+  onClick(value: any, record: any): void
 }
 
 export interface TableMenu {
@@ -186,11 +197,11 @@ export interface TableMenu {
   dropdown: DropdownSection[]
 }
 
-export interface TableAction {
+export interface TableHeaderAction {
   show?: boolean
-  mode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+  mode?: ColorModes
   label: string
-  labelMode?: 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+  labelMode?: ColorModes
   onClick(): void
 }
 

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

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import IconCheck from '@iconify-icons/ph/check-bold'
 import IconImageSquare from '@iconify-icons/ph/image-square'
+import IconNotePencil from '@iconify-icons/ph/note-pencil'
+import IconTrash from '@iconify-icons/ph/trash'
 import { orderBy, xor } from 'lodash-es'
 import STable from 'sefirot/components/STable.vue'
 import { createDropdown } from 'sefirot/composables/Dropdown'
@@ -186,7 +189,8 @@ const table = useTable({
     'type',
     'width',
     'tags',
-    'createdAt'
+    'createdAt',
+    'actions'
   ],
 
   columns: computed(() => ({
@@ -258,6 +262,31 @@ const table = useTable({
           }))
         }
       }
+    },
+
+    actions: {
+      cell: {
+        type: 'actions',
+        /* eslint-disable no-alert */
+        actions: [
+          {
+            icon: markRaw(IconCheck),
+            onClick: () => { alert('Publish') },
+            mode: 'success'
+          },
+          {
+            icon: markRaw(IconNotePencil),
+            onClick: () => { alert('Edit') },
+            labelMode: 'neutral'
+          },
+          {
+            icon: markRaw(IconTrash),
+            onClick: () => { alert('Delete') },
+            mode: 'danger'
+          }
+        ]
+        /* eslint-enable */
+      }
     }
   })),
 
@@ -344,6 +373,7 @@ function updateTagsFilter(value: string) {
 .table :deep(.col-width)     { --table-col-width: 128px; }
 .table :deep(.col-tags)      { --table-col-width: 192px; }
 .table :deep(.col-createdAt) { --table-col-width: 192px; }
+.table :deep(.col-actions)   { --table-col-width: 128px; }
 
 .table {
   margin-bottom: 16px;