@globalbrain/sefirot 2.11.0 → 2.13.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 +4 -2
- package/lib/components/SInputNumber.vue +18 -7
- package/lib/components/SInputSelect.vue +5 -5
- package/lib/components/SInputText.vue +26 -1
- package/lib/styles/variables.css +94 -46
- package/lib/support/Day.ts +23 -0
- package/lib/support/Time.ts +2 -6
- package/package.json +1 -1
- package/lib/support/Day/Constant.ts +0 -32
- package/lib/support/Day/index.ts +0 -11
- package/lib/support/Day/plugins/RelativeTime.ts +0 -124
|
@@ -84,7 +84,9 @@ function handleClick(): void {
|
|
|
84
84
|
<style lang="postcss" scoped>
|
|
85
85
|
.SButton {
|
|
86
86
|
position: relative;
|
|
87
|
-
display: inline-
|
|
87
|
+
display: inline-flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
letter-spacing: 0;
|
|
88
90
|
text-align: center;
|
|
89
91
|
border: 1px solid transparent;
|
|
90
92
|
border-radius: 6px;
|
|
@@ -590,7 +592,7 @@ function handleClick(): void {
|
|
|
590
592
|
}
|
|
591
593
|
|
|
592
594
|
.SButton.block {
|
|
593
|
-
display:
|
|
595
|
+
display: flex;
|
|
594
596
|
width: 100%;
|
|
595
597
|
}
|
|
596
598
|
|
|
@@ -17,24 +17,32 @@ const props = defineProps<{
|
|
|
17
17
|
align?: Align
|
|
18
18
|
separator?: boolean
|
|
19
19
|
disabled?: boolean
|
|
20
|
-
|
|
20
|
+
value?: number | null
|
|
21
|
+
modelValue?: number | null
|
|
21
22
|
displayValue?: string | null
|
|
22
23
|
hideError?: boolean
|
|
23
24
|
validation?: Validatable
|
|
24
25
|
}>()
|
|
25
26
|
|
|
26
27
|
const emit = defineEmits<{
|
|
27
|
-
(e: 'update:
|
|
28
|
+
(e: 'update:model-value', value: number | null): void
|
|
29
|
+
(e: 'input', value: number | null): void
|
|
28
30
|
}>()
|
|
29
31
|
|
|
32
|
+
const _value = computed(() => {
|
|
33
|
+
return props.modelValue !== undefined
|
|
34
|
+
? props.modelValue
|
|
35
|
+
: props.value !== undefined ? props.value : null
|
|
36
|
+
})
|
|
37
|
+
|
|
30
38
|
const valueWithSeparator = computed(() => {
|
|
31
|
-
if (isNullish(
|
|
39
|
+
if (isNullish(_value.value)) {
|
|
32
40
|
return null
|
|
33
41
|
}
|
|
34
42
|
|
|
35
|
-
return
|
|
43
|
+
return _value.value >= 100000000000000000000
|
|
36
44
|
? 'The number is too big'
|
|
37
|
-
:
|
|
45
|
+
: _value.value.toLocaleString('en-US', { maximumSignificantDigits: 20 })
|
|
38
46
|
})
|
|
39
47
|
|
|
40
48
|
const displayValue = computed(() => {
|
|
@@ -48,7 +56,9 @@ const displayValue = computed(() => {
|
|
|
48
56
|
})
|
|
49
57
|
|
|
50
58
|
function emitUpdate(value: string | null) {
|
|
51
|
-
|
|
59
|
+
const v = isNullish(value) ? null : Number(value)
|
|
60
|
+
emit('update:model-value', v)
|
|
61
|
+
emit('input', v)
|
|
52
62
|
}
|
|
53
63
|
</script>
|
|
54
64
|
|
|
@@ -66,8 +76,9 @@ function emitUpdate(value: string | null) {
|
|
|
66
76
|
:disabled="disabled"
|
|
67
77
|
:hide-error="hideError"
|
|
68
78
|
:display-value="displayValue"
|
|
69
|
-
:model-value="String(
|
|
79
|
+
:model-value="_value === null ? null : String(_value)"
|
|
70
80
|
:validation="validation"
|
|
71
81
|
@update:model-value="emitUpdate"
|
|
82
|
+
@input="emitUpdate"
|
|
72
83
|
/>
|
|
73
84
|
</template>
|
|
@@ -49,7 +49,7 @@ const classes = computed(() => [
|
|
|
49
49
|
])
|
|
50
50
|
|
|
51
51
|
const isNotSelected = computed(() => {
|
|
52
|
-
return _value.value
|
|
52
|
+
return _value.value == null || _value.value === ''
|
|
53
53
|
})
|
|
54
54
|
|
|
55
55
|
function isSelectedOption(option: Option): boolean {
|
|
@@ -69,7 +69,7 @@ function emitChange(e: any): void {
|
|
|
69
69
|
props.validation?.$touch()
|
|
70
70
|
|
|
71
71
|
const input = e.target.value
|
|
72
|
-
const value = input
|
|
72
|
+
const value = props.options[input]?.value ?? null
|
|
73
73
|
|
|
74
74
|
emit('update:model-value', value)
|
|
75
75
|
emit('change', value)
|
|
@@ -99,7 +99,7 @@ function emitChange(e: any): void {
|
|
|
99
99
|
<option
|
|
100
100
|
v-if="placeholder || nullable"
|
|
101
101
|
class="option"
|
|
102
|
-
value="
|
|
102
|
+
value="-1"
|
|
103
103
|
:selected="isNotSelected"
|
|
104
104
|
:disabled="!nullable"
|
|
105
105
|
>
|
|
@@ -107,11 +107,11 @@ function emitChange(e: any): void {
|
|
|
107
107
|
</option>
|
|
108
108
|
|
|
109
109
|
<option
|
|
110
|
-
v-for="option in options"
|
|
110
|
+
v-for="option, index in options"
|
|
111
111
|
:key="JSON.stringify(option)"
|
|
112
112
|
:style="{ display: option.disabled ? 'none' : undefined }"
|
|
113
113
|
class="option"
|
|
114
|
-
:value="
|
|
114
|
+
:value="index"
|
|
115
115
|
:selected="isSelectedOption(option)"
|
|
116
116
|
>
|
|
117
117
|
{{ option.label }}
|
|
@@ -26,6 +26,7 @@ const props = defineProps<{
|
|
|
26
26
|
|
|
27
27
|
const emit = defineEmits<{
|
|
28
28
|
(e: 'update:modelValue', value: string | null): void
|
|
29
|
+
(e: 'input', value: string | null): void
|
|
29
30
|
(e: 'blur', value: string | null): void
|
|
30
31
|
(e: 'enter', value: string | null): void
|
|
31
32
|
}>()
|
|
@@ -35,6 +36,7 @@ const isFocused = ref(false)
|
|
|
35
36
|
|
|
36
37
|
const classes = computed(() => [
|
|
37
38
|
props.size ?? 'small',
|
|
39
|
+
props.align ?? 'left',
|
|
38
40
|
{ disabled: props.disabled }
|
|
39
41
|
])
|
|
40
42
|
|
|
@@ -62,7 +64,9 @@ function emitBlur(e: FocusEvent): void {
|
|
|
62
64
|
}
|
|
63
65
|
|
|
64
66
|
function emitInput(e: Event): void {
|
|
65
|
-
|
|
67
|
+
const v = getValue(e)
|
|
68
|
+
emit('update:modelValue', v)
|
|
69
|
+
emit('input', v)
|
|
66
70
|
}
|
|
67
71
|
|
|
68
72
|
function emitEnter(e: KeyboardEvent): void {
|
|
@@ -237,6 +241,27 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
|
|
|
237
241
|
}
|
|
238
242
|
}
|
|
239
243
|
|
|
244
|
+
.SInputText.left {
|
|
245
|
+
.input,
|
|
246
|
+
.display {
|
|
247
|
+
text-align: left;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.SInputText.center {
|
|
252
|
+
.input,
|
|
253
|
+
.display {
|
|
254
|
+
text-align: center;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.SInputText.right {
|
|
259
|
+
.input,
|
|
260
|
+
.display {
|
|
261
|
+
text-align: right;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
|
|
240
265
|
.SInputText.has-error {
|
|
241
266
|
.box {
|
|
242
267
|
border-color: var(--c-danger);
|
package/lib/styles/variables.css
CHANGED
|
@@ -68,38 +68,86 @@
|
|
|
68
68
|
--c-info: #0284c7;
|
|
69
69
|
--c-info-light: #0ea5e9;
|
|
70
70
|
--c-info-lighter: #38bdf8;
|
|
71
|
+
--c-info-lghtest: #7dd3fc;
|
|
71
72
|
--c-info-dark: #0369a1;
|
|
72
73
|
--c-info-darker: #075985;
|
|
74
|
+
--c-info-darkest: #0c4a6e;
|
|
73
75
|
--c-info-dimm-1: rgba(2, 132, 199, 0.12);
|
|
74
76
|
--c-info-dimm-2: rgba(2, 132, 199, 0.2);
|
|
75
77
|
--c-info-dimm-3: rgba(2, 132, 199, 0.28);
|
|
78
|
+
--c-info-text: var(--c-info-light);
|
|
79
|
+
--c-info-text-light: var(--c-info-lighter);
|
|
80
|
+
--c-info-text-lighter: var(--c-info-lightest);
|
|
81
|
+
--c-info-text-dark: var(--c-info);
|
|
82
|
+
--c-info-text-darker: var(--c-info-dark);
|
|
83
|
+
--c-info-bg: var(--c-info);
|
|
84
|
+
--c-info-bg-light: var(--c-info-light);
|
|
85
|
+
--c-info-bg-lighter: var(--c-info-lighter);
|
|
86
|
+
--c-info-bg-dark: var(--c-info-dark);
|
|
87
|
+
--c-info-bg-darker: var(--c-info-darker);
|
|
76
88
|
|
|
77
89
|
--c-success: #059669;
|
|
78
90
|
--c-success-light: #10b981;
|
|
79
91
|
--c-success-lighter: #34d399;
|
|
92
|
+
--c-success-lghtest: #6ee7b7;
|
|
80
93
|
--c-success-dark: #047857;
|
|
81
94
|
--c-success-darker: #065f46;
|
|
95
|
+
--c-success-darkest: #064e3b;
|
|
82
96
|
--c-success-dimm-1: rgba(5, 150, 105, 0.12);
|
|
83
97
|
--c-success-dimm-2: rgba(5, 150, 105, 0.2);
|
|
84
98
|
--c-success-dimm-3: rgba(5, 150, 105, 0.28);
|
|
99
|
+
--c-success-text: var(--c-success-light);
|
|
100
|
+
--c-success-text-light: var(--c-success-lighter);
|
|
101
|
+
--c-success-text-lighter: var(--c-success-lightest);
|
|
102
|
+
--c-success-text-dark: var(--c-success);
|
|
103
|
+
--c-success-text-darker: var(--c-success-dark);
|
|
104
|
+
--c-success-bg: var(--c-success);
|
|
105
|
+
--c-success-bg-light: var(--c-success-light);
|
|
106
|
+
--c-success-bg-lighter: var(--c-success-lighter);
|
|
107
|
+
--c-success-bg-dark: var(--c-success-dark);
|
|
108
|
+
--c-success-bg-darker: var(--c-success-darker);
|
|
85
109
|
|
|
86
110
|
--c-warning: #ca8a04;
|
|
87
111
|
--c-warning-light: #eab308;
|
|
88
112
|
--c-warning-lighter: #facc15;
|
|
113
|
+
--c-warning-lghtest: #fde047;
|
|
89
114
|
--c-warning-dark: #a16207;
|
|
90
115
|
--c-warning-darker: #854d0e;
|
|
116
|
+
--c-warning-darkest: #713f12;
|
|
91
117
|
--c-warning-dimm-1: rgba(202, 138, 4, 0.12);
|
|
92
118
|
--c-warning-dimm-2: rgba(202, 138, 4, 0.2);
|
|
93
119
|
--c-warning-dimm-3: rgba(202, 138, 4, 0.28);
|
|
120
|
+
--c-warning-text: var(--c-warning-light);
|
|
121
|
+
--c-warning-text-light: var(--c-warning-lighter);
|
|
122
|
+
--c-warning-text-lighter: var(--c-warning-lightest);
|
|
123
|
+
--c-warning-text-dark: var(--c-warning);
|
|
124
|
+
--c-warning-text-darker: var(--c-warning-dark);
|
|
125
|
+
--c-warning-bg: var(--c-warning);
|
|
126
|
+
--c-warning-bg-light: var(--c-warning-light);
|
|
127
|
+
--c-warning-bg-lighter: var(--c-warning-lighter);
|
|
128
|
+
--c-warning-bg-dark: var(--c-warning-dark);
|
|
129
|
+
--c-warning-bg-darker: var(--c-warning-darker);
|
|
94
130
|
|
|
95
131
|
--c-danger: #e11d48;
|
|
96
132
|
--c-danger-light: #f43f5e;
|
|
97
133
|
--c-danger-lighter: #fb7185;
|
|
134
|
+
--c-danger-lghtest: #fda4af;
|
|
98
135
|
--c-danger-dark: #be123c;
|
|
99
136
|
--c-danger-darker: #9f1239;
|
|
137
|
+
--c-danger-darkest: #881337;
|
|
100
138
|
--c-danger-dimm-1: rgba(225, 29, 72, 0.12);
|
|
101
139
|
--c-danger-dimm-2: rgba(225, 29, 72, 0.2);
|
|
102
140
|
--c-danger-dimm-3: rgba(225, 29, 72, 0.28);
|
|
141
|
+
--c-danger-text: var(--c-danger-light);
|
|
142
|
+
--c-danger-text-light: var(--c-danger-lighter);
|
|
143
|
+
--c-danger-text-lighter: var(--c-danger-lightest);
|
|
144
|
+
--c-danger-text-dark: var(--c-danger);
|
|
145
|
+
--c-danger-text-darker: var(--c-danger-dark);
|
|
146
|
+
--c-danger-bg: var(--c-danger);
|
|
147
|
+
--c-danger-bg-light: var(--c-danger-light);
|
|
148
|
+
--c-danger-bg-lighter: var(--c-danger-lighter);
|
|
149
|
+
--c-danger-bg-dark: var(--c-danger-dark);
|
|
150
|
+
--c-danger-bg-darker: var(--c-danger-darker);
|
|
103
151
|
}
|
|
104
152
|
|
|
105
153
|
/**
|
|
@@ -325,43 +373,43 @@
|
|
|
325
373
|
|
|
326
374
|
--button-fill-info-border-color: var(--c-info-light);
|
|
327
375
|
--button-fill-info-text-color: var(--c-text-dark-1);
|
|
328
|
-
--button-fill-info-bg-color: var(--c-info);
|
|
376
|
+
--button-fill-info-bg-color: var(--c-info-bg);
|
|
329
377
|
--button-fill-info-loader-color: var(--c-white);
|
|
330
|
-
--button-fill-info-hover-bg-color: var(--c-info-dark);
|
|
331
|
-
--button-fill-info-active-bg-color: var(--c-info-darker);
|
|
378
|
+
--button-fill-info-hover-bg-color: var(--c-info-bg-dark);
|
|
379
|
+
--button-fill-info-active-bg-color: var(--c-info-bg-darker);
|
|
332
380
|
--button-fill-info-disabled-border-color: var(--c-info);
|
|
333
381
|
--button-fill-info-disabled-text-color: var(--c-text-dark-2);
|
|
334
|
-
--button-fill-info-disabled-bg-color: var(--c-info-dark);
|
|
382
|
+
--button-fill-info-disabled-bg-color: var(--c-info-bg-dark);
|
|
335
383
|
|
|
336
384
|
--button-fill-success-border-color: var(--c-success-light);
|
|
337
385
|
--button-fill-success-text-color: var(--c-text-dark-1);
|
|
338
|
-
--button-fill-success-bg-color: var(--c-success);
|
|
386
|
+
--button-fill-success-bg-color: var(--c-success-bg);
|
|
339
387
|
--button-fill-success-loader-color: var(--c-white);
|
|
340
|
-
--button-fill-success-hover-bg-color: var(--c-success-dark);
|
|
341
|
-
--button-fill-success-active-bg-color: var(--c-success-darker);
|
|
388
|
+
--button-fill-success-hover-bg-color: var(--c-success-bg-dark);
|
|
389
|
+
--button-fill-success-active-bg-color: var(--c-success-bg-darker);
|
|
342
390
|
--button-fill-success-disabled-border-color: var(--c-success);
|
|
343
391
|
--button-fill-success-disabled-text-color: var(--c-text-dark-2);
|
|
344
|
-
--button-fill-success-disabled-bg-color: var(--c-success-dark);
|
|
392
|
+
--button-fill-success-disabled-bg-color: var(--c-success-bg-dark);
|
|
345
393
|
|
|
346
394
|
--button-fill-warning-border-color: var(--c-warning-light);
|
|
347
395
|
--button-fill-warning-text-color: var(--c-text-dark-1);
|
|
348
|
-
--button-fill-warning-bg-color: var(--c-warning);
|
|
396
|
+
--button-fill-warning-bg-color: var(--c-warning-bg);
|
|
349
397
|
--button-fill-warning-loader-color: var(--c-white);
|
|
350
|
-
--button-fill-warning-hover-bg-color: var(--c-warning-dark);
|
|
351
|
-
--button-fill-warning-active-bg-color: var(--c-warning-darker);
|
|
398
|
+
--button-fill-warning-hover-bg-color: var(--c-warning-bg-dark);
|
|
399
|
+
--button-fill-warning-active-bg-color: var(--c-warning-bg-darker);
|
|
352
400
|
--button-fill-warning-disabled-border-color: var(--c-warning);
|
|
353
401
|
--button-fill-warning-disabled-text-color: var(--c-text-dark-2);
|
|
354
|
-
--button-fill-warning-disabled-bg-color: var(--c-warning-dark);
|
|
402
|
+
--button-fill-warning-disabled-bg-color: var(--c-warning-bg-dark);
|
|
355
403
|
|
|
356
404
|
--button-fill-danger-border-color: var(--c-danger-light);
|
|
357
405
|
--button-fill-danger-text-color: var(--c-text-dark-1);
|
|
358
|
-
--button-fill-danger-bg-color: var(--c-danger);
|
|
406
|
+
--button-fill-danger-bg-color: var(--c-danger-bg);
|
|
359
407
|
--button-fill-danger-loader-color: var(--c-white);
|
|
360
|
-
--button-fill-danger-hover-bg-color: var(--c-danger-dark);
|
|
361
|
-
--button-fill-danger-active-bg-color: var(--c-danger-darker);
|
|
408
|
+
--button-fill-danger-hover-bg-color: var(--c-danger-bg-dark);
|
|
409
|
+
--button-fill-danger-active-bg-color: var(--c-danger-bg-darker);
|
|
362
410
|
--button-fill-danger-disabled-border-color: var(--c-danger);
|
|
363
411
|
--button-fill-danger-disabled-text-color: var(--c-text-dark-2);
|
|
364
|
-
--button-fill-danger-disabled-bg-color: var(--c-danger-dark);
|
|
412
|
+
--button-fill-danger-disabled-bg-color: var(--c-danger-bg-dark);
|
|
365
413
|
|
|
366
414
|
--button-outline-neutral-border-color: var(--c-neutral-1);
|
|
367
415
|
--button-outline-neutral-text-color: var(--c-text-1);
|
|
@@ -396,36 +444,36 @@
|
|
|
396
444
|
--button-outline-mute-disabled-text-color: var(--c-text-3);
|
|
397
445
|
|
|
398
446
|
--button-outline-info-border-color: var(--c-info-light);
|
|
399
|
-
--button-outline-info-text-color: var(--c-info-
|
|
447
|
+
--button-outline-info-text-color: var(--c-info-text);
|
|
400
448
|
--button-outline-info-loader-color: var(--c-neutral-1);
|
|
401
449
|
--button-outline-info-hover-bg-color: var(--c-info-dimm-1);
|
|
402
450
|
--button-outline-info-active-bg-color: var(--c-info-dimm-2);
|
|
403
451
|
--button-outline-info-disabled-border-color: var(--c-info-dark);
|
|
404
|
-
--button-outline-info-disabled-text-color: var(--c-info-dark);
|
|
452
|
+
--button-outline-info-disabled-text-color: var(--c-info-text-dark);
|
|
405
453
|
|
|
406
454
|
--button-outline-success-border-color: var(--c-success-light);
|
|
407
|
-
--button-outline-success-text-color: var(--c-success-
|
|
455
|
+
--button-outline-success-text-color: var(--c-success-text);
|
|
408
456
|
--button-outline-success-loader-color: var(--c-neutral-1);
|
|
409
457
|
--button-outline-success-hover-bg-color: var(--c-success-dimm-1);
|
|
410
458
|
--button-outline-success-active-bg-color: var(--c-success-dimm-2);
|
|
411
459
|
--button-outline-success-disabled-border-color: var(--c-success-dark);
|
|
412
|
-
--button-outline-success-disabled-text-color: var(--c-success-dark);
|
|
460
|
+
--button-outline-success-disabled-text-color: var(--c-success-text-dark);
|
|
413
461
|
|
|
414
462
|
--button-outline-warning-border-color: var(--c-warning-light);
|
|
415
|
-
--button-outline-warning-text-color: var(--c-warning-
|
|
463
|
+
--button-outline-warning-text-color: var(--c-warning-text);
|
|
416
464
|
--button-outline-warning-loader-color: var(--c-neutral-1);
|
|
417
465
|
--button-outline-warning-hover-bg-color: var(--c-warning-dimm-1);
|
|
418
466
|
--button-outline-warning-active-bg-color: var(--c-warning-dimm-2);
|
|
419
467
|
--button-outline-warning-disabled-border-color: var(--c-warning-dark);
|
|
420
|
-
--button-outline-warning-disabled-text-color: var(--c-warning-dark);
|
|
468
|
+
--button-outline-warning-disabled-text-color: var(--c-warning-text-dark);
|
|
421
469
|
|
|
422
470
|
--button-outline-danger-border-color: var(--c-danger-light);
|
|
423
|
-
--button-outline-danger-text-color: var(--c-danger-
|
|
471
|
+
--button-outline-danger-text-color: var(--c-danger-text);
|
|
424
472
|
--button-outline-danger-loader-color: var(--c-neutral-1);
|
|
425
473
|
--button-outline-danger-hover-bg-color: var(--c-danger-dimm-1);
|
|
426
474
|
--button-outline-danger-active-bg-color: var(--c-danger-dimm-2);
|
|
427
475
|
--button-outline-danger-disabled-border-color: var(--c-danger-dark);
|
|
428
|
-
--button-outline-danger-disabled-text-color: var(--c-danger-dark);
|
|
476
|
+
--button-outline-danger-disabled-text-color: var(--c-danger-text-dark);
|
|
429
477
|
|
|
430
478
|
--button-text-neutral-text-color: var(--c-text-1);
|
|
431
479
|
--button-text-neutral-hover-bg-color: var(--c-neutral-dimm-1);
|
|
@@ -447,25 +495,25 @@
|
|
|
447
495
|
--button-text-mute-active-bg-color: var(--c-mute-dimm-2);
|
|
448
496
|
--button-text-mute-disabled-text-color: var(--c-text-3);
|
|
449
497
|
|
|
450
|
-
--button-text-info-text-color: var(--c-info-
|
|
498
|
+
--button-text-info-text-color: var(--c-info-text);
|
|
451
499
|
--button-text-info-hover-bg-color: var(--c-info-dimm-1);
|
|
452
500
|
--button-text-info-active-bg-color: var(--c-info-dimm-2);
|
|
453
|
-
--button-text-info-disabled-text-color: var(--c-info-dark);
|
|
501
|
+
--button-text-info-disabled-text-color: var(--c-info-text-dark);
|
|
454
502
|
|
|
455
|
-
--button-text-success-text-color: var(--c-success-
|
|
503
|
+
--button-text-success-text-color: var(--c-success-text);
|
|
456
504
|
--button-text-success-hover-bg-color: var(--c-success-dimm-1);
|
|
457
505
|
--button-text-success-active-bg-color: var(--c-success-dimm-2);
|
|
458
|
-
--button-text-success-disabled-text-color: var(--c-success-dark);
|
|
506
|
+
--button-text-success-disabled-text-color: var(--c-success-text-dark);
|
|
459
507
|
|
|
460
|
-
--button-text-warning-text-color: var(--c-warning-
|
|
508
|
+
--button-text-warning-text-color: var(--c-warning-text);
|
|
461
509
|
--button-text-warning-hover-bg-color: var(--c-warning-dimm-1);
|
|
462
510
|
--button-text-warning-active-bg-color: var(--c-warning-dimm-2);
|
|
463
|
-
--button-text-warning-disabled-text-color: var(--c-warning-dark);
|
|
511
|
+
--button-text-warning-disabled-text-color: var(--c-warning-text-dark);
|
|
464
512
|
|
|
465
|
-
--button-text-danger-text-color: var(--c-danger-
|
|
513
|
+
--button-text-danger-text-color: var(--c-danger-text);
|
|
466
514
|
--button-text-danger-hover-bg-color: var(--c-danger-dimm-1);
|
|
467
515
|
--button-text-danger-active-bg-color: var(--c-danger-dimm-2);
|
|
468
|
-
--button-text-danger-disabled-text-color: var(--c-danger-dark);
|
|
516
|
+
--button-text-danger-disabled-text-color: var(--c-danger-text-dark);
|
|
469
517
|
}
|
|
470
518
|
|
|
471
519
|
/**
|
|
@@ -486,25 +534,25 @@
|
|
|
486
534
|
--pill-dimm-mute-active-bg-color: var(--c-mute-dimm-2);
|
|
487
535
|
|
|
488
536
|
--pill-dimm-info-border-color: var(--c-info-light);
|
|
489
|
-
--pill-dimm-info-text-color: var(--c-info-
|
|
537
|
+
--pill-dimm-info-text-color: var(--c-info-text);
|
|
490
538
|
--pill-dimm-info-bg-color: var(--c-info-dimm-1);
|
|
491
539
|
--pill-dimm-info-hover-bg-color: var(--c-info-dimm-2);
|
|
492
540
|
--pill-dimm-info-active-bg-color: var(--c-info-dimm-3);
|
|
493
541
|
|
|
494
542
|
--pill-dimm-success-border-color: var(--c-success-light);
|
|
495
|
-
--pill-dimm-success-text-color: var(--c-success-
|
|
543
|
+
--pill-dimm-success-text-color: var(--c-success-text);
|
|
496
544
|
--pill-dimm-success-bg-color: var(--c-success-dimm-1);
|
|
497
545
|
--pill-dimm-success-hover-bg-color: var(--c-success-dimm-2);
|
|
498
546
|
--pill-dimm-success-active-bg-color: var(--c-success-dimm-3);
|
|
499
547
|
|
|
500
548
|
--pill-dimm-warning-border-color: var(--c-warning-light);
|
|
501
|
-
--pill-dimm-warning-text-color: var(--c-warning-
|
|
549
|
+
--pill-dimm-warning-text-color: var(--c-warning-text);
|
|
502
550
|
--pill-dimm-warning-bg-color: var(--c-warning-dimm-1);
|
|
503
551
|
--pill-dimm-warning-hover-bg-color: var(--c-warning-dimm-2);
|
|
504
552
|
--pill-dimm-warning-active-bg-color: var(--c-warning-dimm-3);
|
|
505
553
|
|
|
506
554
|
--pill-dimm-danger-border-color: var(--c-danger-light);
|
|
507
|
-
--pill-dimm-danger-text-color: var(--c-danger-
|
|
555
|
+
--pill-dimm-danger-text-color: var(--c-danger-text);
|
|
508
556
|
--pill-dimm-danger-bg-color: var(--c-danger-dimm-1);
|
|
509
557
|
--pill-dimm-danger-hover-bg-color: var(--c-danger-dimm-2);
|
|
510
558
|
--pill-dimm-danger-active-bg-color: var(--c-danger-dimm-3);
|
|
@@ -529,21 +577,21 @@
|
|
|
529
577
|
|
|
530
578
|
--pill-fill-success-border-color: transparent;
|
|
531
579
|
--pill-fill-success-text-color: var(--c-text-dark-1);
|
|
532
|
-
--pill-fill-success-bg-color: var(--c-success);
|
|
533
|
-
--pill-fill-success-hover-bg-color: var(--c-success-dark);
|
|
534
|
-
--pill-fill-success-active-bg-color: var(--c-success-darker);
|
|
580
|
+
--pill-fill-success-bg-color: var(--c-success-bg);
|
|
581
|
+
--pill-fill-success-hover-bg-color: var(--c-success-bg-dark);
|
|
582
|
+
--pill-fill-success-active-bg-color: var(--c-success-bg-darker);
|
|
535
583
|
|
|
536
584
|
--pill-fill-warning-border-color: transparent;
|
|
537
585
|
--pill-fill-warning-text-color: var(--c-text-dark-1);
|
|
538
|
-
--pill-fill-warning-bg-color: var(--c-warning);
|
|
539
|
-
--pill-fill-warning-hover-bg-color: var(--c-warning-dark);
|
|
540
|
-
--pill-fill-warning-active-bg-color: var(--c-warning-darker);
|
|
586
|
+
--pill-fill-warning-bg-color: var(--c-warning-bg);
|
|
587
|
+
--pill-fill-warning-hover-bg-color: var(--c-warning-bg-dark);
|
|
588
|
+
--pill-fill-warning-active-bg-color: var(--c-warning-bg-darker);
|
|
541
589
|
|
|
542
590
|
--pill-fill-danger-border-color: transparent;
|
|
543
591
|
--pill-fill-danger-text-color: var(--c-text-dark-1);
|
|
544
|
-
--pill-fill-danger-bg-color: var(--c-danger);
|
|
545
|
-
--pill-fill-danger-hover-bg-color: var(--c-danger-dark);
|
|
546
|
-
--pill-fill-danger-active-bg-color: var(--c-danger-darker);
|
|
592
|
+
--pill-fill-danger-bg-color: var(--c-danger-bg);
|
|
593
|
+
--pill-fill-danger-hover-bg-color: var(--c-danger-bg-dark);
|
|
594
|
+
--pill-fill-danger-active-bg-color: var(--c-danger-bg-darker);
|
|
547
595
|
}
|
|
548
596
|
|
|
549
597
|
/**
|
|
@@ -589,7 +637,7 @@
|
|
|
589
637
|
--input-bg-color: var(--c-bg-elv-1);
|
|
590
638
|
--input-hover-border-color: var(--c-gray);
|
|
591
639
|
--input-focus-border-color: var(--c-info-light);
|
|
592
|
-
--input-error-text-color: var(--c-danger-
|
|
640
|
+
--input-error-text-color: var(--c-danger-text);
|
|
593
641
|
--input-error-border-color: var(--c-danger-light);
|
|
594
642
|
--input-disabled-value-color: var(--c-text-1);
|
|
595
643
|
--input-disabled-bg-color: var(--c-mute);
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import dayjs, { ConfigType, Dayjs } from 'dayjs'
|
|
2
|
+
import PluginRelativeTime from 'dayjs/plugin/relativeTime'
|
|
3
|
+
import PluginTimezone from 'dayjs/plugin/timezone'
|
|
4
|
+
import PluginUtc from 'dayjs/plugin/utc'
|
|
5
|
+
|
|
6
|
+
export type Day = Dayjs
|
|
7
|
+
export type Input = ConfigType
|
|
8
|
+
|
|
9
|
+
dayjs.extend(PluginUtc)
|
|
10
|
+
dayjs.extend(PluginTimezone)
|
|
11
|
+
dayjs.extend(PluginRelativeTime)
|
|
12
|
+
|
|
13
|
+
export function day(input?: Input): Day {
|
|
14
|
+
return dayjs(input)
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function utc(input?: Input): Day {
|
|
18
|
+
return dayjs.utc(input)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export function tz(input?: Input, timezone?: string): Day {
|
|
22
|
+
return dayjs.tz(input, timezone)
|
|
23
|
+
}
|
package/lib/support/Time.ts
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
type Awaited<T> = T extends undefined
|
|
2
|
-
? T
|
|
3
|
-
: T extends PromiseLike<infer U> ? U : T
|
|
4
|
-
|
|
5
1
|
export function sleep(ms = 500): Promise<undefined> {
|
|
6
2
|
return new Promise<undefined>((resolve) => setTimeout(resolve, ms))
|
|
7
3
|
}
|
|
8
4
|
|
|
9
|
-
export function delay<T extends
|
|
10
|
-
iterable: T,
|
|
5
|
+
export function delay<T extends unknown[]>(
|
|
6
|
+
iterable: [...T],
|
|
11
7
|
ms?: number
|
|
12
8
|
): Promise<{ [P in keyof T]: Awaited<T[P]> }> {
|
|
13
9
|
return Promise.all([...iterable, sleep(ms)]) as any
|
package/package.json
CHANGED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
// This file is copied from the source to avoid plugin resolution problem.
|
|
2
|
-
|
|
3
|
-
export const SECONDS_A_MINUTE = 60
|
|
4
|
-
export const SECONDS_A_HOUR = SECONDS_A_MINUTE * 60
|
|
5
|
-
export const SECONDS_A_DAY = SECONDS_A_HOUR * 24
|
|
6
|
-
export const SECONDS_A_WEEK = SECONDS_A_DAY * 7
|
|
7
|
-
|
|
8
|
-
export const MILLISECONDS_A_SECOND = 1e3
|
|
9
|
-
export const MILLISECONDS_A_MINUTE = SECONDS_A_MINUTE * MILLISECONDS_A_SECOND
|
|
10
|
-
export const MILLISECONDS_A_HOUR = SECONDS_A_HOUR * MILLISECONDS_A_SECOND
|
|
11
|
-
export const MILLISECONDS_A_DAY = SECONDS_A_DAY * MILLISECONDS_A_SECOND
|
|
12
|
-
export const MILLISECONDS_A_WEEK = SECONDS_A_WEEK * MILLISECONDS_A_SECOND
|
|
13
|
-
|
|
14
|
-
// English locales
|
|
15
|
-
export const MS = 'millisecond'
|
|
16
|
-
export const S = 'second'
|
|
17
|
-
export const MIN = 'minute'
|
|
18
|
-
export const H = 'hour'
|
|
19
|
-
export const D = 'day'
|
|
20
|
-
export const W = 'week'
|
|
21
|
-
export const M = 'month'
|
|
22
|
-
export const Q = 'quarter'
|
|
23
|
-
export const Y = 'year'
|
|
24
|
-
export const DATE = 'date'
|
|
25
|
-
|
|
26
|
-
export const FORMAT_DEFAULT = 'YYYY-MM-DDTHH:mm:ssZ'
|
|
27
|
-
|
|
28
|
-
export const INVALID_DATE_STRING = 'Invalid Date'
|
|
29
|
-
|
|
30
|
-
// Regex
|
|
31
|
-
export const REGEX_PARSE = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/
|
|
32
|
-
export const REGEX_FORMAT = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g
|
package/lib/support/Day/index.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import dayjs, { ConfigType, Dayjs } from 'dayjs'
|
|
2
|
-
import { relativeTime } from './plugins/RelativeTime'
|
|
3
|
-
|
|
4
|
-
export type Day = Dayjs
|
|
5
|
-
export type Input = ConfigType
|
|
6
|
-
|
|
7
|
-
dayjs.extend(relativeTime)
|
|
8
|
-
|
|
9
|
-
export function day(input?: Input): Dayjs {
|
|
10
|
-
return dayjs(input)
|
|
11
|
-
}
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
// This file is copied from the source to avoid plugin resolution problem.
|
|
2
|
-
|
|
3
|
-
import { PluginFunc } from 'dayjs'
|
|
4
|
-
import * as C from '../Constant'
|
|
5
|
-
|
|
6
|
-
declare module 'dayjs' {
|
|
7
|
-
interface Dayjs {
|
|
8
|
-
fromNow(withoutSuffix?: boolean): string
|
|
9
|
-
from(compared: ConfigType, withoutSuffix?: boolean): string
|
|
10
|
-
toNow(withoutSuffix?: boolean): string
|
|
11
|
-
to(compared: ConfigType, withoutSuffix?: boolean): string
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export interface RelativeTimeOptions {
|
|
16
|
-
rounding?: (num: number) => number
|
|
17
|
-
thresholds?: RelativeTimeThreshold[]
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export interface RelativeTimeThreshold {
|
|
21
|
-
l: string
|
|
22
|
-
r?: number
|
|
23
|
-
d?: string
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export const relativeTime: PluginFunc<RelativeTimeOptions> = (o, c, d) => {
|
|
27
|
-
o = o || {}
|
|
28
|
-
|
|
29
|
-
const proto = c.prototype
|
|
30
|
-
|
|
31
|
-
const relObj = {
|
|
32
|
-
future: 'in %s',
|
|
33
|
-
past: '%s ago',
|
|
34
|
-
s: 'a few seconds',
|
|
35
|
-
m: 'a minute',
|
|
36
|
-
mm: '%d minutes',
|
|
37
|
-
h: 'an hour',
|
|
38
|
-
hh: '%d hours',
|
|
39
|
-
d: 'a day',
|
|
40
|
-
dd: '%d days',
|
|
41
|
-
M: 'a month',
|
|
42
|
-
MM: '%d months',
|
|
43
|
-
y: 'a year',
|
|
44
|
-
yy: '%d years'
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
;(d as any).en.relativeTime = relObj
|
|
48
|
-
|
|
49
|
-
;(proto as any).fromToBase = (input: any, withoutSuffix: any, instance: any, isFrom: any, postFormat: any) => {
|
|
50
|
-
const loc = instance.$locale().relativeTime || relObj
|
|
51
|
-
|
|
52
|
-
const T = o.thresholds || [
|
|
53
|
-
{ l: 's', r: 44, d: C.S },
|
|
54
|
-
{ l: 'm', r: 89 },
|
|
55
|
-
{ l: 'mm', r: 44, d: C.MIN },
|
|
56
|
-
{ l: 'h', r: 89 },
|
|
57
|
-
{ l: 'hh', r: 21, d: C.H },
|
|
58
|
-
{ l: 'd', r: 35 },
|
|
59
|
-
{ l: 'dd', r: 25, d: C.D },
|
|
60
|
-
{ l: 'M', r: 45 },
|
|
61
|
-
{ l: 'MM', r: 10, d: C.M },
|
|
62
|
-
{ l: 'y', r: 17 },
|
|
63
|
-
{ l: 'yy', d: C.Y }
|
|
64
|
-
]
|
|
65
|
-
|
|
66
|
-
const Tl = T.length
|
|
67
|
-
|
|
68
|
-
let result
|
|
69
|
-
let out
|
|
70
|
-
let isFuture
|
|
71
|
-
|
|
72
|
-
for (let i = 0; i < Tl; i += 1) {
|
|
73
|
-
let t = T[i]
|
|
74
|
-
if (t.d) {
|
|
75
|
-
result = isFrom
|
|
76
|
-
? d(input).diff(instance, (t as any).d, true)
|
|
77
|
-
: instance.diff(input, t.d, true)
|
|
78
|
-
}
|
|
79
|
-
let abs = (o.rounding || Math.round)(Math.abs(result))
|
|
80
|
-
isFuture = result > 0
|
|
81
|
-
if (abs <= (t as any).r || !t.r) {
|
|
82
|
-
if (abs <= 1 && i > 0) { t = T[i - 1] } // 1 minutes -> a minute, 0 seconds -> 0 second
|
|
83
|
-
const format = loc[t.l]
|
|
84
|
-
if (postFormat) {
|
|
85
|
-
abs = postFormat(`${abs}`)
|
|
86
|
-
}
|
|
87
|
-
if (typeof format === 'string') {
|
|
88
|
-
out = (format as any).replace('%d', abs)
|
|
89
|
-
} else {
|
|
90
|
-
out = format(abs, withoutSuffix, t.l, isFuture)
|
|
91
|
-
}
|
|
92
|
-
break
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
if (withoutSuffix) { return out }
|
|
96
|
-
const pastOrFuture = isFuture ? loc.future : loc.past
|
|
97
|
-
if (typeof pastOrFuture === 'function') {
|
|
98
|
-
return pastOrFuture(out)
|
|
99
|
-
}
|
|
100
|
-
return pastOrFuture.replace('%s', out)
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
function fromTo(input: any, withoutSuffix: any, instance: any, isFrom?: any) {
|
|
104
|
-
return (proto as any).fromToBase(input, withoutSuffix, instance, isFrom)
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
proto.to = function (input, withoutSuffix) {
|
|
108
|
-
return fromTo(input, withoutSuffix, this, true)
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
proto.from = function (input, withoutSuffix) {
|
|
112
|
-
return fromTo(input, withoutSuffix, this)
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
const makeNow = (thisDay: any) => (thisDay.$u ? (d as any).utc() : d())
|
|
116
|
-
|
|
117
|
-
proto.toNow = function (withoutSuffix?: boolean) {
|
|
118
|
-
return this.to(makeNow(this), withoutSuffix)
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
proto.fromNow = function (withoutSuffix) {
|
|
122
|
-
return this.from(makeNow(this), withoutSuffix)
|
|
123
|
-
}
|
|
124
|
-
}
|