@eturnity/eturnity_reusable_components 1.2.86-EPDM-7509 → 1.2.86-EPDM-7435-1

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eturnity/eturnity_reusable_components",
3
- "version": "1.2.86-EPDM-7509",
3
+ "version": "1.2.86-EPDM-7435-1",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "vue-cli-service serve",
@@ -0,0 +1 @@
1
+ <?xml version="1.0" ?><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 13H12v5l6-6-6-6v5H4V2H2v11z"/></svg>
@@ -7,7 +7,7 @@
7
7
  <label-wrapper v-if="label">
8
8
  <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
9
9
  label
10
- }}</input-label>
10
+ }} <optionalLabel v-if="labelOptional">({{ $gettext('Optional') }})</optionalLabel></input-label>
11
11
  <info-text
12
12
  v-if="infoTextMessage"
13
13
  :text="infoTextMessage"
@@ -81,7 +81,9 @@ const InputLabel = styled('div', labelAttrs)`
81
81
  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
82
82
  font-weight: 700;
83
83
  `
84
-
84
+ const optionalLabel = styled.span`
85
+ font-weight: 300;
86
+ `
85
87
  const LabelWrapper = styled.div`
86
88
  display: inline-grid;
87
89
  grid-template-columns: auto auto;
@@ -217,7 +219,8 @@ export default {
217
219
  Icon,
218
220
  IconWrapper,
219
221
  IconContainer,
220
- InputErrorWrapper
222
+ InputErrorWrapper,
223
+ optionalLabel
221
224
  },
222
225
  data() {
223
226
  return {
@@ -266,6 +269,10 @@ export default {
266
269
  label: {
267
270
  required: false
268
271
  },
272
+ labelOptional: {
273
+ required: false,
274
+ default: false
275
+ },
269
276
  noBorder: {
270
277
  required: false,
271
278
  default: false
@@ -14,7 +14,8 @@
14
14
  labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
15
15
  "
16
16
  :fontSize="fontSize"
17
- >{{ label }}</input-label
17
+ >{{ label }} <optionalLabel v-if="labelOptional"> ({{ $gettext('Optional') }})</optionalLabel>
18
+ </input-label
18
19
  >
19
20
  <info-text
20
21
  v-if="infoTextMessage"
@@ -158,6 +159,10 @@ const InputLabel = styled('div', labelAttrs)`
158
159
  font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
159
160
  font-weight: 700;
160
161
  `
162
+ const optionalLabel = styled.span`
163
+ font-weight: 300;
164
+
165
+ `
161
166
  const inputProps = { selectWidth: String, optionWidth: String }
162
167
  const Container = styled('div', inputProps)`
163
168
  width: ${(props) => (props.selectWidth ? props.selectWidth : '100%')};
@@ -193,7 +198,7 @@ const selectButton = styled('div', selectButtonAttrs)`
193
198
  box-sizing: border-box;
194
199
  border-radius: 4px;
195
200
  padding: ${(props) =>
196
- props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px 0 15px'};
201
+ props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
197
202
  text-align: left;
198
203
  border-radius: 4px;
199
204
  min-height: 36px;
@@ -230,7 +235,6 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
230
235
  z-index:${(props) => (props.isActive ? '2' : '1')};
231
236
  position:absolute;
232
237
  top:5px;
233
- padding:10px;
234
238
  border:1px solid ${(props) => props.theme.colors.grey4}
235
239
  border-radius:4px;
236
240
  display: flex;
@@ -283,6 +287,10 @@ export default {
283
287
  label: {
284
288
  required: false
285
289
  },
290
+ labelOptional: {
291
+ required: false,
292
+ default: false
293
+ },
286
294
  infoTextMessage: {
287
295
  required: false
288
296
  },
@@ -360,6 +368,7 @@ export default {
360
368
  Container,
361
369
  InputLabel,
362
370
  LabelWrapper,
371
+ optionalLabel,
363
372
  InfoText,
364
373
  InputWrapper,
365
374
  DropdownWrapper,
@@ -12,7 +12,6 @@
12
12
  v-else
13
13
  :cellPaddings="cellPaddings"
14
14
  :tableCursor="tableCursor"
15
- @mouseover="setHovers($event)"
16
15
  >
17
16
  <slot />
18
17
  </table-container>
@@ -88,8 +87,8 @@ const TableContainer = styled('table', containerAttrs)`
88
87
  }
89
88
 
90
89
  tbody {
91
- tr, td {
92
- &:hover, &.hover {
90
+ tr {
91
+ &:hover {
93
92
  background-color: ${(props) => props.theme.colors.white};
94
93
  cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
95
94
 
@@ -379,30 +378,6 @@ export default {
379
378
  tableCursor: {
380
379
  required: false
381
380
  }
382
- },
383
- methods: {
384
- setHovers(event) {
385
- let parentTd
386
-
387
- if (event.target.tagName === 'TD') {
388
- parentTd = event.target
389
- } else {
390
- let currentElement = event.target.parentElement
391
- while (currentElement.tagName !== 'TR') {
392
- if (currentElement.tagName === 'TD') parentTd = currentElement
393
- currentElement = currentElement.parentElement
394
- }
395
- }
396
-
397
- if (parentTd) {
398
- const trChildren = Array.from(parentTd.parentElement.children)
399
- const trList = Array.from(document.querySelectorAll('tr'))
400
- trList.forEach((el) => {
401
- const cells = Array.from(el.children)
402
- cells[trChildren.indexOf(parentTd)].classList.add('hover')
403
- })
404
- }
405
- }
406
381
  }
407
382
  }
408
383
  </script>