feat(table): add cell type "Indicator" (#573)

lib/components/SIndicator.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import IconCheckCircleFill from '~icons/ph/check-circle-fill'
-import IconCircle from '~icons/ph/circle-bold'
-import IconCircleDashed from '~icons/ph/circle-dashed-bold'
-import IconCircleNotch from '~icons/ph/circle-notch-bold'
-import IconXCircle from '~icons/ph/x-circle-bold'
+import IconCircle from '~icons/ph/circle'
+import IconCircleDashed from '~icons/ph/circle-dashed'
+import IconCircleNotch from '~icons/ph/circle-notch'
+import IconMinusCircle from '~icons/ph/minus-circle'
+import IconXCircle from '~icons/ph/x-circle'
 import { computed } from 'vue'
 
 export type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
-export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed'
+export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed' | 'aborted'
 export type Mode = 'colored' | 'monochrome'
 
 const props = withDefaults(defineProps<{
@@ -33,6 +34,7 @@ const classes = computed(() => [
     <IconCircleNotch v-if="props.state === 'running'" class="icon" />
     <IconCheckCircleFill v-if="props.state === 'completed'" class="icon" />
     <IconXCircle v-if="props.state === 'failed'" class="icon" />
+    <IconMinusCircle v-if="props.state === 'aborted'" class="icon aborted" />
   </div>
 </template>
 
@@ -51,6 +53,10 @@ const classes = computed(() => [
 .icon {
   width: 100%;
   height: 100%;
+
+  &.aborted {
+    transform: rotate(-45deg);
+  }
 }
 
 .SIndicator.nano   { width: 20px; height: 20px; }
@@ -75,6 +81,7 @@ const classes = computed(() => [
   &.running   { color: var(--c-fg-info-1); }
   &.completed { color: var(--c-fg-success-1); }
   &.failed    { color: var(--c-fg-danger-1); }
+  &.aborted   { color: var(--c-fg-gray-1); }
 }
 
 .SIndicator.monochrome {

lib/components/STableCell.vue

@@ -7,6 +7,7 @@ import STableCellAvatars from './STableCellAvatars.vue'
 import STableCellCustom from './STableCellCustom.vue'
 import STableCellDay from './STableCellDay.vue'
 import STableCellEmpty from './STableCellEmpty.vue'
+import STableCellIndicator from './STableCellIndicator.vue'
 import STableCellNumber from './STableCellNumber.vue'
 import STableCellPath from './STableCellPath.vue'
 import STableCellPill from './STableCellPill.vue'
@@ -82,6 +83,11 @@ const computedCell = computed<TableCell | undefined>(() =>
       :state="computedCell.label"
       :mode="computedCell.mode"
     />
+    <STableCellIndicator
+      v-else-if="computedCell.type === 'indicator'"
+      :state="computedCell.state"
+      :label="computedCell.label"
+    />
     <STableCellAvatar
       v-else-if="computedCell.type === 'avatar'"
       :value="value"

lib/components/STableCellIndicator.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import SIndicator, { type State } from './SIndicator.vue'
+
+defineProps<{
+  state: State
+  label?: string | null
+}>()
+</script>
+
+<template>
+  <div class="STableCellIndicator" :class="[state]">
+    <SIndicator size="nano" :state="state" />
+    <div v-if="label" class="text">{{ label }}</div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellIndicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  min-height: 40px;
+}
+
+.text {
+  line-height: 24px;
+  font-size: 14px;
+}
+
+.STableCellIndicator.pending .text   { color: var(--c-text-1); }
+.STableCellIndicator.ready .text     { color: var(--c-text-1); }
+.STableCellIndicator.queued .text    { color: var(--c-text-1); }
+.STableCellIndicator.running .text   { color: var(--c-text-1); }
+.STableCellIndicator.completed .text { color: var(--c-text-1); }
+.STableCellIndicator.failed .text    { color: var(--c-text-3); }
+.STableCellIndicator.aborted .text   { color: var(--c-text-3); }
+</style>

lib/composables/Table.ts

@@ -1,5 +1,6 @@
 import { type Component, type MaybeRef, type MaybeRefOrGetter } from 'vue'
-import { type Mode } from '../components/SButton.vue'
+import { type Mode as ButtonMode } from '../components/SButton.vue'
+import { type State as IndicatorState } from '../components/SIndicator.vue'
 import { type Day } from '../support/Day'
 import { type DropdownSection } from './Dropdown'
 import { type Position } from './Tooltip'
@@ -60,6 +61,7 @@ export type TableCell<V = any, R = any> =
   | TableCellPill
   | TableCellPills
   | TableCellState
+  | TableCellIndicator
   | TableCellAvatar<V, R>
   | TableCellAvatars
   | TableCellCustom
@@ -75,6 +77,7 @@ export type TableCellType =
   | 'pill'
   | 'pills'
   | 'state'
+  | 'indicator'
   | 'avatar'
   | 'avatars'
   | 'custom'
@@ -201,17 +204,23 @@ export interface TableCellState extends TableCellBase {
   mode?: ColorModes
 }
 
+export interface TableCellIndicator extends TableCellBase {
+  type: 'indicator'
+  state: IndicatorState
+  label?: string | null
+}
+
 export interface TableCellActions<R = any> extends TableCellBase {
   type: 'actions'
   actions: TableCellAction<R>[]
 }
 
 export interface TableCellAction<R = any> {
-  mode?: Mode
+  mode?: ButtonMode
   icon?: Component
-  iconMode?: Mode
+  iconMode?: ButtonMode
   label?: string
-  labelMode?: Mode
+  labelMode?: ButtonMode
   onClick(record: R): void
   show?(record: R): boolean
 }
@@ -224,9 +233,9 @@ export interface TableMenu {
 
 export interface TableHeaderAction {
   show?: boolean
-  mode?: Mode
+  mode?: ButtonMode
   label: string
-  labelMode?: Mode
+  labelMode?: ButtonMode
   onClick(): void
 }
 

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

@@ -36,7 +36,8 @@ function state() {
           queued: 'queued',
           running: 'running',
           completed: 'completed',
-          failed: 'failed'
+          failed: 'failed',
+          aborted: 'aborted'
         }"
         v-model="state.state"
       />

stories/components/SIndicator.02_States.story.vue

@@ -10,7 +10,8 @@ const states = [
   'queued',
   'running',
   'completed',
-  'failed'
+  'failed',
+  'aborted'
 ] as const
 
 function state() {