@eturnity/eturnity_reusable_components 1.2.48-EPDM-5846.3 → 1.2.48-EPDM-5846.5
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
@@ -42,9 +42,9 @@
|
|
42
42
|
:value="textSearch"
|
43
43
|
@keydown.stop="onKeyDown"
|
44
44
|
@input-change="searchChange" />
|
45
|
-
<
|
45
|
+
<selector v-else>
|
46
46
|
<slot name="selector" :selectedValue="selectedValue"></slot>
|
47
|
-
</
|
47
|
+
</selector>
|
48
48
|
<Caret @click.stop="toggleCaretDropdown" >
|
49
49
|
<icon v-if="isDropdownOpen" name="arrow_up" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
|
50
50
|
<icon v-else name="arrow_down" size="12px" :color="caretColor || colorMode=='dark'?'white':'transparentBlack1'"/>
|
@@ -95,14 +95,21 @@
|
|
95
95
|
import icon from '../../icon'
|
96
96
|
import inputText from '../inputText'
|
97
97
|
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
98
|
+
const Caret = styled.div`
|
99
|
+
display: flex;
|
100
|
+
align-items: center;
|
101
|
+
justify-content: center;
|
102
|
+
width: 30px;
|
103
|
+
min-width: 30px;
|
104
|
+
height: 100%;
|
104
105
|
padding-top: 5px;
|
105
|
-
|
106
|
+
cursor: pointer;
|
107
|
+
margin-left: auto;
|
108
|
+
`
|
109
|
+
|
110
|
+
const Selector = styled.div`
|
111
|
+
width: 100%;
|
112
|
+
`
|
106
113
|
|
107
114
|
const labelAttrs = { fontSize: String }
|
108
115
|
const InputLabel = styled('div', labelAttrs)`
|
@@ -138,8 +145,7 @@ const selectButton = styled('div',selectButtonAttrs)`
|
|
138
145
|
text-align:left;
|
139
146
|
border-radius:4px;
|
140
147
|
min-height:36px;
|
141
|
-
display:
|
142
|
-
grid-template-columns:auto 40px;
|
148
|
+
display: flex;
|
143
149
|
align-items: center;
|
144
150
|
max-height:${props=>props.selectHeight};
|
145
151
|
border:1px solid ${(props) => props.hasError ? props.theme.colors.red : props.theme.colors.grey4}
|
@@ -272,6 +278,7 @@ const InputWrapper = styled('div', inputAttrs)`
|
|
272
278
|
DropdownWrapper,
|
273
279
|
icon,
|
274
280
|
Caret,
|
281
|
+
Selector,
|
275
282
|
inputText
|
276
283
|
},
|
277
284
|
|
@@ -3,7 +3,7 @@
|
|
3
3
|
<slot></slot>
|
4
4
|
</optionContainer>
|
5
5
|
</template>
|
6
|
-
|
6
|
+
|
7
7
|
<script>
|
8
8
|
// import selectButton from './selectButton'
|
9
9
|
// import selectDropdown from './selectDropDown'
|
@@ -15,7 +15,7 @@
|
|
15
15
|
flex-direction: row;
|
16
16
|
justify-content: space-between;
|
17
17
|
align-items: center;
|
18
|
-
padding: 12px
|
18
|
+
padding: 12px 10px;
|
19
19
|
gap: 14px;
|
20
20
|
width:100%;
|
21
21
|
box-sizing:inherit;
|
@@ -23,10 +23,10 @@
|
|
23
23
|
background-color:${(props) => props.theme.colors[props.hoveredBgColor]?props.theme.colors[props.hoveredBgColor]:props.hoveredBgColor};
|
24
24
|
}
|
25
25
|
`
|
26
|
-
|
26
|
+
|
27
27
|
export default {
|
28
28
|
name: 'RCoption',
|
29
|
-
|
29
|
+
|
30
30
|
props: {
|
31
31
|
value: {
|
32
32
|
required: true
|
@@ -39,9 +39,9 @@
|
|
39
39
|
default:'light'
|
40
40
|
}
|
41
41
|
},
|
42
|
-
|
42
|
+
|
43
43
|
components: {optionContainer},
|
44
|
-
|
44
|
+
|
45
45
|
data() {
|
46
46
|
return {}
|
47
47
|
},
|
@@ -57,4 +57,3 @@
|
|
57
57
|
}
|
58
58
|
}
|
59
59
|
</script>
|
60
|
-
|