@globalbrain/sefirot 3.6.0 → 3.8.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.
- package/lib/components/SAlert.vue +103 -0
- package/lib/components/SLoginPage.vue +204 -0
- package/lib/components/SSnackbar.vue +5 -5
- package/lib/components/SStep.vue +12 -12
- package/lib/components/STableCellPill.vue +2 -4
- package/lib/components/STableCellPills.vue +2 -7
- package/lib/components/STableCellText.vue +3 -2
- package/lib/components/icon/SIconGbLogoWhite.vue +13 -0
- package/lib/components/icon/SIconGoogle.vue +12 -0
- package/lib/composables/Table.ts +45 -38
- package/package.json +3 -1
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import IconSuccess from '@iconify-icons/ph/check-bold'
|
|
3
|
+
import IconInfo from '@iconify-icons/ph/info-bold'
|
|
4
|
+
import IconWarning from '@iconify-icons/ph/warning-bold'
|
|
5
|
+
import IconDanger from '@iconify-icons/ph/warning-octagon-bold'
|
|
6
|
+
import SIcon from './SIcon.vue'
|
|
7
|
+
|
|
8
|
+
withDefaults(defineProps<{
|
|
9
|
+
mode?: 'info' | 'success' | 'warning' | 'danger'
|
|
10
|
+
}>(), {
|
|
11
|
+
mode: 'info'
|
|
12
|
+
})
|
|
13
|
+
|
|
14
|
+
const iconDict = {
|
|
15
|
+
info: IconInfo,
|
|
16
|
+
success: IconSuccess,
|
|
17
|
+
warning: IconWarning,
|
|
18
|
+
danger: IconDanger
|
|
19
|
+
} as const
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<template>
|
|
23
|
+
<div class="SAlert" :class="[mode]">
|
|
24
|
+
<div class="icon">
|
|
25
|
+
<SIcon :icon="iconDict[mode]" class="icon-svg" />
|
|
26
|
+
</div>
|
|
27
|
+
<div class="content">
|
|
28
|
+
<slot />
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<style scoped lang="postcss">
|
|
34
|
+
.SAlert {
|
|
35
|
+
display: grid;
|
|
36
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
37
|
+
gap: 14px;
|
|
38
|
+
border: 1px solid var(--alert-border-color);
|
|
39
|
+
border-radius: 6px;
|
|
40
|
+
padding: 16px;
|
|
41
|
+
background-color: var(--alert-bg-color);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.icon {
|
|
45
|
+
display: flex;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
align-items: center;
|
|
48
|
+
height: 24px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.icon-svg {
|
|
52
|
+
width: 20px;
|
|
53
|
+
height: 20px;
|
|
54
|
+
color: var(--alert-icon-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.content {
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
gap: 16px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.content :slotted(p) {
|
|
64
|
+
margin: 0;
|
|
65
|
+
max-width: 65ch;
|
|
66
|
+
line-height: 24px;
|
|
67
|
+
font-size: 14px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.content :slotted(a) {
|
|
71
|
+
font-weight: 500;
|
|
72
|
+
text-decoration: underline;
|
|
73
|
+
transition: color 0.25s;
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
color: var(--c-text-2);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.SAlert.info {
|
|
81
|
+
--alert-border-color: var(--c-border-info-1);
|
|
82
|
+
--alert-bg-color: var(--c-bg-info-dimm-a1);
|
|
83
|
+
--alert-icon-color: var(--c-text-info-1);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.SAlert.success {
|
|
87
|
+
--alert-border-color: var(--c-border-success-1);
|
|
88
|
+
--alert-bg-color: var(--c-bg-success-dimm-a1);
|
|
89
|
+
--alert-icon-color: var(--c-text-success-1);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.SAlert.warning {
|
|
93
|
+
--alert-border-color: var(--c-border-warning-1);
|
|
94
|
+
--alert-bg-color: var(--c-bg-warning-dimm-a1);
|
|
95
|
+
--alert-icon-color: var(--c-text-warning-1);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.SAlert.danger {
|
|
99
|
+
--alert-border-color: var(--c-border-danger-1);
|
|
100
|
+
--alert-bg-color: var(--c-bg-danger-dimm-a1);
|
|
101
|
+
--alert-icon-color: var(--c-text-danger-1);
|
|
102
|
+
}
|
|
103
|
+
</style>
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import IconGoogle from '@iconify-icons/ri/google-fill'
|
|
3
|
+
import { computed } from 'vue'
|
|
4
|
+
import SButton from './SButton.vue'
|
|
5
|
+
import SLink from './SLink.vue'
|
|
6
|
+
import SIconGbLogoWhite from './icon/SIconGbLogoWhite.vue'
|
|
7
|
+
|
|
8
|
+
export interface CoverTitle {
|
|
9
|
+
text: string
|
|
10
|
+
link: string
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface CoverPhotographer {
|
|
14
|
+
text: string
|
|
15
|
+
link: string
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export interface Action {
|
|
19
|
+
type: 'google'
|
|
20
|
+
onClick: () => Promise<void>
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const props = defineProps<{
|
|
24
|
+
cover: string
|
|
25
|
+
coverTitle: CoverTitle
|
|
26
|
+
coverPhotographer: CoverPhotographer
|
|
27
|
+
actions: Action[]
|
|
28
|
+
}>()
|
|
29
|
+
|
|
30
|
+
const coverBgImageStyle = computed(() => `url(${props.cover})`)
|
|
31
|
+
|
|
32
|
+
function getActionLabel(type: Action['type']) {
|
|
33
|
+
switch (type) {
|
|
34
|
+
case 'google':
|
|
35
|
+
return 'Sign in via Google'
|
|
36
|
+
default:
|
|
37
|
+
throw new Error('[sefirot] Invalid action type')
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function getIconComponent(type: Action['type']) {
|
|
42
|
+
switch (type) {
|
|
43
|
+
case 'google':
|
|
44
|
+
return IconGoogle
|
|
45
|
+
default:
|
|
46
|
+
throw new Error('[sefirot] Invalid action type')
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<template>
|
|
52
|
+
<div class="SLoginPage dark">
|
|
53
|
+
<div class="cover">
|
|
54
|
+
<div class="cover-caption">
|
|
55
|
+
<p class="cover-caption-text">
|
|
56
|
+
<SLink class="cover-caption-link" :href="coverTitle.link">
|
|
57
|
+
{{ coverTitle.text }}
|
|
58
|
+
</SLink>
|
|
59
|
+
by
|
|
60
|
+
<SLink class="cover-caption-link" :href="coverPhotographer.link">
|
|
61
|
+
{{ coverPhotographer.text }}
|
|
62
|
+
</SLink>
|
|
63
|
+
</p>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="form">
|
|
67
|
+
<div class="form-container">
|
|
68
|
+
<div class="form-logo">
|
|
69
|
+
<SIconGbLogoWhite class="form-logo-icon" />
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div class="form-content">
|
|
73
|
+
<h1 class="form-title">Sign in to account</h1>
|
|
74
|
+
<p class="form-lead">This is a very closed login form meant for specific audiences only. If you can’t login, well, you know who to ask.</p>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div class="form-actions">
|
|
78
|
+
<SButton
|
|
79
|
+
v-for="action in actions"
|
|
80
|
+
:key="action.type"
|
|
81
|
+
size="large"
|
|
82
|
+
mode="white"
|
|
83
|
+
rounded
|
|
84
|
+
:label="getActionLabel(action.type)"
|
|
85
|
+
:icon="getIconComponent(action.type)"
|
|
86
|
+
@click="action.onClick"
|
|
87
|
+
/>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
</template>
|
|
93
|
+
|
|
94
|
+
<style scoped lang="postcss">
|
|
95
|
+
.SLoginPage {
|
|
96
|
+
position: relative;
|
|
97
|
+
background-color: var(--c-bg-elv-1);
|
|
98
|
+
|
|
99
|
+
@media (min-width: 768px) {
|
|
100
|
+
display: grid;
|
|
101
|
+
grid-template-columns: 1fr 392px;
|
|
102
|
+
gap: 4px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@media (min-width: 1024px) {
|
|
106
|
+
grid-template-columns: 1fr 480px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.cover {
|
|
111
|
+
display: none;
|
|
112
|
+
width: 100%;
|
|
113
|
+
height: 100%;
|
|
114
|
+
background-image: v-bind(coverBgImageStyle);
|
|
115
|
+
background-position: 50% 50%;
|
|
116
|
+
background-size: cover;
|
|
117
|
+
background-repeat: no-repeat;
|
|
118
|
+
|
|
119
|
+
@media (min-width: 768px) {
|
|
120
|
+
display: block;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.cover-caption {
|
|
125
|
+
position: absolute;
|
|
126
|
+
left: 0;
|
|
127
|
+
bottom: 0;
|
|
128
|
+
border-top: 4px solid var(--c-bg-elv-1);
|
|
129
|
+
border-right: 4px solid var(--c-bg-elv-1);
|
|
130
|
+
padding: 16px 24px;
|
|
131
|
+
font-size: 12px;
|
|
132
|
+
background-color: var(--c-bg-elv-2);
|
|
133
|
+
|
|
134
|
+
@media (min-width: 768px) {
|
|
135
|
+
display: block;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.cover-caption-text {
|
|
140
|
+
color: var(--c-text-2);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.cover-caption-link {
|
|
144
|
+
color: var(--c-text-1);
|
|
145
|
+
transition: color 0.25s;
|
|
146
|
+
|
|
147
|
+
&:hover {
|
|
148
|
+
color: var(--c-text-2);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.form {
|
|
153
|
+
padding: 96px 32px 48px;
|
|
154
|
+
min-height: 100vh;
|
|
155
|
+
background-color: var(--c-bg-elv-2);
|
|
156
|
+
|
|
157
|
+
@media (min-width: 768px) {
|
|
158
|
+
display: flex;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
align-items: center;
|
|
161
|
+
padding: 48px;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.form-container {
|
|
166
|
+
@media (min-width: 768px) {
|
|
167
|
+
margin-top: -96px;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.form-logo {
|
|
172
|
+
margin: 0 auto;
|
|
173
|
+
width: 80px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.form-content {
|
|
177
|
+
padding-top: 64px;
|
|
178
|
+
text-align: center;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.form-title {
|
|
182
|
+
font-size: 20px;
|
|
183
|
+
font-weight: 600;
|
|
184
|
+
color: var(--c-text-1);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.form-lead {
|
|
188
|
+
margin: 0 auto;
|
|
189
|
+
padding: 12px;
|
|
190
|
+
max-width: 336px;
|
|
191
|
+
font-size: 14px;
|
|
192
|
+
color: var(--c-text-2);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.form-actions {
|
|
196
|
+
display: flex;
|
|
197
|
+
flex-direction: column;
|
|
198
|
+
align-items: center;
|
|
199
|
+
gap: 8px;
|
|
200
|
+
padding-top: 24px;
|
|
201
|
+
text-align: center;
|
|
202
|
+
margin: 0 auto;
|
|
203
|
+
}
|
|
204
|
+
</style>
|
|
@@ -47,7 +47,7 @@ function close() {
|
|
|
47
47
|
border: 1px solid var(--c-divider);
|
|
48
48
|
border-radius: 6px;
|
|
49
49
|
width: 100%;
|
|
50
|
-
background-color: var(--c-bg-elv-
|
|
50
|
+
background-color: var(--c-bg-elv-3);
|
|
51
51
|
box-shadow: var(--shadow-depth-3);
|
|
52
52
|
overflow: hidden;
|
|
53
53
|
|
|
@@ -60,10 +60,10 @@ function close() {
|
|
|
60
60
|
content: "";
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
&.neutral::before { background-color: var(--c-gray); }
|
|
64
|
-
&.info::before { background-color: var(--c-info); }
|
|
65
|
-
&.warning::before { background-color: var(--c-warning); }
|
|
66
|
-
&.danger::before { background-color: var(--c-danger); }
|
|
63
|
+
&.neutral::before { background-color: var(--c-fg-gray-1); }
|
|
64
|
+
&.info::before { background-color: var(--c-fg-info-1); }
|
|
65
|
+
&.warning::before { background-color: var(--c-fg-warning-1); }
|
|
66
|
+
&.danger::before { background-color: var(--c-fg-danger-1); }
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
.close {
|
package/lib/components/SStep.vue
CHANGED
|
@@ -31,19 +31,19 @@ defineProps({
|
|
|
31
31
|
|
|
32
32
|
<style lang="postcss" scoped>
|
|
33
33
|
.SStep.upcoming {
|
|
34
|
-
.point { border-color: var(--c-
|
|
34
|
+
.point { border-color: var(--c-border-mute-1); }
|
|
35
35
|
.text { color: var(--c-text-2); }
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.SStep.active {
|
|
39
|
-
.point { border-color: var(--c-success); }
|
|
40
|
-
.text { color: var(--c-success); }
|
|
39
|
+
.point { border-color: var(--c-fg-success-1); }
|
|
40
|
+
.text { color: var(--c-text-success-1); }
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.SStep.done {
|
|
44
44
|
.point {
|
|
45
|
-
border-color: var(--c-success);
|
|
46
|
-
background-color: var(--c-success);
|
|
45
|
+
border-color: var(--c-fg-success-1);
|
|
46
|
+
background-color: var(--c-fg-success-1);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.text { color: var(--c-text-1); }
|
|
@@ -51,11 +51,11 @@ defineProps({
|
|
|
51
51
|
|
|
52
52
|
.SStep.failed {
|
|
53
53
|
.point {
|
|
54
|
-
border-color: var(--c-danger);
|
|
55
|
-
background-color: var(--c-danger);
|
|
54
|
+
border-color: var(--c-fg-danger-1);
|
|
55
|
+
background-color: var(--c-fg-danger-1);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
.text { color: var(--c-danger); }
|
|
58
|
+
.text { color: var(--c-text-danger-1); }
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.indicator {
|
|
@@ -78,7 +78,7 @@ defineProps({
|
|
|
78
78
|
border-radius: 50%;
|
|
79
79
|
width: 6px;
|
|
80
80
|
height: 6px;
|
|
81
|
-
background-color: var(--c-success);
|
|
81
|
+
background-color: var(--c-fg-success-1);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
.icon {
|
|
@@ -92,9 +92,9 @@ defineProps({
|
|
|
92
92
|
height: 2px;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
.bar.mute { background-color: var(--c-
|
|
96
|
-
.bar.active { background-color: var(--c-success); }
|
|
97
|
-
.bar.failed { background-color: var(--c-danger); }
|
|
95
|
+
.bar.mute { background-color: var(--c-border-mute-1); }
|
|
96
|
+
.bar.active { background-color: var(--c-fg-success-1); }
|
|
97
|
+
.bar.failed { background-color: var(--c-fg-danger-1); }
|
|
98
98
|
|
|
99
99
|
.text {
|
|
100
100
|
margin: 0;
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { computed } from 'vue'
|
|
3
|
-
import SPill from './SPill.vue'
|
|
4
|
-
|
|
5
|
-
export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
|
|
3
|
+
import SPill, { type Mode } from './SPill.vue'
|
|
6
4
|
|
|
7
5
|
const props = defineProps<{
|
|
8
6
|
value?: any
|
|
9
7
|
record: any
|
|
10
8
|
getter?: string | ((value: any, record: any) => string)
|
|
11
|
-
color?:
|
|
9
|
+
color?: Mode | ((value: any, record: any) => Mode)
|
|
12
10
|
}>()
|
|
13
11
|
|
|
14
12
|
const _value = computed(() => {
|
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { computed } from 'vue'
|
|
3
|
-
import { type
|
|
3
|
+
import { type TableCellPillItem } from '../composables/Table'
|
|
4
4
|
import STableCellPill from './STableCellPill.vue'
|
|
5
5
|
|
|
6
|
-
export interface Pill {
|
|
7
|
-
label: string
|
|
8
|
-
color: TableCellPillColor
|
|
9
|
-
}
|
|
10
|
-
|
|
11
6
|
const props = defineProps<{
|
|
12
7
|
value: string[]
|
|
13
8
|
record: any
|
|
14
|
-
pills(value: string[], record: any):
|
|
9
|
+
pills(value: string[], record: any): TableCellPillItem[]
|
|
15
10
|
}>()
|
|
16
11
|
|
|
17
12
|
const items = computed(() => props.pills(props.value, props.record))
|
|
@@ -4,13 +4,14 @@ import SIcon from './SIcon.vue'
|
|
|
4
4
|
import SLink from './SLink.vue'
|
|
5
5
|
|
|
6
6
|
export type Color =
|
|
7
|
-
| '
|
|
8
|
-
| 'soft'
|
|
7
|
+
| 'default'
|
|
9
8
|
| 'mute'
|
|
9
|
+
| 'neutral'
|
|
10
10
|
| 'info'
|
|
11
11
|
| 'success'
|
|
12
12
|
| 'warning'
|
|
13
13
|
| 'danger'
|
|
14
|
+
| 'soft'
|
|
14
15
|
|
|
15
16
|
const props = defineProps<{
|
|
16
17
|
value?: any
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 192">
|
|
3
|
+
<polygon class="line" points="140.49 21.76 140.49 36.09 192 17.32 192 3 140.49 21.76 " />
|
|
4
|
+
<polygon class="line" points="42.93 159.04 0 174.68 0 189 42.93 173.36 42.93 159.04 " />
|
|
5
|
+
<path class="mark" d="M82.7,57v5.63a24.68,24.68,0,0,0-15.42-5.84c-14.66,0-28.11,11.55-28.11,36,0,27.18,12.22,38.32,27.43,38.32,6.33,0,11.49-2.55,16.06-6.22-.48,19.11-6.5,22.06-24.48,28.61v14.32c23.72-8.65,38.23-13.59,38.23-42.56V52ZM53.16,92.37c0-15.08,5.43-22.69,15.48-22.69,5.45,0,10.57,3.08,14.06,6.42V112c-3.57,3.44-8.29,6.21-13.52,6.21C58.86,118.19,53.16,110.31,53.16,92.37Z " />
|
|
6
|
+
<path class="mark" d="M143.47,57.57c-7.32,0-13.17,3.46-18.23,8.13V27.39l-13.58,4.94V129h13.58v-6.53a24.77,24.77,0,0,0,17.57,8c14.51,0,27.55-11.33,27.55-35.31C170.36,68.49,158.52,57.57,143.47,57.57Zm-2,60.22c-6.92,0-13.31-5.06-16.37-9.19V79.15c3.59-4.53,9.31-8.92,15.84-8.92,10.11,0,15.7,7.72,15.7,25.31C156.65,110.33,151.33,117.79,141.48,117.79Z " />
|
|
7
|
+
</svg>
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<style scoped lang="postcss">
|
|
11
|
+
.line { fill: #979fa4; }
|
|
12
|
+
.mark { fill: #ffffff; }
|
|
13
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
viewBox="0 0 16 16"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
fill-rule="evenodd"
|
|
6
|
+
clip-rule="evenodd"
|
|
7
|
+
stroke-linejoin="round"
|
|
8
|
+
stroke-miterlimit="1.414"
|
|
9
|
+
>
|
|
10
|
+
<path d="M8.16 6.857V9.6h4.537c-.183 1.177-1.37 3.45-4.537 3.45-2.73 0-4.96-2.26-4.96-5.05s2.23-5.05 4.96-5.05c1.554 0 2.594.66 3.19 1.233l2.17-2.092C12.126.79 10.32 0 8.16 0c-4.423 0-8 3.577-8 8s3.577 8 8 8c4.617 0 7.68-3.246 7.68-7.817 0-.526-.057-.926-.126-1.326H8.16z" />
|
|
11
|
+
</svg>
|
|
12
|
+
</template>
|
package/lib/composables/Table.ts
CHANGED
|
@@ -46,26 +46,26 @@ export interface TableColumn<V, R, SV, SR> {
|
|
|
46
46
|
dropdown?: DropdownSection[]
|
|
47
47
|
grow?: boolean
|
|
48
48
|
resizable?: boolean
|
|
49
|
-
cell?: TableCell | TableColumnCellFn<V, R>
|
|
50
|
-
summaryCell?: TableCell | TableColumnCellFn<SV, SR>
|
|
49
|
+
cell?: TableCell<V, R> | TableColumnCellFn<V, R>
|
|
50
|
+
summaryCell?: TableCell<SV, SR> | TableColumnCellFn<SV, SR>
|
|
51
51
|
show?: boolean
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell
|
|
54
|
+
export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell<V, R>
|
|
55
55
|
|
|
56
|
-
export type TableCell =
|
|
57
|
-
| TableCellText
|
|
58
|
-
| TableCellNumber
|
|
56
|
+
export type TableCell<V = any, R = any> =
|
|
57
|
+
| TableCellText<V, R>
|
|
58
|
+
| TableCellNumber<V, R>
|
|
59
59
|
| TableCellDay
|
|
60
|
-
| TableCellPill
|
|
61
|
-
| TableCellPills
|
|
60
|
+
| TableCellPill<V, R>
|
|
61
|
+
| TableCellPills<V, R>
|
|
62
62
|
| TableCellState
|
|
63
|
-
| TableCellAvatar
|
|
64
|
-
| TableCellAvatars
|
|
63
|
+
| TableCellAvatar<V, R>
|
|
64
|
+
| TableCellAvatars<V, R>
|
|
65
65
|
| TableCellCustom
|
|
66
66
|
| TableCellEmpty
|
|
67
67
|
| TableCellComponent
|
|
68
|
-
| TableCellActions
|
|
68
|
+
| TableCellActions<R>
|
|
69
69
|
|
|
70
70
|
export type TableCellType =
|
|
71
71
|
| 'text'
|
|
@@ -81,24 +81,31 @@ export type TableCellType =
|
|
|
81
81
|
| 'component'
|
|
82
82
|
| 'actions'
|
|
83
83
|
|
|
84
|
-
export type ColorModes =
|
|
84
|
+
export type ColorModes =
|
|
85
|
+
| 'default'
|
|
86
|
+
| 'mute'
|
|
87
|
+
| 'neutral'
|
|
88
|
+
| 'info'
|
|
89
|
+
| 'success'
|
|
90
|
+
| 'warning'
|
|
91
|
+
| 'danger'
|
|
85
92
|
|
|
86
93
|
export interface TableCellBase {
|
|
87
94
|
type: TableCellType
|
|
88
95
|
}
|
|
89
96
|
|
|
90
|
-
export interface TableCellText extends TableCellBase {
|
|
97
|
+
export interface TableCellText<V = any, R = any> extends TableCellBase {
|
|
91
98
|
type: 'text'
|
|
92
99
|
align?: 'left' | 'center' | 'right'
|
|
93
100
|
icon?: any
|
|
94
|
-
value?: string | null | ((value:
|
|
95
|
-
link?: string | null | ((value:
|
|
96
|
-
color?: TableCellValueColor | ((value:
|
|
97
|
-
iconColor?: TableCellValueColor | ((value:
|
|
98
|
-
onClick?(value:
|
|
101
|
+
value?: string | null | ((value: V, record: R) => string | null)
|
|
102
|
+
link?: string | null | ((value: V, record: R) => string)
|
|
103
|
+
color?: TableCellValueColor | ((value: V, record: R) => TableCellValueColor)
|
|
104
|
+
iconColor?: TableCellValueColor | ((value: V, record: R) => TableCellValueColor)
|
|
105
|
+
onClick?(value: V, record: R): void
|
|
99
106
|
}
|
|
100
107
|
|
|
101
|
-
export interface TableCellNumber extends TableCellBase {
|
|
108
|
+
export interface TableCellNumber<V = any, R = any> extends TableCellBase {
|
|
102
109
|
type: 'number'
|
|
103
110
|
align?: 'left' | 'center' | 'right'
|
|
104
111
|
icon?: any
|
|
@@ -107,7 +114,7 @@ export interface TableCellNumber extends TableCellBase {
|
|
|
107
114
|
link?: string | null
|
|
108
115
|
color?: TableCellValueColor
|
|
109
116
|
iconColor?: TableCellValueColor
|
|
110
|
-
onClick?(value:
|
|
117
|
+
onClick?(value: V, record: R): void
|
|
111
118
|
}
|
|
112
119
|
|
|
113
120
|
export type TableCellValueColor = ColorModes | 'soft'
|
|
@@ -120,36 +127,36 @@ export interface TableCellDay extends TableCellBase {
|
|
|
120
127
|
color?: 'neutral' | 'soft' | 'mute'
|
|
121
128
|
}
|
|
122
129
|
|
|
123
|
-
export interface TableCellPill extends TableCellBase {
|
|
130
|
+
export interface TableCellPill<V = any, R = any> extends TableCellBase {
|
|
124
131
|
type: 'pill'
|
|
125
|
-
value?: string | ((value:
|
|
126
|
-
color?: TableCellPillColor | ((value:
|
|
132
|
+
value?: string | ((value: V, record: R) => string)
|
|
133
|
+
color?: TableCellPillColor | ((value: V, record: R) => TableCellPillColor)
|
|
127
134
|
}
|
|
128
135
|
|
|
129
136
|
export type TableCellPillColor = ColorModes
|
|
130
137
|
|
|
131
|
-
export interface TableCellPills extends TableCellBase {
|
|
138
|
+
export interface TableCellPills<V = any, R = any> extends TableCellBase {
|
|
132
139
|
type: 'pills'
|
|
133
|
-
pills(value:
|
|
140
|
+
pills(value: V, record: R): TableCellPillItem[]
|
|
134
141
|
}
|
|
135
142
|
|
|
136
143
|
export interface TableCellPillItem {
|
|
137
144
|
label: string
|
|
138
|
-
color
|
|
145
|
+
color?: TableCellPillColor
|
|
139
146
|
}
|
|
140
147
|
|
|
141
|
-
export interface TableCellAvatar extends TableCellBase {
|
|
148
|
+
export interface TableCellAvatar<V = any, R = any> extends TableCellBase {
|
|
142
149
|
type: 'avatar'
|
|
143
|
-
image?: string | null | ((value:
|
|
144
|
-
name?: string | null | ((value:
|
|
145
|
-
link?: string | null | ((value:
|
|
150
|
+
image?: string | null | ((value: V, record: R) => string | null | undefined)
|
|
151
|
+
name?: string | null | ((value: V, record: R) => string | null | undefined)
|
|
152
|
+
link?: string | null | ((value: V, record: R) => string | null | undefined)
|
|
146
153
|
color?: 'neutral' | 'soft' | 'mute'
|
|
147
|
-
onClick?(value:
|
|
154
|
+
onClick?(value: V, record: R): void
|
|
148
155
|
}
|
|
149
156
|
|
|
150
|
-
export interface TableCellAvatars extends TableCellBase {
|
|
157
|
+
export interface TableCellAvatars<V = any, R = any> extends TableCellBase {
|
|
151
158
|
type: 'avatars'
|
|
152
|
-
avatars: TableCellAvatarsOption[] | ((value:
|
|
159
|
+
avatars: TableCellAvatarsOption[] | ((value: V, record: R) => TableCellAvatarsOption[])
|
|
153
160
|
color?: 'neutral' | 'soft' | 'mute'
|
|
154
161
|
}
|
|
155
162
|
|
|
@@ -178,19 +185,19 @@ export interface TableCellState extends TableCellBase {
|
|
|
178
185
|
mode?: ColorModes
|
|
179
186
|
}
|
|
180
187
|
|
|
181
|
-
export interface TableCellActions extends TableCellBase {
|
|
188
|
+
export interface TableCellActions<R = any> extends TableCellBase {
|
|
182
189
|
type: 'actions'
|
|
183
|
-
actions: TableCellAction[]
|
|
190
|
+
actions: TableCellAction<R>[]
|
|
184
191
|
}
|
|
185
192
|
|
|
186
|
-
export interface TableCellAction {
|
|
193
|
+
export interface TableCellAction<R = any> {
|
|
187
194
|
mode?: Mode
|
|
188
195
|
icon?: any
|
|
189
196
|
iconMode?: Mode
|
|
190
197
|
label?: string
|
|
191
198
|
labelMode?: Mode
|
|
192
|
-
onClick(record:
|
|
193
|
-
show?(record:
|
|
199
|
+
onClick(record: R): void
|
|
200
|
+
show?(record: R): boolean
|
|
194
201
|
}
|
|
195
202
|
|
|
196
203
|
export interface TableMenu {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@globalbrain/sefirot",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.0",
|
|
4
4
|
"packageManager": "pnpm@8.10.5",
|
|
5
5
|
"description": "Vue Components for Global Brain Design System.",
|
|
6
6
|
"author": "Kia Ishii <ka.ishii@globalbrains.com>",
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@iconify-icons/ph": "^1.2.5",
|
|
42
|
+
"@iconify-icons/ri": "^1.2.10",
|
|
42
43
|
"@iconify/vue": "^4.1.1",
|
|
43
44
|
"@tanstack/vue-virtual": "3.0.0-beta.62",
|
|
44
45
|
"@types/body-scroll-lock": "^3.1.2",
|
|
@@ -66,6 +67,7 @@
|
|
|
66
67
|
"@globalbrain/eslint-config": "^1.5.2",
|
|
67
68
|
"@histoire/plugin-vue": "^0.17.5",
|
|
68
69
|
"@iconify-icons/ph": "^1.2.5",
|
|
70
|
+
"@iconify-icons/ri": "^1.2.10",
|
|
69
71
|
"@iconify/vue": "^4.1.1",
|
|
70
72
|
"@release-it/conventional-changelog": "^8.0.1",
|
|
71
73
|
"@tanstack/vue-virtual": "3.0.0-beta.62",
|