@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,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "7.39.4-EPDM-12383.0",
3
+ "version": "7.39.4-EPDM-10609.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "src"
@@ -1,3 +1,3 @@
1
- <svg fill="none" height="16" viewbox="14 12 12 16" width="16" xmlns="http://www.w3.org/2000/svg">
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>
@@ -11,6 +11,7 @@ const theme = {
11
11
  lightGray: '#f2f2f2',
12
12
  white: '#ffffff',
13
13
  blue: '#48a2d0',
14
+ blue2: '#6CD4D4',
14
15
  red: '#ff5656',
15
16
  blue1: '#e4efff',
16
17
  brightBlue: '#0068DE',
@@ -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.colorMode == 'dark'
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.disabled
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
  }