diff --git a/lib/components/STableCell.vue b/lib/components/STableCell.vue index ee700b73..f9aa94f9 100644 --- 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(() => :icon-color="computedCell.iconColor" :on-click="computedCell.onClick" /> + +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 } + ] +} + + + + + diff --git a/lib/composables/Table.ts b/lib/composables/Table.ts index 5834383a..0ade33c3 100644 --- a/lib/composables/Table.ts +++ b/lib/composables/Table.ts @@ -55,6 +55,7 @@ export type TableColumnCellFn = (value: V, record: R) => TableCell export type TableCell = | TableCellText | TableCellNumber + | TableCellPath | TableCellDay | TableCellPill | TableCellPills @@ -69,6 +70,7 @@ export type TableCell = export type TableCellType = | 'text' | 'number' + | 'path' | 'day' | 'pill' | 'pills' @@ -116,6 +118,18 @@ export interface TableCellNumber 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 {