@eturnity/eturnity_reusable_components 7.39.4-EPDM-12383.0 → 7.39.4-EPDM-10609.0
Sign up to get free protection for your applications and to get access to all the features.
package/package.json
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
<svg fill="none" height="16" viewbox="14 12 12 16" width="
|
1
|
+
<svg fill="none" height="16" viewbox="14 12 12 16" width="12" xmlns="http://www.w3.org/2000/svg">
|
2
2
|
<path clip-rule="evenodd" d="M16.5 18.25V16.5C16.5 14.567 18.067 13 20 13C21.933 13 23.5 14.567 23.5 16.5V18.25H25.25V27H14.75V18.25H16.5ZM18.25 16.5C18.25 15.5335 19.0335 14.75 20 14.75C20.9665 14.75 21.75 15.5335 21.75 16.5V18.25H18.25V16.5ZM19.125 24.375V20.875H20.875V24.375H19.125Z" fill="#263238" fill-rule="evenodd"></path>
|
3
3
|
</svg>
|
package/src/assets/theme.js
CHANGED
@@ -1,12 +1,14 @@
|
|
1
1
|
<template>
|
2
2
|
<ComponentWrapper>
|
3
|
-
<IconWrapper :size="size">
|
3
|
+
<IconWrapper :size="type === 'dot' ? 'unset' : size">
|
4
4
|
<IconImg
|
5
5
|
@click.prevent="toggleShowInfo()"
|
6
6
|
@mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
|
7
7
|
@mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
|
8
8
|
>
|
9
|
+
<Dot v-if="type === 'dot'" :color="dotColor" />
|
9
10
|
<IconComponent
|
11
|
+
v-else
|
10
12
|
:color="iconColor"
|
11
13
|
cursor="pointer"
|
12
14
|
name="info"
|
@@ -94,6 +96,14 @@
|
|
94
96
|
height: ${(props) => props.size};
|
95
97
|
`
|
96
98
|
|
99
|
+
const Dot = styled('div')`
|
100
|
+
width: 5px;
|
101
|
+
height: 5px;
|
102
|
+
background-color: ${(props) => props.color};
|
103
|
+
border-radius: 50%;
|
104
|
+
display: inline-block;
|
105
|
+
`
|
106
|
+
|
97
107
|
const IconImg = styled.div`
|
98
108
|
line-height: 0;
|
99
109
|
`
|
@@ -105,6 +115,7 @@
|
|
105
115
|
export default {
|
106
116
|
name: 'InfoText',
|
107
117
|
components: {
|
118
|
+
Dot,
|
108
119
|
IconWrapper,
|
109
120
|
TextOverlay,
|
110
121
|
ComponentWrapper,
|
@@ -113,21 +124,27 @@
|
|
113
124
|
},
|
114
125
|
props: {
|
115
126
|
text: {
|
127
|
+
type: String,
|
116
128
|
required: false,
|
129
|
+
default: '',
|
117
130
|
},
|
118
131
|
size: {
|
132
|
+
type: String,
|
119
133
|
required: false,
|
120
134
|
default: '14px',
|
121
135
|
},
|
122
136
|
alignArrow: {
|
137
|
+
type: String,
|
123
138
|
required: false,
|
124
139
|
default: 'center',
|
125
140
|
},
|
126
141
|
openTrigger: {
|
142
|
+
type: String,
|
127
143
|
required: false,
|
128
144
|
default: 'onHover', // onHover, onClick
|
129
145
|
},
|
130
146
|
width: {
|
147
|
+
type: String,
|
131
148
|
required: false,
|
132
149
|
default: '200px',
|
133
150
|
},
|
@@ -135,6 +152,16 @@
|
|
135
152
|
type: String,
|
136
153
|
default: '400px',
|
137
154
|
},
|
155
|
+
dotColor: {
|
156
|
+
type: String,
|
157
|
+
required: false,
|
158
|
+
default: theme.colors.blue2,
|
159
|
+
},
|
160
|
+
type: {
|
161
|
+
type: String,
|
162
|
+
required: false,
|
163
|
+
default: 'info', // info, dot
|
164
|
+
},
|
138
165
|
},
|
139
166
|
data() {
|
140
167
|
return {
|
@@ -4,7 +4,6 @@
|
|
4
4
|
v-if="hasLabelSlot"
|
5
5
|
:align-items="alignItems"
|
6
6
|
:border-color="borderColor"
|
7
|
-
:is-disabled="disabled"
|
8
7
|
:is-error="isError"
|
9
8
|
:is-interactive="isInteractive"
|
10
9
|
:no-border="noBorder"
|
@@ -274,22 +273,18 @@
|
|
274
273
|
: props.theme.colors.mediumGray};
|
275
274
|
`
|
276
275
|
|
277
|
-
const LabelWrapper = styled('div')`
|
276
|
+
const LabelWrapper = styled('div', inputProps)`
|
278
277
|
display: flex;
|
279
278
|
align-items: center;
|
280
279
|
gap: 10px;
|
281
280
|
margin-bottom: 8px;
|
281
|
+
cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
|
282
282
|
`
|
283
283
|
const LabelSlotWrapper = styled('div', inputProps)`
|
284
284
|
display: flex;
|
285
285
|
gap: 10px;
|
286
286
|
align-items: center;
|
287
|
-
cursor: ${(props) =>
|
288
|
-
props.isDisabled
|
289
|
-
? 'not-allowed'
|
290
|
-
: props.isInteractive
|
291
|
-
? 'ew-resize'
|
292
|
-
: 'auto'};
|
287
|
+
cursor: ${(props) => (props.isInteractive ? 'ew-resize' : 'auto')};
|
293
288
|
border: ${(props) =>
|
294
289
|
props.alignItems == 'vertical'
|
295
290
|
? 'none'
|
@@ -765,18 +760,12 @@
|
|
765
760
|
}
|
766
761
|
},
|
767
762
|
initInteraction(e) {
|
768
|
-
if (this.disabled) {
|
769
|
-
return
|
770
|
-
}
|
771
763
|
this.focusInput()
|
772
764
|
e.preventDefault()
|
773
765
|
window.addEventListener('mousemove', this.interact, false)
|
774
766
|
window.addEventListener('mouseup', this.stopInteract, false)
|
775
767
|
},
|
776
768
|
interact(e) {
|
777
|
-
if (this.disabled) {
|
778
|
-
return
|
779
|
-
}
|
780
769
|
e.preventDefault()
|
781
770
|
let value = parseFloat(this.value || 0)
|
782
771
|
value += parseFloat(this.interactionStep) * parseInt(e.movementX)
|
@@ -43,7 +43,6 @@
|
|
43
43
|
buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
|
44
44
|
"
|
45
45
|
class="select-button"
|
46
|
-
:color-mode="colorMode"
|
47
46
|
:data-id="dataId"
|
48
47
|
:disabled="disabled"
|
49
48
|
:font-color="
|
@@ -275,7 +274,6 @@
|
|
275
274
|
noRelative: Boolean,
|
276
275
|
tablePaddingLeft: String,
|
277
276
|
showDisabledBackground: Boolean,
|
278
|
-
colorMode: String,
|
279
277
|
}
|
280
278
|
const SelectButton = styled('div', selectButtonAttrs)`
|
281
279
|
position: ${(props) => (props.noRelative ? 'static' : 'relative')};
|
@@ -313,16 +311,12 @@
|
|
313
311
|
`}
|
314
312
|
background-color:${(props) =>
|
315
313
|
props.disabled && props.showDisabledBackground
|
316
|
-
? props.
|
317
|
-
? props.theme.transparentBlack1
|
318
|
-
: props.theme.colors.grey5
|
314
|
+
? props.theme.colors.grey5
|
319
315
|
: props.theme.colors[props.bgColor]
|
320
316
|
? props.theme.colors[props.bgColor]
|
321
317
|
: props.bgColor};
|
322
318
|
color: ${(props) =>
|
323
|
-
props.
|
324
|
-
? props.theme.colors.grey2
|
325
|
-
: props.theme.colors[props.fontColor]
|
319
|
+
props.theme.colors[props.fontColor]
|
326
320
|
? props.theme.colors[props.fontColor]
|
327
321
|
: props.fontColor};
|
328
322
|
${(props) => (props.disabled ? 'pointer-events: none' : '')};
|
@@ -619,7 +613,7 @@
|
|
619
613
|
if (this.isDropdownOpen) {
|
620
614
|
return this.$refs.dropdown.$el.childElementCount > 1
|
621
615
|
? this.$refs.dropdown.$el.childElementCount
|
622
|
-
: this.$refs.dropdown.$el.children[0]
|
616
|
+
: !!this.$refs.dropdown.$el.children[0]
|
623
617
|
? this.$refs.dropdown.$el.children[0].childElementCount
|
624
618
|
: 0
|
625
619
|
}
|