@eturnity/eturnity_reusable_components 7.39.4-EPDM-11817.0 → 7.39.4-EPDM-12383.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-11817.0",
3
+ "version": "7.39.4-EPDM-12383.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="12" xmlns="http://www.w3.org/2000/svg">
1
+ <svg fill="none" height="16" viewbox="14 12 12 16" width="16" 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,7 +11,6 @@ const theme = {
11
11
  lightGray: '#f2f2f2',
12
12
  white: '#ffffff',
13
13
  blue: '#48a2d0',
14
- blue2: '#6CD4D4',
15
14
  red: '#ff5656',
16
15
  blue1: '#e4efff',
17
16
  brightBlue: '#0068DE',
@@ -1,14 +1,12 @@
1
1
  <template>
2
2
  <ComponentWrapper>
3
- <IconWrapper :size="type === 'dot' ? 'unset' : size">
3
+ <IconWrapper :size="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" />
10
9
  <IconComponent
11
- v-else
12
10
  :color="iconColor"
13
11
  cursor="pointer"
14
12
  name="info"
@@ -96,14 +94,6 @@
96
94
  height: ${(props) => props.size};
97
95
  `
98
96
 
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
-
107
97
  const IconImg = styled.div`
108
98
  line-height: 0;
109
99
  `
@@ -115,7 +105,6 @@
115
105
  export default {
116
106
  name: 'InfoText',
117
107
  components: {
118
- Dot,
119
108
  IconWrapper,
120
109
  TextOverlay,
121
110
  ComponentWrapper,
@@ -124,27 +113,21 @@
124
113
  },
125
114
  props: {
126
115
  text: {
127
- type: String,
128
116
  required: false,
129
- default: '',
130
117
  },
131
118
  size: {
132
- type: String,
133
119
  required: false,
134
120
  default: '14px',
135
121
  },
136
122
  alignArrow: {
137
- type: String,
138
123
  required: false,
139
124
  default: 'center',
140
125
  },
141
126
  openTrigger: {
142
- type: String,
143
127
  required: false,
144
128
  default: 'onHover', // onHover, onClick
145
129
  },
146
130
  width: {
147
- type: String,
148
131
  required: false,
149
132
  default: '200px',
150
133
  },
@@ -152,16 +135,6 @@
152
135
  type: String,
153
136
  default: '400px',
154
137
  },
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
- },
165
138
  },
166
139
  data() {
167
140
  return {
@@ -4,6 +4,7 @@
4
4
  v-if="hasLabelSlot"
5
5
  :align-items="alignItems"
6
6
  :border-color="borderColor"
7
+ :is-disabled="disabled"
7
8
  :is-error="isError"
8
9
  :is-interactive="isInteractive"
9
10
  :no-border="noBorder"
@@ -273,18 +274,22 @@
273
274
  : props.theme.colors.mediumGray};
274
275
  `
275
276
 
276
- const LabelWrapper = styled('div', inputProps)`
277
+ const LabelWrapper = styled('div')`
277
278
  display: flex;
278
279
  align-items: center;
279
280
  gap: 10px;
280
281
  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) => (props.isInteractive ? 'ew-resize' : 'auto')};
287
+ cursor: ${(props) =>
288
+ props.isDisabled
289
+ ? 'not-allowed'
290
+ : props.isInteractive
291
+ ? 'ew-resize'
292
+ : 'auto'};
288
293
  border: ${(props) =>
289
294
  props.alignItems == 'vertical'
290
295
  ? 'none'
@@ -760,12 +765,18 @@
760
765
  }
761
766
  },
762
767
  initInteraction(e) {
768
+ if (this.disabled) {
769
+ return
770
+ }
763
771
  this.focusInput()
764
772
  e.preventDefault()
765
773
  window.addEventListener('mousemove', this.interact, false)
766
774
  window.addEventListener('mouseup', this.stopInteract, false)
767
775
  },
768
776
  interact(e) {
777
+ if (this.disabled) {
778
+ return
779
+ }
769
780
  e.preventDefault()
770
781
  let value = parseFloat(this.value || 0)
771
782
  value += parseFloat(this.interactionStep) * parseInt(e.movementX)
@@ -43,6 +43,7 @@
43
43
  buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
44
44
  "
45
45
  class="select-button"
46
+ :color-mode="colorMode"
46
47
  :data-id="dataId"
47
48
  :disabled="disabled"
48
49
  :font-color="
@@ -274,6 +275,7 @@
274
275
  noRelative: Boolean,
275
276
  tablePaddingLeft: String,
276
277
  showDisabledBackground: Boolean,
278
+ colorMode: String,
277
279
  }
278
280
  const SelectButton = styled('div', selectButtonAttrs)`
279
281
  position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -311,12 +313,16 @@
311
313
  `}
312
314
  background-color:${(props) =>
313
315
  props.disabled && props.showDisabledBackground
314
- ? props.theme.colors.grey5
316
+ ? props.colorMode == 'dark'
317
+ ? props.theme.transparentBlack1
318
+ : props.theme.colors.grey5
315
319
  : props.theme.colors[props.bgColor]
316
320
  ? props.theme.colors[props.bgColor]
317
321
  : props.bgColor};
318
322
  color: ${(props) =>
319
- props.theme.colors[props.fontColor]
323
+ props.disabled
324
+ ? props.theme.colors.grey2
325
+ : props.theme.colors[props.fontColor]
320
326
  ? props.theme.colors[props.fontColor]
321
327
  : props.fontColor};
322
328
  ${(props) => (props.disabled ? 'pointer-events: none' : '')};
@@ -613,7 +619,7 @@
613
619
  if (this.isDropdownOpen) {
614
620
  return this.$refs.dropdown.$el.childElementCount > 1
615
621
  ? this.$refs.dropdown.$el.childElementCount
616
- : !!this.$refs.dropdown.$el.children[0]
622
+ : this.$refs.dropdown.$el.children[0]
617
623
  ? this.$refs.dropdown.$el.children[0].childElementCount
618
624
  : 0
619
625
  }