@globalbrain/sefirot 4.8.0 → 4.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import IconCheckCircleFill from '~icons/ph/check-circle-fill'
|
|
3
|
-
import IconCircle from '~icons/ph/circle
|
|
4
|
-
import IconCircleDashed from '~icons/ph/circle-dashed
|
|
5
|
-
import IconCircleNotch from '~icons/ph/circle-notch
|
|
6
|
-
import
|
|
3
|
+
import IconCircle from '~icons/ph/circle'
|
|
4
|
+
import IconCircleDashed from '~icons/ph/circle-dashed'
|
|
5
|
+
import IconCircleNotch from '~icons/ph/circle-notch'
|
|
6
|
+
import IconMinusCircle from '~icons/ph/minus-circle'
|
|
7
|
+
import IconXCircle from '~icons/ph/x-circle'
|
|
7
8
|
import { computed } from 'vue'
|
|
8
9
|
|
|
9
10
|
export type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
|
|
10
|
-
export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed'
|
|
11
|
+
export type State = 'pending' | 'ready' | 'queued' | 'running' | 'completed' | 'failed' | 'aborted'
|
|
11
12
|
export type Mode = 'colored' | 'monochrome'
|
|
12
13
|
|
|
13
14
|
const props = withDefaults(defineProps<{
|
|
@@ -33,6 +34,7 @@ const classes = computed(() => [
|
|
|
33
34
|
<IconCircleNotch v-if="props.state === 'running'" class="icon" />
|
|
34
35
|
<IconCheckCircleFill v-if="props.state === 'completed'" class="icon" />
|
|
35
36
|
<IconXCircle v-if="props.state === 'failed'" class="icon" />
|
|
37
|
+
<IconMinusCircle v-if="props.state === 'aborted'" class="icon aborted" />
|
|
36
38
|
</div>
|
|
37
39
|
</template>
|
|
38
40
|
|
|
@@ -51,6 +53,10 @@ const classes = computed(() => [
|
|
|
51
53
|
.icon {
|
|
52
54
|
width: 100%;
|
|
53
55
|
height: 100%;
|
|
56
|
+
|
|
57
|
+
&.aborted {
|
|
58
|
+
transform: rotate(-45deg);
|
|
59
|
+
}
|
|
54
60
|
}
|
|
55
61
|
|
|
56
62
|
.SIndicator.nano { width: 20px; height: 20px; }
|
|
@@ -75,6 +81,7 @@ const classes = computed(() => [
|
|
|
75
81
|
&.running { color: var(--c-fg-info-1); }
|
|
76
82
|
&.completed { color: var(--c-fg-success-1); }
|
|
77
83
|
&.failed { color: var(--c-fg-danger-1); }
|
|
84
|
+
&.aborted { color: var(--c-fg-gray-1); }
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
.SIndicator.monochrome {
|
|
@@ -7,7 +7,9 @@ import STableCellAvatars from './STableCellAvatars.vue'
|
|
|
7
7
|
import STableCellCustom from './STableCellCustom.vue'
|
|
8
8
|
import STableCellDay from './STableCellDay.vue'
|
|
9
9
|
import STableCellEmpty from './STableCellEmpty.vue'
|
|
10
|
+
import STableCellIndicator from './STableCellIndicator.vue'
|
|
10
11
|
import STableCellNumber from './STableCellNumber.vue'
|
|
12
|
+
import STableCellPath from './STableCellPath.vue'
|
|
11
13
|
import STableCellPill from './STableCellPill.vue'
|
|
12
14
|
import STableCellPills from './STableCellPills.vue'
|
|
13
15
|
import STableCellState from './STableCellState.vue'
|
|
@@ -56,6 +58,10 @@ const computedCell = computed<TableCell | undefined>(() =>
|
|
|
56
58
|
:icon-color="computedCell.iconColor"
|
|
57
59
|
:on-click="computedCell.onClick"
|
|
58
60
|
/>
|
|
61
|
+
<STableCellPath
|
|
62
|
+
v-else-if="computedCell.type === 'path'"
|
|
63
|
+
:segments="computedCell.segments"
|
|
64
|
+
/>
|
|
59
65
|
<STableCellDay
|
|
60
66
|
v-else-if="computedCell.type === 'day'"
|
|
61
67
|
:align="computedCell.align"
|
|
@@ -77,6 +83,11 @@ const computedCell = computed<TableCell | undefined>(() =>
|
|
|
77
83
|
:state="computedCell.label"
|
|
78
84
|
:mode="computedCell.mode"
|
|
79
85
|
/>
|
|
86
|
+
<STableCellIndicator
|
|
87
|
+
v-else-if="computedCell.type === 'indicator'"
|
|
88
|
+
:state="computedCell.state"
|
|
89
|
+
:label="computedCell.label"
|
|
90
|
+
/>
|
|
80
91
|
<STableCellAvatar
|
|
81
92
|
v-else-if="computedCell.type === 'avatar'"
|
|
82
93
|
:value="value"
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import SIndicator, { type State } from './SIndicator.vue'
|
|
3
|
+
|
|
4
|
+
defineProps<{
|
|
5
|
+
state: State
|
|
6
|
+
label?: string | null
|
|
7
|
+
}>()
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<template>
|
|
11
|
+
<div class="STableCellIndicator" :class="[state]">
|
|
12
|
+
<SIndicator size="nano" :state="state" />
|
|
13
|
+
<div v-if="label" class="text">{{ label }}</div>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<style scoped lang="postcss">
|
|
18
|
+
.STableCellIndicator {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
gap: 8px;
|
|
22
|
+
padding: 0 16px;
|
|
23
|
+
min-height: 40px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.text {
|
|
27
|
+
line-height: 24px;
|
|
28
|
+
font-size: 14px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.STableCellIndicator.pending .text { color: var(--c-text-1); }
|
|
32
|
+
.STableCellIndicator.ready .text { color: var(--c-text-1); }
|
|
33
|
+
.STableCellIndicator.queued .text { color: var(--c-text-1); }
|
|
34
|
+
.STableCellIndicator.running .text { color: var(--c-text-1); }
|
|
35
|
+
.STableCellIndicator.completed .text { color: var(--c-text-1); }
|
|
36
|
+
.STableCellIndicator.failed .text { color: var(--c-text-3); }
|
|
37
|
+
.STableCellIndicator.aborted .text { color: var(--c-text-3); }
|
|
38
|
+
</style>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { type TableCellPathSegment } from '../composables/Table'
|
|
3
|
+
import SLink from './SLink.vue'
|
|
4
|
+
|
|
5
|
+
defineProps<{
|
|
6
|
+
segments: TableCellPathSegment[]
|
|
7
|
+
}>()
|
|
8
|
+
|
|
9
|
+
function classes(item: TableCellPathSegment) {
|
|
10
|
+
return [
|
|
11
|
+
item.color ?? 'neutral',
|
|
12
|
+
{ link: !!item.link || !!item.onClick }
|
|
13
|
+
]
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<template>
|
|
18
|
+
<div class="STableCellPath">
|
|
19
|
+
<template v-for="segment, index in segments" :key="index">
|
|
20
|
+
<div v-if="index > 0" class="divider">/</div>
|
|
21
|
+
<SLink
|
|
22
|
+
class="text"
|
|
23
|
+
:class="classes(segment)"
|
|
24
|
+
:href="segment.link"
|
|
25
|
+
@click="segment.onClick"
|
|
26
|
+
>
|
|
27
|
+
{{ segment.text }}
|
|
28
|
+
</SLink>
|
|
29
|
+
</template>
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<style scoped lang="postcss">
|
|
34
|
+
.STableCellPath {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
gap: 6px;
|
|
38
|
+
padding: 0 16px;
|
|
39
|
+
min-height: 40px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.divider {
|
|
43
|
+
color: var(--c-text-3);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.text {
|
|
47
|
+
line-height: 24px;
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
transition: color 0.25s;
|
|
50
|
+
|
|
51
|
+
&.neutral { color: var(--c-text-1); }
|
|
52
|
+
&.soft { color: var(--c-text-2); }
|
|
53
|
+
&.mute { color: var(--c-text-3); }
|
|
54
|
+
&.info { color: var(--c-text-info-1); }
|
|
55
|
+
&.success { color: var(--c-text-success-1); }
|
|
56
|
+
&.warning { color: var(--c-text-warning-1); }
|
|
57
|
+
&.danger { color: var(--c-text-danger-1); }
|
|
58
|
+
|
|
59
|
+
&.link {
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&.link.neutral:hover { color: var(--c-text-info-1); }
|
|
64
|
+
&.link.soft:hover { color: var(--c-text-info-1); }
|
|
65
|
+
&.link.mute:hover { color: var(--c-text-info-1); }
|
|
66
|
+
&.link.info:hover { color: var(--c-text-info-2); }
|
|
67
|
+
&.link.success:hover { color: var(--c-text-success-2); }
|
|
68
|
+
&.link.warning:hover { color: var(--c-text-warning-2); }
|
|
69
|
+
&.link.danger:hover { color: var(--c-text-danger-2); }
|
|
70
|
+
}
|
|
71
|
+
</style>
|
package/lib/composables/Table.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type Component, type MaybeRef, type MaybeRefOrGetter } from 'vue'
|
|
2
|
-
import { type Mode } from '../components/SButton.vue'
|
|
2
|
+
import { type Mode as ButtonMode } from '../components/SButton.vue'
|
|
3
|
+
import { type State as IndicatorState } from '../components/SIndicator.vue'
|
|
3
4
|
import { type Day } from '../support/Day'
|
|
4
5
|
import { type DropdownSection } from './Dropdown'
|
|
5
6
|
import { type Position } from './Tooltip'
|
|
@@ -55,10 +56,12 @@ export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell<V, R>
|
|
|
55
56
|
export type TableCell<V = any, R = any> =
|
|
56
57
|
| TableCellText<V, R>
|
|
57
58
|
| TableCellNumber<V, R>
|
|
59
|
+
| TableCellPath
|
|
58
60
|
| TableCellDay
|
|
59
61
|
| TableCellPill
|
|
60
62
|
| TableCellPills
|
|
61
63
|
| TableCellState
|
|
64
|
+
| TableCellIndicator
|
|
62
65
|
| TableCellAvatar<V, R>
|
|
63
66
|
| TableCellAvatars
|
|
64
67
|
| TableCellCustom
|
|
@@ -69,10 +72,12 @@ export type TableCell<V = any, R = any> =
|
|
|
69
72
|
export type TableCellType =
|
|
70
73
|
| 'text'
|
|
71
74
|
| 'number'
|
|
75
|
+
| 'path'
|
|
72
76
|
| 'day'
|
|
73
77
|
| 'pill'
|
|
74
78
|
| 'pills'
|
|
75
79
|
| 'state'
|
|
80
|
+
| 'indicator'
|
|
76
81
|
| 'avatar'
|
|
77
82
|
| 'avatars'
|
|
78
83
|
| 'custom'
|
|
@@ -116,6 +121,18 @@ export interface TableCellNumber<V = any, R = any> extends TableCellBase {
|
|
|
116
121
|
onClick?(value: V, record: R): void
|
|
117
122
|
}
|
|
118
123
|
|
|
124
|
+
export interface TableCellPath extends TableCellBase {
|
|
125
|
+
type: 'path'
|
|
126
|
+
segments: TableCellPathSegment[]
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export interface TableCellPathSegment {
|
|
130
|
+
text: string
|
|
131
|
+
link?: string | null
|
|
132
|
+
color?: TableCellValueColor
|
|
133
|
+
onClick?(): void
|
|
134
|
+
}
|
|
135
|
+
|
|
119
136
|
export type TableCellValueColor = ColorModes | 'soft'
|
|
120
137
|
|
|
121
138
|
export interface TableCellDay extends TableCellBase {
|
|
@@ -187,17 +204,23 @@ export interface TableCellState extends TableCellBase {
|
|
|
187
204
|
mode?: ColorModes
|
|
188
205
|
}
|
|
189
206
|
|
|
207
|
+
export interface TableCellIndicator extends TableCellBase {
|
|
208
|
+
type: 'indicator'
|
|
209
|
+
state: IndicatorState
|
|
210
|
+
label?: string | null
|
|
211
|
+
}
|
|
212
|
+
|
|
190
213
|
export interface TableCellActions<R = any> extends TableCellBase {
|
|
191
214
|
type: 'actions'
|
|
192
215
|
actions: TableCellAction<R>[]
|
|
193
216
|
}
|
|
194
217
|
|
|
195
218
|
export interface TableCellAction<R = any> {
|
|
196
|
-
mode?:
|
|
219
|
+
mode?: ButtonMode
|
|
197
220
|
icon?: Component
|
|
198
|
-
iconMode?:
|
|
221
|
+
iconMode?: ButtonMode
|
|
199
222
|
label?: string
|
|
200
|
-
labelMode?:
|
|
223
|
+
labelMode?: ButtonMode
|
|
201
224
|
onClick(record: R): void
|
|
202
225
|
show?(record: R): boolean
|
|
203
226
|
}
|
|
@@ -210,9 +233,9 @@ export interface TableMenu {
|
|
|
210
233
|
|
|
211
234
|
export interface TableHeaderAction {
|
|
212
235
|
show?: boolean
|
|
213
|
-
mode?:
|
|
236
|
+
mode?: ButtonMode
|
|
214
237
|
label: string
|
|
215
|
-
labelMode?:
|
|
238
|
+
labelMode?: ButtonMode
|
|
216
239
|
onClick(): void
|
|
217
240
|
}
|
|
218
241
|
|
package/package.json
CHANGED