@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.2 → 6.37.0-EPDM-8148.4
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 +6 -3
- package/postcss.config.js +6 -0
- package/src/App.vue +101 -99
- package/src/assets/svgIcons/update.svg +3 -0
- package/src/components/filter/filterSettings.vue +645 -0
- package/src/components/filter/index.vue +132 -0
- package/src/components/filter/parentDropdown.vue +91 -0
- package/src/components/iconWrapper/index.vue +133 -118
- package/src/components/inputs/inputNumber/index.vue +14 -0
- package/src/components/inputs/searchInput/index.vue +20 -10
- package/src/components/inputs/select/index.vue +17 -4
- package/src/helpers/translateLang.js +2 -0
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<page-wrapper ref="dropdown">
|
|
3
|
+
<parent-dropdown
|
|
4
|
+
@on-toggle="onToggleDropdown()"
|
|
5
|
+
:isOpen="isDropdownOpen"
|
|
6
|
+
:dropdownText="dropdownText ? dropdownText : 'Default view'"
|
|
7
|
+
/>
|
|
8
|
+
<filter-settings
|
|
9
|
+
v-if="isDropdownOpen"
|
|
10
|
+
:filterData="filterData"
|
|
11
|
+
:filterViews="filterViews"
|
|
12
|
+
:buttonText="buttonText"
|
|
13
|
+
@on-view-select="onViewSelect($event)"
|
|
14
|
+
@on-view-delete="onViewDelete($event)"
|
|
15
|
+
@on-save-new-view="$emit('on-save-new-view')"
|
|
16
|
+
@on-filter-change="onFilterChange($event)"
|
|
17
|
+
@on-cancel-view="onCancelSettings()"
|
|
18
|
+
@on-drag-change="$emit('on-drag-change', $event)"
|
|
19
|
+
@on-apply-current-view="onApplyCurrentView()"
|
|
20
|
+
@on-prevent-close="onPreventClose($event)"
|
|
21
|
+
@on-reset-filters="onResetFilters()"
|
|
22
|
+
:hasActiveView="hasActiveView"
|
|
23
|
+
:activeView="activeView"
|
|
24
|
+
:activeLanguage="activeLanguage"
|
|
25
|
+
:settingsTranslations="settingsTranslations"
|
|
26
|
+
/>
|
|
27
|
+
</page-wrapper>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script>
|
|
31
|
+
import styled from 'vue-styled-components'
|
|
32
|
+
import parentDropdown from './parentDropdown'
|
|
33
|
+
import filterSettings from './filterSettings'
|
|
34
|
+
|
|
35
|
+
const PageWrapper = styled.div`
|
|
36
|
+
position: relative;
|
|
37
|
+
`
|
|
38
|
+
|
|
39
|
+
export default {
|
|
40
|
+
name: 'filter-component',
|
|
41
|
+
components: {
|
|
42
|
+
parentDropdown,
|
|
43
|
+
PageWrapper,
|
|
44
|
+
filterSettings
|
|
45
|
+
},
|
|
46
|
+
props: {
|
|
47
|
+
filterData: {
|
|
48
|
+
required: true
|
|
49
|
+
},
|
|
50
|
+
dropdownText: {
|
|
51
|
+
required: false
|
|
52
|
+
},
|
|
53
|
+
filterViews: {
|
|
54
|
+
required: true
|
|
55
|
+
},
|
|
56
|
+
activeView: {
|
|
57
|
+
required: false,
|
|
58
|
+
default: null
|
|
59
|
+
},
|
|
60
|
+
buttonText: {
|
|
61
|
+
required: false
|
|
62
|
+
},
|
|
63
|
+
hasActiveView: {
|
|
64
|
+
required: false
|
|
65
|
+
},
|
|
66
|
+
activeLanguage: {
|
|
67
|
+
required: false,
|
|
68
|
+
default: 'en-us'
|
|
69
|
+
},
|
|
70
|
+
settingsTranslations: {
|
|
71
|
+
required: false
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
data() {
|
|
75
|
+
return {
|
|
76
|
+
isDropdownOpen: false,
|
|
77
|
+
activeFilter: null,
|
|
78
|
+
preventOutsideClick: false
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
methods: {
|
|
82
|
+
onToggleDropdown() {
|
|
83
|
+
this.isDropdownOpen = !this.isDropdownOpen
|
|
84
|
+
},
|
|
85
|
+
clickOutside(event) {
|
|
86
|
+
if (
|
|
87
|
+
!this.$refs.dropdown.$el.contains(event.target) &&
|
|
88
|
+
!this.preventOutsideClick
|
|
89
|
+
) {
|
|
90
|
+
this.isDropdownOpen = false
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
onPreventClose(value) {
|
|
94
|
+
setTimeout(() => {
|
|
95
|
+
this.preventOutsideClick = value
|
|
96
|
+
}, 100)
|
|
97
|
+
},
|
|
98
|
+
onFilterChange(data) {
|
|
99
|
+
// this.preventOutsideClick = true is needed for when the user clicks on the calendar icon on the date range
|
|
100
|
+
// because clicking the calendar does not trigger the @focus
|
|
101
|
+
this.preventOutsideClick = true
|
|
102
|
+
this.$emit('on-filter-settings-change', data)
|
|
103
|
+
this.onPreventClose(false)
|
|
104
|
+
},
|
|
105
|
+
onCancelSettings() {
|
|
106
|
+
this.onToggleDropdown()
|
|
107
|
+
this.$emit('on-cancel-view')
|
|
108
|
+
},
|
|
109
|
+
onViewSelect(item) {
|
|
110
|
+
this.onToggleDropdown()
|
|
111
|
+
this.$emit('on-filter-view-select', item)
|
|
112
|
+
},
|
|
113
|
+
onViewDelete(item) {
|
|
114
|
+
this.$emit('on-filter-view-delete', item)
|
|
115
|
+
},
|
|
116
|
+
onApplyCurrentView() {
|
|
117
|
+
this.onToggleDropdown()
|
|
118
|
+
this.$emit('on-apply-current-view')
|
|
119
|
+
},
|
|
120
|
+
onResetFilters() {
|
|
121
|
+
this.onToggleDropdown()
|
|
122
|
+
this.$emit('on-reset-filters')
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
mounted() {
|
|
126
|
+
document.addEventListener('click', this.clickOutside)
|
|
127
|
+
},
|
|
128
|
+
beforeDestroy() {
|
|
129
|
+
document.removeEventListener('click', this.clickOutside)
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
</script>
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<page-wrapper @click="$emit('on-toggle')">
|
|
3
|
+
<icon-wrapper>
|
|
4
|
+
<icon name="settings" size="18px" />
|
|
5
|
+
</icon-wrapper>
|
|
6
|
+
<title-wrapper :isOpen="isOpen">
|
|
7
|
+
<title-text>
|
|
8
|
+
{{ dropdownText }}
|
|
9
|
+
</title-text>
|
|
10
|
+
<arrow-wrapper>
|
|
11
|
+
<icon
|
|
12
|
+
@click.native.stop="$emit('on-toggle')"
|
|
13
|
+
:name="isOpen ? 'arrow_up' : 'arrow_down'"
|
|
14
|
+
size="12px"
|
|
15
|
+
/>
|
|
16
|
+
</arrow-wrapper>
|
|
17
|
+
</title-wrapper>
|
|
18
|
+
</page-wrapper>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
import styled from 'vue-styled-components'
|
|
23
|
+
import Icon from '../icon'
|
|
24
|
+
|
|
25
|
+
const PageWrapper = styled.div`
|
|
26
|
+
display: grid;
|
|
27
|
+
grid-template-columns: auto auto;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
`
|
|
30
|
+
|
|
31
|
+
const IconWrapper = styled.div`
|
|
32
|
+
display: grid;
|
|
33
|
+
align-items: center;
|
|
34
|
+
justify-items: center;
|
|
35
|
+
border: 1px solid ${(props) => props.theme.colors.grey4};
|
|
36
|
+
border-radius: 4px 0px 0px 4px;
|
|
37
|
+
padding: 6px;
|
|
38
|
+
`
|
|
39
|
+
|
|
40
|
+
const TitleAttrs = { isOpen: Boolean }
|
|
41
|
+
const TitleWrapper = styled('div', TitleAttrs)`
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-columns: auto auto;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-items: center;
|
|
46
|
+
grid-gap: 10px;
|
|
47
|
+
border: 1px solid ${(props) => props.theme.colors.grey4};
|
|
48
|
+
background-color: ${(props) =>
|
|
49
|
+
props.isOpen ? props.theme.colors.grey5 : props.theme.colors.white};
|
|
50
|
+
border-left: none;
|
|
51
|
+
border-radius: 0px 4px 4px 0px;
|
|
52
|
+
padding: 6px 14px;
|
|
53
|
+
user-select: none;
|
|
54
|
+
`
|
|
55
|
+
|
|
56
|
+
const TitleText = styled.div`
|
|
57
|
+
font-size: 13px;
|
|
58
|
+
`
|
|
59
|
+
|
|
60
|
+
const ArrowWrapper = styled.div`
|
|
61
|
+
display: grid;
|
|
62
|
+
align-items: center;
|
|
63
|
+
|
|
64
|
+
div {
|
|
65
|
+
height: auto !important;
|
|
66
|
+
min-height: unset;
|
|
67
|
+
}
|
|
68
|
+
`
|
|
69
|
+
|
|
70
|
+
export default {
|
|
71
|
+
name: 'parent-dropdown',
|
|
72
|
+
components: {
|
|
73
|
+
PageWrapper,
|
|
74
|
+
Icon,
|
|
75
|
+
IconWrapper,
|
|
76
|
+
TitleWrapper,
|
|
77
|
+
TitleText,
|
|
78
|
+
ArrowWrapper
|
|
79
|
+
},
|
|
80
|
+
props: {
|
|
81
|
+
isOpen: {
|
|
82
|
+
required: true,
|
|
83
|
+
default: false
|
|
84
|
+
},
|
|
85
|
+
dropdownText: {
|
|
86
|
+
required: true,
|
|
87
|
+
default: 'View'
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
</script>
|
|
@@ -1,129 +1,144 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
:disabled="disabled"
|
|
4
|
-
:size="size"
|
|
5
|
-
:backgroundColor="backgroundColor"
|
|
2
|
+
<Wrapper
|
|
3
|
+
:disabled="disabled"
|
|
4
|
+
:size="size"
|
|
5
|
+
:backgroundColor="backgroundColor"
|
|
6
6
|
:borderRadius="borderRadius"
|
|
7
7
|
:hasBorder="hasBorder"
|
|
8
8
|
:color="iconColor"
|
|
9
9
|
:hoveredBackgroundColor="hoveredBackgroundColor"
|
|
10
10
|
:isHovered="isHovered"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
|
|
34
|
-
// How to use:
|
|
35
|
-
//<icon
|
|
36
|
-
// name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
|
|
37
|
-
// color="red"
|
|
38
|
-
// hoveredColor="blue"
|
|
39
|
-
// size="60px" by default, this is 30px
|
|
40
|
-
// />
|
|
41
|
-
|
|
42
|
-
import styled from 'vue-styled-components'
|
|
43
|
-
import icon from '../icon'
|
|
44
|
-
const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
|
|
45
|
-
const Wrapper = styled('div', wrapperAttrs)`
|
|
46
|
-
position:relative;
|
|
47
|
-
display: inline-flex;
|
|
48
|
-
width: ${(props) => props.size};
|
|
49
|
-
height: ${(props) => props.size};
|
|
50
|
-
border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
|
|
51
|
-
justify-content:center;
|
|
52
|
-
align-items:center;
|
|
53
|
-
cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
|
|
54
|
-
background-color: ${(props)=>props.theme.colors[props.backgroundColor] || props.backgroundColor};
|
|
55
|
-
border-radius: ${(props) => props.borderRadius};
|
|
56
|
-
${(props)=>(props.isHovered ? 'background-color:'+props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor : "")};
|
|
57
|
-
&:hover{
|
|
58
|
-
background-color:${(props)=>props.theme.colors[props.hoveredBackgroundColor] || props.hoveredBackgroundColor};
|
|
59
|
-
}
|
|
60
|
-
`
|
|
61
|
-
const caret=styled.div`
|
|
62
|
-
position:absolute;
|
|
63
|
-
bottom:3px;
|
|
64
|
-
right:2px;
|
|
65
|
-
height:10px;
|
|
66
|
-
`
|
|
11
|
+
>
|
|
12
|
+
<icon
|
|
13
|
+
:disabled="disabled"
|
|
14
|
+
:size="iconSize"
|
|
15
|
+
:name="name"
|
|
16
|
+
:color="iconColor"
|
|
17
|
+
:hoveredColor="hoveredIconColor"
|
|
18
|
+
:isStriked="isStriked"
|
|
19
|
+
/>
|
|
20
|
+
|
|
21
|
+
<caret v-if="hasCaret">
|
|
22
|
+
<iconWrapper
|
|
23
|
+
:disabled="disabled"
|
|
24
|
+
size="10px"
|
|
25
|
+
name="arrow_down"
|
|
26
|
+
:iconColor="iconColor"
|
|
27
|
+
:hoveredBackgroundColor="hoveredIconColor"
|
|
28
|
+
borderRadius="1px"
|
|
29
|
+
/>
|
|
30
|
+
</caret>
|
|
31
|
+
</Wrapper>
|
|
32
|
+
</template>
|
|
67
33
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
34
|
+
<script>
|
|
35
|
+
// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
|
|
36
|
+
// How to use:
|
|
37
|
+
//<icon
|
|
38
|
+
// name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
|
|
39
|
+
// color="red"
|
|
40
|
+
// hoveredColor="blue"
|
|
41
|
+
// size="60px" by default, this is 30px
|
|
42
|
+
// />
|
|
43
|
+
|
|
44
|
+
import styled from 'vue-styled-components'
|
|
45
|
+
import icon from '../icon'
|
|
46
|
+
const wrapperAttrs = {
|
|
47
|
+
color: String,
|
|
48
|
+
isHovered: Boolean,
|
|
49
|
+
borderRadius: String,
|
|
50
|
+
disabled: Boolean,
|
|
51
|
+
size: String,
|
|
52
|
+
backgroundColor: String,
|
|
53
|
+
hoveredBackgroundColor: String,
|
|
54
|
+
hasBorder: Boolean
|
|
55
|
+
}
|
|
56
|
+
const Wrapper = styled('div', wrapperAttrs)`
|
|
57
|
+
position: relative;
|
|
58
|
+
display: inline-flex;
|
|
59
|
+
width: ${(props) => props.size};
|
|
60
|
+
height: ${(props) => props.size};
|
|
61
|
+
border: ${(props) =>
|
|
62
|
+
props.hasBorder
|
|
63
|
+
? 'solid 1px ' + props.theme.colors[props.color] || props.color
|
|
64
|
+
: ''};
|
|
65
|
+
justify-content: center;
|
|
66
|
+
align-items: center;
|
|
67
|
+
cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
|
|
68
|
+
background-color: ${(props) =>
|
|
69
|
+
props.theme.colors[props.backgroundColor] || props.backgroundColor};
|
|
70
|
+
border-radius: ${(props) => props.borderRadius};
|
|
71
|
+
${(props) =>
|
|
72
|
+
props.isHovered
|
|
73
|
+
? 'background-color:' +
|
|
74
|
+
props.theme.colors[props.hoveredBackgroundColor] ||
|
|
75
|
+
props.hoveredBackgroundColor
|
|
76
|
+
: ''};
|
|
77
|
+
&:hover {
|
|
78
|
+
background-color: ${(props) =>
|
|
79
|
+
props.theme.colors[props.hoveredBackgroundColor] ||
|
|
80
|
+
props.hoveredBackgroundColor};
|
|
81
|
+
}
|
|
82
|
+
`
|
|
83
|
+
const caret = styled.div`
|
|
84
|
+
position: absolute;
|
|
85
|
+
bottom: 3px;
|
|
86
|
+
right: 2px;
|
|
87
|
+
height: 10px;
|
|
88
|
+
`
|
|
89
|
+
|
|
90
|
+
export default {
|
|
91
|
+
name: 'iconWrapper',
|
|
92
|
+
components: {
|
|
93
|
+
Wrapper,
|
|
94
|
+
icon,
|
|
95
|
+
caret
|
|
96
|
+
},
|
|
97
|
+
props: {
|
|
98
|
+
disabled: {
|
|
99
|
+
required: false,
|
|
100
|
+
default: false
|
|
101
|
+
},
|
|
102
|
+
name: {
|
|
103
|
+
required: true
|
|
104
|
+
},
|
|
105
|
+
iconColor: {
|
|
106
|
+
required: false,
|
|
107
|
+
default: 'white'
|
|
108
|
+
},
|
|
109
|
+
hoveredIconColor: {
|
|
110
|
+
required: false
|
|
111
|
+
},
|
|
112
|
+
backgroundColor: {
|
|
113
|
+
required: false
|
|
114
|
+
},
|
|
115
|
+
hoveredBackgroundColor: {
|
|
116
|
+
required: false,
|
|
117
|
+
default: 'transparentWhite1'
|
|
118
|
+
},
|
|
119
|
+
size: {
|
|
120
|
+
required: false,
|
|
121
|
+
default: '32px'
|
|
122
|
+
},
|
|
123
|
+
iconSize: {
|
|
124
|
+
required: false,
|
|
125
|
+
default: '18px'
|
|
126
|
+
},
|
|
127
|
+
hasCaret: {
|
|
128
|
+
required: false,
|
|
129
|
+
default: false
|
|
74
130
|
},
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
default: false
|
|
79
|
-
},
|
|
80
|
-
name: {
|
|
81
|
-
required: true
|
|
82
|
-
},
|
|
83
|
-
iconColor: {
|
|
84
|
-
required: false,
|
|
85
|
-
default: 'white'
|
|
86
|
-
},
|
|
87
|
-
hoveredIconColor: {
|
|
88
|
-
required: false
|
|
89
|
-
},
|
|
90
|
-
backgroundColor: {
|
|
91
|
-
required: false,
|
|
92
|
-
},
|
|
93
|
-
hasBorder: {
|
|
94
|
-
required: false,
|
|
95
|
-
},
|
|
96
|
-
hoveredBackgroundColor: {
|
|
97
|
-
required: false,
|
|
98
|
-
default:"transparentWhite1"
|
|
99
|
-
},
|
|
100
|
-
size: {
|
|
101
|
-
required: false,
|
|
102
|
-
default: '32px'
|
|
103
|
-
},
|
|
104
|
-
iconSize:{
|
|
105
|
-
required: false,
|
|
106
|
-
default:'18px'
|
|
107
|
-
},
|
|
108
|
-
hasCaret:{
|
|
109
|
-
required: false,
|
|
110
|
-
default: false
|
|
111
|
-
},
|
|
112
|
-
borderRadius:{
|
|
113
|
-
required:false,
|
|
114
|
-
default:'4px'
|
|
115
|
-
},
|
|
116
|
-
isHovered:{
|
|
117
|
-
required:false,
|
|
118
|
-
default:false
|
|
119
|
-
},
|
|
120
|
-
isStriked:{
|
|
121
|
-
required:false,
|
|
122
|
-
default:false
|
|
123
|
-
}
|
|
131
|
+
borderRadius: {
|
|
132
|
+
required: false,
|
|
133
|
+
default: '6px'
|
|
124
134
|
},
|
|
125
|
-
|
|
126
|
-
|
|
135
|
+
isHovered: {
|
|
136
|
+
required: false,
|
|
137
|
+
default: false
|
|
127
138
|
}
|
|
139
|
+
},
|
|
140
|
+
data() {
|
|
141
|
+
return {}
|
|
128
142
|
}
|
|
129
|
-
|
|
143
|
+
}
|
|
144
|
+
</script>
|
|
@@ -433,6 +433,10 @@ export default {
|
|
|
433
433
|
labelFontColor: {
|
|
434
434
|
required: false,
|
|
435
435
|
default: 'eturnityGrey'
|
|
436
|
+
},
|
|
437
|
+
focus: {
|
|
438
|
+
required: false,
|
|
439
|
+
default: false
|
|
436
440
|
}
|
|
437
441
|
},
|
|
438
442
|
computed: {
|
|
@@ -660,7 +664,17 @@ export default {
|
|
|
660
664
|
})
|
|
661
665
|
}
|
|
662
666
|
},
|
|
667
|
+
mounted() {
|
|
668
|
+
if (this.focus) {
|
|
669
|
+
this.focusInput()
|
|
670
|
+
}
|
|
671
|
+
},
|
|
663
672
|
watch: {
|
|
673
|
+
focus(value) {
|
|
674
|
+
if (value) {
|
|
675
|
+
this.focusInput()
|
|
676
|
+
}
|
|
677
|
+
},
|
|
664
678
|
clearInput: function (value) {
|
|
665
679
|
if (value) {
|
|
666
680
|
// If the value is typed, then we should clear the textInput on Continue
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<container>
|
|
2
|
+
<container :inputWidth="inputWidth">
|
|
3
3
|
<input-wrapper>
|
|
4
4
|
<input-container
|
|
5
5
|
ref="inputElement"
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
:disabled="disabled"
|
|
10
10
|
:isDisabled="disabled"
|
|
11
11
|
:inputWidth="inputWidth"
|
|
12
|
+
:isFilter="isFilter"
|
|
12
13
|
:hasFocus="hasFocus"
|
|
13
14
|
/>
|
|
14
15
|
<img
|
|
@@ -28,18 +29,24 @@
|
|
|
28
29
|
// :disabled="true"
|
|
29
30
|
// inputWidth="250px"
|
|
30
31
|
// @on-change="function($event)"
|
|
32
|
+
// :isFilter="true" // to set the height at 30px
|
|
31
33
|
// />
|
|
32
34
|
import styled from 'vue-styled-components'
|
|
33
35
|
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
+
const inputAttrs = {
|
|
37
|
+
isDisabled: Boolean,
|
|
38
|
+
inputWidth: String,
|
|
39
|
+
isFilter: Boolean
|
|
40
|
+
}
|
|
41
|
+
const Container = styled('div', inputAttrs)`
|
|
42
|
+
width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
|
|
36
43
|
position: relative;
|
|
37
44
|
`
|
|
38
45
|
|
|
39
|
-
const inputAttrs = { isDisabled: Boolean, inputWidth: String }
|
|
40
46
|
const InputContainer = styled('input', inputAttrs)`
|
|
41
|
-
border: 1px solid ${(props) => props.theme.colors.
|
|
42
|
-
padding:
|
|
47
|
+
border: 1px solid ${(props) => props.theme.colors.grey4};
|
|
48
|
+
padding: ${(props) =>
|
|
49
|
+
props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
|
|
43
50
|
border-radius: 4px;
|
|
44
51
|
font-size: 13px;
|
|
45
52
|
color: ${(props) => props.theme.colors.black};
|
|
@@ -90,6 +97,10 @@ export default {
|
|
|
90
97
|
required: false,
|
|
91
98
|
default: null
|
|
92
99
|
},
|
|
100
|
+
isFilter: {
|
|
101
|
+
required: false,
|
|
102
|
+
default: false
|
|
103
|
+
},
|
|
93
104
|
hasFocus: {
|
|
94
105
|
required: false,
|
|
95
106
|
default: false
|
|
@@ -99,10 +110,10 @@ export default {
|
|
|
99
110
|
onChangeHandler(event) {
|
|
100
111
|
this.$emit('on-change', event)
|
|
101
112
|
},
|
|
102
|
-
focusInputElement(){
|
|
113
|
+
focusInputElement() {
|
|
103
114
|
this.$nextTick(() => {
|
|
104
|
-
this.$refs.inputElement.$el.focus()
|
|
105
|
-
})
|
|
115
|
+
this.$refs.inputElement.$el.focus()
|
|
116
|
+
})
|
|
106
117
|
}
|
|
107
118
|
},
|
|
108
119
|
watch: {
|
|
@@ -112,6 +123,5 @@ export default {
|
|
|
112
123
|
}
|
|
113
124
|
}
|
|
114
125
|
}
|
|
115
|
-
|
|
116
126
|
}
|
|
117
127
|
</script>
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
ref="select"
|
|
33
33
|
@click="toggleDropdown"
|
|
34
34
|
:selectHeight="selectHeight"
|
|
35
|
+
:height="height"
|
|
35
36
|
:selectMinHeight="selectMinHeight"
|
|
36
37
|
:bgColor="
|
|
37
38
|
buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
|
|
@@ -145,7 +146,6 @@ const Caret = styled.div`
|
|
|
145
146
|
min-width: 30px;
|
|
146
147
|
height: 100%;
|
|
147
148
|
align-items: stretch
|
|
148
|
-
padding-top: 5px;
|
|
149
149
|
cursor: pointer;
|
|
150
150
|
margin-left: auto;
|
|
151
151
|
`
|
|
@@ -193,6 +193,7 @@ const selectButtonAttrs = {
|
|
|
193
193
|
hasError: Boolean,
|
|
194
194
|
disabled: Boolean,
|
|
195
195
|
selectHeight: String,
|
|
196
|
+
height: String,
|
|
196
197
|
selectMinHeight: String,
|
|
197
198
|
isSearchBarVisible: Boolean,
|
|
198
199
|
showBorder: Boolean
|
|
@@ -204,7 +205,14 @@ const selectButton = styled('div', selectButtonAttrs)`
|
|
|
204
205
|
padding: ${(props) => (props.isSearchBarVisible ? '0' : '0px 0px 0 15px')};
|
|
205
206
|
text-align: left;
|
|
206
207
|
border-radius: 4px;
|
|
207
|
-
min-height: ${(props) =>
|
|
208
|
+
min-height: ${(props) =>
|
|
209
|
+
props.selectHeight
|
|
210
|
+
? props.selectHeight
|
|
211
|
+
: props.selectMinHeight
|
|
212
|
+
? props.selectMinHeight
|
|
213
|
+
: props.height
|
|
214
|
+
? props.height
|
|
215
|
+
: '36px'};
|
|
208
216
|
display: flex;
|
|
209
217
|
align-items: center;
|
|
210
218
|
max-height: ${(props) => props.selectHeight};
|
|
@@ -254,8 +262,9 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
|
|
|
254
262
|
props.theme.colors[props.fontColor]
|
|
255
263
|
? props.theme.colors[props.fontColor]
|
|
256
264
|
: props.fontColor};
|
|
257
|
-
max-height:300px;
|
|
258
|
-
|
|
265
|
+
max-height: 300px;
|
|
266
|
+
min-height: 39px;
|
|
267
|
+
overflow-y: auto;
|
|
259
268
|
& [data-value="${(props) => props.selectedValue}"]{
|
|
260
269
|
backdrop-filter: brightness(1.4);
|
|
261
270
|
}
|
|
@@ -309,6 +318,10 @@ export default {
|
|
|
309
318
|
required: false,
|
|
310
319
|
default: null
|
|
311
320
|
},
|
|
321
|
+
height: {
|
|
322
|
+
required: false,
|
|
323
|
+
default: null
|
|
324
|
+
},
|
|
312
325
|
selectMinHeight: {
|
|
313
326
|
required: false,
|
|
314
327
|
default: '36px'
|