feat(table): add cell type "Path" (#572)

globalbrain · Jan 22, 2025 · e204d34 · e204d34
1 parent dc13b43
commit e204d34
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 0 deletions.
diff --git a/lib/components/STableCell.vue b/lib/components/STableCell.vue
@@ -8,6 +8,7 @@ import STableCellCustom from './STableCellCustom.vue'
 import STableCellDay from './STableCellDay.vue'
 import STableCellEmpty from './STableCellEmpty.vue'
 import STableCellNumber from './STableCellNumber.vue'
+import STableCellPath from './STableCellPath.vue'
 import STableCellPill from './STableCellPill.vue'
 import STableCellPills from './STableCellPills.vue'
 import STableCellState from './STableCellState.vue'
@@ -56,6 +57,10 @@ const computedCell = computed<TableCell | undefined>(() =>
       :icon-color="computedCell.iconColor"
       :on-click="computedCell.onClick"
     />
+    <STableCellPath
+      v-else-if="computedCell.type === 'path'"
+      :segments="computedCell.segments"
+    />
     <STableCellDay
       v-else-if="computedCell.type === 'day'"
       :align="computedCell.align"

diff --git a/lib/components/STableCellPath.vue b/lib/components/STableCellPath.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { type TableCellPathSegment } from '../composables/Table'
+import SLink from './SLink.vue'
+
+defineProps<{
+  segments: TableCellPathSegment[]
+}>()
+
+function classes(item: TableCellPathSegment) {
+  return [
+    item.color ?? 'neutral',
+    { link: !!item.link || !!item.onClick }
+  ]
+}
+</script>
+
+<template>
+  <div class="STableCellPath">
+    <template v-for="segment, index in segments" :key="index">
+      <div v-if="index > 0" class="divider">/</div>
+      <SLink
+        class="text"
+        :class="classes(segment)"
+        :href="segment.link"
+        @click="segment.onClick"
+      >
+        {{ segment.text }}
+      </SLink>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.STableCellPath {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 16px;
+  min-height: 40px;
+}
+
+.divider {
+  color: var(--c-text-3);
+}
+
+.text {
+  line-height: 24px;
+  font-size: 14px;
+  transition: color 0.25s;
+
+  &.neutral { color: var(--c-text-1); }
+  &.soft    { color: var(--c-text-2); }
+  &.mute    { color: var(--c-text-3); }
+  &.info    { color: var(--c-text-info-1); }
+  &.success { color: var(--c-text-success-1); }
+  &.warning { color: var(--c-text-warning-1); }
+  &.danger  { color: var(--c-text-danger-1); }
+
+  &.link {
+    cursor: pointer;
+  }
+
+  &.link.neutral:hover { color: var(--c-text-info-1); }
+  &.link.soft:hover    { color: var(--c-text-info-1); }
+  &.link.mute:hover    { color: var(--c-text-info-1); }
+  &.link.info:hover    { color: var(--c-text-info-2); }
+  &.link.success:hover { color: var(--c-text-success-2); }
+  &.link.warning:hover { color: var(--c-text-warning-2); }
+  &.link.danger:hover  { color: var(--c-text-danger-2); }
+}
+</style>
diff --git a/lib/composables/Table.ts b/lib/composables/Table.ts
@@ -55,6 +55,7 @@ export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell<V, R>
 export type TableCell<V = any, R = any> =
   | TableCellText<V, R>
   | TableCellNumber<V, R>
+  | TableCellPath
   | TableCellDay
   | TableCellPill
   | TableCellPills
@@ -69,6 +70,7 @@ export type TableCell<V = any, R = any> =
 export type TableCellType =
   | 'text'
   | 'number'
+  | 'path'
   | 'day'
   | 'pill'
   | 'pills'
@@ -116,6 +118,18 @@ export interface TableCellNumber<V = any, R = any> extends TableCellBase {
   onClick?(value: V, record: R): void
 }
 
+export interface TableCellPath extends TableCellBase {
+  type: 'path'
+  segments: TableCellPathSegment[]
+}
+
+export interface TableCellPathSegment {
+  text: string
+  link?: string | null
+  color?: TableCellValueColor
+  onClick?(): void
+}
+
 export type TableCellValueColor = ColorModes | 'soft'
 
 export interface TableCellDay extends TableCellBase {