Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(table): add cell type "Path"
Browse files Browse the repository at this point in the history
kiaking committed Jan 22, 2025
1 parent dc13b43 commit 035cd30
Showing 3 changed files with 90 additions and 0 deletions.
5 changes: 5 additions & 0 deletions lib/components/STableCell.vue
Original file line number Diff line number Diff line change
@@ -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'"
:items="computedCell.items"
/>
<STableCellDay
v-else-if="computedCell.type === 'day'"
:align="computedCell.align"
71 changes: 71 additions & 0 deletions lib/components/STableCellPath.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<script setup lang="ts">
import { type TableCellPathItem } from '../composables/Table'
import SLink from './SLink.vue'
defineProps<{
items: TableCellPathItem[]
}>()
function classes(item: TableCellPathItem) {
return [
item.color ?? 'neutral',
{ link: !!item.link || !!item.onClick }
]
}
</script>

<template>
<div class="STableCellPath">
<template v-for="item, index in items" :key="index">
<div v-if="index > 0" class="divider">/</div>
<SLink
class="text"
:class="classes(item)"
:href="item.link"
@click="item.onClick"
>
{{ item.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>
14 changes: 14 additions & 0 deletions lib/composables/Table.ts
Original file line number Diff line number Diff line change
@@ -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'
items: TableCellPathItem[]
}

export interface TableCellPathItem {
text: string
link?: string | null
color?: TableCellValueColor
onClick?(): void
}

export type TableCellValueColor = ColorModes | 'soft'

export interface TableCellDay extends TableCellBase {

0 comments on commit 035cd30

Please sign in to comment.