@globalbrain/sefirot 2.17.0 → 2.18.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.
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
import { IconifyIcon } from '@iconify/vue/dist/offline'
|
|
3
3
|
import { DefineComponent, computed } from 'vue'
|
|
4
4
|
import { Validatable } from '../composables/Validation'
|
|
5
|
-
import { isNullish } from '../support/Utils'
|
|
5
|
+
import { isNullish, isString } from '../support/Utils'
|
|
6
6
|
import SInputText from './SInputText.vue'
|
|
7
7
|
|
|
8
8
|
export type Size = 'mini' | 'small' | 'medium'
|
|
9
9
|
export type Align = 'left' | 'center' | 'right'
|
|
10
|
-
export type
|
|
10
|
+
export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
|
|
11
|
+
export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
|
|
11
12
|
|
|
12
13
|
const props = defineProps<{
|
|
13
14
|
size?: Size
|
|
@@ -21,7 +22,8 @@ const props = defineProps<{
|
|
|
21
22
|
unitAfter?: any
|
|
22
23
|
checkIcon?: IconifyIcon | DefineComponent
|
|
23
24
|
checkText?: string
|
|
24
|
-
checkColor?:
|
|
25
|
+
checkColor?: CheckColor
|
|
26
|
+
textColor?: TextColor | ((value: number | null) => TextColor)
|
|
25
27
|
align?: Align
|
|
26
28
|
separator?: boolean
|
|
27
29
|
disabled?: boolean
|
|
@@ -43,6 +45,18 @@ const _value = computed(() => {
|
|
|
43
45
|
: props.value !== undefined ? props.value : null
|
|
44
46
|
})
|
|
45
47
|
|
|
48
|
+
const _textColor = computed(() => {
|
|
49
|
+
if (!props.textColor) {
|
|
50
|
+
return 'neutral'
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
if (isString(props.textColor)) {
|
|
54
|
+
return props.textColor
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return props.textColor(_value.value)
|
|
58
|
+
})
|
|
59
|
+
|
|
46
60
|
const valueWithSeparator = computed(() => {
|
|
47
61
|
if (isNullish(_value.value)) {
|
|
48
62
|
return null
|
|
@@ -86,6 +100,7 @@ function emitUpdate(value: string | null) {
|
|
|
86
100
|
:check-icon="checkIcon"
|
|
87
101
|
:check-text="checkText"
|
|
88
102
|
:check-color="checkColor"
|
|
103
|
+
:text-color="_textColor"
|
|
89
104
|
:align="align"
|
|
90
105
|
:disabled="disabled"
|
|
91
106
|
:hide-error="hideError"
|
|
@@ -8,7 +8,8 @@ import SInputBase from './SInputBase.vue'
|
|
|
8
8
|
|
|
9
9
|
export type Size = 'mini' | 'small' | 'medium'
|
|
10
10
|
export type Align = 'left' | 'center' | 'right'
|
|
11
|
-
export type
|
|
11
|
+
export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
|
|
12
|
+
export type TextColor = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
|
|
12
13
|
|
|
13
14
|
const props = defineProps<{
|
|
14
15
|
size?: Size
|
|
@@ -23,7 +24,8 @@ const props = defineProps<{
|
|
|
23
24
|
unitAfter?: any
|
|
24
25
|
checkIcon?: IconifyIcon | DefineComponent
|
|
25
26
|
checkText?: string
|
|
26
|
-
checkColor?:
|
|
27
|
+
checkColor?: CheckColor
|
|
28
|
+
textColor?: TextColor | ((value: string | null) => TextColor)
|
|
27
29
|
align?: Align
|
|
28
30
|
disabled?: boolean
|
|
29
31
|
modelValue: string | null
|
|
@@ -48,6 +50,23 @@ const classes = computed(() => [
|
|
|
48
50
|
{ disabled: props.disabled }
|
|
49
51
|
])
|
|
50
52
|
|
|
53
|
+
const inputClasses = computed(() => [
|
|
54
|
+
textColor.value,
|
|
55
|
+
{ hide: showDisplay.value }
|
|
56
|
+
])
|
|
57
|
+
|
|
58
|
+
const textColor = computed(() => {
|
|
59
|
+
if (!props.textColor) {
|
|
60
|
+
return 'neutral'
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (isString(props.textColor)) {
|
|
64
|
+
return props.textColor
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return props.textColor(props.modelValue)
|
|
68
|
+
})
|
|
69
|
+
|
|
51
70
|
const showDisplay = computed(() => {
|
|
52
71
|
return !isFocused.value && props.displayValue
|
|
53
72
|
})
|
|
@@ -122,7 +141,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
|
|
|
122
141
|
<div class="area">
|
|
123
142
|
<input
|
|
124
143
|
class="input entity"
|
|
125
|
-
:class="
|
|
144
|
+
:class="inputClasses"
|
|
126
145
|
:id="name"
|
|
127
146
|
:type="type ?? 'text'"
|
|
128
147
|
:placeholder="placeholder"
|
|
@@ -134,7 +153,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
|
|
|
134
153
|
@input="emitInput"
|
|
135
154
|
@keypress.enter="emitEnter"
|
|
136
155
|
>
|
|
137
|
-
<div v-if="showDisplay" class="input display">
|
|
156
|
+
<div v-if="showDisplay" class="input display" :class="[textColor]">
|
|
138
157
|
{{ displayValue }}
|
|
139
158
|
</div>
|
|
140
159
|
</div>
|
|
@@ -371,10 +390,15 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
|
|
|
371
390
|
bottom: 0;
|
|
372
391
|
left: 0;
|
|
373
392
|
width: 100%;
|
|
374
|
-
color: var(--input-value-color);
|
|
375
393
|
background-color: transparent;
|
|
376
394
|
cursor: text;
|
|
377
395
|
|
|
396
|
+
&.neutral:not(.hide) { color: var(--input-value-color); }
|
|
397
|
+
&.info:not(.hide) { color: var(--c-info-text); }
|
|
398
|
+
&.success:not(.hide) { color: var(--c-success-text); }
|
|
399
|
+
&.warning:not(.hide) { color: var(--c-warning-text); }
|
|
400
|
+
&.danger:not(.hide) { color: var(--c-danger-text); }
|
|
401
|
+
|
|
378
402
|
&.hide,
|
|
379
403
|
&.hide::placeholder {
|
|
380
404
|
color: transparent;
|