@globalbrain/sefirot 2.11.0 → 2.12.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.
@@ -17,24 +17,32 @@ const props = defineProps<{
17
17
  align?: Align
18
18
  separator?: boolean
19
19
  disabled?: boolean
20
- modelValue: number | null
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:modelValue', value: number | null): void
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(props.modelValue)) {
39
+ if (isNullish(_value.value)) {
32
40
  return null
33
41
  }
34
42
 
35
- return props.modelValue >= 100000000000000000000
43
+ return _value.value >= 100000000000000000000
36
44
  ? 'The number is too big'
37
- : props.modelValue.toLocaleString('en-US', { maximumSignificantDigits: 20 })
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
- emit('update:modelValue', isNullish(value) ? null : Number(value))
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(modelValue)"
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>
@@ -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
- emit('update:modelValue', getValue(e))
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);
@@ -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-light);
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-light);
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-light);
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-light);
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-light);
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-light);
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-light);
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-light);
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-light);
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-light);
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-light);
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-light);
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-light);
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);
@@ -6,6 +6,6 @@ export type Input = ConfigType
6
6
 
7
7
  dayjs.extend(relativeTime)
8
8
 
9
- export function day(input?: Input): Dayjs {
9
+ export function day(input?: Input): Day {
10
10
  return dayjs(input)
11
11
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@globalbrain/sefirot",
3
- "version": "2.11.0",
3
+ "version": "2.12.0",
4
4
  "description": "Vue Components for Global Brain Design System.",
5
5
  "author": "Kia Ishii <ka.ishii@globalbrains.com>",
6
6
  "license": "MIT",