@eturnity/eturnity_reusable_components 6.46.5-EPDM-9185.0 → 6.46.5-EPDM-8891.2
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
@@ -408,7 +408,7 @@ export default {
|
|
408
408
|
isActive: false,
|
409
409
|
textSearch: '',
|
410
410
|
hoveredIndex: 0,
|
411
|
-
hoveredValue:null,
|
411
|
+
hoveredValue: null,
|
412
412
|
isClickOutsideActive: false
|
413
413
|
}
|
414
414
|
},
|
@@ -447,7 +447,7 @@ export default {
|
|
447
447
|
this.$emit('input-change', e)
|
448
448
|
},
|
449
449
|
optionHovered(e) {
|
450
|
-
this.hoveredValue=e
|
450
|
+
this.hoveredValue = e
|
451
451
|
},
|
452
452
|
mouseEnterHandler() {
|
453
453
|
if (this.hoverDropdown) {
|
@@ -502,14 +502,16 @@ export default {
|
|
502
502
|
},
|
503
503
|
onArrowPress(dir) {
|
504
504
|
let newHoveredElem
|
505
|
-
const currentHoveredElem=this.$refs.dropdown.$el.querySelector(
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
newHoveredElem=currentHoveredElem.
|
505
|
+
const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
|
506
|
+
`[data-value="${this.hoveredValue}"]`
|
507
|
+
)
|
508
|
+
if (currentHoveredElem) {
|
509
|
+
if (dir > 0) {
|
510
|
+
newHoveredElem = currentHoveredElem.nextElementSibling
|
511
|
+
} else {
|
512
|
+
newHoveredElem = currentHoveredElem.previousElementSibling
|
511
513
|
}
|
512
|
-
if(newHoveredElem){
|
514
|
+
if (newHoveredElem) {
|
513
515
|
this.hoveredValue = newHoveredElem.getAttribute('data-value')
|
514
516
|
const topPos = newHoveredElem.offsetTop
|
515
517
|
this.$refs.dropdown.$el.scrollTop = topPos
|
@@ -520,7 +522,15 @@ export default {
|
|
520
522
|
computed: {
|
521
523
|
optionLength() {
|
522
524
|
if (this.isDropdownOpen) {
|
523
|
-
|
525
|
+
// this filterRef is needed to check for the # of children on Filter dropdowns
|
526
|
+
const filterRef =
|
527
|
+
this.$refs.dropdown.$children &&
|
528
|
+
this.$refs.dropdown.$children.length > 1
|
529
|
+
? this.$refs.dropdown.$children
|
530
|
+
: this.$refs.dropdown.$children[0].$children
|
531
|
+
? this.$refs.dropdown.$children[0].$children
|
532
|
+
: this.$refs.dropdown.$children
|
533
|
+
return filterRef.length
|
524
534
|
} else {
|
525
535
|
return 0
|
526
536
|
}
|
@@ -1,8 +1,7 @@
|
|
1
1
|
<template>
|
2
|
-
<page-container>
|
2
|
+
<page-container :withDate="!!date">
|
3
3
|
<marker-container
|
4
4
|
v-if="markerData"
|
5
|
-
:withDate="!!date"
|
6
5
|
:backgroundColor="markerData.color"
|
7
6
|
:hasIcon="!!iconName"
|
8
7
|
:isEditionAllowed="editionAllowed"
|
@@ -97,9 +96,13 @@ import DeleteIcon from '../deleteIcon'
|
|
97
96
|
import PageSubtitle from '../pageSubtitle'
|
98
97
|
import MainButton from '../buttons/mainButton'
|
99
98
|
|
100
|
-
const
|
99
|
+
const PageContainerAttrs = {
|
100
|
+
withDate: Boolean
|
101
|
+
}
|
102
|
+
const PageContainer = styled('div', PageContainerAttrs)`
|
101
103
|
display: flex;
|
102
104
|
align-items: center;
|
105
|
+
gap: 10px;
|
103
106
|
font-size: 12px;
|
104
107
|
line-height: 14px;
|
105
108
|
`
|
@@ -117,7 +120,6 @@ const CtaContainer = styled.div`
|
|
117
120
|
|
118
121
|
const MarkerAttrs = {
|
119
122
|
backgroundColor: String,
|
120
|
-
withDate: Boolean,
|
121
123
|
hasIcon: Boolean,
|
122
124
|
isEditionAllowed: Boolean,
|
123
125
|
isActive: Boolean,
|
@@ -134,8 +136,7 @@ const MarkerContainer = styled('div', MarkerAttrs)`
|
|
134
136
|
color: ${(props) => props.theme.colors.white};
|
135
137
|
background-color: ${(props) =>
|
136
138
|
props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
|
137
|
-
border:
|
138
|
-
border-radius: ${(props) => props.withDate ? '4px 0 0 4px' : '4px'};
|
139
|
+
border-radius: 4px;
|
139
140
|
white-space: nowrap;
|
140
141
|
cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
|
141
142
|
|
@@ -193,12 +194,7 @@ const IconContainer = styled.div`
|
|
193
194
|
line-height: 0;
|
194
195
|
`
|
195
196
|
|
196
|
-
const Date = styled.div
|
197
|
-
padding: 2px 5px;
|
198
|
-
border: 1px solid ${(props) => props.theme.colors.grey4};
|
199
|
-
border-left: none;
|
200
|
-
border-radius: 0 4px 4px 0;
|
201
|
-
`
|
197
|
+
const Date = styled.div``
|
202
198
|
|
203
199
|
export default {
|
204
200
|
name: "project-marker",
|