@eturnity/eturnity_reusable_components 6.39.1-EPDM-6921 → 6.39.1-EPDM-8599.0
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
|
@@ -4,6 +4,16 @@
|
|
|
4
4
|
<br />
|
|
5
5
|
|
|
6
6
|
{{ alignItems }}
|
|
7
|
+
<infoCard>
|
|
8
|
+
Hello there here is a lot of text decnicninec
|
|
9
|
+
ceecc
|
|
10
|
+
ec
|
|
11
|
+
ececc
|
|
12
|
+
ececeecec
|
|
13
|
+
cecececec
|
|
14
|
+
<br>
|
|
15
|
+
deed
|
|
16
|
+
</infoCard>
|
|
7
17
|
<input-number
|
|
8
18
|
:value="value"
|
|
9
19
|
:minNumber="0"
|
|
@@ -112,6 +122,7 @@ import iconCollection from '@/components/icon/iconCollection'
|
|
|
112
122
|
import dropdownComponent from '@/components/dropdown'
|
|
113
123
|
import videoThumbnail from '@/components/videoThumbnail'
|
|
114
124
|
import icon from '@/components/icon'
|
|
125
|
+
import infoCard from '@/components/infoCard'
|
|
115
126
|
// import TableDropdown from "@/components/tableDropdown"
|
|
116
127
|
|
|
117
128
|
const PageContainer = styled.div`
|
|
@@ -136,7 +147,8 @@ export default {
|
|
|
136
147
|
iconCollection,
|
|
137
148
|
dropdownComponent,
|
|
138
149
|
videoThumbnail,
|
|
139
|
-
icon
|
|
150
|
+
icon,
|
|
151
|
+
infoCard
|
|
140
152
|
},
|
|
141
153
|
data() {
|
|
142
154
|
return {
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<info-container>
|
|
3
|
+
<icon name="info" size="30px" />
|
|
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
|
+
`
|
|
23
|
+
|
|
24
|
+
const InfoTextContainer = styled('div')`
|
|
25
|
+
font-size: 13px;
|
|
26
|
+
`
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
export default {
|
|
30
|
+
components:{
|
|
31
|
+
icon,
|
|
32
|
+
InfoTextContainer,
|
|
33
|
+
InfoContainer
|
|
34
|
+
},
|
|
35
|
+
props:[]
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
ref="select"
|
|
31
31
|
@click="toggleDropdown"
|
|
32
32
|
:selectHeight="selectHeight"
|
|
33
|
-
:height="height"
|
|
34
33
|
:bgColor="
|
|
35
34
|
buttonBgColor || colorMode == 'dark' ? 'transparentBlack1' : 'white'
|
|
36
35
|
"
|
|
@@ -141,7 +140,9 @@ const Caret = styled.div`
|
|
|
141
140
|
justify-content: center;
|
|
142
141
|
width: 30px;
|
|
143
142
|
min-width: 30px;
|
|
144
|
-
|
|
143
|
+
height: 100%;
|
|
144
|
+
align-items: stretch
|
|
145
|
+
padding-top: 5px;
|
|
145
146
|
cursor: pointer;
|
|
146
147
|
margin-left: auto;
|
|
147
148
|
`
|
|
@@ -190,7 +191,6 @@ const selectButtonAttrs = {
|
|
|
190
191
|
hasError: Boolean,
|
|
191
192
|
disabled: Boolean,
|
|
192
193
|
selectHeight: String,
|
|
193
|
-
height: String,
|
|
194
194
|
isSearchBarVisible: Boolean,
|
|
195
195
|
showBorder: Boolean
|
|
196
196
|
}
|
|
@@ -206,7 +206,6 @@ const selectButton = styled('div', selectButtonAttrs)`
|
|
|
206
206
|
display: flex;
|
|
207
207
|
align-items: center;
|
|
208
208
|
max-height: ${(props) => props.selectHeight};
|
|
209
|
-
${(props) => (props.height ? `height: ${props.height}` : '')};
|
|
210
209
|
${({ showBorder, theme, hasError }) =>
|
|
211
210
|
showBorder &&
|
|
212
211
|
`
|
|
@@ -307,10 +306,6 @@ export default {
|
|
|
307
306
|
required: false,
|
|
308
307
|
default: null
|
|
309
308
|
},
|
|
310
|
-
height: {
|
|
311
|
-
required: false,
|
|
312
|
-
default: null
|
|
313
|
-
},
|
|
314
309
|
optionWidth: {
|
|
315
310
|
required: false,
|
|
316
311
|
default: null
|