@globalbrain/sefirot 2.34.0 → 2.35.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/SButton.vue +7 -5
- package/lib/components/SCard.vue +70 -0
- package/lib/components/SCardBlock.vue +33 -0
- package/lib/components/SCardFooter.vue +14 -0
- package/lib/components/SCardFooterAction.vue +31 -0
- package/lib/components/SCardFooterActions.vue +15 -0
- package/lib/components/SCardHeader.vue +15 -0
- package/lib/components/SCardHeaderAction.vue +28 -0
- package/lib/components/SCardHeaderActionClose.vue +27 -0
- package/lib/components/SCardHeaderActionCollapse.vue +47 -0
- package/lib/components/SCardHeaderActions.vue +13 -0
- package/lib/components/SCardHeaderTitle.vue +15 -0
- package/lib/components/SDropdown.vue +6 -11
- package/lib/components/SDropdownSection.vue +0 -25
- package/lib/components/SDropdownSectionActions.vue +3 -2
- package/lib/components/SDropdownSectionFilter.vue +60 -26
- package/lib/components/SDropdownSectionFilterItemAvatar.vue +1 -1
- package/lib/components/SDropdownSectionFilterItemText.vue +1 -2
- package/lib/components/SDropdownSectionMenu.vue +3 -2
- package/lib/components/SIcon.vue +1 -1
- package/lib/components/SModal.vue +2 -2
- package/lib/components/STableCell.vue +1 -0
- package/lib/components/STableCellAvatar.vue +8 -2
- package/lib/components/STableColumn.vue +3 -3
- package/lib/components/STableHeader.vue +2 -0
- package/lib/composables/Card.ts +45 -0
- package/lib/composables/Flyout.ts +1 -1
- package/lib/composables/Form.ts +4 -4
- package/lib/composables/Table.ts +1 -0
- package/lib/composables/Tooltip.ts +9 -10
- package/lib/composables/Utils.ts +2 -2
- package/lib/mixins/Card.ts +30 -0
- package/lib/styles/variables.css +214 -86
- package/lib/support/Num.ts +7 -0
- package/package.json +40 -40
|
@@ -10,6 +10,7 @@ const props = defineProps<{
|
|
|
10
10
|
name?: string | null | ((value: any, record: any) => string | null | undefined)
|
|
11
11
|
link?: string | null | ((value: any, record: any) => string | null | undefined)
|
|
12
12
|
color?: 'neutral' | 'soft' | 'mute'
|
|
13
|
+
onClick?(value: any, record: any): void
|
|
13
14
|
}>()
|
|
14
15
|
|
|
15
16
|
const _image = computed(() => resolve(props.image))
|
|
@@ -30,8 +31,13 @@ function resolve(
|
|
|
30
31
|
</script>
|
|
31
32
|
|
|
32
33
|
<template>
|
|
33
|
-
<div class="STableCellAvatar" :class="[{ link }, color]">
|
|
34
|
-
<SLink
|
|
34
|
+
<div class="STableCellAvatar" :class="[{ link: link || onClick }, color]">
|
|
35
|
+
<SLink
|
|
36
|
+
class="container"
|
|
37
|
+
:href="_link ?? undefined"
|
|
38
|
+
:role="onClick ? 'button' : null"
|
|
39
|
+
@click="() => onClick?.(value, record)"
|
|
40
|
+
>
|
|
35
41
|
<div v-if="_image" class="avatar">
|
|
36
42
|
<SAvatar size="mini" :avatar="_image" :name="_name" />
|
|
37
43
|
</div>
|
|
@@ -90,14 +90,14 @@ function stopResizeListener() {
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
async function adjustDialogPosition() {
|
|
93
|
-
|
|
93
|
+
const rect = container.value?.getBoundingClientRect()
|
|
94
|
+
|
|
95
|
+
if (!props.dropdown || !isOpen.value || !rect) {
|
|
94
96
|
return
|
|
95
97
|
}
|
|
96
98
|
|
|
97
99
|
startDialogPositionListener()
|
|
98
100
|
|
|
99
|
-
const rect = container.value.getBoundingClientRect()
|
|
100
|
-
|
|
101
101
|
await nextTick()
|
|
102
102
|
|
|
103
103
|
const dialogWidth = dialog.value?.offsetWidth ?? 0
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
|
|
2
|
+
|
|
3
|
+
export interface CardState {
|
|
4
|
+
isCollapsed: Ref<boolean>
|
|
5
|
+
setCollapse(value: boolean): void
|
|
6
|
+
toggleCollapse(): void
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const cardStateKey = Symbol('card-state') as InjectionKey<CardState>
|
|
10
|
+
|
|
11
|
+
export function provideCardState(): CardState {
|
|
12
|
+
const isCollapsed = ref(false)
|
|
13
|
+
|
|
14
|
+
function setCollapse(value: boolean): void {
|
|
15
|
+
isCollapsed.value = value
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function toggleCollapse(): void {
|
|
19
|
+
isCollapsed.value = !isCollapsed.value
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const cardState = {
|
|
23
|
+
isCollapsed,
|
|
24
|
+
setCollapse,
|
|
25
|
+
toggleCollapse
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
provide(cardStateKey, cardState)
|
|
29
|
+
|
|
30
|
+
return cardState
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export function useCardState(): CardState {
|
|
34
|
+
const cardState = inject(cardStateKey)
|
|
35
|
+
|
|
36
|
+
if (!cardState) {
|
|
37
|
+
throw new Error(
|
|
38
|
+
'[sefirot] Unexpected call to `useCardState`. This probably means you'
|
|
39
|
+
+ ' are using `<SCard>` child component outside of `<SCard>`. Make sure'
|
|
40
|
+
+ ' to wrap the component within `<SCard>` component.'
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
return cardState
|
|
45
|
+
}
|
|
@@ -19,7 +19,7 @@ export function useFlyout(container?: Ref<any>) {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
function closeOnClickOutside(event: any) {
|
|
22
|
-
if (!el.value
|
|
22
|
+
if (!el.value?.contains(event.target) && isVisible(el.value)) {
|
|
23
23
|
isOpen.value = false
|
|
24
24
|
}
|
|
25
25
|
}
|
package/lib/composables/Form.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Ref, computed, reactive, toRefs } from 'vue'
|
|
2
|
-
import { useSnackbars } from '../stores/Snackbars'
|
|
2
|
+
import { type Snackbar, useSnackbars } from '../stores/Snackbars'
|
|
3
3
|
import { type UseDataInput, useData } from './Data'
|
|
4
4
|
import { type Validation, useValidation } from './Validation'
|
|
5
5
|
|
|
@@ -9,7 +9,7 @@ export interface Form<T extends Record<string, any>> {
|
|
|
9
9
|
init(): void
|
|
10
10
|
reset(): void
|
|
11
11
|
validate(): Promise<boolean>
|
|
12
|
-
validateAndNotify(): Promise<boolean>
|
|
12
|
+
validateAndNotify(message?: Snackbar): Promise<boolean>
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export type ComputedData<T extends Record<string, () => any>> = {
|
|
@@ -69,11 +69,11 @@ export function useForm<
|
|
|
69
69
|
return validation.value.$validate()
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
async function validateAndNotify(): Promise<boolean> {
|
|
72
|
+
async function validateAndNotify(message?: Snackbar): Promise<boolean> {
|
|
73
73
|
const valid = await validate()
|
|
74
74
|
|
|
75
75
|
if (!valid) {
|
|
76
|
-
snackbars.push({
|
|
76
|
+
snackbars.push(message ?? {
|
|
77
77
|
mode: 'danger',
|
|
78
78
|
text: 'Form contains errors. Please correct them and try again.'
|
|
79
79
|
})
|
package/lib/composables/Table.ts
CHANGED
|
@@ -122,6 +122,7 @@ export interface TableCellAvatar extends TableCellBase {
|
|
|
122
122
|
name?: string | null | ((value: any, record: any) => string | null | undefined)
|
|
123
123
|
link?: string | null | ((value: any, record: any) => string | null | undefined)
|
|
124
124
|
color?: 'neutral' | 'soft' | 'mute'
|
|
125
|
+
onClick?(value: any, record: any): void
|
|
125
126
|
}
|
|
126
127
|
|
|
127
128
|
export interface TableCellAvatars extends TableCellBase {
|
|
@@ -8,8 +8,6 @@ export interface Tooltip {
|
|
|
8
8
|
|
|
9
9
|
export type Position = 'top' | 'right' | 'bottom' | 'left'
|
|
10
10
|
|
|
11
|
-
const SCREEN_PADDING = 16
|
|
12
|
-
|
|
13
11
|
const globalHide = ref<() => void>()
|
|
14
12
|
|
|
15
13
|
/**
|
|
@@ -61,31 +59,32 @@ export function useTooltip(
|
|
|
61
59
|
// Temporally show tip to get its size.
|
|
62
60
|
tip.value!.style.display = 'block'
|
|
63
61
|
|
|
62
|
+
const screenPadding = document.body.clientWidth >= 512 ? 24 : 8
|
|
64
63
|
const contentRect = content.value!.getBoundingClientRect()
|
|
65
64
|
const tipRect = tip.value!.getBoundingClientRect()
|
|
66
65
|
|
|
67
66
|
const contentRightX = contentRect.x + contentRect.width
|
|
68
67
|
const tipRightX = tipRect.x + tipRect.width
|
|
69
68
|
|
|
70
|
-
if (tipRect.x <
|
|
71
|
-
adjustLeftPosition(contentRect.x)
|
|
72
|
-
} else if (tipRightX >
|
|
73
|
-
adjustRightPosition(contentRightX)
|
|
69
|
+
if (tipRect.x < screenPadding) {
|
|
70
|
+
adjustLeftPosition(screenPadding, contentRect.x)
|
|
71
|
+
} else if (tipRightX > (document.body.clientWidth - screenPadding)) {
|
|
72
|
+
adjustRightPosition(screenPadding, contentRightX)
|
|
74
73
|
}
|
|
75
74
|
|
|
76
75
|
tip.value!.style.display = 'none'
|
|
77
76
|
}
|
|
78
77
|
|
|
79
|
-
function adjustLeftPosition(contentRectX: number): void {
|
|
78
|
+
function adjustLeftPosition(screenPadding: number, contentRectX: number): void {
|
|
80
79
|
tip.value!.style.left = '0'
|
|
81
80
|
tip.value!.style.right = 'auto'
|
|
82
|
-
setTransform(-contentRectX +
|
|
81
|
+
setTransform(-contentRectX + screenPadding)
|
|
83
82
|
}
|
|
84
83
|
|
|
85
|
-
function adjustRightPosition(contentRightX: number): void {
|
|
84
|
+
function adjustRightPosition(screenPadding: number, contentRightX: number): void {
|
|
86
85
|
tip.value!.style.left = 'auto'
|
|
87
86
|
tip.value!.style.right = '0'
|
|
88
|
-
setTransform((
|
|
87
|
+
setTransform((document.body.clientWidth - contentRightX) - screenPadding)
|
|
89
88
|
}
|
|
90
89
|
|
|
91
90
|
function resetPosition(): void {
|
package/lib/composables/Utils.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type MaybeRefOrGetter } from '@vueuse/core'
|
|
2
2
|
import { resolveUnref } from '@vueuse/core'
|
|
3
3
|
import { type ComputedRef } from 'vue'
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
|
-
export type WhenCondition<T> =
|
|
6
|
+
export type WhenCondition<T> = MaybeRefOrGetter<T>
|
|
7
7
|
|
|
8
8
|
export function computedWhen<T, C>(
|
|
9
9
|
condition: WhenCondition<C>,
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { type App } from 'vue'
|
|
2
|
+
import SCard from '../components/SCard.vue'
|
|
3
|
+
import SCardBlock from '../components/SCardBlock.vue'
|
|
4
|
+
import SCardFooter from '../components/SCardFooter.vue'
|
|
5
|
+
import SCardFooterAction from '../components/SCardFooterAction.vue'
|
|
6
|
+
import SCardFooterActions from '../components/SCardFooterActions.vue'
|
|
7
|
+
import SCardHeader from '../components/SCardHeader.vue'
|
|
8
|
+
import SCardHeaderAction from '../components/SCardHeaderAction.vue'
|
|
9
|
+
import SCardHeaderActionClose from '../components/SCardHeaderActionClose.vue'
|
|
10
|
+
import SCardHeaderActionCollapse from '../components/SCardHeaderActionCollapse.vue'
|
|
11
|
+
import SCardHeaderActions from '../components/SCardHeaderActions.vue'
|
|
12
|
+
import SCardHeaderTitle from '../components/SCardHeaderTitle.vue'
|
|
13
|
+
|
|
14
|
+
export function mixin(app: App): void {
|
|
15
|
+
app.mixin({
|
|
16
|
+
components: {
|
|
17
|
+
SCard,
|
|
18
|
+
SCardBlock,
|
|
19
|
+
SCardFooter,
|
|
20
|
+
SCardFooterAction,
|
|
21
|
+
SCardFooterActions,
|
|
22
|
+
SCardHeader,
|
|
23
|
+
SCardHeaderAction,
|
|
24
|
+
SCardHeaderActionClose,
|
|
25
|
+
SCardHeaderActionCollapse,
|
|
26
|
+
SCardHeaderActions,
|
|
27
|
+
SCardHeaderTitle
|
|
28
|
+
}
|
|
29
|
+
})
|
|
30
|
+
}
|
package/lib/styles/variables.css
CHANGED
|
@@ -67,90 +67,6 @@
|
|
|
67
67
|
--c-text-dark-1: rgba(235, 235, 245, 0.98);
|
|
68
68
|
--c-text-dark-2: rgba(235, 235, 245, 0.6);
|
|
69
69
|
--c-text-dark-3: rgba(235, 235, 245, 0.3);
|
|
70
|
-
|
|
71
|
-
--c-info: #1668b6;
|
|
72
|
-
--c-info-light: #2997ff;
|
|
73
|
-
--c-info-lighter: #5bafff;
|
|
74
|
-
--c-info-lghtest: #7dc0ff;
|
|
75
|
-
--c-info-dark: #104c85;
|
|
76
|
-
--c-info-darker: #0c3963;
|
|
77
|
-
--c-info-darkest: #092e51;
|
|
78
|
-
--c-info-dimm-1: rgba(22, 104, 182, 0.12);
|
|
79
|
-
--c-info-dimm-2: rgba(22, 104, 182, 0.2);
|
|
80
|
-
--c-info-dimm-3: rgba(22, 104, 182, 0.28);
|
|
81
|
-
--c-info-text: var(--c-info-light);
|
|
82
|
-
--c-info-text-light: var(--c-info-lighter);
|
|
83
|
-
--c-info-text-lighter: var(--c-info-lightest);
|
|
84
|
-
--c-info-text-dark: var(--c-info);
|
|
85
|
-
--c-info-text-darker: var(--c-info-dark);
|
|
86
|
-
--c-info-bg: var(--c-info);
|
|
87
|
-
--c-info-bg-light: var(--c-info-light);
|
|
88
|
-
--c-info-bg-lighter: var(--c-info-lighter);
|
|
89
|
-
--c-info-bg-dark: var(--c-info-dark);
|
|
90
|
-
--c-info-bg-darker: var(--c-info-darker);
|
|
91
|
-
|
|
92
|
-
--c-success: #059669;
|
|
93
|
-
--c-success-light: #10b981;
|
|
94
|
-
--c-success-lighter: #34d399;
|
|
95
|
-
--c-success-lghtest: #6ee7b7;
|
|
96
|
-
--c-success-dark: #047857;
|
|
97
|
-
--c-success-darker: #065f46;
|
|
98
|
-
--c-success-darkest: #064e3b;
|
|
99
|
-
--c-success-dimm-1: rgba(5, 150, 105, 0.12);
|
|
100
|
-
--c-success-dimm-2: rgba(5, 150, 105, 0.2);
|
|
101
|
-
--c-success-dimm-3: rgba(5, 150, 105, 0.28);
|
|
102
|
-
--c-success-text: var(--c-success-light);
|
|
103
|
-
--c-success-text-light: var(--c-success-lighter);
|
|
104
|
-
--c-success-text-lighter: var(--c-success-lightest);
|
|
105
|
-
--c-success-text-dark: var(--c-success);
|
|
106
|
-
--c-success-text-darker: var(--c-success-dark);
|
|
107
|
-
--c-success-bg: var(--c-success);
|
|
108
|
-
--c-success-bg-light: var(--c-success-light);
|
|
109
|
-
--c-success-bg-lighter: var(--c-success-lighter);
|
|
110
|
-
--c-success-bg-dark: var(--c-success-dark);
|
|
111
|
-
--c-success-bg-darker: var(--c-success-darker);
|
|
112
|
-
|
|
113
|
-
--c-warning: #ca8a04;
|
|
114
|
-
--c-warning-light: #eab308;
|
|
115
|
-
--c-warning-lighter: #facc15;
|
|
116
|
-
--c-warning-lghtest: #fde047;
|
|
117
|
-
--c-warning-dark: #a16207;
|
|
118
|
-
--c-warning-darker: #854d0e;
|
|
119
|
-
--c-warning-darkest: #713f12;
|
|
120
|
-
--c-warning-dimm-1: rgba(202, 138, 4, 0.12);
|
|
121
|
-
--c-warning-dimm-2: rgba(202, 138, 4, 0.2);
|
|
122
|
-
--c-warning-dimm-3: rgba(202, 138, 4, 0.28);
|
|
123
|
-
--c-warning-text: var(--c-warning-light);
|
|
124
|
-
--c-warning-text-light: var(--c-warning-lighter);
|
|
125
|
-
--c-warning-text-lighter: var(--c-warning-lightest);
|
|
126
|
-
--c-warning-text-dark: var(--c-warning);
|
|
127
|
-
--c-warning-text-darker: var(--c-warning-dark);
|
|
128
|
-
--c-warning-bg: var(--c-warning);
|
|
129
|
-
--c-warning-bg-light: var(--c-warning-light);
|
|
130
|
-
--c-warning-bg-lighter: var(--c-warning-lighter);
|
|
131
|
-
--c-warning-bg-dark: var(--c-warning-dark);
|
|
132
|
-
--c-warning-bg-darker: var(--c-warning-darker);
|
|
133
|
-
|
|
134
|
-
--c-danger: #e11d48;
|
|
135
|
-
--c-danger-light: #f43f5e;
|
|
136
|
-
--c-danger-lighter: #fb7185;
|
|
137
|
-
--c-danger-lghtest: #fda4af;
|
|
138
|
-
--c-danger-dark: #be123c;
|
|
139
|
-
--c-danger-darker: #9f1239;
|
|
140
|
-
--c-danger-darkest: #881337;
|
|
141
|
-
--c-danger-dimm-1: rgba(225, 29, 72, 0.12);
|
|
142
|
-
--c-danger-dimm-2: rgba(225, 29, 72, 0.2);
|
|
143
|
-
--c-danger-dimm-3: rgba(225, 29, 72, 0.28);
|
|
144
|
-
--c-danger-text: var(--c-danger-light);
|
|
145
|
-
--c-danger-text-light: var(--c-danger-lighter);
|
|
146
|
-
--c-danger-text-lighter: var(--c-danger-lightest);
|
|
147
|
-
--c-danger-text-dark: var(--c-danger);
|
|
148
|
-
--c-danger-text-darker: var(--c-danger-dark);
|
|
149
|
-
--c-danger-bg: var(--c-danger);
|
|
150
|
-
--c-danger-bg-light: var(--c-danger-light);
|
|
151
|
-
--c-danger-bg-lighter: var(--c-danger-lighter);
|
|
152
|
-
--c-danger-bg-dark: var(--c-danger-dark);
|
|
153
|
-
--c-danger-bg-darker: var(--c-danger-darker);
|
|
154
70
|
}
|
|
155
71
|
|
|
156
72
|
/**
|
|
@@ -183,6 +99,8 @@
|
|
|
183
99
|
--c-divider-1: var(--c-divider-light-1);
|
|
184
100
|
--c-divider-2: var(--c-divider-light-2);
|
|
185
101
|
|
|
102
|
+
--c-gutter: #e8e8e8;
|
|
103
|
+
|
|
186
104
|
--c-neutral-1: var(--c-neutral-light-1);
|
|
187
105
|
--c-neutral-2: var(--c-neutral-light-2);
|
|
188
106
|
--c-neutral-3: var(--c-neutral-light-3);
|
|
@@ -210,6 +128,110 @@
|
|
|
210
128
|
--c-mute-darker: #d1d1d1;
|
|
211
129
|
--c-mute-dimm-1: #f1f1f1;
|
|
212
130
|
--c-mute-dimm-2: #e3e3e3;
|
|
131
|
+
|
|
132
|
+
--c-info: #0969da;
|
|
133
|
+
--c-info-light: #218bff;
|
|
134
|
+
--c-info-lighter: #54aeff;
|
|
135
|
+
--c-info-lghtest: #80ccff;
|
|
136
|
+
--c-info-dark: #0550ae;
|
|
137
|
+
--c-info-darker: #033d8b;
|
|
138
|
+
--c-info-darkest: #0a3069;
|
|
139
|
+
--c-info-dimm-1: rgba(2, 132, 199, 0.12);
|
|
140
|
+
--c-info-dimm-2: rgba(2, 132, 199, 0.2);
|
|
141
|
+
--c-info-dimm-3: rgba(2, 132, 199, 0.28);
|
|
142
|
+
--c-info-text: var(--c-info-light);
|
|
143
|
+
--c-info-text-light: var(--c-info-lighter);
|
|
144
|
+
--c-info-text-lighter: var(--c-info-lightest);
|
|
145
|
+
--c-info-text-dark: var(--c-info);
|
|
146
|
+
--c-info-text-darker: var(--c-info-dark);
|
|
147
|
+
--c-info-border: var(--c-info-light);
|
|
148
|
+
--c-info-border-light: var(--c-info-lighter);
|
|
149
|
+
--c-info-border-lighter: var(--c-info-lightest);
|
|
150
|
+
--c-info-border-dark: var(--c-info);
|
|
151
|
+
--c-info-border-darker: var(--c-info-dark);
|
|
152
|
+
--c-info-bg: var(--c-info);
|
|
153
|
+
--c-info-bg-light: var(--c-info-light);
|
|
154
|
+
--c-info-bg-lighter: var(--c-info-lighter);
|
|
155
|
+
--c-info-bg-dark: var(--c-info-dark);
|
|
156
|
+
--c-info-bg-darker: var(--c-info-darker);
|
|
157
|
+
|
|
158
|
+
--c-success: #1a7f58;
|
|
159
|
+
--c-success-light: #2da476;
|
|
160
|
+
--c-success-lighter: #4ac294;
|
|
161
|
+
--c-success-lghtest: #6fddaf;
|
|
162
|
+
--c-success-dark: #116345;
|
|
163
|
+
--c-success-darker: #044f37;
|
|
164
|
+
--c-success-darkest: #003d2b;
|
|
165
|
+
--c-success-dimm-1: rgba(5, 150, 105, 0.12);
|
|
166
|
+
--c-success-dimm-2: rgba(5, 150, 105, 0.2);
|
|
167
|
+
--c-success-dimm-3: rgba(5, 150, 105, 0.28);
|
|
168
|
+
--c-success-text: var(--c-success-light);
|
|
169
|
+
--c-success-text-light: var(--c-success-lighter);
|
|
170
|
+
--c-success-text-lighter: var(--c-success-lightest);
|
|
171
|
+
--c-success-text-dark: var(--c-success);
|
|
172
|
+
--c-success-text-darker: var(--c-success-dark);
|
|
173
|
+
--c-success-border: var(--c-success-light);
|
|
174
|
+
--c-success-border-light: var(--c-success-lighter);
|
|
175
|
+
--c-success-border-lighter: var(--c-success-lightest);
|
|
176
|
+
--c-success-border-dark: var(--c-success);
|
|
177
|
+
--c-success-border-darker: var(--c-success-dark);
|
|
178
|
+
--c-success-bg: var(--c-success);
|
|
179
|
+
--c-success-bg-light: var(--c-success-light);
|
|
180
|
+
--c-success-bg-lighter: var(--c-success-lighter);
|
|
181
|
+
--c-success-bg-dark: var(--c-success-dark);
|
|
182
|
+
--c-success-bg-darker: var(--c-success-darker);
|
|
183
|
+
|
|
184
|
+
--c-warning: #bf8700;
|
|
185
|
+
--c-warning-light: #d4a72c;
|
|
186
|
+
--c-warning-lighter: #eac54f;
|
|
187
|
+
--c-warning-lghtest: #fae17d;
|
|
188
|
+
--c-warning-dark: #9a6700;
|
|
189
|
+
--c-warning-darker: #7d4e00;
|
|
190
|
+
--c-warning-darkest: #633c01;
|
|
191
|
+
--c-warning-dimm-1: rgba(202, 138, 4, 0.12);
|
|
192
|
+
--c-warning-dimm-2: rgba(202, 138, 4, 0.2);
|
|
193
|
+
--c-warning-dimm-3: rgba(202, 138, 4, 0.28);
|
|
194
|
+
--c-warning-text: var(--c-warning-light);
|
|
195
|
+
--c-warning-text-light: var(--c-warning-lighter);
|
|
196
|
+
--c-warning-text-lighter: var(--c-warning-lightest);
|
|
197
|
+
--c-warning-text-dark: var(--c-warning);
|
|
198
|
+
--c-warning-text-darker: var(--c-warning-dark);
|
|
199
|
+
--c-warning-border: var(--c-warning-light);
|
|
200
|
+
--c-warning-border-light: var(--c-warning-lighter);
|
|
201
|
+
--c-warning-border-lighter: var(--c-warning-lightest);
|
|
202
|
+
--c-warning-border-dark: var(--c-warning);
|
|
203
|
+
--c-warning-border-darker: var(--c-warning-dark);
|
|
204
|
+
--c-warning-bg: var(--c-warning);
|
|
205
|
+
--c-warning-bg-light: var(--c-warning-light);
|
|
206
|
+
--c-warning-bg-lighter: var(--c-warning-lighter);
|
|
207
|
+
--c-warning-bg-dark: var(--c-warning-dark);
|
|
208
|
+
--c-warning-bg-darker: var(--c-warning-darker);
|
|
209
|
+
|
|
210
|
+
--c-danger: #cf222e;
|
|
211
|
+
--c-danger-light: #fa4549;
|
|
212
|
+
--c-danger-lighter: #ff8182;
|
|
213
|
+
--c-danger-lghtest: #ffaba8;
|
|
214
|
+
--c-danger-dark: #a40e26;
|
|
215
|
+
--c-danger-darker: #82071e;
|
|
216
|
+
--c-danger-darkest: #660018;
|
|
217
|
+
--c-danger-dimm-1: rgba(225, 29, 72, 0.12);
|
|
218
|
+
--c-danger-dimm-2: rgba(225, 29, 72, 0.2);
|
|
219
|
+
--c-danger-dimm-3: rgba(225, 29, 72, 0.28);
|
|
220
|
+
--c-danger-text: var(--c-danger-light);
|
|
221
|
+
--c-danger-text-light: var(--c-danger-lighter);
|
|
222
|
+
--c-danger-text-lighter: var(--c-danger-lightest);
|
|
223
|
+
--c-danger-text-dark: var(--c-danger);
|
|
224
|
+
--c-danger-text-darker: var(--c-danger-dark);
|
|
225
|
+
--c-danger-border: var(--c-danger-light);
|
|
226
|
+
--c-danger-border-light: var(--c-danger-lighter);
|
|
227
|
+
--c-danger-border-lighter: var(--c-danger-lightest);
|
|
228
|
+
--c-danger-border-dark: var(--c-danger);
|
|
229
|
+
--c-danger-border-darker: var(--c-danger-dark);
|
|
230
|
+
--c-danger-bg: var(--c-danger);
|
|
231
|
+
--c-danger-bg-light: var(--c-danger-light);
|
|
232
|
+
--c-danger-bg-lighter: var(--c-danger-lighter);
|
|
233
|
+
--c-danger-bg-dark: var(--c-danger-dark);
|
|
234
|
+
--c-danger-bg-darker: var(--c-danger-darker);
|
|
213
235
|
}
|
|
214
236
|
|
|
215
237
|
.dark {
|
|
@@ -238,6 +260,8 @@
|
|
|
238
260
|
--c-divider-1: var(--c-divider-dark-1);
|
|
239
261
|
--c-divider-2: var(--c-divider-dark-2);
|
|
240
262
|
|
|
263
|
+
--c-gutter: #000000;
|
|
264
|
+
|
|
241
265
|
--c-neutral-1: var(--c-neutral-dark-1);
|
|
242
266
|
--c-neutral-2: var(--c-neutral-dark-2);
|
|
243
267
|
--c-neutral-3: var(--c-neutral-dark-3);
|
|
@@ -265,6 +289,110 @@
|
|
|
265
289
|
--c-mute-darker: #1c1c1e;
|
|
266
290
|
--c-mute-dimm-1: #222226;
|
|
267
291
|
--c-mute-dimm-2: #2c2c2e;
|
|
292
|
+
|
|
293
|
+
--c-info: #1f6feb;
|
|
294
|
+
--c-info-light: #388bfd;
|
|
295
|
+
--c-info-lighter: #58a6ff;
|
|
296
|
+
--c-info-lghtest: #79c0ff;
|
|
297
|
+
--c-info-dark: #1158c7;
|
|
298
|
+
--c-info-darker: #0d419d;
|
|
299
|
+
--c-info-darkest: #0c2d6b;
|
|
300
|
+
--c-info-dimm-1: rgba(2, 132, 199, 0.12);
|
|
301
|
+
--c-info-dimm-2: rgba(2, 132, 199, 0.2);
|
|
302
|
+
--c-info-dimm-3: rgba(2, 132, 199, 0.28);
|
|
303
|
+
--c-info-text: var(--c-info-light);
|
|
304
|
+
--c-info-text-light: var(--c-info-lighter);
|
|
305
|
+
--c-info-text-lighter: var(--c-info-lightest);
|
|
306
|
+
--c-info-text-dark: var(--c-info);
|
|
307
|
+
--c-info-text-darker: var(--c-info-dark);
|
|
308
|
+
--c-info-border: var(--c-info-light);
|
|
309
|
+
--c-info-border-light: var(--c-info-lighter);
|
|
310
|
+
--c-info-border-lighter: var(--c-info-lightest);
|
|
311
|
+
--c-info-border-dark: var(--c-info);
|
|
312
|
+
--c-info-border-darker: var(--c-info-dark);
|
|
313
|
+
--c-info-bg: var(--c-info);
|
|
314
|
+
--c-info-bg-light: var(--c-info-light);
|
|
315
|
+
--c-info-bg-lighter: var(--c-info-lighter);
|
|
316
|
+
--c-info-bg-dark: var(--c-info-dark);
|
|
317
|
+
--c-info-bg-darker: var(--c-info-darker);
|
|
318
|
+
|
|
319
|
+
--c-success: #238554;
|
|
320
|
+
--c-success-light: #2ea069;
|
|
321
|
+
--c-success-lighter: #3fb978;
|
|
322
|
+
--c-success-lghtest: #56d38e;
|
|
323
|
+
--c-success-dark: #196c49;
|
|
324
|
+
--c-success-darker: #0f533a;
|
|
325
|
+
--c-success-darkest: #033a29;
|
|
326
|
+
--c-success-dimm-1: rgba(5, 150, 105, 0.12);
|
|
327
|
+
--c-success-dimm-2: rgba(5, 150, 105, 0.2);
|
|
328
|
+
--c-success-dimm-3: rgba(5, 150, 105, 0.28);
|
|
329
|
+
--c-success-text: var(--c-success-light);
|
|
330
|
+
--c-success-text-light: var(--c-success-lighter);
|
|
331
|
+
--c-success-text-lighter: var(--c-success-lightest);
|
|
332
|
+
--c-success-text-dark: var(--c-success);
|
|
333
|
+
--c-success-text-darker: var(--c-success-dark);
|
|
334
|
+
--c-success-border: var(--c-success-light);
|
|
335
|
+
--c-success-border-light: var(--c-success-lighter);
|
|
336
|
+
--c-success-border-lighter: var(--c-success-lightest);
|
|
337
|
+
--c-success-border-dark: var(--c-success);
|
|
338
|
+
--c-success-border-darker: var(--c-success-dark);
|
|
339
|
+
--c-success-bg: var(--c-success);
|
|
340
|
+
--c-success-bg-light: var(--c-success-light);
|
|
341
|
+
--c-success-bg-lighter: var(--c-success-lighter);
|
|
342
|
+
--c-success-bg-dark: var(--c-success-dark);
|
|
343
|
+
--c-success-bg-darker: var(--c-success-darker);
|
|
344
|
+
|
|
345
|
+
--c-warning: #bb8009;
|
|
346
|
+
--c-warning-light: #d29922;
|
|
347
|
+
--c-warning-lighter: #e3b341;
|
|
348
|
+
--c-warning-lghtest: #f2cc60;
|
|
349
|
+
--c-warning-dark: #9e6a03;
|
|
350
|
+
--c-warning-darker: #845306;
|
|
351
|
+
--c-warning-darkest: #693e00;
|
|
352
|
+
--c-warning-dimm-1: rgba(202, 138, 4, 0.12);
|
|
353
|
+
--c-warning-dimm-2: rgba(202, 138, 4, 0.2);
|
|
354
|
+
--c-warning-dimm-3: rgba(202, 138, 4, 0.28);
|
|
355
|
+
--c-warning-text: var(--c-warning-light);
|
|
356
|
+
--c-warning-text-light: var(--c-warning-lighter);
|
|
357
|
+
--c-warning-text-lighter: var(--c-warning-lightest);
|
|
358
|
+
--c-warning-text-dark: var(--c-warning);
|
|
359
|
+
--c-warning-text-darker: var(--c-warning-dark);
|
|
360
|
+
--c-warning-border: var(--c-warning-light);
|
|
361
|
+
--c-warning-border-light: var(--c-warning-lighter);
|
|
362
|
+
--c-warning-border-lighter: var(--c-warning-lightest);
|
|
363
|
+
--c-warning-border-dark: var(--c-warning);
|
|
364
|
+
--c-warning-border-darker: var(--c-warning-dark);
|
|
365
|
+
--c-warning-bg: var(--c-warning);
|
|
366
|
+
--c-warning-bg-light: var(--c-warning-light);
|
|
367
|
+
--c-warning-bg-lighter: var(--c-warning-lighter);
|
|
368
|
+
--c-warning-bg-dark: var(--c-warning-dark);
|
|
369
|
+
--c-warning-bg-darker: var(--c-warning-darker);
|
|
370
|
+
|
|
371
|
+
--c-danger: #da3633;
|
|
372
|
+
--c-danger-light: #f85149;
|
|
373
|
+
--c-danger-lighter: #ff7b72;
|
|
374
|
+
--c-danger-lghtest: #ffaba8;
|
|
375
|
+
--c-danger-dark: #b62324;
|
|
376
|
+
--c-danger-darker: #8e1519;
|
|
377
|
+
--c-danger-darkest: #67060c;
|
|
378
|
+
--c-danger-dimm-1: rgba(225, 29, 72, 0.12);
|
|
379
|
+
--c-danger-dimm-2: rgba(225, 29, 72, 0.2);
|
|
380
|
+
--c-danger-dimm-3: rgba(225, 29, 72, 0.28);
|
|
381
|
+
--c-danger-text: var(--c-danger-light);
|
|
382
|
+
--c-danger-text-light: var(--c-danger-lighter);
|
|
383
|
+
--c-danger-text-lighter: var(--c-danger-lightest);
|
|
384
|
+
--c-danger-text-dark: var(--c-danger);
|
|
385
|
+
--c-danger-text-darker: var(--c-danger-dark);
|
|
386
|
+
--c-danger-border: var(--c-danger-light);
|
|
387
|
+
--c-danger-border-light: var(--c-danger-lighter);
|
|
388
|
+
--c-danger-border-lighter: var(--c-danger-lightest);
|
|
389
|
+
--c-danger-border-dark: var(--c-danger);
|
|
390
|
+
--c-danger-border-darker: var(--c-danger-dark);
|
|
391
|
+
--c-danger-bg: var(--c-danger);
|
|
392
|
+
--c-danger-bg-light: var(--c-danger-light);
|
|
393
|
+
--c-danger-bg-lighter: var(--c-danger-lighter);
|
|
394
|
+
--c-danger-bg-dark: var(--c-danger-dark);
|
|
395
|
+
--c-danger-bg-darker: var(--c-danger-darker);
|
|
268
396
|
}
|
|
269
397
|
|
|
270
398
|
/**
|
|
@@ -538,8 +666,8 @@
|
|
|
538
666
|
|
|
539
667
|
--button-text-mute-text-color: var(--c-text-2);
|
|
540
668
|
--button-text-mute-content-color: var(--c-text-2);
|
|
541
|
-
--button-text-mute-hover-bg-color: var(--c-mute
|
|
542
|
-
--button-text-mute-active-bg-color: var(--c-mute-
|
|
669
|
+
--button-text-mute-hover-bg-color: var(--c-mute);
|
|
670
|
+
--button-text-mute-active-bg-color: var(--c-mute-light);
|
|
543
671
|
--button-text-mute-disabled-text-color: var(--c-text-3);
|
|
544
672
|
--button-text-mute-disabled-content-color: var(--c-text-3);
|
|
545
673
|
|
package/lib/support/Num.ts
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
1
|
export function format(value: number): string {
|
|
2
2
|
return value.toLocaleString('en-US', { maximumFractionDigits: 20 })
|
|
3
3
|
}
|
|
4
|
+
|
|
5
|
+
export function abbreviate(value: number, precision = 0): string {
|
|
6
|
+
return value.toLocaleString('en-US', {
|
|
7
|
+
notation: 'compact',
|
|
8
|
+
maximumFractionDigits: precision
|
|
9
|
+
})
|
|
10
|
+
}
|