@eturnity/eturnity_reusable_components 6.50.0 → 6.50.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 +1 -1
- package/src/App.vue +3 -1
- package/src/assets/svgIcons/erase.svg +1 -1
- package/src/components/icon/iconCollection.vue +5 -5
- package/src/components/icon/index.vue +2 -1
- package/src/components/infoCard/index.vue +38 -0
- package/src/components/inputs/switchField/index.vue +6 -2
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -114,6 +114,7 @@ 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'
|
|
117
118
|
// import TableDropdown from "@/components/tableDropdown"
|
|
118
119
|
|
|
119
120
|
const PageContainer = styled.div`
|
|
@@ -138,7 +139,8 @@ export default {
|
|
|
138
139
|
iconCollection,
|
|
139
140
|
dropdownComponent,
|
|
140
141
|
videoThumbnail,
|
|
141
|
-
icon
|
|
142
|
+
icon,
|
|
143
|
+
infoCard
|
|
142
144
|
},
|
|
143
145
|
data() {
|
|
144
146
|
return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
<svg fill="none" height="16" viewbox="12 12 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle cx="20" cy="20"
|
|
2
|
+
<circle cx="20" cy="20" r="7"></circle>
|
|
3
3
|
<path d="M24.9592 15.0408C22.2382 12.3197 17.7618 12.3197 15.0408 15.0408C12.3197 17.7618 12.3197 22.2382 15.0408 24.9592C17.7618 27.6803 22.2382 27.6803 24.9592 24.9592C27.6803 22.2382 27.6803 17.8495 24.9592 15.0408ZM23.6426 22.5016L22.4138 23.7304L19.9561 21.2727L17.4984 23.7304L16.2696 22.5016L18.7273 20.0439L16.2696 17.5862L17.4984 16.3574L19.9561 18.815L22.4138 16.3574L23.6426 17.5862L21.185 20.0439L23.6426 22.5016Z" fill="#FF5656"></path>
|
|
4
4
|
</svg>
|
|
@@ -20,13 +20,13 @@ import styled from 'vue-styled-components'
|
|
|
20
20
|
|
|
21
21
|
const Wrapper = styled.div`
|
|
22
22
|
display: block;
|
|
23
|
-
text-align:center;
|
|
24
|
-
justify-items:center
|
|
25
|
-
width:100%;
|
|
26
|
-
background-color
|
|
23
|
+
text-align: center;
|
|
24
|
+
justify-items: center;
|
|
25
|
+
width: 100%;
|
|
26
|
+
background-color: #ccc;
|
|
27
27
|
`
|
|
28
28
|
const IconWrapper = styled.div`
|
|
29
|
-
display:inline-flex
|
|
29
|
+
display: inline-flex;
|
|
30
30
|
flex-direction: column;
|
|
31
31
|
background-color: white;
|
|
32
32
|
border-radius: 6px;
|
|
@@ -30,7 +30,7 @@ import styled from 'vue-styled-components'
|
|
|
30
30
|
const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
|
|
31
31
|
const Wrapper = styled('div', wrapperAttrs)`
|
|
32
32
|
display: flex;
|
|
33
|
-
position:relative
|
|
33
|
+
position: relative;
|
|
34
34
|
align-content: center;
|
|
35
35
|
justify-content: center;
|
|
36
36
|
width: ${(props) => props.size};
|
|
@@ -58,6 +58,7 @@ const strikedLine = styled('div', strikedAttrs)`
|
|
|
58
58
|
`
|
|
59
59
|
const IconImageProps = { color: String, hoveredColor: String, size: String }
|
|
60
60
|
const IconImage = styled('div', IconImageProps)`
|
|
61
|
+
width: 100%;
|
|
61
62
|
svg {
|
|
62
63
|
width: 100%;
|
|
63
64
|
height: 100%;
|
|
@@ -0,0 +1,38 @@
|
|
|
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>
|
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
v-if="label && labelAlign === 'left'"
|
|
11
11
|
:hasInfoMessage="!!infoTextMessage"
|
|
12
12
|
:colorMode="colorMode"
|
|
13
|
+
:primaryColor="primaryColor"
|
|
14
|
+
:secondaryColor="secondaryColor"
|
|
13
15
|
>
|
|
14
16
|
<label-text :size="size">{{ label }}</label-text>
|
|
15
17
|
<info-text
|
|
@@ -99,10 +101,12 @@ const toggleAttrs = {
|
|
|
99
101
|
fontColor: String,
|
|
100
102
|
disabled: Boolean,
|
|
101
103
|
backgroundColor: String,
|
|
102
|
-
isChecked: Boolean
|
|
104
|
+
isChecked: Boolean,
|
|
105
|
+
secondaryColor: String,
|
|
106
|
+
primaryColor: String,
|
|
103
107
|
}
|
|
104
108
|
const LabelText = styled('div', toggleAttrs)`
|
|
105
|
-
color:
|
|
109
|
+
color: ${(props) => props.primaryColor };
|
|
106
110
|
font-size: 13px;
|
|
107
111
|
font-weight: 700;
|
|
108
112
|
`
|