@eturnity/eturnity_reusable_components 6.46.5-EPDM-8599.0 → 6.46.5-EPDM-8891.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
package/src/App.vue
CHANGED
@@ -114,7 +114,6 @@ import iconCollection from '@/components/icon/iconCollection'
|
|
114
114
|
import dropdownComponent from '@/components/dropdown'
|
115
115
|
import videoThumbnail from '@/components/videoThumbnail'
|
116
116
|
import icon from '@/components/icon'
|
117
|
-
import infoCard from '@/components/infoCard'
|
118
117
|
// import TableDropdown from "@/components/tableDropdown"
|
119
118
|
|
120
119
|
const PageContainer = styled.div`
|
@@ -139,8 +138,7 @@ export default {
|
|
139
138
|
iconCollection,
|
140
139
|
dropdownComponent,
|
141
140
|
videoThumbnail,
|
142
|
-
icon
|
143
|
-
infoCard
|
141
|
+
icon
|
144
142
|
},
|
145
143
|
data() {
|
146
144
|
return {
|
@@ -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,12 +522,20 @@ 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 &&
|
529
|
+
this.$refs.dropdown.$children[0].$children
|
530
|
+
? this.$refs.dropdown.$children[0].$children
|
531
|
+
: this.$refs.dropdown.$children
|
532
|
+
return filterRef.length
|
524
533
|
} else {
|
525
534
|
return 0
|
526
535
|
}
|
527
536
|
},
|
528
537
|
isSearchBarVisible() {
|
538
|
+
console.log('this.optionLength', this.optionLength)
|
529
539
|
return this.isSearchable && this.optionLength >= 5 && this.isDropdownOpen
|
530
540
|
}
|
531
541
|
},
|
@@ -1,38 +0,0 @@
|
|
1
|
-
<template>
|
2
|
-
<info-container>
|
3
|
-
<icon name="info" size="24px" />
|
4
|
-
<InfoTextContainer>
|
5
|
-
<slot />
|
6
|
-
</InfoTextContainer>
|
7
|
-
</info-container>
|
8
|
-
</template>
|
9
|
-
|
10
|
-
<script>
|
11
|
-
import styled from 'vue-styled-components'
|
12
|
-
import icon from '../icon'
|
13
|
-
const InfoContainer = styled('div')`
|
14
|
-
display: flex;
|
15
|
-
align-items: flex-start;
|
16
|
-
gap: 15px;
|
17
|
-
padding: 20px;
|
18
|
-
width: 500px;
|
19
|
-
min-width: 450px;
|
20
|
-
border: 1px dashed #dee2eb;
|
21
|
-
border-radius: 4px;
|
22
|
-
margin:20px 0;
|
23
|
-
`
|
24
|
-
|
25
|
-
const InfoTextContainer = styled('div')`
|
26
|
-
font-size: 13px;
|
27
|
-
`
|
28
|
-
|
29
|
-
|
30
|
-
export default {
|
31
|
-
components:{
|
32
|
-
icon,
|
33
|
-
InfoTextContainer,
|
34
|
-
InfoContainer
|
35
|
-
},
|
36
|
-
props:[]
|
37
|
-
}
|
38
|
-
</script>
|